@yivan-lab/pretty-please 1.0.0

package/src/components/MarkdownDisplay.tsx

@@ -0,0 +1,288 @@
+import React from 'react'
+import { Text, Box } from 'ink'
+import { theme } from '../ui/theme.js'
+import { ColorizeCode } from './CodeColorizer.js'
+import { TableRenderer } from './TableRenderer.js'
+import { RenderInline } from './InlineRenderer.js'
+
+interface MarkdownDisplayProps {
+  text: string
+  terminalWidth?: number
+}
+
+/**
+ * Markdown 主渲染组件
+ * 参考 gemini-cli 的实现
+ * 支持：标题、列表、代码块、表格、粗体、斜体、链接
+ */
+function MarkdownDisplayInternal({ text, terminalWidth = 80 }: MarkdownDisplayProps) {
+  if (!text) return <></>
+
+  const lines = text.split(/\r?\n/)
+
+  // 正则表达式
+  const headerRegex = /^ *(#{1,4}) +(.*)/
+  const codeFenceRegex = /^ *(`{3,}|~{3,}) *(\w*?) *$/
+  const ulItemRegex = /^([ \t]*)([-*+]) +(.*)/
+  const olItemRegex = /^([ \t]*)(\d+)\. +(.*)/
+  const hrRegex = /^ *([-*_] *){3,} *$/
+  // 表格行：支持有无尾部 | 的情况
+  const tableRowRegex = /^\s*\|(.+?)(?:\|)?\s*$/
+  const tableSeparatorRegex = /^\s*\|?\s*(:?-+:?)\s*(\|\s*(:?-+:?)\s*)+\|?\s*$/
+
+  const contentBlocks: React.ReactNode[] = []
+  let inCodeBlock = false
+  let lastLineEmpty = true
+  let codeBlockContent: string[] = []
+  let codeBlockLang: string | null = null
+  let codeBlockFence = ''
+  let inTable = false
+  let tableRows: string[][] = []
+  let tableHeaders: string[] = []
+
+  function addContentBlock(block: React.ReactNode) {
+    if (block) {
+      contentBlocks.push(block)
+      lastLineEmpty = false
+    }
+  }
+
+  lines.forEach((line, index) => {
+    const key = `line-${index}`
+
+    // 代码块内部
+    if (inCodeBlock) {
+      const fenceMatch = line.match(codeFenceRegex)
+      if (
+        fenceMatch &&
+        fenceMatch[1].startsWith(codeBlockFence[0]) &&
+        fenceMatch[1].length >= codeBlockFence.length
+      ) {
+        // 代码块结束
+        addContentBlock(
+          <ColorizeCode
+            key={key}
+            code={codeBlockContent.join('\n')}
+            language={codeBlockLang}
+            showLineNumbers={false}
+          />
+        )
+        inCodeBlock = false
+        codeBlockContent = []
+        codeBlockLang = null
+        codeBlockFence = ''
+      } else {
+        codeBlockContent.push(line)
+      }
+      return
+    }
+
+    const codeFenceMatch = line.match(codeFenceRegex)
+    const headerMatch = line.match(headerRegex)
+    const ulMatch = line.match(ulItemRegex)
+    const olMatch = line.match(olItemRegex)
+    const hrMatch = line.match(hrRegex)
+    const tableRowMatch = line.match(tableRowRegex)
+    const tableSeparatorMatch = line.match(tableSeparatorRegex)
+
+    // 代码块开始
+    if (codeFenceMatch) {
+      inCodeBlock = true
+      codeBlockFence = codeFenceMatch[1]
+      codeBlockLang = codeFenceMatch[2] || null
+    }
+    // 表格开始
+    else if (tableRowMatch && !inTable) {
+      if (index + 1 < lines.length && lines[index + 1].match(tableSeparatorRegex)) {
+        inTable = true
+        tableHeaders = tableRowMatch[1].split('|').map(cell => cell.trim())
+        tableRows = []
+      } else {
+        addContentBlock(
+          <Box key={key}>
+            <Text wrap="wrap" color={theme.text.primary}>
+              <RenderInline text={line} defaultColor={theme.text.primary} />
+            </Text>
+          </Box>
+        )
+      }
+    }
+    // 表格分隔符
+    else if (inTable && tableSeparatorMatch) {
+      // 跳过分隔符行
+    }
+    // 表格行
+    else if (inTable && tableRowMatch) {
+      const cells = tableRowMatch[1].split('|').map(cell => cell.trim())
+      while (cells.length < tableHeaders.length) cells.push('')
+      if (cells.length > tableHeaders.length) cells.length = tableHeaders.length
+      tableRows.push(cells)
+    }
+    // 表格结束
+    else if (inTable && !tableRowMatch) {
+      if (tableHeaders.length > 0 && tableRows.length > 0) {
+        addContentBlock(
+          <TableRenderer
+            key={`table-${contentBlocks.length}`}
+            headers={tableHeaders}
+            rows={tableRows}
+            terminalWidth={terminalWidth}
+          />
+        )
+      }
+      inTable = false
+      tableRows = []
+      tableHeaders = []
+
+      // 处理当前行
+      if (line.trim().length > 0) {
+        addContentBlock(
+          <Box key={key}>
+            <Text wrap="wrap" color={theme.text.primary}>
+              <RenderInline text={line} defaultColor={theme.text.primary} />
+            </Text>
+          </Box>
+        )
+      }
+    }
+    // 横线
+    else if (hrMatch) {
+      addContentBlock(
+        <Box key={key}>
+          <Text color={theme.border}>{'─'.repeat(40)}</Text>
+        </Box>
+      )
+    }
+    // 标题
+    else if (headerMatch) {
+      const level = headerMatch[1].length
+      const headerText = headerMatch[2]
+      let headerNode: React.ReactNode = null
+
+      switch (level) {
+        case 1:
+          headerNode = (
+            <Text bold underline color={theme.primary}>
+              <RenderInline text={headerText} defaultColor={theme.primary} />
+            </Text>
+          )
+          break
+        case 2:
+          headerNode = (
+            <Text bold color={theme.secondary}>
+              <RenderInline text={headerText} defaultColor={theme.secondary} />
+            </Text>
+          )
+          break
+        case 3:
+          headerNode = (
+            <Text bold color={theme.info}>
+              <RenderInline text={headerText} defaultColor={theme.info} />
+            </Text>
+          )
+          break
+        default:
+          headerNode = (
+            <Text bold color={theme.text.primary}>
+              <RenderInline text={headerText} defaultColor={theme.text.primary} />
+            </Text>
+          )
+          break
+      }
+
+      if (headerNode) {
+        addContentBlock(
+          <Box key={key} marginTop={lastLineEmpty ? 0 : 1}>
+            {headerNode}
+          </Box>
+        )
+      }
+    }
+    // 无序列表
+    else if (ulMatch) {
+      const leadingWhitespace = ulMatch[1]
+      const itemText = ulMatch[3]
+      const indentation = leadingWhitespace.length
+
+      addContentBlock(
+        <Box key={key} paddingLeft={indentation + 1} flexDirection="row">
+          <Box width={2}>
+            <Text color={theme.text.primary}>• </Text>
+          </Box>
+          <Box flexGrow={1}>
+            <Text wrap="wrap" color={theme.text.primary}>
+              <RenderInline text={itemText} defaultColor={theme.text.primary} />
+            </Text>
+          </Box>
+        </Box>
+      )
+    }
+    // 有序列表
+    else if (olMatch) {
+      const leadingWhitespace = olMatch[1]
+      const marker = olMatch[2]
+      const itemText = olMatch[3]
+      const indentation = leadingWhitespace.length
+      const prefix = `${marker}. `
+
+      addContentBlock(
+        <Box key={key} paddingLeft={indentation + 1} flexDirection="row">
+          <Box width={prefix.length}>
+            <Text color={theme.text.primary}>{prefix}</Text>
+          </Box>
+          <Box flexGrow={1}>
+            <Text wrap="wrap" color={theme.text.primary}>
+              <RenderInline text={itemText} defaultColor={theme.text.primary} />
+            </Text>
+          </Box>
+        </Box>
+      )
+    }
+    // 空行或普通文本
+    else {
+      if (line.trim().length === 0 && !inCodeBlock) {
+        // 空行：不添加额外的 Box，让段落自然分隔
+        if (!lastLineEmpty) {
+          lastLineEmpty = true
+        }
+      } else {
+        const inlineContent = <RenderInline text={line} defaultColor={theme.text.primary} />
+        addContentBlock(
+          <Box key={key}>
+            <Text wrap="wrap" color={theme.text.primary}>
+              {inlineContent}
+            </Text>
+          </Box>
+        )
+      }
+    }
+  })
+
+  // 处理未闭合的代码块
+  if (inCodeBlock) {
+    addContentBlock(
+      <ColorizeCode
+        key="line-eof"
+        code={codeBlockContent.join('\n')}
+        language={codeBlockLang}
+        showLineNumbers={false}
+      />
+    )
+  }
+
+  // 处理未闭合的表格
+  if (inTable && tableHeaders.length > 0 && tableRows.length > 0) {
+    addContentBlock(
+      <TableRenderer
+        key={`table-${contentBlocks.length}`}
+        headers={tableHeaders}
+        rows={tableRows}
+        terminalWidth={terminalWidth}
+      />
+    )
+  }
+
+  return <Box flexDirection="column">{contentBlocks}</Box>
+}
+
+export const MarkdownDisplay = React.memo(MarkdownDisplayInternal)

package/src/components/MultiStepCommandGenerator.tsx

@@ -0,0 +1,229 @@
+import React, { useState, useEffect } from 'react'
+import { Box, Text } from 'ink'
+import Spinner from 'ink-spinner'
+import { generateMultiStepCommand, type CommandStep, type ExecutedStep } from '../multi-step.js'
+import { detectBuiltin, formatBuiltins } from '../builtin-detector.js'
+import { CommandBox } from './CommandBox.js'
+import { ConfirmationPrompt } from './ConfirmationPrompt.js'
+import { Duration } from './Duration.js'
+import { theme } from '../ui/theme.js'
+
+interface MultiStepCommandGeneratorProps {
+  prompt: string
+  debug?: boolean
+  onStepComplete: (step: {
+    command: string
+    confirmed: boolean
+    cancelled?: boolean
+    hasBuiltin?: boolean
+    builtins?: string[]
+    reasoning?: string
+    needsContinue?: boolean
+    nextStepHint?: string
+    debugInfo?: any
+  }) => void
+  previousSteps?: ExecutedStep[]
+  currentStepNumber?: number
+}
+
+type State =
+  | { type: 'thinking' }
+  | { type: 'showing_command'; stepData: CommandStep }
+  | { type: 'cancelled'; command: string }
+  | { type: 'error'; error: string }
+
+/**
+ * MultiStepCommandGenerator 组件 - 多步骤命令生成
+ * 每次只生成一个命令，支持 continue 机制
+ */
+export const MultiStepCommandGenerator: React.FC<MultiStepCommandGeneratorProps> = ({
+  prompt,
+  debug,
+  previousSteps = [],
+  currentStepNumber = 1,
+  onStepComplete,
+}) => {
+  const [state, setState] = useState<State>({ type: 'thinking' })
+  const [thinkDuration, setThinkDuration] = useState(0)
+  const [debugInfo, setDebugInfo] = useState<any>(null)
+
+  // 初始化：调用 Mastra 生成命令
+  useEffect(() => {
+    const thinkStart = Date.now()
+
+    generateMultiStepCommand(prompt, previousSteps, { debug })
+      .then((result) => {
+        const thinkEnd = Date.now()
+        setThinkDuration(thinkEnd - thinkStart)
+
+        // 保存调试信息
+        if (debug && result.debugInfo) {
+          setDebugInfo(result.debugInfo)
+        }
+
+        setState({
+          type: 'showing_command',
+          stepData: result.stepData,
+        })
+
+        // 检测 builtin
+        const { hasBuiltin, builtins } = detectBuiltin(result.stepData.command)
+
+        if (hasBuiltin) {
+          setTimeout(() => {
+            onStepComplete({
+              command: result.stepData.command,
+              confirmed: false,
+              hasBuiltin: true,
+              builtins,
+              reasoning: result.stepData.reasoning,
+              needsContinue: result.stepData.continue,
+            })
+          }, 100)
+        }
+      })
+      .catch((error: any) => {
+        setState({ type: 'error', error: error.message })
+        setTimeout(() => {
+          onStepComplete({
+            command: '',
+            confirmed: false,
+            cancelled: true,
+          })
+        }, 100)
+      })
+  }, [prompt, previousSteps, debug])
+
+  // 处理确认
+  const handleConfirm = () => {
+    if (state.type === 'showing_command') {
+      onStepComplete({
+        command: state.stepData.command,
+        confirmed: true,
+        reasoning: state.stepData.reasoning,
+        needsContinue: state.stepData.continue,
+        nextStepHint: state.stepData.nextStepHint,
+        debugInfo: debugInfo,
+      })
+    }
+  }
+
+  // 处理取消
+  const handleCancel = () => {
+    if (state.type === 'showing_command') {
+      setState({ type: 'cancelled', command: state.stepData.command })
+      setTimeout(() => {
+        onStepComplete({
+          command: state.stepData.command,
+          confirmed: false,
+          cancelled: true,
+        })
+      }, 100)
+    }
+  }
+
+  return (
+    <Box flexDirection="column">
+      {/* 思考阶段 */}
+      {state.type === 'thinking' && (
+        <Box>
+          <Text color={theme.info}>
+            <Spinner type="dots" />{' '}
+            {currentStepNumber === 1 ? '正在思考...' : `正在规划步骤 ${currentStepNumber}...`}
+          </Text>
+        </Box>
+      )}
+
+      {/* 思考完成 */}
+      {state.type !== 'thinking' && thinkDuration > 0 && (
+        <Box>
+          <Text color={theme.success}>✓ 思考完成 </Text>
+          <Duration ms={thinkDuration} />
+        </Box>
+      )}
+
+      {/* 显示步骤信息和命令 */}
+      {state.type === 'showing_command' && (
+        <>
+          {/* 调试信息 */}
+          {debug && debugInfo && (
+            <Box flexDirection="column" marginTop={1}>
+              <Text color={theme.accent}>━━━ 调试信息 ━━━</Text>
+
+              <Text color={theme.text.secondary}>完整系统提示词:</Text>
+              <Text color={theme.text.dim}>{debugInfo.fullPrompt}</Text>
+
+              <Box marginTop={1}>
+                <Text color={theme.text.secondary}>用户 Prompt: {debugInfo.userPrompt}</Text>
+              </Box>
+
+              {debugInfo.previousStepsCount > 0 && (
+                <Box marginTop={1}>
+                  <Text color={theme.text.secondary}>已执行步骤数: {debugInfo.previousStepsCount}</Text>
+                </Box>
+              )}
+
+              <Box marginTop={1}>
+                <Text color={theme.text.secondary}>AI 返回的 JSON:</Text>
+              </Box>
+              <Text color={theme.text.dim}>{JSON.stringify(debugInfo.response, null, 2)}</Text>
+
+              <Text color={theme.accent}>━━━━━━━━━━━━━━━━</Text>
+            </Box>
+          )}
+
+          {/* 步骤信息（仅多步骤时显示） */}
+          {state.stepData.continue === true && (
+            <Box flexDirection="column" marginTop={1}>
+              <Text color={theme.text.secondary}>步骤 {currentStepNumber}/?</Text>
+              {state.stepData.reasoning && (
+                <Text color={theme.text.muted}>原因: {state.stepData.reasoning}</Text>
+              )}
+              {state.stepData.nextStepHint && (
+                <Text color={theme.text.muted}>下一步: {state.stepData.nextStepHint}</Text>
+              )}
+            </Box>
+          )}
+
+          {/* 命令框 */}
+          <CommandBox command={state.stepData.command} />
+
+          {/* Builtin 警告 */}
+          {(() => {
+            const { hasBuiltin, builtins } = detectBuiltin(state.stepData.command)
+            if (hasBuiltin) {
+              return (
+                <Box flexDirection="column" marginY={1}>
+                  <Text color={theme.error}>
+                    ⚠️  此命令包含 shell 内置命令（{formatBuiltins(builtins)}），无法在子进程中生效
+                  </Text>
+                  <Text color={theme.warning}>💡 请手动复制到终端执行</Text>
+                </Box>
+              )
+            }
+            return null
+          })()}
+
+          {/* 确认提示 */}
+          {!detectBuiltin(state.stepData.command).hasBuiltin && (
+            <ConfirmationPrompt prompt="执行？" onConfirm={handleConfirm} onCancel={handleCancel} />
+          )}
+        </>
+      )}
+
+      {/* 取消 */}
+      {state.type === 'cancelled' && (
+        <Box marginTop={1}>
+          <Text color={theme.text.secondary}>已取消执行</Text>
+        </Box>
+      )}
+
+      {/* 错误 */}
+      {state.type === 'error' && (
+        <Box marginTop={1}>
+          <Text color={theme.error}>❌ 错误: {state.error}</Text>
+        </Box>
+      )}
+    </Box>
+  )
+}

package/src/components/TableRenderer.tsx

@@ -0,0 +1,110 @@
+import React from 'react'
+import { Box, Text } from 'ink'
+import stringWidth from 'string-width'
+import { theme } from '../ui/theme.js'
+import { RenderInline } from './InlineRenderer.js'
+
+interface TableRendererProps {
+  headers: string[]
+  rows: string[][]
+  terminalWidth: number
+}
+
+/**
+ * 计算纯文本长度（去除 markdown 标记）
+ */
+function getPlainTextLength(text: string): number {
+  const cleanText = text
+    .replace(/\*\*(.*?)\*\*/g, '$1')
+    .replace(/\*(.*?)\*/g, '$1')
+    .replace(/_(.*?)_/g, '$1')
+    .replace(/~~(.*?)~~/g, '$1')
+    .replace(/`(.*?)`/g, '$1')
+    .replace(/<u>(.*?)<\/u>/g, '$1')
+    .replace(/\[(.*?)\]\(.*?\)/g, '$1')
+  return stringWidth(cleanText)
+}
+
+/**
+ * 计算每列的最佳宽度
+ */
+function calculateColumnWidths(
+  headers: string[],
+  rows: string[][],
+  terminalWidth: number
+): number[] {
+  const columnCount = headers.length
+  const minWidths = headers.map((h, i) => {
+    const headerWidth = getPlainTextLength(h)
+    const maxRowWidth = Math.max(...rows.map(row => getPlainTextLength(row[i] || '')))
+    return Math.max(headerWidth, maxRowWidth, 3) // 最小宽度 3
+  })
+
+  const totalMinWidth = minWidths.reduce((a, b) => a + b, 0) + (columnCount + 1) * 3 // 加边框和间距
+
+  if (totalMinWidth <= terminalWidth) {
+    return minWidths
+  }
+
+  // 如果超宽，平均分配
+  const availableWidth = terminalWidth - (columnCount + 1) * 3
+  const avgWidth = Math.floor(availableWidth / columnCount)
+  return headers.map(() => Math.max(avgWidth, 5))
+}
+
+/**
+ * 表格渲染组件
+ */
+function TableRendererInternal({ headers, rows, terminalWidth }: TableRendererProps) {
+  const columnWidths = calculateColumnWidths(headers, rows, terminalWidth)
+  const baseColor = theme.text.primary
+
+  return (
+    <Box flexDirection="column" marginY={1}>
+      {/* 表头 */}
+      <Box>
+        <Text color={theme.border}>│ </Text>
+        {headers.map((header, i) => (
+          <React.Fragment key={i}>
+            <Box width={columnWidths[i]}>
+              <Text bold color={theme.primary}>
+                <RenderInline text={header} defaultColor={theme.primary} />
+              </Text>
+            </Box>
+            <Text color={theme.border}> │ </Text>
+          </React.Fragment>
+        ))}
+      </Box>
+
+      {/* 分隔线 */}
+      <Box>
+        <Text color={theme.border}>├─</Text>
+        {columnWidths.map((width, i) => (
+          <React.Fragment key={i}>
+            <Text color={theme.border}>{'─'.repeat(width)}</Text>
+            <Text color={theme.border}>─┼─</Text>
+          </React.Fragment>
+        ))}
+      </Box>
+
+      {/* 表格行 */}
+      {rows.map((row, rowIndex) => (
+        <Box key={rowIndex}>
+          <Text color={theme.border}>│ </Text>
+          {row.map((cell, cellIndex) => (
+            <React.Fragment key={cellIndex}>
+              <Box width={columnWidths[cellIndex]}>
+                <Text color={baseColor}>
+                  <RenderInline text={cell || ''} defaultColor={baseColor} />
+                </Text>
+              </Box>
+              <Text color={theme.border}> │ </Text>
+            </React.Fragment>
+          ))}
+        </Box>
+      ))}
+    </Box>
+  )
+}
+
+export const TableRenderer = React.memo(TableRendererInternal)