@yivan-lab/pretty-please 1.0.0 → 1.2.0

package/src/components/CodeColorizer.tsx

@@ -2,23 +2,27 @@ import React from 'react'
 import { Text, Box } from 'ink'
 import { common, createLowlight } from 'lowlight'
 import type { Root, Element, Text as HastText, ElementContent, RootContent } from 'hast'
-import { theme } from '../ui/theme.js'
+import { getCurrentTheme, type Theme } from '../ui/theme.js'
 
 // 创建 lowlight 实例
 const lowlight = createLowlight(common)
 
-// 语法高亮颜色映射
-const syntaxColors: Record<string, string> = {
-  'hljs-keyword': theme.code.keyword,
-  'hljs-string': theme.code.string,
-  'hljs-function': theme.code.function,
-  'hljs-comment': theme.code.comment,
-  'hljs-number': theme.primary,
-  'hljs-built_in': theme.secondary,
-  'hljs-title': theme.accent,
-  'hljs-variable': theme.text.primary,
-  'hljs-type': theme.info,
-  'hljs-operator': theme.text.secondary,
+/**
+ * 获取语法高亮颜色映射
+ */
+function getSyntaxColors(theme: Theme): Record<string, string> {
+  return {
+    'hljs-keyword': theme.code.keyword,
+    'hljs-string': theme.code.string,
+    'hljs-function': theme.code.function,
+    'hljs-comment': theme.code.comment,
+    'hljs-number': theme.primary,
+    'hljs-built_in': theme.secondary,
+    'hljs-title': theme.accent,
+    'hljs-variable': theme.text.primary,
+    'hljs-type': theme.info,
+    'hljs-operator': theme.text.secondary,
+  }
 }
 
 /**
@@ -26,7 +30,9 @@ const syntaxColors: Record<string, string> = {
  */
 function renderHastNode(
   node: Root | Element | HastText | RootContent,
-  inheritedColor: string | undefined
+  inheritedColor: string | undefined,
+  syntaxColors: Record<string, string>,
+  theme: Theme
 ): React.ReactNode {
   if (node.type === 'text') {
     const color = inheritedColor || theme.code.text
@@ -51,7 +57,7 @@ function renderHastNode(
     // 递归渲染子节点
     const children = node.children?.map((child: ElementContent, index: number) => (
       <React.Fragment key={index}>
-        {renderHastNode(child, colorToPassDown)}
+        {renderHastNode(child, colorToPassDown, syntaxColors, theme)}
       </React.Fragment>
     ))
 
@@ -65,7 +71,7 @@ function renderHastNode(
 
     return node.children?.map((child: RootContent, index: number) => (
       <React.Fragment key={index}>
-        {renderHastNode(child, inheritedColor)}
+        {renderHastNode(child, inheritedColor, syntaxColors, theme)}
       </React.Fragment>
     ))
   }
@@ -76,13 +82,13 @@ function renderHastNode(
 /**
  * 高亮并渲染一行代码
  */
-function highlightLine(line: string, language: string | null): React.ReactNode {
+function highlightLine(line: string, language: string | null, syntaxColors: Record<string, string>, theme: Theme): React.ReactNode {
   try {
     const highlighted = !language || !lowlight.registered(language)
       ? lowlight.highlightAuto(line)
       : lowlight.highlight(language, line)
 
-    const rendered = renderHastNode(highlighted, undefined)
+    const rendered = renderHastNode(highlighted, undefined, syntaxColors, theme)
     return rendered !== null ? rendered : line
   } catch {
     return line
@@ -99,12 +105,14 @@ interface ColorizeCodeProps {
  * 代码高亮组件
  */
 function ColorizeCodeInternal({ code, language = null, showLineNumbers = false }: ColorizeCodeProps) {
+  const theme = getCurrentTheme()
+  const syntaxColors = getSyntaxColors(theme)
   const codeToHighlight = code.replace(/\n$/, '')
   const lines = codeToHighlight.split('\n')
   const padWidth = String(lines.length).length
 
   const renderedLines = lines.map((line, index) => {
-    const contentToRender = highlightLine(line, language)
+    const contentToRender = highlightLine(line, language, syntaxColors, theme)
 
     return (
       <Box key={index} minHeight={1}>

package/src/components/CommandBox.tsx

@@ -1,32 +1,18 @@
 import React from 'react'
 import { Box, Text } from 'ink'
-import { theme } from '../ui/theme.js'
+import { getCurrentTheme } from '../ui/theme.js'
+import { getDisplayWidth } from '../utils/console.js'
 
 interface CommandBoxProps {
   command: string
   title?: string
 }
 
-/**
- * 计算字符串的显示宽度（中文占2个宽度）
- */
-function getDisplayWidth(str: string): number {
-  let width = 0
-  for (const char of str) {
-    // 中文、日文、韩文等宽字符占 2 个宽度
-    if (char.match(/[\u4e00-\u9fff\u3400-\u4dbf\uff00-\uffef\u3000-\u303f]/)) {
-      width += 2
-    } else {
-      width += 1
-    }
-  }
-  return width
-}
-
 /**
  * CommandBox 组件 - 显示带边框和标题的命令框
  */
 export const CommandBox: React.FC<CommandBoxProps> = ({ command, title = '生成命令' }) => {
+  const theme = getCurrentTheme()
   const lines = command.split('\n')
   const titleWidth = getDisplayWidth(title)
   const maxContentWidth = Math.max(...lines.map(l => getDisplayWidth(l)))

package/src/components/ConfirmationPrompt.tsx

@@ -1,22 +1,25 @@
 import React from 'react'
 import { Text, useInput } from 'ink'
-import { theme } from '../ui/theme.js'
+import { getCurrentTheme } from '../ui/theme.js'
 
 interface ConfirmationPromptProps {
   prompt: string
   onConfirm: () => void
   onCancel: () => void
+  onEdit?: () => void  // 新增：编辑回调
 }
 
 /**
  * ConfirmationPrompt 组件 - 单键确认提示
- * 回车 = 确认，Esc = 取消，Ctrl+C = 退出
+ * 回车 = 确认，E = 编辑，Esc = 取消，Ctrl+C = 退出
  */
 export const ConfirmationPrompt: React.FC<ConfirmationPromptProps> = ({
   prompt,
   onConfirm,
   onCancel,
+  onEdit,
 }) => {
+  const theme = getCurrentTheme()
   useInput((input, key) => {
     if (key.return) {
       // 回车键
@@ -24,6 +27,9 @@ export const ConfirmationPrompt: React.FC<ConfirmationPromptProps> = ({
     } else if (key.escape) {
       // Esc 键
       onCancel()
+    } else if ((input === 'e' || input === 'E') && onEdit) {
+      // E 键进入编辑模式
+      onEdit()
     } else if (key.ctrl && input === 'c') {
       // Ctrl+C
       process.exit(0)
@@ -35,7 +41,9 @@ export const ConfirmationPrompt: React.FC<ConfirmationPromptProps> = ({
       <Text bold color={theme.warning}>
         {prompt}
       </Text>
-      <Text color={theme.text.secondary}> [回车执行 / Esc 取消] </Text>
+      <Text color={theme.text.secondary}>
+        {onEdit ? ' [回车执行 / E 编辑 / Esc 取消] ' : ' [回车执行 / Esc 取消] '}
+      </Text>
     </Text>
   )
 }

package/src/components/Duration.tsx

@@ -1,6 +1,6 @@
 import React from 'react'
 import { Text } from 'ink'
-import { theme } from '../ui/theme.js'
+import { getCurrentTheme } from '../ui/theme.js'
 
 interface DurationProps {
   ms: number
@@ -20,5 +20,6 @@ function formatDuration(ms: number): string {
  * Duration 组件 - 显示耗时
  */
 export const Duration: React.FC<DurationProps> = ({ ms }) => {
+  const theme = getCurrentTheme()
   return <Text color={theme.text.secondary}>({formatDuration(ms)})</Text>
 }

package/src/components/InlineRenderer.tsx

@@ -1,6 +1,6 @@
 import React from 'react'
 import { Text } from 'ink'
-import { theme } from '../ui/theme.js'
+import { getCurrentTheme } from '../ui/theme.js'
 
 interface RenderInlineProps {
   text: string
@@ -12,6 +12,7 @@ interface RenderInlineProps {
  * 处理 **粗体**、*斜体*、`代码`、~~删除线~~、<u>下划线</u>、链接
  */
 function RenderInlineInternal({ text, defaultColor }: RenderInlineProps) {
+  const theme = getCurrentTheme()
   const baseColor = defaultColor || theme.text.primary
 
   // 快速路径：纯文本无 markdown

package/src/components/MarkdownDisplay.tsx

@@ -1,6 +1,6 @@
 import React from 'react'
 import { Text, Box } from 'ink'
-import { theme } from '../ui/theme.js'
+import { getCurrentTheme } from '../ui/theme.js'
 import { ColorizeCode } from './CodeColorizer.js'
 import { TableRenderer } from './TableRenderer.js'
 import { RenderInline } from './InlineRenderer.js'
@@ -18,6 +18,7 @@ interface MarkdownDisplayProps {
 function MarkdownDisplayInternal({ text, terminalWidth = 80 }: MarkdownDisplayProps) {
   if (!text) return <></>
 
+  const theme = getCurrentTheme()
   const lines = text.split(/\r?\n/)
 
   // 正则表达式

package/src/components/MultiStepCommandGenerator.tsx

@@ -1,18 +1,22 @@
 import React, { useState, useEffect } from 'react'
-import { Box, Text } from 'ink'
+import { Box, Text, useInput } from 'ink'
+import TextInput from 'ink-text-input'
 import Spinner from 'ink-spinner'
-import { generateMultiStepCommand, type CommandStep, type ExecutedStep } from '../multi-step.js'
+import { generateMultiStepCommand, type CommandStep, type ExecutedStep, type RemoteContext } 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'
+import { getCurrentTheme } from '../ui/theme.js'
+import { getConfig } from '../config.js'
 
 interface MultiStepCommandGeneratorProps {
   prompt: string
   debug?: boolean
   onStepComplete: (step: {
     command: string
+    aiGeneratedCommand?: string  // 新增：AI 生成的原始命令
+    userModified?: boolean        // 新增：用户是否修改
     confirmed: boolean
     cancelled?: boolean
     hasBuiltin?: boolean
@@ -24,11 +28,14 @@ interface MultiStepCommandGeneratorProps {
   }) => void
   previousSteps?: ExecutedStep[]
   currentStepNumber?: number
+  remoteContext?: RemoteContext  // 远程执行上下文
+  isRemote?: boolean             // 是否为远程执行（远程执行时不检测 builtin）
 }
 
 type State =
   | { type: 'thinking' }
   | { type: 'showing_command'; stepData: CommandStep }
+  | { type: 'editing'; stepData: CommandStep }  // 新增：编辑状态
   | { type: 'cancelled'; command: string }
   | { type: 'error'; error: string }
 
@@ -41,17 +48,31 @@ export const MultiStepCommandGenerator: React.FC<MultiStepCommandGeneratorProps>
   debug,
   previousSteps = [],
   currentStepNumber = 1,
+  remoteContext,
+  isRemote = false,
   onStepComplete,
 }) => {
+  const theme = getCurrentTheme()
   const [state, setState] = useState<State>({ type: 'thinking' })
   const [thinkDuration, setThinkDuration] = useState(0)
   const [debugInfo, setDebugInfo] = useState<any>(null)
+  const [editedCommand, setEditedCommand] = useState('')  // 新增：编辑后的命令
+
+  // 监听编辑模式下的 Esc 键
+  useInput(
+    (input, key) => {
+      if (state.type === 'editing' && key.escape) {
+        handleEditCancel()
+      }
+    },
+    { isActive: state.type === 'editing' }
+  )
 
   // 初始化：调用 Mastra 生成命令
   useEffect(() => {
     const thinkStart = Date.now()
 
-    generateMultiStepCommand(prompt, previousSteps, { debug })
+    generateMultiStepCommand(prompt, previousSteps, { debug, remoteContext })
       .then((result) => {
         const thinkEnd = Date.now()
         setThinkDuration(thinkEnd - thinkStart)
@@ -61,15 +82,29 @@ export const MultiStepCommandGenerator: React.FC<MultiStepCommandGeneratorProps>
           setDebugInfo(result.debugInfo)
         }
 
-        setState({
-          type: 'showing_command',
-          stepData: result.stepData,
-        })
+        // 如果 AI 返回空命令且决定不继续，说明 AI 放弃了
+        // 直接结束，不显示命令框
+        if (!result.stepData.command.trim() && result.stepData.continue === false) {
+          setTimeout(() => {
+            onStepComplete({
+              command: '',
+              confirmed: false,
+              reasoning: result.stepData.reasoning,
+              needsContinue: false,
+            })
+          }, 100)
+          return
+        }
 
-        // 检测 builtin
+        // 检测 builtin（优先检测，但远程执行时跳过）
         const { hasBuiltin, builtins } = detectBuiltin(result.stepData.command)
 
-        if (hasBuiltin) {
+        if (hasBuiltin && !isRemote) {
+          // 有 builtin 且是本地执行，不管什么模式都不编辑，直接提示
+          setState({
+            type: 'showing_command',
+            stepData: result.stepData,
+          })
           setTimeout(() => {
             onStepComplete({
               command: result.stepData.command,
@@ -80,6 +115,26 @@ export const MultiStepCommandGenerator: React.FC<MultiStepCommandGeneratorProps>
               needsContinue: result.stepData.continue,
             })
           }, 100)
+          return
+        }
+
+        // 根据 editMode 决定进入哪个状态
+        const config = getConfig()
+        const autoEdit = config.editMode === 'auto'
+
+        if (autoEdit) {
+          // auto 模式：直接进入编辑状态
+          setEditedCommand(result.stepData.command)
+          setState({
+            type: 'editing',
+            stepData: result.stepData,
+          })
+        } else {
+          // manual 模式：显示命令，等待用户操作
+          setState({
+            type: 'showing_command',
+            stepData: result.stepData,
+          })
         }
       })
       .catch((error: any) => {
@@ -92,13 +147,15 @@ export const MultiStepCommandGenerator: React.FC<MultiStepCommandGeneratorProps>
           })
         }, 100)
       })
-  }, [prompt, previousSteps, debug])
+  }, [prompt, previousSteps, debug, remoteContext])
 
   // 处理确认
   const handleConfirm = () => {
     if (state.type === 'showing_command') {
       onStepComplete({
         command: state.stepData.command,
+        aiGeneratedCommand: state.stepData.command,  // 原始命令
+        userModified: false,
         confirmed: true,
         reasoning: state.stepData.reasoning,
         needsContinue: state.stepData.continue,
@@ -108,6 +165,53 @@ export const MultiStepCommandGenerator: React.FC<MultiStepCommandGeneratorProps>
     }
   }
 
+  // 处理编辑
+  const handleEdit = () => {
+    if (state.type === 'showing_command') {
+      setEditedCommand(state.stepData.command)  // 初始化为 AI 生成的命令
+      setState({ type: 'editing', stepData: state.stepData })
+    }
+  }
+
+  // 编辑完成确认
+  const handleEditConfirm = () => {
+    if (state.type === 'editing') {
+      const modified = editedCommand !== state.stepData.command
+      onStepComplete({
+        command: editedCommand,  // 使用编辑后的命令
+        aiGeneratedCommand: state.stepData.command,  // 保存 AI 原始命令
+        userModified: modified,
+        confirmed: true,
+        reasoning: state.stepData.reasoning,
+        needsContinue: state.stepData.continue,
+        nextStepHint: state.stepData.nextStepHint,
+        debugInfo: debugInfo,
+      })
+    }
+  }
+
+  // 取消编辑
+  const handleEditCancel = () => {
+    if (state.type === 'editing') {
+      const config = getConfig()
+
+      if (config.editMode === 'auto') {
+        // auto 模式：Esc 直接取消整个操作
+        setState({ type: 'cancelled', command: state.stepData.command })
+        setTimeout(() => {
+          onStepComplete({
+            command: state.stepData.command,
+            confirmed: false,
+            cancelled: true,
+          })
+        }, 100)
+      } else {
+        // manual 模式：Esc 返回到 showing_command 状态
+        setState({ type: 'showing_command', stepData: state.stepData })
+      }
+    }
+  }
+
   // 处理取消
   const handleCancel = () => {
     if (state.type === 'showing_command') {
@@ -129,7 +233,10 @@ export const MultiStepCommandGenerator: React.FC<MultiStepCommandGeneratorProps>
         <Box>
           <Text color={theme.info}>
             <Spinner type="dots" />{' '}
-            {currentStepNumber === 1 ? '正在思考...' : `正在规划步骤 ${currentStepNumber}...`}
+            {remoteContext
+              ? (currentStepNumber === 1 ? `正在为 ${remoteContext.name} 思考...` : `正在规划步骤 ${currentStepNumber} (${remoteContext.name})...`)
+              : (currentStepNumber === 1 ? '正在思考...' : `正在规划步骤 ${currentStepNumber}...`)
+            }
           </Text>
         </Box>
       )}
@@ -163,6 +270,12 @@ export const MultiStepCommandGenerator: React.FC<MultiStepCommandGeneratorProps>
                 </Box>
               )}
 
+              {debugInfo.remoteContext && (
+                <Box marginTop={1}>
+                  <Text color={theme.text.secondary}>远程服务器: {debugInfo.remoteContext.name} ({debugInfo.remoteContext.sysInfo.os})</Text>
+                </Box>
+              )}
+
               <Box marginTop={1}>
                 <Text color={theme.text.secondary}>AI 返回的 JSON:</Text>
               </Box>
@@ -188,8 +301,8 @@ export const MultiStepCommandGenerator: React.FC<MultiStepCommandGeneratorProps>
           {/* 命令框 */}
           <CommandBox command={state.stepData.command} />
 
-          {/* Builtin 警告 */}
-          {(() => {
+          {/* Builtin 警告（仅本地执行时显示） */}
+          {!isRemote && (() => {
             const { hasBuiltin, builtins } = detectBuiltin(state.stepData.command)
             if (hasBuiltin) {
               return (
@@ -205,9 +318,47 @@ export const MultiStepCommandGenerator: React.FC<MultiStepCommandGeneratorProps>
           })()}
 
           {/* 确认提示 */}
-          {!detectBuiltin(state.stepData.command).hasBuiltin && (
-            <ConfirmationPrompt prompt="执行？" onConfirm={handleConfirm} onCancel={handleCancel} />
+          {(isRemote || !detectBuiltin(state.stepData.command).hasBuiltin) && (
+            <ConfirmationPrompt
+              prompt="执行？"
+              onConfirm={handleConfirm}
+              onCancel={handleCancel}
+              onEdit={handleEdit}  // 新增：编辑回调
+            />
+          )}
+        </>
+      )}
+
+      {/* 编辑模式 */}
+      {state.type === 'editing' && (
+        <>
+          {/* 步骤信息（仅多步骤时显示） */}
+          {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>
+              )}
+            </Box>
           )}
+
+          {/* 命令框（AI 建议） */}
+          <CommandBox command={state.stepData.command} />
+
+          {/* 编辑框 */}
+          <Box flexDirection="row">
+            <Text color={theme.primary}>{'> '}</Text>
+            <TextInput
+              value={editedCommand}
+              onChange={setEditedCommand}
+              onSubmit={handleEditConfirm}
+            />
+          </Box>
+          <Box marginTop={1}>
+            <Text color={theme.text.secondary}>
+              {getConfig().editMode === 'auto' ? '[回车执行 / Esc 取消]' : '[回车执行 / Esc 返回]'}
+            </Text>
+          </Box>
         </>
       )}
 

package/src/components/TableRenderer.tsx

@@ -1,7 +1,7 @@
 import React from 'react'
 import { Box, Text } from 'ink'
 import stringWidth from 'string-width'
-import { theme } from '../ui/theme.js'
+import { getCurrentTheme } from '../ui/theme.js'
 import { RenderInline } from './InlineRenderer.js'
 
 interface TableRendererProps {
@@ -56,6 +56,7 @@ function calculateColumnWidths(
  * 表格渲染组件
  */
 function TableRendererInternal({ headers, rows, terminalWidth }: TableRendererProps) {
+  const theme = getCurrentTheme()
   const columnWidths = calculateColumnWidths(headers, rows, terminalWidth)
   const baseColor = theme.text.primary