fix(app-shell): a marketplace README fits its detail page; badges render as images, tables as tables - #30426

Requested by Bill · project thread
domain:ui#2 · os-bill · session_01Utp6Cb5R6JDdfyvtj3dPR2

Fixes #30330

Clause-②: no
Metadata-protocol: none

维护者速读

• 改了什么：商店详情页的 README 不再被截掉：长行自动换行，只有代码块和表格在自己框内横向滚动。徽章显示成图片，表格显示成表格，--- 显示成分隔线，不再露出 Markdown 原文。
• 为什么改：HotCRM 详情页（883 px 窗口）里一条 259 字符的代码行把整个 README 撑到 1926 px，右边被裁掉、无法滚动；徽章行显示成 ![License](LICENSE) … 字面。README 是应用的销售页，半截句子和原始标记让成品像半成品。
• 风险与回滚：只动 app-shell 商店目录两处（README 渲染器 MarkdownText、详情页两列加 min-w-0）及测试与 changeset，不动 spec、服务端与共享内联渲染器。图片只认绝对 https: 地址并以 no-referrer 加载，其余来源整段略去；控制台 CSP 本就允许 img-src https:。回滚即 revert 本 PR。
• 先看：ui/packages/app-shell/src/console/marketplace/MarkdownText.tsx（renderInline 的图片切分与 absoluteUrl、表格块规则）→ MarketplacePackagePage.tsx（两个网格单元的 min-w-0）→ 测试 MarkdownText.wideReadme-30330.test.tsx。
• 两分钟验证：pnpm --dir ui exec vitest run packages/app-shell/src/console/marketplace/__tests__/MarkdownText.wideReadme-30330.test.tsx packages/app-shell/src/console/marketplace/__tests__/MarketplacePackagePage.readmeWidth-30330.test.tsx，预期全部通过；在 main 的代码上同一命令 26 条红、5 条对照绿。
• 需要你做的：无，席位落地。

What changes

Which element forced the width (the card left it open). Below the lg breakpoint the detail page's grid gap-4 lg:grid-cols-3 has one implicit auto column, and a grid item's automatic minimum width is its content's min-content width. HotCRM's README has a fenced curl … -d '{"jsonrpc":…}' line of 259 characters; a pre does not wrap, so its min-content width is that line, and it sized the column, the About card and the README at about 1926 px. The pre already had overflow-x-auto, but it never became narrower than its line, so it never scrolled. (At lg and up the template is repeat(3, minmax(0, 1fr)), which has no automatic minimum, so the defect showed only on narrower windows.)

• MarketplacePackagePage.tsx. Both grid cells (README and Versions) carry min-w-0, so the column keeps the page's width and the fence scrolls inside itself.
• MarkdownText root. min-w-0 break-words, so a long unbroken word (a URL, a long code span) wraps instead of overflowing; a list item's text span gets min-w-0 beside its bullet for the same reason. A pre keeps white-space: pre and its own scroller; a table scrolls in its own overflow-x-auto box.

Why the badges printed as markup. HotCRM writes [![License](https://img.shields.io/…svg)](LICENSE). The renderer had no image rule, and the shared inline link rule read [![License](https://…svg) as a link whose text is ![License, leaving ](LICENSE) as text, which reads exactly as the card measured.

• Images. MarkdownText now matches ![alt](src "title") and the linked form [![alt](src)](href) before handing the rest of the text to @object-ui/components' renderInlineMarkdown (unchanged; it is shared with element:text and outside this card's surface). An image renders only from an absolute https: URL, with referrerPolicy="no-referrer", loading="lazy" and max-w-full; any other source (a repository-relative path, /…, //…, http:, data:, javascript:, any whitespace or control character) is left out, alt text included. A linked image keeps its anchor only for an absolute http(s): destination (new tab, noopener noreferrer, the README link look): a relative destination such as LICENSE would resolve against the console, not the repository. A code span is matched first, so `![x](y)` stays code. No fetch path is invented for relative sources.
• Tables. The card's Expected names wide tables, and HotCRM's README has five pipe tables that printed as one long line of pipes. A GFM pipe table (a line with a pipe above a delimiter row with the same cell count, then rows up to a blank line or another block) renders as a table with the delimiter row's alignment, cells drawn by the same inline pass, short rows padded and extra cells dropped, \| read as a literal pipe. A pipe in prose with no delimiter row stays text.
• Thematic breaks (bounded in-place fix, same class: Markdown printed as literal text). ---, ***, ___ (spaces allowed) between blocks render as hr; * * * is a rule, not a list item. A --- line directly under a paragraph line stays that paragraph's text, as before (CommonMark reads it as a setext underline, which this renderer does not draw). HotCRM's README has four such rules that printed as ---.

The file header's "If a README really needs tables or images, the publisher can host their own docs" is replaced by the rules above. No raw HTML is rendered and no dependency is added.

Tests

• MarkdownText.wideReadme-30330.test.tsx (new): HotCRM's badge row renders four img and no ![/](; the referrer, lazy-load and max-w-full attributes; only the absolute-https: badge link keeps its anchor; eight refused sources leave the image out (alt included) in a paragraph and in a list item; a refused link scheme keeps the image without the anchor; an image title, and image syntax inside a code span staying code; tables (cells, inline marks, escaped pipe, alignment, own scroller, padding/truncation, HotCRM's screenshot table); five thematic-break spellings; the compact size; the width classes. CONTROL: headings, links, lists, quotes and fences render as before, a pipe in prose stays text, a --- under a paragraph line stays text, a relative text link keeps its href.
• MarketplacePackagePage.readmeWidth-30330.test.tsx (new, the releaseNotes-28891 harness): both grid cells carry min-w-0; CONTROL: the README fence renders in the About cell with its own scroller, and the Versions notes render.

Runs (all under scripts/pm/os-verify-lock.sh, pnpm --dir ui exec vitest run …):

• Red: the two new files against origin/main's MarkdownText.tsx and MarketplacePackagePage.tsx (checked out over the fix, then restored with git checkout HEAD --, git diff HEAD empty): Tests 26 failed | 5 passed (31), the 5 being the CONTROL rows.
• Green, after the fix: the two new files plus every MarkdownText.* and MarketplacePackagePage* test in the directory (21 files): Test Files 21 passed (21), Tests 159 passed (159). On the final head 6a86665c: the 7 files that render MarkdownText plus scripts/__tests__/markdown-test-inputs.test.ts: Tests 80 passed (80).
• Type-check: pnpm exec turbo run type-check --filter=@object-ui/app-shell --concurrency=2: Tasks: 68 successful, 68 total; on the final head, pnpm --filter @object-ui/app-shell type-check: VERDICT command-exit 0. Lint: eslint on the touched files: 0 errors (the warnings are pre-existing no-explicit-any in MarketplacePackagePage.tsx).

The whole change is the ablation: the red run above is the new pins against the old code, each flipped by the code it names.

Acceptance notes

• ui/AGENTS.md ✨ Set up Copilot instructions #2 (docs-driven): no page under content/docs/ describes which Markdown a marketplace README may use (deployment/marketplace-handbook.mdx names the readmePath and readme fields only), so no doc changes; that tree is also outside this card's surface.
• A text link to a relative path ([the guide](docs/guide)) still resolves against the console, as before; the shared inline pass owns that rule and element:text reads it too, so it is untouched here. Observation, not filed.
• An image nested inside a text link's label ([see ![x](y)](z)) is not a shape this renderer reads; the image renders or drops and the link's brackets print. Not seen in any measured README.

Verification

Dogfood battery: not owed (no ! in the title, no (narrowing) arm).

Generated by Claude Code