@orbit-work/ui 0.1.0

package/src/components/composite/Markdown/index.tsx

@@ -0,0 +1,702 @@
+"use client"
+
+import { Fragment, useEffect, useMemo, useState } from "react"
+import { splitLocalPathSegments } from "../../../utils/localPathInline"
+import {
+  type LocalLinkTargetOptions,
+  cleanFileLabel,
+  collectMarkdownFileRefs,
+  localMarkdownLinkTarget,
+  safeHref,
+} from "../../../utils/markdownFileRefs"
+import {
+  Attachment,
+  type AttachmentItem,
+  AttachmentList,
+  type AttachmentMenuOption,
+} from "../../domain/chat/Attachment"
+import { Button } from "../../primitives"
+import { CodeBlock } from "../CodeBlock"
+
+// Markdown is a small, dependency-free renderer for the common subset of
+// markdown that skill introductions use: headings, paragraphs, bold/italic,
+// inline code, fenced code blocks, and ordered/unordered lists. It renders via
+// React elements (no dangerouslySetInnerHTML), so all text stays escaped.
+
+type Block =
+  | { kind: "heading"; level: number; text: string }
+  | { kind: "para"; text: string }
+  | { kind: "code"; text: string; language?: string }
+  | { kind: "list"; ordered: boolean; items: string[] }
+  | { kind: "table"; headers: string[]; rows: string[][]; aligns: TableAlign[] }
+  | { kind: "quote"; paragraphs: string[] }
+  | { kind: "imageGallery"; images: MarkdownImageItem[] }
+
+// Blockquote marker: "> " or a bare ">" on an otherwise empty line.
+const QUOTE_LINE_RE = /^\s{0,3}>\s?/
+
+type TableAlign = "left" | "center" | "right"
+
+// Shell-ish fence languages that get a "run in terminal" affordance when the
+// host passes onRunCommand.
+const RUNNABLE_SHELL_LANGUAGES = new Set(["bash", "sh", "zsh", "shell", "shellscript"])
+
+function isRunnableShellLanguage(language: string | undefined): boolean {
+  return Boolean(language && RUNNABLE_SHELL_LANGUAGES.has(language.toLowerCase()))
+}
+// Resolved local media a Markdown image/link target maps to. Exported as the
+// single source of truth so every surface that threads image preview through
+// Markdown (chat bubble, message actions, preview modal) shares one shape.
+export type LocalMarkdownPreview = { kind: "image" | "video"; name: string; url: string }
+// Resolver a host passes down to turn a local/relative image target (e.g.
+// images/poster.png) into previewable media, or null when it cannot.
+export type LocalImagePreviewResolver = (path: string) => Promise<LocalMarkdownPreview | null>
+type MarkdownImageItem = { alt: string; target: string }
+type InlineRenderOptions = {
+  onLocalPathClick?: (path: string) => void
+  // Opens an inline local path through the same handler as the file reference
+  // cards below the message, so both surfaces resolve previews identically.
+  onLocalFileOpen?: (item: AttachmentItem) => void
+  onLocalImagePreview?: LocalImagePreviewResolver
+  localPathBaseDir?: string
+}
+type LocalPathOpener = (path: string, label?: string) => void
+
+// Inline local paths and the file reference cards must open the same way. When
+// a host provides the card handler, route inline clicks through it with the
+// same AttachmentItem shape collectLocalFileRefs builds.
+function resolveLocalPathOpener(options: InlineRenderOptions): LocalPathOpener | undefined {
+  const { onLocalFileOpen, onLocalPathClick } = options
+  if (onLocalFileOpen) return (path, label) => onLocalFileOpen({ name: cleanFileLabel(label ?? "", path), path })
+  if (onLocalPathClick) return (path) => onLocalPathClick(path)
+  return undefined
+}
+
+// Relative link targets only resolve when the host knows the session's project
+// directory — the main process needs that base dir to turn out/report.md into a
+// real path (and to reject anything escaping the project).
+function localLinkOptions(options: InlineRenderOptions): LocalLinkTargetOptions {
+  return { allowRelative: Boolean(options.localPathBaseDir) }
+}
+
+function parseBlocks(src: string): Block[] {
+  const lines = src.replace(/\r\n/g, "\n").split("\n")
+  const blocks: Block[] = []
+  let i = 0
+  while (i < lines.length) {
+    const line = lines[i] ?? ""
+    // Fenced code block.
+    if (line.trimStart().startsWith("```")) {
+      const language = line.trimStart().slice(3).trim().split(/\s+/)[0] || undefined
+      const body: string[] = []
+      i += 1
+      while (i < lines.length && !(lines[i] ?? "").trimStart().startsWith("```")) {
+        body.push(lines[i] ?? "")
+        i += 1
+      }
+      i += 1 // skip closing fence
+      blocks.push({ kind: "code", text: body.join("\n"), language })
+      continue
+    }
+    // Blank line.
+    if (line.trim() === "") {
+      i += 1
+      continue
+    }
+    // Heading.
+    const heading = line.match(/^(#{1,6})\s+(.*)$/)
+    if (heading) {
+      blocks.push({ kind: "heading", level: heading[1]?.length ?? 1, text: heading[2] ?? "" })
+      i += 1
+      continue
+    }
+    // Blockquote — consume contiguous "> " lines; a blank quoted line splits
+    // paragraphs inside the quote.
+    if (QUOTE_LINE_RE.test(line)) {
+      const quoted: string[] = []
+      while (i < lines.length && QUOTE_LINE_RE.test(lines[i] ?? "")) {
+        quoted.push((lines[i] ?? "").replace(QUOTE_LINE_RE, ""))
+        i += 1
+      }
+      const paragraphs: string[] = []
+      let buffer: string[] = []
+      for (const quotedLine of quoted) {
+        if (quotedLine.trim() === "") {
+          if (buffer.length > 0) paragraphs.push(buffer.join(" "))
+          buffer = []
+        } else {
+          buffer.push(quotedLine)
+        }
+      }
+      if (buffer.length > 0) paragraphs.push(buffer.join(" "))
+      blocks.push({ kind: "quote", paragraphs })
+      continue
+    }
+    // GitHub-style table. Requires a header row and a separator row.
+    if (isTableHeader(lines, i)) {
+      const headers = splitTableRow(lines[i] ?? "")
+      const aligns = parseTableAligns(splitTableRow(lines[i + 1] ?? ""), headers.length)
+      const rows: string[][] = []
+      i += 2
+      while (i < lines.length && isTableRow(lines[i] ?? "")) {
+        rows.push(normalizeTableRow(splitTableRow(lines[i] ?? ""), headers.length))
+        i += 1
+      }
+      blocks.push({ kind: "table", headers, rows, aligns })
+      continue
+    }
+    // List (ordered or unordered) — consume contiguous item lines.
+    if (/^\s*([-*]|\d+\.)\s+/.test(line)) {
+      const ordered = /^\s*\d+\.\s+/.test(line)
+      const items: string[] = []
+      while (i < lines.length && /^\s*([-*]|\d+\.)\s+/.test(lines[i] ?? "")) {
+        items.push((lines[i] ?? "").replace(/^\s*([-*]|\d+\.)\s+/, ""))
+        i += 1
+      }
+      blocks.push({ kind: "list", ordered, items })
+      continue
+    }
+    const imageGallery = collectImageGallery(lines, i)
+    if (imageGallery) {
+      blocks.push({ kind: "imageGallery", images: imageGallery.images })
+      i = imageGallery.nextIndex
+      continue
+    }
+    // Paragraph — consume contiguous non-blank, non-structural lines.
+    const para: string[] = []
+    while (
+      i < lines.length &&
+      (lines[i] ?? "").trim() !== "" &&
+      !(lines[i] ?? "").trimStart().startsWith("```") &&
+      !/^#{1,6}\s+/.test(lines[i] ?? "") &&
+      !isTableHeader(lines, i) &&
+      !QUOTE_LINE_RE.test(lines[i] ?? "") &&
+      !/^\s*([-*]|\d+\.)\s+/.test(lines[i] ?? "")
+    ) {
+      para.push(lines[i] ?? "")
+      i += 1
+    }
+    blocks.push({ kind: "para", text: para.join(" ") })
+  }
+  return blocks
+}
+
+function collectImageGallery(
+  lines: string[],
+  startIndex: number,
+): { images: MarkdownImageItem[]; nextIndex: number } | null {
+  const images: MarkdownImageItem[] = []
+  let i = startIndex
+  while (i < lines.length) {
+    const line = lines[i] ?? ""
+    if (line.trim() === "") {
+      const nextNonBlankIndex = findNextNonBlankLine(lines, i + 1)
+      if (images.length > 0 && nextNonBlankIndex >= 0 && parseImageOnlyLine(lines[nextNonBlankIndex] ?? "")) {
+        i += 1
+        continue
+      }
+      break
+    }
+    const image = parseImageOnlyLine(line)
+    if (!image) break
+    images.push(image)
+    i += 1
+  }
+  return images.length > 0 ? { images, nextIndex: i } : null
+}
+
+function findNextNonBlankLine(lines: string[], startIndex: number): number {
+  for (let i = startIndex; i < lines.length; i += 1) {
+    if ((lines[i] ?? "").trim() !== "") return i
+  }
+  return -1
+}
+
+function parseImageOnlyLine(line: string): MarkdownImageItem | null {
+  const match = line.trim().match(/^!\[([^\]]*)\]\(([^)]+)\)$/)
+  if (!match) return null
+  return { alt: match[1] ?? "", target: match[2] ?? "" }
+}
+
+function isTableHeader(lines: string[], index: number): boolean {
+  const current = lines[index] ?? ""
+  const next = lines[index + 1] ?? ""
+  if (!isTableRow(current) || !isTableRow(next)) return false
+  const headers = splitTableRow(current)
+  const separators = splitTableRow(next)
+  return (
+    headers.length > 0 &&
+    separators.length >= headers.length &&
+    separators.slice(0, headers.length).every((cell) => /^:?-{3,}:?$/.test(cell.trim()))
+  )
+}
+
+function isTableRow(line: string): boolean {
+  return line.includes("|") && line.trim() !== ""
+}
+
+function splitTableRow(line: string): string[] {
+  const trimmed = line.trim().replace(/^\|/, "").replace(/\|$/, "")
+  return trimmed.split("|").map((cell) => cell.trim())
+}
+
+function normalizeTableRow(row: string[], length: number): string[] {
+  return Array.from({ length }, (_, index) => row[index] ?? "")
+}
+
+function parseTableAligns(cells: string[], length: number): TableAlign[] {
+  return Array.from({ length }, (_, index) => {
+    const cell = cells[index]?.trim() ?? ""
+    if (cell.startsWith(":") && cell.endsWith(":")) return "center"
+    if (cell.endsWith(":")) return "right"
+    return "left"
+  })
+}
+
+// renderInline handles **bold**, *italic*/_italic_, `code`, ![alt](url),
+// [text](url), and bare http(s) URLs.
+function renderInline(text: string, options: InlineRenderOptions = {}): React.ReactNode[] {
+  const nodes: React.ReactNode[] = []
+  const openLocalPath = resolveLocalPathOpener(options)
+  const re =
+    /(\*\*([^*]+)\*\*|`([^`]+)`|\*([^*]+)\*|_([^_]+)_|!\[([^\]]*)\]\(([^)]+)\)|\[([^\]]+)\]\(([^)]+)\)|(https?:\/\/[^\s<>()]+))/g
+  let last = 0
+  let key = 0
+  let m: RegExpExecArray | null
+  while ((m = re.exec(text)) !== null) {
+    if (m.index > last) nodes.push(...renderText(text.slice(last, m.index), key++, openLocalPath))
+    if (m[2] !== undefined) nodes.push(<strong key={key++}>{renderText(m[2], key++, openLocalPath)}</strong>)
+    else if (m[3] !== undefined) nodes.push(<code key={key++}>{m[3]}</code>)
+    else if (m[4] !== undefined) nodes.push(<em key={key++}>{renderText(m[4], key++, openLocalPath)}</em>)
+    else if (m[5] !== undefined) nodes.push(<em key={key++}>{renderText(m[5], key++, openLocalPath)}</em>)
+    else if (m[6] !== undefined && m[7] !== undefined) {
+      nodes.push(
+        <MarkdownImage
+          key={key++}
+          alt={m[6]}
+          target={m[7]}
+          openLocalPath={openLocalPath}
+          onLocalImagePreview={options.onLocalImagePreview}
+          localPathBaseDir={options.localPathBaseDir}
+        />,
+      )
+    } else if (m[8] !== undefined && m[9] !== undefined) {
+      const localPath = localMarkdownLinkTarget(m[9], localLinkOptions(options))
+      const href = localPath ? null : safeHref(m[9])
+      const label = m[8]
+      // Untrusted skill content: render as a link only when the protocol is
+      // safe; otherwise downgrade to plain text so javascript:/data: etc. can't
+      // be clicked in the Electron renderer.
+      nodes.push(
+        localPath && openLocalPath ? (
+          <Button
+            variant="unstyled"
+            key={key++}
+            type="button"
+            className="md__local-path"
+            title={localPath}
+            onClick={() => openLocalPath(localPath, label)}
+          >
+            {renderLinkLabel(label, key++)}
+          </Button>
+        ) : href ? (
+          <a key={key++} href={href} target="_blank" rel="noreferrer noopener">
+            {renderLinkLabel(label, key++)}
+          </a>
+        ) : (
+          <Fragment key={key++}>{renderLinkLabel(label, key++)}</Fragment>
+        ),
+      )
+    } else if (m[10] !== undefined) {
+      const { href, trailing } = splitTrailingUrlPunctuation(m[10])
+      const safe = safeHref(href)
+      nodes.push(
+        safe ? (
+          <a key={key++} href={safe} target="_blank" rel="noreferrer noopener">
+            {href}
+          </a>
+        ) : (
+          <Fragment key={key++}>{href}</Fragment>
+        ),
+      )
+      if (trailing) nodes.push(...renderText(trailing, key++, openLocalPath))
+    }
+    last = m.index + m[0].length
+  }
+  if (last < text.length) nodes.push(...renderText(text.slice(last), key++, openLocalPath))
+  return nodes
+}
+
+// Link labels carry their own emphasis markup (agents commonly emit
+// [**`file.txt`**](/abs/path)). Parse the safe inline subset here — no nested
+// links or images — so the markers do not leak into the visible label.
+function renderLinkLabel(label: string, keySeed: number): React.ReactNode[] {
+  const nodes: React.ReactNode[] = []
+  const re = /(\*\*([^*]+)\*\*|`([^`]+)`|\*([^*]+)\*|_([^_]+)_)/g
+  let last = 0
+  let key = keySeed
+  let m: RegExpExecArray | null
+  while ((m = re.exec(label)) !== null) {
+    if (m.index > last) nodes.push(...renderEmojiText(label.slice(last, m.index), key++))
+    if (m[2] !== undefined) nodes.push(<strong key={`lb-${key++}`}>{renderLinkLabel(m[2], key++)}</strong>)
+    else if (m[3] !== undefined) nodes.push(<code key={`lb-${key++}`}>{m[3]}</code>)
+    else if (m[4] !== undefined) nodes.push(<em key={`lb-${key++}`}>{renderLinkLabel(m[4], key++)}</em>)
+    else if (m[5] !== undefined) nodes.push(<em key={`lb-${key++}`}>{renderLinkLabel(m[5], key++)}</em>)
+    last = m.index + m[0].length
+  }
+  if (last < label.length) nodes.push(...renderEmojiText(label.slice(last), key++))
+  return nodes
+}
+
+function MarkdownImage({
+  alt,
+  target,
+  openLocalPath,
+  onLocalImagePreview,
+  localPathBaseDir,
+  variant = "inline",
+}: {
+  alt: string
+  target: string
+  openLocalPath?: LocalPathOpener
+  onLocalImagePreview?: LocalImagePreviewResolver
+  localPathBaseDir?: string
+  variant?: "inline" | "gallery"
+}): React.ReactElement {
+  const cleanTarget = target.trim()
+  const [preview, setPreview] = useState<LocalMarkdownPreview | null>(null)
+  const remoteHref = safeRemoteImageHref(cleanTarget)
+  const shouldResolveLocal = !remoteHref && isLikelyLocalImageTarget(cleanTarget) && Boolean(onLocalImagePreview)
+  const imageClassName = variant === "gallery" ? "md__image md__image--gallery" : "md__image"
+  const buttonClassName = variant === "gallery" ? "md__image-button md__image-button--gallery" : "md__image-button"
+
+  useEffect(() => {
+    if (!shouldResolveLocal || !onLocalImagePreview) {
+      setPreview(null)
+      return
+    }
+    let canceled = false
+    setPreview(null)
+    onLocalImagePreview(cleanTarget)
+      .then((result) => {
+        if (!canceled) setPreview(result?.kind === "image" ? result : null)
+      })
+      .catch(() => {
+        if (!canceled) setPreview(null)
+      })
+    return () => {
+      canceled = true
+    }
+  }, [cleanTarget, onLocalImagePreview, shouldResolveLocal])
+
+  if (remoteHref) {
+    return <img className={imageClassName} src={remoteHref} alt={alt} />
+  }
+
+  if (preview) {
+    return (
+      <Button
+        variant="unstyled"
+        type="button"
+        className={buttonClassName}
+        title={alt || preview.name}
+        data-md-image-target={cleanTarget}
+        data-md-image-base-dir={localPathBaseDir || undefined}
+        data-md-image-name={alt || preview.name}
+        onClick={() => openLocalPath?.(cleanTarget, alt)}
+      >
+        <img className={imageClassName} src={preview.url} alt={alt || preview.name} />
+      </Button>
+    )
+  }
+
+  const label = alt || cleanTarget
+  if (openLocalPath && isLikelyLocalImageTarget(cleanTarget)) {
+    return (
+      <Button
+        variant="unstyled"
+        type="button"
+        className="md__image-fallback"
+        title={cleanTarget}
+        onClick={() => openLocalPath(cleanTarget, alt)}
+      >
+        {label}
+      </Button>
+    )
+  }
+  return <span className="md__image-fallback">{label}</span>
+}
+
+function ImageGallery({
+  images,
+  options,
+}: {
+  images: MarkdownImageItem[]
+  options: InlineRenderOptions
+}): React.ReactElement {
+  const openLocalPath = resolveLocalPathOpener(options)
+  return (
+    <div
+      className={`md__image-gallery md__image-gallery--${imageGallerySizeClass(images.length)}`}
+      data-image-count={images.length}
+    >
+      {images.map((image, index) => (
+        <MarkdownImage
+          key={`${image.target}-${index}`}
+          alt={image.alt}
+          target={image.target}
+          openLocalPath={openLocalPath}
+          onLocalImagePreview={options.onLocalImagePreview}
+          localPathBaseDir={options.localPathBaseDir}
+          variant="gallery"
+        />
+      ))}
+    </div>
+  )
+}
+
+function imageGallerySizeClass(count: number): string {
+  if (count <= 1) return "count-1"
+  if (count === 2) return "count-2"
+  if (count === 3) return "count-3"
+  return "count-many"
+}
+
+function renderText(text: string, keySeed: number, openLocalPath?: LocalPathOpener): React.ReactNode[] {
+  if (openLocalPath) return renderLocalPaths(text, keySeed, openLocalPath)
+  return renderEmojiText(text, keySeed)
+}
+
+function renderLocalPaths(text: string, keySeed: number, openLocalPath: LocalPathOpener): React.ReactNode[] {
+  const nodes: React.ReactNode[] = []
+  let key = keySeed
+  for (const segment of splitLocalPathSegments(text)) {
+    if (segment.kind === "text") {
+      nodes.push(...renderEmojiText(segment.text, key++))
+      continue
+    }
+    nodes.push(
+      <Button
+        variant="unstyled"
+        key={`path-${key++}`}
+        type="button"
+        className="md__local-path"
+        title={segment.path}
+        onClick={() => openLocalPath(segment.path)}
+      >
+        {segment.path}
+      </Button>,
+    )
+    if (segment.trailing) nodes.push(...renderEmojiText(segment.trailing, key++))
+  }
+  return nodes
+}
+
+function collectLocalFileRefs(blocks: Block[], linkOptions: LocalLinkTargetOptions): AttachmentItem[] {
+  const seen = new Set<string>()
+  const refs: AttachmentItem[] = []
+  const collect = (text: string) => collectMarkdownFileRefs(text, seen, refs, linkOptions)
+  for (const block of blocks) {
+    if (block.kind === "code" || block.kind === "imageGallery") continue
+    if (block.kind === "heading" || block.kind === "para") collect(block.text)
+    if (block.kind === "list") block.items.forEach(collect)
+    if (block.kind === "quote") block.paragraphs.forEach(collect)
+    if (block.kind === "table") {
+      block.headers.forEach(collect)
+      block.rows.forEach((row) => row.forEach(collect))
+    }
+  }
+  return refs
+}
+
+function renderEmojiText(text: string, keySeed: number): React.ReactNode[] {
+  const nodes: React.ReactNode[] = []
+  const re = /:([a-zA-Z0-9_+-]+):/g
+  let last = 0
+  let key = keySeed
+  let m: RegExpExecArray | null
+  while ((m = re.exec(text)) !== null) {
+    if (m.index > last) nodes.push(<Fragment key={`t-${key++}`}>{text.slice(last, m.index)}</Fragment>)
+    const emoji = EMOJI_SHORTCODES[m[1] ?? ""]
+    nodes.push(<Fragment key={`t-${key++}`}>{emoji ?? m[0]}</Fragment>)
+    last = m.index + m[0].length
+  }
+  if (last < text.length) nodes.push(<Fragment key={`t-${key++}`}>{text.slice(last)}</Fragment>)
+  return nodes
+}
+
+const EMOJI_SHORTCODES: Record<string, string> = {
+  smile: "😄",
+  smiley: "😃",
+  grinning: "😀",
+  joy: "😂",
+  blush: "😊",
+  wink: "😉",
+  thinking: "🤔",
+  rocket: "🚀",
+  tada: "🎉",
+  sparkles: "✨",
+  fire: "🔥",
+  warning: "⚠️",
+  white_check_mark: "✅",
+  check: "✅",
+  x: "❌",
+  cross_mark: "❌",
+  memo: "📝",
+  bulb: "💡",
+  link: "🔗",
+  book: "📖",
+  calendar: "📅",
+  clock: "🕒",
+  robot: "🤖",
+  eyes: "👀",
+  point_right: "👉",
+  point_left: "👈",
+  thumbsup: "👍",
+  thumbsdown: "👎",
+}
+
+function splitTrailingUrlPunctuation(raw: string): { href: string; trailing: string } {
+  const match = raw.match(/^(.*?)([.,!?;:，。！？；：、]+)?$/)
+  return {
+    href: match?.[1] || raw,
+    trailing: match?.[2] || "",
+  }
+}
+
+function safeRemoteImageHref(raw: string): string | null {
+  const href = safeHref(raw)
+  if (!href) return null
+  return /^https?:\/\//i.test(href) ? href : null
+}
+
+function isLikelyLocalImageTarget(raw: string): boolean {
+  return /\.(png|jpe?g|gif|webp|bmp|svg|heic|heif|tiff?)(?:[?#].*)?$/i.test(raw.trim())
+}
+
+export type MarkdownProps = {
+  source: string
+  className?: string
+  onLocalPathClick?: (path: string) => void
+  onLocalFileCardOpen?: (item: AttachmentItem) => void
+  onRequestLocalFileOpenWithOptions?: (item: AttachmentItem) => Promise<AttachmentMenuOption[]> | AttachmentMenuOption[]
+  onLocalFileCardOpenWith?: (item: AttachmentItem, option: AttachmentMenuOption) => void
+  onLocalFileCardOpenWithMenu?: (item: AttachmentItem) => void
+  onLocalImagePreview?: LocalImagePreviewResolver
+  localPathBaseDir?: string
+  /** When set, shell code blocks show a run button that invokes this with the code. */
+  onRunCommand?: (code: string) => void
+}
+
+export function Markdown({
+  source,
+  className,
+  onLocalPathClick,
+  onLocalFileCardOpen,
+  onRequestLocalFileOpenWithOptions,
+  onLocalFileCardOpenWith,
+  onLocalFileCardOpenWithMenu,
+  onLocalImagePreview,
+  localPathBaseDir,
+  onRunCommand,
+}: MarkdownProps): React.ReactElement {
+  const blocks = useMemo(() => parseBlocks(source), [source])
+  // Inline local paths share onLocalFileCardOpen with the cards below so both
+  // resolve the same preview surface (browser sidebar, in-app viewer, or OS).
+  const inlineOptions = {
+    onLocalPathClick,
+    onLocalFileOpen: onLocalFileCardOpen,
+    onLocalImagePreview,
+    localPathBaseDir,
+  }
+  const localFileRefs = useMemo(
+    () => (onLocalPathClick ? collectLocalFileRefs(blocks, { allowRelative: Boolean(localPathBaseDir) }) : []),
+    [blocks, localPathBaseDir, onLocalPathClick],
+  )
+  return (
+    <div className={className ? `md ${className}` : "md"}>
+      {blocks.map((block, idx) => {
+        if (block.kind === "heading") {
+          const Tag = `h${Math.min(block.level, 6)}` as "h1"
+          return <Tag key={idx}>{renderInline(block.text, inlineOptions)}</Tag>
+        }
+        if (block.kind === "code") {
+          const runnable = onRunCommand && isRunnableShellLanguage(block.language)
+          return (
+            <CodeBlock
+              key={idx}
+              language={block.language || "text"}
+              onRun={runnable ? () => onRunCommand(block.text) : undefined}
+            >
+              {block.text}
+            </CodeBlock>
+          )
+        }
+        if (block.kind === "list") {
+          const items = block.items.map((it, j) => <li key={j}>{renderInline(it, inlineOptions)}</li>)
+          return block.ordered ? <ol key={idx}>{items}</ol> : <ul key={idx}>{items}</ul>
+        }
+        if (block.kind === "table") {
+          return (
+            <div key={idx} className="md__table-wrap">
+              <table>
+                <thead>
+                  <tr>
+                    {block.headers.map((cell, j) => (
+                      <th key={j} className={`al-${block.aligns[j] ?? "left"}`}>
+                        {renderInline(cell, inlineOptions)}
+                      </th>
+                    ))}
+                  </tr>
+                </thead>
+                <tbody>
+                  {block.rows.map((row, rowIndex) => (
+                    <tr key={rowIndex}>
+                      {row.map((cell, cellIndex) => (
+                        <td key={cellIndex} className={`al-${block.aligns[cellIndex] ?? "left"}`}>
+                          {renderInline(cell, inlineOptions)}
+                        </td>
+                      ))}
+                    </tr>
+                  ))}
+                </tbody>
+              </table>
+            </div>
+          )
+        }
+        if (block.kind === "quote") {
+          return (
+            <blockquote key={idx}>
+              {block.paragraphs.map((text, j) => (
+                <p key={j}>{renderInline(text, inlineOptions)}</p>
+              ))}
+            </blockquote>
+          )
+        }
+        if (block.kind === "imageGallery")
+          return <ImageGallery key={idx} images={block.images} options={inlineOptions} />
+        return <p key={idx}>{renderInline(block.text, inlineOptions)}</p>
+      })}
+      {onLocalPathClick && localFileRefs.length > 0 && (
+        <AttachmentList layout="stack" className="md-file-cards" aria-label="本地文件引用">
+          {localFileRefs.map((item) => (
+            <Attachment
+              key={item.id ?? item.path}
+              variant="card"
+              name={item.name}
+              path={item.path}
+              // 卡本身就是打开入口，推断出的类型文案只会重复扩展名；业务传的 typeLabel 留着。
+              meta={item.typeLabel ?? ""}
+              onOpen={() => (onLocalFileCardOpen ?? ((ref: AttachmentItem) => onLocalPathClick(ref.path)))(item)}
+              onNativeActionsMenu={onLocalFileCardOpenWithMenu ? () => onLocalFileCardOpenWithMenu(item) : undefined}
+              onRequestActions={
+                onRequestLocalFileOpenWithOptions ? () => onRequestLocalFileOpenWithOptions(item) : undefined
+              }
+              onAction={onLocalFileCardOpenWith ? (option) => onLocalFileCardOpenWith(item, option) : undefined}
+            />
+          ))}
+        </AttachmentList>
+      )}
+    </div>
+  )
+}