@yivan-lab/pretty-please 1.0.0

package/src/components/ConfigWizard.tsx

@@ -0,0 +1,101 @@
+import React, { useState } from 'react'
+import { Box, Text } from 'ink'
+import TextInput from 'ink-text-input'
+import { getConfig, saveConfig, maskApiKey } from '../config.js'
+import { theme } from '../ui/theme.js'
+import path from 'path'
+import os from 'os'
+
+const CONFIG_FILE = path.join(os.homedir(), '.please', 'config.json')
+
+interface ConfigWizardProps {
+  onComplete: () => void
+}
+
+type Step = 'apiKey' | 'baseUrl' | 'model' | 'done'
+
+/**
+ * ConfigWizard 组件 - 交互式配置向导
+ */
+export const ConfigWizard: React.FC<ConfigWizardProps> = ({ onComplete }) => {
+  const config = getConfig()
+  const [step, setStep] = useState<Step>('apiKey')
+  const [apiKey, setApiKey] = useState(config.apiKey)
+  const [baseUrl, setBaseUrl] = useState(config.baseUrl)
+  const [model, setModel] = useState(config.model)
+
+  const handleApiKeySubmit = (value: string) => {
+    if (value.trim()) {
+      setApiKey(value.trim())
+    }
+    setStep('baseUrl')
+  }
+
+  const handleBaseUrlSubmit = (value: string) => {
+    if (value.trim()) {
+      setBaseUrl(value.trim())
+    }
+    setStep('model')
+  }
+
+  const handleModelSubmit = (value: string) => {
+    if (value.trim()) {
+      setModel(value.trim())
+    }
+
+    // 保存配置
+    saveConfig({
+      ...config,
+      apiKey: apiKey || config.apiKey,
+      baseUrl: baseUrl || config.baseUrl,
+      model: model.trim() || config.model,
+    })
+
+    setStep('done')
+    setTimeout(onComplete, 100)
+  }
+
+  return (
+    <Box flexDirection="column" marginY={1}>
+      <Text bold color={theme.accent}>
+        🔧 Pretty Please 配置向导
+      </Text>
+      <Text color={theme.text.secondary}>{'━'.repeat(40)}</Text>
+
+      {step === 'apiKey' && (
+        <Box marginTop={1}>
+          <Text color={theme.primary}>
+            请输入 API Key{config.apiKey ? ` (当前: ${maskApiKey(config.apiKey)})` : ''}:{' '}
+          </Text>
+          <TextInput value="" onChange={() => {}} onSubmit={handleApiKeySubmit} />
+        </Box>
+      )}
+
+      {step === 'baseUrl' && (
+        <Box marginTop={1}>
+          <Text color={theme.primary}>
+            请输入 API Base URL (回车使用 {baseUrl}):{' '}
+          </Text>
+          <TextInput value="" onChange={() => {}} onSubmit={handleBaseUrlSubmit} />
+        </Box>
+      )}
+
+      {step === 'model' && (
+        <Box marginTop={1}>
+          <Text color={theme.primary}>
+            请输入模型名称 (回车使用 {model}):{' '}
+          </Text>
+          <TextInput value="" onChange={() => {}} onSubmit={handleModelSubmit} />
+        </Box>
+      )}
+
+      {step === 'done' && (
+        <Box flexDirection="column" marginTop={1}>
+          <Text color={theme.text.secondary}>{'━'.repeat(40)}</Text>
+          <Text color={theme.success}>✅ 配置已保存到 </Text>
+          <Text color={theme.text.secondary}>{CONFIG_FILE}</Text>
+        </Box>
+      )}
+    </Box>
+  )
+}

package/src/components/ConfirmationPrompt.tsx

