From 4410f17eb4979a1477b5837a7f517431f97daa50 Mon Sep 17 00:00:00 2001
From: Chilfish <chill4fish@gmail.com>
Date: Sun, 27 Sep 2026 14:20:32 +0800
Subject: [PATCH 1/8] feat(article): parse, render and translate X articles on
 a reader page
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- request article rich content via TweetRequests.details() fieldToggles
  (JSON string, not object — X silently ignores the axios-serialized form)
- map the article node to a TweetArticle block document parsed from
  Draft.js content_state (paragraphs, headings, lists, markdown, media,
  embeds); split inline runs at entity AND style boundaries so partial
  Bold/Italic ranges are not smeared across the whole block
- render blocks on a dedicated /article/:id page with reader toolbar,
  three-state translation and real inline-tweet embeds (parallel fetch,
  graceful fallback to a link card)
- translate articles per block key with placeholder anchoring; persist to
  localCache + new tweet_article_translations table (migration)
- add react-markdown + remark-gfm for MARKDOWN (GFM) entities
- backfill flat article caches at the getLocalTweet exit

Co-authored-by: CommandCodeBot <noreply@commandcode.ai>
---
 app/components/article/ArticleBody.tsx        | 178 ++++++++++
 app/components/article/ArticleEmbedTweet.tsx  |  19 ++
 .../article/ArticleEmbeddedTweet.tsx          |  16 +
 app/components/article/ArticleImage.tsx       |  31 ++
 app/components/article/ArticleMarkdown.tsx    |  55 +++
 app/components/article/ArticleOptionsMenu.tsx | 138 ++++++++
 app/components/article/ArticleRuns.tsx        |  30 ++
 app/components/article/ArticleToolbar.tsx     |  94 ++++++
 .../article/ArticleTranslateToggle.tsx        |  55 +++
 .../article/ArticleTranslatedText.tsx         |  43 +++
 app/components/article/index.ts               |  10 +
 app/components/tweet/PlainTweet.tsx           |   3 +
 app/components/tweet/TweetArticleCard.tsx     |  74 +++++
 app/components/tweet/TweetNode.tsx            |  10 +
 app/components/tweet/index.ts                 |   1 +
 app/hooks/use-auto-translate-article.ts       | 115 +++++++
 app/lib/article/index.ts                      |   2 +
 app/lib/article/markdown.ts                   |  98 ++++++
 app/lib/article/parse.ts                      | 312 ++++++++++++++++++
 app/lib/article/translate.ts                  | 224 +++++++++++++
 app/lib/database/schema.ts                    |  20 ++
 app/lib/localCache.ts                         |   2 +-
 app/lib/obs-log.ts                            |   1 +
 .../react-tweet/twitter-theme/tweet-body.tsx  |   5 +
 app/lib/react-tweet/utils/article.ts          | 118 +++++++
 app/lib/react-tweet/utils/index.ts            |   1 +
 app/lib/react-tweet/utils/parseTweet.ts       |   5 +-
 app/lib/rettiwt-api/requests/Tweet.ts         |   3 +-
 .../rettiwt-api/types/raw/tweet/Details.ts    | 100 ++++++
 app/lib/service/articleTranslationSync.ts     |  20 ++
 app/lib/service/getTweet.server.ts            | 101 +++++-
 app/lib/stores/hooks.ts                       |  13 +
 app/lib/stores/translation.ts                 |  21 ++
 app/lib/validations/tweet.ts                  |  23 +-
 app/routes.ts                                 |   1 +
 app/routes/api/ai/ai-translation.ts           |  64 ++++
 app/routes/api/tweet/set.ts                   |   8 +-
 app/routes/article.tsx                        | 209 ++++++++++++
 app/types/article.ts                          |  64 ++++
 app/types/index.ts                            |   3 +
 bun.lock                                      |  82 +++++
 drizzle/0002_greedy_omega_red.sql             |   9 +
 drizzle/meta/0002_snapshot.json               | 311 +++++++++++++++++
 drizzle/meta/_journal.json                    |   7 +
 package.json                                  |   2 +
 45 files changed, 2693 insertions(+), 8 deletions(-)
 create mode 100644 app/components/article/ArticleBody.tsx
 create mode 100644 app/components/article/ArticleEmbedTweet.tsx
 create mode 100644 app/components/article/ArticleEmbeddedTweet.tsx
 create mode 100644 app/components/article/ArticleImage.tsx
 create mode 100644 app/components/article/ArticleMarkdown.tsx
 create mode 100644 app/components/article/ArticleOptionsMenu.tsx
 create mode 100644 app/components/article/ArticleRuns.tsx
 create mode 100644 app/components/article/ArticleToolbar.tsx
 create mode 100644 app/components/article/ArticleTranslateToggle.tsx
 create mode 100644 app/components/article/ArticleTranslatedText.tsx
 create mode 100644 app/components/article/index.ts
 create mode 100644 app/components/tweet/TweetArticleCard.tsx
 create mode 100644 app/hooks/use-auto-translate-article.ts
 create mode 100644 app/lib/article/index.ts
 create mode 100644 app/lib/article/markdown.ts
 create mode 100644 app/lib/article/parse.ts
 create mode 100644 app/lib/article/translate.ts
 create mode 100644 app/lib/react-tweet/utils/article.ts
 create mode 100644 app/lib/service/articleTranslationSync.ts
 create mode 100644 app/routes/article.tsx
 create mode 100644 app/types/article.ts
 create mode 100644 drizzle/0002_greedy_omega_red.sql
 create mode 100644 drizzle/meta/0002_snapshot.json

diff --git a/app/components/article/ArticleBody.tsx b/app/components/article/ArticleBody.tsx
new file mode 100644
index 00000000..af77b68a
--- /dev/null
+++ b/app/components/article/ArticleBody.tsx
@@ -0,0 +1,178 @@
+import type { ReactNode } from 'react'
+import type { ArticleBlock, ArticleRun } from '~/types'
+import { Separator } from '~/components/ui/separator'
+import { TweetLink } from '~/lib/react-tweet/twitter-theme/tweet-link'
+import { cn } from '~/lib/utils'
+import { ArticleEmbedTweet } from './ArticleEmbedTweet'
+import { ArticleImage } from './ArticleImage'
+import { ArticleMarkdown } from './ArticleMarkdown'
+import { ArticleRuns } from './ArticleRuns'
+import { ArticleTranslatedText } from './ArticleTranslatedText'
+
+export type ArticleViewMode = 'original' | 'translation' | 'bilingual'
+
+/** 非列表块（列表项由外层归组为 <ul>/<ol> 统一渲染） */
+type ListBlock = Extract<ArticleBlock, { type: 'list-item' }>
+type FlowBlock = Exclude<ArticleBlock, ListBlock>
+
+const TEXT_CLASS = 'text-[15px] leading-7 text-foreground/90'
+
+const HEADING: Record<1 | 2 | 3, { tag: 'h2' | 'h3' | 'h4', className: string }> = {
+  1: { tag: 'h2', className: 'mt-8 mb-3 text-xl font-bold text-foreground' },
+  2: { tag: 'h3', className: 'mt-7 mb-2 text-lg font-semibold text-foreground' },
+  3: { tag: 'h4', className: 'mt-6 mb-2 text-base font-semibold text-foreground' },
+}
+
+/**
+ * 三态块文本：原文 / 仅译文 / 双语（原文 + 次级色译文）。
+ * 无译文或 `original` 模式时退化为原文，不引入空节点。
+ */
+function BlockText({ runs, translation, mode }: {
+  runs: ArticleRun[]
+  translation?: string
+  mode: ArticleViewMode
+}) {
+  if (!translation || mode === 'original')
+    return <ArticleRuns runs={runs} />
+
+  if (mode === 'translation')
+    return <ArticleTranslatedText translation={translation} runs={runs} />
+
+  return (
+    <>
+      <ArticleRuns runs={runs} />
+      <span className="mt-1 block border-l-2 border-border/70 pl-2.5 text-muted-foreground">
+        <ArticleTranslatedText translation={translation} runs={runs} />
+      </span>
+    </>
+  )
+}
+
+function FlowBlockView({ block, translation, mode, renderEmbed }: {
+  block: FlowBlock
+  translation?: string
+  mode: ArticleViewMode
+  renderEmbed?: (tweetId: string) => ReactNode
+}) {
+  switch (block.type) {
+    case 'markdown':
+      return <ArticleMarkdown text={block.text} />
+    case 'divider':
+      return <Separator className="my-4" />
+    case 'image':
+      return <ArticleImage media={block.media} caption={block.caption} />
+    case 'embed-tweet':
+      // 内嵌推文：阅读页注入真实推文组件；缺省（含离线渲染/取数失败）回退为轻量链接卡
+      return <>{renderEmbed?.(block.tweetId) ?? <ArticleEmbedTweet tweetId={block.tweetId} />}</>
+    case 'link':
+      return (
+        <p className={TEXT_CLASS}>
+          <TweetLink href={block.url}>{block.url}</TweetLink>
+        </p>
+      )
+    case 'unknown':
+      return block.text
+        ? <p className={cn(TEXT_CLASS, 'whitespace-pre-wrap')}>{block.text}</p>
+        : null
+    case 'paragraph':
+      return (
+        <p className={cn(TEXT_CLASS, 'whitespace-pre-wrap')}>
+          <BlockText runs={block.runs} translation={translation} mode={mode} />
+        </p>
+      )
+    case 'heading': {
+      const { tag: Tag, className } = HEADING[block.level]
+      return (
+        <Tag className={className}>
+          <BlockText runs={block.runs} translation={translation} mode={mode} />
+        </Tag>
+      )
+    }
+    case 'quote':
+      return (
+        <blockquote className="border-l-2 border-border pl-3 text-muted-foreground italic">
+          <BlockText runs={block.runs} translation={translation} mode={mode} />
+        </blockquote>
+      )
+  }
+}
+
+type BlockGroup
+  = | { kind: 'list', key: string, ordered: boolean, items: ListBlock[] }
+    | { kind: 'block', key: string, block: FlowBlock }
+
+/** 相邻且有序性一致的 list-item 归组为一个列表，其余块各自成组 */
+function groupBlocks(blocks: ArticleBlock[]): BlockGroup[] {
+  const groups: BlockGroup[] = []
+
+  for (const block of blocks) {
+    if (block.type !== 'list-item') {
+      groups.push({ kind: 'block', key: block.key, block })
+      continue
+    }
+
+    const last = groups[groups.length - 1]
+    if (last?.kind === 'list' && last.ordered === block.ordered) {
+      last.items.push(block)
+      continue
+    }
+    groups.push({ kind: 'list', key: block.key, ordered: block.ordered, items: [block] })
+  }
+
+  return groups
+}
+
+interface ArticleBodyProps {
+  blocks: ArticleBlock[]
+  /** 按块 key 索引的译文（缺省即无译文） */
+  translations?: Record<string, string>
+  mode?: ArticleViewMode
+  className?: string
+  /**
+   * 内嵌推文的自定义渲染。由阅读页注入真实的只读推文组件（数据并行取回）；
+   * 缺省或返回空值时回退为轻量链接卡（离线渲染 / 取数失败）。
+   */
+  renderEmbed?: (tweetId: string) => ReactNode
+}
+
+/** 块文档渲染器：按块翻译的三态（原文 / 译文 / 双语）由此统一承载 */
+export function ArticleBody({ blocks, translations, mode = 'original', className, renderEmbed }: ArticleBodyProps) {
+  return (
+    <div className={cn('space-y-4', className)}>
+      {groupBlocks(blocks).map((group) => {
+        if (group.kind === 'block') {
+          return (
+            <FlowBlockView
+              key={group.key}
+              block={group.block}
+              translation={translations?.[group.key]}
+              mode={mode}
+              renderEmbed={renderEmbed}
+            />
+          )
+        }
+
+        const ListTag = group.ordered ? 'ol' : 'ul'
+        return (
+          <ListTag
+            key={group.key}
+            className={cn(
+              'space-y-1.5 pl-5 text-[15px] leading-7 text-foreground/90',
+              group.ordered ? 'list-decimal' : 'list-disc',
+            )}
+          >
+            {group.items.map(item => (
+              <li key={item.key}>
+                <BlockText
+                  runs={item.runs}
+                  translation={translations?.[item.key]}
+                  mode={mode}
+                />
+              </li>
+            ))}
+          </ListTag>
+        )
+      })}
+    </div>
+  )
+}
diff --git a/app/components/article/ArticleEmbedTweet.tsx b/app/components/article/ArticleEmbedTweet.tsx
new file mode 100644
index 00000000..886c2e00
--- /dev/null
+++ b/app/components/article/ArticleEmbedTweet.tsx
@@ -0,0 +1,19 @@
+import { QuoteIcon } from 'lucide-react'
+
+/** 文章内嵌帖子：紧凑链接卡（不额外打上游取原文） */
+export function ArticleEmbedTweet({ tweetId }: { tweetId: string }) {
+  const url = `https://x.com/i/status/${tweetId}`
+
+  return (
+    <a
+      href={url}
+      target="_blank"
+      rel="noopener noreferrer nofollow"
+      className="my-3 flex items-center gap-2 rounded-xl border border-border/60 px-3 py-2.5 text-sm text-muted-foreground transition-colors hover:bg-muted/40"
+    >
+      <QuoteIcon className="size-4 shrink-0 text-primary" />
+      <span className="truncate">嵌入的帖子</span>
+      <span className="ml-auto shrink-0 text-xs text-primary">在 X 查看 →</span>
+    </a>
+  )
+}
diff --git a/app/components/article/ArticleEmbeddedTweet.tsx b/app/components/article/ArticleEmbeddedTweet.tsx
new file mode 100644
index 00000000..06afbc3c
--- /dev/null
+++ b/app/components/article/ArticleEmbeddedTweet.tsx
@@ -0,0 +1,16 @@
+import type { EnrichedTweet } from '~/types'
+import { MyPlainTweet } from '~/components/tweet/PlainTweet'
+
+/**
+ * 文章内嵌推文的只读渲染：复用推文卡片组件（`PlainTweet`）。
+ *
+ * 数据由阅读页 loader 并行取回后经 `ArticleBody.renderEmbed` 注入。推文自身的时间戳
+ * 已链接到 X 原帖，故不再额外提供「在 X 查看」入口。
+ */
+export function ArticleEmbeddedTweet({ tweet }: { tweet: EnrichedTweet }) {
+  return (
+    <div className="my-4">
+      <MyPlainTweet tweets={[tweet]} mainTweetId={tweet.id_str} enableTranslation={false} />
+    </div>
+  )
+}
diff --git a/app/components/article/ArticleImage.tsx b/app/components/article/ArticleImage.tsx
new file mode 100644
index 00000000..f390626a
--- /dev/null
+++ b/app/components/article/ArticleImage.tsx
@@ -0,0 +1,31 @@
+import type { ArticleMedia } from '~/types'
+import { MediaImage } from '~/components/ui/media'
+import { normalizeMediaUrl } from '~/lib/media-url'
+import { useProxyMedia } from '~/lib/stores/appConfig'
+
+/** 文章内嵌图片：代理加载、按原始比例展示，可选 caption */
+export function ArticleImage({ media, caption }: { media: ArticleMedia, caption?: string }) {
+  const proxyMedia = useProxyMedia()
+  const ratio = media.width && media.height ? `${media.width} / ${media.height}` : '16 / 9'
+
+  return (
+    <figure className="my-4">
+      <div
+        className="overflow-hidden rounded-xl border border-border/60 bg-muted/20"
+        style={{ aspectRatio: ratio }}
+      >
+        <MediaImage
+          src={proxyMedia(normalizeMediaUrl(media.url))}
+          alt={media.alt ?? caption ?? 'Article image'}
+          containerClassName="size-full"
+          className="size-full object-contain"
+        />
+      </div>
+      {caption && (
+        <figcaption className="mt-2 text-center text-xs text-muted-foreground">
+          {caption}
+        </figcaption>
+      )}
+    </figure>
+  )
+}
diff --git a/app/components/article/ArticleMarkdown.tsx b/app/components/article/ArticleMarkdown.tsx
new file mode 100644
index 00000000..7c46f6f6
--- /dev/null
+++ b/app/components/article/ArticleMarkdown.tsx
@@ -0,0 +1,55 @@
+import type { Components } from 'react-markdown'
+import Markdown from 'react-markdown'
+import remarkGfm from 'remark-gfm'
+
+/**
+ * `MARKDOWN` 实体的渲染器。
+ *
+ * X Article 没有独立的代码/表格块类型——作者写的 GFM（表格、```代码```、列表等）
+ * 原样存在 `entityMap[].value.data.markdown` 里，故这里用 react-markdown + remark-gfm 呈现。
+ * react-markdown 不产出 `dangerouslySetInnerHTML`，天然规避 XSS。
+ */
+
+/**
+ * react-markdown 会给每个自定义组件注入 `node`（mdast 节点）。它不是合法 DOM 属性，
+ * 直接 `{...props}` 会把它渲染成 HTML 属性并触发 React 警告，故统一剥离后再透传。
+ */
+function withoutNode<T extends { node?: unknown }>(props: T): Omit<T, 'node'> {
+  const { node: _node, ...rest } = props
+  return rest
+}
+
+const components: Components = {
+  h1: props => <h3 className="mt-6 mb-2 text-lg font-semibold text-foreground/90" {...withoutNode(props)} />,
+  h2: props => <h4 className="mt-5 mb-2 text-base font-semibold text-foreground/90" {...withoutNode(props)} />,
+  h3: props => <h5 className="mt-4 mb-1.5 text-sm font-semibold text-foreground/90" {...withoutNode(props)} />,
+  p: props => <p className="my-2 text-[15px] whitespace-pre-wrap leading-7 text-foreground/90" {...withoutNode(props)} />,
+  ul: props => <ul className="my-2 list-disc space-y-1 pl-5 text-[15px] leading-7 text-foreground/90" {...withoutNode(props)} />,
+  ol: props => <ol className="my-2 list-decimal space-y-1 pl-5 text-[15px] leading-7 text-foreground/90" {...withoutNode(props)} />,
+  li: props => <li className="leading-7" {...withoutNode(props)} />,
+  blockquote: props => <blockquote className="my-3 border-l-2 border-border pl-3 text-muted-foreground italic" {...withoutNode(props)} />,
+  a: props => <a className="text-primary hover:underline" target="_blank" rel="noopener noreferrer nofollow" {...withoutNode(props)} />,
+  hr: props => <hr className="my-4 border-border" {...withoutNode(props)} />,
+  strong: props => <strong className="font-semibold" {...withoutNode(props)} />,
+  em: props => <em className="italic" {...withoutNode(props)} />,
+  code: props => <code className="rounded bg-muted px-1.5 py-0.5 font-mono text-[13px]" {...withoutNode(props)} />,
+  pre: props => <pre className="my-3 overflow-x-auto rounded-md bg-muted/60 p-3 font-mono text-[13px] leading-relaxed" {...withoutNode(props)} />,
+  table: props => (
+    <div className="my-3 overflow-x-auto rounded-md border border-border/60">
+      <table className="w-full border-collapse text-sm" {...withoutNode(props)} />
+    </div>
+  ),
+  thead: props => <thead className="bg-muted/40" {...withoutNode(props)} />,
+  th: props => <th className="border-b border-border/60 px-3 py-2 text-left font-semibold text-foreground/90" {...withoutNode(props)} />,
+  td: props => <td className="border-b border-border/40 px-3 py-2 text-muted-foreground" {...withoutNode(props)} />,
+}
+
+export function ArticleMarkdown({ text }: { text: string }) {
+  return (
+    <div className="article-markdown">
+      <Markdown remarkPlugins={[remarkGfm]} components={components}>
+        {text}
+      </Markdown>
+    </div>
+  )
+}
diff --git a/app/components/article/ArticleOptionsMenu.tsx b/app/components/article/ArticleOptionsMenu.tsx
new file mode 100644
index 00000000..6fe1ff7c
--- /dev/null
+++ b/app/components/article/ArticleOptionsMenu.tsx
@@ -0,0 +1,138 @@
+import type { EnrichedTweet, TweetArticle } from '~/types'
+import { Download, FileText, MoreHorizontal, Settings, Share2 } from 'lucide-react'
+import { useState } from 'react'
+import { SettingsPanel } from '~/components/settings/SettingsPanel'
+import { Button } from '~/components/ui/button'
+import {
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuItem,
+  DropdownMenuSeparator,
+  DropdownMenuTrigger,
+} from '~/components/ui/dropdown-menu'
+import { articleToMarkdown, articleToText } from '~/lib/article/markdown'
+import { downloadFiles } from '~/lib/downloader'
+import { shareOut } from '~/lib/share'
+import { toast } from '~/lib/utils'
+
+interface ArticleOptionsMenuProps {
+  article: TweetArticle
+  tweet: EnrichedTweet
+}
+
+interface ArticleImageItem {
+  url: string
+  caption?: string
+}
+
+/** 收集文章内图片（封面 + 图片块），按 url 去重 */
+function collectImages(article: TweetArticle): ArticleImageItem[] {
+  const items: ArticleImageItem[] = []
+  if (article.coverImage)
+    items.push({ url: article.coverImage.url })
+
+  for (const block of article.blocks ?? []) {
+    if (block.type === 'image')
+      items.push({ url: block.media.url, caption: block.caption })
+  }
+
+  return items.filter((item, index) => items.findIndex(i => i.url === item.url) === index)
+}
+
+/**
+ * 文章阅读页的更多操作：设置 / 分享 / 复制 / 下载图片。
+ * 与推文页的 `TweetOptionsMenu` 对齐，但作用于文章数据（不经翻译 store）。
+ */
+export function ArticleOptionsMenu({ article, tweet }: ArticleOptionsMenuProps) {
+  const [isSettingsOpen, setIsSettingsOpen] = useState(false)
+
+  const handleShare = async () => {
+    const result = await shareOut({
+      title: article.title || 'X 长文',
+      text: article.previewText ?? '',
+      url: article.url,
+    })
+    if (result === 'copied')
+      toast.success('已复制原文链接', { description: '当前浏览器不支持系统分享' })
+    else if (result === 'failed')
+      toast.error('分享失败', { description: '请重试' })
+  }
+
+  const copy = async (text: string, label: string) => {
+    try {
+      await navigator.clipboard.writeText(text)
+      toast.success(`已复制${label}`)
+    }
+    catch {
+      toast.error('复制失败', { description: '请确保浏览器可写剪贴板' })
+    }
+  }
+
+  const handleDownloadImages = async () => {
+    const images = collectImages(article)
+    if (images.length === 0) {
+      toast.info('文章内没有可下载的图片')
+      return
+    }
+
+    const items = images.map((image, index) => ({
+      url: image.url,
+      filename: `${tweet.user.screen_name}-${tweet.id_str}-article-${index + 1}.jpg`,
+    }))
+
+    toast.info(`正在下载 ${items.length} 张图片...`)
+    await downloadFiles(items, {
+      onError: (error, filename) => {
+        console.error(`[ArticleDownload] ${filename}`, error)
+        toast.error(`下载失败：${filename}`)
+      },
+    })
+    toast.success('下载完成')
+  }
+
+  return (
+    <>
+      <DropdownMenu>
+        <DropdownMenuTrigger
+          render={(
+            <Button
+              variant="ghost"
+              size="icon"
+              className="size-9 rounded-full text-muted-foreground hover:bg-muted hover:text-foreground"
+            />
+          )}
+        >
+          <MoreHorizontal className="size-5" />
+          <span className="sr-only">更多选项</span>
+        </DropdownMenuTrigger>
+        <DropdownMenuContent align="end" className="w-fit rounded-xl border border-muted p-1.5 shadow-lg">
+          <DropdownMenuItem onClick={() => setIsSettingsOpen(true)}>
+            <Settings className="mr-2 size-4" />
+            <span>设置</span>
+          </DropdownMenuItem>
+
+          <DropdownMenuSeparator />
+
+          <DropdownMenuItem onClick={handleShare}>
+            <Share2 className="mr-2 size-4" />
+            <span>分享</span>
+          </DropdownMenuItem>
+          <DropdownMenuItem onClick={() => copy(articleToText(article), '正文文本')}>
+            <FileText className="mr-2 size-4" />
+            <span>复制正文文本</span>
+          </DropdownMenuItem>
+          <DropdownMenuItem onClick={() => copy(articleToMarkdown(article), ' Markdown')}>
+            <FileText className="mr-2 size-4" />
+            <span>复制 Markdown</span>
+          </DropdownMenuItem>
+          <DropdownMenuItem onClick={handleDownloadImages}>
+            <Download className="mr-2 size-4" />
+            <span>下载图片</span>
+          </DropdownMenuItem>
+        </DropdownMenuContent>
+      </DropdownMenu>
+
+      <SettingsPanel open={isSettingsOpen} onOpenChange={setIsSettingsOpen} />
+    </>
+  )
+}
diff --git a/app/components/article/ArticleRuns.tsx b/app/components/article/ArticleRuns.tsx
new file mode 100644
index 00000000..d9e72e2b
--- /dev/null
+++ b/app/components/article/ArticleRuns.tsx
@@ -0,0 +1,30 @@
+import type { ArticleRun } from '~/types'
+import { TweetLink } from '~/lib/react-tweet/twitter-theme/tweet-link'
+import { cn } from '~/lib/utils'
+
+function runStyleClass(styles?: ArticleRun['styles']): string {
+  return cn(
+    styles?.includes('bold') && 'font-semibold text-foreground',
+    styles?.includes('italic') && 'italic',
+    styles?.includes('strikethrough') && 'line-through',
+  )
+}
+
+/** 文章块的行内 run → 文本 / 链接 / @mention / #hashtag（真实元素，不用 dangerouslySetInnerHTML） */
+export function ArticleRuns({ runs }: { runs: ArticleRun[] }) {
+  return (
+    <>
+      {runs.map((run, index) => {
+        if (run.type === 'text')
+          return <span key={index} className={runStyleClass(run.styles)}>{run.text}</span>
+
+        const href = run.type === 'link' ? run.url : run.href
+        return (
+          <TweetLink key={index} href={href} className={runStyleClass(run.styles)}>
+            {run.text}
+          </TweetLink>
+        )
+      })}
+    </>
+  )
+}
diff --git a/app/components/article/ArticleToolbar.tsx b/app/components/article/ArticleToolbar.tsx
new file mode 100644
index 00000000..a6d84dc8
--- /dev/null
+++ b/app/components/article/ArticleToolbar.tsx
@@ -0,0 +1,94 @@
+import type { RefObject } from 'react'
+import type { ArticleViewMode } from './ArticleBody'
+import type { ArticleTranslationStatus } from '~/lib/stores/translation'
+import type { EnrichedTweet, TweetArticle } from '~/types'
+import { ArrowLeftIcon, CameraIcon, RotateCwIcon } from 'lucide-react'
+import { Link } from 'react-router'
+import { Button } from '~/components/ui/button'
+import { Spinner } from '~/components/ui/spinner'
+import { useScreenshotAction } from '~/hooks/use-screenshot-action'
+import { ArticleOptionsMenu } from './ArticleOptionsMenu'
+import { ArticleTranslateToggle } from './ArticleTranslateToggle'
+
+interface ArticleToolbarProps {
+  tweetId: string
+  article: TweetArticle
+  tweet: EnrichedTweet
+  /** 截图捕获节点（文章卡片） */
+  captureRef: RefObject<HTMLDivElement | null>
+  mode: ArticleViewMode
+  onModeChange: (mode: ArticleViewMode) => void
+  status: ArticleTranslationStatus
+  hasTranslation: boolean
+  onRetry: () => void
+}
+
+/**
+ * 文章阅读页工具栏：返回 + 翻译三态/重试 + 一键截图 + 更多操作。
+ * 对齐推文页的 `TweetHeader`，只保留阅读长文相关的动作。
+ */
+export function ArticleToolbar({
+  tweetId,
+  article,
+  tweet,
+  captureRef,
+  mode,
+  onModeChange,
+  status,
+  hasTranslation,
+  onRetry,
+}: ArticleToolbarProps) {
+  const { handleScreenshot, isCapturing } = useScreenshotAction({
+    tweets: [tweet],
+    captureRef,
+    mainTweetOverride: tweet,
+    // 文章译文由 `syncArticleTranslation` 单独落库，不走实体翻译同步
+    syncTranslations: false,
+  })
+
+  const canToggle = hasTranslation || status === 'loading'
+
+  return (
+    <div className="mb-4 flex items-center justify-between gap-2">
+      <Link
+        to={`/tweets/${tweetId}`}
+        className="inline-flex items-center gap-1.5 text-sm text-muted-foreground transition-colors hover:text-foreground"
+      >
+        <ArrowLeftIcon className="size-4" />
+        返回推文
+      </Link>
+
+      <div className="flex items-center gap-1 sm:gap-2">
+        {status === 'loading' && (
+          <span className="flex items-center gap-1.5 text-xs text-muted-foreground">
+            <Spinner className="size-3.5" />
+            翻译中
+          </span>
+        )}
+
+        {status === 'error' && (
+          <Button variant="outline" size="sm" onClick={onRetry}>
+            <RotateCwIcon className="size-4" />
+            <span className="hidden sm:inline">重试翻译</span>
+          </Button>
+        )}
+
+        {canToggle && (
+          <ArticleTranslateToggle mode={mode} onModeChange={onModeChange} />
+        )}
+
+        <Button
+          variant="secondary"
+          size="sm"
+          onClick={() => handleScreenshot(false)}
+          disabled={isCapturing}
+        >
+          {isCapturing ? <Spinner className="size-4" /> : <CameraIcon className="size-4" />}
+          <span className="hidden sm:inline">{isCapturing ? '截图中' : '截图'}</span>
+        </Button>
+
+        <ArticleOptionsMenu article={article} tweet={tweet} />
+      </div>
+    </div>
+  )
+}
diff --git a/app/components/article/ArticleTranslateToggle.tsx b/app/components/article/ArticleTranslateToggle.tsx
new file mode 100644
index 00000000..fd4844e0
--- /dev/null
+++ b/app/components/article/ArticleTranslateToggle.tsx
@@ -0,0 +1,55 @@
+import type { ComponentProps } from 'react'
+import type { ArticleViewMode } from './ArticleBody'
+import { EyeOff, Languages, Type } from 'lucide-react'
+import { Button } from '~/components/ui/button'
+import {
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuItem,
+  DropdownMenuTrigger,
+} from '~/components/ui/dropdown-menu'
+import { cn } from '~/lib/utils'
+
+const MODES = [
+  { value: 'original', label: '原文', icon: EyeOff },
+  { value: 'bilingual', label: '双语', icon: Languages },
+  { value: 'translation', label: '仅译文', icon: Type },
+] as const
+
+interface ArticleTranslateToggleProps extends Omit<ComponentProps<typeof Button>, 'onChange'> {
+  mode: ArticleViewMode
+  onModeChange: (mode: ArticleViewMode) => void
+}
+
+/** 阅读页的原文 / 双语 / 仅译文三态开关（受控组件，状态由调用方持有） */
+export function ArticleTranslateToggle({ mode, onModeChange, className, ...props }: ArticleTranslateToggleProps) {
+  const current = MODES.find(m => m.value === mode) ?? MODES[0]
+
+  return (
+    <DropdownMenu>
+      <DropdownMenuTrigger
+        render={(
+          <Button variant="outline" size="sm" className={cn(className)} {...props}>
+            <current.icon className="size-4" />
+            <span className="hidden sm:inline">{current.label}</span>
+          </Button>
+        )}
+      />
+      <DropdownMenuContent align="end" className="space-y-1 p-1.5">
+        {MODES.map(item => (
+          <DropdownMenuItem
+            key={item.value}
+            onClick={() => onModeChange(item.value)}
+            className={cn(
+              'flex cursor-pointer items-center gap-2',
+              mode === item.value && 'bg-muted font-bold',
+            )}
+          >
+            <item.icon className="size-4" />
+            <span>{item.label}</span>
+          </DropdownMenuItem>
+        ))}
+      </DropdownMenuContent>
+    </DropdownMenu>
+  )
+}
diff --git a/app/components/article/ArticleTranslatedText.tsx b/app/components/article/ArticleTranslatedText.tsx
new file mode 100644
index 00000000..f4ac1607
--- /dev/null
+++ b/app/components/article/ArticleTranslatedText.tsx
@@ -0,0 +1,43 @@
+import type { ArticleRun } from '~/types'
+import { Fragment } from 'react'
+import { TweetLink } from '~/lib/react-tweet/twitter-theme/tweet-link'
+
+/**
+ * 译文还原。
+ *
+ * 翻译管线会把块内的 link / @mention / #hashtag 换成 `<<__LINK_n__>>`
+ * （n 为该块内第 n 个非文本 run，从 0 起），这里按原 run 顺序还原为可点击元素。
+ * 文本片段原样输出，空格与标点不做处理。
+ */
+const PLACEHOLDER_SPLIT_RE = /(<<__LINK_\d+__>>)/g
+const PLACEHOLDER_KEY_RE = /^<<__LINK_(\d+)__>>$/
+
+function hrefOf(run: ArticleRun): string {
+  if (run.type === 'link')
+    return run.url
+  if (run.type === 'mention' || run.type === 'hashtag')
+    return run.href
+  return ''
+}
+
+export function ArticleTranslatedText({ translation, runs }: {
+  translation: string
+  runs: ArticleRun[]
+}) {
+  const anchors = runs.filter(run => run.type !== 'text')
+
+  return (
+    <>
+      {translation.split(PLACEHOLDER_SPLIT_RE).map((part, index) => {
+        const match = PLACEHOLDER_KEY_RE.exec(part)
+        if (!match)
+          return <Fragment key={index}>{part}</Fragment>
+
+        const run = anchors[Number(match[1])]
+        if (!run)
+          return null
+        return <TweetLink key={index} href={hrefOf(run)}>{run.text}</TweetLink>
+      })}
+    </>
+  )
+}
diff --git a/app/components/article/index.ts b/app/components/article/index.ts
new file mode 100644
index 00000000..29eaf4d7
--- /dev/null
+++ b/app/components/article/index.ts
@@ -0,0 +1,10 @@
+export { ArticleBody } from './ArticleBody'
+export type { ArticleViewMode } from './ArticleBody'
+export { ArticleEmbeddedTweet } from './ArticleEmbeddedTweet'
+export { ArticleEmbedTweet } from './ArticleEmbedTweet'
+export { ArticleImage } from './ArticleImage'
+export { ArticleMarkdown } from './ArticleMarkdown'
+export { ArticleOptionsMenu } from './ArticleOptionsMenu'
+export { ArticleRuns } from './ArticleRuns'
+export { ArticleToolbar } from './ArticleToolbar'
+export { ArticleTranslateToggle } from './ArticleTranslateToggle'
diff --git a/app/components/tweet/PlainTweet.tsx b/app/components/tweet/PlainTweet.tsx
index 49ac037d..4380775b 100644
--- a/app/components/tweet/PlainTweet.tsx
+++ b/app/components/tweet/PlainTweet.tsx
@@ -11,6 +11,7 @@ import {
 import { resolveTranslationView } from '~/lib/translation/resolveTranslationView'
 import { cn } from '~/lib/utils'
 import { AIVisionBlock } from './AIVisionBlock'
+import { TweetArticleCard } from './TweetArticleCard'
 import { TweetLinkCard } from './TweetCard'
 import { TweetMediaAlt } from './TweetMediaAlt'
 import { TweetSpaceCard } from './TweetSpaceCard'
@@ -111,6 +112,8 @@ function UnifiedTweet({ tweet, variant, enableTranslation }: UnifiedTweetProps)
 
         <AIVisionBlock tweet={tweet} hideChrome />
 
+        {tweet.article && <TweetArticleCard article={tweet.article} tweetId={tweet.id_str} />}
+
         {tweet.card && <TweetLinkCard tweet={tweet} />}
         {tweet.space && <TweetSpaceCard tweet={tweet} />}
 
diff --git a/app/components/tweet/TweetArticleCard.tsx b/app/components/tweet/TweetArticleCard.tsx
new file mode 100644
index 00000000..7cce1396
--- /dev/null
+++ b/app/components/tweet/TweetArticleCard.tsx
@@ -0,0 +1,74 @@
+import type { TweetArticle } from '~/types'
+import { FileTextIcon } from 'lucide-react'
+import { Link } from 'react-router'
+import { MediaImage } from '~/components/ui/media'
+import { normalizeMediaUrl } from '~/lib/media-url'
+import { useProxyMedia } from '~/lib/stores/appConfig'
+import { cn } from '~/lib/utils'
+
+interface TweetArticleCardProps {
+  article: TweetArticle
+  /** 推文 id（文章页按推文 id 取数；文章 id 与推文 id 不同） */
+  tweetId: string
+  className?: string
+}
+
+/**
+ * 推文内的 X Article 紧凑卡片：封面 + 标题 + 摘要 + 阅读入口。
+ *
+ * 正文不在此展开（长文会撑爆线程视图），点击进入 `/article/:tweetId` 阅读页。
+ */
+export function TweetArticleCard({ article, tweetId, className }: TweetArticleCardProps) {
+  const proxyMedia = useProxyMedia()
+  const cover = article.coverImage
+  const preview = article.previewText
+
+  return (
+    <Link
+      to={`/article/${tweetId}`}
+      className={cn(
+        'mt-2 block overflow-hidden rounded-xl border border-border/60 transition-colors hover:bg-muted/30',
+        className,
+      )}
+    >
+      {cover && (
+        <div
+          className="overflow-hidden bg-muted/20"
+          style={{ aspectRatio: cover.width && cover.height ? `${cover.width} / ${cover.height}` : '16 / 9' }}
+        >
+          <MediaImage
+            src={proxyMedia(normalizeMediaUrl(cover.url))}
+            alt={article.title || 'Article cover'}
+            containerClassName="size-full"
+            className="size-full object-cover"
+          />
+        </div>
+      )}
+
+      <div className="space-y-2 p-3">
+        <div className="flex items-center gap-1.5 text-xs font-medium text-muted-foreground/80">
+          <FileTextIcon className="size-3.5" />
+          Article
+        </div>
+
+        {article.title
+          ? (
+              <h3 className="text-[1rem] leading-tight font-semibold text-foreground/90 line-clamp-2">
+                {article.title}
+              </h3>
+            )
+          : (
+              <h3 className="text-[1rem] leading-tight font-semibold text-foreground/90">X 长文</h3>
+            )}
+
+        {preview && (
+          <p className="text-xs leading-relaxed text-muted-foreground/70 line-clamp-3">
+            {preview}
+          </p>
+        )}
+
+        <span className="inline-block text-xs font-medium text-primary">阅读全文 →</span>
+      </div>
+    </Link>
+  )
+}
diff --git a/app/components/tweet/TweetNode.tsx b/app/components/tweet/TweetNode.tsx
index 105f48c9..d13bd4f1 100644
--- a/app/components/tweet/TweetNode.tsx
+++ b/app/components/tweet/TweetNode.tsx
@@ -5,6 +5,7 @@ import { TranslationEditor } from '~/components/translation/TranslationEditor'
 import { Button } from '~/components/ui/button'
 import { useVisionLogic } from '~/hooks/use-vision-logic'
 import { TweetHeader, TweetMedia } from '~/lib/react-tweet'
+import { resolveArticleLink } from '~/lib/react-tweet/utils/article'
 import { useAppConfigStore } from '~/lib/stores/appConfig'
 import {
   useScreenshoting,
@@ -13,6 +14,7 @@ import {
 } from '~/lib/stores/hooks'
 import { cn } from '~/lib/utils'
 import { AIVisionBlock } from './AIVisionBlock'
+import { TweetArticleCard } from './TweetArticleCard'
 import { TweetLinkCard } from './TweetCard'
 import { TweetMediaAlt } from './TweetMediaAlt'
 import { TweetSpaceCard } from './TweetSpaceCard'
@@ -106,6 +108,12 @@ export const TweetNode = forwardRef<HTMLDivElement, TweetNodeProps>(({
   // 编辑器状态上提：翻译按钮旁的图片描述入口与 AIVisionBlock 内入口共用同一弹窗
   const visionEditor = useVisionLogic(tweet)
 
+  // 文章入口：优先完整 article 节点；search/list 等不取富文本的路径退化为「仅链接」卡片
+  const article = useMemo(
+    () => tweet.article ?? resolveArticleLink(tweet.entities) ?? undefined,
+    [tweet],
+  )
+
   // 样式映射表，替代混乱的 cn
   const styles = useMemo(() => ({
     container: cn('relative', {
@@ -133,6 +141,8 @@ export const TweetNode = forwardRef<HTMLDivElement, TweetNodeProps>(({
       <div className={styles.body}>
         <TweetTextBody tweet={tweet} />
 
+        {article && <TweetArticleCard article={article} tweetId={tweet.id_str} />}
+
         <TweetMediaSection tweet={tweet} />
 
         <TweetMediaAlt tweet={tweet} />
diff --git a/app/components/tweet/index.ts b/app/components/tweet/index.ts
index f7a5ad0e..7c3304d9 100644
--- a/app/components/tweet/index.ts
+++ b/app/components/tweet/index.ts
@@ -13,6 +13,7 @@ export { SelectableTweetWrapper } from './SelectableTweetWrapper'
 export { ThreadLine } from './ThreadLine'
 export { TrendingCardView } from './TrendingCard'
 export { MyTweet } from './Tweet'
+export { TweetArticleCard } from './TweetArticleCard'
 export { TweetLinkCard } from './TweetCard'
 export { TweetHeader } from './TweetHeader'
 export { TweetInputForm } from './TweetInputForm'
diff --git a/app/hooks/use-auto-translate-article.ts b/app/hooks/use-auto-translate-article.ts
new file mode 100644
index 00000000..7d3b6c0b
--- /dev/null
+++ b/app/hooks/use-auto-translate-article.ts
@@ -0,0 +1,115 @@
+import type { ArticleTranslation } from '~/lib/article/translate'
+import type { TweetArticle } from '~/types'
+import { useCallback, useEffect, useRef } from 'react'
+import { fetcher } from '~/lib/fetcher'
+import { syncArticleTranslation } from '~/lib/service/articleTranslationSync'
+import { useAppConfigStore } from '~/lib/stores/appConfig'
+import {
+  useArticleTranslation,
+  useArticleTranslationStatus,
+  useResolvedAIConfig,
+  useTranslationActions,
+} from '~/lib/stores/hooks'
+
+interface ArticleTranslationResponse {
+  success: boolean
+  data?: {
+    articleId: string
+    translation: ArticleTranslation
+  }
+}
+
+/**
+ * 文章页按块翻译。
+ *
+ * - 自动触发：AI 翻译开启且当前文章尚无译文时，进入页面翻译一次（每篇一次）。
+ * - 手动触发：返回的 `translate(true)` 供「重试翻译」按钮强制重翻。
+ *
+ * `existing` 为 loader 回填的已持久化译文：有它即跳过翻译（不重复写库），
+ * 同时种入 store 供三态开关与后续会话复用。
+ */
+export function useAutoTranslateArticle(
+  article: TweetArticle | undefined,
+  tweetId: string | undefined,
+  existing?: ArticleTranslation | null,
+) {
+  const enableAITranslation = useAppConfigStore(s => s.enableAITranslation)
+  const translationGlossary = useAppConfigStore(s => s.translationGlossary)
+  const ai = useResolvedAIConfig()
+  const translation = useArticleTranslation(tweetId ?? '')
+  const status = useArticleTranslationStatus(tweetId ?? '')
+  const { setArticleTranslation, setArticleTranslationStatus } = useTranslationActions()
+  const firedForRef = useRef<string | null>(null)
+
+  // loader 已带回持久化译文时种入 store，避免首屏后再次请求上游
+  useEffect(() => {
+    if (existing && tweetId && !translation)
+      setArticleTranslation(tweetId, existing)
+  }, [existing, tweetId, translation, setArticleTranslation])
+
+  const translate = useCallback(async (force = false) => {
+    if (!article || !tweetId)
+      return
+    if (!ai.apiKey || !ai.model)
+      return
+    if (!force && (translation || existing || status === 'loading' || status === 'done'))
+      return
+
+    setArticleTranslationStatus(tweetId, 'loading')
+    try {
+      const res = await fetcher.post<ArticleTranslationResponse>('/api/ai-translation', {
+        type: 'article',
+        article,
+        apiKey: ai.apiKey,
+        model: ai.model,
+        provider: ai.provider,
+        baseUrl: ai.baseUrl,
+        thinkingLevel: ai.thinkingLevel,
+        translationGlossary,
+      })
+      const next = res.data?.data?.translation
+      if (next && (next.title || Object.keys(next.blocks ?? {}).length > 0)) {
+        setArticleTranslation(tweetId, next)
+        setArticleTranslationStatus(tweetId, 'done')
+        void syncArticleTranslation(tweetId, next)
+      }
+      else {
+        setArticleTranslationStatus(tweetId, 'error')
+      }
+    }
+    catch (error) {
+      console.warn('[ArticleTrans] translate failed:', error)
+      setArticleTranslationStatus(tweetId, 'error')
+    }
+  }, [
+    article,
+    tweetId,
+    ai.apiKey,
+    ai.model,
+    ai.provider,
+    ai.baseUrl,
+    ai.thinkingLevel,
+    translation,
+    existing,
+    status,
+    translationGlossary,
+    setArticleTranslation,
+    setArticleTranslationStatus,
+  ])
+
+  useEffect(() => {
+    if (!enableAITranslation || !ai.apiKey || !ai.model)
+      return
+    if (!article?.blocks?.length && !article?.title)
+      return
+    if (translation || existing || status === 'loading' || status === 'done')
+      return
+    if (!tweetId || firedForRef.current === tweetId)
+      return
+
+    firedForRef.current = tweetId
+    void translate()
+  }, [article, tweetId, enableAITranslation, ai.apiKey, ai.model, translation, existing, status, translate])
+
+  return { status, translate }
+}
diff --git a/app/lib/article/index.ts b/app/lib/article/index.ts
new file mode 100644
index 00000000..47ab4214
--- /dev/null
+++ b/app/lib/article/index.ts
@@ -0,0 +1,2 @@
+export * from './parse'
+export * from './translate'
diff --git a/app/lib/article/markdown.ts b/app/lib/article/markdown.ts
new file mode 100644
index 00000000..e3702554
--- /dev/null
+++ b/app/lib/article/markdown.ts
@@ -0,0 +1,98 @@
+import type { ArticleBlock, ArticleRun, TweetArticle } from '~/types'
+import { derivePlainText } from './parse'
+
+/**
+ * 文章块文档 → 纯文本 / Markdown（复制、分享用，无 DOM 依赖）。
+ * 与推文的 `generateText` / `generateMarkdownFromTweets` 平行，仅覆盖文章形态。
+ */
+
+function runsToMarkdown(runs: ArticleRun[]): string {
+  return runs
+    .map((run) => {
+      let out = run.type === 'link'
+        ? `[${run.text}](${run.url})`
+        : (run.type === 'text' ? run.text : `[${run.text}](${run.href})`)
+
+      if (run.styles?.includes('bold'))
+        out = `**${out}**`
+      if (run.styles?.includes('italic'))
+        out = `*${out}*`
+      if (run.styles?.includes('strikethrough'))
+        out = `~~${out}~~`
+      return out
+    })
+    .join('')
+}
+
+function blockToMarkdown(block: Exclude<ArticleBlock, { type: 'list-item' }>): string | null {
+  switch (block.type) {
+    case 'paragraph':
+      return runsToMarkdown(block.runs)
+    // 标题降一级：文章标题已占用 `#`
+    case 'heading':
+      return `${'#'.repeat(block.level + 1)} ${runsToMarkdown(block.runs)}`
+    case 'quote':
+      return `> ${runsToMarkdown(block.runs)}`
+    case 'markdown':
+      return block.text
+    case 'divider':
+      return '---'
+    case 'image':
+      return `![${block.caption ?? 'Image'}](${block.media.url})${block.caption ? `\n\n*${block.caption}*` : ''}`
+    case 'embed-tweet':
+      return `https://x.com/i/status/${block.tweetId}`
+    case 'link':
+      return block.url
+    case 'unknown':
+      return block.text ?? null
+  }
+}
+
+/** 块文档 → Markdown 正文（列表按相邻有序性归组，与渲染一致） */
+export function articleBlocksToMarkdown(blocks: ArticleBlock[]): string {
+  const parts: string[] = []
+
+  for (let i = 0; i < blocks.length; i++) {
+    const block = blocks[i]!
+
+    if (block.type === 'list-item') {
+      const ordered = block.ordered
+      const lines: string[] = []
+      let index = 1
+      let cursor = i
+      while (cursor < blocks.length) {
+        const current = blocks[cursor]!
+        if (current.type !== 'list-item' || current.ordered !== ordered)
+          break
+        lines.push(`${ordered ? `${index++}.` : '-'} ${runsToMarkdown(current.runs)}`)
+        cursor++
+      }
+      i = cursor - 1
+      parts.push(lines.join('\n'))
+      continue
+    }
+
+    const markdown = blockToMarkdown(block)
+    if (markdown)
+      parts.push(markdown)
+  }
+
+  return parts.join('\n\n')
+}
+
+/** 文章 → Markdown（标题 + 原文链接 + 正文） */
+export function articleToMarkdown(article: TweetArticle): string {
+  const header = [`# ${article.title || 'X 长文'}`, `[原文链接](${article.url})`]
+  const body = article.blocks?.length
+    ? articleBlocksToMarkdown(article.blocks)
+    : (article.plainText ?? article.previewText ?? '')
+  return body ? `${header.join('\n\n')}\n\n${body}` : header.join('\n\n')
+}
+
+/** 文章 → 纯文本（标题 + 正文 + 链接），用于分享 / 复制正文 */
+export function articleToText(article: TweetArticle): string {
+  const body = article.blocks?.length
+    ? derivePlainText(article.blocks)
+    : (article.plainText ?? article.previewText ?? '')
+  return [article.title, body, article.url].filter(part => part?.trim()).join('\n\n')
+}
diff --git a/app/lib/article/parse.ts b/app/lib/article/parse.ts
new file mode 100644
index 00000000..e2087265
--- /dev/null
+++ b/app/lib/article/parse.ts
@@ -0,0 +1,312 @@
+import type {
+  RawArticleBlock,
+  RawArticleContentState,
+  RawArticleEntityValue,
+  RawArticleMedia,
+} from '~/lib/rettiwt-api/types/raw/tweet/Details'
+import type { ArticleBlock, ArticleInlineStyle, ArticleMedia, ArticleRun } from '~/types'
+
+/**
+ * X Article 的 Draft.js `content_state` → 语义化块文档（纯函数，无 IO）。
+ *
+ * 上游实测形态（样例见 `test/fixtures/articles/*.json`）：
+ * - `blocks[]`：`{ key, text, type, data, entityRanges[], inlineStyleRanges[] }`
+ * - `entityMap`：`[{ key, value: { type, data } }]`；`type ∈ LINK | MARKDOWN | MEDIA | DIVIDER | TWEET`
+ * - 块内 @mention / #hashtag 走 `block.data.mentions/hashtags` 的 `fromIndex/toIndex` span
+ * - 图片：atomic 块 → `MEDIA` 实体 `data.mediaItems[].mediaId` → `media_entities[]`（按 media_id 索引）
+ */
+
+interface SpecialSpan {
+  start: number
+  end: number
+  run: ArticleRun
+}
+
+const LEADING_AT_RE = /^@/
+const LEADING_HASH_RE = /^#/
+
+const MENTION_HREF = (text: string) => `https://x.com/${text.replace(LEADING_AT_RE, '')}`
+const HASHTAG_HREF = (text: string) => `https://x.com/hashtag/${text.replace(LEADING_HASH_RE, '')}`
+
+function toStyle(style?: string): ArticleInlineStyle | null {
+  switch (style?.toLowerCase()) {
+    case 'bold':
+      return 'bold'
+    case 'italic':
+      return 'italic'
+    case 'strikethrough':
+      return 'strikethrough'
+    default:
+      return null
+  }
+}
+
+/** 兼容 `[{key,value}]` 与 `Record<key,value>` 两种 entityMap 形态 */
+export function normalizeEntityMap(
+  entityMap?: RawArticleContentState['entityMap'],
+): Map<string, RawArticleEntityValue> {
+  const map = new Map<string, RawArticleEntityValue>()
+  if (!entityMap)
+    return map
+
+  if (Array.isArray(entityMap)) {
+    for (const entity of entityMap) {
+      if (entity?.key !== undefined && entity.value)
+        map.set(String(entity.key), entity.value)
+    }
+  }
+  else if (typeof entityMap === 'object') {
+    for (const [key, value] of Object.entries(entityMap)) {
+      if (value)
+        map.set(String(key), value)
+    }
+  }
+  return map
+}
+
+/** 原始媒体节点 → {@link ArticleMedia}；缺 id/url 时返回 null */
+export function mediaFromRaw(raw?: RawArticleMedia | null): ArticleMedia | null {
+  const url = raw?.media_info?.original_img_url
+  const id = raw?.media_id ?? raw?.id
+  if (!url || !id)
+    return null
+
+  return {
+    id,
+    url,
+    width: raw?.media_info?.original_img_width,
+    height: raw?.media_info?.original_img_height,
+  }
+}
+
+function mediaIdFromEntity(value: RawArticleEntityValue): string | undefined {
+  const items = (value.data?.mediaItems ?? value.data?.media_items ?? []) as Array<Record<string, unknown>>
+  const first = items[0]
+  return (first?.mediaId as string | undefined) ?? (first?.media_id as string | undefined)
+}
+
+/** 依据行内样式区间，取出恰好覆盖 [start, end) 的样式集合 */
+function stylesInRange(
+  styleRanges: Array<{ start: number, end: number, style: ArticleInlineStyle }>,
+  start: number,
+  end: number,
+): ArticleInlineStyle[] | undefined {
+  const styles: ArticleInlineStyle[] = []
+  for (const range of styleRanges) {
+    if (range.start <= start && range.end >= end && !styles.includes(range.style))
+      styles.push(range.style)
+  }
+  return styles.length > 0 ? styles : undefined
+}
+
+/**
+ * 块文本 → 行内 run[]（LINK 实体 + mention/hashtag span + 行内样式）。
+ *
+ * 行内样式区间（Bold/Italic）与实体 span **一样是切分点**：Draft.js 里一段文本的
+ * run 由「实体边界 ∩ 样式边界」共同决定。若只按实体切分，一个只覆盖前半段的 Bold
+ * 区间会被整段应用（实测：`{offset:0,length:15,style:Bold}` 的段落整段渲染成粗体）。
+ */
+function buildRuns(block: RawArticleBlock, entityMap: Map<string, RawArticleEntityValue>): ArticleRun[] {
+  const text = block.text ?? ''
+  if (!text)
+    return []
+
+  const spans: SpecialSpan[] = []
+
+  for (const range of block.entityRanges ?? []) {
+    const value = entityMap.get(String(range.key))
+    if (value?.type !== 'LINK' || !value.data?.url)
+      continue
+    const start = Math.max(0, range.offset)
+    const end = Math.min(text.length, range.offset + range.length)
+    if (end <= start)
+      continue
+    spans.push({ start, end, run: { type: 'link', text: text.slice(start, end), url: value.data.url } })
+  }
+
+  for (const mention of block.data?.mentions ?? []) {
+    if (mention.fromIndex === undefined || mention.toIndex === undefined)
+      continue
+    const start = Math.max(0, mention.fromIndex)
+    const end = Math.min(text.length, mention.toIndex)
+    if (end <= start)
+      continue
+    const spanText = text.slice(start, end)
+    spans.push({ start, end, run: { type: 'mention', text: spanText, href: MENTION_HREF(spanText) } })
+  }
+
+  for (const hashtag of block.data?.hashtags ?? []) {
+    if (hashtag.fromIndex === undefined || hashtag.toIndex === undefined)
+      continue
+    const start = Math.max(0, hashtag.fromIndex)
+    const end = Math.min(text.length, hashtag.toIndex)
+    if (end <= start)
+      continue
+    const spanText = text.slice(start, end)
+    spans.push({ start, end, run: { type: 'hashtag', text: spanText, href: HASHTAG_HREF(spanText) } })
+  }
+
+  const styleRanges = (block.inlineStyleRanges ?? [])
+    .map(range => ({
+      start: Math.max(0, range.offset),
+      end: Math.min(text.length, range.offset + range.length),
+      style: toStyle(range.style),
+    }))
+    .filter((range): range is { start: number, end: number, style: ArticleInlineStyle } =>
+      Boolean(range.style) && range.end > range.start)
+
+  // 切分点 = 实体边界 ∪ 样式边界（含首尾）
+  const points = new Set<number>([0, text.length])
+  for (const span of spans) {
+    points.add(span.start)
+    points.add(span.end)
+  }
+  for (const range of styleRanges) {
+    points.add(range.start)
+    points.add(range.end)
+  }
+  const bounds = [...points].sort((a, b) => a - b)
+
+  const runs: ArticleRun[] = []
+  for (let i = 0; i < bounds.length - 1; i++) {
+    const start = bounds[i]!
+    const end = bounds[i + 1]!
+    if (end <= start)
+      continue
+
+    const styles = stylesInRange(styleRanges, start, end)
+    const span = spans.find(s => s.start <= start && s.end >= end)
+    const segment = text.slice(start, end)
+
+    runs.push(span
+      ? { ...span.run, text: segment, styles }
+      : { type: 'text', text: segment, styles })
+  }
+
+  return runs
+}
+
+function parseAtomicBlock(
+  key: string,
+  block: RawArticleBlock,
+  entityMap: Map<string, RawArticleEntityValue>,
+  mediaIndex: Map<string, ArticleMedia>,
+): ArticleBlock {
+  const range = block.entityRanges?.[0]
+  const value = range ? entityMap.get(String(range.key)) : undefined
+
+  switch (value?.type) {
+    case 'MEDIA': {
+      const mediaId = mediaIdFromEntity(value)
+      const media = mediaId ? mediaIndex.get(mediaId) : undefined
+      if (media)
+        return { key, type: 'image', media, caption: value.data?.caption }
+      return { key, type: 'unknown', text: block.text?.trim() || undefined }
+    }
+    case 'MARKDOWN':
+      return { key, type: 'markdown', text: value.data?.markdown ?? '' }
+    case 'DIVIDER':
+      return { key, type: 'divider' }
+    case 'TWEET':
+      return { key, type: 'embed-tweet', tweetId: String(value.data?.tweetId ?? '') }
+    case 'LINK':
+      return { key, type: 'link', url: value.data?.url ?? '' }
+    default:
+      return { key, type: 'unknown', text: block.text?.trim() || undefined }
+  }
+}
+
+function parseBlock(
+  block: RawArticleBlock,
+  index: number,
+  entityMap: Map<string, RawArticleEntityValue>,
+  mediaIndex: Map<string, ArticleMedia>,
+): ArticleBlock | null {
+  const key = block.key || `block-${index}`
+
+  if (block.type === 'atomic')
+    return parseAtomicBlock(key, block, entityMap, mediaIndex)
+
+  const runs = buildRuns(block, entityMap)
+  // 空块（无文本、无 run）不产出，避免渲染出空段落
+  if (runs.length === 0 || runs.every(run => !run.text.trim()))
+    return null
+
+  switch (block.type) {
+    case 'header-one':
+      return { key, type: 'heading', level: 1, runs }
+    case 'header-two':
+      return { key, type: 'heading', level: 2, runs }
+    case 'header-three':
+      return { key, type: 'heading', level: 3, runs }
+    case 'unordered-list-item':
+      return { key, type: 'list-item', ordered: false, runs }
+    case 'ordered-list-item':
+      return { key, type: 'list-item', ordered: true, runs }
+    case 'blockquote':
+      return { key, type: 'quote', runs }
+    // unstyled 及未知块类型统一按段落渲染，保证不丢内容
+    default:
+      return { key, type: 'paragraph', runs }
+  }
+}
+
+/**
+ * `content_state` → 块文档。无有效块时返回空数组（调用方据此回退 `plain_text`）。
+ */
+export function parseContentState(
+  contentState?: RawArticleContentState | null,
+  mediaEntities?: RawArticleMedia[] | null,
+): ArticleBlock[] {
+  const blocks = contentState?.blocks
+  if (!Array.isArray(blocks) || blocks.length === 0)
+    return []
+
+  const entityMap = normalizeEntityMap(contentState?.entityMap)
+
+  const mediaIndex = new Map<string, ArticleMedia>()
+  for (const raw of mediaEntities ?? []) {
+    const media = mediaFromRaw(raw)
+    if (media)
+      mediaIndex.set(media.id, media)
+  }
+
+  return blocks
+    .map((block, index) => parseBlock(block, index, entityMap, mediaIndex))
+    .filter((block): block is ArticleBlock => block !== null)
+}
+
+/** 文章块里的内嵌推文 id（去重、保序）——阅读页据此并行取回真实推文 */
+export function collectEmbeddedTweetIds(blocks: ArticleBlock[]): string[] {
+  const ids: string[] = []
+  for (const block of blocks) {
+    if (block.type === 'embed-tweet' && block.tweetId && !ids.includes(block.tweetId))
+      ids.push(block.tweetId)
+  }
+  return ids
+}
+
+/** 块文档 → 纯文本（`plain_text` 缺失时的兜底正文） */
+export function derivePlainText(blocks: ArticleBlock[]): string {
+  return blocks
+    .map((block) => {
+      switch (block.type) {
+        case 'markdown':
+          return block.text
+        case 'image':
+          return block.caption ?? ''
+        case 'embed-tweet':
+          return `https://x.com/i/status/${block.tweetId}`
+        case 'link':
+          return block.url
+        case 'divider':
+          return ''
+        case 'unknown':
+          return block.text ?? ''
+        default:
+          return block.runs.map(run => run.text).join('')
+      }
+    })
+    .filter(text => text.trim().length > 0)
+    .join('\n\n')
+}
diff --git a/app/lib/article/translate.ts b/app/lib/article/translate.ts
new file mode 100644
index 00000000..2f3e9696
--- /dev/null
+++ b/app/lib/article/translate.ts
@@ -0,0 +1,224 @@
+import type { LanguageModel } from 'ai'
+import type { ThinkingLevel } from '~/lib/stores/appConfig'
+import type { ArticleBlock, ArticleRun, TweetArticle } from '~/types'
+import { generateText, Output, zodSchema } from 'ai'
+import { z } from 'zod'
+import { createAITranslationAbortSignal } from '~/lib/ai-timeout'
+import { models } from '~/lib/constants'
+import { obsLog } from '~/lib/obs-log'
+import { getProviderStrategy, getThinkingConfig } from '~/lib/providers'
+
+/**
+ * X Article 的**按块**翻译管线。
+ *
+ * 与推文实体翻译（`AITranslation.ts`）解耦：长文无法塞进单个 maskedText，且位置回填
+ * 一旦错位就静默损坏。这里以**块 key** 为对齐键分批翻译：
+ * - 只翻可翻译块（段落/标题/列表项/引用）+ 标题；代码/图片/嵌入帖/分隔线原样跳过
+ * - 块内 link/mention/hashtag 换为占位符 `<<__LINK_n__>>`（n 为该块内非文本 run 序号），
+ *   逐块校验占位符集合，失败只重试该批
+ * - 返回 `Record<blockKey, string>`，与位置无关
+ */
+
+const LINK_PLACEHOLDER_RE = /<<__LINK_\d+__>>/g
+const KANA_RE = /[\u3040-\u30FF]/
+const CJK_RE = /[\u4E00-\u9FFF]/
+
+const TRANSLATABLE_TYPES = new Set<ArticleBlock['type']>(['paragraph', 'heading', 'list-item', 'quote'])
+
+/** 每批送入 LLM 的字符预算（保守，避免单次超长） */
+const BATCH_CHAR_BUDGET = 2600
+
+export interface ArticleTranslation {
+  title?: string
+  /** 块 key → 译文（含占位符） */
+  blocks: Record<string, string>
+}
+
+interface TranslatableBlock {
+  key: string
+  text: string
+  placeholders: string[]
+  runs: ArticleRun[]
+}
+
+interface BatchItem {
+  key: string
+  text: string
+  placeholders: string[]
+}
+
+/** 块 → 送入 LLM 的文本（非文本 run → per-block 占位符） */
+export function serializeArticleBlock(block: Extract<ArticleBlock, { runs: ArticleRun[] }>): { text: string, placeholders: string[] } {
+  const placeholders: string[] = []
+  let counter = 0
+  const text = block.runs
+    .map((run) => {
+      if (run.type === 'text')
+        return run.text
+      const placeholder = `<<__LINK_${counter++}__>>`
+      placeholders.push(placeholder)
+      return placeholder
+    })
+    .join('')
+  return { text, placeholders }
+}
+
+function isTranslatable(block: ArticleBlock): block is Extract<ArticleBlock, { runs: ArticleRun[] }> {
+  return TRANSLATABLE_TYPES.has(block.type)
+}
+
+/** 文本是否已是简体中文（含 CJK 且无假名即视作中文，跳过翻译） */
+export function looksLikeChinese(text: string): boolean {
+  return CJK_RE.test(text) && !KANA_RE.test(text)
+}
+
+function collectTranslatable(article: TweetArticle): { title: string, blocks: TranslatableBlock[] } {
+  const blocks: TranslatableBlock[] = []
+  for (const block of article.blocks ?? []) {
+    if (!isTranslatable(block))
+      continue
+    const { text, placeholders } = serializeArticleBlock(block)
+    if (!text.trim())
+      continue
+    blocks.push({ key: block.key, text, placeholders, runs: block.runs })
+  }
+  return { title: article.title?.trim() ?? '', blocks }
+}
+
+function chunkBlocks(blocks: TranslatableBlock[]): TranslatableBlock[][] {
+  const batches: TranslatableBlock[][] = []
+  let current: TranslatableBlock[] = []
+  let size = 0
+  for (const block of blocks) {
+    if (current.length > 0 && size + block.text.length > BATCH_CHAR_BUDGET) {
+      batches.push(current)
+      current = []
+      size = 0
+    }
+    current.push(block)
+    size += block.text.length
+  }
+  if (current.length > 0)
+    batches.push(current)
+  return batches
+}
+
+function unique(list: string[]): string[] {
+  return Array.from(new Set(list))
+}
+
+/** 逐块校验占位符集合是否精确相等 */
+function placeholdersOk(translated: string, expected: string[]): boolean {
+  const expectedSet = new Set(unique(expected))
+  const actual = unique(translated.match(LINK_PLACEHOLDER_RE) ?? [])
+  if (actual.length !== expectedSet.size)
+    return false
+  return actual.every(p => expectedSet.has(p))
+}
+
+const SYSTEM_PROMPT = `
+# Role
+You are a professional localization expert. Translate the given documents into natural Simplified Chinese.
+
+# Rules
+1. Translate every block faithfully; keep the author's tone.
+2. Placeholders like \`<<__LINK_0__>>\` are immutable anchors (links / @mentions / #hashtags). Keep them EXACTLY as-is inside the translation, and place them where natural Chinese syntax requires.
+3. Never translate a block into anything other than Simplified Chinese.
+
+# Output
+Return a single JSON object: {"title":"...","blocks":{"<blockKey>":"<translated text>"}}
+- Copy the block keys EXACTLY as given.
+- Every input block key MUST appear in "blocks".
+`.trim()
+
+function buildOutputSchema() {
+  return Output.object({
+    schema: zodSchema(z.object({
+      title: z.string().optional(),
+      blocks: z.record(z.string(), z.string()),
+    })),
+    name: 'article_translation',
+    description: 'Block-keyed Simplified Chinese translation of an X article.',
+  })
+}
+
+export interface AutoTranslateArticleOptions {
+  modelInstance: LanguageModel
+  modelName: string
+  thinkingLevel?: ThinkingLevel
+  translationGlossary?: string
+}
+
+/**
+ * 翻译整篇文章（分批）。返回按块 key 索引的译文；占位符校验失败的块会被丢弃（不写脏数据）。
+ */
+export async function autoTranslateArticle(
+  article: TweetArticle,
+  options: AutoTranslateArticleOptions,
+): Promise<ArticleTranslation> {
+  const { title, blocks } = collectTranslatable(article)
+  const result: ArticleTranslation = { blocks: {} }
+
+  const hasAnyText = blocks.length > 0 || title.length > 0
+  if (!hasAnyText)
+    return result
+
+  const modelConfig = models.find(m => m.name === options.modelName)
+  const strategy = modelConfig ? getProviderStrategy(modelConfig.provider) : null
+  const thinkingConfig = getThinkingConfig(options.modelName, options.thinkingLevel ?? 'minimal')
+  const output = buildOutputSchema()
+
+  const translateBatch = async (items: BatchItem[]): Promise<Record<string, string>> => {
+    const payload = JSON.stringify(items.map(item => ({ key: item.key, text: item.text })), null, 0)
+    const userContent = `${options.translationGlossary ? `<Glossary>\n${options.translationGlossary}\n</Glossary>\n\n` : ''}Translate these blocks:\n${payload}`
+
+    const startedAt = Date.now()
+    let lastRaw: Record<string, string> = {}
+    for (let attempt = 0; attempt < 2; attempt++) {
+      const response = await generateText({
+        model: options.modelInstance,
+        system: SYSTEM_PROMPT,
+        prompt: userContent,
+        output,
+        temperature: 0.4,
+        abortSignal: createAITranslationAbortSignal(),
+        providerOptions: strategy && modelConfig
+          ? strategy.buildProviderOptions(thinkingConfig, modelConfig)
+          : {},
+      })
+
+      const returned = response.output.blocks ?? {}
+      const accepted: Record<string, string> = {}
+      for (const item of items) {
+        const translated = returned[item.key]?.trim()
+        if (translated && placeholdersOk(translated, item.placeholders))
+          accepted[item.key] = translated
+      }
+      lastRaw = accepted
+      if (Object.keys(accepted).length === items.length)
+        break
+    }
+
+    obsLog('ai.translate.article.batch', {
+      blocks: items.length,
+      translated: Object.keys(lastRaw).length,
+      ms: Date.now() - startedAt,
+    })
+    return lastRaw
+  }
+
+  // 标题单独一批（预算小、优先保证）
+  if (title && !looksLikeChinese(title)) {
+    const titleResult = await translateBatch([{ key: '__title__', text: title, placeholders: [] }])
+    if (titleResult.__title__)
+      result.title = titleResult.__title__
+  }
+
+  const pending = blocks.filter(block => !looksLikeChinese(block.text))
+  for (const batch of chunkBlocks(pending)) {
+    const translated = await translateBatch(batch.map(block => ({ key: block.key, text: block.text, placeholders: block.placeholders })))
+    Object.assign(result.blocks, translated)
+  }
+
+  return result
+}
diff --git a/app/lib/database/schema.ts b/app/lib/database/schema.ts
index 3d039b28..dd971d41 100644
--- a/app/lib/database/schema.ts
+++ b/app/lib/database/schema.ts
@@ -1,3 +1,4 @@
+import type { ArticleTranslation } from '~/lib/article/translate'
 import type { EnrichedTweet, IGPost, RawUser, TranslationEntity } from '~/types'
 import {
   index,
@@ -32,6 +33,25 @@ export const tweetEntities = pgTable(
   ],
 )
 
+/**
+ * X Article（长文）按块译文缓存表。
+ *
+ * 与 `tweetEntities` 分开：文章译文以块 key 索引（非实体 index），且 `tweet.jsonContent`
+ * 会被上游结果整条 upsert 覆盖，译文不能放进 jsonContent。
+ */
+export const tweetArticleTranslations = pgTable(
+  'tweet_article_translations',
+  {
+    id: serial('id').primaryKey(),
+    tweetId: text('tweetId').notNull().unique(),
+    translations: json('translations').$type<ArticleTranslation>().notNull(),
+    updatedAt: timestamp('updatedAt').notNull().defaultNow(),
+  },
+  table => [
+    index('tweet_article_translations_tweetId_idx').on(table.tweetId),
+  ],
+)
+
 export const tweetUser = pgTable(
   'tweet_user',
   {
diff --git a/app/lib/localCache.ts b/app/lib/localCache.ts
index c9757728..35fac5e7 100644
--- a/app/lib/localCache.ts
+++ b/app/lib/localCache.ts
@@ -1,7 +1,7 @@
 import { env } from './env.server'
 import { obsLog, suffix } from './obs-log'
 
-export type CacheType = 'tweet' | 'user' | 'replies' | 'ig-post'
+export type CacheType = 'tweet' | 'user' | 'replies' | 'ig-post' | 'article-translation'
 
 /**
  * 缓存数据包装结构，用于存储过期时间
diff --git a/app/lib/obs-log.ts b/app/lib/obs-log.ts
index 9aef7c5c..137ba03f 100644
--- a/app/lib/obs-log.ts
+++ b/app/lib/obs-log.ts
@@ -10,6 +10,7 @@
 export type ObsEvent
   = | 'ai.translate' // 推文翻译（AITranslation.translateText）：ms / attempts / ok / model / provider
     | 'ai.translate.ig' // IG caption 翻译（translateIGCaption）：ms / ok
+    | 'ai.translate.article.batch' // X Article 按块翻译的一批（autoTranslateArticle）：blocks / translated / ms
     | 'cache.get' // 本地缓存读取：type / keySuffix / hit / adapter
     | 'pool.rotate' // RettiwtPool 冷却轮换：keySuffix / failStreak / cooldownMs / reason
     | 'pool.exhaust' // RettiwtPool 全部 Key 耗尽：attempts / states
diff --git a/app/lib/react-tweet/twitter-theme/tweet-body.tsx b/app/lib/react-tweet/twitter-theme/tweet-body.tsx
index 623c7cec..28c9b829 100644
--- a/app/lib/react-tweet/twitter-theme/tweet-body.tsx
+++ b/app/lib/react-tweet/twitter-theme/tweet-body.tsx
@@ -1,5 +1,6 @@
 import type { EnrichedTweet } from '~/types'
 import { cn } from '~/lib/utils'
+import { isArticleUrl } from '../utils/article'
 import { isSpaceUrl } from '../utils/space'
 import { TweetLink } from './tweet-link'
 
@@ -28,6 +29,10 @@ export function TweetBody({ tweet, isTranslated, lang, className }: TweetBodyPro
             // 仅在卡片数据确实渲染出来时才跳过——元数据获取失败时链接照常显示（优雅降级）。
             if (tweet.space && isSpaceUrl(item.href))
               return null
+            // Article 卡片（TweetArticleCard）已承载文章入口，避免重复一条裸链接。
+            // 卡片在 `TweetNode` 里对「有文章链接」的推文必定渲染，故此处可直接去重。
+            if (isArticleUrl(item.href))
+              return null
             return (
               <TweetLink key={item.index} href={item.href}>
                 {text.length > 36 ? item.display_url : text}
diff --git a/app/lib/react-tweet/utils/article.ts b/app/lib/react-tweet/utils/article.ts
new file mode 100644
index 00000000..7742b9db
--- /dev/null
+++ b/app/lib/react-tweet/utils/article.ts
@@ -0,0 +1,118 @@
+import type { RawArticleResult } from '~/lib/rettiwt-api/types/raw/tweet/Details'
+import type { Entity, RawTweet, TweetArticle } from '~/types'
+import { mediaFromRaw, parseContentState } from '~/lib/article/parse'
+
+/**
+ * X Article（长文）纯映射逻辑。
+ *
+ * 文章型推文的正文不在 `legacy.full_text`/`note_tweet` 里，而是一条指向文章页
+ * 的 t.co 链接；文章本体在推文的 `article` 节点：
+ *
+ * ```json
+ * { "article": { "article_results": { "result": {
+ *   "rest_id": "2104009234858024962", "title": "…", "preview_text": "…",
+ *   "plain_text": "…（需 withArticlePlainText）",
+ *   "content_state": { "blocks": [...], "entityMap": [...] },   // 需 withArticleRichContentState
+ *   "media_entities": [...], "cover_media": {...}, "metadata": { "first_published_at_secs": … }
+ * } } } }
+ * ```
+ *
+ * 与 `space.ts` 一样只做纯映射，不做 IO，便于单测。块解析见 `~/lib/article/parse`。
+ */
+
+/** 正文/实体里的文章链接：`x.com/i/article/<id>` 或 `x.com/<user>/article/<id>` */
+const ARTICLE_URL_RE = /^https?:\/\/(?:www\.|mobile\.)?(?:twitter|x)\.com\/\w+\/article\/(\d+)/
+
+/** 该 URL 是否指向 X 文章页（正文据此避免与卡片重复展示同一个跳转） */
+export function isArticleUrl(url?: string | null): boolean {
+  return typeof url === 'string' && ARTICLE_URL_RE.test(url)
+}
+
+/** 从文章链接里取出文章 id；不是文章链接时返回 null */
+export function extractArticleIdFromUrl(url?: string | null): string | null {
+  if (typeof url !== 'string')
+    return null
+  return ARTICLE_URL_RE.exec(url)?.[1] ?? null
+}
+
+/**
+ * 从推文实体里取文章 id（上游 `article` 节点缺失时的回退，兼容旧缓存探测）。
+ */
+export function resolveArticleId(entities?: ReadonlyArray<unknown> | null): string | null {
+  for (const entity of entities ?? []) {
+    const id = extractArticleIdFromUrl((entity as { href?: string } | null | undefined)?.href)
+    if (id)
+      return id
+  }
+  return null
+}
+
+function toArticleUrl(id: string): string {
+  return `https://x.com/i/article/${id}`
+}
+
+function articleFromRawResult(result: RawArticleResult, id: string): TweetArticle | null {
+  const title = typeof result.title === 'string' ? result.title.trim() : ''
+  const previewText = typeof result.preview_text === 'string' && result.preview_text.trim()
+    ? result.preview_text
+    : undefined
+  const blocks = parseContentState(result.content_state, result.media_entities)
+  // 有块文档时 blocks 已覆盖全文，`plain_text` 完全冗余（长文可达数十 KB）——
+  // 仅在没有块文档（plain 降级）时保留纯文本。
+  const plainText = blocks.length === 0 && typeof result.plain_text === 'string' && result.plain_text.trim()
+    ? result.plain_text
+    : undefined
+
+  if (!title && !previewText && !plainText && blocks.length === 0)
+    return null
+
+  const publishedSecs = result.metadata?.first_published_at_secs
+
+  return {
+    id,
+    url: toArticleUrl(id),
+    title,
+    previewText,
+    plainText,
+    format: blocks.length > 0 ? 'rich' : 'plain',
+    coverImage: mediaFromRaw(result.cover_media) ?? undefined,
+    publishedAt: typeof publishedSecs === 'number' && publishedSecs > 0 ? publishedSecs * 1000 : undefined,
+    blocks: blocks.length > 0 ? blocks : undefined,
+  }
+}
+
+/**
+ * 从推文 `article` 节点映射出 {@link TweetArticle}。
+ *
+ * 无标题/摘要/正文时返回 null —— 宁可让正文里的裸链接照常渲染，也不给一张空卡片
+ * （与 `mapTwitterCard` 的最终校验同一取舍）。仅有文章链接（search/list 等不取富文本
+ * 的路径）时，卡片入口由 {@link resolveArticleLink} 提供。
+ */
+export function mapArticle(rawTweet: RawTweet | null | undefined, entities?: Entity[]): TweetArticle | null {
+  const result = (rawTweet as { article?: { article_results?: { result?: RawArticleResult } } } | null | undefined)
+    ?.article
+    ?.article_results
+    ?.result
+
+  const id = typeof result?.rest_id === 'string' && result.rest_id
+    ? result.rest_id
+    : resolveArticleId(entities)
+
+  if (!id || !result)
+    return null
+
+  return articleFromRawResult(result, id)
+}
+
+/**
+ * 只凭正文里的文章链接给出一个最小入口（`title` 为空）。
+ *
+ * 供 search / list / user-timeline 等**不取富文本**的路径渲染「X Article → 阅读全文」，
+ * 点击进入 `/article/:id` 后再拉取完整块文档。
+ */
+export function resolveArticleLink(entities?: ReadonlyArray<unknown> | null): TweetArticle | null {
+  const id = resolveArticleId(entities)
+  if (!id)
+    return null
+  return { id, url: toArticleUrl(id), title: '', format: 'plain' }
+}
diff --git a/app/lib/react-tweet/utils/index.ts b/app/lib/react-tweet/utils/index.ts
index cb3710f6..76351c69 100644
--- a/app/lib/react-tweet/utils/index.ts
+++ b/app/lib/react-tweet/utils/index.ts
@@ -2,6 +2,7 @@ import type { MediaAnimatedGif, MediaDetails, MediaVideo } from '~/types'
 import { normalizeMediaUrl } from '~/lib/media-url'
 import { useProxyMedia } from '~/lib/stores/appConfig'
 
+export * from './article'
 export * from './date-utils'
 export * from './entitytParser'
 // export * from './get-tweet'
diff --git a/app/lib/react-tweet/utils/parseTweet.ts b/app/lib/react-tweet/utils/parseTweet.ts
index 4fbba2ee..7d0b7464 100644
--- a/app/lib/react-tweet/utils/parseTweet.ts
+++ b/app/lib/react-tweet/utils/parseTweet.ts
@@ -7,6 +7,7 @@ import type {
 } from '~/types'
 import { obsLog } from '~/lib/obs-log'
 import { parseTrendingCard } from '~/lib/rettiwt-api/parsers/jetfuel'
+import { mapArticle } from './article'
 import { getEntities } from './entitytParser'
 
 /**
@@ -31,6 +32,7 @@ export function enrichTweet(sourceData: RawTweet, retweetedOrignalId?: string):
   const tweetUrl = `https://twitter.com/${userScreenName}/status/${tweetId}`
 
   const text = tweet.note_tweet?.note_tweet_results?.result?.text || tweet.legacy.full_text
+  const entities = getEntities(tweet, text)
 
   return {
     id_str: tweet.rest_id,
@@ -41,9 +43,10 @@ export function enrichTweet(sourceData: RawTweet, retweetedOrignalId?: string):
     text,
     user,
     in_reply_to_status_id_str: tweet.legacy.in_reply_to_status_id_str,
-    entities: getEntities(tweet, text),
+    entities,
     quoted_tweet_id: tweet.quoted_status_result?.result?.rest_id,
     card: mapTwitterCard(tweet.card, (tweet as any).jetfuel_attachment),
+    article: mapArticle(tweet, entities) ?? undefined,
     mediaDetails: mapMediaDetails(tweet),
     retweetedOrignalId,
     isInlineMeida: !!tweet.note_tweet?.note_tweet_results?.result?.media?.inline_media?.length,
diff --git a/app/lib/rettiwt-api/requests/Tweet.ts b/app/lib/rettiwt-api/requests/Tweet.ts
index 1d7a0a51..2d8bdc65 100644
--- a/app/lib/rettiwt-api/requests/Tweet.ts
+++ b/app/lib/rettiwt-api/requests/Tweet.ts
@@ -147,13 +147,14 @@ export class TweetRequests {
           responsive_web_grok_imagine_annotation_enabled: false,
           responsive_web_profile_redirect_enabled: true,
         }),
+        fieldToggles: JSON.stringify({ withArticleRichContentState: true, withArticlePlainText: true }),
       },
       paramsSerializer: { encode: encodeURIComponent },
     }
   }
 
   /**
-   * @param id - The id of the tweet to be liked.
+   * @param id - The ID of the tweet to be liked.
    */
   public static like(id: string): AxiosRequestConfig {
     return {
diff --git a/app/lib/rettiwt-api/types/raw/tweet/Details.ts b/app/lib/rettiwt-api/types/raw/tweet/Details.ts
index adb162ca..be9f4cb4 100644
--- a/app/lib/rettiwt-api/types/raw/tweet/Details.ts
+++ b/app/lib/rettiwt-api/types/raw/tweet/Details.ts
@@ -32,6 +32,16 @@ interface Result {
   in_reply_to_status_id_str?: string
   quoted_status_result?: TweetResult
   card?: any
+  /**
+   * X Article（长文）附件。`withArticleRichContentState` field toggle 开启时
+   * `article_results.result.content_state` 带 Draft.js 块文档；`withArticlePlainText`
+   * 只带 `plain_text` 纯文本。两者都取可互为兜底。
+   */
+  article?: {
+    article_results?: {
+      result?: RawArticleResult
+    }
+  }
   /** JetFuel 附件（responsive_web_jetfuel_frame 开启时返回）：官方渲染卡全量数据 */
   jetfuel_attachment?: {
     height: number
@@ -328,3 +338,93 @@ export interface Variant {
   url: string
   bitrate?: number
 }
+
+// ─── X Article（长文）原始节点 ────────────────────────────────
+
+/** 文章内嵌媒体（`media_entities[]` / `cover_media`），字段随上游可选 */
+export interface RawArticleMedia {
+  id?: string
+  media_id?: string
+  media_key?: string
+  media_info?: {
+    __typename?: string
+    original_img_url?: string
+    original_img_width?: number
+    original_img_height?: number
+  }
+}
+
+/** Draft.js 行内样式区间（`style` 实测为 `Bold` / `Italic` / `Strikethrough`） */
+export interface RawArticleInlineStyleRange {
+  offset: number
+  length: number
+  style?: string
+}
+
+/** Draft.js 实体引用区间（`key` 指向 `entityMap`） */
+export interface RawArticleEntityRange {
+  key: number | string
+  offset: number
+  length: number
+}
+
+/** 块级 `data` 里的 @mention / #hashtag span（越过 entityMap 直接给偏移） */
+export interface RawArticleSpan {
+  fromIndex?: number
+  toIndex?: number
+  text?: string
+}
+
+export interface RawArticleBlock {
+  key?: string
+  text?: string
+  type?: string
+  data?: {
+    mentions?: RawArticleSpan[]
+    hashtags?: RawArticleSpan[]
+    [key: string]: unknown
+  }
+  entityRanges?: RawArticleEntityRange[]
+  inlineStyleRanges?: RawArticleInlineStyleRange[]
+}
+
+export interface RawArticleEntityValue {
+  type?: string
+  mutability?: string
+  data?: {
+    url?: string
+    markdown?: string
+    tweetId?: string
+    /** 写入用 snake_case 与读取用 camelCase 都可能出现 */
+    mediaItems?: Array<{ mediaId?: string, localMediaId?: string, mediaCategory?: string }>
+    media_items?: Array<{ media_id?: string, local_media_id?: string, media_category?: string }>
+    caption?: string
+    [key: string]: unknown
+  }
+}
+
+export interface RawArticleEntity {
+  key?: string | number
+  value?: RawArticleEntityValue
+}
+
+export interface RawArticleContentState {
+  /** 数组形态；也见过以 key 为键的 Record 形态 */
+  entityMap?: RawArticleEntity[] | Record<string, RawArticleEntityValue>
+  blocks?: RawArticleBlock[]
+}
+
+export interface RawArticleResult {
+  id?: string
+  rest_id?: string
+  title?: string
+  preview_text?: string
+  plain_text?: string
+  cover_media?: RawArticleMedia
+  media_entities?: RawArticleMedia[]
+  content_state?: RawArticleContentState
+  metadata?: {
+    first_published_at_secs?: number
+    [key: string]: unknown
+  }
+}
diff --git a/app/lib/service/articleTranslationSync.ts b/app/lib/service/articleTranslationSync.ts
new file mode 100644
index 00000000..8d37d1c9
--- /dev/null
+++ b/app/lib/service/articleTranslationSync.ts
@@ -0,0 +1,20 @@
+import type { ArticleTranslation } from '~/lib/article/translate'
+import axios from 'axios'
+
+/**
+ * 持久化文章按块译文（best-effort，失败只告警）。
+ *
+ * 与推文实体翻译分开存储：`tweet.jsonContent` 会被整条上游结果 upsert 覆盖，
+ * 翻译不能塞进 jsonContent（详见 `getTweet.server.ts` 的 article 翻译读写）。
+ */
+export async function syncArticleTranslation(tweetId: string, translation: ArticleTranslation) {
+  try {
+    await axios.post('/api/tweet/set', {
+      data: [{ tweetId, translation }],
+      intent: 'updateArticleTranslations',
+    })
+  }
+  catch (error) {
+    console.warn('[ArticleTrans] failed to persist translation:', error)
+  }
+}
diff --git a/app/lib/service/getTweet.server.ts b/app/lib/service/getTweet.server.ts
index 5f1410b9..92e37b72 100644
--- a/app/lib/service/getTweet.server.ts
+++ b/app/lib/service/getTweet.server.ts
@@ -1,8 +1,10 @@
+import type { ArticleTranslation } from '~/lib/article/translate'
 import type { EnrichedTweet, TranslationEntity } from '~/types'
 import type { AIVisionInfo } from '~/types/vision'
 import { eq } from 'drizzle-orm'
 import { getDbClient, isDbAvailable } from '~/lib/database/db.server'
-import { tweet, tweetEntities } from '~/lib/database/schema'
+import { tweet, tweetArticleTranslations, tweetEntities } from '~/lib/database/schema'
+import { isArticleUrl } from '~/lib/react-tweet/utils/article'
 import { getEnrichedTweet, resolveSpaceById } from '~/lib/react-tweet/utils/get-tweet'
 import { resolveSpaceId } from '~/lib/react-tweet/utils/space'
 import { getLocalCache, setLocalCache } from '../localCache'
@@ -42,10 +44,44 @@ async function backfillSpaceDetails(tweet: EnrichedTweet): Promise<EnrichedTweet
   return patched
 }
 
+/**
+ * 为**已缓存**的文章型推文回填 `article` 字段。
+ *
+ * `article` 是后加字段：改动前落地的缓存没有它（或只有 flat 的 `plainText`），
+ * 命中缓存时不再走 `getEnrichedTweet`，于是文章只渲染正文里那条裸链接。旧缓存不保留
+ * 原始 `article` 节点，但文章链接始终存在于实体里，故据此探测并重抓一次上游；
+ * 结果 best-effort 写回两层缓存，取数失败（如 429）保持原样返回。
+ *
+ * 判别用 `format === 'rich'`（结构化）而非「有没有 article」——否则 flat 缓存会被
+ * 误当成最新，DB 行将永不升级为块文档。
+ */
+async function backfillArticleDetails(tweet: EnrichedTweet): Promise<EnrichedTweet> {
+  if (tweet.article?.format === 'rich')
+    return tweet
+
+  const hasArticleLink = tweet.entities.some(e => isArticleUrl((e as { href?: string }).href))
+  if (!hasArticleLink)
+    return tweet
+
+  const fresh = await getEnrichedTweet(tweet.id_str)
+  if (!fresh?.article)
+    return tweet
+
+  const patched: EnrichedTweet = { ...tweet, article: fresh.article }
+
+  await Promise.allSettled([
+    setLocalCache({ id: tweet.id_str, type: 'tweet', value: patched }),
+    insertToTweetDB([patched]),
+  ])
+
+  return patched
+}
+
 /**
  * 读单条推文：localCache → DB → 上游。
  *
- * 出口统一做一次 Space 回填（见 `backfillSpaceDetails`），使旧缓存与新抓取走同一呈现路径。
+ * 出口依次做 Space / Article 回填（见 `backfillSpaceDetails`、`backfillArticleDetails`），
+ * 使旧缓存与新抓取走同一呈现路径。
  */
 export async function getLocalTweet(tweetId: string): Promise<EnrichedTweet | null> {
   const tweet = await getLocalCache({
@@ -57,7 +93,7 @@ export async function getLocalTweet(tweetId: string): Promise<EnrichedTweet | nu
   if (!tweet)
     return tweet
 
-  return backfillSpaceDetails(tweet)
+  return backfillArticleDetails(await backfillSpaceDetails(tweet))
 }
 
 export function mergeTranslationEntities(enrichedTweet: EnrichedTweet, entities: TranslationEntity[]) {
@@ -174,6 +210,65 @@ export async function updateTweetVisionInfo(
   }
 }
 
+/**
+ * 读取某条文章推文的按块译文。
+ *
+ * 两级：localCache（`article-translation`，本地 FS/内存）→ DB（`tweet_article_translations`）。
+ * 与 `tweet.jsonContent` 无关——后者会被上游结果整条 upsert 覆盖，译文放进去会丢。
+ * 无 DB / 查询失败时返回 null（页面据此回退为原文，不伪造译文）。
+ */
+export async function getArticleTranslation(tweetId: string): Promise<ArticleTranslation | null> {
+  const fromDb = async (): Promise<ArticleTranslation | null> => {
+    if (!isDbAvailable())
+      return null
+    try {
+      const row = await getDbClient().query.tweetArticleTranslations.findFirst({
+        where: eq(tweetArticleTranslations.tweetId, tweetId),
+      })
+      return row?.translations ?? null
+    }
+    catch (error) {
+      console.warn('[ArticleTrans] read failed:', error)
+      return null
+    }
+  }
+
+  // localCache 未命中时回源 DB，并顺带写回本地层，避免每次浏览都打库
+  return getLocalCache<ArticleTranslation | null>({
+    id: tweetId,
+    type: 'article-translation',
+    getter: fromDb,
+  })
+}
+
+/**
+ * 持久化某条文章推文的按块译文（best-effort，同时写本地缓存 + DB）。
+ */
+export async function updateArticleTranslation(
+  tweetId: string,
+  translation: ArticleTranslation,
+): Promise<void> {
+  await Promise.allSettled([
+    setLocalCache({ id: tweetId, type: 'article-translation', value: translation }),
+    (async () => {
+      if (!isDbAvailable())
+        return
+      try {
+        await getDbClient()
+          .insert(tweetArticleTranslations)
+          .values({ tweetId, translations: translation })
+          .onConflictDoUpdate({
+            target: tweetArticleTranslations.tweetId,
+            set: { translations: translation, updatedAt: new Date() },
+          })
+      }
+      catch (error) {
+        console.error('[ArticleTrans] write failed:', error)
+      }
+    })(),
+  ])
+}
+
 export async function getDBTweet(tweetId: string): Promise<EnrichedTweet | null> {
   // 1. 无 DB 环境：直接短路返回
   if (!isDbAvailable()) {
diff --git a/app/lib/stores/hooks.ts b/app/lib/stores/hooks.ts
index 0ec32a56..41c1cc5a 100644
--- a/app/lib/stores/hooks.ts
+++ b/app/lib/stores/hooks.ts
@@ -1,3 +1,4 @@
+import type { ArticleTranslation } from '~/lib/article/translate'
 import type { EnrichedTweet } from '~/types'
 import { useMemo } from 'react'
 import { useShallow } from 'zustand/react/shallow'
@@ -98,6 +99,8 @@ export function useTranslationActions() {
       setTweetTranslationMode: state.setTweetTranslationMode,
       setTranslationMode: state.setTranslationMode,
       setVisionVisibility: state.setVisionVisibility,
+      setArticleTranslation: state.setArticleTranslation,
+      setArticleTranslationStatus: state.setArticleTranslationStatus,
       hasTextContent: state.hasTextContent,
     })),
   )
@@ -259,3 +262,13 @@ export function useGlobalTranslationMode() {
 export function useTranslations() {
   return useTranslationStore(useShallow(state => state.translations))
 }
+
+/** 读取某篇文章的按块译文（无则 undefined） */
+export function useArticleTranslation(tweetId: string): ArticleTranslation | undefined {
+  return useTranslationStore(state => state.articleTranslations[tweetId])
+}
+
+/** 读取某篇文章翻译的加载态 */
+export function useArticleTranslationStatus(tweetId: string) {
+  return useTranslationStore(state => state.articleTranslationStatus[tweetId] ?? 'idle')
+}
diff --git a/app/lib/stores/translation.ts b/app/lib/stores/translation.ts
index b51e5c83..493ce4c4 100644
--- a/app/lib/stores/translation.ts
+++ b/app/lib/stores/translation.ts
@@ -1,4 +1,5 @@
 import type { StateCreator } from 'zustand'
+import type { ArticleTranslation } from '~/lib/article/translate'
 import type { SeparatorTemplate } from '~/lib/constants'
 import type { EnrichedTweet, Entity, TweetData } from '~/types'
 import { create } from 'zustand'
@@ -8,6 +9,9 @@ import { checkTextContent, extractTranslationsFromEntities, stripTranslationsFro
 
 export type TranslationMode = 'bilingual' | 'original' | 'translation'
 
+/** X Article 按块翻译的加载态 */
+export type ArticleTranslationStatus = 'idle' | 'loading' | 'done' | 'error'
+
 const DEFAULT_VISIBILITY = { body: true, alt: true }
 
 // --- Settings Slice ---
@@ -128,6 +132,9 @@ interface DataSlice {
   translationMode: TranslationMode
   /** 逐推文图片描述可见性覆盖（会话级，不进 persist）：true=强制展示 / false=强制隐藏 */
   visionVisibility: Record<string, boolean>
+  /** X Article 按块译文（会话级；持久化由 DB + loader 回填） */
+  articleTranslations: Record<string, ArticleTranslation>
+  articleTranslationStatus: Record<string, ArticleTranslationStatus>
 
   // Data Actions
   setAllTweets: (data: TweetData, mainTweetId: string) => void
@@ -144,6 +151,8 @@ interface DataSlice {
   getTweetTranslationMode: (tweetId: string) => TranslationMode
   setTranslationMode: (mode: TranslationMode) => void
   setVisionVisibility: (tweetId: string, show: boolean) => void
+  setArticleTranslation: (tweetId: string, translation: ArticleTranslation) => void
+  setArticleTranslationStatus: (tweetId: string, status: ArticleTranslationStatus) => void
 
   // Utils
   hasTextContent: (text?: string) => boolean
@@ -164,6 +173,8 @@ const createDataSlice: StateCreator<
   tweetTranslationModes: {},
   translationMode: 'bilingual',
   visionVisibility: {},
+  articleTranslations: {},
+  articleTranslationStatus: {},
 
   // --- Actions ---
   setCommentIds: ids => set({ commentIds: ids }),
@@ -274,6 +285,16 @@ const createDataSlice: StateCreator<
       visionVisibility: { ...state.visionVisibility, [tweetId]: show },
     })),
 
+  setArticleTranslation: (tweetId, translation) =>
+    set(state => ({
+      articleTranslations: { ...state.articleTranslations, [tweetId]: translation },
+    })),
+
+  setArticleTranslationStatus: (tweetId, status) =>
+    set(state => ({
+      articleTranslationStatus: { ...state.articleTranslationStatus, [tweetId]: status },
+    })),
+
   hasTextContent: checkTextContent,
 })
 
diff --git a/app/lib/validations/tweet.ts b/app/lib/validations/tweet.ts
index 5745d627..916eab0e 100644
--- a/app/lib/validations/tweet.ts
+++ b/app/lib/validations/tweet.ts
@@ -1,5 +1,5 @@
 import type { AIProviderName } from '~/lib/constants'
-import type { EnrichedTweet, IGPost, TranslationEntity } from '~/types'
+import type { EnrichedTweet, IGPost, TranslationEntity, TweetArticle } from '~/types'
 import { z } from 'zod'
 
 export const tweetSchema = z.discriminatedUnion('intent', [
@@ -18,6 +18,16 @@ export const tweetSchema = z.discriminatedUnion('intent', [
       tweetId: z.string(),
     }).array(),
   }),
+  z.object({
+    intent: z.literal('updateArticleTranslations'),
+    data: z.object({
+      tweetId: z.string(),
+      translation: z.object({
+        title: z.string().optional(),
+        blocks: z.record(z.string(), z.string()),
+      }),
+    }).array(),
+  }),
 ])
 
 /**
@@ -57,4 +67,15 @@ export type AITranslationSchema = (Omit<GetTweetSchema, 'tweetId'> & {
   thinkingLevel?: string
   translationGlossary?: string
   force?: boolean
+} | {
+  /** X Article 按块 AI 翻译 */
+  type: 'article'
+  article: TweetArticle
+  apiKey: string
+  model: string
+  provider?: AIProviderName
+  baseUrl?: string
+  thinkingLevel?: string
+  translationGlossary?: string
+  force?: boolean
 }
diff --git a/app/routes.ts b/app/routes.ts
index d41aec53..a3dc10f6 100644
--- a/app/routes.ts
+++ b/app/routes.ts
@@ -14,6 +14,7 @@ export default [
     index('routes/home.tsx'),
     route('/list/:id', 'routes/list.tsx'),
     route('/tweets/:id', 'routes/tweet.tsx'),
+    route('/article/:id', 'routes/article.tsx'),
     route('/ins/:id', 'routes/ins.tsx'),
     route('/bili', 'routes/bili.tsx'),
     route('/search', 'routes/search.tsx'),
diff --git a/app/routes/api/ai/ai-translation.ts b/app/routes/api/ai/ai-translation.ts
index d63a5531..e66c9296 100644
--- a/app/routes/api/ai/ai-translation.ts
+++ b/app/routes/api/ai/ai-translation.ts
@@ -1,9 +1,11 @@
 import type { Route } from './+types/ai-translation'
+import type { ThinkingLevel } from '~/lib/stores/appConfig'
 import type { AITranslationSchema } from '~/lib/validations/tweet'
 import { data } from 'react-router'
 import { isAllowedAIBaseUrl } from '~/lib/ai-base-url'
 import { normalizeAIError } from '~/lib/ai-error'
 import { autoTranslateTweet } from '~/lib/AITranslation'
+import { autoTranslateArticle } from '~/lib/article/translate'
 import { models } from '~/lib/constants'
 import { setLocalCache } from '~/lib/localCache'
 import { getProviderStrategy } from '~/lib/providers'
@@ -16,6 +18,7 @@ import { translateIGCaption } from '~/lib/translateIGCaption'
  * 统一 AI 翻译端点，通过 `type` 区分：
  * - `twitter` (默认): 翻译推文实体
  * - `ins`: 翻译 Instagram caption
+ * - `article`: 按块翻译 X Article 长文
  */
 export async function action({ request }: Route.ActionArgs) {
   const jsonData: AITranslationSchema = await request.json()
@@ -25,10 +28,71 @@ export async function action({ request }: Route.ActionArgs) {
     return handleIGTranslation(jsonData)
   }
 
+  // ─── Article 分支 ───────────────────────────────
+  if (jsonData.type === 'article') {
+    return handleArticleTranslation(jsonData)
+  }
+
   // ─── Twitter 分支（原逻辑） ────────────────────
   return handleTweetTranslation(jsonData)
 }
 
+/**
+ * X Article 按块 AI 翻译
+ */
+async function handleArticleTranslation(args: Extract<AITranslationSchema, { type: 'article' }>) {
+  const { article, apiKey, model, provider, baseUrl, thinkingLevel, translationGlossary } = args
+
+  if (!article || (!article.blocks?.length && !article.title)) {
+    return data({ success: false, error: 'Article not found or empty', status: 404 })
+  }
+
+  if (!apiKey || !model) {
+    return data({ success: false, error: 'Missing apiKey or model', status: 400 })
+  }
+
+  // AC-SEC-001：baseUrl 白名单校验
+  if (!isAllowedAIBaseUrl(baseUrl)) {
+    return data({
+      success: false,
+      error: 'baseUrl not allowed',
+      status: 400,
+      message: 'baseUrl 不在白名单内：仅支持官方提供商域名或 ALLOWED_AI_BASE_URL_HOSTS 扩展域名（AC-SEC-001，ENABLE_AI_BASE_URL_WHITELIST=true）',
+    })
+  }
+
+  try {
+    const modelConfig = models.find(m => m.name === model)
+    const resolvedProvider = provider || modelConfig?.provider || 'google'
+
+    const strategy = getProviderStrategy(resolvedProvider)
+    const sdkProvider = strategy.createSDKProvider(apiKey, baseUrl)
+    const modelInstance = sdkProvider.languageModel(model)
+
+    const translation = await autoTranslateArticle(article, {
+      modelInstance,
+      modelName: model,
+      thinkingLevel: thinkingLevel as ThinkingLevel | undefined,
+      translationGlossary,
+    })
+
+    return data({
+      success: true,
+      data: { articleId: article.id, translation },
+    })
+  }
+  catch (error: unknown) {
+    console.error('[AI-Trans Article] Failed:', error)
+    return data({
+      success: false,
+      error: 'Translation failed',
+      status: 500,
+      message: error instanceof Error ? error.message : '未知错误',
+      aiError: normalizeAIError(error),
+    })
+  }
+}
+
 /**
  * Instagram caption AI 翻译
  */
diff --git a/app/routes/api/tweet/set.ts b/app/routes/api/tweet/set.ts
index 2747e714..55a8c9e2 100644
--- a/app/routes/api/tweet/set.ts
+++ b/app/routes/api/tweet/set.ts
@@ -2,7 +2,7 @@ import type { Route } from './+types/set'
 import type { EnrichedTweet } from '~/types'
 import { data } from 'react-router'
 import { getLocalCache, setLocalCache } from '~/lib/localCache'
-import { mergeTranslationEntities } from '~/lib/service/getTweet.server'
+import { mergeTranslationEntities, updateArticleTranslation } from '~/lib/service/getTweet.server'
 import { updateEntities } from '~/lib/service/setTweet'
 import { tweetSchema } from '~/lib/validations/tweet'
 
@@ -44,6 +44,12 @@ export async function action({ request }: Route.ActionArgs) {
         }
       }))
       break
+
+    case 'updateArticleTranslations':
+      await Promise.all(
+        submission.data.data.map(item => updateArticleTranslation(item.tweetId, item.translation)),
+      )
+      break
   }
 
   return data({
diff --git a/app/routes/article.tsx b/app/routes/article.tsx
new file mode 100644
index 00000000..ac55101a
--- /dev/null
+++ b/app/routes/article.tsx
@@ -0,0 +1,209 @@
+import type { Route } from './+types/article'
+import type { ArticleBlock, EnrichedTweet } from '~/types'
+import { useRef } from 'react'
+import { ArticleBody, ArticleEmbeddedTweet, ArticleImage, ArticleToolbar } from '~/components/article'
+import { Separator } from '~/components/ui/separator'
+import { useAutoTranslateArticle } from '~/hooks/use-auto-translate-article'
+import { collectEmbeddedTweetIds } from '~/lib/article'
+import { TweetNotFound } from '~/lib/react-tweet'
+import { isArticleUrl } from '~/lib/react-tweet/utils/article'
+import { formatDate } from '~/lib/react-tweet/utils/date-utils'
+import { getTweets } from '~/lib/service/getTweet'
+import { getArticleTranslation, getLocalTweet } from '~/lib/service/getTweet.server'
+import {
+  useArticleTranslation,
+  useTranslationActions,
+  useTweetMode,
+} from '~/lib/stores/hooks'
+import { extractTweetId } from '~/lib/utils'
+
+/** 并行取回文章内嵌的推文（走缓存链；单条失败降级为 null → 渲染层回退链接卡） */
+async function loadEmbeddedTweets(blocks: ArticleBlock[]): Promise<Record<string, EnrichedTweet | null>> {
+  const ids = collectEmbeddedTweetIds(blocks)
+  const entries = await Promise.all(ids.map(async (embedId) => {
+    try {
+      const tweets = await getTweets(embedId, getLocalTweet)
+      return [embedId, tweets.find(t => t.id_str === embedId) ?? tweets[0] ?? null] as const
+    }
+    catch {
+      return [embedId, null] as const
+    }
+  }))
+  return Object.fromEntries(entries)
+}
+
+export async function loader({ params, request }: Route.LoaderArgs) {
+  const tweetId = extractTweetId(params.id)
+  const baseUrl = new URL(request.url).origin
+
+  if (!tweetId) {
+    return { tweet: null, tweetId: null, baseUrl, translation: null, embeds: {} as Record<string, EnrichedTweet | null> }
+  }
+
+  try {
+    const [tweets, translation] = await Promise.all([
+      getTweets(tweetId, getLocalTweet),
+      getArticleTranslation(tweetId),
+    ])
+    const tweet = tweets.find(t => t.id_str === tweetId) ?? tweets[0] ?? null
+    const embeds = tweet?.article?.blocks ? await loadEmbeddedTweets(tweet.article.blocks) : {}
+    return { tweet, tweetId, baseUrl, translation, embeds }
+  }
+  catch {
+    return { tweet: null, tweetId, baseUrl, translation: null, embeds: {} as Record<string, EnrichedTweet | null> }
+  }
+}
+
+export function meta({ loaderData }: Route.MetaArgs) {
+  const tweet = loaderData?.tweet
+  const article = tweet?.article
+  const baseUrl = loaderData?.baseUrl || 'https://anontweet.chilfish.top'
+
+  const title = article?.title || 'X 长文'
+  const description = article?.previewText || ''
+  const canonicalUrl = loaderData?.tweetId ? `${baseUrl}/article/${loaderData.tweetId}` : baseUrl
+
+  const tags = [
+    { title: `${title} | Anon Tweet` },
+    { name: 'description', content: description },
+    { property: 'og:title', content: title },
+    { property: 'og:description', content: description },
+    { property: 'og:type', content: 'article' },
+    { property: 'og:url', content: canonicalUrl },
+    { name: 'twitter:card', content: article?.coverImage ? 'summary_large_image' : 'summary' },
+    { tagName: 'link', rel: 'canonical', href: canonicalUrl },
+  ]
+
+  if (article?.coverImage?.url) {
+    tags.push({ property: 'og:image', content: article.coverImage.url })
+    tags.push({ name: 'twitter:image', content: article.coverImage.url })
+  }
+
+  return tags
+}
+
+/** 推文正文是否只有一条文章链接（这类推文不重复展示正文） */
+function isArticleOnlyText(tweet: NonNullable<Route.ComponentProps['loaderData']['tweet']>): boolean {
+  const entities = tweet.entities ?? []
+  return entities.length > 0 && entities.every(entity => entity.type === 'url' && isArticleUrl(entity.href))
+}
+
+export default function ArticlePage({ loaderData }: Route.ComponentProps) {
+  const { tweet, tweetId, translation: persisted, embeds } = loaderData
+  const article = tweet?.article
+  const id = tweetId ?? ''
+  const articleRef = useRef<HTMLDivElement>(null)
+
+  const mode = useTweetMode(id)
+  const stored = useArticleTranslation(id)
+  const { setTweetTranslationMode } = useTranslationActions()
+
+  const { status, translate } = useAutoTranslateArticle(
+    article ?? undefined,
+    tweetId ?? undefined,
+    persisted,
+  )
+
+  if (!tweet || !article || !tweetId) {
+    return (
+      <div className="mx-auto w-full max-w-2xl px-4 py-10">
+        <TweetNotFound tweetId={tweetId ?? undefined} />
+      </div>
+    )
+  }
+
+  const translation = stored ?? persisted ?? undefined
+  const translatedTitle = translation?.title
+  const showTranslatedTitle = Boolean(translatedTitle) && mode !== 'original'
+
+  const publishTime = article.publishedAt ?? tweet.created_at
+  const showCommentary = tweet.text?.trim() && !isArticleOnlyText(tweet)
+
+  // 内嵌推文：取到数据即用真实推文组件渲染；未取到（删除/受限/失败）回退链接卡
+  const renderEmbed = (embedId: string) => {
+    const embedded = embeds?.[embedId]
+    return embedded ? <ArticleEmbeddedTweet tweet={embedded} /> : undefined
+  }
+
+  return (
+    <div className="mx-auto w-full max-w-2xl px-0 py-6">
+      <ArticleToolbar
+        tweetId={tweetId}
+        article={article}
+        tweet={tweet}
+        captureRef={articleRef}
+        mode={mode}
+        onModeChange={next => setTweetTranslationMode(tweetId, next)}
+        status={status}
+        hasTranslation={Boolean(translation)}
+        onRetry={() => void translate(true)}
+      />
+
+      <article ref={articleRef} className="rounded-2xl border border-border/60 bg-card p-4 sm:p-6">
+        <header className="space-y-4">
+          <div>
+            <h1 className="text-2xl font-bold leading-tight text-foreground">
+              {mode === 'translation' && translatedTitle ? translatedTitle : article.title || 'X 长文'}
+            </h1>
+            {mode === 'bilingual' && showTranslatedTitle && (
+              <p className="mt-2 border-l-2 border-border/70 pl-2.5 text-lg font-semibold text-muted-foreground">
+                {translatedTitle}
+              </p>
+            )}
+          </div>
+
+          <div className="flex items-center gap-3">
+            {tweet.user?.profile_image_url_https && (
+              <img
+                src={tweet.user.profile_image_url_https}
+                alt={tweet.user.name}
+                className="size-10 shrink-0 rounded-full object-cover"
+                loading="lazy"
+              />
+            )}
+            <div className="min-w-0">
+              <div className="truncate text-sm font-semibold text-foreground">{tweet.user?.name}</div>
+              <div className="truncate text-xs text-muted-foreground">
+                @
+                {tweet.user?.screen_name}
+                {' · '}
+                {formatDate(publishTime, 'yyyy年MM月dd日')}
+              </div>
+            </div>
+            <a
+              href={`https://x.com/i/article/${article.id}`}
+              target="_blank"
+              rel="noopener noreferrer nofollow"
+              className="ml-auto shrink-0 text-xs font-medium text-primary hover:underline"
+            >
+              在 X 查看 →
+            </a>
+          </div>
+
+          {showCommentary && (
+            <p className="text-[15px] leading-7 whitespace-pre-wrap text-foreground/80">{tweet.text}</p>
+          )}
+
+          {article.coverImage && <ArticleImage media={article.coverImage} />}
+        </header>
+
+        <Separator className="my-6" />
+
+        {article.blocks?.length
+          ? (
+              <ArticleBody
+                blocks={article.blocks}
+                translations={translation?.blocks}
+                mode={mode}
+                renderEmbed={renderEmbed}
+              />
+            )
+          : (
+              <p className="text-[15px] leading-7 whitespace-pre-wrap text-foreground/90">
+                {article.plainText ?? article.previewText ?? ''}
+              </p>
+            )}
+      </article>
+    </div>
+  )
+}
diff --git a/app/types/article.ts b/app/types/article.ts
new file mode 100644
index 00000000..202fc5f9
--- /dev/null
+++ b/app/types/article.ts
@@ -0,0 +1,64 @@
+/**
+ * X Article（长文）数据。
+ *
+ * 文章型推文（`x.com/<user>/article/<id>`）的正文不在 `legacy.full_text` 里，
+ * 只有一条指向文章页的 t.co 链接；正文从推文响应的 `article` 节点取回：
+ * - `withArticleRichContentState` → Draft.js `content_state`（块文档，首选）
+ * - `withArticlePlainText` → `plain_text`（纯文本兜底）
+ */
+export interface TweetArticle {
+  /** 文章 rest_id（`x.com/i/article/<id>` 里的 id） */
+  id: string
+  /** 文章永久链接 */
+  url: string
+  title: string
+  /** 摘要（无富文本时也能拿到） */
+  previewText?: string
+  /** 纯文本全文（`content_state` 缺失时的兜底正文） */
+  plainText?: string
+  /** 结构化判别：`rich` 表示 `blocks` 可用；`plain` 只有纯文本。供缓存回填升级 */
+  format: 'rich' | 'plain'
+  /** 封面图 */
+  coverImage?: ArticleMedia
+  /** 首次发布时间（毫秒） */
+  publishedAt?: number
+  /** 块文档（`format === 'rich'` 时存在） */
+  blocks?: ArticleBlock[]
+}
+
+/** 文章内嵌媒体（图片） */
+export interface ArticleMedia {
+  id: string
+  url: string
+  width?: number
+  height?: number
+  alt?: string
+}
+
+export type ArticleInlineStyle = 'bold' | 'italic' | 'strikethrough'
+
+/** 块内行内片段 */
+export type ArticleRun = {
+  text: string
+  /** 行内样式 */
+  styles?: ArticleInlineStyle[]
+} & (
+  | { type: 'text' }
+  | { type: 'link', url: string }
+  | { type: 'mention' | 'hashtag', href: string }
+)
+
+/** 文章块（Draft.js block → 语义化块） */
+export type ArticleBlock
+  = | { key: string, type: 'paragraph', runs: ArticleRun[] }
+    | { key: string, type: 'heading', level: 1 | 2 | 3, runs: ArticleRun[] }
+    | { key: string, type: 'list-item', ordered: boolean, runs: ArticleRun[] }
+    | { key: string, type: 'quote', runs: ArticleRun[] }
+  /** `MARKDOWN` 实体：作者写入的 GFM（表格 / 代码块 / 列表等），由 markdown 渲染器呈现 */
+    | { key: string, type: 'markdown', text: string }
+    | { key: string, type: 'divider' }
+    | { key: string, type: 'image', media: ArticleMedia, caption?: string }
+    | { key: string, type: 'embed-tweet', tweetId: string }
+    | { key: string, type: 'link', url: string }
+  /** 未知块类型：保留纯文本以免内容丢失 */
+    | { key: string, type: 'unknown', text?: string }
diff --git a/app/types/index.ts b/app/types/index.ts
index fd4185e4..1174c2ff 100644
--- a/app/types/index.ts
+++ b/app/types/index.ts
@@ -1,3 +1,4 @@
+import type { TweetArticle } from './article'
 import type { LinkPreviewCard } from './card'
 import type { Entity } from './entities'
 import type { SpaceDetails } from './space'
@@ -6,6 +7,7 @@ import type { AIVisionInfo } from './vision'
 import type { IUser } from '~/lib/rettiwt-api'
 import type { ITweetDetailsResponse } from '~/lib/rettiwt-api/types/raw/tweet/Details'
 
+export type * from './article'
 export type * from './card'
 export type * from './entities'
 // Instagram 类型
@@ -30,6 +32,7 @@ export type EnrichedTweet = Omit<Tweet, OmitTypes> & {
   quoted_tweet_id?: string
   quotedTweet?: EnrichedTweet
   card?: LinkPreviewCard
+  article?: TweetArticle
   space?: SpaceDetails
   retweetedOrignalId?: string
   isInlineMeida?: boolean
diff --git a/bun.lock b/bun.lock
index 81476bc9..67add191 100644
--- a/bun.lock
+++ b/bun.lock
@@ -37,7 +37,9 @@
         "react": "^19.3.0",
         "react-day-picker": "^10.0.1",
         "react-dom": "^19.3.0",
+        "react-markdown": "^10.1.0",
         "react-router": "^8.4.0",
+        "remark-gfm": "^4.0.1",
         "sonner": "^2.0.8",
         "spin-delay": "^2.0.1",
         "swr": "^2.5.1",
@@ -724,6 +726,8 @@
 
     "@types/estree": ["@types/estree@1.0.9", "", {}, "sha512-GhdPgy1el4/ImP05X05Uw4cw2/M93BCUmnEvWZNStlCzEKME4Fkk+YpoA5OiHNQmoS7Cafb8Xa3Pya8m1Qrzeg=="],
 
+    "@types/estree-jsx": ["@types/estree-jsx@1.0.5", "", { "dependencies": { "@types/estree": "*" } }, "sha512-52CcUVNFyfb1A2ALocQw/Dd1BQFNmSdkuC3BkZ6iqhdMfQz7JWOFRuJFloOzjk+6WijU56m9oKXFAXc7o3Towg=="],
+
     "@types/hast": ["@types/hast@3.0.5", "", { "dependencies": { "@types/unist": "*" } }, "sha512-rp/ezSWaD1m44dPKICGhiskI13nVr7qTloFwDa/IYkhhf5nzwP+zIQcIJh3WIFSBOy/H1PzB40jPjMDksN4F+g=="],
 
     "@types/json-schema": ["@types/json-schema@7.0.15", "", {}, "sha512-5+fP8P8MFNC+AyZCDxrB2pkZFPGzqQWUzpSeuuVLvm8VMcorNYavBqoFcxK8bQz4Qsbn4oUEEem4wDLfcysGHA=="],
@@ -770,6 +774,8 @@
 
     "@typescript-eslint/visitor-keys": ["@typescript-eslint/visitor-keys@8.70.0", "", { "dependencies": { "@typescript-eslint/types": "8.70.0", "eslint-visitor-keys": "^5.0.0" } }, "sha512-BoC8PiO4Hkdo0TVJh9Ntxr5MxPDI7/oFsrygN5ADelFSeXG/qgNuucIGA+L5Z6JpPTE/uRfcTWtscjbUaufepQ=="],
 
+    "@ungap/structured-clone": ["@ungap/structured-clone@1.4.0", "", {}, "sha512-1mEZtMKPM09vDmQt5y7YvmN2+DFTP7Tg0EWXdic8/C6VRnpb33e4ghisCIE3WZjsE2N8mf+QV1Zqh7ZFYLWInQ=="],
+
     "@vercel/oidc": ["@vercel/oidc@3.2.0", "", {}, "sha512-UycprH3T6n3jH0k44NHMa7pnFHGu/N05MjojYr+Mc6I7obkoLIJujSWwin1pCvdy/eOxrI/l3uDLQsmcrOb4ug=="],
 
     "@vercel/react-router": ["@vercel/react-router@1.3.6", "", { "dependencies": { "@vercel/static-config": "3.4.3", "ts-morph": "12.0.0" }, "peerDependencies": { "@react-router/dev": "7", "@react-router/node": "7", "isbot": "5", "react": ">=18", "react-dom": ">=18" } }, "sha512-3qcvaciW20zq6OEnuFgO/4n7zSYrEU/Sd9bSNW5gHyerxFzZnp1iEbftfA8Y0pRcHjISsMC+Z5KrUt/NjVW86Q=="],
@@ -856,6 +862,8 @@
 
     "babel-plugin-react-compiler": ["babel-plugin-react-compiler@1.0.0", "", { "dependencies": { "@babel/types": "^7.26.0" } }, "sha512-Ixm8tFfoKKIPYdCCKYTsqv+Fd4IJ0DQqMyEimo+pxUOMUR9cVPlwTrFt9Avu+3cb6Zp3mAzl+t1MrG2fxxKsxw=="],
 
+    "bail": ["bail@2.0.2", "", {}, "sha512-0xO6mYd7JB2YesxDKplafRpsiOzPt9V02ddPCLbY1xYGPOX24NTyN50qnUxgCPcSoYMhKpAuBTjQoRZCAkUDRw=="],
+
     "balanced-match": ["balanced-match@4.0.4", "", {}, "sha512-BLrgEcRTwX2o6gGxGOCNyMvGSp35YofuYzw9h1IMTRmKqttAZZVU67bdb9Pr2vUHA8+j3i2tJfjO6C6+4myGTA=="],
 
     "baseline-browser-mapping": ["baseline-browser-mapping@2.11.22", "", { "bin": { "baseline-browser-mapping": "dist/cli.cjs" } }, "sha512-pWc4w51fBFd7mav43/zKRC+RI6f4yfzQoVlfvE8dECePyfkn1bzLp01Fj0QACcyCZyFhiEMyD2qScfKRWgWibA=="],
@@ -904,6 +912,12 @@
 
     "character-entities": ["character-entities@2.0.2", "", {}, "sha512-shx7oQ0Awen/BRIdkjkvz54PnEEI/EjwXDSIZp86/KKdbafHh1Df/RYGBhn4hbe2+uKC9FnT5UCEdyPz3ai9hQ=="],
 
+    "character-entities-html4": ["character-entities-html4@2.1.0", "", {}, "sha512-1v7fgQRj6hnSwFpq1Eu0ynr/CDEw0rXo2B61qXrLNdHZmPKgb7fqS1a2JwF0rISo9q77jDI8VMEHoApn8qDoZA=="],
+
+    "character-entities-legacy": ["character-entities-legacy@3.0.0", "", {}, "sha512-RpPp0asT/6ufRm//AJVwpViZbGM/MkjQFxJccQRHmISF/22NBtsHqAWmL+/pmkPWoIUJdWyeVleTl1wydHATVQ=="],
+
+    "character-reference-invalid": ["character-reference-invalid@2.0.1", "", {}, "sha512-iBZ4F4wRbyORVsu0jPV7gXkOsGYjGHPmAyv+HiHG8gi5PtC9KI2j1+v8/tlibRvjoWX027ypmG/n0HtO5t7unw=="],
+
     "check-error": ["check-error@2.1.3", "", {}, "sha512-PAJdDJusoxnwm1VwW07VWwUN1sl7smmC3OKggvndJFadxxDRyFJBX/ggnu/KE4kQAB7a3Dp8f/YXC1FlUprWmA=="],
 
     "chokidar": ["chokidar@5.0.0", "", { "dependencies": { "readdirp": "^5.0.0" } }, "sha512-TQMmc3w+5AxjpL8iIiwebF73dRDF4fBIieAqGn9RGCWaEVwQ6Fb2cGe31Yns0RRIzii5goJ1Y7xbMwo1TxMplw=="],
@@ -922,6 +936,8 @@
 
     "combined-stream": ["combined-stream@1.0.8", "", { "dependencies": { "delayed-stream": "~1.0.0" } }, "sha512-FQN4MRfuJeHf7cBbBMJFXhKSDq+2kAArBlmRBvcvFE5BB1HZKXtSFASDhdlz9zOYwxh8lDdnvmMOe/+5cdoEdg=="],
 
+    "comma-separated-tokens": ["comma-separated-tokens@2.0.3", "", {}, "sha512-Fu4hJdvzeylCfQPp9SGWidpzrMs7tTrlu6Vb8XGaRGck8QSNZJJp538Wrb60Lax4fPwR64ViY468OIUTbRlGZg=="],
+
     "commander": ["commander@8.3.0", "", {}, "sha512-OkTL9umf+He2DZkUq8f8J9of7yL6RJKI24dVITBmNfZBmri9zYZQrKkuXiKhyfPSu8tUhnVBB1iKXevvnlR4Ww=="],
 
     "comment-parser": ["comment-parser@1.4.8", "", {}, "sha512-rKZTGo4fzKYna8UcL0isTg5wkBNla7bxTypLwZQXjIdi++IdP1OJ41rI5Mti3/jltkPujbu4i9LIARYA+zpotQ=="],
@@ -1124,6 +1140,8 @@
 
     "estraverse": ["estraverse@5.3.0", "", {}, "sha512-MMdARuVEQziNTeJD8DgMqmhwR11BRQ/cBP+pLtYdSTnf3MIO8fFeiINEbX36ZdNlfU/7A9f3gUw49B3oQsvwBA=="],
 
+    "estree-util-is-identifier-name": ["estree-util-is-identifier-name@3.0.0", "", {}, "sha512-hFtqIDZTIUZ9BXLb8y4pYGyk6+wekIivNVTcmvk8NoOh+VeRn5y6cEHzbURrWbfp1fIqdVipilzj+lfaadNZmg=="],
+
     "estree-walker": ["estree-walker@2.0.2", "", {}, "sha512-Rfkk/Mp/DL7JVje3u18FxFujQlTNR2q6QfMSMB7AvCBx91NGj/ba3kCfza0f6dVDbw7YlRf/nDrn7pQrCCyQ/w=="],
 
     "esutils": ["esutils@2.0.3", "", {}, "sha512-kVscqXk4OCp68SZ0dkgEKVi6/8ij300KBWTJq32P/dYeWTSwK41WyTxalN1eRmA5Z9UU/LX9D7FWSmV9SAYx6g=="],
@@ -1140,6 +1158,8 @@
 
     "exsolve": ["exsolve@1.1.0", "", {}, "sha512-D+42+T12DdIlJM3uepa55qGiL3sYdLBOxIl2ifQCzCHz4c7eiolaHsi3BIqEr7JxBzxv2pYZQX9kw16ziMcEmw=="],
 
+    "extend": ["extend@3.0.2", "", {}, "sha512-fjquC59cD7CyW6urNXK0FBufkZcoiGG80wTuPujX590cB5Ttln20E2UB4S/WARVqhXffZl2LNgS+gQdPIIim/g=="],
+
     "fast-deep-equal": ["fast-deep-equal@3.1.3", "", {}, "sha512-f3qQ9oQy9j2AhBe/H9VC91wLmKBCCU/gDOnKNAYG5hswO7BLKj09Hc5HYNz9cGI++xlpDCIgDaitVs03ATR84Q=="],
 
     "fast-defer": ["fast-defer@1.1.9", "", {}, "sha512-JP7Xm9HuePSeTT1DI78NeE9eAQvgNb9qNP2jlyQrcx4jiWM189omV6oyd0xaUPWHPlKmvDzz6H1FfPWIDU+xfg=="],
@@ -1232,12 +1252,18 @@
 
     "hasown": ["hasown@2.0.4", "", { "dependencies": { "function-bind": "^1.1.2" } }, "sha512-T2UbfbBEF32wiepXIsMlTW9+dDYC6wMh/t/vYA4tuOMKqWz/n3vr1NFSxQiyP+zk2mXsoMA/i/7qV6LKut1t1A=="],
 
+    "hast-util-to-jsx-runtime": ["hast-util-to-jsx-runtime@2.3.6", "", { "dependencies": { "@types/estree": "^1.0.0", "@types/hast": "^3.0.0", "@types/unist": "^3.0.0", "comma-separated-tokens": "^2.0.0", "devlop": "^1.0.0", "estree-util-is-identifier-name": "^3.0.0", "hast-util-whitespace": "^3.0.0", "mdast-util-mdx-expression": "^2.0.0", "mdast-util-mdx-jsx": "^3.0.0", "mdast-util-mdxjs-esm": "^2.0.0", "property-information": "^7.0.0", "space-separated-tokens": "^2.0.0", "style-to-js": "^1.0.0", "unist-util-position": "^5.0.0", "vfile-message": "^4.0.0" } }, "sha512-zl6s8LwNyo1P9uw+XJGvZtdFF1GdAkOg8ujOw+4Pyb76874fLps4ueHXDhXWdk6YHQ6OgUtinliG7RsYvCbbBg=="],
+
+    "hast-util-whitespace": ["hast-util-whitespace@3.0.0", "", { "dependencies": { "@types/hast": "^3.0.0" } }, "sha512-88JUN06ipLwsnv+dVn+OIYOvAuvBMy/Qoi6O7mQHxdPXpjy+Cd6xRkWwux7DKO+4sYILtLBRIKgsdpS2gQc7qw=="],
+
     "hookified": ["hookified@1.15.1", "", {}, "sha512-MvG/clsADq1GPM2KGo2nyfaWVyn9naPiXrqIe4jYjXNZQt238kWyOGrsyc/DmRAQ+Re6yeo6yX/yoNCG5KAEVg=="],
 
     "html-entities": ["html-entities@2.6.0", "", {}, "sha512-kig+rMn/QOVRvr7c86gQ8lWXq+Hkv6CbAH1hLu+RG338StTpE8Z0b44SDVaqVu7HGKf27frdmUYEs9hTUX/cLQ=="],
 
     "html-escaper": ["html-escaper@3.0.3", "", {}, "sha512-RuMffC89BOWQoY0WKGpIhn5gX3iI54O6nRA0yC124NYVtzjmFWBIiFd8M0x+ZdX0P9R4lADg1mgP8C7PxGOWuQ=="],
 
+    "html-url-attributes": ["html-url-attributes@3.0.1", "", {}, "sha512-ol6UPyBWqsrO6EJySPz2O7ZSr856WDrEzM5zMqp+FJJLGMW35cLYmmZnl0vztAZxRUoNZJFTCohfjuIJ8I4QBQ=="],
+
     "htmlparser2": ["htmlparser2@10.1.0", "", { "dependencies": { "domelementtype": "^2.3.0", "domhandler": "^5.0.3", "domutils": "^3.2.2", "entities": "^7.0.1" } }, "sha512-VTZkM9GWRAtEpveh7MSF6SjjrpNVNNVJfFup7xTY3UpFtm67foy9HDVXneLtFVt4pMz5kZtgNcvCniNFb1hlEQ=="],
 
     "http-errors": ["http-errors@2.0.1", "", { "dependencies": { "depd": "~2.0.0", "inherits": "~2.0.4", "setprototypeof": "~1.2.0", "statuses": "~2.0.2", "toidentifier": "~1.0.1" } }, "sha512-4FbRdAX+bSdmo4AUFuS0WNiPz8NgFt+r8ThgNWmlrjQjt1Q7ZR9+zTlce2859x4KSXrwIsaeTqDoKQmtP8pLmQ=="],
@@ -1258,24 +1284,36 @@
 
     "inherits": ["inherits@2.0.4", "", {}, "sha512-k/vGaX4/Yla3WzyMCvTQOXYeIHvqOKtnqBduzTHpzpQZzAskKMhZ2K+EnBiSM9zGSoIFeMpXKxa4dYeZIQqewQ=="],
 
+    "inline-style-parser": ["inline-style-parser@0.2.7", "", {}, "sha512-Nb2ctOyNR8DqQoR0OwRG95uNWIC0C1lCgf5Naz5H6Ji72KZ8OcFZLz2P5sNgwlyoJ8Yif11oMuYs5pBQa86csA=="],
+
     "ipaddr.js": ["ipaddr.js@1.9.1", "", {}, "sha512-0KI/607xoxSToH7GjN1FfSbLoU0+btTicjsQSWQlh/hZykN8KpmMf7uYwPW3R+akZ6R/w18ZlXSHBYXiYUPO3g=="],
 
+    "is-alphabetical": ["is-alphabetical@2.0.1", "", {}, "sha512-FWyyY60MeTNyeSRpkM2Iry0G9hpr7/9kD40mD/cGQEuilcZYS4okz8SN2Q6rLCJ8gbCt6fN+rC+6tMGS99LaxQ=="],
+
+    "is-alphanumerical": ["is-alphanumerical@2.0.1", "", { "dependencies": { "is-alphabetical": "^2.0.0", "is-decimal": "^2.0.0" } }, "sha512-hmbYhX/9MUMF5uh7tOXyK/n0ZvWpad5caBA17GsC6vyuCqaWliRG5K1qS9inmUhEMaOBIW7/whAnSwveW/LtZw=="],
+
     "is-builtin-module": ["is-builtin-module@5.0.0", "", { "dependencies": { "builtin-modules": "^5.0.0" } }, "sha512-f4RqJKBUe5rQkJ2eJEJBXSticB3hGbN9j0yxxMQFqIW89Jp9WYFtzfTcRlstDKVUTRzSOTLKRfO9vIztenwtxA=="],
 
     "is-core-module": ["is-core-module@2.16.2", "", { "dependencies": { "hasown": "^2.0.3" } }, "sha512-evOr8xfXKxE6qSR0hSXL2r3sd7ALj8+7jQEUvPYcm5sgZFdJ+AYzT6yNmJenvIYQBgIGwfwz08sL8zoL7yq2BA=="],
 
+    "is-decimal": ["is-decimal@2.0.1", "", {}, "sha512-AAB9hiomQs5DXWcRB1rqsxGUstbRroFOPPVAomNk/3XHR5JyEZChOyTWe2oayKnsSsr/kcGqF+z6yuH6HHpN0A=="],
+
     "is-docker": ["is-docker@3.0.0", "", { "bin": { "is-docker": "cli.js" } }, "sha512-eljcgEDlEns/7AXFosB5K/2nCM4P7FQPkGc/DWLy5rmFEWvZayGrik1d9/QIY5nJ4f9YsVvBkA6kJpHn9rISdQ=="],
 
     "is-extglob": ["is-extglob@2.1.1", "", {}, "sha512-SbKbANkN603Vi4jEZv49LeVJMn4yGwsbzZworEoyEiutsN3nJYdbO36zfhGJ6QEDpOZIFkDtnq5JRxmvl3jsoQ=="],
 
     "is-glob": ["is-glob@4.0.3", "", { "dependencies": { "is-extglob": "^2.1.1" } }, "sha512-xelSayHH36ZgE7ZWhli7pW34hNbNl8Ojv5KVmkJD4hBdD3th8Tfk9vYasLM+mXWOZhFkgZfxhLSnrwRr4elSSg=="],
 
+    "is-hexadecimal": ["is-hexadecimal@2.0.1", "", {}, "sha512-DgZQp241c8oO6cA1SbTEWiXeoxV42vlcJxgH+B3hi1AiqqKruZR3ZGF8In3fj4+/y/7rHvlOZLZtgJ/4ttYGZg=="],
+
     "is-identifier": ["is-identifier@1.1.0", "", { "dependencies": { "identifier-regex": "^1.1.0", "super-regex": "^1.1.0" } }, "sha512-NhOds0mDx9lJu+1lBRO0xbwFo5nobA7GCk/0e5xjr6+6XugX985+0OyGX35BNrTkPAsdLcIKg02HUQJOK8D8kw=="],
 
     "is-inside-container": ["is-inside-container@1.0.0", "", { "dependencies": { "is-docker": "^3.0.0" }, "bin": { "is-inside-container": "cli.js" } }, "sha512-KIYLCCJghfHZxqjYBE7rEy0OBuTd5xCHS7tHVgvCLkx7StIoaxwNW3hCALgEUjFfeRk+MG/Qxmp/vtETEF3tRA=="],
 
     "is-number": ["is-number@7.0.0", "", {}, "sha512-41Cifkg6e8TylSpdtTpeLVMqvSBEVzTttHvERD741+pnZ8ANv0004MRL43QKPDlK9cGvNp6NZWZUBlbGXYxxng=="],
 
+    "is-plain-obj": ["is-plain-obj@4.1.0", "", {}, "sha512-+Pgi+vMuUNkJyExiMBt5IlFoMyKnr5zhJ4Uspz58WOhBF5QoIZkFyNHIbBAtHwzVAgk5RtndVNsDRN61/mmDqg=="],
+
     "is-promise": ["is-promise@4.0.0", "", {}, "sha512-hvpoI6korhJMnej285dSg6nu1+e6uxs7zG3BYAm5byqDsgJNWwxzM6z6iZiAgQR4TJ30JmBTOwqZUw3WlyH3AQ=="],
 
     "is-wsl": ["is-wsl@3.1.1", "", { "dependencies": { "is-inside-container": "^1.0.0" } }, "sha512-e6rvdUCiQCAuumZslxRJWR/Doq4VpPR82kqclvcS0efgt430SlGIk05vdCN58+VrzgtIcfNODjozVielycD4Sw=="],
@@ -1416,8 +1454,16 @@
 
     "mdast-util-math": ["mdast-util-math@3.0.0", "", { "dependencies": { "@types/hast": "^3.0.0", "@types/mdast": "^4.0.0", "devlop": "^1.0.0", "longest-streak": "^3.0.0", "mdast-util-from-markdown": "^2.0.0", "mdast-util-to-markdown": "^2.1.0", "unist-util-remove-position": "^5.0.0" } }, "sha512-Tl9GBNeG/AhJnQM221bJR2HPvLOSnLE/T9cJI9tlc6zwQk2nPk/4f0cHkOdEixQPC/j8UtKDdITswvLAy1OZ1w=="],
 
+    "mdast-util-mdx-expression": ["mdast-util-mdx-expression@2.0.1", "", { "dependencies": { "@types/estree-jsx": "^1.0.0", "@types/hast": "^3.0.0", "@types/mdast": "^4.0.0", "devlop": "^1.0.0", "mdast-util-from-markdown": "^2.0.0", "mdast-util-to-markdown": "^2.0.0" } }, "sha512-J6f+9hUp+ldTZqKRSg7Vw5V6MqjATc+3E4gf3CFNcuZNWD8XdyI6zQ8GqH7f8169MM6P7hMBRDVGnn7oHB9kXQ=="],
+
+    "mdast-util-mdx-jsx": ["mdast-util-mdx-jsx@3.2.0", "", { "dependencies": { "@types/estree-jsx": "^1.0.0", "@types/hast": "^3.0.0", "@types/mdast": "^4.0.0", "@types/unist": "^3.0.0", "ccount": "^2.0.0", "devlop": "^1.1.0", "mdast-util-from-markdown": "^2.0.0", "mdast-util-to-markdown": "^2.0.0", "parse-entities": "^4.0.0", "stringify-entities": "^4.0.0", "unist-util-stringify-position": "^4.0.0", "vfile-message": "^4.0.0" } }, "sha512-lj/z8v0r6ZtsN/cGNNtemmmfoLAFZnjMbNyLzBafjzikOM+glrjNHPlf6lQDOTccj9n5b0PPihEBbhneMyGs1Q=="],
+
+    "mdast-util-mdxjs-esm": ["mdast-util-mdxjs-esm@2.0.1", "", { "dependencies": { "@types/estree-jsx": "^1.0.0", "@types/hast": "^3.0.0", "@types/mdast": "^4.0.0", "devlop": "^1.0.0", "mdast-util-from-markdown": "^2.0.0", "mdast-util-to-markdown": "^2.0.0" } }, "sha512-EcmOpxsZ96CvlP03NghtH1EsLtr0n9Tm4lPUJUBccV9RwUOneqSycg19n5HGzCf+10LozMRSObtVr3ee1WoHtg=="],
+
     "mdast-util-phrasing": ["mdast-util-phrasing@4.1.0", "", { "dependencies": { "@types/mdast": "^4.0.0", "unist-util-is": "^6.0.0" } }, "sha512-TqICwyvJJpBwvGAMZjj4J2n0X8QWp21b9l0o7eXyVJ25YNWYbJDVIyD1bZXE6WtV6RmKJVYmQAKWa0zWOABz2w=="],
 
+    "mdast-util-to-hast": ["mdast-util-to-hast@13.2.1", "", { "dependencies": { "@types/hast": "^3.0.0", "@types/mdast": "^4.0.0", "@ungap/structured-clone": "^1.0.0", "devlop": "^1.0.0", "micromark-util-sanitize-uri": "^2.0.0", "trim-lines": "^3.0.0", "unist-util-position": "^5.0.0", "unist-util-visit": "^5.0.0", "vfile": "^6.0.0" } }, "sha512-cctsq2wp5vTsLIcaymblUriiTcZd0CwWtCbLvrOzYCDZoWyMNV8sZ7krj09FSnsiJi3WVsHLM4k6Dq/yaPyCXA=="],
+
     "mdast-util-to-markdown": ["mdast-util-to-markdown@2.1.2", "", { "dependencies": { "@types/mdast": "^4.0.0", "@types/unist": "^3.0.0", "longest-streak": "^3.0.0", "mdast-util-phrasing": "^4.0.0", "mdast-util-to-string": "^4.0.0", "micromark-util-classify-character": "^2.0.0", "micromark-util-decode-string": "^2.0.0", "unist-util-visit": "^5.0.0", "zwitch": "^2.0.0" } }, "sha512-xj68wMTvGXVOKonmog6LwyJKrYXZPvlwabaryTjLh9LuvovB/KAH+kvi8Gjj+7rJjsFi23nkUxRQv1KqSroMqA=="],
 
     "mdast-util-to-string": ["mdast-util-to-string@4.0.0", "", { "dependencies": { "@types/mdast": "^4.0.0" } }, "sha512-0H44vDimn51F0YwvxSJSm0eCDOJTRlmN0R1yBh4HLj9wiV1Dn0QoXGbvFAWj2hSItVTlCmBF1hqKlIyUBVFLPg=="],
@@ -1568,6 +1614,8 @@
 
     "package-manager-detector": ["package-manager-detector@1.8.0", "", {}, "sha512-yQA4H19AmPEoMUeavPMDIe1higySl/gH/yaQrkT/s07Qp+7pp2hYz30N3z2l5BkjVkF9Ow6o0wjJamm2y7Sn0A=="],
 
+    "parse-entities": ["parse-entities@4.0.2", "", { "dependencies": { "@types/unist": "^2.0.0", "character-entities-legacy": "^3.0.0", "character-reference-invalid": "^2.0.0", "decode-named-character-reference": "^1.0.0", "is-alphanumerical": "^2.0.0", "is-decimal": "^2.0.0", "is-hexadecimal": "^2.0.0" } }, "sha512-GG2AQYWoLgL877gQIKeRPGO1xF9+eG1ujIb5soS5gPvLQ1y2o8FL90w2QWNdf9I361Mpp7726c+lj3U0qK1uGw=="],
+
     "parse-gitignore": ["parse-gitignore@2.0.0", "", {}, "sha512-RmVuCHWsfu0QPNW+mraxh/xjQVw/lhUCUru8Zni3Ctq3AoMhpDTq0OVdKS6iesd6Kqb7viCV3isAL43dciOSog=="],
 
     "parse-imports-exports": ["parse-imports-exports@0.2.4", "", { "dependencies": { "parse-statements": "1.0.11" } }, "sha512-4s6vd6dx1AotCx/RCI2m7t7GCh5bDRUtGNvRfHSP2wbBQdMi67pPe7mtzmgwcaQ8VKK/6IB7Glfyu3qdZJPybQ=="],
@@ -1620,6 +1668,8 @@
 
     "pretty-format": ["pretty-format@27.5.1", "", { "dependencies": { "ansi-regex": "^5.0.1", "ansi-styles": "^5.0.0", "react-is": "^17.0.1" } }, "sha512-Qb1gy5OrP5+zDf2Bvnzdl3jsTf1qXVMazbvCoKhtKqVs4/YK4ozX4gKQJJVyNe+cajNPn0KoC0MC3FUmaHWEmQ=="],
 
+    "property-information": ["property-information@7.2.0", "", {}, "sha512-IAtzIB6sUiWaJYrX9smp3V46pBGbBeLFRGdh25kg1334VcBlD8HzhPeNIWQH9zhGmo2itIe25EHt9dQP7G5hmg=="],
+
     "proxy-addr": ["proxy-addr@2.0.7", "", { "dependencies": { "forwarded": "0.2.0", "ipaddr.js": "1.9.1" } }, "sha512-llQsMLSUDUPT44jdrU/O37qlnifitDP+ZwrmmZcoSKyLKvtZxpyV0n2/bD/N4tBAAZ/gJEdZU7KMraoK1+XYAg=="],
 
     "proxy-agent-negotiate": ["proxy-agent-negotiate@1.1.0", "", { "peerDependencies": { "kerberos": "^2.0.0" }, "optionalPeers": ["kerberos"] }, "sha512-N8IBcM3UgCVzz2L2Lqv8DVntDnnC8/hiV4nEDUPkqq72TPUgYWjQc+bdZlBPZK9LzPAvOY//gAt0S0DApoOXWQ=="],
@@ -1656,6 +1706,8 @@
 
     "react-is": ["react-is@17.0.2", "", {}, "sha512-w2GsyukL62IJnlaff/nRegPQR94C/XXamvMWmSHRJ4y7Ts/4ocGRmTHvOs8PSE6pB3dWOrD/nueuU5sduBsQ4w=="],
 
+    "react-markdown": ["react-markdown@10.1.0", "", { "dependencies": { "@types/hast": "^3.0.0", "@types/mdast": "^4.0.0", "devlop": "^1.0.0", "hast-util-to-jsx-runtime": "^2.0.0", "html-url-attributes": "^3.0.0", "mdast-util-to-hast": "^13.0.0", "remark-parse": "^11.0.0", "remark-rehype": "^11.0.0", "unified": "^11.0.0", "unist-util-visit": "^5.0.0", "vfile": "^6.0.0" }, "peerDependencies": { "@types/react": ">=18", "react": ">=18" } }, "sha512-qKxVopLT/TyA6BX3Ue5NwabOsAzm0Q7kAPwq6L+wWDwisYs7R8vZ0nRXqq6rkueboxpkjvLGU9fWifiX/ZZFxQ=="],
+
     "react-refresh": ["react-refresh@0.18.0", "", {}, "sha512-QgT5//D3jfjJb6Gsjxv0Slpj23ip+HtOpnNgnb2S5zU3CB26G/IDPGoy4RJB42wzFE46DRsstbW6tKHoKbhAxw=="],
 
     "react-remove-scroll": ["react-remove-scroll@2.7.2", "", { "dependencies": { "react-remove-scroll-bar": "^2.3.7", "react-style-singleton": "^2.2.3", "tslib": "^2.1.0", "use-callback-ref": "^1.3.3", "use-sidecar": "^1.1.3" }, "peerDependencies": { "@types/react": "*", "react": "^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0 || ^19.0.0-rc" }, "optionalPeers": ["@types/react"] }, "sha512-Iqb9NjCCTt6Hf+vOdNIZGdTiH1QSqr27H/Ek9sv/a97gfueI/5h1s3yRi1nngzMUaOOToin5dI1dXKdXiF+u0Q=="],
@@ -1678,6 +1730,14 @@
 
     "regjsparser": ["regjsparser@0.13.2", "", { "dependencies": { "jsesc": "~3.1.0" }, "bin": { "regjsparser": "bin/parser" } }, "sha512-NgRBy2Nx/bE+9F27nVHnqcN5HjyLmecqsqx2PJHu3/IEtADD4WuxuXIVExD5PoSDFVrl78dOonfcOe5O+5nbzQ=="],
 
+    "remark-gfm": ["remark-gfm@4.0.1", "", { "dependencies": { "@types/mdast": "^4.0.0", "mdast-util-gfm": "^3.0.0", "micromark-extension-gfm": "^3.0.0", "remark-parse": "^11.0.0", "remark-stringify": "^11.0.0", "unified": "^11.0.0" } }, "sha512-1quofZ2RQ9EWdeN34S79+KExV1764+wCUGop5CPL1WGdD0ocPpu91lzPGbwWMECpEpd42kJGQwzRfyov9j4yNg=="],
+
+    "remark-parse": ["remark-parse@11.0.0", "", { "dependencies": { "@types/mdast": "^4.0.0", "mdast-util-from-markdown": "^2.0.0", "micromark-util-types": "^2.0.0", "unified": "^11.0.0" } }, "sha512-FCxlKLNGknS5ba/1lmpYijMUzX2esxW5xQqjWxw2eHFfS2MSdaHVINFmhjo+qN1WhZhNimq0dZATN9pH0IDrpA=="],
+
+    "remark-rehype": ["remark-rehype@11.1.2", "", { "dependencies": { "@types/hast": "^3.0.0", "@types/mdast": "^4.0.0", "mdast-util-to-hast": "^13.0.0", "unified": "^11.0.0", "vfile": "^6.0.0" } }, "sha512-Dh7l57ianaEoIpzbp0PC9UKAdCSVklD8E5Rpw7ETfbTl3FqcOOgq5q2LVDhgGCkaBv7p24JXikPdvhhmHvKMsw=="],
+
+    "remark-stringify": ["remark-stringify@11.0.0", "", { "dependencies": { "@types/mdast": "^4.0.0", "mdast-util-to-markdown": "^2.0.0", "unified": "^11.0.0" } }, "sha512-1OSmLd3awB/t8qdoEOMazZkNsfVTeY4fTsgzcQFdXNq8ToTN4ZGwrMnlda4K6smTFKD+GRV6O48i6Z4iKgPPpw=="],
+
     "require-from-string": ["require-from-string@2.0.2", "", {}, "sha512-Xf0nWe6RseziFMu+Ap9biiUbmplq6S9/p+7w7YXP/JBHhrUDDUhwa+vANyubuqfZWTveU//DYVGsDG7RKL/vEw=="],
 
     "reselect": ["reselect@5.2.0", "", {}, "sha512-AgZ3UOZm3YndfrJ4OYjgrT7bmCm/1iqkjvEfH/oYjzh6PD2qw4QuT3jjnXIrpdt4MTpMXclMT3lXbmRY+XRakw=="],
@@ -1740,6 +1800,8 @@
 
     "source-map-support": ["source-map-support@0.5.21", "", { "dependencies": { "buffer-from": "^1.0.0", "source-map": "^0.6.0" } }, "sha512-uBHU3L3czsIyYXKX88fdrGovxdSCoTGDRZ6SYXtSRxLZUzHg5P/66Ht6uoUlHu9EZod+inXhKo3qQgwXUT/y1w=="],
 
+    "space-separated-tokens": ["space-separated-tokens@2.0.2", "", {}, "sha512-PEGlAwrG8yXGXRjW32fGbg66JAlOAwbObuqVoJpv/mRgoWDQfgH1wDPvtzWyUSNAXBGSk8h755YDbbcEy3SH2Q=="],
+
     "spdx-exceptions": ["spdx-exceptions@2.5.0", "", {}, "sha512-PiU42r+xO4UbUS1buo3LPJkjlO7430Xn5SVAhdpzzsPHsjbYVflnnFdATgabnLude+Cqu25p6N+g2lw/PFsa4w=="],
 
     "spdx-expression-parse": ["spdx-expression-parse@5.0.0", "", { "dependencies": { "spdx-exceptions": "^2.1.0", "spdx-license-ids": "^3.0.0" } }, "sha512-vngmw3Rgn+o2arXNbnZaj5UtOEBuWBfvaI+Wc8GFfykIhA5/vdK9/Sp/XkLv63dykz2rxKDvKEHupF5P0FORcQ=="],
@@ -1758,12 +1820,18 @@
 
     "storybook": ["storybook@10.6.0", "", { "dependencies": { "@storybook/global": "^5.0.0", "@storybook/icons": "^2.0.2", "@testing-library/dom": "^10.4.1", "@testing-library/jest-dom": "6.9.1", "@testing-library/user-event": "^14.6.3", "@vitest/expect": "3.2.4", "@vitest/spy": "3.2.4", "@webcontainer/env": "^1.1.1", "esbuild": "^0.18.0 || ^0.19.0 || ^0.20.0 || ^0.21.0 || ^0.22.0 || ^0.23.0 || ^0.24.0 || ^0.25.0 || ^0.26.0 || ^0.27.0 || ^0.28.0", "jsonc-parser": "^3.3.1", "open": "^10.2.0", "oxc-parser": "^0.127.0", "oxc-resolver": "11.21.2", "recast": "^0.23.5", "semver": "^7.7.3", "use-sync-external-store": "^1.5.0", "ws": "^8.21.1" }, "peerDependencies": { "@types/react": "^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0", "prettier": "^2 || ^3", "vite-plus": "^0.1.15 || ^0.2.0" }, "optionalPeers": ["@types/react", "prettier", "vite-plus"], "bin": "./dist/bin/dispatcher.js" }, "sha512-H48X6AURAFTpfN2zEux6vNesee5Oq8Gxj1IanYmblPZ218sfKSeyyerF1NC7GD7BrruoC8L4/cU0zII4y+d6zw=="],
 
+    "stringify-entities": ["stringify-entities@4.0.4", "", { "dependencies": { "character-entities-html4": "^2.0.0", "character-entities-legacy": "^3.0.0" } }, "sha512-IwfBptatlO+QCJUo19AqvrPNqlVMpW9YEL2LIVY+Rpv2qsjCGxaDLNRgeGsQWJhfItebuJhsGSLjaBbNSQ+ieg=="],
+
     "strip-ansi": ["strip-ansi@7.2.0", "", { "dependencies": { "ansi-regex": "^6.2.2" } }, "sha512-yDPMNjp4WyfYBkHnjIRLfca1i6KMyGCtsVgoKe/z1+6vukgaENdgGBZt+ZmKPc4gavvEZ5OgHfHdrazhgNyG7w=="],
 
     "strip-bom": ["strip-bom@3.0.0", "", {}, "sha512-vavAMRXOgBVNF6nyEEmL3DBK19iRpDcoIwW+swQ+CbGiu7lju6t+JklA1MHweoWtadgt4ISVUsXLyDq34ddcwA=="],
 
     "strip-indent": ["strip-indent@4.1.1", "", {}, "sha512-SlyRoSkdh1dYP0PzclLE7r0M9sgbFKKMFXpFRUMNuKhQSbC6VQIGzq3E0qsfvGJaUFJPGv6Ws1NZ/haTAjfbMA=="],
 
+    "style-to-js": ["style-to-js@1.1.21", "", { "dependencies": { "style-to-object": "1.0.14" } }, "sha512-RjQetxJrrUJLQPHbLku6U/ocGtzyjbJMP9lCNK7Ag0CNh690nSH8woqWH9u16nMjYBAok+i7JO1NP2pOy8IsPQ=="],
+
+    "style-to-object": ["style-to-object@1.0.14", "", { "dependencies": { "inline-style-parser": "0.2.7" } }, "sha512-LIN7rULI0jBscWQYaSswptyderlarFkjQ+t79nzty8tcIAceVomEVlLzH5VP4Cmsv6MtKhs7qaAiwlcp+Mgaxw=="],
+
     "super-regex": ["super-regex@1.1.0", "", { "dependencies": { "function-timeout": "^1.0.1", "make-asynchronous": "^1.0.1", "time-span": "^5.1.0" } }, "sha512-WHkws2ZflZe41zj6AolvvmaTrWds/VuyeYr9iPVv/oQeaIoVxMKaushfFWpOGDT+GuBrM/sVqF8KUCYQlSSTdQ=="],
 
     "supports-color": ["supports-color@7.2.0", "", { "dependencies": { "has-flag": "^4.0.0" } }, "sha512-qpCAvRl9stuOHveKsn7HncJRvv501qIacKzQlO/+Lwxc9+0q2wLyv4Dfvt80/DPn2pqOBsJdDiogXGR9+OvwRw=="],
@@ -1808,6 +1876,10 @@
 
     "totalist": ["totalist@3.0.1", "", {}, "sha512-sf4i37nQ2LBx4m3wB74y+ubopq6W/dIzXg0FDGjsYnZHVa1Da8FH853wlL2gtUhg+xJXjfk3kUZS3BRoQeoQBQ=="],
 
+    "trim-lines": ["trim-lines@3.0.1", "", {}, "sha512-kRj8B+YHZCc9kQYdWfJB2/oUl9rA99qbowYYBtr4ui4mZyAQ2JpvVBd/6U2YloATfqBhBTSMhTpgBHtU0Mf3Rg=="],
+
+    "trough": ["trough@2.2.0", "", {}, "sha512-tmMpK00BjZiUyVyvrBK7knerNgmgvcV/KLVyuma/SC+TQN167GrMRciANTz09+k3zW8L8t60jWO1GpfkZdjTaw=="],
+
     "try": ["try@1.0.3", "", {}, "sha512-AHA8khVCII6zKyRkyPo6pRwoR9v5jb7QFw6e5avtaVSkxVfaEucYIo06xnwB+pJaEarfYNbs7W3Vq+LZLZiWyA=="],
 
     "ts-api-utils": ["ts-api-utils@2.5.0", "", { "peerDependencies": { "typescript": ">=4.8.4" } }, "sha512-OJ/ibxhPlqrMM0UiNHJ/0CKQkoKF243/AEmplt3qpRgkW8VG7IfOS41h7V8TjITqdByHzrjcS/2si+y4lIh8NA=="],
@@ -1842,8 +1914,12 @@
 
     "undici-types": ["undici-types@7.16.0", "", {}, "sha512-Zz+aZWSj8LE6zoxD+xrjh4VfkIG8Ya6LvYkZqtUQGJPZjYl53ypCaUwWqo7eI0x66KBGeRo+mlBEkMSeSZ38Nw=="],
 
+    "unified": ["unified@11.0.5", "", { "dependencies": { "@types/unist": "^3.0.0", "bail": "^2.0.0", "devlop": "^1.0.0", "extend": "^3.0.0", "is-plain-obj": "^4.0.0", "trough": "^2.0.0", "vfile": "^6.0.0" } }, "sha512-xKvGhPWw3k84Qjh8bI3ZeJjqnyadK+GEFtazSfZv/rKeTkTjOJho6mFqh2SM96iIcZokxiOpg78GazTSg8+KHA=="],
+
     "unist-util-is": ["unist-util-is@6.0.1", "", { "dependencies": { "@types/unist": "^3.0.0" } }, "sha512-LsiILbtBETkDz8I9p1dQ0uyRUWuaQzd/cuEeS1hoRSyW5E5XGmTzlwY1OrNzzakGowI9Dr/I8HVaw4hTtnxy8g=="],
 
+    "unist-util-position": ["unist-util-position@5.0.0", "", { "dependencies": { "@types/unist": "^3.0.0" } }, "sha512-fucsC7HjXvkB5R3kTCO7kUjRdrS0BJt3M/FPxmHMBOm8JQi2BsHAHFsy27E0EolP8rp0NzXsJ+jNPyDWvOJZPA=="],
+
     "unist-util-remove-position": ["unist-util-remove-position@5.0.0", "", { "dependencies": { "@types/unist": "^3.0.0", "unist-util-visit": "^5.0.0" } }, "sha512-Hp5Kh3wLxv0PHj9m2yZhhLt58KzPtEYKQQ4yxfYFEO7EvHwzyDYnduhHnY1mDxoqr7VUwVuHXk9RXKIiYS1N8Q=="],
 
     "unist-util-stringify-position": ["unist-util-stringify-position@4.0.0", "", { "dependencies": { "@types/unist": "^3.0.0" } }, "sha512-0ASV06AAoKCDkS2+xw5RXJywruurpbC4JZSm7nr7MOt1ojAzvyyaO+UxZf18j8FCF6kmzCZKcAgN/yu2gm2XgQ=="],
@@ -1876,6 +1952,10 @@
 
     "verkit": ["verkit@0.3.2", "", {}, "sha512-zj/ob3UsvJGN0whEAKFp53REA5X66hvffVqoCtVQAakJKnKlH+/PcOfMoFwIG/o4rElqLv/ycAFlx8ZlXUorCg=="],
 
+    "vfile": ["vfile@6.0.3", "", { "dependencies": { "@types/unist": "^3.0.0", "vfile-message": "^4.0.0" } }, "sha512-KzIbH/9tXat2u30jf+smMwFCsno4wHVdNmzFyL+T/L3UGqqk6JKfVqOFOZEpZSHADH1k40ab6NUIXZq422ov3Q=="],
+
+    "vfile-message": ["vfile-message@4.0.3", "", { "dependencies": { "@types/unist": "^3.0.0", "unist-util-stringify-position": "^4.0.0" } }, "sha512-QTHzsGd1EhbZs4AsQ20JX1rC3cOlt/IWJruk893DfLRr57lcnOeMaWG4K0JrRta4mIJZKth2Au3mM3u03/JWKw=="],
+
     "vite": ["vite@8.3.1", "", { "dependencies": { "lightningcss": "^1.33.0", "picomatch": "^4.0.7", "postcss": "^8.5.28", "rolldown": "~1.2.9", "tinyglobby": "^0.2.17" }, "optionalDependencies": { "fsevents": "~2.3.3" }, "peerDependencies": { "@types/node": "^20.19.0 || >=22.12.0", "@vitejs/devtools": "^0.7.1", "esbuild": "^0.27.0 || ^0.28.0", "jiti": ">=1.21.0", "less": "^4.0.0", "sass": "^1.70.0", "sass-embedded": "^1.70.0", "stylus": ">=0.54.8", "sugarss": "^5.0.0", "terser": "^5.16.0", "tsx": "^4.8.1", "yaml": "^2.4.2" }, "optionalPeers": ["@types/node", "@vitejs/devtools", "esbuild", "jiti", "less", "sass", "sass-embedded", "stylus", "sugarss", "terser", "tsx", "yaml"], "bin": { "vite": "bin/vite.js" } }, "sha512-/bvH9E9tmCXRGp2uXY3WbOldqpTwFkbha/8ANaEQ6VkxhH60KyqLwgZq6lG2y+4uT55x9+9eUHMpQ7uGnOCKjA=="],
 
     "vite-plugin-babel": ["vite-plugin-babel@1.7.3", "", { "peerDependencies": { "@babel/core": "^7.0.0", "vite": "^2.7.0 || ^3.0.0 || ^4.0.0 || ^5.0.0 || ^6.0.0 || ^7.0.0 || ^8.0.0" } }, "sha512-PsomVbH74/XyqMzXSwBDqb/1o5sAqE68gPlHLfx4FiMGbvKDhaZVQNv/gj/7oRQ5BvuIlyTKBtNEA9MnirGwRA=="],
@@ -2138,6 +2218,8 @@
 
     "nth-check/boolbase": ["boolbase@1.0.0", "", {}, "sha512-JZOSA7Mo9sNGB8+UjSgzdLtokWAky1zbztM3WRLCbZ70/3cTANmQmOdR7y2g+J0e2WXywy1yS468tY+IruqEww=="],
 
+    "parse-entities/@types/unist": ["@types/unist@2.0.11", "", {}, "sha512-CmBKiL6NNo/OqgmMn95Fk9Whlp2mtvIv+KNpQKN2F4SjvrEesubTRWGYSg+BnWZOnlCaSTU1sMpsBOzgbYhnsA=="],
+
     "path-scurry/lru-cache": ["lru-cache@11.5.2", "", {}, "sha512-4pfM1Ff0x50o0tQwb5ucw/RzNyD0/YJME6IVcStalZuMWxdt3sR3huStTtxz4PUmvZfRguvDejasvQ2kifR11g=="],
 
     "playwright/fsevents": ["fsevents@2.3.2", "", { "os": "darwin" }, "sha512-xiqMQR4xAeHTuB9uWm+fFRcIOgKBMiOBP+eXiyT7jsgVCq1bkVygt00oASowB7EdtpOHaaPgKt812P9ab+DDKA=="],
diff --git a/drizzle/0002_greedy_omega_red.sql b/drizzle/0002_greedy_omega_red.sql
new file mode 100644
index 00000000..f76dbb3a
--- /dev/null
+++ b/drizzle/0002_greedy_omega_red.sql
@@ -0,0 +1,9 @@
+CREATE TABLE "tweet_article_translations" (
+	"id" serial PRIMARY KEY NOT NULL,
+	"tweetId" text NOT NULL,
+	"translations" json NOT NULL,
+	"updatedAt" timestamp DEFAULT now() NOT NULL,
+	CONSTRAINT "tweet_article_translations_tweetId_unique" UNIQUE("tweetId")
+);
+--> statement-breakpoint
+CREATE INDEX "tweet_article_translations_tweetId_idx" ON "tweet_article_translations" USING btree ("tweetId");
\ No newline at end of file
diff --git a/drizzle/meta/0002_snapshot.json b/drizzle/meta/0002_snapshot.json
new file mode 100644
index 00000000..09ff2041
--- /dev/null
+++ b/drizzle/meta/0002_snapshot.json
@@ -0,0 +1,311 @@
+{
+  "id": "bfa89b01-ad77-4b5a-bd03-5e97dcdb6ea5",
+  "prevId": "07909aa2-38e6-4687-b193-66924c19fe15",
+  "version": "7",
+  "dialect": "postgresql",
+  "tables": {
+    "public.ig_post": {
+      "name": "ig_post",
+      "schema": "",
+      "columns": {
+        "id": {
+          "name": "id",
+          "type": "serial",
+          "primaryKey": true,
+          "notNull": true
+        },
+        "postShortcode": {
+          "name": "postShortcode",
+          "type": "text",
+          "primaryKey": false,
+          "notNull": true
+        },
+        "username": {
+          "name": "username",
+          "type": "text",
+          "primaryKey": false,
+          "notNull": true
+        },
+        "jsonContent": {
+          "name": "jsonContent",
+          "type": "json",
+          "primaryKey": false,
+          "notNull": true
+        },
+        "createdAt": {
+          "name": "createdAt",
+          "type": "timestamp",
+          "primaryKey": false,
+          "notNull": true,
+          "default": "now()"
+        }
+      },
+      "indexes": {
+        "ig_post_username_idx": {
+          "name": "ig_post_username_idx",
+          "columns": [
+            {
+              "expression": "username",
+              "isExpression": false,
+              "asc": true,
+              "nulls": "last"
+            }
+          ],
+          "isUnique": false,
+          "concurrently": false,
+          "method": "btree",
+          "with": {}
+        }
+      },
+      "foreignKeys": {},
+      "compositePrimaryKeys": {},
+      "uniqueConstraints": {
+        "ig_post_postShortcode_unique": {
+          "name": "ig_post_postShortcode_unique",
+          "nullsNotDistinct": false,
+          "columns": [
+            "postShortcode"
+          ]
+        }
+      },
+      "policies": {},
+      "checkConstraints": {},
+      "isRLSEnabled": false
+    },
+    "public.tweet": {
+      "name": "tweet",
+      "schema": "",
+      "columns": {
+        "id": {
+          "name": "id",
+          "type": "serial",
+          "primaryKey": true,
+          "notNull": true
+        },
+        "jsonContent": {
+          "name": "jsonContent",
+          "type": "json",
+          "primaryKey": false,
+          "notNull": true
+        },
+        "tweetOwnerId": {
+          "name": "tweetOwnerId",
+          "type": "text",
+          "primaryKey": false,
+          "notNull": true
+        },
+        "tweetId": {
+          "name": "tweetId",
+          "type": "text",
+          "primaryKey": false,
+          "notNull": true
+        },
+        "createdAt": {
+          "name": "createdAt",
+          "type": "timestamp",
+          "primaryKey": false,
+          "notNull": true,
+          "default": "now()"
+        }
+      },
+      "indexes": {
+        "tweet_ownerId_idx": {
+          "name": "tweet_ownerId_idx",
+          "columns": [
+            {
+              "expression": "tweetOwnerId",
+              "isExpression": false,
+              "asc": true,
+              "nulls": "last"
+            }
+          ],
+          "isUnique": false,
+          "concurrently": false,
+          "method": "btree",
+          "with": {}
+        }
+      },
+      "foreignKeys": {},
+      "compositePrimaryKeys": {},
+      "uniqueConstraints": {
+        "tweet_tweetId_unique": {
+          "name": "tweet_tweetId_unique",
+          "nullsNotDistinct": false,
+          "columns": [
+            "tweetId"
+          ]
+        }
+      },
+      "policies": {},
+      "checkConstraints": {},
+      "isRLSEnabled": false
+    },
+    "public.tweet_article_translations": {
+      "name": "tweet_article_translations",
+      "schema": "",
+      "columns": {
+        "id": {
+          "name": "id",
+          "type": "serial",
+          "primaryKey": true,
+          "notNull": true
+        },
+        "tweetId": {
+          "name": "tweetId",
+          "type": "text",
+          "primaryKey": false,
+          "notNull": true
+        },
+        "translations": {
+          "name": "translations",
+          "type": "json",
+          "primaryKey": false,
+          "notNull": true
+        },
+        "updatedAt": {
+          "name": "updatedAt",
+          "type": "timestamp",
+          "primaryKey": false,
+          "notNull": true,
+          "default": "now()"
+        }
+      },
+      "indexes": {
+        "tweet_article_translations_tweetId_idx": {
+          "name": "tweet_article_translations_tweetId_idx",
+          "columns": [
+            {
+              "expression": "tweetId",
+              "isExpression": false,
+              "asc": true,
+              "nulls": "last"
+            }
+          ],
+          "isUnique": false,
+          "concurrently": false,
+          "method": "btree",
+          "with": {}
+        }
+      },
+      "foreignKeys": {},
+      "compositePrimaryKeys": {},
+      "uniqueConstraints": {
+        "tweet_article_translations_tweetId_unique": {
+          "name": "tweet_article_translations_tweetId_unique",
+          "nullsNotDistinct": false,
+          "columns": [
+            "tweetId"
+          ]
+        }
+      },
+      "policies": {},
+      "checkConstraints": {},
+      "isRLSEnabled": false
+    },
+    "public.tweet_entities": {
+      "name": "tweet_entities",
+      "schema": "",
+      "columns": {
+        "id": {
+          "name": "id",
+          "type": "serial",
+          "primaryKey": true,
+          "notNull": true
+        },
+        "tweetId": {
+          "name": "tweetId",
+          "type": "text",
+          "primaryKey": false,
+          "notNull": true
+        },
+        "entities": {
+          "name": "entities",
+          "type": "json",
+          "primaryKey": false,
+          "notNull": true
+        }
+      },
+      "indexes": {
+        "tweet_entities_tweetId_idx": {
+          "name": "tweet_entities_tweetId_idx",
+          "columns": [
+            {
+              "expression": "tweetId",
+              "isExpression": false,
+              "asc": true,
+              "nulls": "last"
+            }
+          ],
+          "isUnique": false,
+          "concurrently": false,
+          "method": "btree",
+          "with": {}
+        }
+      },
+      "foreignKeys": {},
+      "compositePrimaryKeys": {},
+      "uniqueConstraints": {
+        "tweet_entities_tweetId_unique": {
+          "name": "tweet_entities_tweetId_unique",
+          "nullsNotDistinct": false,
+          "columns": [
+            "tweetId"
+          ]
+        }
+      },
+      "policies": {},
+      "checkConstraints": {},
+      "isRLSEnabled": false
+    },
+    "public.tweet_user": {
+      "name": "tweet_user",
+      "schema": "",
+      "columns": {
+        "id": {
+          "name": "id",
+          "type": "serial",
+          "primaryKey": true,
+          "notNull": true
+        },
+        "tweetUserName": {
+          "name": "tweetUserName",
+          "type": "text",
+          "primaryKey": false,
+          "notNull": true
+        },
+        "user": {
+          "name": "user",
+          "type": "json",
+          "primaryKey": false,
+          "notNull": true
+        }
+      },
+      "indexes": {},
+      "foreignKeys": {},
+      "compositePrimaryKeys": {},
+      "uniqueConstraints": {
+        "tweet_user_tweetUserName_unique": {
+          "name": "tweet_user_tweetUserName_unique",
+          "nullsNotDistinct": false,
+          "columns": [
+            "tweetUserName"
+          ]
+        }
+      },
+      "policies": {},
+      "checkConstraints": {},
+      "isRLSEnabled": false
+    }
+  },
+  "enums": {},
+  "schemas": {},
+  "sequences": {},
+  "roles": {},
+  "policies": {},
+  "views": {},
+  "_meta": {
+    "columns": {},
+    "schemas": {},
+    "tables": {}
+  }
+}
diff --git a/drizzle/meta/_journal.json b/drizzle/meta/_journal.json
index e300ecc6..ceb52e70 100644
--- a/drizzle/meta/_journal.json
+++ b/drizzle/meta/_journal.json
@@ -15,6 +15,13 @@
       "when": 1780217894218,
       "tag": "0001_fluffy_amphibian",
       "breakpoints": true
+    },
+    {
+      "idx": 2,
+      "version": "7",
+      "when": 1790485940323,
+      "tag": "0002_greedy_omega_red",
+      "breakpoints": true
     }
   ]
 }
diff --git a/package.json b/package.json
index 2ca01aeb..89401c19 100644
--- a/package.json
+++ b/package.json
@@ -56,7 +56,9 @@
     "react": "^19.3.0",
     "react-day-picker": "^10.0.1",
     "react-dom": "^19.3.0",
+    "react-markdown": "^10.1.0",
     "react-router": "^8.4.0",
+    "remark-gfm": "^4.0.1",
     "sonner": "^2.0.8",
     "spin-delay": "^2.0.1",
     "swr": "^2.5.1",

From 635735337a203802368ac724411a808a0f3221df Mon Sep 17 00:00:00 2001
From: Chilfish <chill4fish@gmail.com>
Date: Sun, 27 Sep 2026 14:22:18 +0800
Subject: [PATCH 2/8] test(article): cover block parsing, run splitting, embeds
 and rendering

- fixture-driven parse tests: content_state blocks, entity + style run
  splitting (partial Bold no longer smears the whole block), and
  collectEmbeddedTweetIds dedupe/order
- acceptance render tests: three-state translation, embed delegation and
  fallback; AC-TWEET-012~019 criteria updated to v1.6
- freeze real upstream fixtures via scripts/tmp-dump-article.ts and allow
  irregular whitespace in fixture data

Co-authored-by: CommandCodeBot <noreply@commandcode.ai>
---
 eslint.config.mjs                             |    6 +
 scripts/tmp-dump-article.ts                   |   29 +
 test/acceptance/article-render.spec.ts        |  144 +
 .../articles/2099885132379500562.json         |  526 ++++
 .../articles/2103463356913098908.json         |  246 ++
 .../articles/2103576349499855160.json         | 1333 +++++++++
 .../articles/2104058634452005231.json         |  122 +
 .../articles/2104076282107723935.json         | 2517 +++++++++++++++++
 test/unit/article-markdown.spec.ts            |   74 +
 test/unit/article-parse.spec.ts               |  121 +
 test/unit/article-translate.spec.ts           |   56 +
 test/unit/article.spec.ts                     |  172 ++
 test/unit/getLocalTweet.spec.ts               |   65 +-
 verify/acceptance-criteria/AC-tweet.md        |  127 +-
 14 files changed, 5534 insertions(+), 4 deletions(-)
 create mode 100644 scripts/tmp-dump-article.ts
 create mode 100644 test/acceptance/article-render.spec.ts
 create mode 100644 test/fixtures/articles/2099885132379500562.json
 create mode 100644 test/fixtures/articles/2103463356913098908.json
 create mode 100644 test/fixtures/articles/2103576349499855160.json
 create mode 100644 test/fixtures/articles/2104058634452005231.json
 create mode 100644 test/fixtures/articles/2104076282107723935.json
 create mode 100644 test/unit/article-markdown.spec.ts
 create mode 100644 test/unit/article-parse.spec.ts
 create mode 100644 test/unit/article-translate.spec.ts
 create mode 100644 test/unit/article.spec.ts

diff --git a/eslint.config.mjs b/eslint.config.mjs
index d075b0a0..7bdbc1d8 100644
--- a/eslint.config.mjs
+++ b/eslint.config.mjs
@@ -30,4 +30,10 @@ export default antfu({
     'test/no-conditional-expect': 'error',
     'test/no-standalone-expect': 'error',
   },
+}, {
+  // 上游文章抓取内容原样冻结为 fixture，含 NBSP 等不可见字符（真实数据，不做清洗）
+  files: ['**/test/fixtures/**'],
+  rules: {
+    'no-irregular-whitespace': 'off',
+  },
 })
diff --git a/scripts/tmp-dump-article.ts b/scripts/tmp-dump-article.ts
new file mode 100644
index 00000000..d0464c95
--- /dev/null
+++ b/scripts/tmp-dump-article.ts
@@ -0,0 +1,29 @@
+import { mkdir, writeFile } from 'node:fs/promises'
+import { twitterPool } from '~/lib/react-tweet/utils/get-tweet'
+import { ResourceType } from '~/lib/rettiwt-api'
+
+const ids = process.argv.slice(2)
+
+await mkdir('test/fixtures/articles', { recursive: true })
+
+for (const id of ids) {
+  const response = await twitterPool.run(async fetcher =>
+    fetcher.request<any>(ResourceType.TWEET_DETAILS, { id }),
+  )
+  const result = response.data.tweetResult.result
+  const article = result.article
+
+  await writeFile(`test/fixtures/articles/${id}.json`, JSON.stringify(article, null, 2), 'utf8')
+
+  console.log('=====', id)
+  console.log('article keys:', article ? Object.keys(article) : article)
+  const r = article?.article_results?.result
+  console.log('result keys:', r ? Object.keys(r) : r)
+  console.log('content_state keys:', r?.content_state ? Object.keys(r.content_state) : r?.content_state)
+  console.log('blocks:', r?.content_state?.blocks?.length, '| media_entities:', r?.media_entities ? Object.keys(r.media_entities).length : r?.media_entities)
+  console.log('block types:', [...new Set((r?.content_state?.blocks ?? []).map((b: any) => b.type))].join(','))
+  console.log('entity types:', JSON.stringify(
+    (r?.content_state?.entityMap ?? r?.content_state?.entities ?? []).map((e: any) => e?.value?.type ?? e?.type),
+  ))
+  console.log('cover_media:', JSON.stringify(r?.cover_media ?? article?.cover_media)?.slice(0, 400))
+}
diff --git a/test/acceptance/article-render.spec.ts b/test/acceptance/article-render.spec.ts
new file mode 100644
index 00000000..90d3a70b
--- /dev/null
+++ b/test/acceptance/article-render.spec.ts
@@ -0,0 +1,144 @@
+import type { RawArticleContentState, RawArticleMedia } from '~/lib/rettiwt-api/types/raw/tweet/Details'
+import type { ArticleBlock } from '~/types'
+import { createElement } from 'react'
+import { renderToString } from 'react-dom/server'
+import { describe, expect, it } from 'vitest'
+import { ArticleBody } from '~/components/article'
+import { parseContentState } from '~/lib/article/parse'
+import mvernalFixture from '../fixtures/articles/2099885132379500562.json'
+import trq212Fixture from '../fixtures/articles/2103576349499855160.json'
+
+/**
+ * test/acceptance/article-render.spec.ts
+ *
+ * AC-TWEET-016 —— ArticleBody 真实渲染（renderToString + HTML 断言）。
+ * 覆盖 GFM 表格 / 链接 / 标题 / 列表 / 图片 / 嵌入帖 / 分隔线。
+ */
+
+interface Fixture {
+  article_results: {
+    result: {
+      content_state?: RawArticleContentState
+      media_entities?: RawArticleMedia[]
+    }
+  }
+}
+
+function blocksOf(fixture: unknown): ArticleBlock[] {
+  const result = (fixture as Fixture).article_results.result
+  return parseContentState(result.content_state, result.media_entities)
+}
+
+function render(blocks: ArticleBlock[]): string {
+  return renderToString(createElement(ArticleBody, { blocks, mode: 'original' }))
+}
+
+describe('AC-TWEET-016: ArticleBody real render', () => {
+  it('AC-TWEET-016: renders GFM tables and links from MARKDOWN/LINK entities', () => {
+    const html = render(blocksOf(mvernalFixture))
+
+    expect(html).toContain('<table')
+    expect(html).toContain('href="https://stratechery.com/"')
+    expect(html).toContain('target="_blank"')
+    expect(html).toContain('rel="noopener noreferrer')
+  })
+
+  it('AC-TWEET-016: renders headings, list items and images', () => {
+    const html = render(blocksOf(trq212Fixture))
+
+    expect(html).toMatch(/<h[234]/)
+    expect(html).toMatch(/<ul|<ol/)
+    expect(html).toContain('<img')
+    expect(html).toContain('pbs.twimg.com/media/')
+  })
+
+  it('AC-TWEET-016: renders embed-tweet and divider blocks', () => {
+    const blocks: ArticleBlock[] = [
+      { key: 'e', type: 'embed-tweet', tweetId: '2104058634452005231' },
+      { key: 'd', type: 'divider' },
+    ]
+    const html = render(blocks)
+
+    expect(html).toContain('href="https://x.com/i/status/2104058634452005231"')
+    expect(html).toContain('data-slot="separator"')
+  })
+})
+
+/**
+ * AC-TWEET-018 —— 三态（原文 / 仅译文 / 双语）渲染差异 + 占位符锚点还原。
+ */
+describe('AC-TWEET-018: block translation three-state rendering', () => {
+  const blocks: ArticleBlock[] = [
+    { key: 'h', type: 'heading', level: 1, runs: [{ type: 'text', text: 'Title EN' }] },
+    {
+      key: 'p',
+      type: 'paragraph',
+      runs: [
+        { type: 'text', text: 'Hello ' },
+        { type: 'link', text: 'link', url: 'https://example.com/post' },
+      ],
+    },
+  ]
+  const translations = { h: '标题中文', p: '你好 <<__LINK_0__>> 结束' }
+
+  function renderMode(mode: 'original' | 'translation' | 'bilingual'): string {
+    return renderToString(createElement(ArticleBody, { blocks, translations, mode }))
+  }
+
+  it('AC-TWEET-018: original mode shows only the source text', () => {
+    const html = renderMode('original')
+
+    expect(html).toContain('Title EN')
+    expect(html).toContain('Hello ')
+    expect(html).not.toContain('标题中文')
+    expect(html).not.toContain('你好')
+  })
+
+  it('AC-TWEET-018: translation mode shows only the translation, restoring placeholders', () => {
+    const html = renderMode('translation')
+
+    expect(html).toContain('标题中文')
+    expect(html).toContain('你好')
+    expect(html).not.toContain('<<__LINK_0__>>')
+    expect(html).not.toContain('Title EN')
+    // `<<__LINK_0__>>` 还原为第 0 个非文本 run（link）的可点击元素
+    expect(html).toContain('href="https://example.com/post"')
+  })
+
+  it('AC-TWEET-018: bilingual mode shows source and translation together', () => {
+    const html = renderMode('bilingual')
+
+    expect(html).toContain('Title EN')
+    expect(html).toContain('标题中文')
+    expect(html).toContain('Hello ')
+    expect(html).toContain('你好')
+  })
+})
+
+/**
+ * AC-TWEET-019 —— 内嵌推文：阅读页注入的真实推文渲染（`renderEmbed` 委派），
+ * 未注入或取数失败时回退轻量链接卡。
+ */
+describe('AC-TWEET-019: embedded tweet rendering', () => {
+  const blocks: ArticleBlock[] = [{ key: 'e', type: 'embed-tweet', tweetId: '2103032879496540640' }]
+
+  it('AC-TWEET-019: delegates embed-tweet blocks to the injected renderer', () => {
+    const html = renderToString(createElement(ArticleBody, {
+      blocks,
+      renderEmbed: tweetId => createElement('div', { 'data-embed': tweetId }, 'embedded'),
+    }))
+
+    expect(html).toContain('data-embed="2103032879496540640"')
+    // 注入渲染时不产出旧的「在 X 查看」链接卡
+    expect(html).not.toContain('x.com/i/status/2103032879496540640')
+  })
+
+  it('AC-TWEET-019: falls back to the link card when the renderer has no data', () => {
+    const html = renderToString(createElement(ArticleBody, {
+      blocks,
+      renderEmbed: () => undefined,
+    }))
+
+    expect(html).toContain('href="https://x.com/i/status/2103032879496540640"')
+  })
+})
diff --git a/test/fixtures/articles/2099885132379500562.json b/test/fixtures/articles/2099885132379500562.json
new file mode 100644
index 00000000..f178b6fd
--- /dev/null
+++ b/test/fixtures/articles/2099885132379500562.json
@@ -0,0 +1,526 @@
+{
+  "article_results": {
+    "result": {
+      "content_state": {
+        "blocks": [
+          {
+            "data": {},
+            "entityRanges": [
+              {
+                "key": 0,
+                "length": 12,
+                "offset": 7
+              },
+              {
+                "key": 1,
+                "length": 31,
+                "offset": 54
+              },
+              {
+                "key": 2,
+                "length": 10,
+                "offset": 245
+              }
+            ],
+            "inlineStyleRanges": [],
+            "key": "51kli",
+            "text": "One of Ben Thompson’s favorite analogies is about the newspaper industry in the 1990s. Before the Internet, newspapers were pretty good businesses. They were regional monopolies that had captive attention via limited competition. Warren Buffett loved them.",
+            "type": "unstyled"
+          },
+          {
+            "data": {},
+            "entityRanges": [
+              {
+                "key": 3,
+                "length": 14,
+                "offset": 104
+              },
+              {
+                "key": 4,
+                "length": 19,
+                "offset": 164
+              }
+            ],
+            "inlineStyleRanges": [],
+            "key": "6js7l",
+            "text": "Their monopolies were rooted in their distribution infrastructure – it was (relatively) hard to get the New York Times in Des Moines. It was easier to just get the Des Moines Register.",
+            "type": "unstyled"
+          },
+          {
+            "data": {},
+            "entityRanges": [],
+            "inlineStyleRanges": [],
+            "key": "g8if",
+            "text": "When the Internet arrived and the cost of distribution went to zero, the market re-organized. The end state (or the current state) became more of a barbell:",
+            "type": "unstyled"
+          },
+          {
+            "data": {},
+            "entityRanges": [
+              {
+                "key": 5,
+                "length": 1,
+                "offset": 0
+              }
+            ],
+            "inlineStyleRanges": [],
+            "key": "9nsae",
+            "text": " ",
+            "type": "atomic"
+          },
+          {
+            "data": {
+              "mentions": [
+                {
+                  "fromIndex": 15,
+                  "text": "lennysan",
+                  "toIndex": 24
+                }
+              ]
+            },
+            "entityRanges": [
+              {
+                "key": 6,
+                "length": 18,
+                "offset": 50
+              }
+            ],
+            "inlineStyleRanges": [],
+            "key": "4r3vu",
+            "text": "By comparison, @lennysan has >1.2M subscribers to Lenny’s Newsletter (and likely tens of thousands of paying subscribers).",
+            "type": "unstyled"
+          },
+          {
+            "data": {},
+            "entityRanges": [],
+            "inlineStyleRanges": [],
+            "key": "fa78g",
+            "text": "If you’re reading this, you probably get your news through some combination of the New York Times, X and various Substacks.",
+            "type": "unstyled"
+          },
+          {
+            "data": {},
+            "entityRanges": [],
+            "inlineStyleRanges": [],
+            "key": "2288u",
+            "text": "For the newspaper industry, the middle disappeared. You’re either one of the top newspapers in the world or you’re a solopreneur/SMB.",
+            "type": "unstyled"
+          },
+          {
+            "data": {},
+            "entityRanges": [],
+            "inlineStyleRanges": [
+              {
+                "length": 16,
+                "offset": 0,
+                "style": "Italic"
+              }
+            ],
+            "key": "fpnm",
+            "text": "Software & Moats",
+            "type": "unstyled"
+          },
+          {
+            "data": {},
+            "entityRanges": [],
+            "inlineStyleRanges": [],
+            "key": "fkki8",
+            "text": "Today, the idea of competing with Amazon sounds exhausting. Their moats just feel so deep and multi-faceted – dozens of aircraft, hundreds of AWS services, tens of thousands of trucks.",
+            "type": "unstyled"
+          },
+          {
+            "data": {},
+            "entityRanges": [],
+            "inlineStyleRanges": [],
+            "key": "e3a92",
+            "text": "But if you go back to the beginning though, Amazon feels like the least-defensible initial premise of the major tech companies. They were just selling books on the Internet! They just bought books in bulk from the publishers, repackaged them in smaller boxes and then shipped them out. Anyone could do that.",
+            "type": "unstyled"
+          },
+          {
+            "data": {},
+            "entityRanges": [],
+            "inlineStyleRanges": [],
+            "key": "b5t8g",
+            "text": "How did they go from the least-defensible to the most-defensible major tech company in ~30 years? Relentless execution and reinvestment. Their moat is 7,500+ days of building things, taking the profits, and building more things.",
+            "type": "unstyled"
+          },
+          {
+            "data": {},
+            "entityRanges": [],
+            "inlineStyleRanges": [],
+            "key": "b1bbq",
+            "text": "Most software companies have their moats rooted in three pillars:",
+            "type": "unstyled"
+          },
+          {
+            "data": {},
+            "entityRanges": [],
+            "inlineStyleRanges": [],
+            "key": "6fshp",
+            "text": "The cost and complexity of replicating what they had already built",
+            "type": "unordered-list-item"
+          },
+          {
+            "data": {},
+            "entityRanges": [],
+            "inlineStyleRanges": [],
+            "key": "85ndb",
+            "text": "The switching costs of migrating off the system once adopted",
+            "type": "unordered-list-item"
+          },
+          {
+            "data": {},
+            "entityRanges": [],
+            "inlineStyleRanges": [],
+            "key": "5sr77",
+            "text": "The network effects that come from an ecosystem of software connections and human experts and system integrators",
+            "type": "unordered-list-item"
+          },
+          {
+            "data": {},
+            "entityRanges": [],
+            "inlineStyleRanges": [],
+            "key": "6dihf",
+            "text": "What happens as the cost of software engineering asymptotically approaches zero? I think historical moats are eroded:",
+            "type": "unstyled"
+          },
+          {
+            "data": {},
+            "entityRanges": [],
+            "inlineStyleRanges": [],
+            "key": "90bbl",
+            "text": "Software becomes much faster and cheaper to replicate",
+            "type": "unordered-list-item"
+          },
+          {
+            "data": {},
+            "entityRanges": [],
+            "inlineStyleRanges": [],
+            "key": "9dsh6",
+            "text": "Software migrations can be increasingly automated",
+            "type": "unordered-list-item"
+          },
+          {
+            "data": {},
+            "entityRanges": [],
+            "inlineStyleRanges": [],
+            "key": "3g8ln",
+            "text": "Integrations can be automated; the AI is a better expert than your p95 human",
+            "type": "unordered-list-item"
+          },
+          {
+            "data": {},
+            "entityRanges": [],
+            "inlineStyleRanges": [
+              {
+                "length": 34,
+                "offset": 0,
+                "style": "Italic"
+              }
+            ],
+            "key": "f72pb",
+            "text": "What should software companies do?",
+            "type": "unstyled"
+          },
+          {
+            "data": {},
+            "entityRanges": [],
+            "inlineStyleRanges": [],
+            "key": "418ok",
+            "text": "One way to think of Amazon’s moat is in terms of planes, trucks and data centers.",
+            "type": "unstyled"
+          },
+          {
+            "data": {},
+            "entityRanges": [],
+            "inlineStyleRanges": [],
+            "key": "cbq7g",
+            "text": "Another way to think about it is just relentless reinvestment. Amazon was easy to compete with on day 1. They were still probably easy to compete with by year 2. By year 10, you probably had to replicate most of the prior nine years of work because they never took the foot off the gas.",
+            "type": "unstyled"
+          },
+          {
+            "data": {},
+            "entityRanges": [],
+            "inlineStyleRanges": [],
+            "key": "cvfsi",
+            "text": "If the amount of software you can build in a given day increases by 1,000x, and you build that amount of software every day for 10 years, you probably still have a moat in the age of AI. It still probably takes years and billions of dollars to replicate that new, AI-powered work. It probably still exhausts your competitors to think about competing with you.",
+            "type": "unstyled"
+          },
+          {
+            "data": {},
+            "entityRanges": [],
+            "inlineStyleRanges": [],
+            "key": "4l6om",
+            "text": "In general, I suspect the relative power of Helmer’s 7 Powers shifts for software companies – switching costs and network effects become less important, but scale economies and branding become more important.",
+            "type": "unstyled"
+          },
+          {
+            "data": {},
+            "entityRanges": [],
+            "inlineStyleRanges": [],
+            "key": "au7ar",
+            "text": "At the risk of sounding glib, I think the dominant software strategy in the future will be scale-based – create an unimaginable amount of software every single day and re-invest the profits to create even more over time. Your moat will – in part – be the extreme cost to replicate the software you have already built.",
+            "type": "unstyled"
+          },
+          {
+            "data": {},
+            "entityRanges": [],
+            "inlineStyleRanges": [
+              {
+                "length": 33,
+                "offset": 0,
+                "style": "Italic"
+              }
+            ],
+            "key": "av849",
+            "text": "The Barbell-ification of Software",
+            "type": "unstyled"
+          },
+          {
+            "data": {},
+            "entityRanges": [],
+            "inlineStyleRanges": [],
+            "key": "cbefu",
+            "text": "Long term, I think the evolution of the software industry might mirror what happened to newspapers in the 1990s.",
+            "type": "unstyled"
+          },
+          {
+            "data": {},
+            "entityRanges": [
+              {
+                "key": 7,
+                "length": 8,
+                "offset": 278
+              }
+            ],
+            "inlineStyleRanges": [],
+            "key": "637jt",
+            "text": "There will be a smaller number of very large software companies. In the enterprise, I think there will be one AI-native system per buying center (Sales, Marketing, Finance, HR, IT). For smaller and mid-sized companies, I think there will primarily be one all-in-one system like Rippling.",
+            "type": "unstyled"
+          },
+          {
+            "data": {},
+            "entityRanges": [],
+            "inlineStyleRanges": [],
+            "key": "5tdvl",
+            "text": "I also think there will be one large software company by industry (e.g., Legal, Finance, Medicine), similar to how there’s often one dominant trade magazine by industry.",
+            "type": "unstyled"
+          },
+          {
+            "data": {},
+            "entityRanges": [],
+            "inlineStyleRanges": [],
+            "key": "3a22",
+            "text": "Those companies will win both through their sheer amount of product they build and the strength of their GTM. They just need to serve their buying center better than any competitor.",
+            "type": "unstyled"
+          },
+          {
+            "data": {},
+            "entityRanges": [],
+            "inlineStyleRanges": [],
+            "key": "bs04l",
+            "text": "I think most mid-sized point solutions will likely be consolidated or die off. The optimal strategy for the winner will be to do it all.",
+            "type": "unstyled"
+          },
+          {
+            "data": {},
+            "entityRanges": [
+              {
+                "key": 8,
+                "length": 7,
+                "offset": 366
+              }
+            ],
+            "inlineStyleRanges": [],
+            "key": "b0blb",
+            "text": "Lastly, I think there will be an explosion of “small” software. Most of this will be people building software for themselves or their own companies, but I think there might also be an explosion of small software businesses that make niche software, similar to the D2C explosion of the 2010s (powered by Shopify and Meta Ads). If people make 100M apps via tools like Lovable, there will surely be a power-law to those apps and a handful of them will become thriving SMBs [1].",
+            "type": "unstyled"
+          },
+          {
+            "data": {},
+            "entityRanges": [],
+            "inlineStyleRanges": [],
+            "key": "97ci5",
+            "text": "If you are building a venture-backed software company, I think the answer is once again “do it all.” Just build the whole thing – your moat is the totality of what you’ve built and completely owning the buying center. I fear there is no safety in the middle.",
+            "type": "unstyled"
+          },
+          {
+            "data": {
+              "mentions": [
+                {
+                  "fromIndex": 301,
+                  "text": "Lovable",
+                  "toIndex": 309
+                },
+                {
+                  "fromIndex": 311,
+                  "text": "boltdotnew",
+                  "toIndex": 322
+                },
+                {
+                  "fromIndex": 324,
+                  "text": "wabi",
+                  "toIndex": 329
+                }
+              ]
+            },
+            "entityRanges": [],
+            "inlineStyleRanges": [],
+            "key": "4q7kh",
+            "text": "I don’t yet know what the Substack for the software era is (or how the market plays out). But I think it’s super interesting. I think similar to D2C commerce, there will likely be both an aggregator (e.g., Meta) and a platform (e.g., Shopify, Substack). There are many interesting early attempts like @Lovable, @boltdotnew, @wabi and more. If you have thoughts on this side of the barbell, let me know.",
+            "type": "unstyled"
+          },
+          {
+            "data": {},
+            "entityRanges": [],
+            "inlineStyleRanges": [
+              {
+                "length": 266,
+                "offset": 0,
+                "style": "Italic"
+              }
+            ],
+            "key": "56mml",
+            "text": "[1] – I fear these SMBs will not be “venture-addressable” but many founders and investors will be led astray by thinking they are. I think the successful ones will look more like Substacks where the founder or a small team just owns and operates the entire business.",
+            "type": "unstyled"
+          }
+        ],
+        "entityMap": [
+          {
+            "key": "8",
+            "value": {
+              "data": {
+                "url": "https://lovable.dev/"
+              },
+              "mutability": "Mutable",
+              "type": "LINK"
+            }
+          },
+          {
+            "key": "4",
+            "value": {
+              "data": {
+                "url": "https://www.desmoinesregister.com/https://www.desmoinesregister.com/"
+              },
+              "mutability": "Mutable",
+              "type": "LINK"
+            }
+          },
+          {
+            "key": "5",
+            "value": {
+              "data": {
+                "markdown": "| Newspaper | 2002 Print Circulation | Current Subscribers (Est.) | Change |\n|---|---|---|---|\n| The New York Times | 1,113,000 | ~13.4 million (2026) | +1,104% |\n| The Washington Post | 746,724 | ~2.5 million | +235% |\n| Los Angeles Times | 965,633 | ~243,000 (2025) | -75% |\n| Chicago Tribune | 613,429 | ~149,000 | -76% |\n| San Francisco Chronicle | 512,129 | ~138,000 | -73% |\n| The Dallas Morning News | 521,956 | ~61,000 (Q1 2025) | -88% |\n| Newsday | 578,809 | ~50,000+ (~2022) | -91% |\n\n*Current subscribers courtesy of Claude*\n"
+              },
+              "mutability": "Mutable",
+              "type": "MARKDOWN"
+            }
+          },
+          {
+            "key": "6",
+            "value": {
+              "data": {
+                "url": "https://www.lennysnewsletter.com/"
+              },
+              "mutability": "Mutable",
+              "type": "LINK"
+            }
+          },
+          {
+            "key": "1",
+            "value": {
+              "data": {
+                "url": "https://stratechery.com/2016/the-it-era-and-the-internet-revolution/"
+              },
+              "mutability": "Mutable",
+              "type": "LINK"
+            }
+          },
+          {
+            "key": "0",
+            "value": {
+              "data": {
+                "url": "https://stratechery.com/"
+              },
+              "mutability": "Mutable",
+              "type": "LINK"
+            }
+          },
+          {
+            "key": "2",
+            "value": {
+              "data": {
+                "url": "https://en.wikipedia.org/wiki/List_of_newspapers_formerly_owned_by_Berkshire_Hathaway"
+              },
+              "mutability": "Mutable",
+              "type": "LINK"
+            }
+          },
+          {
+            "key": "7",
+            "value": {
+              "data": {
+                "url": "https://www.rippling.com/"
+              },
+              "mutability": "Mutable",
+              "type": "LINK"
+            }
+          },
+          {
+            "key": "3",
+            "value": {
+              "data": {
+                "url": "https://www.nytimes.com/"
+              },
+              "mutability": "Mutable",
+              "type": "LINK"
+            }
+          }
+        ]
+      },
+      "cover_media": {
+        "id": "QXBpTWVkaWE6DAAFCgABHSRKS+CbkAAKAAIAAAAAANoowwAA",
+        "media_id": "2099885016012787712",
+        "media_info": {
+          "__typename": "ApiImage",
+          "color_info": {
+            "palette": [
+              {
+                "percentage": 99.59,
+                "rgb": {
+                  "blue": 249,
+                  "green": 253,
+                  "red": 254
+                }
+              },
+              {
+                "percentage": 0.41,
+                "rgb": {
+                  "blue": 139,
+                  "green": 141,
+                  "red": 142
+                }
+              }
+            ]
+          },
+          "original_img_height": 793,
+          "original_img_url": "https://pbs.twimg.com/media/HSRKS-CbkAAKn8M.jpg",
+          "original_img_width": 1983
+        },
+        "media_key": "3_2099885016012787712"
+      },
+      "id": "QXJ0aWNsZUVudGl0eToyMDk5ODgxMDk2Njc0NzIxNzkz",
+      "lifecycle_state": {
+        "modified_at_secs": 1789486604
+      },
+      "media_entities": [],
+      "metadata": {
+        "first_published_at_secs": 1789486604
+      },
+      "plain_text": "One of Ben Thompson’s favorite analogies is about the newspaper industry in the 1990s. Before the Internet, newspapers were pretty good businesses. They were regional monopolies that had captive attention via limited competition. Warren Buffett loved them.\nTheir monopolies were rooted in their distribution infrastructure – it was (relatively) hard to get the New York Times in Des Moines. It was easier to just get the Des Moines Register.\nWhen the Internet arrived and the cost of distribution went to zero, the market re-organized. The end state (or the current state) became more of a barbell:\n \nBy comparison, @lennysan has >1.2M subscribers to Lenny’s Newsletter (and likely tens of thousands of paying subscribers).\nIf you’re reading this, you probably get your news through some combination of the New York Times, X and various Substacks.\nFor the newspaper industry, the middle disappeared. You’re either one of the top newspapers in the world or you’re a solopreneur/SMB.\nSoftware & Moats\nToday, the idea of competing with Amazon sounds exhausting. Their moats just feel so deep and multi-faceted – dozens of aircraft, hundreds of AWS services, tens of thousands of trucks.\nBut if you go back to the beginning though, Amazon feels like the least-defensible initial premise of the major tech companies. They were just selling books on the Internet! They just bought books in bulk from the publishers, repackaged them in smaller boxes and then shipped them out. Anyone could do that.\nHow did they go from the least-defensible to the most-defensible major tech company in ~30 years? Relentless execution and reinvestment. Their moat is 7,500+ days of building things, taking the profits, and building more things.\nMost software companies have their moats rooted in three pillars:\nThe cost and complexity of replicating what they had already built\nThe switching costs of migrating off the system once adopted\nThe network effects that come from an ecosystem of software connections and human experts and system integrators\nWhat happens as the cost of software engineering asymptotically approaches zero? I think historical moats are eroded:\nSoftware becomes much faster and cheaper to replicate\nSoftware migrations can be increasingly automated\nIntegrations can be automated; the AI is a better expert than your p95 human\nWhat should software companies do?\nOne way to think of Amazon’s moat is in terms of planes, trucks and data centers.\nAnother way to think about it is just relentless reinvestment. Amazon was easy to compete with on day 1. They were still probably easy to compete with by year 2. By year 10, you probably had to replicate most of the prior nine years of work because they never took the foot off the gas.\nIf the amount of software you can build in a given day increases by 1,000x, and you build that amount of software every day for 10 years, you probably still have a moat in the age of AI. It still probably takes years and billions of dollars to replicate that new, AI-powered work. It probably still exhausts your competitors to think about competing with you.\nIn general, I suspect the relative power of Helmer’s 7 Powers shifts for software companies – switching costs and network effects become less important, but scale economies and branding become more important.\nAt the risk of sounding glib, I think the dominant software strategy in the future will be scale-based – create an unimaginable amount of software every single day and re-invest the profits to create even more over time. Your moat will – in part – be the extreme cost to replicate the software you have already built.\nThe Barbell-ification of Software\nLong term, I think the evolution of the software industry might mirror what happened to newspapers in the 1990s.\nThere will be a smaller number of very large software companies. In the enterprise, I think there will be one AI-native system per buying center (Sales, Marketing, Finance, HR, IT). For smaller and mid-sized companies, I think there will primarily be one all-in-one system like Rippling.\nI also think there will be one large software company by industry (e.g., Legal, Finance, Medicine), similar to how there’s often one dominant trade magazine by industry.\nThose companies will win both through their sheer amount of product they build and the strength of their GTM. They just need to serve their buying center better than any competitor.\nI think most mid-sized point solutions will likely be consolidated or die off. The optimal strategy for the winner will be to do it all.\nLastly, I think there will be an explosion of “small” software. Most of this will be people building software for themselves or their own companies, but I think there might also be an explosion of small software businesses that make niche software, similar to the D2C explosion of the 2010s (powered by Shopify and Meta Ads). If people make 100M apps via tools like Lovable, there will surely be a power-law to those apps and a handful of them will become thriving SMBs [1].\nIf you are building a venture-backed software company, I think the answer is once again “do it all.” Just build the whole thing – your moat is the totality of what you’ve built and completely owning the buying center. I fear there is no safety in the middle.\nI don’t yet know what the Substack for the software era is (or how the market plays out). But I think it’s super interesting. I think similar to D2C commerce, there will likely be both an aggregator (e.g., Meta) and a platform (e.g., Shopify, Substack). There are many interesting early attempts like @Lovable, @boltdotnew, @wabi and more. If you have thoughts on this side of the barbell, let me know.\n[1] – I fear these SMBs will not be “venture-addressable” but many founders and investors will be led astray by thinking they are. I think the successful ones will look more like Substacks where the founder or a small team just owns and operates the entire business.",
+      "preview_text": "One of Ben Thompson’s favorite analogies is about the newspaper industry in the 1990s. Before the Internet, newspapers were pretty good businesses. They were regional monopolies that had captive",
+      "rest_id": "2099881096674721793",
+      "title": "Moats & the Barbell-ification of Software "
+    }
+  }
+}
diff --git a/test/fixtures/articles/2103463356913098908.json b/test/fixtures/articles/2103463356913098908.json
new file mode 100644
index 00000000..ef99620b
--- /dev/null
+++ b/test/fixtures/articles/2103463356913098908.json
@@ -0,0 +1,246 @@
+{
+  "article_results": {
+    "result": {
+      "content_state": {
+        "blocks": [
+          {
+            "data": {},
+            "entityRanges": [],
+            "inlineStyleRanges": [],
+            "key": "dgo89",
+            "text": "いつも「バンドリ！アワーノーツ」をプレイしていただき、ありがとうございます。",
+            "type": "unstyled"
+          },
+          {
+            "data": {},
+            "entityRanges": [],
+            "inlineStyleRanges": [],
+            "key": "10km1",
+            "text": "現在発生しております、ゲームに繋がりにくい・正常にプレイしづらい状況につきまして、これまでの経緯と対応状況をご報告いたします。",
+            "type": "unstyled"
+          },
+          {
+            "data": {},
+            "entityRanges": [],
+            "inlineStyleRanges": [],
+            "key": "7t39k",
+            "text": "お客さまには長期間にわたり多大なるご不便とご心配をおかけしておりますこと、\nまた、安定化のご案内後に再び同様の状況が発生しておりますことを、深くお詫び申し上げます。",
+            "type": "unstyled"
+          },
+          {
+            "data": {},
+            "entityRanges": [],
+            "inlineStyleRanges": [
+              {
+                "length": 8,
+                "offset": 0,
+                "style": "Bold"
+              }
+            ],
+            "key": "28k9",
+            "text": "■これまでの経緯",
+            "type": "unstyled"
+          },
+          {
+            "data": {},
+            "entityRanges": [],
+            "inlineStyleRanges": [
+              {
+                "length": 15,
+                "offset": 0,
+                "style": "Bold"
+              }
+            ],
+            "key": "b0tca",
+            "text": "1.不具合の発生と原因の特定\nリリース以降、想定を上回るアクセスが集中し、ゲームに繋がりにくい、または接続中にエラーが発生する状況が続いておりました。",
+            "type": "unstyled"
+          },
+          {
+            "data": {},
+            "entityRanges": [],
+            "inlineStyleRanges": [],
+            "key": "4655g",
+            "text": "調査の結果、プレイヤーのログイン時に行われる認証処理が複雑な構成となっており、1回のアクセスあたりのサーバー負荷が想定を大きく上回っていたことが主な原因であると特定いたしました。",
+            "type": "unstyled"
+          },
+          {
+            "data": {},
+            "entityRanges": [],
+            "inlineStyleRanges": [
+              {
+                "length": 16,
+                "offset": 0,
+                "style": "Bold"
+              }
+            ],
+            "key": "3g7p",
+            "text": "2.緊急メンテナンスによる修正\n9月25日（金）3:45〜4:20に緊急メンテナンスを実施し、認証処理をより負荷の少ない方式へ切り替える修正を行いました。",
+            "type": "unstyled"
+          },
+          {
+            "data": {},
+            "entityRanges": [],
+            "inlineStyleRanges": [],
+            "key": "cj6nh",
+            "text": "なお、この新しい認証方式へは、メンテナンス後に一度ログインしていただいたタイミングで切り替わる仕組みとなっております。\nそのため、切り替えのための初回ログイン時のみ、修正前の認証処理を経由する必要がございます。",
+            "type": "unstyled"
+          },
+          {
+            "data": {},
+            "entityRanges": [],
+            "inlineStyleRanges": [],
+            "key": "b50hi",
+            "text": "一度切り替えが完了したアカウントでは、以降のログインは改善後の認証方式で行われます。",
+            "type": "unstyled"
+          },
+          {
+            "data": {},
+            "entityRanges": [],
+            "inlineStyleRanges": [
+              {
+                "length": 18,
+                "offset": 0,
+                "style": "Bold"
+              }
+            ],
+            "key": "8gico",
+            "text": "3.動作環境の安定化確認とお知らせ\n本日朝以降、動作環境が安定していることを確認できたため、\n18:00に動作環境安定化のお知らせとお詫びの配布を実施いたしました。",
+            "type": "unstyled"
+          },
+          {
+            "data": {},
+            "entityRanges": [],
+            "inlineStyleRanges": [
+              {
+                "length": 13,
+                "offset": 0,
+                "style": "Bold"
+              }
+            ],
+            "key": "cqqc7",
+            "text": "4.再度の不安定化の発生\n上記のお知らせ以降、多くのお客さまにご来訪いただいた結果、\n新しい認証方式への切り替えが完了していないアカウントからのアクセスが想定を超えて集中いたしました。",
+            "type": "unstyled"
+          },
+          {
+            "data": {},
+            "entityRanges": [],
+            "inlineStyleRanges": [],
+            "key": "7k5bk",
+            "text": "これにより修正前の認証処理に再び高い負荷がかかり、\nすでに切り替えが完了しているお客さまにも影響が及ぶ状況となっております。",
+            "type": "unstyled"
+          },
+          {
+            "data": {},
+            "entityRanges": [],
+            "inlineStyleRanges": [],
+            "key": "a9jqf",
+            "text": "また、この高負荷の状態において、これまで表面化していなかった「通信の重複送信」および「データの一時保存」に関する問題が発生し、一部のお客さまがタイトル画面から先へ進行できない不具合を確認しております。",
+            "type": "unstyled"
+          },
+          {
+            "data": {},
+            "entityRanges": [],
+            "inlineStyleRanges": [
+              {
+                "length": 9,
+                "offset": 0,
+                "style": "Bold"
+              }
+            ],
+            "key": "eoum9",
+            "text": "■現在の対応状況\n現在、通信の遅延やエラー（アプリとサーバー間のデータ不整合によるものを含む）が発生した際に、キャッシュが異常な状態となり、その状態が保持され続けてしまう問題の修正を進めております。\n本対応により、タイトル画面から先へ進行できない不具合の改善を図ってまいります。",
+            "type": "unstyled"
+          },
+          {
+            "data": {},
+            "entityRanges": [],
+            "inlineStyleRanges": [],
+            "key": "a5sn5",
+            "text": "今回の再発は、緊急メンテナンスで実施した修正が機能していないことによるものではなく、新しい認証方式への切り替え時に発生する負荷への見込みが不十分であったことによるものです。",
+            "type": "unstyled"
+          },
+          {
+            "data": {},
+            "entityRanges": [],
+            "inlineStyleRanges": [],
+            "key": "9rqgk",
+            "text": "認証処理の改善自体は効果を確認できており、切り替えが進むにつれ、サーバーへの負荷は軽減されていく見込みです。",
+            "type": "unstyled"
+          },
+          {
+            "data": {},
+            "entityRanges": [],
+            "inlineStyleRanges": [],
+            "key": "6hddq",
+            "text": "一方で、安定化のご案内後に再び状況が悪化し、結果としてお客さまのご期待を裏切る形となりましたこと、重ねてお詫び申し上げます。",
+            "type": "unstyled"
+          },
+          {
+            "data": {},
+            "entityRanges": [],
+            "inlineStyleRanges": [
+              {
+                "length": 12,
+                "offset": 0,
+                "style": "Bold"
+              }
+            ],
+            "key": "qvqs",
+            "text": "■今後のご案内について\n本件の進捗および復旧状況につきましては、進展があり次第、\n改めてゲーム内のお知らせ、または公式Xにてご案内いたします。",
+            "type": "unstyled"
+          },
+          {
+            "data": {},
+            "entityRanges": [],
+            "inlineStyleRanges": [],
+            "key": "85fb5",
+            "text": "お客さまには多大なるご不便をおかけいたしますが、\n一日も早く安定してお楽しみいただける環境をご提供できるよう、対応してまいります。",
+            "type": "unstyled"
+          },
+          {
+            "data": {},
+            "entityRanges": [],
+            "inlineStyleRanges": [],
+            "key": "fgp4l",
+            "text": "引き続き「バンドリ！アワーノーツ」をよろしくお願いいたします。",
+            "type": "unstyled"
+          },
+          {
+            "data": {
+              "hashtags": [
+                {
+                  "fromIndex": 0,
+                  "text": "アワーノーツ",
+                  "toIndex": 7
+                },
+                {
+                  "fromIndex": 8,
+                  "text": "バンドリ",
+                  "toIndex": 13
+                }
+              ]
+            },
+            "entityRanges": [],
+            "inlineStyleRanges": [],
+            "key": "9sh98",
+            "text": "#アワーノーツ #バンドリ",
+            "type": "unstyled"
+          }
+        ],
+        "entityMap": []
+      },
+      "id": "QXJ0aWNsZUVudGl0eToyMTAzNDU2MDgyODM2NDU5NTIw",
+      "lifecycle_state": {
+        "modified_at_secs": 1790339719
+      },
+      "media_entities": [],
+      "metadata": {
+        "first_published_at_secs": 1790339719
+      },
+      "plain_text": "いつも「バンドリ！アワーノーツ」をプレイしていただき、ありがとうございます。\n現在発生しております、ゲームに繋がりにくい・正常にプレイしづらい状況につきまして、これまでの経緯と対応状況をご報告いたします。\nお客さまには長期間にわたり多大なるご不便とご心配をおかけしておりますこと、\nまた、安定化のご案内後に再び同様の状況が発生しておりますことを、深くお詫び申し上げます。\n■これまでの経緯\n1.不具合の発生と原因の特定\nリリース以降、想定を上回るアクセスが集中し、ゲームに繋がりにくい、または接続中にエラーが発生する状況が続いておりました。\n調査の結果、プレイヤーのログイン時に行われる認証処理が複雑な構成となっており、1回のアクセスあたりのサーバー負荷が想定を大きく上回っていたことが主な原因であると特定いたしました。\n2.緊急メンテナンスによる修正\n9月25日（金）3:45〜4:20に緊急メンテナンスを実施し、認証処理をより負荷の少ない方式へ切り替える修正を行いました。\nなお、この新しい認証方式へは、メンテナンス後に一度ログインしていただいたタイミングで切り替わる仕組みとなっております。\nそのため、切り替えのための初回ログイン時のみ、修正前の認証処理を経由する必要がございます。\n一度切り替えが完了したアカウントでは、以降のログインは改善後の認証方式で行われます。\n3.動作環境の安定化確認とお知らせ\n本日朝以降、動作環境が安定していることを確認できたため、\n18:00に動作環境安定化のお知らせとお詫びの配布を実施いたしました。\n4.再度の不安定化の発生\n上記のお知らせ以降、多くのお客さまにご来訪いただいた結果、\n新しい認証方式への切り替えが完了していないアカウントからのアクセスが想定を超えて集中いたしました。\nこれにより修正前の認証処理に再び高い負荷がかかり、\nすでに切り替えが完了しているお客さまにも影響が及ぶ状況となっております。\nまた、この高負荷の状態において、これまで表面化していなかった「通信の重複送信」および「データの一時保存」に関する問題が発生し、一部のお客さまがタイトル画面から先へ進行できない不具合を確認しております。\n■現在の対応状況\n現在、通信の遅延やエラー（アプリとサーバー間のデータ不整合によるものを含む）が発生した際に、キャッシュが異常な状態となり、その状態が保持され続けてしまう問題の修正を進めております。\n本対応により、タイトル画面から先へ進行できない不具合の改善を図ってまいります。\n今回の再発は、緊急メンテナンスで実施した修正が機能していないことによるものではなく、新しい認証方式への切り替え時に発生する負荷への見込みが不十分であったことによるものです。\n認証処理の改善自体は効果を確認できており、切り替えが進むにつれ、サーバーへの負荷は軽減されていく見込みです。\n一方で、安定化のご案内後に再び状況が悪化し、結果としてお客さまのご期待を裏切る形となりましたこと、重ねてお詫び申し上げます。\n■今後のご案内について\n本件の進捗および復旧状況につきましては、進展があり次第、\n改めてゲーム内のお知らせ、または公式Xにてご案内いたします。\nお客さまには多大なるご不便をおかけいたしますが、\n一日も早く安定してお楽しみいただける環境をご提供できるよう、対応してまいります。\n引き続き「バンドリ！アワーノーツ」をよろしくお願いいたします。\n#アワーノーツ #バンドリ",
+      "preview_text": "いつも「バンドリ！アワーノーツ」をプレイしていただき、ありがとうございます。",
+      "rest_id": "2103456082836459520",
+      "title": "アクセス集中に伴う接続障害の発生経緯と、現在の対応状況のご報告"
+    }
+  }
+}
diff --git a/test/fixtures/articles/2103576349499855160.json b/test/fixtures/articles/2103576349499855160.json
new file mode 100644
index 00000000..ba126540
--- /dev/null
+++ b/test/fixtures/articles/2103576349499855160.json
@@ -0,0 +1,1333 @@
+{
+  "article_results": {
+    "result": {
+      "content_state": {
+        "blocks": [
+          {
+            "data": {},
+            "entityRanges": [],
+            "inlineStyleRanges": [],
+            "key": "2u4tn",
+            "text": "One of the best parts of our newest Claude models is how they respond to effort without breaking the prompt cache in Claude Code, but I’ve received a lot of questions on this from users. What is effort really and when do you use which effort level? Why do we need effort at all?",
+            "type": "unstyled"
+          },
+          {
+            "data": {},
+            "entityRanges": [],
+            "inlineStyleRanges": [],
+            "key": "dve55",
+            "text": "To answer this, I decided to do a deep dive into the evals and do my own tests of effort across normal work.",
+            "type": "unstyled"
+          },
+          {
+            "data": {
+              "urls": [
+                {
+                  "fromIndex": 76,
+                  "text": "https://claude.dev/blog/spending-your-effort/",
+                  "toIndex": 121
+                }
+              ]
+            },
+            "entityRanges": [],
+            "inlineStyleRanges": [
+              {
+                "length": 123,
+                "offset": 0,
+                "style": "Italic"
+              }
+            ],
+            "key": "m9vi",
+            "text": "note: you can see more interactive diagrams and explainers for this post on https://claude.dev/blog/spending-your-effort/  ",
+            "type": "unstyled"
+          },
+          {
+            "data": {},
+            "entityRanges": [],
+            "inlineStyleRanges": [],
+            "key": "crdpn",
+            "text": "At a high level, I found that effort was a great way of changing how much verification and edgecase testing Claude did and how much of its own judgement it used. ",
+            "type": "unstyled"
+          },
+          {
+            "data": {},
+            "entityRanges": [],
+            "inlineStyleRanges": [],
+            "key": "5kgpo",
+            "text": "Extra effort gave better results in areas where verification and edgecase testing was more useful like hardware, code review, and security.",
+            "type": "unstyled"
+          },
+          {
+            "data": {},
+            "entityRanges": [],
+            "inlineStyleRanges": [],
+            "key": "130q2",
+            "text": "But low and medium effort was perfect for getting things done quickly and staying in the loop with Claude.",
+            "type": "unstyled"
+          },
+          {
+            "data": {},
+            "entityRanges": [],
+            "inlineStyleRanges": [],
+            "key": "3gqh7",
+            "text": "For normal software engineering, I’m now running a loop of getting the model to interview me then implementing on low/medium effort, reviewing what it built, and then running verification on high effort.",
+            "type": "unstyled"
+          },
+          {
+            "data": {},
+            "entityRanges": [],
+            "inlineStyleRanges": [],
+            "key": "14bfn",
+            "text": "What is effort?",
+            "type": "header-one"
+          },
+          {
+            "data": {},
+            "entityRanges": [],
+            "inlineStyleRanges": [],
+            "key": "6q3ri",
+            "text": "At a high level, effort gives the model an approximation of how much compute you want it to spend on the task. It’s somewhat related to your modeling of the difficulty of the task.",
+            "type": "unstyled"
+          },
+          {
+            "data": {},
+            "entityRanges": [],
+            "inlineStyleRanges": [],
+            "key": "7n7v6",
+            "text": "Think of it this way, if someone asked you to do something in 12 hours straight, you might assume they just want you to do it and try very hard. If someone asked you to do the same task in 1 hour, you’d try to get them the best version that meets their task and then expect to iterate from there.",
+            "type": "unstyled"
+          },
+          {
+            "data": {},
+            "entityRanges": [],
+            "inlineStyleRanges": [
+              {
+                "length": 5,
+                "offset": 53,
+                "style": "Italic"
+              }
+            ],
+            "key": "a163o",
+            "text": "Or, you might push back and say the task requires at least 3 hours and then work for 3 hours to deliver it.",
+            "type": "unstyled"
+          },
+          {
+            "data": {},
+            "entityRanges": [],
+            "inlineStyleRanges": [],
+            "key": "213b6",
+            "text": "You should think of effort in the same way. Claude will always try and do your task reasonably, but higher effort will involve Claude taking more independent action for judgement and verification.",
+            "type": "unstyled"
+          },
+          {
+            "data": {},
+            "entityRanges": [],
+            "inlineStyleRanges": [],
+            "key": "9a8c7",
+            "text": "Effort curves",
+            "type": "header-one"
+          },
+          {
+            "data": {},
+            "entityRanges": [],
+            "inlineStyleRanges": [],
+            "key": "7lm1c",
+            "text": "Fable 5.1 and Opus 5.5’s effort curves are our best yet, at each level if there is an uptick in benchmark scores and tokens consumed. Below is a graph of Terminal Bench 3.0 scores by effort, measured during my eval runs for this post.",
+            "type": "unstyled"
+          },
+          {
+            "data": {},
+            "entityRanges": [
+              {
+                "key": 0,
+                "length": 1,
+                "offset": 0
+              }
+            ],
+            "inlineStyleRanges": [],
+            "key": "486v0",
+            "text": " ",
+            "type": "atomic"
+          },
+          {
+            "data": {},
+            "entityRanges": [],
+            "inlineStyleRanges": [],
+            "key": "70cce",
+            "text": "But what does this mean in practice? To evaluate this, I tried several tasks at different effort levels and poured over the benchmarks. ",
+            "type": "unstyled"
+          },
+          {
+            "data": {},
+            "entityRanges": [],
+            "inlineStyleRanges": [],
+            "key": "1vsno",
+            "text": "Building with effort",
+            "type": "header-one"
+          },
+          {
+            "data": {},
+            "entityRanges": [],
+            "inlineStyleRanges": [],
+            "key": "dkg18",
+            "text": "The best way to understand how models work is to run experiments. I tried doing the same tasks at several different effort levels on Opus 5.5 understand the work it would do. I did this on a wide variety of work, but am illustrating this with a few toy examples.",
+            "type": "unstyled"
+          },
+          {
+            "data": {},
+            "entityRanges": [],
+            "inlineStyleRanges": [],
+            "key": "c0sh8",
+            "text": "Underspecified build task",
+            "type": "header-two"
+          },
+          {
+            "data": {},
+            "entityRanges": [],
+            "inlineStyleRanges": [],
+            "key": "6eo73",
+            "text": "If I ask Claude to “build a personal fitness and workout tracker app,” effort changes dramatically how fleshed out the app is, but also results in Claude making more choices along the way. At low effort, the fitness app is just a log and a simple graph. At higher effort levels the app is more complex with additional detail. At max effort there’s a heat chart.",
+            "type": "unstyled"
+          },
+          {
+            "data": {},
+            "entityRanges": [
+              {
+                "key": 1,
+                "length": 1,
+                "offset": 0
+              }
+            ],
+            "inlineStyleRanges": [],
+            "key": "391vm",
+            "text": " ",
+            "type": "atomic"
+          },
+          {
+            "data": {},
+            "entityRanges": [],
+            "inlineStyleRanges": [],
+            "key": "fibs2",
+            "text": "If I wanted a simple base to iterate from, low effort would get it done. Max effort would be if I wanted Claude’s best one shot.",
+            "type": "unstyled"
+          },
+          {
+            "data": {},
+            "entityRanges": [],
+            "inlineStyleRanges": [],
+            "key": "3pk40",
+            "text": "Lightly specified design task",
+            "type": "header-two"
+          },
+          {
+            "data": {},
+            "entityRanges": [],
+            "inlineStyleRanges": [],
+            "key": "6re41",
+            "text": "What if I have a task that is fairly specified already but I want some exploration with Claude? As an example I tried to ask it to redesign the /config menu in Claude Code. Every pass had roughly the same idea, to use submenus and better search.",
+            "type": "unstyled"
+          },
+          {
+            "data": {},
+            "entityRanges": [],
+            "inlineStyleRanges": [],
+            "key": "3rgqe",
+            "text": "At low effort (which took 1 minute), I got an interactive sketch that conveyed the idea but didn't look very much like Claude Code.",
+            "type": "unstyled"
+          },
+          {
+            "data": {},
+            "entityRanges": [],
+            "inlineStyleRanges": [],
+            "key": "419dp",
+            "text": "At max effort (which took 28 minutes), I got a mockup that looked very much like Claude Code, along with a bunch of walkthroughs for different flows.",
+            "type": "unstyled"
+          },
+          {
+            "data": {},
+            "entityRanges": [],
+            "inlineStyleRanges": [],
+            "key": "45nq6",
+            "text": "If my goal was to iterate and give feedback, low effort would get there much faster. But max effort gives me something much more polished right off the bat. For this particular task, I think I prefer using low effort to understand Claude’s vision.",
+            "type": "unstyled"
+          },
+          {
+            "data": {},
+            "entityRanges": [
+              {
+                "key": 2,
+                "length": 1,
+                "offset": 0
+              }
+            ],
+            "inlineStyleRanges": [],
+            "key": "6nnki",
+            "text": " ",
+            "type": "atomic"
+          },
+          {
+            "data": {},
+            "entityRanges": [],
+            "inlineStyleRanges": [],
+            "key": "5d13t",
+            "text": "Highly specified build task",
+            "type": "header-two"
+          },
+          {
+            "data": {},
+            "entityRanges": [],
+            "inlineStyleRanges": [],
+            "key": "7rodh",
+            "text": "What if I gave Claude lots of details? I tried asking Claude to interview me in-depth about the fitness app and then gave that spec to be implemented by different models at different effort levels.",
+            "type": "unstyled"
+          },
+          {
+            "data": {},
+            "entityRanges": [],
+            "inlineStyleRanges": [],
+            "key": "akicg",
+            "text": "I found that given this spec, the models behaved much more similarly. I got designs that looked fairly similar and had similar implementations but with different details, at max effort Claude took some time to simplify a few of the details. ",
+            "type": "unstyled"
+          },
+          {
+            "data": {},
+            "entityRanges": [
+              {
+                "key": 3,
+                "length": 1,
+                "offset": 0
+              }
+            ],
+            "inlineStyleRanges": [],
+            "key": "971ss",
+            "text": " ",
+            "type": "atomic"
+          },
+          {
+            "data": {},
+            "entityRanges": [],
+            "inlineStyleRanges": [],
+            "key": "2pbq4",
+            "text": "Takeaways",
+            "type": "header-two"
+          },
+          {
+            "data": {},
+            "entityRanges": [],
+            "inlineStyleRanges": [],
+            "key": "bmvns",
+            "text": "For regular software engineering, particularly new feature work, the effort level depends a lot on how in the loop I want to be. Low effort allows Claude to respond quickly with a starting point, higher effort levels will get more work done but Claude will also make more assumptions on my behalf.",
+            "type": "unstyled"
+          },
+          {
+            "data": {},
+            "entityRanges": [],
+            "inlineStyleRanges": [],
+            "key": "ej5q0",
+            "text": "A particularly fruitful loop for feature development I’ve been using is:",
+            "type": "unstyled"
+          },
+          {
+            "data": {},
+            "entityRanges": [],
+            "inlineStyleRanges": [],
+            "key": "ednb0",
+            "text": "Give Claude a spec and ask it to interview me about any details I’m missing",
+            "type": "unordered-list-item"
+          },
+          {
+            "data": {},
+            "entityRanges": [],
+            "inlineStyleRanges": [],
+            "key": "dptfg",
+            "text": "Implement it on low effort",
+            "type": "unordered-list-item"
+          },
+          {
+            "data": {},
+            "entityRanges": [],
+            "inlineStyleRanges": [],
+            "key": "9i617",
+            "text": "Review to make sure it got the gist of it correct, iterate on low effort as needed",
+            "type": "unordered-list-item"
+          },
+          {
+            "data": {},
+            "entityRanges": [],
+            "inlineStyleRanges": [],
+            "key": "3qm6",
+            "text": "Verify and test on high effort",
+            "type": "unordered-list-item"
+          },
+          {
+            "data": {},
+            "entityRanges": [],
+            "inlineStyleRanges": [],
+            "key": "41lc3",
+            "text": "How effort levels impact output on difficult tasks",
+            "type": "header-one"
+          },
+          {
+            "data": {},
+            "entityRanges": [],
+            "inlineStyleRanges": [],
+            "key": "enfo",
+            "text": "But these are obviously toy examples, where Claude is well able to complete them. What about when the difference is between Claude completing the task or not completing the task?",
+            "type": "unstyled"
+          },
+          {
+            "data": {},
+            "entityRanges": [],
+            "inlineStyleRanges": [],
+            "key": "2mj0q",
+            "text": "To find these difficult problems, you have to go to the benchmarks so I dove into one I like: Terminal Bench 3, a community sourced benchmark.",
+            "type": "unstyled"
+          },
+          {
+            "data": {
+              "urls": [
+                {
+                  "fromIndex": 179,
+                  "text": "https://github.com/harbor-framework/terminal-bench/releases/tag/v3.0.0",
+                  "toIndex": 249
+                }
+              ]
+            },
+            "entityRanges": [
+              {
+                "key": 4,
+                "length": 70,
+                "offset": 179
+              }
+            ],
+            "inlineStyleRanges": [],
+            "key": "cohbs",
+            "text": "Terminal-Bench 3.0 problems can broadly be separated into categories like security, hardware, ML,  science, software, operations and media.  You can see all of the problems here: https://github.com/harbor-framework/terminal-bench/releases/tag/v3.0.0, they’re sourced from the community so anyone can contribute.",
+            "type": "unstyled"
+          },
+          {
+            "data": {},
+            "entityRanges": [],
+            "inlineStyleRanges": [],
+            "key": "1e3mn",
+            "text": "It’s worth reading to get a sense of the type of problems these models face. I found I was surprised by the scope and ambition of a lot of these tasks. The are much more complicated than the average task I’d face.",
+            "type": "unstyled"
+          },
+          {
+            "data": {},
+            "entityRanges": [],
+            "inlineStyleRanges": [],
+            "key": "25l04",
+            "text": "For example, some of the tasks included:",
+            "type": "unstyled"
+          },
+          {
+            "data": {},
+            "entityRanges": [],
+            "inlineStyleRanges": [
+              {
+                "length": 8,
+                "offset": 0,
+                "style": "Bold"
+              }
+            ],
+            "key": "4vofc",
+            "text": "Hardware (retro-console-soc): build an 8-bit game console in Verilog that fits a small FPGA and renders a test ROM.",
+            "type": "unordered-list-item"
+          },
+          {
+            "data": {},
+            "entityRanges": [],
+            "inlineStyleRanges": [
+              {
+                "length": 7,
+                "offset": 0,
+                "style": "Bold"
+              }
+            ],
+            "key": "b7cku",
+            "text": "Science (takens-embedding-lean): formally prove Takens’ embedding theorem in Lean 4.",
+            "type": "unordered-list-item"
+          },
+          {
+            "data": {},
+            "entityRanges": [],
+            "inlineStyleRanges": [
+              {
+                "length": 2,
+                "offset": 0,
+                "style": "Bold"
+              }
+            ],
+            "key": "9mu6c",
+            "text": "ML (mp-checkpoint-consolidation): merge 16 shards of a mixture-of-experts checkpoint into one file that reproduces the reference logits.",
+            "type": "unordered-list-item"
+          },
+          {
+            "data": {},
+            "entityRanges": [],
+            "inlineStyleRanges": [
+              {
+                "length": 10,
+                "offset": 0,
+                "style": "Bold"
+              }
+            ],
+            "key": "1b0kb",
+            "text": "Operations (intrastat-meldung): run a company’s month-end EU trade-statistics filing end to end.",
+            "type": "unordered-list-item"
+          },
+          {
+            "data": {},
+            "entityRanges": [],
+            "inlineStyleRanges": [
+              {
+                "length": 5,
+                "offset": 0,
+                "style": "Bold"
+              }
+            ],
+            "key": "bl8is",
+            "text": "Media (layout-config-recreation): rebuild a poster image as an editable layout file.",
+            "type": "unordered-list-item"
+          },
+          {
+            "data": {},
+            "entityRanges": [],
+            "inlineStyleRanges": [],
+            "key": "62pvd",
+            "text": "Higher effort levels help when there are many edge cases",
+            "type": "header-two"
+          },
+          {
+            "data": {},
+            "entityRanges": [],
+            "inlineStyleRanges": [
+              {
+                "length": 63,
+                "offset": 68,
+                "style": "Bold"
+              }
+            ],
+            "key": "1sgbl",
+            "text": "My main takeaway from reading the Terminal Bench 3 results was that higher effort is best for tasks with lots of hidden edge cases.",
+            "type": "unstyled"
+          },
+          {
+            "data": {},
+            "entityRanges": [],
+            "inlineStyleRanges": [],
+            "key": "2ebcr",
+            "text": "A clean example is html-js-filter, a Terminal-Bench 3.0 task that asks for an HTML sanitizer that strips every way of smuggling JavaScript into a page. Fable 5.1 went from 1/5 at low to 5/5 at xhigh.",
+            "type": "unstyled"
+          },
+          {
+            "data": {},
+            "entityRanges": [],
+            "inlineStyleRanges": [],
+            "key": "3stcc",
+            "text": "A typical attempt at low effort takes about 2 minutes. Each of these attempts wrote a filter in roughly one pass, then tested it against a single hand-written page.",
+            "type": "unstyled"
+          },
+          {
+            "data": {},
+            "entityRanges": [],
+            "inlineStyleRanges": [],
+            "key": "fnns3",
+            "text": "A high effort run finishes in about 33 minutes. In the run I traced, it adversarially reviewed its first draft, then read the installed parser’s source to check for bugs, ran many clean test cases until they gave the same output as the input, ran a standard XSS test suite, and finally, wrote a random-document fuzzer.",
+            "type": "unstyled"
+          },
+          {
+            "data": {},
+            "entityRanges": [],
+            "inlineStyleRanges": [],
+            "key": "2i5np",
+            "text": "For something as edge-cased as a HTML sanitizer, this extra effort is well worth it. Spending more tokens for thoroughness also makes sense for complex tasks with high production requirements such as performance optimization or security review.",
+            "type": "unstyled"
+          },
+          {
+            "data": {},
+            "entityRanges": [],
+            "inlineStyleRanges": [],
+            "key": "93afs",
+            "text": "But you don’t need this level of effort for every task.",
+            "type": "unstyled"
+          },
+          {
+            "data": {},
+            "entityRanges": [],
+            "inlineStyleRanges": [],
+            "key": "br98b",
+            "text": "The diagram below shows every Terminal-Bench 3.0 result and how it failed, across different models and effort levels. Overall, increasing effort tends to reduce failures due to missing edgecases (purple blocks), but does not fix when the model has the wrong approach (blue blocks).",
+            "type": "unstyled"
+          },
+          {
+            "data": {},
+            "entityRanges": [
+              {
+                "key": 5,
+                "length": 1,
+                "offset": 0
+              }
+            ],
+            "inlineStyleRanges": [],
+            "key": "akbc",
+            "text": " ",
+            "type": "atomic"
+          },
+          {
+            "data": {},
+            "entityRanges": [],
+            "inlineStyleRanges": [],
+            "key": "1r5fh",
+            "text": "Problem areas where effort helps",
+            "type": "header-two"
+          },
+          {
+            "data": {},
+            "entityRanges": [],
+            "inlineStyleRanges": [],
+            "key": "40cb7",
+            "text": "One of the most interesting takeaways for me from evaluating these models on TerminalBench was that there were some problem areas that benefited from effort more than others. You can see a breakdown in the following diagram:",
+            "type": "unstyled"
+          },
+          {
+            "data": {},
+            "entityRanges": [
+              {
+                "key": 6,
+                "length": 1,
+                "offset": 0
+              }
+            ],
+            "inlineStyleRanges": [],
+            "key": "31fe0",
+            "text": " ",
+            "type": "atomic"
+          },
+          {
+            "data": {},
+            "entityRanges": [],
+            "inlineStyleRanges": [],
+            "key": "6r2qn",
+            "text": "To illustrate this, I chose a few problems from different areas from Terminal Bench 3.0 where Opus 5.5 failed at low effort but succeeded at high effort–mostly because it tested and accounted for edge cases:",
+            "type": "unstyled"
+          },
+          {
+            "data": {},
+            "entityRanges": [],
+            "inlineStyleRanges": [
+              {
+                "length": 20,
+                "offset": 0,
+                "style": "Bold"
+              }
+            ],
+            "key": "8lmlk",
+            "text": "mvcc-lsm-compaction: a Terminal-Bench 3.0 task that asks for a fix to a storage-engine bug from its crash report, without breaking compaction. Opus 5.5 went from 0/5 at low to 4/5 at xhigh.",
+            "type": "unstyled"
+          },
+          {
+            "data": {},
+            "entityRanges": [],
+            "inlineStyleRanges": [],
+            "key": "3m0r6",
+            "text": "At low (about a minute per attempt), Claude would edit the code before building it or running the reproducer, and did not check that its new test would have caught the original bug.",
+            "type": "unstyled"
+          },
+          {
+            "data": {},
+            "entityRanges": [],
+            "inlineStyleRanges": [],
+            "key": "cfl7t",
+            "text": "At xhigh (about 11 minutes), Claude reproduced the crash first, wrote a randomized test against a reference that never compacts, and checked that its tests failed on half-finished fixes.",
+            "type": "unstyled"
+          },
+          {
+            "data": {},
+            "entityRanges": [],
+            "inlineStyleRanges": [
+              {
+                "length": 15,
+                "offset": 0,
+                "style": "Bold"
+              }
+            ],
+            "key": "62k3f",
+            "text": "cli-2ph-simple: is a Terminal-Bench 3.0 task that asks for a CLI linear-program solver written in Python. Opus 5.5 went from 0/5 at low to 5/5 at high.",
+            "type": "unstyled"
+          },
+          {
+            "data": {},
+            "entityRanges": [],
+            "inlineStyleRanges": [],
+            "key": "f46gd",
+            "text": "The low attempts wrote a solver in one pass, checked it with a few small problems and stopped around 10k tokens. In the final message, Claude warned it might be slow on big problems, but did not check.",
+            "type": "unstyled"
+          },
+          {
+            "data": {},
+            "entityRanges": [],
+            "inlineStyleRanges": [],
+            "key": "d71t9",
+            "text": "During the high attempts Claude tested its solver on random problems against a separate brute-force solver, then timed bigger ones, hit cases that ran far too long or crashed, and reworked its search.",
+            "type": "unstyled"
+          },
+          {
+            "data": {},
+            "entityRanges": [],
+            "inlineStyleRanges": [
+              {
+                "length": 15,
+                "offset": 0,
+                "style": "Bold"
+              }
+            ],
+            "key": "bbga4",
+            "text": "gsea-proteomics: a Terminal-Bench 3.0 task that asks for a gene set enrichment analysis (GSEA) on proteomics data to find which of eight treatments resemble a target tissue. Opus 5.5 went from 0/5 at low to 4/5 at high.",
+            "type": "unstyled"
+          },
+          {
+            "data": {},
+            "entityRanges": [],
+            "inlineStyleRanges": [],
+            "key": "932sa",
+            "text": "At low effort, Claude picked a reasonable-sounding way to prep the data, ran the analysis that one way, and reported the result.",
+            "type": "unstyled"
+          },
+          {
+            "data": {},
+            "entityRanges": [],
+            "inlineStyleRanges": [],
+            "key": "5ut0n",
+            "text": "At high Claude tried two ways of prepping the data, it noticed that the list of significant treatments changed, and dug into why before choosing the correct one.",
+            "type": "unstyled"
+          },
+          {
+            "data": {},
+            "entityRanges": [],
+            "inlineStyleRanges": [],
+            "key": "bq7k9",
+            "text": "If a user were in the loop, Claude may have asked the user about the way to setup the problem, but without a user in the loop high effort does better.",
+            "type": "unstyled"
+          },
+          {
+            "data": {},
+            "entityRanges": [],
+            "inlineStyleRanges": [],
+            "key": "b1mr4",
+            "text": "When to use different effort levels in Claude Code",
+            "type": "header-two"
+          },
+          {
+            "data": {},
+            "entityRanges": [],
+            "inlineStyleRanges": [],
+            "key": "9ud70",
+            "text": "Here’s my rule of thumb on when to use which effort level:",
+            "type": "unstyled"
+          },
+          {
+            "data": {},
+            "entityRanges": [],
+            "inlineStyleRanges": [
+              {
+                "length": 3,
+                "offset": 0,
+                "style": "Bold"
+              }
+            ],
+            "key": "309q1",
+            "text": "Low: for when I want quick responses that are in the loop, e.g. brainstorming, sketching, easy changes",
+            "type": "unordered-list-item"
+          },
+          {
+            "data": {},
+            "entityRanges": [],
+            "inlineStyleRanges": [
+              {
+                "length": 6,
+                "offset": 0,
+                "style": "Bold"
+              }
+            ],
+            "key": "dsm13",
+            "text": "Medium: for most of my regular software engineering work, e.g. new feature implementation.",
+            "type": "unordered-list-item"
+          },
+          {
+            "data": {},
+            "entityRanges": [],
+            "inlineStyleRanges": [
+              {
+                "length": 4,
+                "offset": 0,
+                "style": "Bold"
+              }
+            ],
+            "key": "2b3r5",
+            "text": "High: for work where verification is important or there are edge cases, e.g. fixing a bug in a brownfield codebase.",
+            "type": "unordered-list-item"
+          },
+          {
+            "data": {},
+            "entityRanges": [],
+            "inlineStyleRanges": [
+              {
+                "length": 3,
+                "offset": 0,
+                "style": "Bold"
+              }
+            ],
+            "key": "e2pvc",
+            "text": "Max: When I want Claude to operate fully autonomously to solve difficult problems, e.g. end to end building and verification of an app, finding security vulnerabilities in critical software.",
+            "type": "unordered-list-item"
+          },
+          {
+            "data": {},
+            "entityRanges": [
+              {
+                "key": 7,
+                "length": 1,
+                "offset": 0
+              }
+            ],
+            "inlineStyleRanges": [],
+            "key": "dfpia",
+            "text": " ",
+            "type": "atomic"
+          },
+          {
+            "data": {},
+            "entityRanges": [],
+            "inlineStyleRanges": [],
+            "key": "bm6o7",
+            "text": "Try varying effort for Opus 5.5 and Fable 5.1 based on your task or even mid-conversation by using /effort in Claude Code and let me know if this matches your intuition.",
+            "type": "unstyled"
+          }
+        ],
+        "entityMap": [
+          {
+            "key": "4",
+            "value": {
+              "data": {
+                "entityKey": "dcaf872d-125e-4ade-b78d-7bb578c0a10d",
+                "url": "https://github.com/harbor-framework/terminal-bench/releases/tag/v3.0.0"
+              },
+              "mutability": "Mutable",
+              "type": "LINK"
+            }
+          },
+          {
+            "key": "5",
+            "value": {
+              "data": {
+                "entityKey": "dcfd3a20-42af-4c12-b68e-0aa600381f96",
+                "mediaItems": [
+                  {
+                    "localMediaId": "10",
+                    "mediaCategory": "DraftTweetImage",
+                    "mediaId": "2103540176408756224"
+                  }
+                ]
+              },
+              "mutability": "Immutable",
+              "type": "MEDIA"
+            }
+          },
+          {
+            "key": "6",
+            "value": {
+              "data": {
+                "entityKey": "34bff0e1-ea6a-4121-9579-5a0f94ad80c4",
+                "mediaItems": [
+                  {
+                    "localMediaId": "12",
+                    "mediaCategory": "DraftTweetImage",
+                    "mediaId": "2103540452477779968"
+                  }
+                ]
+              },
+              "mutability": "Immutable",
+              "type": "MEDIA"
+            }
+          },
+          {
+            "key": "1",
+            "value": {
+              "data": {
+                "entityKey": "84739de4-a4bc-4547-b4ae-d40321f3ac68",
+                "mediaItems": [
+                  {
+                    "localMediaId": "4",
+                    "mediaCategory": "DraftTweetImage",
+                    "mediaId": "2103539842336636928"
+                  }
+                ]
+              },
+              "mutability": "Immutable",
+              "type": "MEDIA"
+            }
+          },
+          {
+            "key": "0",
+            "value": {
+              "data": {
+                "entityKey": "0818f461-8acc-433c-8860-8c4a1b6b9e43",
+                "mediaItems": [
+                  {
+                    "localMediaId": "2",
+                    "mediaCategory": "DraftTweetImage",
+                    "mediaId": "2103539501989847040"
+                  }
+                ]
+              },
+              "mutability": "Immutable",
+              "type": "MEDIA"
+            }
+          },
+          {
+            "key": "2",
+            "value": {
+              "data": {
+                "entityKey": "be4ac598-2df1-4023-b3a3-7f1184c7b336",
+                "mediaItems": [
+                  {
+                    "localMediaId": "6",
+                    "mediaCategory": "DraftTweetImage",
+                    "mediaId": "2103539933621440512"
+                  }
+                ]
+              },
+              "mutability": "Immutable",
+              "type": "MEDIA"
+            }
+          },
+          {
+            "key": "7",
+            "value": {
+              "data": {
+                "entityKey": "091db715-ef0a-43fe-902d-ee8e0fd19091",
+                "mediaItems": [
+                  {
+                    "localMediaId": "14",
+                    "mediaCategory": "DraftTweetImage",
+                    "mediaId": "2103541323752144896"
+                  }
+                ]
+              },
+              "mutability": "Immutable",
+              "type": "MEDIA"
+            }
+          },
+          {
+            "key": "3",
+            "value": {
+              "data": {
+                "entityKey": "8601dfff-917c-4db6-9518-e7bef5fa0679",
+                "mediaItems": [
+                  {
+                    "localMediaId": "8",
+                    "mediaCategory": "DraftTweetImage",
+                    "mediaId": "2103540000096940032"
+                  }
+                ]
+              },
+              "mutability": "Immutable",
+              "type": "MEDIA"
+            }
+          }
+        ]
+      },
+      "cover_media": {
+        "id": "QXBpTWVkaWE6DAAFCgABHTFFnvJaYAAKAAIAAAAAFQdmZgAA",
+        "media_id": "2103539049931890688",
+        "media_info": {
+          "__typename": "ApiImage",
+          "color_info": {
+            "palette": [
+              {
+                "percentage": 96.91,
+                "rgb": {
+                  "blue": 245,
+                  "green": 249,
+                  "red": 250
+                }
+              },
+              {
+                "percentage": 1.96,
+                "rgb": {
+                  "blue": 113,
+                  "green": 117,
+                  "red": 118
+                }
+              },
+              {
+                "percentage": 1.06,
+                "rgb": {
+                  "blue": 59,
+                  "green": 64,
+                  "red": 66
+                }
+              },
+              {
+                "percentage": 0.61,
+                "rgb": {
+                  "blue": 92,
+                  "green": 123,
+                  "red": 219
+                }
+              }
+            ]
+          },
+          "original_img_height": 960,
+          "original_img_url": "https://pbs.twimg.com/media/HTFFnvJaYAAoPxz.jpg",
+          "original_img_width": 2400
+        },
+        "media_key": "3_2103539049931890688"
+      },
+      "id": "QXJ0aWNsZUVudGl0eToyMTAzNTM1MTg3NDI2NzA5NTA0",
+      "lifecycle_state": {
+        "modified_at_secs": 1790366658
+      },
+      "media_entities": [
+        {
+          "id": "QXBpTWVkaWE6DAAFCgABHTFGpTmbQAAKAAIAAAAAFQdmZgAA",
+          "media_id": "2103540176408756224",
+          "media_info": {
+            "__typename": "ApiImage",
+            "color_info": {
+              "palette": [
+                {
+                  "percentage": 76.77,
+                  "rgb": {
+                    "blue": 245,
+                    "green": 249,
+                    "red": 250
+                  }
+                },
+                {
+                  "percentage": 10.28,
+                  "rgb": {
+                    "blue": 184,
+                    "green": 152,
+                    "red": 138
+                  }
+                },
+                {
+                  "percentage": 6.13,
+                  "rgb": {
+                    "blue": 104,
+                    "green": 148,
+                    "red": 130
+                  }
+                },
+                {
+                  "percentage": 3,
+                  "rgb": {
+                    "blue": 110,
+                    "green": 80,
+                    "red": 60
+                  }
+                },
+                {
+                  "percentage": 2.22,
+                  "rgb": {
+                    "blue": 110,
+                    "green": 75,
+                    "red": 118
+                  }
+                }
+              ]
+            },
+            "original_img_height": 1138,
+            "original_img_url": "https://pbs.twimg.com/media/HTFGpTmbQAAxG-P.png",
+            "original_img_width": 1364
+          },
+          "media_key": "3_2103540176408756224"
+        },
+        {
+          "id": "QXBpTWVkaWE6DAAFCgABHTFGV3FbQAAKAAIAAAAAFQdmZgAA",
+          "media_id": "2103539842336636928",
+          "media_info": {
+            "__typename": "ApiImage",
+            "color_info": {
+              "palette": [
+                {
+                  "percentage": 95.25,
+                  "rgb": {
+                    "blue": 244,
+                    "green": 247,
+                    "red": 247
+                  }
+                },
+                {
+                  "percentage": 1.51,
+                  "rgb": {
+                    "blue": 36,
+                    "green": 33,
+                    "red": 32
+                  }
+                },
+                {
+                  "percentage": 0.57,
+                  "rgb": {
+                    "blue": 149,
+                    "green": 160,
+                    "red": 82
+                  }
+                },
+                {
+                  "percentage": 0.48,
+                  "rgb": {
+                    "blue": 191,
+                    "green": 189,
+                    "red": 234
+                  }
+                },
+                {
+                  "percentage": 0.37,
+                  "rgb": {
+                    "blue": 126,
+                    "green": 207,
+                    "red": 230
+                  }
+                }
+              ]
+            },
+            "original_img_height": 876,
+            "original_img_url": "https://pbs.twimg.com/media/HTFGV3FbQAAUutY.jpg",
+            "original_img_width": 2400
+          },
+          "media_key": "3_2103539842336636928"
+        },
+        {
+          "id": "QXBpTWVkaWE6DAAFCgABHTFGbLJa0AAKAAIAAAAAFQdmZgAA",
+          "media_id": "2103539933621440512",
+          "media_info": {
+            "__typename": "ApiImage",
+            "color_info": {
+              "palette": [
+                {
+                  "percentage": 54.09,
+                  "rgb": {
+                    "blue": 24,
+                    "green": 26,
+                    "red": 27
+                  }
+                },
+                {
+                  "percentage": 40.72,
+                  "rgb": {
+                    "blue": 245,
+                    "green": 249,
+                    "red": 250
+                  }
+                },
+                {
+                  "percentage": 4.27,
+                  "rgb": {
+                    "blue": 110,
+                    "green": 113,
+                    "red": 114
+                  }
+                }
+              ]
+            },
+            "original_img_height": 640,
+            "original_img_url": "https://pbs.twimg.com/media/HTFGbLJa0AAbBfu.jpg",
+            "original_img_width": 2400
+          },
+          "media_key": "3_2103539933621440512"
+        },
+        {
+          "id": "QXBpTWVkaWE6DAAFCgABHTFG5YCaQAAKAAIAAAAAFQdmZgAA",
+          "media_id": "2103540452477779968",
+          "media_info": {
+            "__typename": "ApiImage",
+            "color_info": {
+              "palette": [
+                {
+                  "percentage": 99.63,
+                  "rgb": {
+                    "blue": 245,
+                    "green": 249,
+                    "red": 250
+                  }
+                },
+                {
+                  "percentage": 0.22,
+                  "rgb": {
+                    "blue": 140,
+                    "green": 143,
+                    "red": 144
+                  }
+                },
+                {
+                  "percentage": 0.16,
+                  "rgb": {
+                    "blue": 108,
+                    "green": 135,
+                    "red": 207
+                  }
+                }
+              ]
+            },
+            "original_img_height": 1164,
+            "original_img_url": "https://pbs.twimg.com/media/HTFG5YCaQAAPEim.jpg",
+            "original_img_width": 1364
+          },
+          "media_key": "3_2103540452477779968"
+        },
+        {
+          "id": "QXBpTWVkaWE6DAAFCgABHTFGfCyacAAKAAIAAAAAFQdmZgAA",
+          "media_id": "2103540000096940032",
+          "media_info": {
+            "__typename": "ApiImage",
+            "color_info": {
+              "palette": [
+                {
+                  "percentage": 59.83,
+                  "rgb": {
+                    "blue": 32,
+                    "green": 28,
+                    "red": 22
+                  }
+                },
+                {
+                  "percentage": 25.59,
+                  "rgb": {
+                    "blue": 245,
+                    "green": 249,
+                    "red": 250
+                  }
+                },
+                {
+                  "percentage": 4.53,
+                  "rgb": {
+                    "blue": 106,
+                    "green": 179,
+                    "red": 57
+                  }
+                },
+                {
+                  "percentage": 1.82,
+                  "rgb": {
+                    "blue": 67,
+                    "green": 108,
+                    "red": 39
+                  }
+                },
+                {
+                  "percentage": 0.4,
+                  "rgb": {
+                    "blue": 56,
+                    "green": 195,
+                    "red": 248
+                  }
+                }
+              ]
+            },
+            "original_img_height": 1308,
+            "original_img_url": "https://pbs.twimg.com/media/HTFGfCyacAAd6B_.jpg",
+            "original_img_width": 2400
+          },
+          "media_key": "3_2103540000096940032"
+        },
+        {
+          "id": "QXBpTWVkaWE6DAAFCgABHTFHsFyaAAAKAAIAAAAAFQdmZgAA",
+          "media_id": "2103541323752144896",
+          "media_info": {
+            "__typename": "ApiImage",
+            "color_info": {
+              "palette": [
+                {
+                  "percentage": 90.54,
+                  "rgb": {
+                    "blue": 245,
+                    "green": 249,
+                    "red": 250
+                  }
+                },
+                {
+                  "percentage": 4.1,
+                  "rgb": {
+                    "blue": 38,
+                    "green": 42,
+                    "red": 43
+                  }
+                },
+                {
+                  "percentage": 4,
+                  "rgb": {
+                    "blue": 87,
+                    "green": 119,
+                    "red": 218
+                  }
+                },
+                {
+                  "percentage": 0.28,
+                  "rgb": {
+                    "blue": 114,
+                    "green": 131,
+                    "red": 153
+                  }
+                }
+              ]
+            },
+            "original_img_height": 1056,
+            "original_img_url": "https://pbs.twimg.com/media/HTFHsFyaAAA7ojq.jpg",
+            "original_img_width": 1200
+          },
+          "media_key": "3_2103541323752144896"
+        },
+        {
+          "id": "QXBpTWVkaWE6DAAFCgABHTFGCDMbYAAKAAIAAAAAFQdmZgAA",
+          "media_id": "2103539501989847040",
+          "media_info": {
+            "__typename": "ApiImage",
+            "color_info": {
+              "palette": [
+                {
+                  "percentage": 99.5,
+                  "rgb": {
+                    "blue": 237,
+                    "green": 245,
+                    "red": 245
+                  }
+                },
+                {
+                  "percentage": 0.24,
+                  "rgb": {
+                    "blue": 136,
+                    "green": 142,
+                    "red": 142
+                  }
+                },
+                {
+                  "percentage": 0.22,
+                  "rgb": {
+                    "blue": 191,
+                    "green": 206,
+                    "red": 236
+                  }
+                }
+              ]
+            },
+            "original_img_height": 1208,
+            "original_img_url": "https://pbs.twimg.com/media/HTFGCDMbYAACmRU.jpg",
+            "original_img_width": 1432
+          },
+          "media_key": "3_2103539501989847040"
+        }
+      ],
+      "metadata": {
+        "first_published_at_secs": 1790366658
+      },
+      "plain_text": "One of the best parts of our newest Claude models is how they respond to effort without breaking the prompt cache in Claude Code, but I’ve received a lot of questions on this from users. What is effort really and when do you use which effort level? Why do we need effort at all?\nTo answer this, I decided to do a deep dive into the evals and do my own tests of effort across normal work.\nnote: you can see more interactive diagrams and explainers for this post on https://claude.dev/blog/spending-your-effort/  \nAt a high level, I found that effort was a great way of changing how much verification and edgecase testing Claude did and how much of its own judgement it used. \nExtra effort gave better results in areas where verification and edgecase testing was more useful like hardware, code review, and security.\nBut low and medium effort was perfect for getting things done quickly and staying in the loop with Claude.\nFor normal software engineering, I’m now running a loop of getting the model to interview me then implementing on low/medium effort, reviewing what it built, and then running verification on high effort.\nWhat is effort?\nAt a high level, effort gives the model an approximation of how much compute you want it to spend on the task. It’s somewhat related to your modeling of the difficulty of the task.\nThink of it this way, if someone asked you to do something in 12 hours straight, you might assume they just want you to do it and try very hard. If someone asked you to do the same task in 1 hour, you’d try to get them the best version that meets their task and then expect to iterate from there.\nOr, you might push back and say the task requires at least 3 hours and then work for 3 hours to deliver it.\nYou should think of effort in the same way. Claude will always try and do your task reasonably, but higher effort will involve Claude taking more independent action for judgement and verification.\nEffort curves\nFable 5.1 and Opus 5.5’s effort curves are our best yet, at each level if there is an uptick in benchmark scores and tokens consumed. Below is a graph of Terminal Bench 3.0 scores by effort, measured during my eval runs for this post.\n \nBut what does this mean in practice? To evaluate this, I tried several tasks at different effort levels and poured over the benchmarks. \nBuilding with effort\nThe best way to understand how models work is to run experiments. I tried doing the same tasks at several different effort levels on Opus 5.5 understand the work it would do. I did this on a wide variety of work, but am illustrating this with a few toy examples.\nUnderspecified build task\nIf I ask Claude to “build a personal fitness and workout tracker app,” effort changes dramatically how fleshed out the app is, but also results in Claude making more choices along the way. At low effort, the fitness app is just a log and a simple graph. At higher effort levels the app is more complex with additional detail. At max effort there’s a heat chart.\n \nIf I wanted a simple base to iterate from, low effort would get it done. Max effort would be if I wanted Claude’s best one shot.\nLightly specified design task\nWhat if I have a task that is fairly specified already but I want some exploration with Claude? As an example I tried to ask it to redesign the /config menu in Claude Code. Every pass had roughly the same idea, to use submenus and better search.\nAt low effort (which took 1 minute), I got an interactive sketch that conveyed the idea but didn't look very much like Claude Code.\nAt max effort (which took 28 minutes), I got a mockup that looked very much like Claude Code, along with a bunch of walkthroughs for different flows.\nIf my goal was to iterate and give feedback, low effort would get there much faster. But max effort gives me something much more polished right off the bat. For this particular task, I think I prefer using low effort to understand Claude’s vision.\n \nHighly specified build task\nWhat if I gave Claude lots of details? I tried asking Claude to interview me in-depth about the fitness app and then gave that spec to be implemented by different models at different effort levels.\nI found that given this spec, the models behaved much more similarly. I got designs that looked fairly similar and had similar implementations but with different details, at max effort Claude took some time to simplify a few of the details. \n \nTakeaways\nFor regular software engineering, particularly new feature work, the effort level depends a lot on how in the loop I want to be. Low effort allows Claude to respond quickly with a starting point, higher effort levels will get more work done but Claude will also make more assumptions on my behalf.\nA particularly fruitful loop for feature development I’ve been using is:\nGive Claude a spec and ask it to interview me about any details I’m missing\nImplement it on low effort\nReview to make sure it got the gist of it correct, iterate on low effort as needed\nVerify and test on high effort\nHow effort levels impact output on difficult tasks\nBut these are obviously toy examples, where Claude is well able to complete them. What about when the difference is between Claude completing the task or not completing the task?\nTo find these difficult problems, you have to go to the benchmarks so I dove into one I like: Terminal Bench 3, a community sourced benchmark.\nTerminal-Bench 3.0 problems can broadly be separated into categories like security, hardware, ML,  science, software, operations and media.  You can see all of the problems here: https://github.com/harbor-framework/terminal-bench/releases/tag/v3.0.0, they’re sourced from the community so anyone can contribute.\nIt’s worth reading to get a sense of the type of problems these models face. I found I was surprised by the scope and ambition of a lot of these tasks. The are much more complicated than the average task I’d face.\nFor example, some of the tasks included:\nHardware (retro-console-soc): build an 8-bit game console in Verilog that fits a small FPGA and renders a test ROM.\nScience (takens-embedding-lean): formally prove Takens’ embedding theorem in Lean 4.\nML (mp-checkpoint-consolidation): merge 16 shards of a mixture-of-experts checkpoint into one file that reproduces the reference logits.\nOperations (intrastat-meldung): run a company’s month-end EU trade-statistics filing end to end.\nMedia (layout-config-recreation): rebuild a poster image as an editable layout file.\nHigher effort levels help when there are many edge cases\nMy main takeaway from reading the Terminal Bench 3 results was that higher effort is best for tasks with lots of hidden edge cases.\nA clean example is html-js-filter, a Terminal-Bench 3.0 task that asks for an HTML sanitizer that strips every way of smuggling JavaScript into a page. Fable 5.1 went from 1/5 at low to 5/5 at xhigh.\nA typical attempt at low effort takes about 2 minutes. Each of these attempts wrote a filter in roughly one pass, then tested it against a single hand-written page.\nA high effort run finishes in about 33 minutes. In the run I traced, it adversarially reviewed its first draft, then read the installed parser’s source to check for bugs, ran many clean test cases until they gave the same output as the input, ran a standard XSS test suite, and finally, wrote a random-document fuzzer.\nFor something as edge-cased as a HTML sanitizer, this extra effort is well worth it. Spending more tokens for thoroughness also makes sense for complex tasks with high production requirements such as performance optimization or security review.\nBut you don’t need this level of effort for every task.\nThe diagram below shows every Terminal-Bench 3.0 result and how it failed, across different models and effort levels. Overall, increasing effort tends to reduce failures due to missing edgecases (purple blocks), but does not fix when the model has the wrong approach (blue blocks).\n \nProblem areas where effort helps\nOne of the most interesting takeaways for me from evaluating these models on TerminalBench was that there were some problem areas that benefited from effort more than others. You can see a breakdown in the following diagram:\n \nTo illustrate this, I chose a few problems from different areas from Terminal Bench 3.0 where Opus 5.5 failed at low effort but succeeded at high effort–mostly because it tested and accounted for edge cases:\nmvcc-lsm-compaction: a Terminal-Bench 3.0 task that asks for a fix to a storage-engine bug from its crash report, without breaking compaction. Opus 5.5 went from 0/5 at low to 4/5 at xhigh.\nAt low (about a minute per attempt), Claude would edit the code before building it or running the reproducer, and did not check that its new test would have caught the original bug.\nAt xhigh (about 11 minutes), Claude reproduced the crash first, wrote a randomized test against a reference that never compacts, and checked that its tests failed on half-finished fixes.\ncli-2ph-simple: is a Terminal-Bench 3.0 task that asks for a CLI linear-program solver written in Python. Opus 5.5 went from 0/5 at low to 5/5 at high.\nThe low attempts wrote a solver in one pass, checked it with a few small problems and stopped around 10k tokens. In the final message, Claude warned it might be slow on big problems, but did not check.\nDuring the high attempts Claude tested its solver on random problems against a separate brute-force solver, then timed bigger ones, hit cases that ran far too long or crashed, and reworked its search.\ngsea-proteomics: a Terminal-Bench 3.0 task that asks for a gene set enrichment analysis (GSEA) on proteomics data to find which of eight treatments resemble a target tissue. Opus 5.5 went from 0/5 at low to 4/5 at high.\nAt low effort, Claude picked a reasonable-sounding way to prep the data, ran the analysis that one way, and reported the result.\nAt high Claude tried two ways of prepping the data, it noticed that the list of significant treatments changed, and dug into why before choosing the correct one.\nIf a user were in the loop, Claude may have asked the user about the way to setup the problem, but without a user in the loop high effort does better.\nWhen to use different effort levels in Claude Code\nHere’s my rule of thumb on when to use which effort level:\nLow: for when I want quick responses that are in the loop, e.g. brainstorming, sketching, easy changes\nMedium: for most of my regular software engineering work, e.g. new feature implementation.\nHigh: for work where verification is important or there are edge cases, e.g. fixing a bug in a brownfield codebase.\nMax: When I want Claude to operate fully autonomously to solve difficult problems, e.g. end to end building and verification of an app, finding security vulnerabilities in critical software.\n \nTry varying effort for Opus 5.5 and Fable 5.1 based on your task or even mid-conversation by using /effort in Claude Code and let me know if this matches your intuition.",
+      "preview_text": "One of the best parts of our newest Claude models is how they respond to effort without breaking the prompt cache in Claude Code, but I’ve received a lot of questions on this from users. What is",
+      "rest_id": "2103535187426709504",
+      "title": "Using Claude Code: Spending your effort "
+    }
+  }
+}
diff --git a/test/fixtures/articles/2104058634452005231.json b/test/fixtures/articles/2104058634452005231.json
new file mode 100644
index 00000000..00a13e16
--- /dev/null
+++ b/test/fixtures/articles/2104058634452005231.json
@@ -0,0 +1,122 @@
+{
+  "article_results": {
+    "result": {
+      "content_state": {
+        "blocks": [
+          {
+            "data": {},
+            "entityRanges": [],
+            "inlineStyleRanges": [
+              {
+                "length": 16,
+                "offset": 378,
+                "style": "Bold"
+              },
+              {
+                "length": 17,
+                "offset": 485,
+                "style": "Bold"
+              },
+              {
+                "length": 10,
+                "offset": 572,
+                "style": "Bold"
+              },
+              {
+                "length": 19,
+                "offset": 583,
+                "style": "Bold"
+              },
+              {
+                "length": 16,
+                "offset": 603,
+                "style": "Bold"
+              }
+            ],
+            "key": "bghfm",
+            "text": "いつも「バンドリ！アワーノーツ」をご利用いただき、ありがとうございます。\n\n現在発生しております「スターの所持数が正しく表示されない事象」につきまして、お客さまに多大なるご不安とご迷惑をおかけしておりますこと、深くお詫び申し上げます。\n現在、本不具合により、多くのお客さまの環境にて「所持しているスターが減ってしまったように見える」事象が確認されております。\n\n非常に広範囲においてご不安をおかけしてしまっている現状を重く受け止め、運営チームにて協議を重ねました。\n\nその結果、お客さまに少しでも懸念を抱えさせたまま、本作にとって初となるイベントを開始することは適切ではないと判断いたしました。\n\n万全の状態で、皆さまにお楽しみいただける環境を整えることを最優先とするため、誠に勝手ながらイベントおよびイベントガチャの開催を【延期】させていただきます。\n\n■開催延期となるイベント・ガチャ\n・イベント「アイの奔流 AtoZ」\n・ガチャ「ワタシが主役のサイバーナイトガチャ」\n※新たな開催期間(開始日時および終了日時)につきましては、決まり次第改めてご案内いたします。\n\n■不具合の修正と今後の対応について\n本不具合を根本的に解消し、安心してお遊びいただける環境をご用意するため、現在以下の内容を含む修正版アップデートの準備を進めております。\n\n【アップデート内容】\n1.  スター所持数の表示不具合の修正\n2.「スター履歴」機能の新規実装\n有償・無償スターそれぞれの「獲得履歴」と「消費履歴」を ゲーム内でご確認いただけるようになります。\n※本機能でご確認いただける履歴は、本アップデート以降のものが対象となります。\n※アップデート以前の履歴についてご不明な点などがございましたら、お手数ではございますが「メニュー」＞「サポート」＞「お問い合わせ」よりご連絡ください。",
+            "type": "unstyled"
+          },
+          {
+            "data": {},
+            "entityRanges": [],
+            "inlineStyleRanges": [],
+            "key": "c2rh5",
+            "text": "これにより、スター所持数の表示不具合が解消される見込みであるとともに、 今後はいつでもご自身の正確なスターの増減履歴をご確認いただけるようになります。\n\n現在、すでにApp StoreおよびGoogle Playへ本アップデートの審査を提出しております。 両ストアの審査が通過し次第、アップデートを実施し、イベントを開催させていただく予定です。",
+            "type": "unstyled"
+          },
+          {
+            "data": {},
+            "entityRanges": [],
+            "inlineStyleRanges": [
+              {
+                "length": 16,
+                "offset": 1,
+                "style": "Bold"
+              }
+            ],
+            "key": "aso1p",
+            "text": "\n■イベント延期に伴う対応について\nイベント開始をお待ちいただく間の対応として、以下の施策を実施いたします。\n以下2つのガチャの開催期間を【10月8日(木)23:59まで】再度延長いたします。",
+            "type": "unstyled"
+          },
+          {
+            "data": {},
+            "entityRanges": [],
+            "inlineStyleRanges": [],
+            "key": "1kaif",
+            "text": "・「リリース記念！MyGO!!!!!ピックアップガチャ」\n・「リリース記念！Ave Mujicaピックアップガチャ」",
+            "type": "unstyled"
+          },
+          {
+            "data": {},
+            "entityRanges": [],
+            "inlineStyleRanges": [
+              {
+                "length": 24,
+                "offset": 110,
+                "style": "Bold"
+              }
+            ],
+            "key": "278jp",
+            "text": "イベント開始までの間に、バンドストーリー解放などにお役立ていただける【ブーストドリンク×5】を全てのお客さまへ付与いたします。\n※「リリース記念！5日連続楽曲追加キャンペーン」につきましては、予定通り実施いたします。\n\n■一連の不具合およびイベント延期のお詫びについて\nスターの表示不具合や通信障害など一連の不具合により多くのお客さまを不安なお気持ちにさせてしまったこと、ならびに、初のイベントを楽しみにお待ちいただいていた皆さまのご期待を裏切る形となってしまったことへのお詫びとして、不具合修正のアップデート完了後、全てのお客さまへ【スター×2000】を配布させていただきます。\n\n改めて、大切なお客さまにご不便とご心配をおかけしておりますこと、心よりお詫び申し上げます。\n可能な限り安心できる状態で皆さまにイベントを楽しんでいただけるよう、運営・開発チーム一同、最優先で対応を進めてまいります。\n\nアップデートの実施およびイベント開始日時につきましては、速やかにご案内いたしますので、今しばらく続報をお待ちくださいますようお願い申し上げます。\n\n引き続き「バンドリ！アワーノーツ」をよろしくお願いいたします。",
+            "type": "unstyled"
+          },
+          {
+            "data": {
+              "hashtags": [
+                {
+                  "fromIndex": 0,
+                  "text": "バンドリ",
+                  "toIndex": 5
+                },
+                {
+                  "fromIndex": 6,
+                  "text": "アワーノーツ",
+                  "toIndex": 13
+                }
+              ]
+            },
+            "entityRanges": [],
+            "inlineStyleRanges": [],
+            "key": "8apm3",
+            "text": "#バンドリ #アワーノーツ",
+            "type": "unstyled"
+          }
+        ],
+        "entityMap": []
+      },
+      "id": "QXJ0aWNsZUVudGl0eToyMTA0MDA5MjM0ODU4MDI0OTYy",
+      "lifecycle_state": {
+        "modified_at_secs": 1790481644
+      },
+      "media_entities": [],
+      "metadata": {
+        "first_published_at_secs": 1790481644
+      },
+      "plain_text": "いつも「バンドリ！アワーノーツ」をご利用いただき、ありがとうございます。\n\n現在発生しております「スターの所持数が正しく表示されない事象」につきまして、お客さまに多大なるご不安とご迷惑をおかけしておりますこと、深くお詫び申し上げます。\n現在、本不具合により、多くのお客さまの環境にて「所持しているスターが減ってしまったように見える」事象が確認されております。\n\n非常に広範囲においてご不安をおかけしてしまっている現状を重く受け止め、運営チームにて協議を重ねました。\n\nその結果、お客さまに少しでも懸念を抱えさせたまま、本作にとって初となるイベントを開始することは適切ではないと判断いたしました。\n\n万全の状態で、皆さまにお楽しみいただける環境を整えることを最優先とするため、誠に勝手ながらイベントおよびイベントガチャの開催を【延期】させていただきます。\n\n■開催延期となるイベント・ガチャ\n・イベント「アイの奔流 AtoZ」\n・ガチャ「ワタシが主役のサイバーナイトガチャ」\n※新たな開催期間(開始日時および終了日時)につきましては、決まり次第改めてご案内いたします。\n\n■不具合の修正と今後の対応について\n本不具合を根本的に解消し、安心してお遊びいただける環境をご用意するため、現在以下の内容を含む修正版アップデートの準備を進めております。\n\n【アップデート内容】\n1.  スター所持数の表示不具合の修正\n2.「スター履歴」機能の新規実装\n有償・無償スターそれぞれの「獲得履歴」と「消費履歴」を ゲーム内でご確認いただけるようになります。\n※本機能でご確認いただける履歴は、本アップデート以降のものが対象となります。\n※アップデート以前の履歴についてご不明な点などがございましたら、お手数ではございますが「メニュー」＞「サポート」＞「お問い合わせ」よりご連絡ください。\nこれにより、スター所持数の表示不具合が解消される見込みであるとともに、 今後はいつでもご自身の正確なスターの増減履歴をご確認いただけるようになります。\n\n現在、すでにApp StoreおよびGoogle Playへ本アップデートの審査を提出しております。 両ストアの審査が通過し次第、アップデートを実施し、イベントを開催させていただく予定です。\n\n■イベント延期に伴う対応について\nイベント開始をお待ちいただく間の対応として、以下の施策を実施いたします。\n以下2つのガチャの開催期間を【10月8日(木)23:59まで】再度延長いたします。\n・「リリース記念！MyGO!!!!!ピックアップガチャ」\n・「リリース記念！Ave Mujicaピックアップガチャ」\nイベント開始までの間に、バンドストーリー解放などにお役立ていただけるブーストドリンク×5」を全てのお客さまへ付与いたします。\n※「リリース記念！5日連続楽曲追加キャンペーン」につきましては、予定通り実施いたします。\n\n■一連の不具合およびイベント延期のお詫びについて\nスターの表示不具合や通信障害など一連の不具合により多くのお客さまを不安なお気持ちにさせてしまったこと、ならびに、初のイベントを楽しみにお待ちいただいていた皆さまのご期待を裏切る形となってしまったことへのお詫びとして、不具合修正のアップデート完了後、全てのお客さまへ【スター×2000】を配布させていただきます。\n\n改めて、大切なお客さまにご不便とご心配をおかけしておりますこと、心よりお詫び申し上げます。\n可能な限り安心できる状態で皆さまにイベントを楽しんでいただけるよう、運営・開発チーム一同、最優先で対応を進めてまいります。\n\nアップデートの実施およびイベント開始日時につきましては、速やかにご案内いたしますので、今しばらく続報をお待ちくださいますようお願い申し上げます。\n\n引き続き「バンドリ！アワーノーツ」をよろしくお願いいたします。\n#バンドリ #アワーノーツ",
+      "preview_text": "いつも「バンドリ！アワーノーツ」をご利用いただき、ありがとうございます。",
+      "rest_id": "2104009234858024962",
+      "title": "初のイベント「アイの奔流 AtoZ」および関連ガチャの開催延期と今後の対応について"
+    }
+  }
+}
diff --git a/test/fixtures/articles/2104076282107723935.json b/test/fixtures/articles/2104076282107723935.json
new file mode 100644
index 00000000..c537984b
--- /dev/null
+++ b/test/fixtures/articles/2104076282107723935.json
@@ -0,0 +1,2517 @@
+{
+  "article_results": {
+    "result": {
+      "content_state": {
+        "blocks": [
+          {
+            "data": {},
+            "entityRanges": [],
+            "inlineStyleRanges": [],
+            "key": "45iof",
+            "text": "关注我的大部分朋友都是程序员，这个 skill 就是给你们，更准确是给我们写的。",
+            "type": "unstyled"
+          },
+          {
+            "data": {},
+            "entityRanges": [],
+            "inlineStyleRanges": [
+              {
+                "length": 18,
+                "offset": 9,
+                "style": "Bold"
+              }
+            ],
+            "key": "3b19o",
+            "text": "维护代码仓库的人，手里都有一部现成的 Git 纪录片：第一次提交，第一个版本，最忙的那一天，半夜的回滚，改名，搬家，几万颗星。可这些都躺在 git log 里，新来的人只看 README。",
+            "type": "blockquote"
+          },
+          {
+            "data": {},
+            "entityRanges": [
+              {
+                "key": 0,
+                "length": 5,
+                "offset": 20
+              }
+            ],
+            "inlineStyleRanges": [],
+            "key": "dh75g",
+            "text": "git-story-film 是一个给 raven 做宣传视频时产出的创意 skill。你给它一个 GitHub 链接，Opus 5.5 就当导演：从几千次提交里挑出能讲故事的事实，给项目找一个主角，定一种画风，最后交给你一部两分钟左右的手绘动画短片。",
+            "type": "unstyled"
+          },
+          {
+            "data": {},
+            "entityRanges": [],
+            "inlineStyleRanges": [],
+            "key": "bbia4",
+            "text": "你最后拿到的是：",
+            "type": "unstyled"
+          },
+          {
+            "data": {},
+            "entityRanges": [],
+            "inlineStyleRanges": [],
+            "key": "evugh",
+            "text": "一个 4K、60 帧的 MP4，配乐由代码实时合成；",
+            "type": "unordered-list-item"
+          },
+          {
+            "data": {},
+            "entityRanges": [],
+            "inlineStyleRanges": [],
+            "key": "f4th0",
+            "text": "一键生成，一镜到底，但也保留了源码可修改的空间，绝对不是那种快闪式的 AI Slop",
+            "type": "unordered-list-item"
+          },
+          {
+            "data": {},
+            "entityRanges": [],
+            "inlineStyleRanges": [],
+            "key": "463je",
+            "text": "主角第一人称的字幕，讲给第一次听说这个项目的人；",
+            "type": "unordered-list-item"
+          },
+          {
+            "data": {},
+            "entityRanges": [],
+            "inlineStyleRanges": [],
+            "key": "6oe8n",
+            "text": "画面上真实的日期、commit hash 和提交次数，一次提交就是画面上的一颗珠子、一盏灯或一片叶子；",
+            "type": "unordered-list-item"
+          },
+          {
+            "data": {},
+            "entityRanges": [],
+            "inlineStyleRanges": [],
+            "key": "511mu",
+            "text": "一个能在浏览器里拖着看的 Studio 页面，以及整部片的源代码。",
+            "type": "unordered-list-item"
+          },
+          {
+            "data": {},
+            "entityRanges": [],
+            "inlineStyleRanges": [],
+            "key": "c2rr4",
+            "text": "这个 skill 不仅能帮你一键生成，也能让你扮演一个真正的导演，帮你提前订好提纲、分镜、脚本，每走一步都停下来给你看一样东西，你点头了才往下走。",
+            "type": "unstyled"
+          },
+          {
+            "data": {},
+            "entityRanges": [
+              {
+                "key": 1,
+                "length": 1,
+                "offset": 0
+              }
+            ],
+            "inlineStyleRanges": [],
+            "key": "2tr07",
+            "text": " ",
+            "type": "atomic"
+          },
+          {
+            "data": {},
+            "entityRanges": [],
+            "inlineStyleRanges": [],
+            "key": "crt63",
+            "text": "先看成片：四个仓库，四种长法",
+            "type": "header-one"
+          },
+          {
+            "data": {},
+            "entityRanges": [],
+            "inlineStyleRanges": [],
+            "key": "4gfrs",
+            "text": "同一套方法，四部片子长得完全不一样。导演先读懂产品，再决定你的项目“成长”在画面上是什么样子。",
+            "type": "unstyled"
+          },
+          {
+            "data": {},
+            "entityRanges": [],
+            "inlineStyleRanges": [],
+            "key": "20a0c",
+            "text": "Raven：一路往右飞",
+            "type": "header-two"
+          },
+          {
+            "data": {},
+            "entityRanges": [
+              {
+                "key": 2,
+                "length": 1,
+                "offset": 0
+              }
+            ],
+            "inlineStyleRanges": [],
+            "key": "4uh54",
+            "text": " ",
+            "type": "atomic"
+          },
+          {
+            "data": {},
+            "entityRanges": [],
+            "inlineStyleRanges": [],
+            "key": "bs3ep",
+            "text": "Raven 因为是一只鸟，所以我设计了从纸上的一颗蛋里破壳，沿着一根时间枝只往右走，全片一镜到底。每次提交是枝上一颗亮晶晶的珠子；走过重要的提交，画风就换一次：铅笔、墨、Riso 印刷、丝网、蓝图。128 秒，中英双语。",
+            "type": "unstyled"
+          },
+          {
+            "data": {},
+            "entityRanges": [],
+            "inlineStyleRanges": [],
+            "key": "6hg15",
+            "text": "视频见",
+            "type": "unstyled"
+          },
+          {
+            "data": {},
+            "entityRanges": [
+              {
+                "key": 3,
+                "length": 1,
+                "offset": 0
+              }
+            ],
+            "inlineStyleRanges": [],
+            "key": "5be3p",
+            "text": " ",
+            "type": "atomic"
+          },
+          {
+            "data": {},
+            "entityRanges": [],
+            "inlineStyleRanges": [],
+            "key": "jupp",
+            "text": "CC Switch：一面越长越大的总机墙",
+            "type": "header-two"
+          },
+          {
+            "data": {},
+            "entityRanges": [
+              {
+                "key": 4,
+                "length": 1,
+                "offset": 0
+              }
+            ],
+            "inlineStyleRanges": [],
+            "key": "5fsdu",
+            "text": " ",
+            "type": "atomic"
+          },
+          {
+            "data": {},
+            "entityRanges": [],
+            "inlineStyleRanges": [],
+            "key": "fv976",
+            "text": "CC Switch  的设计是 一面老式电话总机墙从左往右长：一次提交亮一盏灯，一个版本钉一块铜铭牌。主角小火花从官方图标的星芒里长出来，每接入一个 AI 编程工具就多一道光。正式版发布那天天一亮，整面墙从纸上立成 3D。2 分 7 秒。",
+            "type": "unstyled"
+          },
+          {
+            "data": {},
+            "entityRanges": [
+              {
+                "key": 5,
+                "length": 1,
+                "offset": 0
+              }
+            ],
+            "inlineStyleRanges": [],
+            "key": "fl1me",
+            "text": " ",
+            "type": "atomic"
+          },
+          {
+            "data": {},
+            "entityRanges": [],
+            "inlineStyleRanges": [],
+            "key": "d4uia",
+            "text": "Cherry Studio：一棵从地下往上长的树",
+            "type": "header-two"
+          },
+          {
+            "data": {},
+            "entityRanges": [
+              {
+                "key": 6,
+                "length": 1,
+                "offset": 0
+              }
+            ],
+            "inlineStyleRanges": [],
+            "key": "bpr7u",
+            "text": " ",
+            "type": "atomic"
+          },
+          {
+            "data": {},
+            "entityRanges": [],
+            "inlineStyleRanges": [],
+            "key": "dfksl",
+            "text": "",
+            "type": "unstyled"
+          },
+          {
+            "data": {},
+            "entityRanges": [],
+            "inlineStyleRanges": [],
+            "key": "6057r",
+            "text": "Cherry Studio 也是我的 AI 启蒙老师之一, 设计的思路是樱桃树，镜头只往上走。一次提交一片叶，一个新功能一朵花，一个正式版一颗樱桃，每来一位新贡献者就飞来一只蜜蜂。数据底座重写了 373 天，画面上就是在地下“换根”。2 分 13 秒。 ",
+            "type": "unstyled"
+          },
+          {
+            "data": {},
+            "entityRanges": [
+              {
+                "key": 7,
+                "length": 1,
+                "offset": 0
+              }
+            ],
+            "inlineStyleRanges": [],
+            "key": "4211h",
+            "text": " ",
+            "type": "atomic"
+          },
+          {
+            "data": {},
+            "entityRanges": [],
+            "inlineStyleRanges": [],
+            "key": "ssso",
+            "text": "LobeHub：一个在原地长大的脑洞",
+            "type": "header-two"
+          },
+          {
+            "data": {},
+            "entityRanges": [
+              {
+                "key": 8,
+                "length": 1,
+                "offset": 0
+              }
+            ],
+            "inlineStyleRanges": [],
+            "key": "d9gia",
+            "text": " ",
+            "type": "atomic"
+          },
+          {
+            "data": {},
+            "entityRanges": [],
+            "inlineStyleRanges": [],
+            "key": "5esru",
+            "text": "lobehub 我最喜欢的是它的脑洞设计(logo意义的脑洞), 主角 Lobe 待在原地，头顶的“脑洞”越长越大，镜头只往后退。一次提交是一粒飞进脑洞的火星，一次回滚是一个泡泡破掉，一个 GitHub 星标就是一颗星，一共 82,834 颗。2 分 5 秒。",
+            "type": "unstyled"
+          },
+          {
+            "data": {},
+            "entityRanges": [
+              {
+                "key": 9,
+                "length": 1,
+                "offset": 0
+              }
+            ],
+            "inlineStyleRanges": [],
+            "key": "472mm",
+            "text": " ",
+            "type": "atomic"
+          },
+          {
+            "data": {},
+            "entityRanges": [],
+            "inlineStyleRanges": [],
+            "key": "4ojqn",
+            "text": "七步视频法：以 Raven 为例",
+            "type": "header-one"
+          },
+          {
+            "data": {},
+            "entityRanges": [],
+            "inlineStyleRanges": [],
+            "key": "fqtda",
+            "text": "我把视频拆成了七部, 这七步不是凭空设计的, 是因为曹植七步成诗(并不)。2026年9月24日做 Raven 那天，还没有这套流程：先出整片，边看边改。第一次 4K 渲染在上午 11 点，带字的分镜到下午 3 点才有。一天里开了 13 次 4K 渲染，5 次半路叫停或崩溃。做完之后，我系统整理了一下, 整理成了七部 SOP，每一步都停下来给你看。",
+            "type": "unstyled"
+          },
+          {
+            "data": {},
+            "entityRanges": [
+              {
+                "key": 10,
+                "length": 1,
+                "offset": 0
+              }
+            ],
+            "inlineStyleRanges": [],
+            "key": "7amq2",
+            "text": " ",
+            "type": "atomic"
+          },
+          {
+            "data": {},
+            "entityRanges": [],
+            "inlineStyleRanges": [],
+            "key": "9lqki",
+            "text": "第 1 步 · 提纲：先定讲什么故事",
+            "type": "header-two"
+          },
+          {
+            "data": {},
+            "entityRanges": [],
+            "inlineStyleRanges": [],
+            "key": "5o3k",
+            "text": "首先打开 claude code 或者 raven,  把你的代码地址丢进去, 并且使用这个skill, 这里需要注意的是, 如果你使用了 claude code, 务必需要使用 /effort max",
+            "type": "unstyled"
+          },
+          {
+            "data": {},
+            "entityRanges": [],
+            "inlineStyleRanges": [],
+            "key": "5bejr",
+            "text": "「使用 git-story-film skill,  读取 xxxxx , 帮我设计一份影片」",
+            "type": "unstyled"
+          },
+          {
+            "data": {},
+            "entityRanges": [],
+            "inlineStyleRanges": [],
+            "key": "25rn2",
+            "text": "你会看到一份 OUTLINE.md：一句话讲完整部片，用什么形式讲、为什么，主角是谁、字幕用谁的口吻，起承转合四句话，观众看完该记住哪几件事，还有片子依据的真实数字。",
+            "type": "unstyled"
+          },
+          {
+            "data": {},
+            "entityRanges": [],
+            "inlineStyleRanges": [],
+            "key": "12heg",
+            "text": "Raven 的第一版是夜空里一条累计提交的折线，数据都对，但没有故事。我要的是“一只黑色渡鸦的视角”，还要 “卡通形象，最好大眼睛”、“从破壳到都是遵循一个从左往右的前进路线”。于是提纲里写下了全片的铁律：一镜到底，只往右走。",
+            "type": "unstyled"
+          },
+          {
+            "data": {},
+            "entityRanges": [
+              {
+                "key": 11,
+                "length": 1,
+                "offset": 0
+              }
+            ],
+            "inlineStyleRanges": [],
+            "key": "7ibhk",
+            "text": " ",
+            "type": "atomic"
+          },
+          {
+            "data": {},
+            "entityRanges": [],
+            "inlineStyleRanges": [],
+            "key": "9r4sq",
+            "text": "第 2 步 · 主角：表情和动作",
+            "type": "header-two"
+          },
+          {
+            "data": {},
+            "entityRanges": [],
+            "inlineStyleRanges": [],
+            "key": "311q9",
+            "text": "你会看到一张角色设定表：6 到 12 个表情，走、跳、飞这些动作的关键姿势，每种画风下的样子，还有缩小以后还认不认得出来。",
+            "type": "unstyled"
+          },
+          {
+            "data": {},
+            "entityRanges": [],
+            "inlineStyleRanges": [],
+            "key": "cemag",
+            "text": "Raven 的设定表里，铅笔画的雏鸟有好奇、亮晶晶、怀疑、晕；上了墨的成鸟有吃惊、得意、专注、张开翅膀。主角在这一步定下来，后面每个镜头都用同一套代码画它。",
+            "type": "unstyled"
+          },
+          {
+            "data": {},
+            "entityRanges": [
+              {
+                "key": 12,
+                "length": 1,
+                "offset": 0
+              }
+            ],
+            "inlineStyleRanges": [],
+            "key": "3u9ri",
+            "text": " ",
+            "type": "atomic"
+          },
+          {
+            "data": {},
+            "entityRanges": [],
+            "inlineStyleRanges": [],
+            "key": "105ee",
+            "text": "第 3 步 · 全片提纲：每一拍对上一个真实提交",
+            "type": "header-two"
+          },
+          {
+            "data": {},
+            "entityRanges": [],
+            "inlineStyleRanges": [],
+            "key": "3dvvh",
+            "text": "你会看到约两分钟的完整提纲：分几幕、每幕什么画风、为什么；每一拍的时间、画面、功能和对应的提交；结尾；还有要再核对的说法。",
+            "type": "unstyled"
+          },
+          {
+            "data": {},
+            "entityRanges": [],
+            "inlineStyleRanges": [],
+            "key": "d4bnp",
+            "text": "Raven 视频在这一步改得最多。我会补充很多细节上的调整：“得介绍功能点啊，不然别人也不知道 raven 能给别人带来什么。” 于是右上角的日期换成了功能卡，片长从 90 秒改成 2 分钟，后半程用一个具体的委托串起四个内置 Agent：“帮我调研三家竞品，写个脚本抓数据，夜里盯着，最后做成一份 PPT。” 顺手核了事实：Raven 的预设里没有 ChatGPT，有的是 Codex；自进化的分数只标成“示意”。",
+            "type": "unstyled"
+          },
+          {
+            "data": {},
+            "entityRanges": [
+              {
+                "key": 13,
+                "length": 1,
+                "offset": 0
+              }
+            ],
+            "inlineStyleRanges": [],
+            "key": "cnd3e",
+            "text": " ",
+            "type": "atomic"
+          },
+          {
+            "data": {},
+            "entityRanges": [],
+            "inlineStyleRanges": [],
+            "key": "9nvuu",
+            "text": "第 4 步 · 分镜：先看前 30 秒",
+            "type": "header-two"
+          },
+          {
+            "data": {},
+            "entityRanges": [],
+            "inlineStyleRanges": [],
+            "key": "bddlh",
+            "text": "接着预览分镜：前 30 秒每个镜头一张关键帧，关键帧用片子自己的角色和场景代码画出来，旁边写着时间、字幕和对应的提交。这 30 秒定下口吻、节奏和画风，后面照着走。",
+            "type": "unstyled"
+          },
+          {
+            "data": {},
+            "entityRanges": [
+              {
+                "key": 14,
+                "length": 1,
+                "offset": 0
+              }
+            ],
+            "inlineStyleRanges": [],
+            "key": "6lmao",
+            "text": " ",
+            "type": "atomic"
+          },
+          {
+            "data": {},
+            "entityRanges": [],
+            "inlineStyleRanges": [],
+            "key": "873m1",
+            "text": "第 5 步 · 详细编写：整部片动起来",
+            "type": "header-two"
+          },
+          {
+            "data": {},
+            "entityRanges": [],
+            "inlineStyleRanges": [],
+            "key": "cdf44",
+            "text": "写完剩下的镜头，把整部片做成动画，配乐也在这一步用代码合成。我很惊讶的是 opus 5.5 在音效和简单的配乐上做的这么好, 并且遇到新表情、新动作，先补进设定表给你看。做完先自己检查：把全片抽成一张帧网格，一眼看完节奏和构图。",
+            "type": "unstyled"
+          },
+          {
+            "data": {},
+            "entityRanges": [],
+            "inlineStyleRanges": [],
+            "key": "d6ru",
+            "text": "这里我还用到了“两个时钟”策略, 默认 claude 会用 24帧来写, 但实际上在画面移动速度稍快的场景下, 很多细节会看不清楚, 于是我改了引擎的代码, 镜头、背景和文字按 60 帧走，角色的姿势照样一秒换 12 到 24 张，顺滑和手绘感分开处理。",
+            "type": "unstyled"
+          },
+          {
+            "data": {},
+            "entityRanges": [
+              {
+                "key": 15,
+                "length": 1,
+                "offset": 0
+              }
+            ],
+            "inlineStyleRanges": [],
+            "key": "5l26j",
+            "text": " ",
+            "type": "atomic"
+          },
+          {
+            "data": {},
+            "entityRanges": [],
+            "inlineStyleRanges": [],
+            "key": "149bi",
+            "text": "第 6 步 · Studio：在浏览器里看完整部片",
+            "type": "header-two"
+          },
+          {
+            "data": {},
+            "entityRanges": [],
+            "inlineStyleRanges": [],
+            "key": "a1h20",
+            "text": "在正式渲染钱, 打开片子开始预览。上面是画面；下面一条拖动条，每一幕一段色带，每个镜头一个编号格子，拖到哪停到哪，带着配乐从任意位置播放；再往下是每个镜头的分镜图，从当前代码实时画出来。这一步不走 4k 60fps 渲染。",
+            "type": "unstyled"
+          },
+          {
+            "data": {},
+            "entityRanges": [],
+            "inlineStyleRanges": [],
+            "key": "di1a7",
+            "text": "如果你觉得 AI 这块需要注入自己的 taste, 需要针对细节作调整, 那么你一定很爱这个 skill 给你保留的灵活的空间. ",
+            "type": "unstyled"
+          },
+          {
+            "data": {},
+            "entityRanges": [],
+            "inlineStyleRanges": [],
+            "key": "28pq",
+            "text": "下图是 LobeHub 那部片的 Studio。",
+            "type": "unstyled"
+          },
+          {
+            "data": {},
+            "entityRanges": [
+              {
+                "key": 16,
+                "length": 1,
+                "offset": 0
+              }
+            ],
+            "inlineStyleRanges": [],
+            "key": "ejbhh",
+            "text": " ",
+            "type": "atomic"
+          },
+          {
+            "data": {},
+            "entityRanges": [],
+            "inlineStyleRanges": [],
+            "key": "27qce",
+            "text": "第 7 步 · 成片：4K60",
+            "type": "header-two"
+          },
+          {
+            "data": {},
+            "entityRanges": [],
+            "inlineStyleRanges": [],
+            "key": "2b6fn",
+            "text": "当你确。可以渲染之后, 直接告诉 Claude Code / Raven 可以渲染了。Agent 会打开浏览器一边画，一边把帧直接送进 ffmpeg，4 路并行，不在硬盘上堆上百 GB 的图。交付时导演会报告时长、分辨率和文件大小，完整解码一遍，再抽几帧亲眼看。片尾卡默认也写成第 0 帧，播放器和信息流会拿它当封面，这个细节也是 Raven 的用户提出来的。",
+            "type": "unstyled"
+          },
+          {
+            "data": {},
+            "entityRanges": [],
+            "inlineStyleRanges": [],
+            "key": "5nprr",
+            "text": "背后的设计思想",
+            "type": "header-two"
+          },
+          {
+            "data": {},
+            "entityRanges": [],
+            "inlineStyleRanges": [],
+            "key": "1if5d",
+            "text": "七个步骤只是表面。真正让片子“像这个仓库”的，是下面八条规矩。",
+            "type": "unstyled"
+          },
+          {
+            "data": {},
+            "entityRanges": [],
+            "inlineStyleRanges": [
+              {
+                "length": 13,
+                "offset": 0,
+                "style": "Bold"
+              }
+            ],
+            "key": "akh2j",
+            "text": "1. 是导演，不是生成器。 Claude 自己拿主意的有三件事：用哪些数据、讲什么故事、用什么画风。你只需要看、点头、提意见。每一步结束，你手里都有一样看得见的东西。",
+            "type": "unstyled"
+          },
+          {
+            "data": {},
+            "entityRanges": [],
+            "inlineStyleRanges": [
+              {
+                "length": 18,
+                "offset": 0,
+                "style": "Bold"
+              }
+            ],
+            "key": "s1i0",
+            "text": "2. 纸上改最便宜，4K 上改最贵。 改一句提纲几秒钟，重渲一部 4K 要几分钟。所以 Studio 点头之前不出 MP4。就算你说“一直做完”，导演也会停在 Studio 等你看过再渲染。",
+            "type": "unstyled"
+          },
+          {
+            "data": {},
+            "entityRanges": [],
+            "inlineStyleRanges": [
+              {
+                "length": 17,
+                "offset": 0,
+                "style": "Bold"
+              }
+            ],
+            "key": "eopuv",
+            "text": "3. 一一对应：一次提交就是一格。 画面上的东西和 git 里的事一一对应：一次提交一颗珠子，一个版本一块铭牌，一次回滚一次挫折。每天挂几颗，就是那天真实的提交数。一个符号只代表一种数据：LobeHub 里星星就是星标，提交就只能画成火星。这样拍出来的才是这个仓库的故事，而不是换了名字的模板。",
+            "type": "unstyled"
+          },
+          {
+            "data": {},
+            "entityRanges": [
+              {
+                "key": 17,
+                "length": 1,
+                "offset": 0
+              }
+            ],
+            "inlineStyleRanges": [],
+            "key": "5f5c6",
+            "text": " ",
+            "type": "atomic"
+          },
+          {
+            "data": {},
+            "entityRanges": [],
+            "inlineStyleRanges": [],
+            "key": "8braq",
+            "text": "Raven 最忙的一天：137 次提交，画面上就落下 137 颗珠子。",
+            "type": "unstyled"
+          },
+          {
+            "data": {},
+            "entityRanges": [],
+            "inlineStyleRanges": [
+              {
+                "length": 15,
+                "offset": 0,
+                "style": "Bold"
+              }
+            ],
+            "key": "ak24t",
+            "text": "4. 一部片只守一种镜头语法。 旅程只往右走，从不切镜；生长待在原地，镜头往后退；Cherry Studio 的树只往上长，镜头也只往上。守住这一条，片子才是一个连贯的故事，而不是一串幻灯片。约束还会逼出好点子：镜头下不去，地下的重写就靠一面“地下放大镜”和一条往上追的新根线来讲，追上树梢那一刻就是全片最高点。",
+            "type": "unstyled"
+          },
+          {
+            "data": {},
+            "entityRanges": [],
+            "inlineStyleRanges": [
+              {
+                "length": 24,
+                "offset": 0,
+                "style": "Bold"
+              }
+            ],
+            "key": "arpta",
+            "text": "5. 主角从官方图里长出来，最后变回 logo。 CC Switch 的小火花先量了官方图标，发现是 13 道光而不是 10 道，剧本跟着改。Cherry Studio 的小樱桃，叶和梗张成 logo 上那个 ✓。招牌表情要省着用：Lobe 吐舌头，只留给它变回 logo 的那一刻。",
+            "type": "unstyled"
+          },
+          {
+            "data": {},
+            "entityRanges": [],
+            "inlineStyleRanges": [
+              {
+                "length": 8,
+                "offset": 0,
+                "style": "Bold"
+              }
+            ],
+            "key": "aavfc",
+            "text": "6. 只说真话。 画面上的哈希、日期、次数都来自仓库，估算的数字标明“估算”。LobeHub 的星标日期是按公开网站估的，脚本和原始数据都留在片子文件夹里。产品没有的能力不写：LobeHub 没有 Slack 集成，片子里就不出现 Slack。",
+            "type": "unstyled"
+          },
+          {
+            "data": {},
+            "entityRanges": [],
+            "inlineStyleRanges": [
+              {
+                "length": 8,
+                "offset": 0,
+                "style": "Bold"
+              }
+            ],
+            "key": "1q19l",
+            "text": "7. 两个时钟。 位置每一帧都重新算，60 帧一帧不落；角色的姿势每秒只换 12 到 24 张，像手绘动画那样一张画停一两拍。动作顺，又有手绘味，60 帧下也不抖。",
+            "type": "unstyled"
+          },
+          {
+            "data": {},
+            "entityRanges": [],
+            "inlineStyleRanges": [
+              {
+                "length": 22,
+                "offset": 0,
+                "style": "Bold"
+              }
+            ],
+            "key": "c5cpc",
+            "text": "8. 你的每一句反馈，都会变成下一部的规则。 一次性的要求会写进长期记忆：片尾三行署名、每个日期都带年份、按项目真实的成长来讲、主角从官方图重画、招牌表情只在 logo 时刻用、星标日期按公开网站估。下一部片子的第一版就照着做了。",
+            "type": "unstyled"
+          },
+          {
+            "data": {},
+            "entityRanges": [],
+            "inlineStyleRanges": [],
+            "key": "10mdb",
+            "text": "翻车和惊喜",
+            "type": "header-one"
+          },
+          {
+            "data": {},
+            "entityRanges": [],
+            "inlineStyleRanges": [],
+            "key": "fmrkj",
+            "text": "比如我在制作视频的过程中遇到的 opus 5.5 把舌头绘制到嘴巴外面。",
+            "type": "unstyled"
+          },
+          {
+            "data": {},
+            "entityRanges": [
+              {
+                "key": 18,
+                "length": 1,
+                "offset": 0
+              }
+            ],
+            "inlineStyleRanges": [],
+            "key": "a0ppj",
+            "text": " ",
+            "type": "atomic"
+          },
+          {
+            "data": {},
+            "entityRanges": [],
+            "inlineStyleRanges": [],
+            "key": "afio8",
+            "text": "吐舌头是官方图标上的招牌表情。第一版把它当成了默认嘴型，设定表、分镜、成片里到处都在吐舌头。改完之后，Lobe 平时闭嘴微笑，只在片尾变回官方图标的那一刻吐一次。招牌要省着用，用一次才有分量。",
+            "type": "unstyled"
+          },
+          {
+            "data": {},
+            "entityRanges": [],
+            "inlineStyleRanges": [],
+            "key": "11abe",
+            "text": "有个插曲：本来我想给 cindy 也做一个版本的，结果 opus 5.5 画的我都不敢发出来了。担心被 cindy 的开发拉黑哈哈哈哈。",
+            "type": "unstyled"
+          },
+          {
+            "data": {},
+            "entityRanges": [
+              {
+                "key": 19,
+                "length": 1,
+                "offset": 0
+              }
+            ],
+            "inlineStyleRanges": [],
+            "key": "7529t",
+            "text": " ",
+            "type": "atomic"
+          },
+          {
+            "data": {},
+            "entityRanges": [],
+            "inlineStyleRanges": [],
+            "key": "f8e8f",
+            "text": "比如 cherry studio 上来就用了猫的形象，我做了一定调整 “我觉得主角应该是一只卡通版本的樱桃”",
+            "type": "unstyled"
+          },
+          {
+            "data": {},
+            "entityRanges": [
+              {
+                "key": 20,
+                "length": 1,
+                "offset": 0
+              }
+            ],
+            "inlineStyleRanges": [],
+            "key": "f4hit",
+            "text": " ",
+            "type": "atomic"
+          },
+          {
+            "data": {},
+            "entityRanges": [],
+            "inlineStyleRanges": [],
+            "key": "aoc7l",
+            "text": "提纲第一版的主角是一只园丁猫，致敬作者的网名“亢奋猫”。我改成樱桃， 十几分钟后，小樱桃的三页设定表就画好了：叶短梗长，张成 logo 上那个 ✓；梗能勾住树枝，所以它能跟着树一路往上。片尾三颗樱桃挂在 ✓ 下面，正好是官方图标。角色之争放在第 2 步用画来定，是最便宜的时候。",
+            "type": "unstyled"
+          },
+          {
+            "data": {},
+            "entityRanges": [],
+            "inlineStyleRanges": [],
+            "key": "32fpq",
+            "text": "还有一些细枝末节的修改， 比如跨年的项目最好还是得加上年份，得益于提前做了预览 studio， 改完立马预览到了。",
+            "type": "unstyled"
+          },
+          {
+            "data": {},
+            "entityRanges": [
+              {
+                "key": 21,
+                "length": 1,
+                "offset": 0
+              }
+            ],
+            "inlineStyleRanges": [],
+            "key": "6js1p",
+            "text": " ",
+            "type": "atomic"
+          },
+          {
+            "data": {},
+            "entityRanges": [],
+            "inlineStyleRanges": [],
+            "key": "feo4l",
+            "text": "甚至还有一些修改，是我临时想出来的，比如做 CC Switch：“这块是不是可以考虑有一个 2d 转 3d 的转场”，没想到整个转场做的意外的丝滑，要知道以前我做视频的时候真的就很想做这种效果，但是成本和时间都来不及。 ",
+            "type": "unstyled"
+          },
+          {
+            "data": {},
+            "entityRanges": [
+              {
+                "key": 22,
+                "length": 1,
+                "offset": 0
+              }
+            ],
+            "inlineStyleRanges": [],
+            "key": "cm2bt",
+            "text": " ",
+            "type": "atomic"
+          },
+          {
+            "data": {},
+            "entityRanges": [],
+            "inlineStyleRanges": [],
+            "key": "5fen6",
+            "text": "我把转场挂在一个真实的日子上：v3.9.0 正式发布那天的天亮。字幕是“天一亮，我从纸上走了出来”，形式的变化本身成了剧情。这段 3D 是用 2D 引擎模拟透视画出来的，没有用 WebGL。",
+            "type": "unstyled"
+          },
+          {
+            "data": {},
+            "entityRanges": [],
+            "inlineStyleRanges": [],
+            "key": "8umlu",
+            "text": "同一轮反馈里，用户还要“利好用户的视角”的文案。片子的签名从“拨一下，就换好”改成“你专心写代码，线我来接”；故障转移那张卡从“熔断 + 健康检查”改成“一家挂了，自动换下一家”。功能卡写你能得到什么，不写功能名。",
+            "type": "unstyled"
+          },
+          {
+            "data": {},
+            "entityRanges": [],
+            "inlineStyleRanges": [],
+            "key": "q9gu",
+            "text": "怎么开始",
+            "type": "header-one"
+          },
+          {
+            "data": {},
+            "entityRanges": [],
+            "inlineStyleRanges": [],
+            "key": "2ss6d",
+            "text": "三步就能开拍：",
+            "type": "unstyled"
+          },
+          {
+            "data": {
+              "urls": [
+                {
+                  "fromIndex": 39,
+                  "text": "github.com/EverMind-AI/Raven/tree/main/skills/git-story-film",
+                  "toIndex": 99
+                }
+              ]
+            },
+            "entityRanges": [
+              {
+                "key": 23,
+                "length": 60,
+                "offset": 39
+              }
+            ],
+            "inlineStyleRanges": [],
+            "key": "6n6td",
+            "text": "安装：把下面的链接复制过去，粘贴到你的 claude code 中 帮我安装 github.com/EverMind-AI/Raven/tree/main/skills/git-story-film ",
+            "type": "ordered-list-item"
+          },
+          {
+            "data": {},
+            "entityRanges": [],
+            "inlineStyleRanges": [],
+            "key": "5um51",
+            "text": "开口：/git-story-film 帮我给做一个视频，先构思一下",
+            "type": "ordered-list-item"
+          },
+          {
+            "data": {},
+            "entityRanges": [],
+            "inlineStyleRanges": [],
+            "key": "1k7hf",
+            "text": "跟着七步走：每一步看一样东西，点头或者提意见。你不用会画画，也不用会剪辑。",
+            "type": "ordered-list-item"
+          },
+          {
+            "data": {},
+            "entityRanges": [],
+            "inlineStyleRanges": [],
+            "key": "4ciqo",
+            "text": "需要的环境：Node 22 以上、Google Chrome、ffmpeg、Python 3.8 以上，如果你遇到任何环境问题都不是大问题，让 claude code 帮你解决。",
+            "type": "unstyled"
+          },
+          {
+            "data": {},
+            "entityRanges": [],
+            "inlineStyleRanges": [],
+            "key": "2di59",
+            "text": "要多久：最近三部片子，从给出链接到拿到 4K 成片都在三小时以内。CC Switch 约 2 小时，只渲染了一次；Cherry Studio 约 2 小时 45 分，多渲染了两次；LobeHub 不到 3 小时。",
+            "type": "unstyled"
+          },
+          {
+            "data": {},
+            "entityRanges": [
+              {
+                "key": 24,
+                "length": 27,
+                "offset": 30
+              }
+            ],
+            "inlineStyleRanges": [],
+            "key": "au0p9",
+            "text": "致谢：绘图和动画引擎改编自 Alexey Fateev 的 hand-drawn-canvas-animation（MIT 许可）。",
+            "type": "unstyled"
+          },
+          {
+            "data": {},
+            "entityRanges": [],
+            "inlineStyleRanges": [
+              {
+                "length": 42,
+                "offset": 0,
+                "style": "Bold"
+              }
+            ],
+            "key": "1e6a2",
+            "text": "第一次提交那天，谁也不知道它会长成什么样。现在，把你的代码历史讲给第一次听说它的人。",
+            "type": "unstyled"
+          },
+          {
+            "data": {
+              "urls": [
+                {
+                  "fromIndex": 10,
+                  "text": "https://github.com/EverMind-AI/Raven/blob/main/skills/git-story-film/README.zh-CN.md",
+                  "toIndex": 94
+                }
+              ]
+            },
+            "entityRanges": [],
+            "inlineStyleRanges": [],
+            "key": "bphne",
+            "text": "skill 地址见 https://github.com/EverMind-AI/Raven/blob/main/skills/git-story-film/README.zh-CN.md ",
+            "type": "unstyled"
+          },
+          {
+            "data": {
+              "mentions": [
+                {
+                  "fromIndex": 8,
+                  "text": "evermind",
+                  "toIndex": 17
+                }
+              ]
+            },
+            "entityRanges": [],
+            "inlineStyleRanges": [],
+            "key": "aefp",
+            "text": "Made By @evermind Team",
+            "type": "unstyled"
+          },
+          {
+            "data": {},
+            "entityRanges": [],
+            "inlineStyleRanges": [],
+            "key": "barea",
+            "text": "如有帮助，请点赞转发！感激不尽！",
+            "type": "unstyled"
+          },
+          {
+            "data": {},
+            "entityRanges": [
+              {
+                "key": 25,
+                "length": 1,
+                "offset": 0
+              }
+            ],
+            "inlineStyleRanges": [],
+            "key": "hl9g",
+            "text": " ",
+            "type": "atomic"
+          },
+          {
+            "data": {},
+            "entityRanges": [],
+            "inlineStyleRanges": [],
+            "key": "1ajma",
+            "text": "",
+            "type": "unstyled"
+          }
+        ],
+        "entityMap": [
+          {
+            "key": "12",
+            "value": {
+              "data": {
+                "entityKey": "1fb32acd-6c4a-4cd8-a8ea-ad83245f005d",
+                "mediaItems": [
+                  {
+                    "localMediaId": "16",
+                    "mediaCategory": "DraftTweetImage",
+                    "mediaId": "2104050188470091776"
+                  }
+                ]
+              },
+              "mutability": "Immutable",
+              "type": "MEDIA"
+            }
+          },
+          {
+            "key": "8",
+            "value": {
+              "data": {
+                "entityKey": "be204705-de60-4836-89d6-8da08e2eadfd",
+                "mediaItems": [
+                  {
+                    "localMediaId": "10",
+                    "mediaCategory": "DraftTweetImage",
+                    "mediaId": "2104049540701814784"
+                  }
+                ]
+              },
+              "mutability": "Immutable",
+              "type": "MEDIA"
+            }
+          },
+          {
+            "key": "19",
+            "value": {
+              "data": {
+                "entityKey": "caf78eb8-3ba0-44c1-9380-26efa14a1e78",
+                "mediaItems": [
+                  {
+                    "localMediaId": "20",
+                    "mediaCategory": "DraftTweetImage",
+                    "mediaId": "2104068833535516672"
+                  }
+                ]
+              },
+              "mutability": "Immutable",
+              "type": "MEDIA"
+            }
+          },
+          {
+            "key": "23",
+            "value": {
+              "data": {
+                "entityKey": "016428b6-f15d-466a-8151-951d0d9d90e6",
+                "url": "https://github.com/EverMind-AI/Raven/tree/main/skills/git-story-film"
+              },
+              "mutability": "Mutable",
+              "type": "LINK"
+            }
+          },
+          {
+            "key": "4",
+            "value": {
+              "data": {
+                "entityKey": "c8e03567-4bfd-4b40-aebc-7c824313d3d1",
+                "mediaItems": [
+                  {
+                    "localMediaId": "6",
+                    "mediaCategory": "DraftTweetImage",
+                    "mediaId": "2104048962844127232"
+                  }
+                ]
+              },
+              "mutability": "Immutable",
+              "type": "MEDIA"
+            }
+          },
+          {
+            "key": "15",
+            "value": {
+              "data": {
+                "entityKey": "7d0d0a27-b46c-47bf-ab8b-e72a591b99a4",
+                "mediaItems": [
+                  {
+                    "localMediaId": "22",
+                    "mediaCategory": "DraftTweetImage",
+                    "mediaId": "2104050334549278720"
+                  }
+                ]
+              },
+              "mutability": "Immutable",
+              "type": "MEDIA"
+            }
+          },
+          {
+            "key": "11",
+            "value": {
+              "data": {
+                "entityKey": "98e570e0-cbe1-4ddf-8e27-31f732f962af",
+                "mediaItems": [
+                  {
+                    "localMediaId": "14",
+                    "mediaCategory": "DraftTweetImage",
+                    "mediaId": "2104050098301001728"
+                  }
+                ]
+              },
+              "mutability": "Immutable",
+              "type": "MEDIA"
+            }
+          },
+          {
+            "key": "9",
+            "value": {
+              "data": {
+                "entityKey": "fb25b33e-87a9-4382-a4ce-8a0a997e45b9",
+                "tweetId": "2103868710561911209"
+              },
+              "mutability": "Immutable",
+              "type": "TWEET"
+            }
+          },
+          {
+            "key": "22",
+            "value": {
+              "data": {
+                "entityKey": "886b4ed3-f532-4009-a3b0-9f2ce2025d63",
+                "mediaItems": [
+                  {
+                    "localMediaId": "36",
+                    "mediaCategory": "DraftTweetImage",
+                    "mediaId": "2104051310811398144"
+                  }
+                ]
+              },
+              "mutability": "Immutable",
+              "type": "MEDIA"
+            }
+          },
+          {
+            "key": "13",
+            "value": {
+              "data": {
+                "entityKey": "f4c1e1cb-00d7-490f-91a4-68d7259bc3a0",
+                "mediaItems": [
+                  {
+                    "localMediaId": "18",
+                    "mediaCategory": "DraftTweetImage",
+                    "mediaId": "2104050221424812032"
+                  }
+                ]
+              },
+              "mutability": "Immutable",
+              "type": "MEDIA"
+            }
+          },
+          {
+            "key": "24",
+            "value": {
+              "data": {
+                "entityKey": "64f62e40-4e58-4af1-9796-c2f68f9bfd91",
+                "url": "https://github.com/alesha-pro/tools/tree/main/skills/hand-drawn-canvas-animation"
+              },
+              "mutability": "Mutable",
+              "type": "LINK"
+            }
+          },
+          {
+            "key": "16",
+            "value": {
+              "data": {
+                "entityKey": "d169370d-a75c-47c3-a1d5-f61f1831d73f",
+                "mediaItems": [
+                  {
+                    "localMediaId": "24",
+                    "mediaCategory": "DraftTweetImage",
+                    "mediaId": "2104050568889315328"
+                  }
+                ]
+              },
+              "mutability": "Immutable",
+              "type": "MEDIA"
+            }
+          },
+          {
+            "key": "5",
+            "value": {
+              "data": {
+                "entityKey": "13c288fe-6fb2-467b-b738-fc25be0d12db",
+                "tweetId": "2103768558429958335"
+              },
+              "mutability": "Immutable",
+              "type": "TWEET"
+            }
+          },
+          {
+            "key": "10",
+            "value": {
+              "data": {
+                "entityKey": "c639aa91-1972-42e6-b243-e2893cb56bc6",
+                "mediaItems": [
+                  {
+                    "localMediaId": "12",
+                    "mediaCategory": "DraftTweetImage",
+                    "mediaId": "2104049815705567232"
+                  }
+                ]
+              },
+              "mutability": "Immutable",
+              "type": "MEDIA"
+            }
+          },
+          {
+            "key": "21",
+            "value": {
+              "data": {
+                "entityKey": "937abbb8-374d-4822-a3cd-02e285220a8c",
+                "mediaItems": [
+                  {
+                    "localMediaId": "34",
+                    "mediaCategory": "DraftTweetImage",
+                    "mediaId": "2104051231069245440"
+                  }
+                ]
+              },
+              "mutability": "Immutable",
+              "type": "MEDIA"
+            }
+          },
+          {
+            "key": "6",
+            "value": {
+              "data": {
+                "entityKey": "2872b765-3d50-430e-8c63-500facf8a370",
+                "mediaItems": [
+                  {
+                    "localMediaId": "8",
+                    "mediaCategory": "DraftTweetImage",
+                    "mediaId": "2104049069517832193"
+                  }
+                ]
+              },
+              "mutability": "Immutable",
+              "type": "MEDIA"
+            }
+          },
+          {
+            "key": "1",
+            "value": {
+              "data": {
+                "entityKey": "487e7eb8-7a7e-44c3-811c-cb703b7ce066",
+                "mediaItems": [
+                  {
+                    "localMediaId": "19",
+                    "mediaCategory": "DraftTweetImage",
+                    "mediaId": "2104057194115383296"
+                  }
+                ]
+              },
+              "mutability": "Immutable",
+              "type": "MEDIA"
+            }
+          },
+          {
+            "key": "17",
+            "value": {
+              "data": {
+                "entityKey": "a094a35b-7971-46f6-97cd-6df98bea9573",
+                "mediaItems": [
+                  {
+                    "localMediaId": "28",
+                    "mediaCategory": "DraftTweetImage",
+                    "mediaId": "2104050951527215104"
+                  }
+                ]
+              },
+              "mutability": "Immutable",
+              "type": "MEDIA"
+            }
+          },
+          {
+            "key": "25",
+            "value": {
+              "data": {
+                "entityKey": "b4f0aba9-2b9a-4012-a6bc-520b22aba027",
+                "mediaItems": [
+                  {
+                    "localMediaId": "38",
+                    "mediaCategory": "DraftTweetImage",
+                    "mediaId": "2104051385901940736"
+                  }
+                ]
+              },
+              "mutability": "Immutable",
+              "type": "MEDIA"
+            }
+          },
+          {
+            "key": "14",
+            "value": {
+              "data": {
+                "entityKey": "3d1a0df9-08e9-4ce8-8e73-e1da1b864aae",
+                "mediaItems": [
+                  {
+                    "localMediaId": "20",
+                    "mediaCategory": "DraftTweetImage",
+                    "mediaId": "2104050303725400064"
+                  }
+                ]
+              },
+              "mutability": "Immutable",
+              "type": "MEDIA"
+            }
+          },
+          {
+            "key": "0",
+            "value": {
+              "data": {
+                "entityKey": "b3b19868-4297-4a5a-a498-c598cef6cfa7",
+                "url": "https://github.com/EverMind-AI/Raven"
+              },
+              "mutability": "Mutable",
+              "type": "LINK"
+            }
+          },
+          {
+            "key": "20",
+            "value": {
+              "data": {
+                "entityKey": "047b5419-9a21-4375-ac87-2e9b6a4fa487",
+                "mediaItems": [
+                  {
+                    "localMediaId": "32",
+                    "mediaCategory": "DraftTweetImage",
+                    "mediaId": "2104051153302687744"
+                  }
+                ]
+              },
+              "mutability": "Immutable",
+              "type": "MEDIA"
+            }
+          },
+          {
+            "key": "2",
+            "value": {
+              "data": {
+                "entityKey": "4e37032e-ff1b-4b68-806c-5c438e4517eb",
+                "mediaItems": [
+                  {
+                    "localMediaId": "2",
+                    "mediaCategory": "DraftTweetImage",
+                    "mediaId": "2104047596096692224"
+                  }
+                ]
+              },
+              "mutability": "Immutable",
+              "type": "MEDIA"
+            }
+          },
+          {
+            "key": "18",
+            "value": {
+              "data": {
+                "entityKey": "c0d64e14-4c5f-40d5-bc98-cba8406e0858",
+                "mediaItems": [
+                  {
+                    "localMediaId": "30",
+                    "mediaCategory": "DraftTweetImage",
+                    "mediaId": "2104051070272155648"
+                  }
+                ]
+              },
+              "mutability": "Immutable",
+              "type": "MEDIA"
+            }
+          },
+          {
+            "key": "7",
+            "value": {
+              "data": {
+                "entityKey": "083c2346-3313-4566-a916-640fd62b1d24",
+                "tweetId": "2104037017873162442"
+              },
+              "mutability": "Immutable",
+              "type": "TWEET"
+            }
+          },
+          {
+            "key": "3",
+            "value": {
+              "data": {
+                "entityKey": "84d88320-7dd7-424d-92bd-da6a2a248b62",
+                "tweetId": "2103032879496540640"
+              },
+              "mutability": "Immutable",
+              "type": "TWEET"
+            }
+          }
+        ]
+      },
+      "cover_media": {
+        "id": "QXBpTWVkaWE6DAAFCgABHTMZw6aaoAEKAAIAAAAAGugzLQAA",
+        "media_id": "2104053779016622081",
+        "media_info": {
+          "__typename": "ApiImage",
+          "color_info": {
+            "palette": [
+              {
+                "percentage": 93.63,
+                "rgb": {
+                  "blue": 233,
+                  "green": 242,
+                  "red": 246
+                }
+              },
+              {
+                "percentage": 2.96,
+                "rgb": {
+                  "blue": 54,
+                  "green": 58,
+                  "red": 63
+                }
+              },
+              {
+                "percentage": 1.49,
+                "rgb": {
+                  "blue": 171,
+                  "green": 215,
+                  "red": 164
+                }
+              },
+              {
+                "percentage": 0.51,
+                "rgb": {
+                  "blue": 175,
+                  "green": 224,
+                  "red": 245
+                }
+              },
+              {
+                "percentage": 0.2,
+                "rgb": {
+                  "blue": 221,
+                  "green": 202,
+                  "red": 177
+                }
+              }
+            ]
+          },
+          "original_img_height": 1200,
+          "original_img_url": "https://pbs.twimg.com/media/HTMZw6aaoAE05G9.jpg",
+          "original_img_width": 3000
+        },
+        "media_key": "3_2104053779016622081"
+      },
+      "id": "QXJ0aWNsZUVudGl0eToyMTA0MDQ1NDMxNjc2MTcwMjQw",
+      "lifecycle_state": {
+        "modified_at_secs": 1790485926
+      },
+      "media_entities": [
+        {
+          "id": "QXBpTWVkaWE6DAAFCgABHTMVYkxacAAKAAIAAAAAGugzLQAA",
+          "media_id": "2104048962844127232",
+          "media_info": {
+            "__typename": "ApiImage",
+            "color_info": {
+              "palette": [
+                {
+                  "percentage": 88.17,
+                  "rgb": {
+                    "blue": 196,
+                    "green": 219,
+                    "red": 227
+                  }
+                },
+                {
+                  "percentage": 8.7,
+                  "rgb": {
+                    "blue": 75,
+                    "green": 75,
+                    "red": 46
+                  }
+                },
+                {
+                  "percentage": 1.61,
+                  "rgb": {
+                    "blue": 93,
+                    "green": 157,
+                    "red": 188
+                  }
+                },
+                {
+                  "percentage": 0.99,
+                  "rgb": {
+                    "blue": 78,
+                    "green": 130,
+                    "red": 215
+                  }
+                },
+                {
+                  "percentage": 0.18,
+                  "rgb": {
+                    "blue": 58,
+                    "green": 163,
+                    "red": 217
+                  }
+                }
+              ]
+            },
+            "original_img_height": 1080,
+            "original_img_url": "https://pbs.twimg.com/media/HTMVYkxacAAHu75.jpg",
+            "original_img_width": 1920
+          },
+          "media_key": "3_2104048962844127232"
+        },
+        {
+          "id": "QXBpTWVkaWE6DAAFCgABHTMWf6lagAAKAAIAAAAAGugzLQAA",
+          "media_id": "2104050188470091776",
+          "media_info": {
+            "__typename": "ApiImage",
+            "color_info": {
+              "palette": [
+                {
+                  "percentage": 88.68,
+                  "rgb": {
+                    "blue": 227,
+                    "green": 239,
+                    "red": 243
+                  }
+                },
+                {
+                  "percentage": 10.3,
+                  "rgb": {
+                    "blue": 41,
+                    "green": 36,
+                    "red": 37
+                  }
+                },
+                {
+                  "percentage": 1,
+                  "rgb": {
+                    "blue": 122,
+                    "green": 122,
+                    "red": 124
+                  }
+                },
+                {
+                  "percentage": 0.26,
+                  "rgb": {
+                    "blue": 129,
+                    "green": 133,
+                    "red": 135
+                  }
+                }
+              ]
+            },
+            "original_img_height": 1080,
+            "original_img_url": "https://pbs.twimg.com/media/HTMWf6lagAADfnl.jpg",
+            "original_img_width": 1920
+          },
+          "media_key": "3_2104050188470091776"
+        },
+        {
+          "id": "QXBpTWVkaWE6DAAFCgABHTMXMVMaMAAKAAIAAAAAGugzLQAA",
+          "media_id": "2104050951527215104",
+          "media_info": {
+            "__typename": "ApiImage",
+            "color_info": {
+              "palette": [
+                {
+                  "percentage": 79.41,
+                  "rgb": {
+                    "blue": 91,
+                    "green": 49,
+                    "red": 26
+                  }
+                },
+                {
+                  "percentage": 15.78,
+                  "rgb": {
+                    "blue": 225,
+                    "green": 237,
+                    "red": 241
+                  }
+                },
+                {
+                  "percentage": 2.44,
+                  "rgb": {
+                    "blue": 200,
+                    "green": 158,
+                    "red": 244
+                  }
+                },
+                {
+                  "percentage": 1.37,
+                  "rgb": {
+                    "blue": 95,
+                    "green": 98,
+                    "red": 93
+                  }
+                },
+                {
+                  "percentage": 0.2,
+                  "rgb": {
+                    "blue": 201,
+                    "green": 221,
+                    "red": 228
+                  }
+                }
+              ]
+            },
+            "original_img_height": 1080,
+            "original_img_url": "https://pbs.twimg.com/media/HTMXMVMaMAAow2O.jpg",
+            "original_img_width": 1920
+          },
+          "media_key": "3_2104050951527215104"
+        },
+        {
+          "id": "QXBpTWVkaWE6DAAFCgABHTMWmn8a8AAKAAIAAAAAGugzLQAA",
+          "media_id": "2104050303725400064",
+          "media_info": {
+            "__typename": "ApiImage",
+            "color_info": {
+              "palette": [
+                {
+                  "percentage": 99.79,
+                  "rgb": {
+                    "blue": 227,
+                    "green": 239,
+                    "red": 243
+                  }
+                },
+                {
+                  "percentage": 0.21,
+                  "rgb": {
+                    "blue": 119,
+                    "green": 127,
+                    "red": 131
+                  }
+                }
+              ]
+            },
+            "original_img_height": 1086,
+            "original_img_url": "https://pbs.twimg.com/media/HTMWmn8a8AA_bpC.jpg",
+            "original_img_width": 1800
+          },
+          "media_key": "3_2104050303725400064"
+        },
+        {
+          "id": "QXBpTWVkaWE6DAAFCgABHTMXhPobwAAKAAIAAAAAGugzLQAA",
+          "media_id": "2104051310811398144",
+          "media_info": {
+            "__typename": "ApiImage",
+            "color_info": {
+              "palette": [
+                {
+                  "percentage": 50.49,
+                  "rgb": {
+                    "blue": 51,
+                    "green": 34,
+                    "red": 25
+                  }
+                },
+                {
+                  "percentage": 44.02,
+                  "rgb": {
+                    "blue": 212,
+                    "green": 231,
+                    "red": 238
+                  }
+                },
+                {
+                  "percentage": 0.99,
+                  "rgb": {
+                    "blue": 186,
+                    "green": 176,
+                    "red": 164
+                  }
+                },
+                {
+                  "percentage": 0.66,
+                  "rgb": {
+                    "blue": 90,
+                    "green": 153,
+                    "red": 185
+                  }
+                },
+                {
+                  "percentage": 0.55,
+                  "rgb": {
+                    "blue": 105,
+                    "green": 65,
+                    "red": 51
+                  }
+                }
+              ]
+            },
+            "original_img_height": 1740,
+            "original_img_url": "https://pbs.twimg.com/media/HTMXhPobwAABTO5.jpg",
+            "original_img_width": 1600
+          },
+          "media_key": "3_2104051310811398144"
+        },
+        {
+          "id": "QXBpTWVkaWE6DAAFCgABHTMV6NdbAAAKAAIAAAAAGugzLQAA",
+          "media_id": "2104049540701814784",
+          "media_info": {
+            "__typename": "ApiImage",
+            "color_info": {
+              "palette": [
+                {
+                  "percentage": 93.22,
+                  "rgb": {
+                    "blue": 85,
+                    "green": 56,
+                    "red": 49
+                  }
+                },
+                {
+                  "percentage": 2.15,
+                  "rgb": {
+                    "blue": 154,
+                    "green": 126,
+                    "red": 114
+                  }
+                },
+                {
+                  "percentage": 2.06,
+                  "rgb": {
+                    "blue": 36,
+                    "green": 38,
+                    "red": 46
+                  }
+                },
+                {
+                  "percentage": 0.76,
+                  "rgb": {
+                    "blue": 110,
+                    "green": 92,
+                    "red": 63
+                  }
+                },
+                {
+                  "percentage": 0.26,
+                  "rgb": {
+                    "blue": 180,
+                    "green": 184,
+                    "red": 188
+                  }
+                }
+              ]
+            },
+            "original_img_height": 1080,
+            "original_img_url": "https://pbs.twimg.com/media/HTMV6NdbAAA974B.jpg",
+            "original_img_width": 1920
+          },
+          "media_key": "3_2104049540701814784"
+        },
+        {
+          "id": "QXBpTWVkaWE6DAAFCgABHTMW2DwbMAAKAAIAAAAAGugzLQAA",
+          "media_id": "2104050568889315328",
+          "media_info": {
+            "__typename": "ApiImage",
+            "color_info": {
+              "palette": [
+                {
+                  "percentage": 74.21,
+                  "rgb": {
+                    "blue": 229,
+                    "green": 237,
+                    "red": 240
+                  }
+                },
+                {
+                  "percentage": 19.56,
+                  "rgb": {
+                    "blue": 28,
+                    "green": 23,
+                    "red": 24
+                  }
+                },
+                {
+                  "percentage": 4.65,
+                  "rgb": {
+                    "blue": 102,
+                    "green": 111,
+                    "red": 118
+                  }
+                },
+                {
+                  "percentage": 0.69,
+                  "rgb": {
+                    "blue": 147,
+                    "green": 183,
+                    "red": 226
+                  }
+                },
+                {
+                  "percentage": 0.35,
+                  "rgb": {
+                    "blue": 65,
+                    "green": 136,
+                    "red": 231
+                  }
+                }
+              ]
+            },
+            "original_img_height": 1533,
+            "original_img_url": "https://pbs.twimg.com/media/HTMW2DwbMAArNlv.jpg",
+            "original_img_width": 2000
+          },
+          "media_key": "3_2104050568889315328"
+        },
+        {
+          "id": "QXBpTWVkaWE6DAAFCgABHTMWoaxaAAAKAAIAAAAAGugzLQAA",
+          "media_id": "2104050334549278720",
+          "media_info": {
+            "__typename": "ApiImage",
+            "color_info": {
+              "palette": [
+                {
+                  "percentage": 71.7,
+                  "rgb": {
+                    "blue": 221,
+                    "green": 231,
+                    "red": 237
+                  }
+                },
+                {
+                  "percentage": 11.08,
+                  "rgb": {
+                    "blue": 65,
+                    "green": 62,
+                    "red": 63
+                  }
+                },
+                {
+                  "percentage": 7.39,
+                  "rgb": {
+                    "blue": 100,
+                    "green": 56,
+                    "red": 38
+                  }
+                },
+                {
+                  "percentage": 1.94,
+                  "rgb": {
+                    "blue": 208,
+                    "green": 165,
+                    "red": 135
+                  }
+                },
+                {
+                  "percentage": 0.68,
+                  "rgb": {
+                    "blue": 174,
+                    "green": 207,
+                    "red": 222
+                  }
+                }
+              ]
+            },
+            "original_img_height": 1530,
+            "original_img_url": "https://pbs.twimg.com/media/HTMWoaxaAAA-fug.jpg",
+            "original_img_width": 1440
+          },
+          "media_key": "3_2104050334549278720"
+        },
+        {
+          "id": "QXBpTWVkaWE6DAAFCgABHTMWh1WboAAKAAIAAAAAGugzLQAA",
+          "media_id": "2104050221424812032",
+          "media_info": {
+            "__typename": "ApiImage",
+            "color_info": {
+              "palette": [
+                {
+                  "percentage": 97.22,
+                  "rgb": {
+                    "blue": 223,
+                    "green": 238,
+                    "red": 241
+                  }
+                },
+                {
+                  "percentage": 0.62,
+                  "rgb": {
+                    "blue": 67,
+                    "green": 63,
+                    "red": 65
+                  }
+                },
+                {
+                  "percentage": 0.48,
+                  "rgb": {
+                    "blue": 165,
+                    "green": 94,
+                    "red": 241
+                  }
+                },
+                {
+                  "percentage": 0.45,
+                  "rgb": {
+                    "blue": 186,
+                    "green": 144,
+                    "red": 240
+                  }
+                },
+                {
+                  "percentage": 0.24,
+                  "rgb": {
+                    "blue": 141,
+                    "green": 186,
+                    "red": 125
+                  }
+                }
+              ]
+            },
+            "original_img_height": 1040,
+            "original_img_url": "https://pbs.twimg.com/media/HTMWh1WboAAhhd6.jpg",
+            "original_img_width": 1600
+          },
+          "media_key": "3_2104050221424812032"
+        },
+        {
+          "id": "QXBpTWVkaWE6DAAFCgABHTMWaqrbYAAKAAIAAAAAGugzLQAA",
+          "media_id": "2104050098301001728",
+          "media_info": {
+            "__typename": "ApiImage",
+            "color_info": {
+              "palette": [
+                {
+                  "percentage": 56.91,
+                  "rgb": {
+                    "blue": 225,
+                    "green": 237,
+                    "red": 241
+                  }
+                },
+                {
+                  "percentage": 41.68,
+                  "rgb": {
+                    "blue": 30,
+                    "green": 21,
+                    "red": 12
+                  }
+                },
+                {
+                  "percentage": 0.83,
+                  "rgb": {
+                    "blue": 62,
+                    "green": 85,
+                    "red": 177
+                  }
+                },
+                {
+                  "percentage": 0.2,
+                  "rgb": {
+                    "blue": 115,
+                    "green": 124,
+                    "red": 129
+                  }
+                },
+                {
+                  "percentage": 0.19,
+                  "rgb": {
+                    "blue": 135,
+                    "green": 156,
+                    "red": 222
+                  }
+                }
+              ]
+            },
+            "original_img_height": 1740,
+            "original_img_url": "https://pbs.twimg.com/media/HTMWaqrbYAAiEPU.jpg",
+            "original_img_width": 1600
+          },
+          "media_key": "3_2104050098301001728"
+        },
+        {
+          "id": "QXBpTWVkaWE6DAAFCgABHTMXlnXagAAKAAIAAAAAGugzLQAA",
+          "media_id": "2104051385901940736",
+          "media_info": {
+            "__typename": "ApiImage",
+            "color_info": {
+              "palette": [
+                {
+                  "percentage": 87.44,
+                  "rgb": {
+                    "blue": 233,
+                    "green": 242,
+                    "red": 246
+                  }
+                },
+                {
+                  "percentage": 5.66,
+                  "rgb": {
+                    "blue": 54,
+                    "green": 58,
+                    "red": 63
+                  }
+                },
+                {
+                  "percentage": 2.48,
+                  "rgb": {
+                    "blue": 166,
+                    "green": 212,
+                    "red": 158
+                  }
+                },
+                {
+                  "percentage": 0.97,
+                  "rgb": {
+                    "blue": 221,
+                    "green": 203,
+                    "red": 179
+                  }
+                },
+                {
+                  "percentage": 0.76,
+                  "rgb": {
+                    "blue": 180,
+                    "green": 226,
+                    "red": 244
+                  }
+                }
+              ]
+            },
+            "original_img_height": 1800,
+            "original_img_url": "https://pbs.twimg.com/media/HTMXlnXagAA5NnG.jpg",
+            "original_img_width": 2400
+          },
+          "media_key": "3_2104051385901940736"
+        },
+        {
+          "id": "QXBpTWVkaWE6DAAFCgABHTMWKN7bQAAKAAIAAAAAGugzLQAA",
+          "media_id": "2104049815705567232",
+          "media_info": {
+            "__typename": "ApiImage",
+            "color_info": {
+              "palette": [
+                {
+                  "percentage": 94.06,
+                  "rgb": {
+                    "blue": 233,
+                    "green": 242,
+                    "red": 245
+                  }
+                },
+                {
+                  "percentage": 2.96,
+                  "rgb": {
+                    "blue": 120,
+                    "green": 129,
+                    "red": 137
+                  }
+                },
+                {
+                  "percentage": 0.93,
+                  "rgb": {
+                    "blue": 201,
+                    "green": 130,
+                    "red": 53
+                  }
+                },
+                {
+                  "percentage": 0.4,
+                  "rgb": {
+                    "blue": 150,
+                    "green": 190,
+                    "red": 137
+                  }
+                },
+                {
+                  "percentage": 0.35,
+                  "rgb": {
+                    "blue": 36,
+                    "green": 165,
+                    "red": 225
+                  }
+                }
+              ]
+            },
+            "original_img_height": 2026,
+            "original_img_url": "https://pbs.twimg.com/media/HTMWKN7bQAAt_Yh.jpg",
+            "original_img_width": 1620
+          },
+          "media_key": "3_2104049815705567232"
+        },
+        {
+          "id": "QXBpTWVkaWE6DAAFCgABHTMXYE3bkAAKAAIAAAAAGugzLQAA",
+          "media_id": "2104051153302687744",
+          "media_info": {
+            "__typename": "ApiImage",
+            "color_info": {
+              "palette": [
+                {
+                  "percentage": 92.03,
+                  "rgb": {
+                    "blue": 226,
+                    "green": 240,
+                    "red": 244
+                  }
+                },
+                {
+                  "percentage": 3.62,
+                  "rgb": {
+                    "blue": 93,
+                    "green": 96,
+                    "red": 232
+                  }
+                },
+                {
+                  "percentage": 1.88,
+                  "rgb": {
+                    "blue": 143,
+                    "green": 149,
+                    "red": 215
+                  }
+                },
+                {
+                  "percentage": 1.19,
+                  "rgb": {
+                    "blue": 116,
+                    "green": 124,
+                    "red": 134
+                  }
+                },
+                {
+                  "percentage": 0.31,
+                  "rgb": {
+                    "blue": 93,
+                    "green": 96,
+                    "red": 254
+                  }
+                }
+              ]
+            },
+            "original_img_height": 1560,
+            "original_img_url": "https://pbs.twimg.com/media/HTMXYE3bkAAtvfm.jpg",
+            "original_img_width": 1600
+          },
+          "media_key": "3_2104051153302687744"
+        },
+        {
+          "id": "QXBpTWVkaWE6DAAFCgABHTMndM3a4AAKAAIAAAAAGugzLQAA",
+          "media_id": "2104068833535516672",
+          "media_info": {
+            "__typename": "ApiImage",
+            "color_info": {
+              "palette": [
+                {
+                  "percentage": 85.58,
+                  "rgb": {
+                    "blue": 230,
+                    "green": 242,
+                    "red": 243
+                  }
+                },
+                {
+                  "percentage": 9.17,
+                  "rgb": {
+                    "blue": 43,
+                    "green": 31,
+                    "red": 26
+                  }
+                },
+                {
+                  "percentage": 0.79,
+                  "rgb": {
+                    "blue": 183,
+                    "green": 201,
+                    "red": 239
+                  }
+                },
+                {
+                  "percentage": 0.74,
+                  "rgb": {
+                    "blue": 96,
+                    "green": 54,
+                    "red": 37
+                  }
+                },
+                {
+                  "percentage": 0.52,
+                  "rgb": {
+                    "blue": 59,
+                    "green": 58,
+                    "red": 75
+                  }
+                }
+              ]
+            },
+            "original_img_height": 1844,
+            "original_img_url": "https://pbs.twimg.com/media/HTMndM3a4AAkP7q.jpg",
+            "original_img_width": 2062
+          },
+          "media_key": "3_2104068833535516672"
+        },
+        {
+          "id": "QXBpTWVkaWE6DAAFCgABHTMVeyKaAAEKAAIAAAAAGugzLQAA",
+          "media_id": "2104049069517832193",
+          "media_info": {
+            "__typename": "ApiImage",
+            "color_info": {
+              "palette": [
+                {
+                  "percentage": 98.89,
+                  "rgb": {
+                    "blue": 220,
+                    "green": 231,
+                    "red": 235
+                  }
+                },
+                {
+                  "percentage": 0.78,
+                  "rgb": {
+                    "blue": 137,
+                    "green": 140,
+                    "red": 224
+                  }
+                },
+                {
+                  "percentage": 0.2,
+                  "rgb": {
+                    "blue": 104,
+                    "green": 107,
+                    "red": 236
+                  }
+                }
+              ]
+            },
+            "original_img_height": 1080,
+            "original_img_url": "https://pbs.twimg.com/media/HTMVeyKaAAEdudm.jpg",
+            "original_img_width": 1920
+          },
+          "media_key": "3_2104049069517832193"
+        },
+        {
+          "id": "QXBpTWVkaWE6DAAFCgABHTMXTPjaMAAKAAIAAAAAGugzLQAA",
+          "media_id": "2104051070272155648",
+          "media_info": {
+            "__typename": "ApiImage",
+            "color_info": {
+              "palette": [
+                {
+                  "percentage": 89.42,
+                  "rgb": {
+                    "blue": 229,
+                    "green": 240,
+                    "red": 243
+                  }
+                },
+                {
+                  "percentage": 3.46,
+                  "rgb": {
+                    "blue": 64,
+                    "green": 137,
+                    "red": 237
+                  }
+                },
+                {
+                  "percentage": 1.92,
+                  "rgb": {
+                    "blue": 135,
+                    "green": 178,
+                    "red": 226
+                  }
+                },
+                {
+                  "percentage": 0.77,
+                  "rgb": {
+                    "blue": 168,
+                    "green": 166,
+                    "red": 228
+                  }
+                },
+                {
+                  "percentage": 0.57,
+                  "rgb": {
+                    "blue": 104,
+                    "green": 93,
+                    "red": 222
+                  }
+                }
+              ]
+            },
+            "original_img_height": 1560,
+            "original_img_url": "https://pbs.twimg.com/media/HTMXTPjaMAA7ZDo.jpg",
+            "original_img_width": 1600
+          },
+          "media_key": "3_2104051070272155648"
+        },
+        {
+          "id": "QXBpTWVkaWE6DAAFCgABHTMUJBPboAAKAAIAAAAAGugzLQAA",
+          "media_id": "2104047596096692224",
+          "media_info": {
+            "__typename": "ApiImage",
+            "color_info": {
+              "palette": [
+                {
+                  "percentage": 90.2,
+                  "rgb": {
+                    "blue": 225,
+                    "green": 237,
+                    "red": 241
+                  }
+                },
+                {
+                  "percentage": 2.54,
+                  "rgb": {
+                    "blue": 43,
+                    "green": 35,
+                    "red": 38
+                  }
+                },
+                {
+                  "percentage": 1.62,
+                  "rgb": {
+                    "blue": 163,
+                    "green": 192,
+                    "red": 205
+                  }
+                },
+                {
+                  "percentage": 0.98,
+                  "rgb": {
+                    "blue": 85,
+                    "green": 94,
+                    "red": 218
+                  }
+                },
+                {
+                  "percentage": 0.88,
+                  "rgb": {
+                    "blue": 46,
+                    "green": 152,
+                    "red": 209
+                  }
+                }
+              ]
+            },
+            "original_img_height": 1080,
+            "original_img_url": "https://pbs.twimg.com/media/HTMUJBPboAAhmRw.jpg",
+            "original_img_width": 1920
+          },
+          "media_key": "3_2104047596096692224"
+        },
+        {
+          "id": "QXBpTWVkaWE6DAAFCgABHTMXcmkbEAAKAAIAAAAAGugzLQAA",
+          "media_id": "2104051231069245440",
+          "media_info": {
+            "__typename": "ApiImage",
+            "color_info": {
+              "palette": [
+                {
+                  "percentage": 98.77,
+                  "rgb": {
+                    "blue": 230,
+                    "green": 240,
+                    "red": 242
+                  }
+                },
+                {
+                  "percentage": 0.47,
+                  "rgb": {
+                    "blue": 120,
+                    "green": 130,
+                    "red": 134
+                  }
+                },
+                {
+                  "percentage": 0.34,
+                  "rgb": {
+                    "blue": 145,
+                    "green": 188,
+                    "red": 128
+                  }
+                },
+                {
+                  "percentage": 0.27,
+                  "rgb": {
+                    "blue": 91,
+                    "green": 118,
+                    "red": 210
+                  }
+                },
+                {
+                  "percentage": 0.1,
+                  "rgb": {
+                    "blue": 157,
+                    "green": 174,
+                    "red": 228
+                  }
+                }
+              ]
+            },
+            "original_img_height": 1420,
+            "original_img_url": "https://pbs.twimg.com/media/HTMXcmkbEAA5v6T.jpg",
+            "original_img_width": 1600
+          },
+          "media_key": "3_2104051231069245440"
+        },
+        {
+          "id": "QXBpTWVkaWE6DAAFCgABHTMc3spaQAAKAAIAAAAAGugzLQAA",
+          "media_id": "2104057194115383296",
+          "media_info": {
+            "__typename": "ApiImage",
+            "color_info": {
+              "palette": [
+                {
+                  "percentage": 99.75,
+                  "rgb": {
+                    "blue": 228,
+                    "green": 239,
+                    "red": 243
+                  }
+                },
+                {
+                  "percentage": 0.24,
+                  "rgb": {
+                    "blue": 119,
+                    "green": 125,
+                    "red": 130
+                  }
+                }
+              ]
+            },
+            "original_img_height": 1766,
+            "original_img_url": "https://pbs.twimg.com/media/HTMc3spaQAAS9db.jpg",
+            "original_img_width": 2626
+          },
+          "media_key": "3_2104057194115383296"
+        }
+      ],
+      "metadata": {
+        "first_published_at_secs": 1790485852
+      },
+      "plain_text": "关注我的大部分朋友都是程序员，这个 skill 就是给你们，更准确是给我们写的。\n维护代码仓库的人，手里都有一部现成的 Git 纪录片：第一次提交，第一个版本，最忙的那一天，半夜的回滚，改名，搬家，几万颗星。可这些都躺在 git log 里，新来的人只看 README。\ngit-story-film 是一个给 raven 做宣传视频时产出的创意 skill。你给它一个 GitHub 链接，Opus 5.5 就当导演：从几千次提交里挑出能讲故事的事实，给项目找一个主角，定一种画风，最后交给你一部两分钟左右的手绘动画短片。\n你最后拿到的是：\n一个 4K、60 帧的 MP4，配乐由代码实时合成；\n一键生成，一镜到底，但也保留了源码可修改的空间，绝对不是那种快闪式的 AI Slop\n主角第一人称的字幕，讲给第一次听说这个项目的人；\n画面上真实的日期、commit hash 和提交次数，一次提交就是画面上的一颗珠子、一盏灯或一片叶子；\n一个能在浏览器里拖着看的 Studio 页面，以及整部片的源代码。\n这个 skill 不仅能帮你一键生成，也能让你扮演一个真正的导演，帮你提前订好提纲、分镜、脚本，每走一步都停下来给你看一样东西，你点头了才往下走。\n \n先看成片：四个仓库，四种长法\n同一套方法，四部片子长得完全不一样。导演先读懂产品，再决定你的项目“成长”在画面上是什么样子。\nRaven：一路往右飞\n \nRaven 因为是一只鸟，所以我设计了从纸上的一颗蛋里破壳，沿着一根时间枝只往右走，全片一镜到底。每次提交是枝上一颗亮晶晶的珠子；走过重要的提交，画风就换一次：铅笔、墨、Riso 印刷、丝网、蓝图。128 秒，中英双语。\n视频见\n \nCC Switch：一面越长越大的总机墙\n \nCC Switch  的设计是 一面老式电话总机墙从左往右长：一次提交亮一盏灯，一个版本钉一块铜铭牌。主角小火花从官方图标的星芒里长出来，每接入一个 AI 编程工具就多一道光。正式版发布那天天一亮，整面墙从纸上立成 3D。2 分 7 秒。\n \nCherry Studio：一棵从地下往上长的树\n \n\nCherry Studio 也是我的 AI 启蒙老师之一, 设计的思路是樱桃树，镜头只往上走。一次提交一片叶，一个新功能一朵花，一个正式版一颗樱桃，每来一位新贡献者就飞来一只蜜蜂。数据底座重写了 373 天，画面上就是在地下“换根”。2 分 13 秒。 \n \nLobeHub：一个在原地长大的脑洞\n \nlobehub 我最喜欢的是它的脑洞设计(logo意义的脑洞), 主角 Lobe 待在原地，头顶的“脑洞”越长越大，镜头只往后退。一次提交是一粒飞进脑洞的火星，一次回滚是一个泡泡破掉，一个 GitHub 星标就是一颗星，一共 82,834 颗。2 分 5 秒。\n \n七步视频法：以 Raven 为例\n我把视频拆成了七部, 这七步不是凭空设计的, 是因为曹植七步成诗(并不)。2026年9月24日做 Raven 那天，还没有这套流程：先出整片，边看边改。第一次 4K 渲染在上午 11 点，带字的分镜到下午 3 点才有。一天里开了 13 次 4K 渲染，5 次半路叫停或崩溃。做完之后，我系统整理了一下, 整理成了七部 SOP，每一步都停下来给你看。\n \n第 1 步 · 提纲：先定讲什么故事\n首先打开 claude code 或者 raven,  把你的代码地址丢进去, 并且使用这个skill, 这里需要注意的是, 如果你使用了 claude code, 务必需要使用 /effort max\n「使用 git-story-film skill,  读取 xxxxx , 帮我设计一份影片」\n你会看到一份 OUTLINE.md：一句话讲完整部片，用什么形式讲、为什么，主角是谁、字幕用谁的口吻，起承转合四句话，观众看完该记住哪几件事，还有片子依据的真实数字。\nRaven 的第一版是夜空里一条累计提交的折线，数据都对，但没有故事。我要的是“一只黑色渡鸦的视角”，还要 “卡通形象，最好大眼睛”、“从破壳到都是遵循一个从左往右的前进路线”。于是提纲里写下了全片的铁律：一镜到底，只往右走。\n \n第 2 步 · 主角：表情和动作\n你会看到一张角色设定表：6 到 12 个表情，走、跳、飞这些动作的关键姿势，每种画风下的样子，还有缩小以后还认不认得出来。\nRaven 的设定表里，铅笔画的雏鸟有好奇、亮晶晶、怀疑、晕；上了墨的成鸟有吃惊、得意、专注、张开翅膀。主角在这一步定下来，后面每个镜头都用同一套代码画它。\n \n第 3 步 · 全片提纲：每一拍对上一个真实提交\n你会看到约两分钟的完整提纲：分几幕、每幕什么画风、为什么；每一拍的时间、画面、功能和对应的提交；结尾；还有要再核对的说法。\nRaven 视频在这一步改得最多。我会补充很多细节上的调整：“得介绍功能点啊，不然别人也不知道 raven 能给别人带来什么。” 于是右上角的日期换成了功能卡，片长从 90 秒改成 2 分钟，后半程用一个具体的委托串起四个内置 Agent：“帮我调研三家竞品，写个脚本抓数据，夜里盯着，最后做成一份 PPT。” 顺手核了事实：Raven 的预设里没有 ChatGPT，有的是 Codex；自进化的分数只标成“示意”。\n \n第 4 步 · 分镜：先看前 30 秒\n接着预览分镜：前 30 秒每个镜头一张关键帧，关键帧用片子自己的角色和场景代码画出来，旁边写着时间、字幕和对应的提交。这 30 秒定下口吻、节奏和画风，后面照着走。\n \n第 5 步 · 详细编写：整部片动起来\n写完剩下的镜头，把整部片做成动画，配乐也在这一步用代码合成。我很惊讶的是 opus 5.5 在音效和简单的配乐上做的这么好, 并且遇到新表情、新动作，先补进设定表给你看。做完先自己检查：把全片抽成一张帧网格，一眼看完节奏和构图。\n这里我还用到了“两个时钟”策略, 默认 claude 会用 24帧来写, 但实际上在画面移动速度稍快的场景下, 很多细节会看不清楚, 于是我改了引擎的代码, 镜头、背景和文字按 60 帧走，角色的姿势照样一秒换 12 到 24 张，顺滑和手绘感分开处理。\n \n第 6 步 · Studio：在浏览器里看完整部片\n在正式渲染钱, 打开片子开始预览。上面是画面；下面一条拖动条，每一幕一段色带，每个镜头一个编号格子，拖到哪停到哪，带着配乐从任意位置播放；再往下是每个镜头的分镜图，从当前代码实时画出来。这一步不走 4k 60fps 渲染。\n如果你觉得 AI 这块需要注入自己的 taste, 需要针对细节作调整, 那么你一定很爱这个 skill 给你保留的灵活的空间. \n下图是 LobeHub 那部片的 Studio。\n \n第 7 步 · 成片：4K60\n当你确。可以渲染之后, 直接告诉 Claude Code / Raven 可以渲染了。Agent 会打开浏览器一边画，一边把帧直接送进 ffmpeg，4 路并行，不在硬盘上堆上百 GB 的图。交付时导演会报告时长、分辨率和文件大小，完整解码一遍，再抽几帧亲眼看。片尾卡默认也写成第 0 帧，播放器和信息流会拿它当封面，这个细节也是 Raven 的用户提出来的。\n背后的设计思想\n七个步骤只是表面。真正让片子“像这个仓库”的，是下面八条规矩。\n1. 是导演，不是生成器。 Claude 自己拿主意的有三件事：用哪些数据、讲什么故事、用什么画风。你只需要看、点头、提意见。每一步结束，你手里都有一样看得见的东西。\n2. 纸上改最便宜，4K 上改最贵。 改一句提纲几秒钟，重渲一部 4K 要几分钟。所以 Studio 点头之前不出 MP4。就算你说“一直做完”，导演也会停在 Studio 等你看过再渲染。\n3. 一一对应：一次提交就是一格。 画面上的东西和 git 里的事一一对应：一次提交一颗珠子，一个版本一块铭牌，一次回滚一次挫折。每天挂几颗，就是那天真实的提交数。一个符号只代表一种数据：LobeHub 里星星就是星标，提交就只能画成火星。这样拍出来的才是这个仓库的故事，而不是换了名字的模板。\n \nRaven 最忙的一天：137 次提交，画面上就落下 137 颗珠子。\n4. 一部片只守一种镜头语法。 旅程只往右走，从不切镜；生长待在原地，镜头往后退；Cherry Studio 的树只往上长，镜头也只往上。守住这一条，片子才是一个连贯的故事，而不是一串幻灯片。约束还会逼出好点子：镜头下不去，地下的重写就靠一面“地下放大镜”和一条往上追的新根线来讲，追上树梢那一刻就是全片最高点。\n5. 主角从官方图里长出来，最后变回 logo。 CC Switch 的小火花先量了官方图标，发现是 13 道光而不是 10 道，剧本跟着改。Cherry Studio 的小樱桃，叶和梗张成 logo 上那个 ✓。招牌表情要省着用：Lobe 吐舌头，只留给它变回 logo 的那一刻。\n6. 只说真话。 画面上的哈希、日期、次数都来自仓库，估算的数字标明“估算”。LobeHub 的星标日期是按公开网站估的，脚本和原始数据都留在片子文件夹里。产品没有的能力不写：LobeHub 没有 Slack 集成，片子里就不出现 Slack。\n7. 两个时钟。 位置每一帧都重新算，60 帧一帧不落；角色的姿势每秒只换 12 到 24 张，像手绘动画那样一张画停一两拍。动作顺，又有手绘味，60 帧下也不抖。\n8. 你的每一句反馈，都会变成下一部的规则。 一次性的要求会写进长期记忆：片尾三行署名、每个日期都带年份、按项目真实的成长来讲、主角从官方图重画、招牌表情只在 logo 时刻用、星标日期按公开网站估。下一部片子的第一版就照着做了。\n翻车和惊喜\n比如我在制作视频的过程中遇到的 opus 5.5 把舌头绘制到嘴巴外面。\n \n吐舌头是官方图标上的招牌表情。第一版把它当成了默认嘴型，设定表、分镜、成片里到处都在吐舌头。改完之后，Lobe 平时闭嘴微笑，只在片尾变回官方图标的那一刻吐一次。招牌要省着用，用一次才有分量。\n有个插曲：本来我想给 cindy 也做一个版本的，结果 opus 5.5 画的我都不敢发出来了。担心被 cindy 的开发拉黑哈哈哈哈。\n \n比如 cherry studio 上来就用了猫的形象，我做了一定调整 “我觉得主角应该是一只卡通版本的樱桃”\n \n提纲第一版的主角是一只园丁猫，致敬作者的网名“亢奋猫”。我改成樱桃， 十几分钟后，小樱桃的三页设定表就画好了：叶短梗长，张成 logo 上那个 ✓；梗能勾住树枝，所以它能跟着树一路往上。片尾三颗樱桃挂在 ✓ 下面，正好是官方图标。角色之争放在第 2 步用画来定，是最便宜的时候。\n还有一些细枝末节的修改， 比如跨年的项目最好还是得加上年份，得益于提前做了预览 studio， 改完立马预览到了。\n \n甚至还有一些修改，是我临时想出来的，比如做 CC Switch：“这块是不是可以考虑有一个 2d 转 3d 的转场”，没想到整个转场做的意外的丝滑，要知道以前我做视频的时候真的就很想做这种效果，但是成本和时间都来不及。 \n \n我把转场挂在一个真实的日子上：v3.9.0 正式发布那天的天亮。字幕是“天一亮，我从纸上走了出来”，形式的变化本身成了剧情。这段 3D 是用 2D 引擎模拟透视画出来的，没有用 WebGL。\n同一轮反馈里，用户还要“利好用户的视角”的文案。片子的签名从“拨一下，就换好”改成“你专心写代码，线我来接”；故障转移那张卡从“熔断 + 健康检查”改成“一家挂了，自动换下一家”。功能卡写你能得到什么，不写功能名。\n怎么开始\n三步就能开拍：\n安装：把下面的链接复制过去，粘贴到你的 claude code 中 帮我安装 github.com/EverMind-AI/Raven/tree/main/skills/git-story-film \n开口：/git-story-film 帮我给做一个视频，先构思一下\n跟着七步走：每一步看一样东西，点头或者提意见。你不用会画画，也不用会剪辑。\n需要的环境：Node 22 以上、Google Chrome、ffmpeg、Python 3.8 以上，如果你遇到任何环境问题都不是大问题，让 claude code 帮你解决。\n要多久：最近三部片子，从给出链接到拿到 4K 成片都在三小时以内。CC Switch 约 2 小时，只渲染了一次；Cherry Studio 约 2 小时 45 分，多渲染了两次；LobeHub 不到 3 小时。\n致谢：绘图和动画引擎改编自 Alexey Fateev 的 hand-drawn-canvas-animation（MIT 许可）。\n第一次提交那天，谁也不知道它会长成什么样。现在，把你的代码历史讲给第一次听说它的人。\nskill 地址见 https://github.com/EverMind-AI/Raven/blob/main/skills/git-story-film/README.zh-CN.md \n如有帮助，请点赞转发！感激不尽！\n \n",
+      "preview_text": "关注我的大部分朋友都是程序员，这个 skill 就是给你们，更准确是给我们写的。\n维护代码仓库的人，手里都有一部现成的 Git",
+      "rest_id": "2104045431676170240",
+      "title": "把你的代码历史拍个属于你的短片 - git-story-film skill"
+    }
+  }
+}
diff --git a/test/unit/article-markdown.spec.ts b/test/unit/article-markdown.spec.ts
new file mode 100644
index 00000000..99ebde31
--- /dev/null
+++ b/test/unit/article-markdown.spec.ts
@@ -0,0 +1,74 @@
+import type { TweetArticle } from '~/types'
+import { describe, expect, it } from 'vitest'
+import { articleBlocksToMarkdown, articleToMarkdown, articleToText } from '~/lib/article/markdown'
+
+const article: TweetArticle = {
+  id: '2103576349499855160',
+  url: 'https://x.com/i/article/2103576349499855160',
+  title: '长文标题',
+  previewText: '摘要',
+  format: 'rich',
+  blocks: [
+    { key: 'h', type: 'heading', level: 1, runs: [{ type: 'text', text: '小标题' }] },
+    {
+      key: 'p',
+      type: 'paragraph',
+      runs: [
+        { type: 'text', text: '见 ' },
+        { type: 'link', text: '链接', url: 'https://example.com' },
+        { type: 'text', text: ' 与 ' },
+        { type: 'mention', text: '@foo', href: 'https://x.com/foo' },
+      ],
+    },
+    { key: 'l1', type: 'list-item', ordered: false, runs: [{ type: 'text', text: '项目一' }] },
+    { key: 'l2', type: 'list-item', ordered: false, runs: [{ type: 'text', text: '项目二' }] },
+    { key: 'md', type: 'markdown', text: '| a | b |\n| - | - |\n| 1 | 2 |' },
+    { key: 'd', type: 'divider' },
+    { key: 'i', type: 'image', media: { id: 'm', url: 'https://pbs.twimg.com/media/x.jpg' }, caption: '图注' },
+    { key: 'e', type: 'embed-tweet', tweetId: '2104058634452005231' },
+  ],
+}
+
+describe('article export helpers', () => {
+  it('renders runs, headings, lists, markdown and images as markdown', () => {
+    const markdown = articleBlocksToMarkdown(article.blocks!)
+
+    expect(markdown).toContain('## 小标题')
+    expect(markdown).toContain('[链接](https://example.com)')
+    expect(markdown).toContain('[@foo](https://x.com/foo)')
+    expect(markdown).toContain('- 项目一\n- 项目二')
+    expect(markdown).toContain('| a | b |')
+    expect(markdown).toContain('---')
+    expect(markdown).toContain('![图注](https://pbs.twimg.com/media/x.jpg)')
+    expect(markdown).toContain('https://x.com/i/status/2104058634452005231')
+  })
+
+  it('prefixes the title and source link', () => {
+    const markdown = articleToMarkdown(article)
+
+    expect(markdown.startsWith('# 长文标题')).toBe(true)
+    expect(markdown).toContain('[原文链接](https://x.com/i/article/2103576349499855160)')
+  })
+
+  it('derives plain text for copy/share', () => {
+    const text = articleToText(article)
+
+    expect(text).toContain('长文标题')
+    // 纯文本按显示文案拼接（链接保留可见文字，不展开 href）
+    expect(text).toContain('见 链接 与 @foo')
+    expect(text).toContain('https://x.com/i/article/2103576349499855160')
+  })
+
+  it('falls back to plainText when there are no blocks', () => {
+    const plain: TweetArticle = {
+      id: '1',
+      url: 'https://x.com/i/article/1',
+      title: 'T',
+      plainText: '仅有纯文本',
+      format: 'plain',
+    }
+
+    expect(articleToText(plain)).toContain('仅有纯文本')
+    expect(articleToMarkdown(plain)).toContain('仅有纯文本')
+  })
+})
diff --git a/test/unit/article-parse.spec.ts b/test/unit/article-parse.spec.ts
new file mode 100644
index 00000000..cdae9a39
--- /dev/null
+++ b/test/unit/article-parse.spec.ts
@@ -0,0 +1,121 @@
+import type { RawArticleContentState, RawArticleMedia } from '~/lib/rettiwt-api/types/raw/tweet/Details'
+import type { ArticleBlock, ArticleRun } from '~/types'
+/**
+ * test/unit/article-parse.spec.ts
+ *
+ * AC-TWEET-014：Draft.js `content_state` → 块文档。
+ * 覆盖四种真实样例（fixtures 由 `scripts/tmp-dump-article.ts` 冻结）：
+ * - 纯段落 + hashtag span + 行内粗体（日文公告）
+ * - MARKDOWN（GFM 表格）+ LINK 实体 + mention span（Moats 一文）
+ * - header / unordered-list / MEDIA 图片（Claude effort 一文）
+ * - 只覆盖段首的 Bold 区间（style 边界切分回归；日文故障报告）
+ */
+import { describe, expect, it } from 'vitest'
+import { collectEmbeddedTweetIds, derivePlainText, parseContentState } from '~/lib/article/parse'
+import mvernalFixture from '../fixtures/articles/2099885132379500562.json'
+import boldRangeFixture from '../fixtures/articles/2103463356913098908.json'
+import trq212Fixture from '../fixtures/articles/2103576349499855160.json'
+import bandDreamFixture from '../fixtures/articles/2104058634452005231.json'
+import embedRichFixture from '../fixtures/articles/2104076282107723935.json'
+
+interface Fixture {
+  article_results: {
+    result: {
+      content_state?: RawArticleContentState
+      media_entities?: RawArticleMedia[]
+    }
+  }
+}
+
+function blocksOf(fixture: unknown): ArticleBlock[] {
+  const result = (fixture as Fixture).article_results.result
+  return parseContentState(result.content_state, result.media_entities)
+}
+
+function allRuns(blocks: ArticleBlock[]): ArticleRun[] {
+  return blocks.flatMap(block => ('runs' in block ? block.runs : []))
+}
+
+describe('AC-TWEET-014: parseContentState', () => {
+  it('AC-TWEET-014: returns [] for missing/empty content_state', () => {
+    expect(parseContentState(undefined)).toEqual([])
+    expect(parseContentState({ blocks: [] })).toEqual([])
+  })
+
+  it('AC-TWEET-014: maps plain paragraphs, hashtag spans and inline styles', () => {
+    const blocks = blocksOf(bandDreamFixture)
+
+    expect(blocks).toHaveLength(6)
+    expect(blocks.every(block => block.type === 'paragraph')).toBe(true)
+
+    const runs = allRuns(blocks)
+    expect(runs.some(run => run.type === 'hashtag' && run.href.includes('/hashtag/'))).toBe(true)
+    expect(runs.some(run => run.styles?.includes('bold'))).toBe(true)
+  })
+
+  it('AC-TWEET-014: applies Bold only to the styled range, not the whole block', () => {
+    // 回归：`{offset:0,length:15,style:Bold}` 曾把整段渲染成粗体——样式边界必须是切分点
+    const blocks = blocksOf(boldRangeFixture)
+    const block = blocks.find(b => b.key === 'b0tca')
+
+    expect(block?.type).toBe('paragraph')
+    if (!block || block.type !== 'paragraph')
+      throw new Error('expected paragraph block b0tca')
+
+    const boldRun = block.runs.find(run => run.styles?.includes('bold'))
+    expect(boldRun?.text.trim()).toBe('1.不具合の発生と原因の特定')
+
+    const rest = block.runs.filter(run => !run.styles?.includes('bold')).map(run => run.text).join('')
+    expect(rest).toContain('リリース以降')
+    expect(rest).not.toContain('1.不具合の発生と原因の特定')
+  })
+
+  it('AC-TWEET-014: maps LINK entities and mention spans to runs', () => {
+    const blocks = blocksOf(mvernalFixture)
+    const runs = allRuns(blocks)
+
+    expect(runs.some(run => run.type === 'link' && run.url === 'https://stratechery.com/')).toBe(true)
+    expect(runs.some(run => run.type === 'mention' && run.href === 'https://x.com/lennysan')).toBe(true)
+  })
+
+  it('AC-TWEET-014: turns MARKDOWN entities into markdown blocks (GFM tables)', () => {
+    const blocks = blocksOf(mvernalFixture)
+    const markdown = blocks.find(block => block.type === 'markdown')
+
+    expect(markdown).toBeDefined()
+    expect(markdown!.type === 'markdown' && markdown!.text).toContain('| The New York Times |')
+
+    const plain = derivePlainText(blocks)
+    expect(plain).toContain('| Newspaper | 2002 Print Circulation |')
+  })
+
+  it('AC-TWEET-014: maps headings, list items and MEDIA images correctly', () => {
+    const blocks = blocksOf(trq212Fixture)
+
+    expect(blocks.some(block => block.type === 'heading')).toBe(true)
+    expect(blocks.some(block => block.type === 'list-item' && !block.ordered)).toBe(true)
+
+    const images = blocks.filter(block => block.type === 'image')
+    expect(images.length).toBeGreaterThan(0)
+    expect(images[0]!.type === 'image' && images[0]!.media.url).toContain('https://pbs.twimg.com/media/')
+  })
+
+  it('AC-TWEET-019: collects the article embed-tweet ids in order, de-duplicated', () => {
+    const blocks = blocksOf(embedRichFixture)
+
+    expect(collectEmbeddedTweetIds(blocks)).toEqual([
+      '2103032879496540640',
+      '2103768558429958335',
+      '2104037017873162442',
+      '2103868710561911209',
+    ])
+
+    const duplicated: ArticleBlock[] = [
+      { key: 'a', type: 'embed-tweet', tweetId: '111' },
+      { key: 'b', type: 'paragraph', runs: [{ type: 'text', text: 'x' }] },
+      { key: 'c', type: 'embed-tweet', tweetId: '222' },
+      { key: 'd', type: 'embed-tweet', tweetId: '111' },
+    ]
+    expect(collectEmbeddedTweetIds(duplicated)).toEqual(['111', '222'])
+  })
+})
diff --git a/test/unit/article-translate.spec.ts b/test/unit/article-translate.spec.ts
new file mode 100644
index 00000000..86cda28e
--- /dev/null
+++ b/test/unit/article-translate.spec.ts
@@ -0,0 +1,56 @@
+import type { ArticleBlock, ArticleRun } from '~/types'
+/**
+ * test/unit/article-translate.spec.ts
+ *
+ * AC-TWEET-017：文章分块翻译的**离线契约**（不触网、不调 LLM）。
+ * 覆盖可译块序列化 / 块内占位符按序编号 / 已是中文的块跳过 / 译文写库 intent 校验。
+ * LLM 调用本身（分批 + 占位符校验重试）由 `autoTranslateArticle` 运行时承担，
+ * 本用例只锁「喂给模型的输入形态」与「落库契约」这两个易回归的接缝。
+ */
+import { describe, expect, it } from 'vitest'
+import { looksLikeChinese, serializeArticleBlock } from '~/lib/article/translate'
+import { tweetSchema } from '~/lib/validations/tweet'
+
+const paragraphWithAnchors: Extract<ArticleBlock, { runs: ArticleRun[] }> = {
+  key: 'b1',
+  type: 'paragraph',
+  runs: [
+    { type: 'text', text: 'See ' },
+    { type: 'link', text: 'this', url: 'https://example.com/post' },
+    { type: 'text', text: ' and ' },
+    { type: 'mention', text: '@foo', href: 'https://x.com/foo' },
+  ],
+}
+
+describe('AC-TWEET-017: article block translation contract', () => {
+  it('AC-TWEET-017: serializes inline anchors into ordered placeholders', () => {
+    const { text, placeholders } = serializeArticleBlock(paragraphWithAnchors)
+
+    expect(text).toBe('See <<__LINK_0__>> and <<__LINK_1__>>')
+    expect(placeholders).toEqual(['<<__LINK_0__>>', '<<__LINK_1__>>'])
+  })
+
+  it('AC-TWEET-017: skips text that is already Chinese (CJK, no kana)', () => {
+    expect(looksLikeChinese('这是一段中文')).toBe(true)
+    expect(looksLikeChinese('中文 mixed with English')).toBe(true)
+    expect(looksLikeChinese('これは日本語です')).toBe(false)
+    expect(looksLikeChinese('Just English')).toBe(false)
+  })
+
+  it('AC-TWEET-017: accepts the article-translation persistence intent', () => {
+    const valid = tweetSchema.safeParse({
+      intent: 'updateArticleTranslations',
+      data: [{
+        tweetId: '2103576349499855160',
+        translation: { title: '标题', blocks: { b1: '译文' } },
+      }],
+    })
+    expect(valid.success).toBe(true)
+
+    const invalid = tweetSchema.safeParse({
+      intent: 'updateArticleTranslations',
+      data: [{ tweetId: '1', translation: { blocks: { b1: 123 } } }],
+    })
+    expect(invalid.success).toBe(false)
+  })
+})
diff --git a/test/unit/article.spec.ts b/test/unit/article.spec.ts
new file mode 100644
index 00000000..d2834f10
--- /dev/null
+++ b/test/unit/article.spec.ts
@@ -0,0 +1,172 @@
+import type { Entity, RawTweet } from '~/types'
+/**
+ * test/unit/article.spec.ts
+ *
+ * 文章型推文（X Article）解析：正文只在 `article.article_results.result` 里，
+ * 且需请求侧开启 `withArticlePlainText` 才带全文（见 AC-TWEET-012 / 013）。
+ */
+import { describe, expect, it } from 'vitest'
+import { extractArticleIdFromUrl, isArticleUrl, mapArticle, resolveArticleId, resolveArticleLink } from '~/lib/react-tweet/utils/article'
+import { enrichTweet } from '~/lib/react-tweet/utils/parseTweet'
+import { TweetRequests } from '~/lib/rettiwt-api/requests/Tweet'
+
+function urlEntity(href: string): Entity {
+  return {
+    type: 'url',
+    index: 0,
+    text: 'x.com/i/article/…',
+    display_url: 'x.com/i/article/…',
+    url: href,
+    expanded_url: href,
+    href,
+  } as Entity
+}
+
+// ─── isArticleUrl / extractArticleIdFromUrl ───────────────────
+
+describe('AC-TWEET-012: article url detection', () => {
+  it('AC-TWEET-012: matches i/article and <user>/article links on x.com and twitter.com', () => {
+    expect(isArticleUrl('https://x.com/i/article/2104009234858024962')).toBe(true)
+    expect(isArticleUrl('https://twitter.com/i/article/2104009234858024962')).toBe(true)
+    expect(isArticleUrl('https://x.com/bang_dream_on/article/2104058634452005231')).toBe(true)
+    expect(extractArticleIdFromUrl('https://x.com/i/article/2104009234858024962')).toBe('2104009234858024962')
+  })
+
+  it('AC-TWEET-012: rejects non-article urls', () => {
+    expect(isArticleUrl('https://x.com/i/spaces/1djGXroNWDExZ')).toBe(false)
+    expect(isArticleUrl('https://example.com/i/article/1')).toBe(false)
+    expect(isArticleUrl(undefined)).toBe(false)
+  })
+
+  it('AC-TWEET-012: resolves the article id from entities as a fallback', () => {
+    expect(resolveArticleId([{ type: 'text', index: 0 }, urlEntity('https://x.com/i/article/42')])).toBe('42')
+    expect(resolveArticleId([])).toBeNull()
+  })
+
+  it('AC-TWEET-012: gives a minimal link-only entry when no article node is available', () => {
+    // search/list 等路径不取富文本，卡片入口靠实体链接兜底（标题留空，进页面再补）
+    expect(resolveArticleLink([urlEntity('https://x.com/i/article/42')])).toEqual({
+      id: '42',
+      url: 'https://x.com/i/article/42',
+      title: '',
+      format: 'plain',
+    })
+    expect(resolveArticleLink([{ type: 'text', index: 0 }])).toBeNull()
+  })
+})
+
+// ─── mapArticle ──────────────────────────────────────────────
+
+const rawWithArticle = {
+  article: {
+    article_results: {
+      result: {
+        rest_id: '2104009234858024962',
+        title: '  初のイベント延期のご案内  ',
+        preview_text: 'いつもご利用ありがとうございます。',
+        plain_text: 'いつもご利用ありがとうございます。\n\n全文です。',
+      },
+    },
+  },
+}
+
+describe('AC-TWEET-012: mapArticle', () => {
+  it('AC-TWEET-012: maps id/url/title/preview/plain text', () => {
+    expect(mapArticle(rawWithArticle as unknown as RawTweet)).toMatchObject({
+      id: '2104009234858024962',
+      url: 'https://x.com/i/article/2104009234858024962',
+      title: '初のイベント延期のご案内',
+      previewText: 'いつもご利用ありがとうございます。',
+      plainText: 'いつもご利用ありがとうございます。\n\n全文です。',
+      format: 'plain',
+    })
+  })
+
+  it('AC-TWEET-012: returns null without metadata (falls back to the plain link)', () => {
+    // 只有实体链接、没有 article 节点 → 不构造空卡片
+    expect(mapArticle({} as RawTweet, [urlEntity('https://x.com/i/article/42')])).toBeNull()
+    expect(mapArticle(null)).toBeNull()
+  })
+
+  it('AC-TWEET-012: drops redundant plainText when a rich block document exists', () => {
+    // 有 content_state 时 blocks 已覆盖全文，plain_text 是重复数据（长文可省数十 KB 缓存）
+    const rich = {
+      article: {
+        article_results: {
+          result: {
+            rest_id: '1',
+            title: 'T',
+            plain_text: '完整纯文本',
+            content_state: { blocks: [{ key: 'b1', text: 'hello', type: 'unstyled' }] },
+          },
+        },
+      },
+    }
+    const article = mapArticle(rich as unknown as RawTweet)
+
+    expect(article?.format).toBe('rich')
+    expect(article?.blocks).toHaveLength(1)
+    expect(article?.plainText).toBeUndefined()
+  })
+
+  it('AC-TWEET-012: enriches a tweet with the article body', () => {
+    const raw = {
+      __typename: 'Tweet',
+      rest_id: '2104058634452005231',
+      core: {
+        user_results: {
+          result: {
+            rest_id: '1990633723885465602',
+            is_blue_verified: true,
+            profile_image_shape: 'Square',
+            avatar: { image_url: 'https://pbs.twimg.com/a_normal.jpg' },
+            core: { name: 'バンドリ！アワーノーツ', screen_name: 'bang_dream_on' },
+            legacy: { verified: true },
+          },
+        },
+      },
+      legacy: {
+        lang: 'zxx',
+        full_text: 'https://t.co/EhcNsbMwRz',
+        created_at: 'Sun Sep 27 04:00:44 +0000 2026',
+        entities: {
+          hashtags: [],
+          user_mentions: [],
+          symbols: [],
+          urls: [{
+            url: 'https://t.co/EhcNsbMwRz',
+            expanded_url: 'https://x.com/i/article/2104009234858024962',
+            display_url: 'x.com/i/article/2104…',
+            indices: [0, 23],
+          }],
+          media: [],
+        },
+      },
+      ...rawWithArticle,
+    } as unknown as RawTweet
+
+    const tweet = enrichTweet(raw)
+    expect(tweet?.article).toMatchObject({
+      id: '2104009234858024962',
+      title: '初のイベント延期のご案内',
+      plainText: expect.stringContaining('全文です。'),
+    })
+  })
+})
+
+// ─── request field toggle ────────────────────────────────────
+
+describe('AC-TWEET-013: TweetResultByRestId requests article plain text', () => {
+  it('AC-TWEET-013: fieldToggles is a JSON string X understands', () => {
+    const config = TweetRequests.details('2104058634452005231')
+    const fieldToggles = (config.params as Record<string, unknown>).fieldToggles
+
+    // 对象会被 axios 序列化成 fieldToggles[withArticlePlainText]=true，X 会忽略；
+    // 必须与 variables/features 一样是 JSON 字符串。
+    expect(typeof fieldToggles).toBe('string')
+    expect(JSON.parse(fieldToggles as string)).toEqual({
+      withArticleRichContentState: true,
+      withArticlePlainText: true,
+    })
+  })
+})
diff --git a/test/unit/getLocalTweet.spec.ts b/test/unit/getLocalTweet.spec.ts
index 7a6ebb1b..46334c29 100644
--- a/test/unit/getLocalTweet.spec.ts
+++ b/test/unit/getLocalTweet.spec.ts
@@ -1,4 +1,4 @@
-import type { EnrichedTweet } from '~/types'
+import type { EnrichedTweet, Entity } from '~/types'
 import { beforeEach, describe, expect, it, vi } from 'vitest'
 
 /**
@@ -16,6 +16,7 @@ import { beforeEach, describe, expect, it, vi } from 'vitest'
 const getLocalCache = vi.fn()
 const setLocalCache = vi.fn()
 const resolveSpaceById = vi.fn()
+const getEnrichedTweet = vi.fn()
 
 vi.mock('~/lib/localCache', () => ({
   getLocalCache: (...args: unknown[]) => getLocalCache(...args),
@@ -23,7 +24,7 @@ vi.mock('~/lib/localCache', () => ({
 }))
 
 vi.mock('~/lib/react-tweet/utils/get-tweet', () => ({
-  getEnrichedTweet: vi.fn(),
+  getEnrichedTweet: (...args: unknown[]) => getEnrichedTweet(...args),
   resolveSpaceById: (...args: unknown[]) => resolveSpaceById(...args),
 }))
 
@@ -158,3 +159,63 @@ describe('AC-SPACE-011: backfills space for tweets cached before the field exist
     expect(resolveSpaceById).not.toHaveBeenCalled()
   })
 })
+
+/**
+ * AC-TWEET-015 —— 旧 flat 文章缓存升级为富文本块文档。
+ *
+ * `format` 判别是后加的：改动前落地的缓存里 `article` 只有 `plainText`，
+ * 而 `if (tweet.article) return` 会把它误当最新 → 块文档永不可见。故按 `format`
+ * 结构化判别并在读出口重抓一次。
+ */
+const articleUrlEntity: Entity = {
+  type: 'url',
+  index: 0,
+  text: 'x.com/i/article/2104…',
+  display_url: 'x.com/i/article/2104…',
+  url: 'https://t.co/EhcNsbMwRz',
+  expanded_url: 'https://x.com/i/article/2104009234858024962',
+  href: 'https://x.com/i/article/2104009234858024962',
+} as Entity
+
+const flatArticle = {
+  id: '2104009234858024962',
+  url: 'https://x.com/i/article/2104009234858024962',
+  title: '初のイベント延期のご案内',
+  plainText: 'body',
+  format: 'plain' as const,
+}
+
+describe('AC-TWEET-015: upgrades flat cached articles to the rich block document', () => {
+  it('AC-TWEET-015: re-fetches and persists the rich article for a flat cache entry', async () => {
+    getLocalCache.mockResolvedValue(cachedSpaceTweet({ id_str: '2104058634452005231', entities: [articleUrlEntity], article: flatArticle }))
+    getEnrichedTweet.mockResolvedValue(cachedSpaceTweet({
+      id_str: '2104058634452005231',
+      entities: [articleUrlEntity],
+      article: { ...flatArticle, format: 'rich', blocks: [{ key: 'a', type: 'paragraph', runs: [{ type: 'text', text: 'body' }] }] },
+    }))
+
+    const tweet = await getLocalTweet('2104058634452005231')
+
+    expect(getEnrichedTweet).toHaveBeenCalledWith('2104058634452005231')
+    expect(tweet?.article?.format).toBe('rich')
+    expect(tweet?.article?.blocks).toHaveLength(1)
+    expect(setLocalCache).toHaveBeenCalledWith(expect.objectContaining({
+      id: '2104058634452005231',
+      type: 'tweet',
+      value: expect.objectContaining({ article: expect.objectContaining({ format: 'rich' }) }),
+    }))
+  })
+
+  it('AC-TWEET-015: leaves a tweet that already has a rich article untouched', async () => {
+    getLocalCache.mockResolvedValue(cachedSpaceTweet({
+      entities: [articleUrlEntity],
+      article: { ...flatArticle, format: 'rich', blocks: [] },
+    }))
+
+    const tweet = await getLocalTweet('2104058634452005231')
+
+    expect(getEnrichedTweet).not.toHaveBeenCalled()
+    expect(setLocalCache).not.toHaveBeenCalled()
+    expect(tweet?.article?.format).toBe('rich')
+  })
+})
diff --git a/verify/acceptance-criteria/AC-tweet.md b/verify/acceptance-criteria/AC-tweet.md
index 6568f801..efba6ebd 100644
--- a/verify/acceptance-criteria/AC-tweet.md
+++ b/verify/acceptance-criteria/AC-tweet.md
@@ -1,6 +1,6 @@
 # Tweet API 验收标准
 
-> 版本：1.2 | 日期：2026-09-25（新增 AC-TWEET-011 外壳请求 cookie 回归防护；1.1 为 AC-TWEET-009/010 搜索验收）
+> 版本：1.6 | 日期：2026-09-27（新增 AC-TWEET-019 内嵌推文真实渲染；1.5 为 AC-TWEET-017/018）
 > 对应 Postmortem：001 (Tweet Parsing), 005 (Media)
 > 关联 Verifier：`verify/modules/tweet.verifier.ts`
 > 执行命令：`bun verify --module tweet [--ac AC-TWEET-NNN]`
@@ -150,7 +150,122 @@
 
 ---
 
-## 总计：11 条 AC
+## AC-TWEET-012：文章型推文（X Article）解析出标题与正文（离线）
+
+- **输入**：`TweetResultByRestId` 的 `article.article_results.result` 节点
+  （含 `rest_id` / `title` / `preview_text`；开启 `withArticlePlainText` 时含 `plain_text`）
+- **预期输出**：`EnrichedTweet.article` 为 `{ id, url, title, previewText, plainText }`；
+  无 article 节点（仅正文里一条 `x.com/i/article/…` 链接）时 `article` 为 undefined
+- **验证方法**：`bun run verify/index.ts --ac AC-TWEET-012`
+- **前置条件**：无（纯函数，离线）
+- **Pass 条件**：
+  - `mapArticle` 由原始节点映射出 `title`（去首尾空白）与 `plainText`
+  - `isArticleUrl` 命中 `x.com/i/article/<id>` 与 `x.com/<user>/article/<id>`，不误伤 Space / 外链
+  - 无 metadata 时不构造空卡片（返回 null，正文裸链接照常渲染，优雅降级）
+
+---
+
+## AC-TWEET-013：`TweetResultByRestId` 携带文章全文 field toggle（离线）
+
+- **输入**：`TweetRequests.details(id)`
+- **预期输出**：`params.fieldToggles` 为 JSON 字符串 `{"withArticlePlainText":true}`
+- **验证方法**：`bun run verify/index.ts --ac AC-TWEET-013`
+- **前置条件**：无（纯函数，离线）
+- **Pass 条件**：
+  - `fieldToggles` 为字符串且 `JSON.parse` 后等于 `{ withArticlePlainText: true }`
+    （对象形式会被 axios 序列化成 `fieldToggles[withArticlePlainText]=true`，X 忽略之——
+    这正是文章全文长期缺失的根因）
+
+---
+
+## AC-TWEET-014：文章富文本 `content_state` 解析为块文档（离线）
+
+- **输入**：`test/fixtures/articles/*.json`（`article.article_results.result`，真实上游抓取）
+- **预期输出**：`parseContentState` 产出 `ArticleBlock[]`（段落 / 标题 / 列表 / 引用 / markdown / 图片 / 嵌入帖 / 分隔线）
+- **验证方法**：`bun run verify/index.ts --ac AC-TWEET-014`
+- **前置条件**：无（纯函数，离线）
+- **Pass 条件**：
+  - 段落块携带行内 run（LINK 实体、`data.mentions/hashtags` span、Bold/Italic 样式）
+  - 行内样式只作用于其区间：Bold/Italic 的起止也是 run 切分点，不整段误加粗
+    （回归样例 `test/fixtures/articles/2103463356913098908.json` 的段首 Bold）
+  - `MARKDOWN` 实体 → markdown 块（GFM 表格原样保留）
+  - `MEDIA` 实体经 `media_entities` 解析为图片块；`header-*`/list 块映射为对应类型
+  - entityMap 的数组与 Record 两种形态均可解析；无块时返回空数组
+
+---
+
+## AC-TWEET-015：旧 flat 文章缓存回填升级为富文本（离线）
+
+- **输入**：缓存中的推文 `article.format === 'plain'`（仅 `plainText`）+ 正文里的文章链接实体
+- **预期输出**：`getLocalTweet` 重抓一次上游，替换为 `format === 'rich'` 的块文档并 best-effort 写回缓存
+- **验证方法**：`bun run verify/index.ts --ac AC-TWEET-015`
+- **前置条件**：无（mock 缓存层与上游取数，离线）
+- **Pass 条件**：
+  - flat 缓存触发 `getEnrichedTweet` 重抓，`article.format` 变为 `rich`
+  - 已是 rich 的缓存直接返回，不重抓、不写回
+  - 无文章链接的推文不触发重抓
+
+---
+
+## AC-TWEET-016：文章块文档真实渲染（离线）
+
+- **输入**：`ArticleBody` + 由 fixture 解析出的块文档
+- **预期输出**：标题 / 段落 / 列表 / GFM 表格 / 图片 / 嵌入帖均渲染为对应 HTML
+- **验证方法**：`bun run verify/index.ts --ac AC-TWEET-016`
+- **前置条件**：无（`renderToString`，离线）
+- **Pass 条件**：
+  - markdown 表格渲染为 `<table>`；链接渲染为 `<a target="_blank" rel="noopener noreferrer">`
+  - 图片块渲染 `<img>`；嵌入帖渲染指向 `x.com/i/status/<id>` 的链接
+  - 有序/无序列表渲染为 `<ol>`/`<ul>`；标题渲染为 `h2/h3/h4`
+
+---
+
+## AC-TWEET-017：文章分块翻译离线契约（离线）
+
+- **输入**：含 link / mention 锚点的段落块；已中文 / 含假名 / 纯英文文本；`tweetSchema` 的
+  `updateArticleTranslations` 变体
+- **预期输出**：`serializeArticleBlock` 把块内非文本 run 按序换成 `<<__LINK_n__>>`；
+  `looksLikeChinese` 对「含 CJK 且无假名」判真；持久化 intent 校验通过/拒绝非法载荷
+- **验证方法**：`bun run verify/index.ts --ac AC-TWEET-017`
+- **前置条件**：无（纯函数，离线；不调 LLM）
+- **Pass 条件**：
+  - `serializeArticleBlock` 的 `text` 与 `placeholders` 按 run 出现顺序编号（从 0 起）
+  - `looksLikeChinese('这是一段中文')` / `'中文 mixed with English'` 为真；日文、纯英文为假
+  - `tweetSchema.safeParse` 接受 `{ blocks: Record<string,string> }`，拒绝非字符串块值
+
+---
+
+## AC-TWEET-018：文章块翻译三态渲染 + 占位符还原（离线）
+
+- **输入**：含标题 + 段落（段内一个 link 锚点）的块文档，`translations` 用 `<<__LINK_0__>>`
+  锚定该链接
+- **预期输出**：`ArticleBody` 按 `mode` 渲染原文 / 仅译文 / 双语；译文里的占位符还原为原
+  run 的可点击元素
+- **验证方法**：`bun run verify/index.ts --ac AC-TWEET-018`
+- **前置条件**：无（`renderToString`，离线）
+- **Pass 条件**：
+  - `original`：仅原文可见，译文串不出现
+  - `translation`：仅译文可见，原文不出现；`<<__LINK_0__>>` 不再出现且还原出链接 `href`
+  - `bilingual`：原文与译文同时出现
+
+---
+
+## AC-TWEET-019：内嵌推文渲染（离线）
+
+- **输入**：含 `embed-tweet` 块的文章（真实样例 `test/fixtures/articles/2104076282107723935.json`，
+  4 个 `TWEET` 实体）；`ArticleBody` 的 `renderEmbed` 注入渲染器（有值 / 无值）
+- **预期输出**：`collectEmbeddedTweetIds` 按序去重提取内嵌推文 id；`renderEmbed` 有值时委派给注入的
+  真实推文渲染（不再产出「在 X 查看」链接卡），无值（取数失败/离线）时回退轻量链接卡
+- **验证方法**：`bun run verify/index.ts --ac AC-TWEET-019`
+- **前置条件**：无（纯函数 + `renderToString`，离线）
+- **Pass 条件**：
+  - 真实样例解析出的内嵌推文 id 为 `[2103032879496540640, 2103768558429958335, 2104037017873162442, 2103868710561911209]`
+  - 重复 id 去重且保持出现顺序
+  - 注入渲染器时输出其内容且不出现 `x.com/i/status/<id>` 链接卡；渲染器返回空值时回退链接卡
+
+---
+
+## 总计：19 条 AC
 
 | AC           | 分类                  | 依赖外部 API | 依赖 AI |
 | ------------ | --------------------- | ------------ | ------- |
@@ -165,5 +280,13 @@
 | AC-TWEET-009 | 纯函数/离线           | 否           | 否      |
 | AC-TWEET-010 | 集成                  | 是 (Twitter) | 否      |
 | AC-TWEET-011 | 行为断言（mock/离线） | 否           | 否      |
+| AC-TWEET-012 | 纯函数/离线           | 否           | 否      |
+| AC-TWEET-013 | 纯函数/离线           | 否           | 否      |
+| AC-TWEET-014 | 纯函数/离线           | 否           | 否      |
+| AC-TWEET-015 | 行为断言（mock/离线） | 否           | 否      |
+| AC-TWEET-016 | 行为断言（渲染/离线） | 否           | 否      |
+| AC-TWEET-017 | 纯函数/离线           | 否           | 否      |
+| AC-TWEET-018 | 行为断言（渲染/离线） | 否           | 否      |
+| AC-TWEET-019 | 纯函数 + 渲染（离线） | 否           | 否      |
 
 > 离线 AC 可通过 fixture 直接验证，无需网络；集成 AC 需要 `TWEET_KEYS` 环境变量。

From d4f563ac0dcc8238c25a9391a0197dc7fb0d3cd8 Mon Sep 17 00:00:00 2001
From: Chilfish <chill4fish@gmail.com>
Date: Sun, 27 Sep 2026 14:22:38 +0800
Subject: [PATCH 3/8] docs(article): document the feature, sync llms/OpenAPI
 and skill

- feature doc docs/features/tweet/article.md + ADR-009 + dev log 2026-09-27
- INDEX / backlog / development-log index updates
- llms.txt Data Shapes + OpenAPI schemas (TweetArticle, ArticleBlock,
  ArticleTranslation) and the article request/response fields
- regenerate the bundled skill OpenAPI snapshot and update SKILL.md

Co-authored-by: CommandCodeBot <noreply@commandcode.ai>
---
 .agents/skills/anon-tweet/SKILL.md            |  18 +-
 .../references/anon-tweet-openapi.json        | 244 +++++++++++++++++-
 app/lib/llms.ts                               | 103 +++++++-
 docs/INDEX.md                                 |  38 +--
 docs/development-log/2026-09-27.md            | 135 ++++++++++
 docs/development-log/README.md                |   1 +
 docs/features/tweet/article.md                | 232 +++++++++++++++++
 docs/planning/architecture.md                 |  25 ++
 docs/planning/backlog.md                      |   4 +-
 9 files changed, 753 insertions(+), 47 deletions(-)
 create mode 100644 docs/development-log/2026-09-27.md
 create mode 100644 docs/features/tweet/article.md

diff --git a/.agents/skills/anon-tweet/SKILL.md b/.agents/skills/anon-tweet/SKILL.md
index ac180645..8d185263 100644
--- a/.agents/skills/anon-tweet/SKILL.md
+++ b/.agents/skills/anon-tweet/SKILL.md
@@ -4,16 +4,17 @@ description: >-
   匿名浏览 Twitter/X 推文与 Instagram 帖子的 API 使用指南（BFF 聚合接口，读取无需 API Key）。
   用 /api/tweet/search 按关键词或 X 高级语法搜索推文、/api/tweet/get/{id} 与
   /api/tweet/replies/{id} 读取单条推文及回复、/api/user/get/{username} 查询用户资料、
-  /api/ig/get/{id} 拉取 IG 帖子（caption/媒体），另有 AI 翻译与图片代理接口。
-  当需要搜索/抓取推文、查看 X 用户资料或 IG 帖子内容时使用。
+  /api/ig/get/{id} 拉取 IG 帖子（caption/媒体），长文推文还会带 X Article（标题 + 块文档正文），
+  另有 AI 翻译（推文 / IG / 长文按块）与图片代理接口。
+  当需要搜索/抓取推文、读取 X 长文、查看 X 用户资料或 IG 帖子内容时使用。
 license: MIT
 compatibility: 需要 PowerShell 7+（pwsh）与网络访问部署实例；纯 PowerShell 封装，不依赖 curl/python3
 metadata:
   author: Chilfish
-  version: "1.2.0"
+  version: "1.3.0"
   base-url: https://anon-tweet.chilfish.top
   repository: https://github.com/Chilfish/anonTweet
-  updated: "2026-09-12"
+  updated: "2026-09-27"
 ---
 
 # Anon Tweet API
@@ -29,6 +30,7 @@ metadata:
 
 - 搜索推文（关键词 / hashtag / 用户 / 高级语法过滤）
 - 读取单条推文、其回复列表或 List 时间线
+- 读取 X 长文（Article）：`/api/tweet/get/{id}` 对文章推文返回 `article`（标题 + 块文档正文）
 - 查询 X 用户资料
 - 拉取 Instagram 帖子（caption / 媒体 / 标签）或翻译 caption
 - 在页面上展示 IG 图片时走图片代理绕过 CDN CORS
@@ -54,7 +56,7 @@ pwsh -NoProfile -File $A help
 | 方法 | 路径 | 用途 |
 | --- | --- | --- |
 | GET | `/api/tweet/search?q=...` | 推文搜索（核心，支持 X 高级语法） |
-| GET | `/api/tweet/get/{id}` | 单条推文（三层缓存 → Twitter 原文；返回 EnrichedTweet 数组，可能为空） |
+| GET | `/api/tweet/get/{id}` | 单条推文（三层缓存 → Twitter 原文；文章推文另含 `article` 块文档） |
 | GET | `/api/tweet/replies/{id}?cursor=...` | 推文回复（cursor 分页） |
 | GET | `/api/tweet/list/{id}` | List 时间线（EnrichedTweet 数组） |
 | GET | `/api/user/get/{username}` | 用户资料（DB 缓存，无记录返回 null） |
@@ -62,7 +64,7 @@ pwsh -NoProfile -File $A help
 | GET | `/api/ig/get/{id}` | IG 帖子（id 为 shortcode；未配 INS_COOKIES 返回空数组） |
 | POST | `/api/ig/translate/{id}` | IG caption 翻译（manualTranslation 传入则跳过 AI） |
 | GET | `/api/proxy/image?url=...` | 图片代理（url 白名单校验，返回二进制） |
-| POST | `/api/ai-translation` | 通用 AI 翻译（type + tweet/igPost） |
+| POST | `/api/ai-translation` | 通用 AI 翻译（`type`: twitter / ins / article） |
 | POST | `/api/ai-vision` | 图片/视频 AI 描述 |
 | POST | `/api/bili-post` | B 站动态抓取 |
 
@@ -116,7 +118,9 @@ Invoke-RestMethod "https://anon-tweet.chilfish.top/api/ig/translate/DWlrun0AVbE"
 
 ## 数据结构要点
 
-- **EnrichedTweet**: `id_str`、`text`、`url`、`lang`（如 en/ja/zxx）、`created_at`（ISO 8601）、`user`（TweetUser）、`entities`（Entity[]），可选 `quoted_tweet_id` / `card` / `mediaDetails` / `visionInfo`
+- **EnrichedTweet**: `id_str`、`text`、`url`、`lang`（如 en/ja/zxx）、`created_at`（ISO 8601）、`user`（TweetUser）、`entities`（Entity[]），可选 `quoted_tweet_id` / `card` / `mediaDetails` / `visionInfo` / `article`
+- **TweetArticle**（文章推文才有）: `id`、`url`、`title`、`previewText`、`plainText`、`format`（`rich` 带 `blocks`，`plain` 仅纯文本）、`coverImage`、`publishedAt`（epoch ms）、`blocks`（ArticleBlock[]）
+- **ArticleBlock**: `type` ∈ paragraph / heading / list-item / quote / markdown / divider / image / embed-tweet / link / unknown；`key` 为稳定块 ID；段落类带 `runs`（文本/链接/mention/hashtag）；`text`（markdown）、`media`（image）、`tweetId`（embed-tweet）
 - **TweetUser**: `id_str`、`name`、`screen_name`、`profile_image_url_https`、`verified`、`is_blue_verified`、`verified_type`（Business/Government）、`profile_image_shape`（Circle/Square/Hexagon）
 - **Entity**: `type` ∈ text / hashtag / mention / url / media / symbol / media_alt / separator；`index` 为文本偏移；hashtag/mention/url/media/symbol 带 `href`；`aiTranslation` / `translation` 存翻译
 - **SearchResponse / RepliesResponse**: `{ tweets: EnrichedTweet[], nextCursor: string | null }`
diff --git a/.agents/skills/anon-tweet/references/anon-tweet-openapi.json b/.agents/skills/anon-tweet/references/anon-tweet-openapi.json
index 77178fe2..6bed6efd 100644
--- a/.agents/skills/anon-tweet/references/anon-tweet-openapi.json
+++ b/.agents/skills/anon-tweet/references/anon-tweet-openapi.json
@@ -401,7 +401,7 @@
           "Tweet"
         ],
         "operationId": "tweetSet",
-        "summary": "保存推文实体编辑",
+        "summary": "保存推文实体编辑或文章按块译文",
         "requestBody": {
           "required": true,
           "content": {
@@ -415,16 +415,18 @@
                 "properties": {
                   "intent": {
                     "type": "string",
-                    "const": "updateEntities"
+                    "enum": [
+                      "updateEntities",
+                      "updateArticleTranslations"
+                    ]
                   },
                   "data": {
                     "type": "array",
-                    "description": "每项包含 tweetId 与 entities（TranslationEntity[]）",
+                    "description": "updateEntities：每项 { tweetId, entities }；updateArticleTranslations：每项 { tweetId, translation }",
                     "items": {
                       "type": "object",
                       "required": [
-                        "tweetId",
-                        "entities"
+                        "tweetId"
                       ],
                       "properties": {
                         "tweetId": {
@@ -434,7 +436,12 @@
                           "type": "array",
                           "items": {
                             "$ref": "#/components/schemas/TranslationEntity"
-                          }
+                          },
+                          "description": "intent=updateEntities 时必填"
+                        },
+                        "translation": {
+                          "$ref": "#/components/schemas/ArticleTranslation",
+                          "description": "intent=updateArticleTranslations 时必填"
                         }
                       }
                     }
@@ -952,7 +959,7 @@
         ],
         "operationId": "aiTranslation",
         "summary": "统一 AI 翻译端点",
-        "description": "type=twitter（默认）翻译推文实体；type=ins 翻译 IG caption。baseUrl 走 ENABLE_AI_BASE_URL_WHITELIST 可选白名单（AC-SEC-001）。",
+        "description": "type=twitter（默认）翻译推文实体；type=ins 翻译 IG caption；type=article 按块翻译 X 长文。baseUrl 走 ENABLE_AI_BASE_URL_WHITELIST 可选白名单（AC-SEC-001）。",
         "requestBody": {
           "required": true,
           "content": {
@@ -964,7 +971,8 @@
                     "type": "string",
                     "enum": [
                       "twitter",
-                      "ins"
+                      "ins",
+                      "article"
                     ],
                     "default": "twitter"
                   },
@@ -976,6 +984,10 @@
                     "$ref": "#/components/schemas/IGPost",
                     "description": "type=ins 时必填"
                   },
+                  "article": {
+                    "$ref": "#/components/schemas/TweetArticle",
+                    "description": "type=article 时必填"
+                  },
                   "enableAITranslation": {
                     "type": "boolean",
                     "description": "twitter 分支守卫"
@@ -1049,6 +1061,14 @@
                         "captionTranslation": {
                           "type": "string",
                           "description": "ins 分支"
+                        },
+                        "articleId": {
+                          "type": "string",
+                          "description": "article 分支"
+                        },
+                        "translation": {
+                          "$ref": "#/components/schemas/ArticleTranslation",
+                          "description": "article 分支：按块 key 的译文"
                         }
                       }
                     }
@@ -1068,7 +1088,7 @@
             }
           },
           "404": {
-            "description": "tweet/igPost 缺失",
+            "description": "tweet / igPost / article 缺失",
             "content": {
               "application/json": {
                 "schema": {
@@ -1696,6 +1716,10 @@
             "type": "object",
             "description": "X Space 卡片（SpaceDetails，见 app/types/space.ts；仅 Space 推文有）"
           },
+          "article": {
+            "$ref": "#/components/schemas/TweetArticle",
+            "description": "X 长文卡片与块文档（app/types/article.ts；仅文章推文有）"
+          },
           "comments": {
             "type": "array",
             "items": {
@@ -1719,6 +1743,206 @@
         },
         "additionalProperties": true
       },
+      "TweetArticle": {
+        "type": "object",
+        "description": "X 长文（Article）数据（app/types/article.ts TweetArticle），挂在 EnrichedTweet.article",
+        "required": [
+          "id",
+          "url",
+          "title",
+          "format"
+        ],
+        "properties": {
+          "id": {
+            "type": "string",
+            "description": "文章 rest_id（与推文 id 不同）"
+          },
+          "url": {
+            "type": "string",
+            "format": "uri",
+            "description": "文章永久链接"
+          },
+          "title": {
+            "type": "string"
+          },
+          "previewText": {
+            "type": "string",
+            "description": "摘要"
+          },
+          "plainText": {
+            "type": "string",
+            "description": "纯文本全文（content_state 缺失时的兜底）"
+          },
+          "format": {
+            "type": "string",
+            "enum": [
+              "rich",
+              "plain"
+            ],
+            "description": "rich 表示 blocks 可用；plain 仅纯文本"
+          },
+          "coverImage": {
+            "$ref": "#/components/schemas/ArticleMedia"
+          },
+          "publishedAt": {
+            "type": "integer",
+            "description": "首次发布时间（epoch ms）"
+          },
+          "blocks": {
+            "type": "array",
+            "items": {
+              "$ref": "#/components/schemas/ArticleBlock"
+            },
+            "description": "块文档（format=rich 时存在）"
+          }
+        },
+        "additionalProperties": true
+      },
+      "ArticleMedia": {
+        "type": "object",
+        "description": "文章内嵌媒体（图片）",
+        "required": [
+          "id",
+          "url"
+        ],
+        "properties": {
+          "id": {
+            "type": "string"
+          },
+          "url": {
+            "type": "string",
+            "format": "uri"
+          },
+          "width": {
+            "type": "integer"
+          },
+          "height": {
+            "type": "integer"
+          },
+          "alt": {
+            "type": "string"
+          }
+        }
+      },
+      "ArticleBlock": {
+        "type": "object",
+        "description": "文章块（Draft.js block 语义化，app/types/article.ts ArticleBlock）。type 判别：段落类带 runs；markdown 带 text；image 带 media；embed-tweet 带 tweetId。",
+        "required": [
+          "key",
+          "type"
+        ],
+        "properties": {
+          "key": {
+            "type": "string",
+            "description": "稳定块 ID（按块翻译与渲染对齐用）"
+          },
+          "type": {
+            "type": "string",
+            "enum": [
+              "paragraph",
+              "heading",
+              "list-item",
+              "quote",
+              "markdown",
+              "divider",
+              "image",
+              "embed-tweet",
+              "link",
+              "unknown"
+            ]
+          },
+          "runs": {
+            "type": "array",
+            "description": "段落的行内片段（文本 / link / mention / hashtag，带样式）",
+            "items": {
+              "type": "object",
+              "properties": {
+                "type": {
+                  "type": "string",
+                  "enum": [
+                    "text",
+                    "link",
+                    "mention",
+                    "hashtag"
+                  ]
+                },
+                "text": {
+                  "type": "string"
+                },
+                "url": {
+                  "type": "string",
+                  "description": "type=link"
+                },
+                "href": {
+                  "type": "string",
+                  "description": "type=mention / hashtag"
+                },
+                "styles": {
+                  "type": "array",
+                  "items": {
+                    "type": "string",
+                    "enum": [
+                      "bold",
+                      "italic",
+                      "strikethrough"
+                    ]
+                  }
+                }
+              }
+            }
+          },
+          "level": {
+            "type": "integer",
+            "enum": [
+              1,
+              2,
+              3
+            ],
+            "description": "heading 级别"
+          },
+          "ordered": {
+            "type": "boolean",
+            "description": "list-item 是否有序"
+          },
+          "text": {
+            "type": "string",
+            "description": "markdown 块的原始 GFM"
+          },
+          "media": {
+            "$ref": "#/components/schemas/ArticleMedia",
+            "description": "image 块"
+          },
+          "caption": {
+            "type": "string",
+            "description": "image 块说明"
+          },
+          "tweetId": {
+            "type": "string",
+            "description": "embed-tweet 块的推文 id"
+          },
+          "url": {
+            "type": "string",
+            "description": "link 块 URL"
+          }
+        },
+        "additionalProperties": true
+      },
+      "ArticleTranslation": {
+        "type": "object",
+        "description": "文章按块译文（app/lib/article/translate.ts ArticleTranslation）：title + 块 key → 译文",
+        "properties": {
+          "title": {
+            "type": "string"
+          },
+          "blocks": {
+            "type": "object",
+            "additionalProperties": {
+              "type": "string"
+            },
+            "description": "块 key → 译文（link / mention / hashtag 以 <<__LINK_n__>> 占位符锚定）"
+          }
+        }
+      },
       "IGAudio": {
         "type": "object",
         "description": "IG 帖子附带音频/音乐信息（app/types/ins.ts IGAudio）",
@@ -2042,4 +2266,4 @@
       }
     }
   }
-}
+}
\ No newline at end of file
diff --git a/app/lib/llms.ts b/app/lib/llms.ts
index bb48abed..4b2dd036 100644
--- a/app/lib/llms.ts
+++ b/app/lib/llms.ts
@@ -61,7 +61,7 @@ export const apiEndpoints: ApiEndpointLink[] = [
   { method: 'GET', path: '/api/tweet/list/{id}', label: 'GET /api/tweet/list/{id}', href: `/api/tweet/list/${LLMS_EXAMPLES.listId}`, description: '拉取 List 时间线推文（EnrichedTweet 数组）' },
   { method: 'GET', path: '/api/tweet/replies/{id}', label: 'GET /api/tweet/replies/{id}', href: `/api/tweet/replies/${LLMS_EXAMPLES.tweetId}`, description: '拉取推文回复（{ tweets, nextCursor }，cursor 分页）' },
   { method: 'GET', path: '/api/tweet/search', label: 'GET /api/tweet/search', href: '/api/tweet/search?q=twitter', description: '推文搜索（q 必填，type/cursor/count 可选，支持 X 高级语法）' },
-  { method: 'POST', path: '/api/tweet/set', label: 'POST /api/tweet/set', href: '/api/tweet/set', description: '保存推文实体编辑（intent: updateEntities，同步 localCache）' },
+  { method: 'POST', path: '/api/tweet/set', label: 'POST /api/tweet/set', href: '/api/tweet/set', description: '保存推文实体编辑或文章按块译文（intent: updateEntities / updateArticleTranslations）' },
   // ── Instagram ──────────────────────────────────────────
   { method: 'GET', path: '/api/ig/get/{id}', label: 'GET /api/ig/get/{id}', href: `/api/ig/get/${LLMS_EXAMPLES.igShortcode}`, description: '拉取 IG 帖子（简化版，不触发 AI 翻译）' },
   { method: 'POST', path: '/api/ig/get/{id}', label: 'POST /api/ig/get/{id}', href: `/api/ig/get/${LLMS_EXAMPLES.igShortcode}`, description: '拉取 IG 帖子（可启用 AI caption 翻译）' },
@@ -71,7 +71,7 @@ export const apiEndpoints: ApiEndpointLink[] = [
   { method: 'GET', path: '/api/user/timeline/{username}', label: 'GET /api/user/timeline/{username}', href: `/api/user/timeline/${LLMS_EXAMPLES.username}`, description: '用户时间线（EnrichedTweet 数组）' },
   // ── AI ─────────────────────────────────────────────────
   { method: 'POST', path: '/api/ai-test', label: 'POST /api/ai-test', href: '/api/ai-test', description: 'AI 提供商连通性测试（apiKey + model）' },
-  { method: 'POST', path: '/api/ai-translation', label: 'POST /api/ai-translation', href: '/api/ai-translation', description: '统一 AI 翻译端点（type: twitter 或 ins）' },
+  { method: 'POST', path: '/api/ai-translation', label: 'POST /api/ai-translation', href: '/api/ai-translation', description: '统一 AI 翻译端点（type: twitter / ins / article）' },
   { method: 'POST', path: '/api/ai-vision', label: 'POST /api/ai-vision', href: '/api/ai-vision', description: 'AI 视觉描述生成 / OCR 翻译 / 保存（三种严格互斥请求形态）' },
   // ── Proxy / Misc ───────────────────────────────────────
   { method: 'GET', path: '/api/proxy/image', label: 'GET /api/proxy/image', href: '/api/proxy/image?url=https%3A%2F%2Fscontent.cdninstagram.com%2Fv%2Ft51.2885-15%2Fphoto.jpg', description: '图片代理（解决 IG CDN CORS/CORP，url 白名单校验）' },
@@ -94,6 +94,7 @@ export function buildLlmsTxt(): string {
 - [/search](/search): 推文搜索 — 高级语法快捷插入 + 热门/最新切换 + 分页加载
 - [/tweets/{id}](/tweets/${LLMS_EXAMPLES.tweetId}): 推文详情（AI 翻译 / 截图导出）
 - [/ins/{id}](/ins/${LLMS_EXAMPLES.igShortcode}): Instagram 帖子详情（AI 翻译 / 截图导出）
+- [/article/{id}](/article/${LLMS_EXAMPLES.tweetId}): X 长文（Article）阅读页 — 块文档渲染 + 按块 AI 翻译（原文 / 双语 / 仅译文）
 - [/bili](/bili): Bili 动态发布（隐藏自用入口）
 
 ## Backend API
@@ -106,9 +107,11 @@ ${apiBullets}
 
 后端主要接口（搜索 / 获取推文）的出参是 EnrichedTweet 数组，字段对齐 react-tweet：
 
-- EnrichedTweet: id_str（推文 ID）、text（推文文本）、url（完整链接）、lang（语言码）、created_at（ISO 8601 创建时间）、user（作者 TweetUser）、entities（实体 Entity[]）、visionInfo（可选，AI 视觉描述）、quotedTweet（可选，引用推文）、card（可选，预览卡片）、space（可选，X Space 卡片：标题/主播/收听人数/时长）
+- EnrichedTweet: id_str（推文 ID）、text（推文文本）、url（完整链接）、lang（语言码）、created_at（ISO 8601 创建时间）、user（作者 TweetUser）、entities（实体 Entity[]）、visionInfo（可选，AI 视觉描述）、quotedTweet（可选，引用推文）、card（可选，预览卡片）、space（可选，X Space 卡片：标题/主播/收听人数/时长）、article（可选，X 长文卡片与块文档）
 - TweetUser: id_str、name、screen_name、profile_image_url_https（头像）、verified、is_blue_verified
 - Entity: type（text / hashtag / mention / url / media / symbol / media_alt / separator）、text、index（文本偏移）、href（多数类型带链接）、translation（手动翻译）、aiTranslation（AI 翻译）
+- TweetArticle: id（文章 ID）、url、title、previewText（摘要）、plainText（纯文本兜底）、format（rich 表示带 blocks，plain 仅纯文本）、coverImage（封面）、publishedAt（epoch ms）、blocks（ArticleBlock[]，仅 rich）
+- ArticleBlock: type（paragraph / heading / list-item / quote / markdown / divider / image / embed-tweet / link / unknown）、key（稳定块 ID）、runs（行内片段：文本 / 链接 / mention / hashtag，带回读偏移与样式）、text（markdown 块）、media（image 块）、tweetId（embed-tweet）、level / ordered（heading / 列表）
 - SearchResponse / RepliesResponse: { tweets: EnrichedTweet[], nextCursor }（nextCursor 为 string 或 null，null 表示没有更多）
 
 关键接口入参：
@@ -276,7 +279,7 @@ export function buildOpenApiDoc(baseUrl: string): Record<string, unknown> {
         post: {
           tags: ['Tweet'],
           operationId: 'tweetSet',
-          summary: '保存推文实体编辑',
+          summary: '保存推文实体编辑或文章按块译文',
           requestBody: {
             required: true,
             content: {
@@ -285,16 +288,17 @@ export function buildOpenApiDoc(baseUrl: string): Record<string, unknown> {
                   type: 'object',
                   required: ['intent', 'data'],
                   properties: {
-                    intent: { type: 'string', const: 'updateEntities' },
+                    intent: { type: 'string', enum: ['updateEntities', 'updateArticleTranslations'] },
                     data: {
                       type: 'array',
-                      description: '每项包含 tweetId 与 entities（TranslationEntity[]）',
+                      description: 'updateEntities：每项 { tweetId, entities }；updateArticleTranslations：每项 { tweetId, translation }',
                       items: {
                         type: 'object',
-                        required: ['tweetId', 'entities'],
+                        required: ['tweetId'],
                         properties: {
                           tweetId: { type: 'string' },
-                          entities: { type: 'array', items: { $ref: '#/components/schemas/TranslationEntity' } },
+                          entities: { type: 'array', items: { $ref: '#/components/schemas/TranslationEntity' }, description: 'intent=updateEntities 时必填' },
+                          translation: { $ref: '#/components/schemas/ArticleTranslation', description: 'intent=updateArticleTranslations 时必填' },
                         },
                       },
                     },
@@ -478,7 +482,7 @@ export function buildOpenApiDoc(baseUrl: string): Record<string, unknown> {
           tags: ['AI'],
           operationId: 'aiTranslation',
           summary: '统一 AI 翻译端点',
-          description: 'type=twitter（默认）翻译推文实体；type=ins 翻译 IG caption。baseUrl 走 ENABLE_AI_BASE_URL_WHITELIST 可选白名单（AC-SEC-001）。',
+          description: 'type=twitter（默认）翻译推文实体；type=ins 翻译 IG caption；type=article 按块翻译 X 长文。baseUrl 走 ENABLE_AI_BASE_URL_WHITELIST 可选白名单（AC-SEC-001）。',
           requestBody: {
             required: true,
             content: {
@@ -486,9 +490,10 @@ export function buildOpenApiDoc(baseUrl: string): Record<string, unknown> {
                 schema: {
                   type: 'object',
                   properties: {
-                    type: { type: 'string', enum: ['twitter', 'ins'], default: 'twitter' },
+                    type: { type: 'string', enum: ['twitter', 'ins', 'article'], default: 'twitter' },
                     tweet: { $ref: '#/components/schemas/EnrichedTweet', description: 'type=twitter 时必填' },
                     igPost: { $ref: '#/components/schemas/IGPost', description: 'type=ins 时必填' },
+                    article: { $ref: '#/components/schemas/TweetArticle', description: 'type=article 时必填' },
                     enableAITranslation: { type: 'boolean', description: 'twitter 分支守卫' },
                     force: { type: 'boolean', description: '强制重新翻译' },
                     apiKey: { type: 'string' },
@@ -514,12 +519,14 @@ export function buildOpenApiDoc(baseUrl: string): Record<string, unknown> {
                     tweetId: { type: 'string' },
                     entities: { type: 'array', items: { $ref: '#/components/schemas/TranslationEntity' } },
                     captionTranslation: { type: 'string', description: 'ins 分支' },
+                    articleId: { type: 'string', description: 'article 分支' },
+                    translation: { $ref: '#/components/schemas/ArticleTranslation', description: 'article 分支：按块 key 的译文' },
                   },
                 },
               },
             }),
             400: errorJson('缺少参数 / baseUrl 不在白名单'),
-            404: errorJson('tweet/igPost 缺失'),
+            404: errorJson('tweet / igPost / article 缺失'),
             500: errorJson('翻译失败（含 aiError）'),
           },
         },
@@ -730,6 +737,7 @@ export function buildOpenApiDoc(baseUrl: string): Record<string, unknown> {
             quotedTweet: { $ref: '#/components/schemas/EnrichedTweet', description: '引用推文（递归）' },
             card: { type: 'object', description: '预览卡片（LinkPreviewCard）' },
             space: { type: 'object', description: 'X Space 卡片（SpaceDetails，见 app/types/space.ts；仅 Space 推文有）' },
+            article: { $ref: '#/components/schemas/TweetArticle', description: 'X 长文卡片与块文档（app/types/article.ts；仅文章推文有）' },
             comments: { type: 'array', items: { $ref: '#/components/schemas/EnrichedTweet' }, description: '内联评论线程' },
             in_reply_to_status_id_str: { type: 'string' },
             mediaDetails: { type: 'array', items: { type: 'object', description: '媒体详情（图片/视频，见 app/types/media.ts）' } },
@@ -737,6 +745,79 @@ export function buildOpenApiDoc(baseUrl: string): Record<string, unknown> {
           },
           additionalProperties: true,
         },
+        // ── X Article 相关 ───────────────────────────────────
+        TweetArticle: {
+          type: 'object',
+          description: 'X 长文（Article）数据（app/types/article.ts TweetArticle），挂在 EnrichedTweet.article',
+          required: ['id', 'url', 'title', 'format'],
+          properties: {
+            id: { type: 'string', description: '文章 rest_id（与推文 id 不同）' },
+            url: { type: 'string', format: 'uri', description: '文章永久链接' },
+            title: { type: 'string' },
+            previewText: { type: 'string', description: '摘要' },
+            plainText: { type: 'string', description: '纯文本全文（content_state 缺失时的兜底）' },
+            format: { type: 'string', enum: ['rich', 'plain'], description: 'rich 表示 blocks 可用；plain 仅纯文本' },
+            coverImage: { $ref: '#/components/schemas/ArticleMedia' },
+            publishedAt: { type: 'integer', description: '首次发布时间（epoch ms）' },
+            blocks: { type: 'array', items: { $ref: '#/components/schemas/ArticleBlock' }, description: '块文档（format=rich 时存在）' },
+          },
+          additionalProperties: true,
+        },
+        ArticleMedia: {
+          type: 'object',
+          description: '文章内嵌媒体（图片）',
+          required: ['id', 'url'],
+          properties: {
+            id: { type: 'string' },
+            url: { type: 'string', format: 'uri' },
+            width: { type: 'integer' },
+            height: { type: 'integer' },
+            alt: { type: 'string' },
+          },
+        },
+        ArticleBlock: {
+          type: 'object',
+          description: '文章块（Draft.js block 语义化，app/types/article.ts ArticleBlock）。type 判别：段落类带 runs；markdown 带 text；image 带 media；embed-tweet 带 tweetId。',
+          required: ['key', 'type'],
+          properties: {
+            key: { type: 'string', description: '稳定块 ID（按块翻译与渲染对齐用）' },
+            type: { type: 'string', enum: ['paragraph', 'heading', 'list-item', 'quote', 'markdown', 'divider', 'image', 'embed-tweet', 'link', 'unknown'] },
+            runs: {
+              type: 'array',
+              description: '段落的行内片段（文本 / link / mention / hashtag，带样式）',
+              items: {
+                type: 'object',
+                properties: {
+                  type: { type: 'string', enum: ['text', 'link', 'mention', 'hashtag'] },
+                  text: { type: 'string' },
+                  url: { type: 'string', description: 'type=link' },
+                  href: { type: 'string', description: 'type=mention / hashtag' },
+                  styles: { type: 'array', items: { type: 'string', enum: ['bold', 'italic', 'strikethrough'] } },
+                },
+              },
+            },
+            level: { type: 'integer', enum: [1, 2, 3], description: 'heading 级别' },
+            ordered: { type: 'boolean', description: 'list-item 是否有序' },
+            text: { type: 'string', description: 'markdown 块的原始 GFM' },
+            media: { $ref: '#/components/schemas/ArticleMedia', description: 'image 块' },
+            caption: { type: 'string', description: 'image 块说明' },
+            tweetId: { type: 'string', description: 'embed-tweet 块的推文 id' },
+            url: { type: 'string', description: 'link 块 URL' },
+          },
+          additionalProperties: true,
+        },
+        ArticleTranslation: {
+          type: 'object',
+          description: '文章按块译文（app/lib/article/translate.ts ArticleTranslation）：title + 块 key → 译文',
+          properties: {
+            title: { type: 'string' },
+            blocks: {
+              type: 'object',
+              additionalProperties: { type: 'string' },
+              description: '块 key → 译文（link / mention / hashtag 以 <<__LINK_n__>> 占位符锚定）',
+            },
+          },
+        },
         // ── Instagram 相关 ───────────────────────────────────
         IGAudio: {
           type: 'object',
diff --git a/docs/INDEX.md b/docs/INDEX.md
index 8ac191aa..df456b1c 100644
--- a/docs/INDEX.md
+++ b/docs/INDEX.md
@@ -26,6 +26,7 @@ docs/
 ├── INDEX.md                    # 本文档（唯一入口）
 ├── features/                   # 功能文档，按子系统组织
 │   ├── translation/            #   翻译子系统（translation.md · deepseek-ai-sdk.md）
+│   ├── tweet/                  #   推文子系统（article.md · space-card.md · trending-card.md · search.md · transaction-id.md）
 │   ├── instagram/              #   Instagram 集成（instagram-integration.md · ig-actions-integration.md）
 │   ├── pwa/                    #   PWA（web-share-target.md · capability-audit.md）
 │   ├── ai-vision/              #   AI 视觉描述（ai-vision.md）
@@ -48,24 +49,25 @@ docs/
 
 ### 按功能领域
 
-| 任务场景                                   | 必读文档                                                                                       | 说明                                                           |
-| ------------------------------------------ | ---------------------------------------------------------------------------------------------- | -------------------------------------------------------------- |
-| **新增/修改翻译逻辑**                      | `features/translation/translation.md`                                                          | 数据流、占位符机制、6 级决策链、stream/overlay 分工            |
-| **修改 AI Provider / DeepSeek 参数**       | `features/translation/deepseek-ai-sdk.md`                                                      | provider 级/模型级/callOptions 参数暴露策略                    |
-| **修改 Instagram 集成**                    | `features/instagram/instagram-integration.md` + `features/instagram/ig-actions-integration.md` | IG 5 阶段管线、操作区、DB 缓存、caption 翻译                   |
-| **修改 AI Vision（看图说话/OCR）**         | `features/ai-vision/ai-vision.md` + `archive/ai-vision-plan.md`                                | 需求与上下文、已完成行动计划 + DR、AC-VISION                   |
-| **部署 / 环境配置**                        | `features/deploy/deployment.md`                                                                | Vercel / 自托管、环境变量、缓存层                              |
-| **修改 PWA / SW / manifest / 安装体验**    | `features/pwa/web-share-target.md` + `features/pwa/capability-audit.md`                        | share_target 方案 + 能力盘点（线上核查、场景裁决、候选优先级） |
-| **修改 UI 组件、页面**                     | `engineering/code-style.md` + `ui-design/README.md`                                            | 组件拆分、命名、导入顺序、原生优先原则                         |
-| **修改原子组件（Button/Input/Dialog 等）** | `ui-design/GENERAL.md` + `ui-design/select-cossui.md`                                          | shadcn/coss 组件使用规范                                       |
-| **修改 Settings 页面**                     | `ui-design/SETTINGS.md`                                                                        | SettingsGroup / SettingsItem 强制规范                          |
-| **架构级变更前**                           | `planning/architecture.md`（ADR）+ `planning/project-architecture.md`（系统架构 v3.0）         | 先读 ADR 历史决策，再对照架构总览                              |
-| **规划下一阶段任务**                       | `planning/backlog.md` + `archive/action-plan.md`                                               | 未决任务清单、已完成里程碑记录                                 |
-| **测试验证体系**                           | `../verify/README.md` + `archive/testing-infra-refactor.md`                                    | Vitest 三层架构（unit / integration / acceptance）             |
-| **写码前防复现 / 新 Bug 模式**             | `postmortem/README.md`（+ `TEMPLATE.md`）                                                      | 高频雷区自查；新 Bug 模式写 postmortem                         |
-| **每次 commit / PR**                       | `engineering/git-workflow.md`                                                                  | 分支模型、Conventional Commits、commit 纪律、验证门禁          |
-| **里程碑发布前**                           | `engineering/release-checklist.md`                                                             | 本地门禁 + 功能冒烟 + Postmortem 预发布检查                    |
-| **了解历史决策 / 已知问题**                | `reviews/` + `development-log/` + `archive/`                                                   | 评审记录、按天开发日志、已完成阶段存档                         |
+| 任务场景                                       | 必读文档                                                                                       | 说明                                                           |
+| ---------------------------------------------- | ---------------------------------------------------------------------------------------------- | -------------------------------------------------------------- |
+| **新增/修改翻译逻辑**                          | `features/translation/translation.md`                                                          | 数据流、占位符机制、6 级决策链、stream/overlay 分工            |
+| **修改文章型推文（X Article 解析/渲染/翻译）** | `features/tweet/article.md` + `planning/architecture.md`（ADR-009）                            | `content_state` 块文档、阅读页、按块翻译、缓存回填             |
+| **修改 AI Provider / DeepSeek 参数**           | `features/translation/deepseek-ai-sdk.md`                                                      | provider 级/模型级/callOptions 参数暴露策略                    |
+| **修改 Instagram 集成**                        | `features/instagram/instagram-integration.md` + `features/instagram/ig-actions-integration.md` | IG 5 阶段管线、操作区、DB 缓存、caption 翻译                   |
+| **修改 AI Vision（看图说话/OCR）**             | `features/ai-vision/ai-vision.md` + `archive/ai-vision-plan.md`                                | 需求与上下文、已完成行动计划 + DR、AC-VISION                   |
+| **部署 / 环境配置**                            | `features/deploy/deployment.md`                                                                | Vercel / 自托管、环境变量、缓存层                              |
+| **修改 PWA / SW / manifest / 安装体验**        | `features/pwa/web-share-target.md` + `features/pwa/capability-audit.md`                        | share_target 方案 + 能力盘点（线上核查、场景裁决、候选优先级） |
+| **修改 UI 组件、页面**                         | `engineering/code-style.md` + `ui-design/README.md`                                            | 组件拆分、命名、导入顺序、原生优先原则                         |
+| **修改原子组件（Button/Input/Dialog 等）**     | `ui-design/GENERAL.md` + `ui-design/select-cossui.md`                                          | shadcn/coss 组件使用规范                                       |
+| **修改 Settings 页面**                         | `ui-design/SETTINGS.md`                                                                        | SettingsGroup / SettingsItem 强制规范                          |
+| **架构级变更前**                               | `planning/architecture.md`（ADR）+ `planning/project-architecture.md`（系统架构 v3.0）         | 先读 ADR 历史决策，再对照架构总览                              |
+| **规划下一阶段任务**                           | `planning/backlog.md` + `archive/action-plan.md`                                               | 未决任务清单、已完成里程碑记录                                 |
+| **测试验证体系**                               | `../verify/README.md` + `archive/testing-infra-refactor.md`                                    | Vitest 三层架构（unit / integration / acceptance）             |
+| **写码前防复现 / 新 Bug 模式**                 | `postmortem/README.md`（+ `TEMPLATE.md`）                                                      | 高频雷区自查；新 Bug 模式写 postmortem                         |
+| **每次 commit / PR**                           | `engineering/git-workflow.md`                                                                  | 分支模型、Conventional Commits、commit 纪律、验证门禁          |
+| **里程碑发布前**                               | `engineering/release-checklist.md`                                                             | 本地门禁 + 功能冒烟 + Postmortem 预发布检查                    |
+| **了解历史决策 / 已知问题**                    | `reviews/` + `development-log/` + `archive/`                                                   | 评审记录、按天开发日志、已完成阶段存档                         |
 
 ### 按文档类型速查
 
diff --git a/docs/development-log/2026-09-27.md b/docs/development-log/2026-09-27.md
new file mode 100644
index 00000000..c1e21ff7
--- /dev/null
+++ b/docs/development-log/2026-09-27.md
@@ -0,0 +1,135 @@
+# 2026-09-27
+
+## 修复文章型推文（X Article）返回空链接 → 富文本块文档 + 独立阅读页（✅ 已完成）
+
+**背景**：`https://x.com/bang_dream_on/article/2104058634452005231` 经 `GET /api/tweet/get/...`
+只返回一条指向文章页的裸链接（`text` = `https://t.co/EhcNsbMwRz`），标题与正文全丢。
+
+**先核实上游返回了什么**（临时脚本直连 `TweetResultByRestId`）：推文响应里**其实带**
+`article.article_results.result`，`rest_id`/`title`/`preview_text` 都有，唯独缺 `plain_text` 全文。
+
+**根因两层**：
+
+1. **请求侧**：全文需 `fieldToggles.withArticlePlainText = true`，`details()` 没带；且按 `User.ts`
+   的**对象**写法会被 axios 序列化成 `fieldToggles[withArticlePlainText]=true`（实测 `axios.getUri`），
+   而 X 只认 `fieldToggles={"withArticlePlainText":true}` 这种 JSON 字符串。
+2. **解析/渲染侧**：`enrichTweet` 从未读取 `article` 节点。
+
+**进一步实测发现富文本是现成的**：`replies()` 早已带 `withArticleRichContentState:true`，`details()`
+补同款 toggle 即可拿到 Draft.js `content_state`（`blocks[]` + `entityMap[]`）。且「表格/代码」其实是
+`MARKDOWN` 实体里的 GFM（样例 `2099885132379500562` 的 entity key `5` 就是一张 Markdown 表格）——
+X 并无 table/code 块类型。详见 [`docs/features/tweet/article.md`](../features/tweet/article.md) §2。
+
+**实现**（全部未提交，仍在工作区）：
+
+- 请求：`requests/Tweet.ts` `details()` 补 `fieldToggles = {withArticleRichContentState:true, withArticlePlainText:true}`
+- 类型：`Details.ts` 扩 `article` 原始节点（`RawArticle*`）+ `app/types/article.ts`（`TweetArticle`/`ArticleBlock`/`ArticleRun`/`ArticleMedia`）
+- 解析（纯函数）：`app/lib/article/parse.ts` `parseContentState`（entityMap 数组/Record 双形态、未知块降级、mention/hashtag span、行内样式）
+- 映射：`lib/react-tweet/utils/article.ts` `mapArticle` + `resolveArticleLink`（无富文本路径的仅链接入口）
+- 挂载/回填：`parseTweet.ts` 产出 `article`；`getTweet.server.ts` 回填判据改 `format==='rich'`
+- 渲染：`app/components/article/*`（`ArticleBody`/`ArticleRuns`/`ArticleMarkdown`/`ArticleImage`/`ArticleEmbedTweet`）
+  - `TweetArticleCard` 紧凑卡 + 新依赖 `react-markdown` + `remark-gfm`
+- 路由：`app/routes/article.tsx` + `/article/:id`（阅读页）；`PlainTweet` 补挂卡片；`tweet-body` 去重链接
+
+**验证**：新增 `test/unit/article-parse.spec.ts`（fixture 驱动）、`test/acceptance/article-render.spec.ts`；
+更新 `test/unit/{article,getLocalTweet}.spec.ts`；AC-tweet.md v1.4（AC-TWEET-014/015/016）。
+`bun run typecheck` / `lint` / `test`（469 passed）全绿。**本地实测**：`/api/tweet/get/2103576349499855160`
+返回 `format=rich`、81 块（11 heading / 7 image / 13 list-item / 50 paragraph）+ 封面；
+`/article/2103576349499855160` SSR 200。
+
+## 文章分块翻译：端到端接线完成（✅ 已完成，同日）
+
+**动机**：现有实体管线假设「单块文本 + 占位符精确相等 + 位置游标回填」，长文会超 token、
+占位符易丢、位置一乱就静默错位 → 文章另起**按块 key** 对齐的管线。
+
+**服务端**：`app/lib/article/translate.ts` `autoTranslateArticle`（可译块收集 + `<<__LINK_n__>>` 占位符 +
+按字符预算分批 + 逐块校验 + 跳过中文块）、AI 路由 `type:'article'` 分支、`AITranslationSchema` 变体、
+store `articleTranslations`/`articleTranslationStatus` + selectors、`use-auto-translate-article.ts`、
+`articleTranslationSync.ts`。
+
+**本次接线**：
+
+- **持久化**：`drizzle/0002_greedy_omega_red.sql`（`tweet_article_translations`）；`getTweet.server.ts`
+  加 `getArticleTranslation` / `updateArticleTranslation`；`tweetSchema` 加 `updateArticleTranslations` intent，
+  `/api/tweet/set` 分支落库（修复此前 sync POST 400 的静默失败）。
+- **阅读页**：loader 回填已持久化译文（`Promise.all([getTweets, getArticleTranslation])`）；页面接入
+  `useAutoTranslateArticle`（已有译文则跳过、并种入 store）+ 三态开关（原文/双语/仅译文，标题与正文同步）；
+  `ArticleBody` 统一承载三态渲染。
+- **组件整理**：抽出 `ArticleTranslatedText`（占位符还原）、`ArticleTranslateToggle`（受控三态开关）；
+  `ArticleBody` 去除非空断言 / 不可达分支 / `i--` 分组循环，改为 `groupBlocks` + 类型收窄的
+  `FlowBlockView`；`ArticleMarkdown` 修掉 react-markdown `node` prop 透传到 DOM 的问题（自定义
+  `withoutNode` 剥离）。
+- **文档契约**：`obs-log.ts` 补 `ai.translate.article.batch` 事件；`llms.ts` Data Shapes / OpenAPI
+  （`TweetArticle` / `ArticleBlock` / `ArticleTranslation` schema + `article` 请求/响应）；随附快照
+  `references/anon-tweet-openapi.json` 重新生成；SKILL.md 补 `article`。
+- **验收**：AC-tweet.md v1.5 新增 AC-TWEET-017（分块翻译离线契约）/ 018（三态渲染 + 占位符还原），
+  对应 `test/unit/article-translate.spec.ts` 与 `test/acceptance/article-render.spec.ts`。
+
+**剩余（非阻塞）**：线上库执行 `db:migrate`；可选 `plain-article/:id` 截图路由；LLM 分批翻译需真机验证。
+清单与文件级细节见 [`docs/features/tweet/article.md`](../features/tweet/article.md) §9。
+
+**决策（owner 2026-09-27）**：独立阅读页 + 分块双语 + 仅 get/replies 取富文本 + 嵌入帖用紧凑卡 +
+**保留原文/译文/双语三态**（截图选「仅译文」控长）。记录为 ADR-009，并登记 backlog 独立增量条目。
+
+**踩坑**：`fieldToggles` 必须是 JSON **字符串**（对象写法被 axios 序列化后 X 静默忽略）——
+这是个「有 metadata 却没全文」的隐蔽坑，已由 AC-TWEET-013 锁定。
+
+## 文章阅读页 UX 精修（owner 反馈，同日）
+
+**背景**：owner 复盘阅读页后提出五问——① `plainText` 有 blocks 了还留着是否浪费；② 译文连 local cache 都没落；
+③ 无感自动翻译但配置没入口、且推文页的工具栏（截图等）在文章页缺失；④ 文章背景应为 `bg-card` 而非透明；
+⑤ 重新想这块的真实用户需求。
+
+**落点**：
+
+- `plainText` 仅在无块文档（`format==='plain'`）时保留——rich 时 blocks 已覆盖全文，去掉冗余（回归由
+  AC-TWEET-012 新增用例锁定）。
+- 译文双层缓存：`CacheType` 增 `article-translation`，`getArticleTranslation` 走 localCache → DB，
+  `updateArticleTranslation` 双写；DB 关闭/本地开发也不再一刷新就重翻。
+- 工具栏补齐推文页能力：`ArticleToolbar`（返回 / 三态开关 / 重试翻译 / 一键截图）+ `ArticleOptionsMenu`
+  （设置 / 分享 / 复制正文 / 复制 Markdown / 下载图片）；`useAutoTranslateArticle` 改为返回 `{ status, translate }`。
+- 新增 `app/lib/article/markdown.ts`（`articleToText` / `articleToMarkdown`）。
+- 阅读内容改为 `bg-card` 卡片，截图直接捕获该卡片节点。
+
+**验证**：`test` 480 passed、`typecheck`/`lint` 绿、`verify --module tweet` 34 passed；本地 dev 实测
+`/article/2103576349499855160` 与 `/article/2099885132379500562` SSR 200，含 `bg-card` / 工具栏文案 /
+markdown `<table>`，且自定义渲染组件不再泄漏 `node` 属性。
+
+**踩坑**：react-markdown 的自定义组件会把 mdast `node` 注入 props，直接 `{...props}` 会渲染成 DOM 属性——
+`ArticleMarkdown` 统一 `withoutNode` 剥离。
+
+## 修复文章行内加粗整段误应用（owner 反馈 `status/2103463356913098908`）
+
+**现象**：`https://x.com/bang_dream_on/status/2103463356913098908` 的正文里只有段首短句该加粗，
+实际整段（乃至全文）都渲染成粗体。
+
+**定位（真机上游数据）**：该文 `content_state` 无任何 entity/mention，`inlineStyleRanges` 形如
+`{offset:0,length:15,style:"Bold"}`——只覆盖段首。而 `buildRuns` 只在 LINK/mention/hashtag 边界切分，
+无 span 时整块成为一个 run，`stylesFor` 的「区间有重叠即命中」判断就把 Bold 应用到整段。
+
+**修复**：`buildRuns` 改为按「实体边界 ∪ 样式边界」切分（Draft.js 语义），每段用
+`stylesInRange` 取**恰好覆盖**它的样式；样式区间与实体同样参与切分。加粗范围因此精确到区间。
+
+**回归**：新增真实 fixture `test/fixtures/articles/2103463356913098908.json`（21 块，纯段落 + 段首 Bold），
+`AC-TWEET-014` 增用例断言 `b0tca` 块仅首行加粗、其余不加粗；`verify --ac AC-TWEET-014` 覆盖。
+
+**踩坑**：Draft.js run 的切分点是样式 ∪ 实体，不是只看实体；「区间有重叠」是错判据。
+
+## 文章内嵌推文改为真实渲染（owner 反馈 `status/2104076282107723935`）
+
+**问题**：文章里的 `TWEET` 实体此前只渲染一张「嵌入的帖子 → 在 X 查看」的占位卡。
+
+**方案**：
+
+- 取数：`loader` 用 `collectEmbeddedTweetIds(blocks)` 收集 `TWEET` 实体 id，`Promise.all` 经
+  `getTweets(id, getLocalTweet)` 缓存链**并行**取回，单条失败降级 `null`。
+- 渲染：`ArticleBody` 增 `renderEmbed?: (id) => ReactNode` 注入点（缺省保持轻量链接卡）；阅读页注入
+  `ArticleEmbeddedTweet`——复用只读推文组件 `MyPlainTweet`。这样解析/渲染纯层不引入交互式推文栈，
+  离线 `renderToString` 用例保持稳定。
+- 收口：推文自身时间戳已链接 X 原帖，故去掉「在 X 查看」；取不到（删除/受限/失败）回退原链接卡。
+
+**回归**：新增真实 fixture `test/fixtures/articles/2104076282107723935.json`（103 块 / 19 媒体 / 4 TWEET）；
+AC-TWEET-019 覆盖 id 收集与 `renderEmbed` 委派/回退；AC-tweet.md v1.6。
+
+**验证**：`verify --ac AC-TWEET-019` 绿、`test` 全绿、`typecheck`/`lint` 绿；本地 dev 实测
+`/article/2104076282107723935` SSR 200 且内嵌推文以推文卡片渲染（非占位卡）。
diff --git a/docs/development-log/README.md b/docs/development-log/README.md
index 2f09d58a..14a7bceb 100644
--- a/docs/development-log/README.md
+++ b/docs/development-log/README.md
@@ -6,6 +6,7 @@
 
 | 日期                        | 主题                                                                                                                                                                                                                                                                                                                       |
 | --------------------------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| [2026-09-27](2026-09-27.md) | X Article 长文：裸链接 → 富文本块文档（Draft.js `content_state`）+ 独立阅读页 `/article/:id` + 紧凑卡（`details()` 补 `withArticleRichContentState`，`fieldToggles` 必须 JSON 字符串）；分块翻译服务端就绪、客户端待接线；AC-TWEET-012~016 + ADR-009                                                                       |
 | [2026-09-25](2026-09-25.md) | 修复 X 前端迁移（webpack→Rolldown/Vite）击穿 client transaction id 导致 get tweet 全站失败：改从仍提供旧外壳的路由探测取文档 → **真因 = 外壳请求漏带 cookie**（`buildXShellHeaders`，仅登录态返回含 `ondemand.s` 的旧外壳）+ `X_SHELL_URLS` 候选校验作 guest 兜底；沉淀 postmortem 013 + AC-TWEET-011 外壳 cookie 回归防护 |
 | [2026-09-16](2026-09-16.md) | X Space 卡片接入（audiospace 空壳卡片 → `AudioSpaceById` 补全标题/主播/人数/时长；范围裁定「卡片 + 跳转 X 播放」；AC-SPACE-001~008；不改高危解析器）                                                                                                                                                                       |
 | [2026-09-12](2026-09-12.md) | 验证诚信修复落地（F1 dev server `NODE_ENV` 泄漏 / F2 零匹配守卫 + 模块别名 / F3 死断言 / F4 AC↔测试名元测试 / F5 workflow 步骤解析 / F8 去 fixture 自证 / F9 AC-TRANS 命名 / F10 断言 lint / F12 README / F13 deprecated 参数）+ postmortem 011                                                                            |
diff --git a/docs/features/tweet/article.md b/docs/features/tweet/article.md
new file mode 100644
index 00000000..7abba44f
--- /dev/null
+++ b/docs/features/tweet/article.md
@@ -0,0 +1,232 @@
+# X Article（长文）解析 · 渲染 · 分块翻译 — 实施追踪
+
+> 状态：🚧 进行中（2026-09-27）— §A 纯文本修复 ✅ / §B 富文本块文档 + 阅读页 ✅ / §C 分块翻译 ✅ 端到端已接线
+> AC：[`verify/acceptance-criteria/AC-tweet.md`](../../../verify/acceptance-criteria/AC-tweet.md)（AC-TWEET-012~019）
+> 关联：`docs/development-log/2026-09-27.md`（调查链）、`docs/planning/backlog.md`（未决条目）、ADR-009
+> Fixtures：`test/fixtures/articles/*.json`（真实上游抓取）
+
+---
+
+## 1. 问题
+
+文章型推文（`https://x.com/<user>/article/<id>`）经 `/api/tweet/get` 过去只返回正文里的一条
+t.co 裸链接，标题与正文全丢。触发样例：
+
+| 推文 id               | 文章 id               | 形态                                           |
+| --------------------- | --------------------- | ---------------------------------------------- |
+| `2104058634452005231` | `2104009234858024962` | 纯段落 + hashtag span + 行内粗体               |
+| `2103576349499855160` | `2103535187426709504` | header / 7 张图片 / 无序列表                   |
+| `2099885132379500562` | `2099881096674721793` | GFM **表格**（MARKDOWN 实体）/ 链接 / @mention |
+
+## 2. 关键结论（实测，非推测）
+
+### 2.1 根因两层
+
+1. **请求侧**：文章全文需 `fieldToggles`，而 `TweetRequests.details()` 过去完全没带；即便按
+   `User.ts` 的写法传**对象**，axios 会序列化成 `fieldToggles[withArticlePlainText]=true`（实测
+   `axios.getUri`），而 X 只认 `fieldToggles={"withArticlePlainText":true}` 这种 JSON 字符串
+   （对齐 `variables`/`features`）。**对象写法会被 X 静默忽略**——这是「有 metadata 没全文」的隐蔽坑。
+2. **解析/渲染侧**：`enrichTweet` 从未读取 `article` 节点，`EnrichedTweet` 也无承载字段。
+
+### 2.2 富文本字段是现成的
+
+`replies()` 早已带 `fieldToggles: {"withArticleRichContentState":true,...}`（`requests/Tweet.ts:350`），
+说明 `content_state` 是存在的字段——`details()` 补同款 toggle 即可拿到完整块文档。
+
+### 2.3 `TweetResultByRestId` 的 `article` 节点实测结构
+
+```jsonc
+article.article_results.result = {
+  id, rest_id, title, preview_text, plain_text,          // 文本层
+  content_state: {
+    blocks: [
+      { key, text, type, data, entityRanges: [{ key, offset, length }], inlineStyleRanges: [{ offset, length, style }] }
+    ],
+    entityMap: [ { key: "0", value: { type, mutability, data } } ]   // 也见过 Record 形态
+  },
+  media_entities: [ { id, media_id, media_key, media_info: { original_img_url, original_img_width, original_img_height } } ],
+  cover_media: { ...同上 },
+  metadata: { first_published_at_secs }
+}
+```
+
+- **block.type**：`unstyled` / `header-one/two/three` / `unordered-list-item` / `ordered-list-item` /
+  `blockquote` / `atomic`
+- **inlineStyleRanges.style**：`Bold` / `Italic`（首字母大写）
+- **entityMap value.type**：`LINK{url}` / `MARKDOWN{markdown}` / `MEDIA{mediaItems[{localMediaId,mediaCategory,mediaId}]}` /
+  `DIVIDER` / `TWEET{tweetId}`（读取侧为 camelCase `mediaItems`；发布侧 API 为 snake_case `media_items`）
+- **`@mention` / `#hashtag` 不走 entityMap**：在 `block.data.mentions` / `block.data.hashtags` 的
+  `{ fromIndex, toIndex, text }` span 里（与 entityRanges/inlineStyleRanges 同一套 UTF-16 偏移）
+
+### 2.4 「表格」「代码」= `MARKDOWN` 实体
+
+X Article **没有** table / code 块类型。作者写的 GFM（含 `| a | b |` 表格、` ` ``` 代码块）
+原样存在 `entityMap[].value.data.markdown` 里。样例 `2099885132379500562` 的实体 key `5` 就是一张
+Markdown 表格。→ 渲染 `MARKDOWN` 必须走 **markdown 渲染器**（本项目此前无任何 markdown 渲染器/依赖）。
+
+### 2.5 富文本只在 `details` 路径取
+
+`search` / `list` / `user-timeline` 不带 `withArticleRichContentState`，其 `article` 节点可能缺失。
+故设计为：**仅 `get` + `replies` 取富文本**；其它路径由 `resolveArticleLink(entities)` 给出
+「仅链接」的最小卡片入口，进入 `/article/:id` 后再拉全文（避免逐条放大 payload / 429）。
+
+## 3. 数据链
+
+```
+/enrichTweet (parseTweet.ts)
+   └─ mapArticle(rawTweet.article?.article_results?.result, entities)   (lib/react-tweet/utils/article.ts)
+        ├─ parseContentState(result.content_state, result.media_entities)  (lib/article/parse.ts)
+        │     → ArticleBlock[]（paragraph/heading/list-item/quote/markdown/divider/image/embed-tweet/link/unknown）
+        ├─ mediaFromRaw(cover_media) → coverImage
+        └─ metadata.first_published_at_secs → publishedAt(ms)
+   → EnrichedTweet.article: TweetArticle { id,url,title,previewText,plainText,format,coverImage,publishedAt,blocks }
+
+TweetNode / PlainTweet → TweetArticleCard（紧凑卡，Link → /article/:tweetId）
+/routes/article.tsx → ArticleBody(blocks)（阅读页）
+```
+
+## 4. 已确认的产品决策（owner 2026-09-27）
+
+| 决策     | 选择                                                                         |
+| -------- | ---------------------------------------------------------------------------- |
+| 呈现     | **独立阅读页 `/article/:id`**；推文内保持紧凑卡（线程不铺长文）              |
+| 翻译     | **分块双语**（标题 + 正文各块；代码/图片/嵌入帖不译）                        |
+| 取数范围 | **仅 get + replies**；search/list/timeline 只给仅链接卡片入口                |
+| 嵌入帖   | **真实推文渲染**（loader 并行取回，取数失败回退紧凑链接卡）                  |
+| 翻译开关 | **保留「原文 / 译文 / 双语」三态**，文章页同样可切；截图选「仅译文」控制长度 |
+
+## 5. 实现落点（当前工作区）
+
+| 层             | 文件                                                                                                           | 说明                                                                                                      | 状态 |
+| -------------- | -------------------------------------------------------------------------------------------------------------- | --------------------------------------------------------------------------------------------------------- | ---- |
+| 请求           | `app/lib/rettiwt-api/requests/Tweet.ts`                                                                        | `details()` fieldToggles = `{withArticleRichContentState:true, withArticlePlainText:true}`（JSON 字符串） | ✅   |
+| 原始类型       | `app/lib/rettiwt-api/types/raw/tweet/Details.ts`                                                               | `Result.article` 节点 + `RawArticle*` 接口                                                                | ✅   |
+| 领域类型       | `app/types/article.ts` · `app/types/index.ts`                                                                  | `TweetArticle`（含 `format` 判别）/`ArticleBlock`/`ArticleRun`/`ArticleMedia`；`EnrichedTweet.article`    | ✅   |
+| 解析（纯）     | `app/lib/article/parse.ts`                                                                                     | `parseContentState` / `derivePlainText` / `normalizeEntityMap` / `mediaFromRaw`                           | ✅   |
+| 映射（纯）     | `app/lib/react-tweet/utils/article.ts`                                                                         | `mapArticle` / `isArticleUrl` / `extractArticleIdFromUrl` / `resolveArticleId` / `resolveArticleLink`     | ✅   |
+| 挂载           | `app/lib/react-tweet/utils/parseTweet.ts`                                                                      | `enrichTweet` 产出 `article`                                                                              | ✅   |
+| 回填           | `app/lib/service/getTweet.server.ts`                                                                           | `backfillArticleDetails` 判据改 `format==='rich'`（flat 缓存读时升级）                                    | ✅   |
+| 渲染           | `app/components/article/*`（`ArticleBody`·`ArticleRuns`·`ArticleMarkdown`·`ArticleImage`·`ArticleEmbedTweet`） | 块 → 组件；markdown 走 react-markdown + remark-gfm                                                        | ✅   |
+| 内嵌推文       | `app/routes/article.tsx` · `ArticleEmbeddedTweet.tsx` · `ArticleBody.renderEmbed` · `collectEmbeddedTweetIds`  | loader 并行取回内嵌推文 → 注入只读推文组件渲染；取数失败回退链接卡（AC-019）                              | ✅   |
+| 卡片           | `app/components/tweet/TweetArticleCard.tsx`                                                                    | 封面 + 标题 + 摘要 + 「阅读全文」→ `/article/:tweetId`                                                    | ✅   |
+| 挂载           | `TweetNode.tsx` · `PlainTweet.tsx` · `tweet-body.tsx`                                                          | 卡片挂载 + 正文重复链接去重                                                                               | ✅   |
+| 路由           | `app/routes/article.tsx` · `app/routes.ts`                                                                     | 阅读页（SSR loader → `getTweets(id, getLocalTweet)`）                                                     | ✅   |
+| 依赖           | `package.json`                                                                                                 | `react-markdown` + `remark-gfm`（MARKDOWN 实体渲染）                                                      | ✅   |
+| 翻译（服务端） | `app/lib/article/translate.ts`                                                                                 | `autoTranslateArticle` 按块分批 + 占位符校验                                                              | ✅   |
+| 翻译（端点）   | `app/routes/api/ai/ai-translation.ts`                                                                          | 新增 `type:'article'` 分支                                                                                | ✅   |
+| 翻译（校验）   | `app/lib/validations/tweet.ts`                                                                                 | `AITranslationSchema` 增 `article` 变体；`tweetSchema` 增 `updateArticleTranslations` intent              | ✅   |
+| 翻译（状态）   | `app/lib/stores/translation.ts` · `hooks.ts`                                                                   | `articleTranslations` / `articleTranslationStatus` + selectors                                            | ✅   |
+| 翻译（触发）   | `app/hooks/use-auto-translate-article.ts`                                                                      | 每篇触发一次（loader 已回填则跳过），写 store + best-effort 落库                                          | ✅   |
+| 翻译（持久化） | `app/lib/database/schema.ts` · `drizzle/0002_*`                                                                | `tweet_article_translations(tweetId unique, translations json)` + migration                               | ✅   |
+| 翻译（同步）   | `app/lib/service/articleTranslationSync.ts` · `getTweet.server.ts`                                             | POST `/api/tweet/set` intent `updateArticleTranslations`；`getArticleTranslation` 回填                    | ✅   |
+| 翻译（渲染）   | `app/components/article/{ArticleTranslatedText,ArticleTranslateToggle}.tsx` · `routes/article.tsx`             | 占位符还原 + 原文/双语/仅译文三态开关 + 标题三态                                                          | ✅   |
+
+## 6. 分块翻译设计（重点）
+
+现有推文实体管线（`AITranslation.ts`）假设**单块文本 + 占位符集合精确相等 + 位置游标回填**：
+长文会超 token、占位符易丢、位置一乱就**静默错位**。故文章另起按 **块 key** 对齐的管线：
+
+```
+autoTranslateArticle(article, { modelInstance, modelName, thinkingLevel, translationGlossary })
+  1. 收集可译块（paragraph/heading/list-item/quote）+ title；跳过 markdown/image/embed-tweet/divider
+  2. 块内 link/mention/hashtag → 占位符 <<__LINK_n__>>（n = 该块内非文本 run 序号，从 0 起）
+  3. 按字符预算（~2600）分批；每批一次 generateText（Output.object）
+       schema: { title?: string, blocks: Record<blockKey, string> }
+  4. 逐块校验占位符集合是否精确相等；不通过 → 仅重试该批（≤2 次），仍失败则丢弃该块（不写脏数据）
+  5. 跳过已是中文的块（含 CJK 且无假名）；返回 { title?, blocks }
+```
+
+**渲染还原**：`ArticleBody` 按原 run 顺序把译文里的 `<<__LINK_n__>>` 还原为第 n 个非文本 run 的
+可点击元素（链接/mention/hashtag），译文空格与标点原样保留。
+
+**三态显示**（`ArticleBody mode`）：
+
+- `original`：仅原文；`translation`：仅译文；`bilingual`：原文 + 其下译文（次级色 + 左侧竖线）
+- 截图选 `translation`（仅译文）即得短图——**直接复用现有开关**，无需新 UI
+
+**存储**：客户端 `articleTranslations[tweetId]`（会话级）；服务端 `tweet_article_translations`
+表（jsonb，按 tweetId 唯一）。**不能**放进 `tweet.jsonContent`——它会被上游结果整条 upsert 覆盖。
+
+## 7. 缓存与回填
+
+三层缓存（memory LRU / FS `cache/*.json` / DB `jsonContent`）都存**无版本**的 `EnrichedTweet`。
+`article.format`（`plain`→`rich`）作为结构判别：`getLocalTweet` 出口发现旧 flat 缓存（或缺失）
+且正文含文章链接时，重抓一次上游并用 `format==='rich'` 结果 best-effort 写回两层缓存
+（`setLocalCache` + `insertToTweetDB`）。取数失败（429/网络）保持原样，不伪造。
+
+## 8. 验收标准（AC）
+
+`AC-tweet.md` v1.6：AC-TWEET-012（文章解析/URL 判别）、013（`details()` fieldToggles 序列化，JSON 字符串不变量）、
+014（`content_state` → 块文档）、015（flat→rich 回填）、016（`ArticleBody` 真实渲染）、
+017（分块翻译离线契约：占位符序列化 + 中文跳过 + 落库 intent 校验）、018（三态渲染 + 占位符还原）、
+019（内嵌推文 id 收集 + 阅读页注入真实推文渲染 / 回退链接卡）。
+
+## 9. 当前状态与未完成（诚实清单）
+
+**✅ 已可用（本地实测）**：`/api/tweet/get/2103576349499855160` 返回 `article.format=rich`、81 块
+（11 heading / 7 image / 13 list-item / 50 paragraph）+ 封面；`/article/2103576349499855160` SSR 200，
+渲染标题 / `<h2>` / 图片。
+
+**✅ Phase C 分块翻译已端到端接线**：migration `drizzle/0002_*`；`/api/tweet/set` intent
+`updateArticleTranslations` + `getArticleTranslation` 回填；阅读页 `useAutoTranslateArticle` + 三态开关
+（原文/双语/仅译文，标题与正文同步）+ loader 回填持久化译文；AC-017/018；`llms.ts` / OpenAPI 快照 / SKILL.md
+补 `article`。
+
+**✅ UX 精修（owner 反馈，同日）**：
+
+- **数据瘦身**：`format==='rich'` 时不再冗余存 `plainText`（blocks 已覆盖全文）——`articleFromRawResult` 仅在无块文档时保留。
+- **译文双层缓存**：`CacheType` 增 `article-translation`；`getArticleTranslation` 走 localCache → DB，
+  `updateArticleTranslation` 同时写两层——DB 关闭（或本地开发）时译文也不丢，重访不再重翻。
+- **工具栏对齐推文页**：新增 `ArticleToolbar`（返回 / 三态开关 / 重试翻译 / 一键截图）+ `ArticleOptionsMenu`
+  （设置 / 分享 / 复制正文 / 复制 Markdown / 下载图片）；翻译失败可手动重试（`useAutoTranslateArticle` 现返回 `translate(force)`）。
+- **导出**：`app/lib/article/markdown.ts`（`articleToText` / `articleToMarkdown` / `articleBlocksToMarkdown`）。
+- **视觉**：阅读内容改为 `bg-card` 卡片（`rounded-2xl border bg-card p-4 sm:p-6`），截图捕获该卡片节点。
+- **内嵌推文真实渲染**：loader 收集 `TWEET` 实体 id 并用 `getTweets(id, getLocalTweet)` **并行**取回（缓存链），
+  经 `ArticleBody.renderEmbed` 注入复用只读推文组件 `MyPlainTweet`；推文自身时间戳已链接 X 原帖，故去掉
+  「在 X 查看」；取数失败/删除降级回原链接卡（AC-019）。
+
+**剩余（非阻塞）**：
+
+1. **DB migration 未执行**：`drizzle/0002_*` 已生成，但**未对线上库 `db:migrate`**（需 owner 在部署环境执行）。
+2. **可选**：文章页截图路由 `plain-article/:id`（若需对阅读页无头截图）。
+3. **未提交**：全部改动仍在工作区，未 commit（建议按 §11 拆分）。
+4. **LLM 端到端**未在沙箱验证（无 apiKey）；AC-017 只锁喂给模型的输入形态与落库契约，实际分批翻译调用需真机验证。
+5. **旧缓存残留**：已缓存的 rich 文章仍带旧 `plainText` 直到缓存过期；新抓取即瘦身。
+
+## 10. 已知限制 / 风险
+
+- `content_state` 字段名随上游可能演化（`entityMap` 数组 vs Record 两种形态解析器均已兼容；未知块降级为段落）。
+- MARKDOWN 实体依赖 `react-markdown` + `remark-gfm`（新增运行时依赖，约 40 个传递包）；react-markdown 不用
+  `dangerouslySetInnerHTML`，无 XSS 面。
+- search/list/timeline **只有仅链接卡片**（无正文），进 `/article/:id` 才拉全文——有意为之。
+- 极少数文章需登录态；取不到时降级为 flat 卡片。
+- 阅读页路由按**推文 id**（`/article/:tweetId`），不是文章 id（`/i/article/<articleId>`）——两者不同。
+- 文档级集成：篇幅 / 嵌套 markdown 仍以「可读」为准；翻译占位符校验失败的块会被丢弃（宁缺勿脏）。
+
+## 11. 建议提交拆分（Conventional Commits）
+
+1. `fix(tweet): parse X article plain text`（请求 toggle + 类型 + mapArticle + 回填 + AC-012/013）
+2. `feat(article): parse Draft.js content_state into a block document`（解析器 + 模型 + fixture + 单测 + AC-014）
+3. `feat(article): render articles on a dedicated reader page`（组件 + `/article/:id` + 紧凑卡 + 截图补齐 + AC-015/016）
+4. `feat(article): block-level bilingual translation`（migration + intent + 阅读页三态接线 + 组件整理 + AC-017/018）
+5. `docs(article): sync llms/OpenAPI/skill + feature doc + dev log`
+
+## 12. 变更文件清单
+
+**新增**：`app/types/article.ts` · `app/lib/article/{parse,translate,markdown,index}.ts` · `app/components/article/*`（含 `ArticleEmbeddedTweet`）·
+`app/routes/article.tsx` · `app/hooks/use-auto-translate-article.ts` · `app/lib/service/articleTranslationSync.ts` ·
+`drizzle/0002_greedy_omega_red.sql` · `test/fixtures/articles/*.json`（含内嵌推文样例 `2104076282107723935.json`）·
+`test/unit/{article-parse,article-translate,article-markdown,article}.spec.ts` · `test/acceptance/article-render.spec.ts` · 本文件。
+
+**修改**：`app/lib/rettiwt-api/requests/Tweet.ts` · `app/lib/rettiwt-api/types/raw/tweet/Details.ts` ·
+`app/types/index.ts` · `app/lib/react-tweet/utils/{article,parseTweet,index}.ts` ·
+`app/lib/service/getTweet.server.ts` · `app/lib/localCache.ts`（`CacheType` 增 `article-translation`）·
+`app/lib/react-tweet/twitter-theme/tweet-body.tsx` ·
+`app/components/tweet/{TweetArticleCard,index,TweetNode,PlainTweet}.tsx` · `app/routes.ts` ·
+`app/routes/api/{ai/ai-translation,tweet/set}.ts` · `app/lib/validations/tweet.ts` · `app/lib/stores/{translation,hooks}.ts` ·
+`app/lib/database/schema.ts` · `app/lib/obs-log.ts` · `app/lib/llms.ts` · `eslint.config.mjs` · `package.json` · `bun.lock` ·
+`.agents/skills/anon-tweet/{SKILL.md,references/anon-tweet-openapi.json}` ·
+`test/unit/{article,getLocalTweet}.spec.ts` · `verify/acceptance-criteria/AC-tweet.md` · `docs/development-log/2026-09-27.md`。
+
+**不改**：`app/lib/AITranslation.ts`（高危，保持零改动）、`app/lib/localCache.ts` 核心机制、DB `tweet.jsonContent` 结构、
+`routes/api/tweet/{get,search,replies,list}.ts` 响应形态（`article` 自然透传）。
diff --git a/docs/planning/architecture.md b/docs/planning/architecture.md
index 6dcc4e80..68094a7e 100644
--- a/docs/planning/architecture.md
+++ b/docs/planning/architecture.md
@@ -91,3 +91,28 @@
 - **决策**: 抽 `createMediaUrl(originalUrl, config)` 纯函数统一代理逻辑，所有 React/非 React 路径走同一函数
 - **背景**: 代理/视频/截图四套重复 URL 转换 → 双代理、漏代理、漏下载
 - **后果**: 截图等待用 `document.fonts.ready` 而非固定 delay；S7 Media Proxy Verifier 待实施
+
+## ADR-009: X Article 块文档 + 独立阅读页 + 按块翻译
+
+- **日期**: 2026-09-27
+- **决策**: 文章型推文（`x.com/<user>/article/<id>`）从「裸链接」升级为**结构化块文档**，
+  在**独立阅读页 `/article/:id`** 渲染，翻译**按块**进行并与推文实体翻译解耦
+- **背景**:
+  - 文章正文不在 `legacy.full_text`/`note_tweet`，只在 `article.article_results.result`；
+    富文本需 `fieldToggles.withArticleRichContentState`（且必须是 JSON **字符串**，对象写法被 X 静默忽略）
+  - 线上格式是 Draft.js `content_state`（`blocks[]` + `entityMap[]`）；表格/代码是 `MARKDOWN` 实体里的 GFM
+  - 现有实体翻译管线假设「单块文本 + 占位符精确相等 + 位置游标回填」，无法承载长文
+- **设计**:
+  - **数据模型**：`TweetArticle { format: 'rich'|'plain', blocks?: ArticleBlock[] , coverImage, publishedAt, ... }`；
+    `ArticleBlock` 为可判别联合（段落/标题/列表/引用/markdown/分隔线/图片/嵌入帖/链接/未知）
+  - **解析纯函数**：`parseContentState`（`app/lib/article/parse.ts`）——两种 entityMap 形态兼容、未知块降级为段落
+  - **渲染**：`ArticleBody` 组合块组件；`MARKDOWN` 走 react-markdown + remark-gfm；推文内为紧凑 `TweetArticleCard`
+  - **翻译**：`autoTranslateArticle` 以**块 key** 为对齐键分批翻译，块内 link/mention/hashtag 用
+    `<<__LINK_n__>>` 占位符保护、**逐块**校验；译文按块存（`tweet_article_translations`，不复用 `tweet_entities`）
+  - **取数范围**：仅 `get` + `replies` 取富文本；search/list/timeline 只给仅链接卡片入口
+  - **缓存**：`article.format` 作为结构判别，旧 flat 缓存在 `getLocalTweet` 出口读时自愈升级
+- **后果**:
+  - 新增运行时依赖 `react-markdown` + `remark-gfm`
+  - 新增 DB 表 `tweet_article_translations`（需 migration）
+  - 三态开关（原文/译文/双语）复用现有 `translationMode`，截图选「仅译文」控长
+  - 详见 `docs/features/tweet/article.md`
diff --git a/docs/planning/backlog.md b/docs/planning/backlog.md
index caf9e354..95b087c1 100644
--- a/docs/planning/backlog.md
+++ b/docs/planning/backlog.md
@@ -1,6 +1,6 @@
 # Backlog（任务清单）
 
-**项目**: anonTweet | **最后更新**: 2026-09-12
+**项目**: anonTweet | **最后更新**: 2026-09-27
 
 > 本清单**只保留当前阶段关注的未决任务**，不累积已完成条目。规划下一阶段时从这里选任务；条目完成后移入归档。
 > 已完成/收口归档：[backlog-completed-2026-09-12-ig-story.md](../archive/backlog-completed-2026-09-12-ig-story.md)（Instagram Story 接入）+ [backlog-completed-2026-09-12.md](../archive/backlog-completed-2026-09-12.md)（验证诚信修复 F1~F13：主体已完成，F6/F7/F11 所有者裁定「暂不修复」延后归档，测试基建到此收口）+ [backlog-completed-2026-09-11.md](../archive/backlog-completed-2026-09-11.md)（三阶段排期已完成条目 + 原未决条目裁决明细）；历史完成记录：[TODO.md](../archive/TODO.md)。
@@ -18,6 +18,8 @@
 
 > 阶段计划之外、按需推进的增量项，完成后勾选、移入归档。
 
+- [ ] [feat] **X Article（长文）解析 / 渲染 / 分块翻译**（方案：`docs/features/tweet/article.md`；ADR-009；AC-TWEET-012~019）— ✅ **功能完成（2026-09-27）**：纯文本修复 ✅ + 富文本块文档解析 ✅ + 独立阅读页 `/article/:id` + 紧凑卡 ✅ + 分块翻译端到端 ✅（migration `0002_*` + `/api/tweet/set` intent `updateArticleTranslations` + 阅读页自动翻译/三态开关 + loader 回填 + AC-017/018）+ `llms.ts`/OpenAPI 快照/SKILL.md 补 `article`；阅读页 UX 精修（工具栏：三态开关/重试/一键截图 + 更多菜单：设置/分享/复制/下载图片、`bg-card` 卡片、译文 localCache+DB 双层、rich 去冗余 `plainText`、行内样式按区间精确切分、内嵌推文真实渲染（并行取数/失败回退链接卡））。**剩余（非阻塞）**：① 线上库执行 `db:migrate`（owner 环境）；② 可选 `plain-article/:id` 截图路由；③ LLM 分批翻译需真机验证（沙箱无 apiKey）。**风险**：`react-markdown` 新增依赖、`content_state` 上游演化。（工作量：约 2 人日 / DRI：— / 风险：中）
+
 - [ ] [ux] 可安装 PWA + Web Share Target：系统分享 X/IG 链接直达推文/IG（方案：`docs/features/pwa/web-share-target.md`；AC：`verify/acceptance-criteria/AC-pwa.md`；域名：https://anon-tweet.chilfish.top/）— ✅ 已实现（AC-PWA-001/002/003 落地）；✅ 能力盘点（`docs/features/pwa/capability-audit.md`，2026-09-06：线上与仓库同步、SW #6900 健康）；✅ 场景落地（2026-09-06，AC-pwa.md v1.3 AC-PWA-004~008）：iOS 安装外壳 meta（apple-touch-icon + apple-mobile-web-app-\*）+ manifest shortcuts(/search)/screenshots(wide/narrow 真实截图) + share 出向（navigator.share，降级复制原文链接）+ share 截图（卡片图转 File 走 Web Share L2 files，不支持降级下载）+ 版本更新提示（可见/聚焦探测新 SW → 横幅「立即刷新」，首次访问不打扰，AC-PWA-008）。**剩余：真机验证**（安装 + 系统分享进出 + iOS 添加主屏幕 + 安装对话框截图，沙箱无设备）+ 视觉验收（图标/theme_color/maskable/apple-touch-icon 底色）。P2 候选（showSaveFilePicker / 最近查看 / 静态缓存需 ADR）见 capability-audit.md。
 
 ## 不做清单（裁决为删除/延后，Apple 式减法）

From 1a2ad4281c26de48025f09a87dd8298e3d3ab62a Mon Sep 17 00:00:00 2001
From: Chilfish <chill4fish@gmail.com>
Date: Sun, 27 Sep 2026 14:22:54 +0800
Subject: [PATCH 4/8] chore(taste): record learned preferences

Co-authored-by: CommandCodeBot <noreply@commandcode.ai>
---
 .commandcode/taste/taste/taste.md | 28 ++++++++++++++++++++++++++--
 1 file changed, 26 insertions(+), 2 deletions(-)

diff --git a/.commandcode/taste/taste/taste.md b/.commandcode/taste/taste/taste.md
index 53191df8..d2fa87cc 100644
--- a/.commandcode/taste/taste/taste.md
+++ b/.commandcode/taste/taste/taste.md
@@ -26,7 +26,7 @@
 - Wants active planning docs (e.g. `docs/planning/backlog.md`) scoped to only the current phase's open items — completed work must be archived (into an `docs/archive/` file with an index entry) instead of accumulating in the live file; rejects the "keep stacking everything into one list" pattern. Confidence: 0.7
 - Wants a single source of truth for version numbers: dislikes the same version hardcoded in multiple files (code, docs, scripts) where the copies can drift out of sync, and expects versioning to derive from one canonical place (e.g. read `package.json` instead of hand-writing literals). Confidence: 0.85
 - Expects commit messages to match the repo's existing convention: English Conventional Commits subjects with a scope naming the touched area (e.g. `docs(review): ...`, `docs(readme): ...`, `docs(community): ...`, `chore(taste): ...`) plus a descriptive body enumerating the included changes, rather than free-form subjects. Confidence: 0.75
-- "Commit your changes" (e.g. "commit你的更改") means commit only — do not push unless explicitly asked; report that the branch was left unpushed. Confidence: 0.65
+- "Commit your changes" (e.g. "commit你的更改", "先commit所有的更改") means commit only — do not push unless explicitly asked; report that the branch was left unpushed. Confidence: 0.7
 - Fixing a bug is not done until recurrence is prevented: expects the fix to include regression guards (behavioral tests reproducing the failure mode), the relevant check wired into pre-push/CI gates, and inline documentation of the constraint at the point it's used — not just correcting the immediate symptom. Confidence: 0.75
 - Wants non-obvious dependency/version constraints pinned and made visible at the point of use (e.g. using `~`/exact pins and an explanatory comment when a version is bounded by another package's peer range) so a future routine upgrade can't silently drift into an incompatible major. Confidence: 0.7
 - Prefers minimal, non-noisy UI copy: dislikes long/verbose disclosure text placed directly on the page (calls it "太吵" / too noisy), and values restraint over richness ("有时候丰富不代表好") — favor trimming or dropping informative-but-cluttering content instead of adding more. Confidence: 0.8
@@ -51,4 +51,28 @@
 - For a missing/unmapped data field, expects the fix to run the concrete pipeline end to end — temp probe against the real upstream, add the value into the corresponding field/type, then render it — instead of broad codebase exploration or an upfront design discussion; points at the closest existing repo file (e.g. `app/lib/react-tweet/utils/get-tweet.ts`) to copy as the pattern. Confidence: 0.65
 - Expects assumptions about external services/URL schemes to be validated against the live endpoint per variant rather than over-generalized from one working example — reports back after real-world testing (e.g. twimg `/media/<slug>` works as both `?format=jpg` and `/slug.jpg`, but `/card_img/<id>/<slug>` only resolves in query form and 404s as `/slug.jpg`, so a blanket normalization broke link-card images). Confidence: 0.65
 - Expects degraded/edge states of external data to be surfaced in the UI rather than the element silently disappearing: after verifying the happy path himself, flags that deleted/unavailable resources or replay-disabled cases have "没有对应的UI提示" and wants a visible fallback/tombstone (or an explicit non-actionable state such as "不可回放") instead of a bare or missing element. Confidence: 0.7
-- When reporting a gap or reviewing a feature, supplies a concrete real-world sample (a live URL / specific resource id) to reproduce against rather than describing the case abstractly. Confidence: 0.55
+- When reporting a gap or reviewing a feature, supplies a concrete real-world sample (a live URL / specific resource id) to reproduce against rather than describing the case abstractly — e.g. pastes the full error stack trace plus the exact tweet id when a request fails. Confidence: 0.6
+- Does not accept "it's an upstream problem" as a resolution: when a third-party dependency/library breaks because the external service changed, wants the project made working again via a workaround inside our own code ("虽然这是上游x的问题，你看看我们该怎么解决？") rather than waiting on upstream or merely explaining the cause. Confidence: 0.6
+
+- Before acting outside our own repo (opening an upstream PR/issue), wants read-only reconnaissance first and a draft he can review — explicitly says "你先别急着真的去提，只是拿gh cli看看情况"; publishing is a separate, explicitly-approved step, while local/routine actions stay autonomous. Confidence: 0.75
+- When drafting a contribution to a third-party project, expects the agent to mine that project's own conventions first — CONTRIBUTING if present, the PR template filled in verbatim, the real target branch (e.g. `dev`, not `main`), the CI gates, and their formatter/linter config (tabs, quote style, naming rules, member ordering) — instead of applying our repo's conventions or generic open-source etiquette. Confidence: 0.7
+- Wants a proposed fix to fit the upstream project's actual infrastructure: review prior attempts at the same bug, confirm a dependency bump is really impossible before proposing a code workaround, and don't ship test suites or patterns the project doesn't have (e.g. no Vitest tests when the repo only manual-verifies via a playground). Confidence: 0.6
+- For an upstream contribution, expects the fork-based workflow once the draft is approved: fork the project, base the change on our own copy, and keep the fix as a single commit dedicated to that issue ("在我们的版本针对该问题的单条commit"), then open the PR from there — rather than a multi-commit branch or pushing into the upstream repo directly. Confidence: 0.6
+- Wants lengthy deliverables (PR bodies, draft write-ups) put into a temporary markdown file (in the repo's gitignored `tmp/`) rather than pasted into chat, and kept concise — the long, section-by-section PR draft drew "先写在临时的md里，应该不用那么啰嗦" ("write the content into a temp md first, it doesn't need to be so verbose"). Confidence: 0.7
+- Rejects a fix that only works by bypassing a transient external condition: when the workaround succeeds merely because an in-progress upstream rollout hasn't reached that code path yet ("只是当前还没轮到这个页面所以我们才能绕过实现"), he wants the mechanism decomposed first — which specific inputs are actually broken vs. still supplied — and a plan that addresses the dying dependency itself, not the timing exploit shipped as if it were the fix. Confidence: 0.8
+- Before implementing a fix whose approach is still unsettled, wants the research and plan written into a repo doc first ("先把你的调研和计划写到文档里"): root-cause breakdown, the evidence gathered, and a comparison of the candidate solutions with their tradeoffs (multiple options, not just one recommendation), laid out in short/medium/long-term tiers. Confidence: 0.7
+- Scopes a fix to the deployment's actual runtime constraints instead of covering hypothetical ones: when told the project always supplies credentials ("cookie 是必传的，就不存在 guest 的场景了"), expects the agent to verify that assumption against the repo (env/config/auth code) and then simplify — drop the guest/anonymous fallback paths and target the real path, rather than keeping defensive branches for scenarios the project never hits. Confidence: 0.6
+- Strongly rejects over-engineering: expects the change to match the scale of the reference/prior implementation, and pushes back when the agent builds far more machinery than the problem needs ("真的有这么复杂吗？... 的实现没那么多吧？") — a ~70-line probe loop holding new module consts, helper functions, a new enum member and an extracted method, where the project's own precedent for the same bug was a one-line URL swap, is wrong-sized. Prefer the smallest diff that solves the problem, and check the project's existing precedent for how big the fix should be. Confidence: 0.8
+- Once a fix's approach is settled, wants it implemented in the project's own repository and taken through the full PR flow ("先在本项目实现该改进，按pr流程走") — create a `fix/...` branch, split the work into commits by concern (code / tests / docs), run the repo gates, push, open the PR with a concise body, and verify CI — rather than only preparing an upstream patch or editing files in place. Confidence: 0.75
+- For an implementation he didn't write (e.g. reviewing someone else's merged/pending PR), wants a blunt critical assessment ("锐评这个实现，它真的做好了吗？") rather than validation: concrete file/line evidence, findings ranked by severity, an explicit split of what the change genuinely got right vs. what is still unfinished, and a forward-looking answer for when the upstream changes again — not a neutral summary. Confidence: 0.6
+- Treats "the PR is mergeable" as the trigger for the whole close-out to run autonomously — "你就能走后续的合并和本地同步流程": execute the merge by the repo's convention (`gh pr merge --merge --delete-branch`), then sync the local checkout (checkout main, fast-forward to `origin/main`, delete the merged local branch, prune stale remote branches) and confirm the post-merge CI run on main is green. For our own repo a merge is routine/mechanical work, not something to stop and ask permission for (unlike publishing to a third-party upstream repo). Confidence: 0.7
+- Defines "done" for a PR as _genuinely mergeable_, and expects the agent to drive it there autonomously by the repo's own conventions — "按规范来实施吧，直到该pr真的能被合并了". A passing CI/gate is not the bar on its own: when the new behaviour lacks its acceptance criterion / regression test, closing that verification gap counts as part of the merge work (runtime semantics kept unchanged if possible), and the work ends only once checks are green and the PR reports MERGEABLE/CLEAN. Confidence: 0.7
+- Treats code quality as a first-class deliverable, not a nicety: reads through the touched code and calls out "难看" / weird / non-idiomatic writing ("不合规范的写法") that makes it hard to understand and maintain, expecting the implementation task to include cleaning it up (extract cohesive modules, drop non-null assertions/dead branches, type-narrow instead of ad-hoc control flow) rather than only adding the new feature. Confidence: 0.8
+- Expects UI design to get explicit attention as part of any implementation, not just functional correctness — flags it in the task brief ("注意UI方面的设计"), so visual polish/design of the changed surfaces should be actively addressed and reported. Confidence: 0.65
+- Dislikes redundant data in payloads/caches: when one field already covers a second field's content (e.g. a rich block document already contains the full text, making `plainText` a duplicate that can be tens of KB), wants the redundant field dropped rather than carrying both — "感觉有些浪费空间，毕竟都有blocks了". Confidence: 0.7
+- Expects caching to be wired at _every_ applicable layer, not just the persistent store: if a value is cached to the DB it must also be cached in the local (client/FS) cache, so it survives DB-off / local-dev and a reload doesn't recompute it ("翻译的内容即便是local cache也得缓存到位吧"). Confidence: 0.65
+- Expects feature/UI parity across analogous surfaces: when a new page mirrors an existing one (article reader vs tweet page), it should carry the same toolbar/actions (settings/config entry, one-click screenshot, copy, share, download) rather than shipping a stripped-down version ("tweet 页的那些工具栏缺了"). Confidence: 0.7
+- Wants a feature reasoned about from the real end-user's need/job, not just made functionally complete — explicitly asks the agent to step back and rethink the true user-need UX for the surface ("再想想这一块真实用户需求的UX"). Confidence: 0.6
+- Prefers reusing the project's existing components over placeholder/stub UI: when content of a type the app already renders (an embedded tweet) shows as a dumb placeholder card, expects the existing component to be wired in — "感觉其实是能用我们的推文组件去渲染" — rather than accepting the placeholder. Confidence: 0.65
+- Expects independent upstream fetches to be issued in parallel (batch/Promise.all through the existing cache chain) instead of serially, and assumes parallelism is the natural design for such cases ("这应该是能并行获取的吧"). Confidence: 0.6
+- Drops UI affordances that duplicate what the content already provides: once the embedded element itself links to the canonical destination (a rendered tweet's timestamp → the X permalink), the extra "在 X 查看" button is redundant and should go (keeping a fallback link only for the unavailable case). Confidence: 0.6

From 49a96db5a2e1a5778c52fa27f3e14a3f5c3e416a Mon Sep 17 00:00:00 2001
From: Chilfish <chill4fish@gmail.com>
Date: Sun, 27 Sep 2026 14:26:09 +0800
Subject: [PATCH 5/8] chore(build): use Vite 8 native tsconfig paths in
 Storybook config

The .storybook Vite config imported `vite-tsconfig-paths`, which is not
declared in package.json and not installed, so `bun run build-storybook`
(the pre-push gate) failed to resolve it. Vite 8 resolves tsconfig paths
natively, so drop the plugin and opt in via `resolve.tsconfigPaths`.

Co-authored-by: CommandCodeBot <noreply@commandcode.ai>
---
 .storybook/vite.config.ts | 5 +++--
 1 file changed, 3 insertions(+), 2 deletions(-)

diff --git a/.storybook/vite.config.ts b/.storybook/vite.config.ts
index d1822146..e6748ec1 100644
--- a/.storybook/vite.config.ts
+++ b/.storybook/vite.config.ts
@@ -1,10 +1,11 @@
 import tailwindcss from '@tailwindcss/vite'
 import { defineConfig } from 'vite'
-import tsconfigPaths from 'vite-tsconfig-paths'
 
 export default defineConfig(() => ({
   plugins: [
     tailwindcss(),
-    tsconfigPaths(),
   ],
+  resolve: {
+    tsconfigPaths: true,
+  },
 }))

From 2a663f4e3aa7eaa95654198391bc7ac76bcc2299 Mon Sep 17 00:00:00 2001
From: Chilfish <chill4fish@gmail.com>
Date: Sun, 27 Sep 2026 14:37:42 +0800
Subject: [PATCH 6/8] refactor(article): extract ArticleReader and split the
 pure serializer

- pull the full-article card out of the /article route into ArticleReader,
  so every reader form is presentational and storyable
- move serializeArticleBlock into lib/article/serialize and stop the
  lib/article barrel from re-exporting translate: translate imports the
  server-only ai-timeout (reads `process`), which must not reach the
  client / Storybook module graph

Co-authored-by: CommandCodeBot <noreply@commandcode.ai>
---
 app/components/article/ArticleReader.tsx | 123 +++++++++++++++++++++++
 app/components/article/index.ts          |   1 +
 app/lib/article/index.ts                 |   5 +-
 app/lib/article/serialize.ts             |  27 +++++
 app/lib/article/translate.ts             |  20 +---
 app/routes/article.tsx                   |  90 ++---------------
 6 files changed, 169 insertions(+), 97 deletions(-)
 create mode 100644 app/components/article/ArticleReader.tsx
 create mode 100644 app/lib/article/serialize.ts

diff --git a/app/components/article/ArticleReader.tsx b/app/components/article/ArticleReader.tsx
new file mode 100644
index 00000000..53f58bf7
--- /dev/null
+++ b/app/components/article/ArticleReader.tsx
@@ -0,0 +1,123 @@
+import type { ReactNode, Ref } from 'react'
+import type { ArticleViewMode } from './ArticleBody'
+import type { EnrichedTweet, TweetArticle } from '~/types'
+import { Separator } from '~/components/ui/separator'
+import { isArticleUrl } from '~/lib/react-tweet/utils/article'
+import { formatDate } from '~/lib/react-tweet/utils/date-utils'
+import { cn } from '~/lib/utils'
+import { ArticleBody } from './ArticleBody'
+import { ArticleImage } from './ArticleImage'
+
+/** 推文正文是否只有一条文章链接（这类推文不重复展示正文） */
+function isArticleOnlyText(tweet: EnrichedTweet): boolean {
+  const entities = tweet.entities ?? []
+  return entities.length > 0 && entities.every(entity => entity.type === 'url' && isArticleUrl(entity.href))
+}
+
+interface ArticleReaderProps {
+  tweet: EnrichedTweet
+  article: TweetArticle
+  mode?: ArticleViewMode
+  /** 按块 key 索引的译文（供正文三态） */
+  translations?: Record<string, string>
+  /** 标题译文（与正文译文分开存储） */
+  translatedTitle?: string
+  /** 内嵌推文渲染注入（见 `ArticleBody.renderEmbed`） */
+  renderEmbed?: (tweetId: string) => ReactNode
+  /** 截图捕获节点 */
+  captureRef?: Ref<HTMLDivElement>
+  className?: string
+}
+
+/**
+ * 文章全文卡片：标题 + 作者行 + 推文附言 + 封面 + 块文档正文。
+ *
+ * 纯展示（无状态、无 store），从 `/article/:id` 阅读页抽出以便在 Storybook 覆盖
+ * 「各种形态」：rich / markdown / plain 兜底 / 内嵌推文（真实/回退）/ 三态译文 /
+ * 封面有无 / 附言有无。工具栏与数据取数仍由路由负责。
+ */
+export function ArticleReader({
+  tweet,
+  article,
+  mode = 'original',
+  translations,
+  translatedTitle,
+  renderEmbed,
+  captureRef,
+  className,
+}: ArticleReaderProps) {
+  const showTranslatedTitle = Boolean(translatedTitle) && mode !== 'original'
+  const publishTime = article.publishedAt ?? tweet.created_at
+  const showCommentary = Boolean(tweet.text?.trim()) && !isArticleOnlyText(tweet)
+
+  return (
+    <article
+      ref={captureRef}
+      className={cn('rounded-2xl border border-border/60 bg-card p-4 sm:p-6', className)}
+    >
+      <header className="space-y-4">
+        <div>
+          <h1 className="text-2xl font-bold leading-tight text-foreground">
+            {mode === 'translation' && translatedTitle ? translatedTitle : article.title || 'X 长文'}
+          </h1>
+          {mode === 'bilingual' && showTranslatedTitle && (
+            <p className="mt-2 border-l-2 border-border/70 pl-2.5 text-lg font-semibold text-muted-foreground">
+              {translatedTitle}
+            </p>
+          )}
+        </div>
+
+        <div className="flex items-center gap-3">
+          {tweet.user?.profile_image_url_https && (
+            <img
+              src={tweet.user.profile_image_url_https}
+              alt={tweet.user.name}
+              className="size-10 shrink-0 rounded-full object-cover"
+              loading="lazy"
+            />
+          )}
+          <div className="min-w-0">
+            <div className="truncate text-sm font-semibold text-foreground">{tweet.user?.name}</div>
+            <div className="truncate text-xs text-muted-foreground">
+              @
+              {tweet.user?.screen_name}
+              {' · '}
+              {formatDate(publishTime, 'yyyy年MM月dd日')}
+            </div>
+          </div>
+          <a
+            href={`https://x.com/i/article/${article.id}`}
+            target="_blank"
+            rel="noopener noreferrer nofollow"
+            className="ml-auto shrink-0 text-xs font-medium text-primary hover:underline"
+          >
+            在 X 查看 →
+          </a>
+        </div>
+
+        {showCommentary && (
+          <p className="text-[15px] leading-7 whitespace-pre-wrap text-foreground/80">{tweet.text}</p>
+        )}
+
+        {article.coverImage && <ArticleImage media={article.coverImage} />}
+      </header>
+
+      <Separator className="my-6" />
+
+      {article.blocks?.length
+        ? (
+            <ArticleBody
+              blocks={article.blocks}
+              translations={translations}
+              mode={mode}
+              renderEmbed={renderEmbed}
+            />
+          )
+        : (
+            <p className="text-[15px] leading-7 whitespace-pre-wrap text-foreground/90">
+              {article.plainText ?? article.previewText ?? ''}
+            </p>
+          )}
+    </article>
+  )
+}
diff --git a/app/components/article/index.ts b/app/components/article/index.ts
index 29eaf4d7..28deb573 100644
--- a/app/components/article/index.ts
+++ b/app/components/article/index.ts
@@ -5,6 +5,7 @@ export { ArticleEmbedTweet } from './ArticleEmbedTweet'
 export { ArticleImage } from './ArticleImage'
 export { ArticleMarkdown } from './ArticleMarkdown'
 export { ArticleOptionsMenu } from './ArticleOptionsMenu'
+export { ArticleReader } from './ArticleReader'
 export { ArticleRuns } from './ArticleRuns'
 export { ArticleToolbar } from './ArticleToolbar'
 export { ArticleTranslateToggle } from './ArticleTranslateToggle'
diff --git a/app/lib/article/index.ts b/app/lib/article/index.ts
index 47ab4214..9e66a707 100644
--- a/app/lib/article/index.ts
+++ b/app/lib/article/index.ts
@@ -1,2 +1,5 @@
+// 注意：不要在此 barrel 导出 `./translate` —— 它引用服务端专用的
+// `ai-timeout`（读 `process`），会污染客户端 / Storybook 的模块图。
+// 需要翻译管线请直接从 `~/lib/article/translate` 引入（仅服务端调用点）。
 export * from './parse'
-export * from './translate'
+export * from './serialize'
diff --git a/app/lib/article/serialize.ts b/app/lib/article/serialize.ts
new file mode 100644
index 00000000..2b101a5d
--- /dev/null
+++ b/app/lib/article/serialize.ts
@@ -0,0 +1,27 @@
+import type { ArticleBlock, ArticleRun } from '~/types'
+
+/**
+ * 文章块 → 送入翻译模型的文本（纯函数，无服务端依赖）。
+ *
+ * 单独成模块的原因：`translate.ts` 引用了服务端专用的 `ai-timeout`（读到 `process`），
+ * 不能被客户端 / Storybook 的 story 图引入；而序列化本身是纯逻辑，story 与翻译管线
+ * 共用同一套占位符规则。
+ *
+ * 非文本 run（link / mention / hashtag）按出现顺序换为 `<<__LINK_n__>>`（n 从 0 起）。
+ */
+export function serializeArticleBlock(
+  block: Extract<ArticleBlock, { runs: ArticleRun[] }>,
+): { text: string, placeholders: string[] } {
+  const placeholders: string[] = []
+  let counter = 0
+  const text = block.runs
+    .map((run) => {
+      if (run.type === 'text')
+        return run.text
+      const placeholder = `<<__LINK_${counter++}__>>`
+      placeholders.push(placeholder)
+      return placeholder
+    })
+    .join('')
+  return { text, placeholders }
+}
diff --git a/app/lib/article/translate.ts b/app/lib/article/translate.ts
index 2f3e9696..bd4a9ac1 100644
--- a/app/lib/article/translate.ts
+++ b/app/lib/article/translate.ts
@@ -7,6 +7,10 @@ import { createAITranslationAbortSignal } from '~/lib/ai-timeout'
 import { models } from '~/lib/constants'
 import { obsLog } from '~/lib/obs-log'
 import { getProviderStrategy, getThinkingConfig } from '~/lib/providers'
+import { serializeArticleBlock } from './serialize'
+
+// 序列化是纯逻辑，拆到 `./serialize` 供客户端/Storybook 复用；此处再导出保持原 API
+export { serializeArticleBlock }
 
 /**
  * X Article 的**按块**翻译管线。
@@ -47,22 +51,6 @@ interface BatchItem {
   placeholders: string[]
 }
 
-/** 块 → 送入 LLM 的文本（非文本 run → per-block 占位符） */
-export function serializeArticleBlock(block: Extract<ArticleBlock, { runs: ArticleRun[] }>): { text: string, placeholders: string[] } {
-  const placeholders: string[] = []
-  let counter = 0
-  const text = block.runs
-    .map((run) => {
-      if (run.type === 'text')
-        return run.text
-      const placeholder = `<<__LINK_${counter++}__>>`
-      placeholders.push(placeholder)
-      return placeholder
-    })
-    .join('')
-  return { text, placeholders }
-}
-
 function isTranslatable(block: ArticleBlock): block is Extract<ArticleBlock, { runs: ArticleRun[] }> {
   return TRANSLATABLE_TYPES.has(block.type)
 }
diff --git a/app/routes/article.tsx b/app/routes/article.tsx
index ac55101a..f0814f8a 100644
--- a/app/routes/article.tsx
+++ b/app/routes/article.tsx
@@ -1,13 +1,10 @@
 import type { Route } from './+types/article'
 import type { ArticleBlock, EnrichedTweet } from '~/types'
 import { useRef } from 'react'
-import { ArticleBody, ArticleEmbeddedTweet, ArticleImage, ArticleToolbar } from '~/components/article'
-import { Separator } from '~/components/ui/separator'
+import { ArticleEmbeddedTweet, ArticleReader, ArticleToolbar } from '~/components/article'
 import { useAutoTranslateArticle } from '~/hooks/use-auto-translate-article'
 import { collectEmbeddedTweetIds } from '~/lib/article'
 import { TweetNotFound } from '~/lib/react-tweet'
-import { isArticleUrl } from '~/lib/react-tweet/utils/article'
-import { formatDate } from '~/lib/react-tweet/utils/date-utils'
 import { getTweets } from '~/lib/service/getTweet'
 import { getArticleTranslation, getLocalTweet } from '~/lib/service/getTweet.server'
 import {
@@ -82,12 +79,6 @@ export function meta({ loaderData }: Route.MetaArgs) {
   return tags
 }
 
-/** 推文正文是否只有一条文章链接（这类推文不重复展示正文） */
-function isArticleOnlyText(tweet: NonNullable<Route.ComponentProps['loaderData']['tweet']>): boolean {
-  const entities = tweet.entities ?? []
-  return entities.length > 0 && entities.every(entity => entity.type === 'url' && isArticleUrl(entity.href))
-}
-
 export default function ArticlePage({ loaderData }: Route.ComponentProps) {
   const { tweet, tweetId, translation: persisted, embeds } = loaderData
   const article = tweet?.article
@@ -113,11 +104,6 @@ export default function ArticlePage({ loaderData }: Route.ComponentProps) {
   }
 
   const translation = stored ?? persisted ?? undefined
-  const translatedTitle = translation?.title
-  const showTranslatedTitle = Boolean(translatedTitle) && mode !== 'original'
-
-  const publishTime = article.publishedAt ?? tweet.created_at
-  const showCommentary = tweet.text?.trim() && !isArticleOnlyText(tweet)
 
   // 内嵌推文：取到数据即用真实推文组件渲染；未取到（删除/受限/失败）回退链接卡
   const renderEmbed = (embedId: string) => {
@@ -139,71 +125,15 @@ export default function ArticlePage({ loaderData }: Route.ComponentProps) {
         onRetry={() => void translate(true)}
       />
 
-      <article ref={articleRef} className="rounded-2xl border border-border/60 bg-card p-4 sm:p-6">
-        <header className="space-y-4">
-          <div>
-            <h1 className="text-2xl font-bold leading-tight text-foreground">
-              {mode === 'translation' && translatedTitle ? translatedTitle : article.title || 'X 长文'}
-            </h1>
-            {mode === 'bilingual' && showTranslatedTitle && (
-              <p className="mt-2 border-l-2 border-border/70 pl-2.5 text-lg font-semibold text-muted-foreground">
-                {translatedTitle}
-              </p>
-            )}
-          </div>
-
-          <div className="flex items-center gap-3">
-            {tweet.user?.profile_image_url_https && (
-              <img
-                src={tweet.user.profile_image_url_https}
-                alt={tweet.user.name}
-                className="size-10 shrink-0 rounded-full object-cover"
-                loading="lazy"
-              />
-            )}
-            <div className="min-w-0">
-              <div className="truncate text-sm font-semibold text-foreground">{tweet.user?.name}</div>
-              <div className="truncate text-xs text-muted-foreground">
-                @
-                {tweet.user?.screen_name}
-                {' · '}
-                {formatDate(publishTime, 'yyyy年MM月dd日')}
-              </div>
-            </div>
-            <a
-              href={`https://x.com/i/article/${article.id}`}
-              target="_blank"
-              rel="noopener noreferrer nofollow"
-              className="ml-auto shrink-0 text-xs font-medium text-primary hover:underline"
-            >
-              在 X 查看 →
-            </a>
-          </div>
-
-          {showCommentary && (
-            <p className="text-[15px] leading-7 whitespace-pre-wrap text-foreground/80">{tweet.text}</p>
-          )}
-
-          {article.coverImage && <ArticleImage media={article.coverImage} />}
-        </header>
-
-        <Separator className="my-6" />
-
-        {article.blocks?.length
-          ? (
-              <ArticleBody
-                blocks={article.blocks}
-                translations={translation?.blocks}
-                mode={mode}
-                renderEmbed={renderEmbed}
-              />
-            )
-          : (
-              <p className="text-[15px] leading-7 whitespace-pre-wrap text-foreground/90">
-                {article.plainText ?? article.previewText ?? ''}
-              </p>
-            )}
-      </article>
+      <ArticleReader
+        tweet={tweet}
+        article={article}
+        mode={mode}
+        translations={translation?.blocks}
+        translatedTitle={translation?.title}
+        renderEmbed={renderEmbed}
+        captureRef={articleRef}
+      />
     </div>
   )
 }

From e280ba8748df671d17d77e51f8c2b0ce95168d0f Mon Sep 17 00:00:00 2001
From: Chilfish <chill4fish@gmail.com>
Date: Sun, 27 Sep 2026 14:38:01 +0800
Subject: [PATCH 7/8] test(ui): add Storybook stories for the article
 components

- article.fixtures reuses test/fixtures/articles through mapArticle, so
  stories and ACs share one data source
- cover ArticleBody (blocks / three-state / embed injection) and the
  ArticleReader full-article forms (rich, markdown, plain fallback, cover
  presence, commentary, embedded tweets real + fallback) plus an
  interactive ArticlePage with the toolbar
- add small stories for ArticleToolbar / OptionsMenu / TranslateToggle,
  the inline runs + translated runs, and TweetArticleCard
- ac-ui.spec now requires a story for every article component

Co-authored-by: CommandCodeBot <noreply@commandcode.ai>
---
 app/stories/ArticleBody.stories.tsx      | 139 +++++++++++++++++++++++
 app/stories/ArticlePage.stories.tsx      |  62 ++++++++++
 app/stories/ArticleReader.stories.tsx    | 122 ++++++++++++++++++++
 app/stories/ArticleToolbar.stories.tsx   |  68 +++++++++++
 app/stories/TweetArticleCard.stories.tsx |  30 +++++
 app/stories/article.fixtures.ts          |  54 +++++++++
 test/acceptance/ac-ui.spec.ts            |  19 ++++
 7 files changed, 494 insertions(+)
 create mode 100644 app/stories/ArticleBody.stories.tsx
 create mode 100644 app/stories/ArticlePage.stories.tsx
 create mode 100644 app/stories/ArticleReader.stories.tsx
 create mode 100644 app/stories/ArticleToolbar.stories.tsx
 create mode 100644 app/stories/TweetArticleCard.stories.tsx
 create mode 100644 app/stories/article.fixtures.ts

diff --git a/app/stories/ArticleBody.stories.tsx b/app/stories/ArticleBody.stories.tsx
new file mode 100644
index 00000000..6b1a15bc
--- /dev/null
+++ b/app/stories/ArticleBody.stories.tsx
@@ -0,0 +1,139 @@
+import type { Meta, StoryObj } from '@storybook/react-vite'
+import type { ArticleRun } from '~/types'
+import {
+  ArticleBody,
+  ArticleEmbeddedTweet,
+  ArticleEmbedTweet,
+  ArticleImage,
+  ArticleMarkdown,
+  ArticleRuns,
+} from '~/components/article'
+import { ArticleTranslatedText } from '~/components/article/ArticleTranslatedText'
+import {
+  articleBold,
+  articleManyEmbeds,
+  articleMarkdown,
+  articlePlain,
+  articleRich,
+  demoTranslations,
+} from './article.fixtures'
+import { tweetEnglish } from './tweet.fixtures'
+
+/**
+ * article 块文档渲染 story：ArticleBody（+ 三态/内嵌推文注入）与块级子组件。
+ * 数据全部复用于 test/fixtures/articles（真实上游），与 AC-TWEET-016/018/019 同源。
+ */
+const meta = {
+  title: 'Article/Body',
+  parameters: { layout: 'centered' },
+  decorators: [
+    Story => (
+      <div className="w-full max-w-[640px] rounded-2xl border border-border/60 bg-card p-6">
+        <Story />
+      </div>
+    ),
+  ],
+} satisfies Meta
+
+export default meta
+
+type Story = StoryObj<typeof meta>
+
+export const RichDocument: Story = {
+  render: () => <ArticleBody blocks={articleRich.blocks ?? []} />,
+}
+
+export const MarkdownTable: Story = {
+  render: () => <ArticleBody blocks={articleMarkdown.blocks ?? []} />,
+}
+
+/** 只覆盖段首的 Bold 不应扩散到整段（AC-TWEET-014 回归样例） */
+export const BoldRanges: Story = {
+  render: () => <ArticleBody blocks={articleBold.blocks ?? []} />,
+}
+
+export const PlainParagraphs: Story = {
+  render: () => <ArticleBody blocks={articlePlain.blocks ?? []} />,
+}
+
+const markdownTranslations = demoTranslations(articleMarkdown)
+
+export const Translated: Story = {
+  render: () => (
+    <ArticleBody
+      blocks={articleMarkdown.blocks ?? []}
+      translations={markdownTranslations.blocks}
+      mode="translation"
+    />
+  ),
+}
+
+export const Bilingual: Story = {
+  render: () => (
+    <ArticleBody
+      blocks={articleMarkdown.blocks ?? []}
+      translations={markdownTranslations.blocks}
+      mode="bilingual"
+    />
+  ),
+}
+
+/** 阅读页注入真实推文组件渲染内嵌帖（AC-TWEET-019） */
+export const EmbeddedTweet: Story = {
+  render: () => (
+    <ArticleBody
+      blocks={articleManyEmbeds.blocks ?? []}
+      renderEmbed={() => <ArticleEmbeddedTweet tweet={tweetEnglish} />}
+    />
+  ),
+}
+
+/** 取数失败/离线：回退轻量链接卡 */
+export const EmbedFallback: Story = {
+  render: () => <ArticleBody blocks={articleManyEmbeds.blocks ?? []} />,
+}
+
+const inlineRuns: ArticleRun[] = [
+  { type: 'text', text: '粗体 ', styles: ['bold'] },
+  { type: 'link', text: '链接', url: 'https://example.com/post' },
+  { type: 'text', text: ' 与 ' },
+  { type: 'mention', text: '@chilfish', href: 'https://x.com/chilfish' },
+  { type: 'text', text: ' · ' },
+  { type: 'text', text: '斜体', styles: ['italic'] },
+]
+
+export const InlineRuns: Story = {
+  render: () => (
+    <p className="text-[15px] leading-7 text-foreground/90">
+      <ArticleRuns runs={inlineRuns} />
+    </p>
+  ),
+}
+
+/** 译文里的 `<<__LINK_n__>>` 按原 run 顺序还原为可点击元素（AC-TWEET-018） */
+export const TranslatedRuns: Story = {
+  render: () => (
+    <p className="text-[15px] leading-7 text-foreground/90">
+      <ArticleTranslatedText translation="译文：<<__LINK_0__>> 与 <<__LINK_1__>> 结束" runs={inlineRuns} />
+    </p>
+  ),
+}
+
+export const MarkdownOnly: Story = {
+  render: () => (
+    <ArticleMarkdown text={'## 小标题\n\n| 名称 | 年份 |\n| --- | --- |\n| Example | 2026 |\n\n- 一\n- 二\n'} />
+  ),
+}
+
+export const ImageBlock: Story = {
+  render: () => (
+    <ArticleImage
+      media={{ id: 'demo', url: 'https://picsum.photos/seed/article/1200/800', width: 1200, height: 800 }}
+      caption="示例图注（caption 可选）"
+    />
+  ),
+}
+
+export const LinkCardOnly: Story = {
+  render: () => <ArticleEmbedTweet tweetId="2103032879496540640" />,
+}
diff --git a/app/stories/ArticlePage.stories.tsx b/app/stories/ArticlePage.stories.tsx
new file mode 100644
index 00000000..2943b36e
--- /dev/null
+++ b/app/stories/ArticlePage.stories.tsx
@@ -0,0 +1,62 @@
+import type { Meta, StoryObj } from '@storybook/react-vite'
+import type { ArticleViewMode } from '~/components/article'
+import { useRef, useState } from 'react'
+import { ArticleReader, ArticleToolbar } from '~/components/article'
+import { articleRich, demoTranslations } from './article.fixtures'
+import { tweetEnglish } from './tweet.fixtures'
+
+/**
+ * 阅读页全形态组合：ArticleToolbar + ArticleReader，三态开关可交互
+ * （原文 / 双语 / 仅译文），贴近 `/article/:id` 的真实布局（无数据取数）。
+ */
+const meta = {
+  title: 'Article/Page',
+  parameters: { layout: 'fullscreen' },
+} satisfies Meta
+
+export default meta
+
+type Story = StoryObj<typeof meta>
+
+const translations = demoTranslations(articleRich)
+
+function ArticlePageDemo({ initialMode = 'original' }: { initialMode?: ArticleViewMode }) {
+  const [mode, setMode] = useState<ArticleViewMode>(initialMode)
+  const captureRef = useRef<HTMLDivElement>(null)
+
+  return (
+    <div className="mx-auto w-full max-w-2xl px-4 py-6">
+      <ArticleToolbar
+        tweetId={tweetEnglish.id_str}
+        article={articleRich}
+        tweet={tweetEnglish}
+        captureRef={captureRef}
+        mode={mode}
+        onModeChange={setMode}
+        status="done"
+        hasTranslation
+        onRetry={() => {}}
+      />
+      <ArticleReader
+        tweet={tweetEnglish}
+        article={articleRich}
+        mode={mode}
+        translations={translations.blocks}
+        translatedTitle={translations.title}
+        captureRef={captureRef}
+      />
+    </div>
+  )
+}
+
+export const Interactive: Story = {
+  render: () => <ArticlePageDemo />,
+}
+
+export const PageBilingual: Story = {
+  render: () => <ArticlePageDemo initialMode="bilingual" />,
+}
+
+export const PageTranslationOnly: Story = {
+  render: () => <ArticlePageDemo initialMode="translation" />,
+}
diff --git a/app/stories/ArticleReader.stories.tsx b/app/stories/ArticleReader.stories.tsx
new file mode 100644
index 00000000..108f092b
--- /dev/null
+++ b/app/stories/ArticleReader.stories.tsx
@@ -0,0 +1,122 @@
+import type { Meta, StoryObj } from '@storybook/react-vite'
+import type { TweetArticle } from '~/types'
+import { ArticleEmbeddedTweet, ArticleReader } from '~/components/article'
+import { derivePlainText } from '~/lib/article/parse'
+import {
+  articleManyEmbeds,
+  articleMarkdown,
+  articlePlain,
+  articleRich,
+  demoTranslations,
+} from './article.fixtures'
+import { tweetEnglish } from './tweet.fixtures'
+
+/**
+ * ArticleReader —— 文章「全文」卡片的各形态：
+ * rich（标题/图片/列表）、markdown（GFM 表格）、plain 兜底、封面有无、附言有无、
+ * 内嵌推文（真实/回退）、三态译文（原文 / 双语 / 仅译文）。
+ * 数据复用 test/fixtures/articles（与 AC 同源）。
+ */
+const meta = {
+  title: 'Article/Reader',
+  parameters: { layout: 'centered' },
+  decorators: [
+    Story => (
+      <div className="w-full max-w-[672px] px-4 py-6">
+        <Story />
+      </div>
+    ),
+  ],
+} satisfies Meta
+
+export default meta
+
+type Story = StoryObj<typeof meta>
+
+/** 文章型推文本身只有一条文章链接 → 不渲染附言 */
+const articleOnlyTweet = {
+  ...tweetEnglish,
+  text: 'https://t.co/artcl',
+  entities: [{
+    type: 'url',
+    index: 0,
+    text: 'https://t.co/artcl',
+    display_url: 'x.com/i/article/…',
+    url: 'https://t.co/artcl',
+    expanded_url: 'https://x.com/i/article/2103576349499855160',
+    href: 'https://x.com/i/article/2103576349499855160',
+  }] as typeof tweetEnglish.entities,
+}
+
+const richTranslations = demoTranslations(articleRich)
+const markdownTranslations = demoTranslations(articleMarkdown)
+
+/** 无块文档的兜底形态：仅 plainText（内容由 blocks 派生，保持与线上一致） */
+const plainOnlyArticle: TweetArticle = {
+  ...articlePlain,
+  format: 'plain',
+  plainText: derivePlainText(articlePlain.blocks ?? []),
+  blocks: undefined,
+}
+
+export const RichDocument: Story = {
+  render: () => <ArticleReader tweet={articleOnlyTweet} article={articleRich} />,
+}
+
+/** 带作者附言的形态（推文正文非仅链接） */
+export const WithCommentary: Story = {
+  render: () => <ArticleReader tweet={tweetEnglish} article={articleRich} />,
+}
+
+export const MarkdownTable: Story = {
+  render: () => <ArticleReader tweet={articleOnlyTweet} article={articleMarkdown} />,
+}
+
+/** 无块文档 → plainText 兜底 */
+export const PlainFallback: Story = {
+  render: () => <ArticleReader tweet={articleOnlyTweet} article={plainOnlyArticle} />,
+}
+
+export const WithoutCover: Story = {
+  render: () => <ArticleReader tweet={articleOnlyTweet} article={{ ...articleRich, coverImage: undefined }} />,
+}
+
+export const Bilingual: Story = {
+  render: () => (
+    <ArticleReader
+      tweet={articleOnlyTweet}
+      article={articleRich}
+      translations={richTranslations.blocks}
+      translatedTitle={richTranslations.title}
+      mode="bilingual"
+    />
+  ),
+}
+
+export const TranslationOnly: Story = {
+  render: () => (
+    <ArticleReader
+      tweet={articleOnlyTweet}
+      article={articleMarkdown}
+      translations={markdownTranslations.blocks}
+      translatedTitle={markdownTranslations.title}
+      mode="translation"
+    />
+  ),
+}
+
+/** 内嵌推文：注入真实推文组件（AC-TWEET-019） */
+export const WithEmbeddedTweets: Story = {
+  render: () => (
+    <ArticleReader
+      tweet={articleOnlyTweet}
+      article={articleManyEmbeds}
+      renderEmbed={() => <ArticleEmbeddedTweet tweet={tweetEnglish} />}
+    />
+  ),
+}
+
+/** 内嵌推文取数失败 → 回退链接卡 */
+export const EmbedFallback: Story = {
+  render: () => <ArticleReader tweet={articleOnlyTweet} article={articleManyEmbeds} />,
+}
diff --git a/app/stories/ArticleToolbar.stories.tsx b/app/stories/ArticleToolbar.stories.tsx
new file mode 100644
index 00000000..e9cf99b7
--- /dev/null
+++ b/app/stories/ArticleToolbar.stories.tsx
@@ -0,0 +1,68 @@
+import type { Meta, StoryObj } from '@storybook/react-vite'
+import type { ArticleTranslationStatus } from '~/lib/stores/translation'
+import { useRef } from 'react'
+import { ArticleOptionsMenu, ArticleToolbar, ArticleTranslateToggle } from '~/components/article'
+import { articleMarkdown } from './article.fixtures'
+import { tweetEnglish } from './tweet.fixtures'
+
+/**
+ * article 阅读页工具栏 story：ArticleToolbar（返回 / 三态 / 重试 / 一键截图 + 更多菜单）
+ * 与拆出的 ArticleTranslateToggle / ArticleOptionsMenu。Router 上下文由全局 preview 提供。
+ */
+const meta = {
+  title: 'Article/Toolbar',
+  parameters: { layout: 'centered' },
+  decorators: [
+    Story => (
+      <div className="w-full max-w-[720px] bg-background p-4">
+        <Story />
+      </div>
+    ),
+  ],
+} satisfies Meta
+
+export default meta
+
+type Story = StoryObj<typeof meta>
+
+function ToolbarDemo({ status = 'idle', hasTranslation = false }: {
+  status?: ArticleTranslationStatus
+  hasTranslation?: boolean
+}) {
+  const captureRef = useRef<HTMLDivElement>(null)
+  return (
+    <ArticleToolbar
+      tweetId={tweetEnglish.id_str}
+      article={articleMarkdown}
+      tweet={tweetEnglish}
+      captureRef={captureRef}
+      mode="original"
+      onModeChange={() => {}}
+      status={status}
+      hasTranslation={hasTranslation}
+      onRetry={() => {}}
+    />
+  )
+}
+
+export const Original: Story = {
+  render: () => <ToolbarDemo />,
+}
+
+/** 翻译中：显示 loading 指示 + 三态开关（已有译文可切） */
+export const Translating: Story = {
+  render: () => <ToolbarDemo status="loading" hasTranslation />,
+}
+
+/** 翻译失败：显示「重试翻译」 */
+export const RetryAfterError: Story = {
+  render: () => <ToolbarDemo status="error" />,
+}
+
+export const TranslateToggle: Story = {
+  render: () => <ArticleTranslateToggle mode="bilingual" onModeChange={() => {}} />,
+}
+
+export const OptionsMenu: Story = {
+  render: () => <ArticleOptionsMenu article={articleMarkdown} tweet={tweetEnglish} />,
+}
diff --git a/app/stories/TweetArticleCard.stories.tsx b/app/stories/TweetArticleCard.stories.tsx
new file mode 100644
index 00000000..07f160f5
--- /dev/null
+++ b/app/stories/TweetArticleCard.stories.tsx
@@ -0,0 +1,30 @@
+import type { Meta, StoryObj } from '@storybook/react-vite'
+import { TweetArticleCard } from '~/components/tweet/TweetArticleCard'
+import { articleMarkdown, articleRich } from './article.fixtures'
+
+/**
+ * 推文内 X Article 紧凑卡（TweetArticleCard）：封面 + 标题 + 摘要 + 阅读入口。
+ */
+const meta = {
+  title: 'Tweet/ArticleCard',
+  parameters: { layout: 'centered' },
+  decorators: [
+    Story => (
+      <div className="w-full max-w-[520px] bg-card p-3">
+        <Story />
+      </div>
+    ),
+  ],
+} satisfies Meta
+
+export default meta
+
+type Story = StoryObj<typeof meta>
+
+export const WithCover: Story = {
+  render: () => <TweetArticleCard article={articleRich} tweetId={articleRich.id} />,
+}
+
+export const WithoutCover: Story = {
+  render: () => <TweetArticleCard article={{ ...articleMarkdown, coverImage: undefined }} tweetId={articleMarkdown.id} />,
+}
diff --git a/app/stories/article.fixtures.ts b/app/stories/article.fixtures.ts
new file mode 100644
index 00000000..bddc5549
--- /dev/null
+++ b/app/stories/article.fixtures.ts
@@ -0,0 +1,54 @@
+import type { RawTweet, TweetArticle } from '~/types'
+import { serializeArticleBlock } from '~/lib/article/serialize'
+import { mapArticle } from '~/lib/react-tweet/utils/article'
+import mvernalFixture from '../../test/fixtures/articles/2099885132379500562.json'
+import boldRangeFixture from '../../test/fixtures/articles/2103463356913098908.json'
+import trq212Fixture from '../../test/fixtures/articles/2103576349499855160.json'
+// 复用 test/ 下已冻结的真实上游 fixture（与 AC-TWEET-014/019 同源）
+import bandDreamFixture from '../../test/fixtures/articles/2104058634452005231.json'
+import embedRichFixture from '../../test/fixtures/articles/2104076282107723935.json'
+
+/**
+ * app/stories/article.fixtures.ts —— article 组件 story 共享数据
+ *
+ * 直接复用 `test/fixtures/articles/*.json`（真实上游抓取），经与线上同一套
+ * `mapArticle` 映射成 `TweetArticle`，避免 story 与 AC 断言各写一份数据。
+ */
+
+function toArticle(fixture: unknown): TweetArticle {
+  const article = mapArticle({ article: fixture } as unknown as RawTweet)
+  if (!article)
+    throw new Error('article fixture did not map to a TweetArticle')
+  return article
+}
+
+/** header / 图片 / 列表 / 段落（Claude effort 一文，含封面） */
+export const articleRich = toArticle(trq212Fixture)
+/** MARKDOWN 实体（GFM 表格）+ LINK 实体 + mention span（Moats 一文） */
+export const articleMarkdown = toArticle(mvernalFixture)
+/** 只覆盖段首的 Bold 区间（行内样式切分回归样例） */
+export const articleBold = toArticle(boldRangeFixture)
+/** 4 个 TWEET 实体（内嵌推文渲染样例） */
+export const articleManyEmbeds = toArticle(embedRichFixture)
+/** 纯段落 + hashtag span（日文公告，无块文档外的富文本） */
+export const articlePlain = toArticle(bandDreamFixture)
+
+/**
+ * 演示用逐块译文：直接用线上同一套 `serializeArticleBlock` 序列化后再加前缀，
+ * 因此 link/mention/hashtag 的 `<<__LINK_n__>>` 占位符会被完整保留，三态 story
+ * 能看到真实的占位符还原效果。
+ */
+export function demoTranslations(article: TweetArticle): { title?: string, blocks: Record<string, string> } {
+  const blocks: Record<string, string> = {}
+  for (const block of article.blocks ?? []) {
+    if (block.type === 'paragraph' || block.type === 'heading' || block.type === 'list-item' || block.type === 'quote') {
+      const { text } = serializeArticleBlock(block)
+      if (text.trim())
+        blocks[block.key] = `【译文】${text}`
+    }
+  }
+  return {
+    title: article.title ? `【译文】${article.title}` : undefined,
+    blocks,
+  }
+}
diff --git a/test/acceptance/ac-ui.spec.ts b/test/acceptance/ac-ui.spec.ts
index 79539084..3cfbc18e 100644
--- a/test/acceptance/ac-ui.spec.ts
+++ b/test/acceptance/ac-ui.spec.ts
@@ -63,6 +63,21 @@ const INS_COMPONENTS = [
   'PlainIGPost',
 ] as const
 
+// article 目录全部组件（index.ts 为 barrel 不算组件；由 ArticleBody / ArticleToolbar story 渲染覆盖）
+const ARTICLE_COMPONENTS = [
+  'ArticleBody',
+  'ArticleEmbedTweet',
+  'ArticleEmbeddedTweet',
+  'ArticleImage',
+  'ArticleMarkdown',
+  'ArticleOptionsMenu',
+  'ArticleReader',
+  'ArticleRuns',
+  'ArticleToolbar',
+  'ArticleTranslateToggle',
+  'ArticleTranslatedText',
+] as const
+
 // translation 在用目录（AltEditorComponents / EditorComponents 是内部部件，由
 // TranslationEditor / AltTranslationEditor story 透出，不单独计）
 const TRANSLATION_IN_USE = [
@@ -167,6 +182,10 @@ describe('AC-UI-VISION-001: every used component has a story (P1-2)', () => {
     expectCovered(INS_COMPONENTS, 'ins')
   })
 
+  it('every article component is covered by a story (file or rendered in a bundle)', () => {
+    expectCovered(ARTICLE_COMPONENTS, 'article')
+  })
+
   it('every in-use translation component is covered by a story', () => {
     expectCovered(TRANSLATION_IN_USE, 'translation')
   })

From 621f5fc39f237b5e19dc1ed898196bb2779d827c Mon Sep 17 00:00:00 2001
From: Chilfish <chill4fish@gmail.com>
Date: Sun, 27 Sep 2026 14:38:19 +0800
Subject: [PATCH 8/8] chore(taste): record learned preferences

Co-authored-by: CommandCodeBot <noreply@commandcode.ai>
---
 .commandcode/taste/taste/taste.md | 4 ++++
 1 file changed, 4 insertions(+)

diff --git a/.commandcode/taste/taste/taste.md b/.commandcode/taste/taste/taste.md
index d2fa87cc..46a84e4e 100644
--- a/.commandcode/taste/taste/taste.md
+++ b/.commandcode/taste/taste/taste.md
@@ -49,6 +49,7 @@
 - Treats a changelog as a historical record: reformatting it into a standard structure (Keep a Changelog sections, its original grouping demoted to sub-headings) is fine, but the recorded entries' content must not be rewritten. Confidence: 0.55
   rouping demoted to sub-headings) is fine, but the recorded entries' content must not be rewritten. Confidence: 0.55
 - For a missing/unmapped data field, expects the fix to run the concrete pipeline end to end — temp probe against the real upstream, add the value into the corresponding field/type, then render it — instead of broad codebase exploration or an upfront design discussion; points at the closest existing repo file (e.g. `app/lib/react-tweet/utils/get-tweet.ts`) to copy as the pattern. Confidence: 0.65
+- Prefers native/first-party framework capabilities over adding a plugin dependency: when a build tool's own config can do the job (e.g. Vite 8's built-in `resolve.tsconfigPaths` instead of the `vite-tsconfig-paths` plugin), wants the built-in used and the extra package not introduced. Confidence: 0.6
 - Expects assumptions about external services/URL schemes to be validated against the live endpoint per variant rather than over-generalized from one working example — reports back after real-world testing (e.g. twimg `/media/<slug>` works as both `?format=jpg` and `/slug.jpg`, but `/card_img/<id>/<slug>` only resolves in query form and 404s as `/slug.jpg`, so a blanket normalization broke link-card images). Confidence: 0.65
 - Expects degraded/edge states of external data to be surfaced in the UI rather than the element silently disappearing: after verifying the happy path himself, flags that deleted/unavailable resources or replay-disabled cases have "没有对应的UI提示" and wants a visible fallback/tombstone (or an explicit non-actionable state such as "不可回放") instead of a bare or missing element. Confidence: 0.7
 - When reporting a gap or reviewing a feature, supplies a concrete real-world sample (a live URL / specific resource id) to reproduce against rather than describing the case abstractly — e.g. pastes the full error stack trace plus the exact tweet id when a request fails. Confidence: 0.6
@@ -76,3 +77,6 @@
 - Prefers reusing the project's existing components over placeholder/stub UI: when content of a type the app already renders (an embedded tweet) shows as a dumb placeholder card, expects the existing component to be wired in — "感觉其实是能用我们的推文组件去渲染" — rather than accepting the placeholder. Confidence: 0.65
 - Expects independent upstream fetches to be issued in parallel (batch/Promise.all through the existing cache chain) instead of serially, and assumes parallelism is the natural design for such cases ("这应该是能并行获取的吧"). Confidence: 0.6
 - Drops UI affordances that duplicate what the content already provides: once the embedded element itself links to the canonical destination (a rendered tweet's timestamp → the X permalink), the extra "在 X 查看" button is redundant and should go (keeping a fallback link only for the unavailable case). Confidence: 0.6
+- Treats Storybook stories as a required part of shipping a component, not an optional extra: when a change adds new components without their stories he flags it ("还没写完整的 Storybook 样例") and expects complete, per-component stories added (and wired into the UI coverage spec) before the work is done. Confidence: 0.8
+- Wants Storybook stories to reuse the project's existing fixtures (the committed `test/fixtures/...` files) instead of hand-writing new inline sample data ("可以复用已有的 fixtures") — keep one source of truth for sample data across stories and acceptance tests. Confidence: 0.75
+- Expects client/Storybook module graphs to stay free of server-only code: rejects browser-runtime failures such as `process is not defined` caused by a story/fixture transitively importing server-only modules (e.g. `ai-timeout`), and expects the pure logic split into its own dependency-free module with the barrel no longer re-exporting the server-only entry (`~/lib/article` stopped re-exporting `./translate`, with a comment explaining why). Confidence: 0.6