@xortex/xcode 3.0.0

package/utils/markdown.ts

@@ -0,0 +1,381 @@
+import chalk from 'chalk'
+import { marked, type Token, type Tokens } from 'marked'
+import stripAnsi from 'strip-ansi'
+import { color } from '../components/design-system/color.js'
+import { BLOCKQUOTE_BAR } from '../constants/figures.js'
+import { stringWidth } from '../ink/stringWidth.js'
+import { supportsHyperlinks } from '../ink/supports-hyperlinks.js'
+import type { CliHighlight } from './cliHighlight.js'
+import { logForDebugging } from './debug.js'
+import { createHyperlink } from './hyperlink.js'
+import { stripPromptXMLTags } from './messages.js'
+import type { ThemeName } from './theme.js'
+
+// Use \n unconditionally — os.EOL is \r\n on Windows, and the extra \r
+// breaks the character-to-segment mapping in applyStylesToWrappedText,
+// causing styled text to shift right.
+const EOL = '\n'
+
+let markedConfigured = false
+
+export function configureMarked(): void {
+  if (markedConfigured) return
+  markedConfigured = true
+
+  // Disable strikethrough parsing - the model often uses ~ for "approximate"
+  // (e.g., ~100) and rarely intends actual strikethrough formatting
+  marked.use({
+    tokenizer: {
+      del() {
+        return undefined
+      },
+    },
+  })
+}
+
+export function applyMarkdown(
+  content: string,
+  theme: ThemeName,
+  highlight: CliHighlight | null = null,
+): string {
+  configureMarked()
+  return marked
+    .lexer(stripPromptXMLTags(content))
+    .map(_ => formatToken(_, theme, 0, null, null, highlight))
+    .join('')
+    .trim()
+}
+
+export function formatToken(
+  token: Token,
+  theme: ThemeName,
+  listDepth = 0,
+  orderedListNumber: number | null = null,
+  parent: Token | null = null,
+  highlight: CliHighlight | null = null,
+): string {
+  switch (token.type) {
+    case 'blockquote': {
+      const inner = (token.tokens ?? [])
+        .map(_ => formatToken(_, theme, 0, null, null, highlight))
+        .join('')
+      // Prefix each line with a dim vertical bar. Keep text italic but at
+      // normal brightness — chalk.dim is nearly invisible on dark themes.
+      const bar = chalk.dim(BLOCKQUOTE_BAR)
+      return inner
+        .split(EOL)
+        .map(line =>
+          stripAnsi(line).trim() ? `${bar} ${chalk.italic(line)}` : line,
+        )
+        .join(EOL)
+    }
+    case 'code': {
+      if (!highlight) {
+        return token.text + EOL
+      }
+      let language = 'plaintext'
+      if (token.lang) {
+        if (highlight.supportsLanguage(token.lang)) {
+          language = token.lang
+        } else {
+          logForDebugging(
+            `Language not supported while highlighting code, falling back to plaintext: ${token.lang}`,
+          )
+        }
+      }
+      return highlight.highlight(token.text, { language }) + EOL
+    }
+    case 'codespan': {
+      // inline code
+      return color('permission', theme)(token.text)
+    }
+    case 'em':
+      return chalk.italic(
+        (token.tokens ?? [])
+          .map(_ => formatToken(_, theme, 0, null, parent, highlight))
+          .join(''),
+      )
+    case 'strong':
+      return chalk.bold(
+        (token.tokens ?? [])
+          .map(_ => formatToken(_, theme, 0, null, parent, highlight))
+          .join(''),
+      )
+    case 'heading':
+      switch (token.depth) {
+        case 1: // h1
+          return (
+            chalk.bold.italic.underline(
+              (token.tokens ?? [])
+                .map(_ => formatToken(_, theme, 0, null, null, highlight))
+                .join(''),
+            ) +
+            EOL +
+            EOL
+          )
+        case 2: // h2
+          return (
+            chalk.bold(
+              (token.tokens ?? [])
+                .map(_ => formatToken(_, theme, 0, null, null, highlight))
+                .join(''),
+            ) +
+            EOL +
+            EOL
+          )
+        default: // h3+
+          return (
+            chalk.bold(
+              (token.tokens ?? [])
+                .map(_ => formatToken(_, theme, 0, null, null, highlight))
+                .join(''),
+            ) +
+            EOL +
+            EOL
+          )
+      }
+    case 'hr':
+      return '---'
+    case 'image':
+      return token.href
+    case 'link': {
+      // Prevent mailto links from being displayed as clickable links
+      if (token.href.startsWith('mailto:')) {
+        // Extract email from mailto: link and display as plain text
+        const email = token.href.replace(/^mailto:/, '')
+        return email
+      }
+      // Extract display text from the link's child tokens
+      const linkText = (token.tokens ?? [])
+        .map(_ => formatToken(_, theme, 0, null, token, highlight))
+        .join('')
+      const plainLinkText = stripAnsi(linkText)
+      // If the link has meaningful display text (different from the URL),
+      // show it as a clickable hyperlink. In terminals that support OSC 8,
+      // users see the text and can hover/click to see the URL.
+      if (plainLinkText && plainLinkText !== token.href) {
+        return createHyperlink(token.href, linkText)
+      }
+      // When the display text matches the URL (or is empty), just show the URL
+      return createHyperlink(token.href)
+    }
+    case 'list': {
+      return token.items
+        .map((_: Token, index: number) =>
+          formatToken(
+            _,
+            theme,
+            listDepth,
+            token.ordered ? token.start + index : null,
+            token,
+            highlight,
+          ),
+        )
+        .join('')
+    }
+    case 'list_item':
+      return (token.tokens ?? [])
+        .map(
+          _ =>
+            `${'  '.repeat(listDepth)}${formatToken(_, theme, listDepth + 1, orderedListNumber, token, highlight)}`,
+        )
+        .join('')
+    case 'paragraph':
+      return (
+        (token.tokens ?? [])
+          .map(_ => formatToken(_, theme, 0, null, null, highlight))
+          .join('') + EOL
+      )
+    case 'space':
+      return EOL
+    case 'br':
+      return EOL
+    case 'text':
+      if (parent?.type === 'link') {
+        // Already inside a markdown link — the link handler will wrap this
+        // in an OSC 8 hyperlink. Linkifying here would nest a second OSC 8
+        // sequence, and terminals honor the innermost one, overriding the
+        // link's actual href.
+        return token.text
+      }
+      if (parent?.type === 'list_item') {
+        return `${orderedListNumber === null ? '-' : getListNumber(listDepth, orderedListNumber) + '.'} ${token.tokens ? token.tokens.map(_ => formatToken(_, theme, listDepth, orderedListNumber, token, highlight)).join('') : linkifyIssueReferences(token.text)}${EOL}`
+      }
+      return linkifyIssueReferences(token.text)
+    case 'table': {
+      const tableToken = token as Tokens.Table
+
+      // Helper function to get the text content that will be displayed (after stripAnsi)
+      function getDisplayText(tokens: Token[] | undefined): string {
+        return stripAnsi(
+          tokens
+            ?.map(_ => formatToken(_, theme, 0, null, null, highlight))
+            .join('') ?? '',
+        )
+      }
+
+      // Determine column widths based on displayed content (without formatting)
+      const columnWidths = tableToken.header.map((header, index) => {
+        let maxWidth = stringWidth(getDisplayText(header.tokens))
+        for (const row of tableToken.rows) {
+          const cellLength = stringWidth(getDisplayText(row[index]?.tokens))
+          maxWidth = Math.max(maxWidth, cellLength)
+        }
+        return Math.max(maxWidth, 3) // Minimum width of 3
+      })
+
+      // Format header row
+      let tableOutput = '| '
+      tableToken.header.forEach((header, index) => {
+        const content =
+          header.tokens
+            ?.map(_ => formatToken(_, theme, 0, null, null, highlight))
+            .join('') ?? ''
+        const displayText = getDisplayText(header.tokens)
+        const width = columnWidths[index]!
+        const align = tableToken.align?.[index]
+        tableOutput +=
+          padAligned(content, stringWidth(displayText), width, align) + ' | '
+      })
+      tableOutput = tableOutput.trimEnd() + EOL
+
+      // Add separator row
+      tableOutput += '|'
+      columnWidths.forEach(width => {
+        // Always use dashes, don't show alignment colons in the output
+        const separator = '-'.repeat(width + 2) // +2 for spaces on each side
+        tableOutput += separator + '|'
+      })
+      tableOutput += EOL
+
+      // Format data rows
+      tableToken.rows.forEach(row => {
+        tableOutput += '| '
+        row.forEach((cell, index) => {
+          const content =
+            cell.tokens
+              ?.map(_ => formatToken(_, theme, 0, null, null, highlight))
+              .join('') ?? ''
+          const displayText = getDisplayText(cell.tokens)
+          const width = columnWidths[index]!
+          const align = tableToken.align?.[index]
+          tableOutput +=
+            padAligned(content, stringWidth(displayText), width, align) + ' | '
+        })
+        tableOutput = tableOutput.trimEnd() + EOL
+      })
+
+      return tableOutput + EOL
+    }
+    case 'escape':
+      // Markdown escape: \) → ), \\ → \, etc.
+      return token.text
+    case 'def':
+    case 'del':
+    case 'html':
+      // These token types are not rendered
+      return ''
+  }
+  return ''
+}
+
+// Matches owner/repo#NNN style GitHub issue/PR references. The qualified form
+// is unambiguous — bare #NNN was removed because it guessed the current repo
+// and was wrong whenever the assistant discussed a different one.
+// Owner segment disallows dots (GitHub usernames are alphanumerics + hyphens
+// only) so hostnames like docs.github.io/guide#42 don't false-positive. Repo
+// segment allows dots (e.g. cc.kurs.web). Lookbehind is avoided — it defeats
+// YARR JIT in JSC.
+const ISSUE_REF_PATTERN =
+  /(^|[^\w./-])([A-Za-z0-9][\w-]*\/[A-Za-z0-9][\w.-]*)#(\d+)\b/g
+
+/**
+ * Replaces owner/repo#123 references with clickable hyperlinks to GitHub.
+ */
+function linkifyIssueReferences(text: string): string {
+  if (!supportsHyperlinks()) {
+    return text
+  }
+  return text.replace(
+    ISSUE_REF_PATTERN,
+    (_match, prefix, repo, num) =>
+      prefix +
+      createHyperlink(
+        `https://github.com/${repo}/issues/${num}`,
+        `${repo}#${num}`,
+      ),
+  )
+}
+
+function numberToLetter(n: number): string {
+  let result = ''
+  while (n > 0) {
+    n--
+    result = String.fromCharCode(97 + (n % 26)) + result
+    n = Math.floor(n / 26)
+  }
+  return result
+}
+
+const ROMAN_VALUES: ReadonlyArray<[number, string]> = [
+  [1000, 'm'],
+  [900, 'cm'],
+  [500, 'd'],
+  [400, 'cd'],
+  [100, 'c'],
+  [90, 'xc'],
+  [50, 'l'],
+  [40, 'xl'],
+  [10, 'x'],
+  [9, 'ix'],
+  [5, 'v'],
+  [4, 'iv'],
+  [1, 'i'],
+]
+
+function numberToRoman(n: number): string {
+  let result = ''
+  for (const [value, numeral] of ROMAN_VALUES) {
+    while (n >= value) {
+      result += numeral
+      n -= value
+    }
+  }
+  return result
+}
+
+function getListNumber(listDepth: number, orderedListNumber: number): string {
+  switch (listDepth) {
+    case 0:
+    case 1:
+      return orderedListNumber.toString()
+    case 2:
+      return numberToLetter(orderedListNumber)
+    case 3:
+      return numberToRoman(orderedListNumber)
+    default:
+      return orderedListNumber.toString()
+  }
+}
+
+/**
+ * Pad `content` to `targetWidth` according to alignment. `displayWidth` is the
+ * visible width of `content` (caller computes this, e.g. via stringWidth on
+ * stripAnsi'd text, so ANSI codes in `content` don't affect padding).
+ */
+export function padAligned(
+  content: string,
+  displayWidth: number,
+  targetWidth: number,
+  align: 'left' | 'center' | 'right' | null | undefined,
+): string {
+  const padding = Math.max(0, targetWidth - displayWidth)
+  if (align === 'center') {
+    const leftPad = Math.floor(padding / 2)
+    return ' '.repeat(leftPad) + content + ' '.repeat(padding - leftPad)
+  }
+  if (align === 'right') {
+    return ' '.repeat(padding) + content
+  }
+  return content + ' '.repeat(padding)
+}