@@ -0,0 +1,41 @@
+import React from 'react'
+import { Text, useInput } from 'ink'
+import { theme } from '../ui/theme.js'
+
+interface ConfirmationPromptProps {
+  prompt: string
+  onConfirm: () => void
+  onCancel: () => void
+}
+
+/**
+ * ConfirmationPrompt 组件 - 单键确认提示
+ * 回车 = 确认，Esc = 取消，Ctrl+C = 退出
+ */
+export const ConfirmationPrompt: React.FC<ConfirmationPromptProps> = ({
+  prompt,
+  onConfirm,
+  onCancel,
+}) => {
+  useInput((input, key) => {
+    if (key.return) {
+      // 回车键
+      onConfirm()
+    } else if (key.escape) {
+      // Esc 键
+      onCancel()
+    } else if (key.ctrl && input === 'c') {
+      // Ctrl+C
+      process.exit(0)
+    }
+  })
+
+  return (
+    <Text>
+      <Text bold color={theme.warning}>
+        {prompt}
+      </Text>
+      <Text color={theme.text.secondary}> [回车执行 / Esc 取消] </Text>
+    </Text>
+  )
+}

package/src/components/Duration.tsx

@@ -0,0 +1,24 @@
+import React from 'react'
+import { Text } from 'ink'
+import { theme } from '../ui/theme.js'
+
+interface DurationProps {
+  ms: number
+}
+
+/**
+ * 格式化耗时
+ */
+function formatDuration(ms: number): string {
+  if (ms < 1000) {
+    return `${ms}ms`
+  }
+  return `${(ms / 1000).toFixed(2)}s`
+}
+
+/**
+ * Duration 组件 - 显示耗时
+ */
+export const Duration: React.FC<DurationProps> = ({ ms }) => {
+  return <Text color={theme.text.secondary}>({formatDuration(ms)})</Text>
+}

package/src/components/HistoryDisplay.tsx

@@ -0,0 +1,69 @@
+import React from 'react'
+import { Box, Text } from 'ink'
+import { getHistory, getHistoryFilePath } from '../history.js'
+import { theme } from '../ui/theme.js'
+
+interface HistoryDisplayProps {
+  onComplete?: () => void
+}
+
+/**
+ * HistoryDisplay 组件 - 显示历史记录
+ */
+export const HistoryDisplay: React.FC<HistoryDisplayProps> = ({ onComplete }) => {
+  const history = getHistory()
+
+  React.useEffect(() => {
+    if (onComplete) {
+      setTimeout(onComplete, 100)
+    }
+  }, [onComplete])
+
+  if (history.length === 0) {
+    return (
+      <Box marginY={1}>
+        <Text color={theme.text.secondary}>暂无历史记录</Text>
+      </Box>
+    )
+  }
+
+  return (
+    <Box flexDirection="column" marginY={1}>
+      <Text bold>📜 命令历史:</Text>
+      <Text color={theme.text.secondary}>{'━'.repeat(50)}</Text>
+
+      {history.map((item, index) => {
+        const status = item.executed
+          ? item.exitCode === 0
+            ? '✓'
+            : `✗ 退出码:${item.exitCode}`
+          : '(未执行)'
+
+        const statusColor = item.executed
+          ? item.exitCode === 0
+            ? theme.success
+            : theme.error
+          : theme.text.secondary
+
+        return (
+          <Box key={index} flexDirection="column" marginY={1}>
+            <Box>
+              <Text color={theme.text.secondary}>{index + 1}. </Text>
+              <Text color={theme.primary}>{item.userPrompt}</Text>
+            </Box>
+            <Box marginLeft={3}>
+              <Text dimColor>→ </Text>
+              <Text>{item.command} </Text>
+              <Text color={statusColor}>{status}</Text>
+            </Box>
+            <Box marginLeft={3}>
+              <Text color={theme.text.secondary}>{item.timestamp}</Text>
+            </Box>
+          </Box>
+        )
+      })}
+
+      <Text color={theme.text.secondary}>历史文件: {getHistoryFilePath()}</Text>
+    </Box>
+  )
+}

package/src/components/HookManager.tsx

@@ -0,0 +1,150 @@
+import React, { useState, useEffect } from 'react'
+import { Box, Text } from 'ink'
+import {
+  getHookStatus,
+  installShellHook,
+  uninstallShellHook,
+  detectShell,
+  getShellConfigPath,
+} from '../shell-hook.js'
+import { theme } from '../ui/theme.js'
+
+interface HookManagerProps {
+  action: 'status' | 'install' | 'uninstall'
+  onComplete: () => void
+}
+
+/**
+ * HookManager 组件 - Hook 管理界面
+ */
+export const HookManager: React.FC<HookManagerProps> = ({ action, onComplete }) => {
+  const [status, setStatus] = useState(getHookStatus())
+  const [message, setMessage] = useState<string | null>(null)
+  const [isProcessing, setIsProcessing] = useState(false)
+
+  useEffect(() => {
+    const execute = async () => {
+      if (action === 'install') {
+        setIsProcessing(true)
+        const shellType = detectShell()
+        const configPath = getShellConfigPath(shellType)
+
+        if (shellType === 'unknown') {
+          setMessage('❌ 不支持的 shell 类型')
+          setIsProcessing(false)
+          setTimeout(onComplete, 2000)
+          return
+        }
+
+        const result = await installShellHook()
+        setStatus(getHookStatus())
+        setIsProcessing(false)
+
+        if (result) {
+          setMessage(
+            `✅ Shell hook 已安装\n⚠️  请重启终端或执行: source ${configPath}`
+          )
+        }
+
+        setTimeout(onComplete, 3000)
+      } else if (action === 'uninstall') {
+        setIsProcessing(true)
+        uninstallShellHook()
+        setStatus(getHookStatus())
+        setMessage('✅ Shell hook 已卸载\n⚠️  请重启终端使其生效')
+        setIsProcessing(false)
+        setTimeout(onComplete, 3000)
+      } else {
+        // status
+        setTimeout(onComplete, 100)
+      }
+    }
+
+    execute()
+  }, [action, onComplete])
+
+  if (action === 'install' || action === 'uninstall') {
+    return (
+      <Box flexDirection="column" marginY={1}>
+        <Text bold color={theme.accent}>
+          🔧 Shell Hook {action === 'install' ? '安装' : '卸载'}向导
+        </Text>
+        <Text color={theme.text.secondary}>{'━'.repeat(40)}</Text>
+
+        {isProcessing && <Text color={theme.info}>处理中...</Text>}
+
+        {message && (
+          <Box flexDirection="column" marginTop={1}>
+            {message.split('\n').map((line, i) => (
+              <Text
+                key={i}
+                color={
+                  line.startsWith('✅')
+                    ? theme.success
+                    : line.startsWith('⚠️')
+                    ? theme.warning
+                    : line.startsWith('❌')
+                    ? theme.error
+                    : theme.text.primary
+                }
+              >
+                {line}
+              </Text>
+            ))}
+          </Box>
+        )}
+      </Box>
+    )
+  }
+
+  // Status display
+  return (
+    <Box flexDirection="column" marginY={1}>
+      <Text bold>📊 Shell Hook 状态</Text>
+      <Text color={theme.text.secondary}>{'━'.repeat(40)}</Text>
+
+      <Box marginTop={1}>
+        <Text color={theme.primary}>  Shell 类型: </Text>
+        <Text>{status.shellType}</Text>
+      </Box>
+
+      <Box>
+        <Text color={theme.primary}>  配置文件:   </Text>
+        <Text>{status.configPath || '未知'}</Text>
+      </Box>
+
+      <Box>
+        <Text color={theme.primary}>  已安装:     </Text>
+        {status.installed ? (
+          <Text color={theme.success}>是</Text>
+        ) : (
+          <Text color={theme.text.secondary}>否</Text>
+        )}
+      </Box>
+
+      <Box>
+        <Text color={theme.primary}>  已启用:     </Text>
+        {status.enabled ? (
+          <Text color={theme.success}>是</Text>
+        ) : (
+          <Text color={theme.text.secondary}>否</Text>
+        )}
+      </Box>
+
+      <Box>
+        <Text color={theme.primary}>  历史文件:   </Text>
+        <Text>{status.historyFile}</Text>
+      </Box>
+
+      <Text color={theme.text.secondary}>{'━'.repeat(40)}</Text>
+
+      {!status.installed && (
+        <Box marginTop={1}>
+          <Text color={theme.text.secondary}>
+            提示: 运行 <Text color={theme.primary}>pls hook install</Text> 安装 shell hook
+          </Text>
+        </Box>
+      )}
+    </Box>
+  )
+}

package/src/components/InlineRenderer.tsx

@@ -0,0 +1,123 @@
+import React from 'react'
+import { Text } from 'ink'
+import { theme } from '../ui/theme.js'
+
+interface RenderInlineProps {
+  text: string
+  defaultColor?: string
+}
+
+/**
+ * 行内 Markdown 渲染器
+ * 处理 **粗体**、*斜体*、`代码`、~~删除线~~、<u>下划线</u>、链接
+ */
+function RenderInlineInternal({ text, defaultColor }: RenderInlineProps) {
+  const baseColor = defaultColor || theme.text.primary
+
+  // 快速路径：纯文本无 markdown
+  if (!/[*_~`<[https?:]/.test(text)) {
+    return <Text color={baseColor}>{text}</Text>
+  }
+
+  const nodes: React.ReactNode[] = []
+  let lastIndex = 0
+
+  // 匹配所有行内 markdown 语法（添加删除线、下划线、链接）
+  const inlineRegex = /(~~.+?~~|\*\*[^*]+?\*\*|\*[^*]+?\*|_[^_]+?_|`+[^`]+?`+|\[.*?\]\(.*?\)|<u>.*?<\/u>|https?:\/\/\S+)/g
+  let match
+
+  while ((match = inlineRegex.exec(text)) !== null) {
+    // 添加匹配之前的普通文本
+    if (match.index > lastIndex) {
+      nodes.push(
+        <Text key={`t-${lastIndex}`} color={baseColor}>
+          {text.slice(lastIndex, match.index)}
+        </Text>
+      )
+    }
+
+    const fullMatch = match[0]
+    let renderedNode: React.ReactNode = null
+    const key = `m-${match.index}`
+
+    // **粗体**
+    if (fullMatch.startsWith('**') && fullMatch.endsWith('**') && fullMatch.length > 4) {
+      renderedNode = (
+        <Text key={key} bold color={baseColor}>
+          {fullMatch.slice(2, -2)}
+        </Text>
+      )
+    }
+    // ~~删除线~~
+    else if (fullMatch.startsWith('~~') && fullMatch.endsWith('~~') && fullMatch.length > 4) {
+      renderedNode = (
+        <Text key={key} strikethrough color={baseColor}>
+          {fullMatch.slice(2, -2)}
+        </Text>
+      )
+    }
+    // *斜体*
+    else if (fullMatch.startsWith('*') && fullMatch.endsWith('*') && fullMatch.length > 2 && !fullMatch.startsWith('**')) {
+      renderedNode = (
+        <Text key={key} italic color={baseColor}>
+          {fullMatch.slice(1, -1)}
+        </Text>
+      )
+    }
+    // `行内代码`
+    else if (fullMatch.startsWith('`') && fullMatch.endsWith('`')) {
+      const codeText = fullMatch.slice(1, -1)
+      renderedNode = (
+        <Text key={key} color={theme.primary}>
+          {codeText}
+        </Text>
+      )
+    }
+    // [链接文本](URL)
+    else if (fullMatch.startsWith('[') && fullMatch.includes('](') && fullMatch.endsWith(')')) {
+      const linkMatch = fullMatch.match(/\[(.*?)\]\((.*?)\)/)
+      if (linkMatch) {
+        const linkText = linkMatch[1]
+        const url = linkMatch[2]
+        renderedNode = (
+          <Text key={key} color={baseColor}>
+            {linkText}
+            <Text color={theme.info}> ({url})</Text>
+          </Text>
+        )
+      }
+    }
+    // <u>下划线</u>
+    else if (fullMatch.startsWith('<u>') && fullMatch.endsWith('</u>') && fullMatch.length > 7) {
+      renderedNode = (
+        <Text key={key} underline color={baseColor}>
+          {fullMatch.slice(3, -4)}
+        </Text>
+      )
+    }
+    // 裸 URL
+    else if (fullMatch.match(/^https?:\/\//)) {
+      renderedNode = (
+        <Text key={key} color={theme.info}>
+          {fullMatch}
+        </Text>
+      )
+    }
+
+    nodes.push(renderedNode || <Text key={key} color={baseColor}>{fullMatch}</Text>)
+    lastIndex = inlineRegex.lastIndex
+  }
+
+  // 添加剩余的普通文本
+  if (lastIndex < text.length) {
+    nodes.push(
+      <Text key={`t-${lastIndex}`} color={baseColor}>
+        {text.slice(lastIndex)}
+      </Text>
+    )
+  }
+
+  return <>{nodes}</>
+}
+
+export const RenderInline = React.memo(RenderInlineInternal)