closer-code 1.0.0 → 1.0.1

package/src/components/tool-renderers/file-read-renderer.jsx

@@ -0,0 +1,261 @@
+/**
+ * 文件读取渲染器
+ * 
+ * 支持工具：readFile, readFileLines, readFileTail
+ * 
+ * 特点：
+ * - 显示文件路径和大小
+ * - 内容预览（带行号）
+ * - 行范围信息
+ */
+
+import React from 'react';
+import { Box, Text } from 'ink';
+import { ProgressBar, Spinner } from '../progress-bar.jsx';
+
+/**
+ * 解析文件读取工具的输入参数
+ */
+function parseInput(input, toolName) {
+  if (!input) return { path: '' };
+  
+  if (typeof input === 'string') {
+    return { path: input };
+  }
+  
+  const path = input.path || input.filePath || input.file || '';
+  
+  // readFileLines 特有参数
+  if (toolName === 'readFileLines') {
+    return {
+      path,
+      startLine: input.startLine || input.start || 1,
+      endLine: input.endLine || input.end
+    };
+  }
+  
+  // readFileTail 特有参数
+  if (toolName === 'readFileTail') {
+    return {
+      path,
+      lines: input.lines || input.n || 10
+    };
+  }
+  
+  return { path };
+}
+
+/**
+ * 解析文件读取工具的输出结果
+ */
+function parseResult(result) {
+  if (!result) return null;
+  
+  if (typeof result === 'string') {
+    return { content: result, success: true };
+  }
+  
+  return {
+    content: result.content || result.text || result.data || '',
+    size: result.size || result.bytes,
+    lines: result.lines || result.lineCount,
+    success: result.success !== false,
+    error: result.error || result.message
+  };
+}
+
+/**
+ * 格式化文件大小
+ */
+function formatSize(bytes) {
+  if (!bytes) return '';
+  if (bytes < 1024) return `${bytes} B`;
+  if (bytes < 1024 * 1024) return `${(bytes / 1024).toFixed(1)} KB`;
+  return `${(bytes / (1024 * 1024)).toFixed(1)} MB`;
+}
+
+/**
+ * 从路径中提取文件名
+ */
+function getFileName(path) {
+  if (!path) return '';
+  const parts = path.replace(/\\/g, '/').split('/');
+  return parts[parts.length - 1] || path;
+}
+
+/**
+ * 从路径中提取目录
+ */
+function getDirectory(path) {
+  if (!path) return '';
+  const normalized = path.replace(/\\/g, '/');
+  const lastSlash = normalized.lastIndexOf('/');
+  return lastSlash > 0 ? normalized.substring(0, lastSlash + 1) : '';
+}
+
+/**
+ * 内容预览组件（带行号）
+ */
+function ContentPreview({ content, maxLines = 6, startLine = 1 }) {
+  if (!content) {
+    return <Text dim italic>（无内容）</Text>;
+  }
+  
+  const lines = String(content).split('\n');
+  const displayLines = lines.slice(0, maxLines);
+  const hasMore = lines.length > maxLines;
+  
+  // 计算行号宽度
+  const maxLineNum = startLine + displayLines.length - 1;
+  const lineNumWidth = String(maxLineNum).length;
+  
+  return (
+    <Box flexDirection="column">
+      {displayLines.map((line, i) => {
+        const lineNum = String(startLine + i).padStart(lineNumWidth, ' ');
+        const displayLine = line.length > 70 ? line.substring(0, 67) + '...' : line;
+        
+        return (
+          <Box key={i}>
+            <Text dim>{lineNum} │ </Text>
+            <Text>{displayLine}</Text>
+          </Box>
+        );
+      })}
+      {hasMore && (
+        <Text dim italic>... 还有 {lines.length - maxLines} 行</Text>
+      )}
+    </Box>
+  );
+}
+
+/**
+ * 文件读取渲染器组件
+ * 
+ * @param {Object} props
+ * @param {Object} props.tool - 工具执行数据
+ * @param {number} props.maxHeight - 最大高度
+ */
+export function FileReadRenderer({ tool, maxHeight = 10 }) {
+  const { input, result, status, duration, startTime } = tool;
+  const toolName = tool.tool || 'readFile';
+  
+  const parsedInput = parseInput(input, toolName);
+  const parsedResult = parseResult(result);
+  
+  const isRunning = status === 'running';
+  const isSuccess = status === 'success' || parsedResult?.success;
+  const isError = status === 'error' || parsedResult?.success === false;
+  
+  const fileName = getFileName(parsedInput.path);
+  const directory = getDirectory(parsedInput.path);
+  
+  // 计算内容预览可用行数
+  const previewMaxLines = Math.max(3, maxHeight - 6);
+  
+  // 工具图标
+  const toolIcons = {
+    readFile: '📖',
+    readFileLines: '📄',
+    readFileTail: '📜'
+  };
+  const icon = toolIcons[toolName] || '📖';
+  
+  return (
+    <Box flexDirection="column">
+      {/* 文件信息 */}
+      <Box>
+        <Text>{icon} </Text>
+        <Text bold color="cyan">{fileName}</Text>
+        {parsedResult?.size && (
+          <Text dim> ({formatSize(parsedResult.size)})</Text>
+        )}
+      </Box>
+      
+      {/* 目录路径 */}
+      {directory && (
+        <Box>
+          <Text dim>📂 {directory}</Text>
+        </Box>
+      )}
+      
+      {/* 行范围信息 */}
+      {toolName === 'readFileLines' && parsedInput.startLine && (
+        <Box>
+          <Text dim>📍 行 {parsedInput.startLine}</Text>
+          {parsedInput.endLine && <Text dim> - {parsedInput.endLine}</Text>}
+          {parsedResult?.lines && <Text dim> / 共 {parsedResult.lines} 行</Text>}
+        </Box>
+      )}
+      
+      {toolName === 'readFileTail' && (
+        <Box>
+          <Text dim>📍 最后 {parsedInput.lines} 行</Text>
+        </Box>
+      )}
+      
+      {/* 分隔线 */}
+      <Text dim>{'─'.repeat(60)}</Text>
+      
+      {/* 执行中状态 */}
+      {isRunning && (
+        <Box flexDirection="column">
+          <Box>
+            <Spinner color="cyan" />
+            <Text color="cyan"> 读取中...</Text>
+            {startTime && (
+              <Text dim> ({((Date.now() - startTime) / 1000).toFixed(1)}s)</Text>
+            )}
+          </Box>
+          <Box marginTop={1}>
+            <ProgressBar width={40} color="cyan" label="读取中..." />
+          </Box>
+        </Box>
+      )}
+      
+      {/* 完成状态 - 显示内容预览 */}
+      {!isRunning && isSuccess && parsedResult && (
+        <Box flexDirection="column">
+          <Text bold color="cyan">📝 内容预览</Text>
+          <Box 
+            borderStyle="single" 
+            borderColor="gray" 
+            paddingX={1}
+          >
+            <ContentPreview 
+              content={parsedResult.content} 
+              maxLines={previewMaxLines}
+              startLine={parsedInput.startLine || 1}
+            />
+          </Box>
+        </Box>
+      )}
+      
+      {/* 错误状态 */}
+      {!isRunning && isError && (
+        <Box flexDirection="column">
+          <Text color="red">❌ 读取失败</Text>
+          {parsedResult?.error && (
+            <Text color="red" dim>{parsedResult.error}</Text>
+          )}
+        </Box>
+      )}
+      
+      {/* 底部状态栏 */}
+      {!isRunning && (
+        <Box marginTop={1}>
+          {isSuccess ? (
+            <Text color="green">✓ 读取完成</Text>
+          ) : (
+            <Text color="red">✗ 读取失败</Text>
+          )}
+          {duration && (
+            <Text dim> | {duration}ms</Text>
+          )}
+        </Box>
+      )}
+    </Box>
+  );
+}
+
+export default FileReadRenderer;

package/src/components/tool-renderers/file-write-renderer.jsx

@@ -0,0 +1,222 @@
+/**
+ * 文件写入渲染器
+ * 
+ * 支持工具：writeFile
+ * 
+ * 特点：
+ * - 显示文件路径
+ * - 写入大小
+ * - 新建/覆盖标识
+ */
+
+import React from 'react';
+import { Box, Text } from 'ink';
+import { ProgressBar, Spinner } from '../progress-bar.jsx';
+
+/**
+ * 解析文件写入工具的输入参数
+ */
+function parseInput(input) {
+  if (!input) return { path: '', content: '' };
+  
+  if (typeof input === 'string') {
+    return { path: input, content: '' };
+  }
+  
+  return {
+    path: input.path || input.filePath || input.file || '',
+    content: input.content || input.text || input.data || ''
+  };
+}
+
+/**
+ * 解析文件写入工具的输出结果
+ */
+function parseResult(result) {
+  if (!result) return null;
+  
+  if (typeof result === 'string') {
+    return { success: true, message: result };
+  }
+  
+  return {
+    success: result.success !== false,
+    created: result.created || result.isNew,
+    size: result.size || result.bytes,
+    error: result.error || result.message
+  };
+}
+
+/**
+ * 格式化文件大小
+ */
+function formatSize(bytes) {
+  if (!bytes && bytes !== 0) return '';
+  if (bytes < 1024) return `${bytes} B`;
+  if (bytes < 1024 * 1024) return `${(bytes / 1024).toFixed(1)} KB`;
+  return `${(bytes / (1024 * 1024)).toFixed(1)} MB`;
+}
+
+/**
+ * 从路径中提取文件名
+ */
+function getFileName(path) {
+  if (!path) return '';
+  const parts = path.replace(/\\/g, '/').split('/');
+  return parts[parts.length - 1] || path;
+}
+
+/**
+ * 从路径中提取目录
+ */
+function getDirectory(path) {
+  if (!path) return '';
+  const normalized = path.replace(/\\/g, '/');
+  const lastSlash = normalized.lastIndexOf('/');
+  return lastSlash > 0 ? normalized.substring(0, lastSlash + 1) : '';
+}
+
+/**
+ * 内容预览组件
+ */
+function ContentPreview({ content, maxLines = 4 }) {
+  if (!content) {
+    return <Text dim italic>（无内容）</Text>;
+  }
+  
+  const lines = String(content).split('\n');
+  const displayLines = lines.slice(0, maxLines);
+  const hasMore = lines.length > maxLines;
+  
+  return (
+    <Box flexDirection="column">
+      {displayLines.map((line, i) => {
+        const displayLine = line.length > 60 ? line.substring(0, 57) + '...' : line;
+        return (
+          <Text key={i} dim>{displayLine}</Text>
+        );
+      })}
+      {hasMore && (
+        <Text dim italic>... 还有 {lines.length - maxLines} 行</Text>
+      )}
+    </Box>
+  );
+}
+
+/**
+ * 文件写入渲染器组件
+ * 
+ * @param {Object} props
+ * @param {Object} props.tool - 工具执行数据
+ * @param {number} props.maxHeight - 最大高度
+ */
+export function FileWriteRenderer({ tool, maxHeight = 10 }) {
+  const { input, result, status, duration, startTime } = tool;
+  
+  const parsedInput = parseInput(input);
+  const parsedResult = parseResult(result);
+  
+  const isRunning = status === 'running';
+  const isSuccess = status === 'success' || parsedResult?.success;
+  const isError = status === 'error' || parsedResult?.success === false;
+  
+  const fileName = getFileName(parsedInput.path);
+  const directory = getDirectory(parsedInput.path);
+  
+  // 计算写入大小
+  const contentSize = parsedInput.content ? 
+    new TextEncoder().encode(parsedInput.content).length : 0;
+  const displaySize = parsedResult?.size || contentSize;
+  
+  return (
+    <Box flexDirection="column">
+      {/* 文件信息 */}
+      <Box>
+        <Text>✍️ </Text>
+        <Text bold color="magenta">{fileName}</Text>
+        {parsedResult?.created && (
+          <Text color="green"> ✨ 新建</Text>
+        )}
+        {!parsedResult?.created && isSuccess && (
+          <Text color="yellow"> 📝 覆盖</Text>
+        )}
+      </Box>
+      
+      {/* 目录路径 */}
+      {directory && (
+        <Box>
+          <Text dim>📂 {directory}</Text>
+        </Box>
+      )}
+      
+      {/* 写入大小 */}
+      {displaySize > 0 && (
+        <Box>
+          <Text dim>📏 写入 {formatSize(displaySize)}</Text>
+        </Box>
+      )}
+      
+      {/* 分隔线 */}
+      <Text dim>{'─'.repeat(60)}</Text>
+      
+      {/* 执行中状态 */}
+      {isRunning && (
+        <Box flexDirection="column">
+          <Box>
+            <Spinner color="magenta" />
+            <Text color="magenta"> 写入中...</Text>
+            {startTime && (
+              <Text dim> ({((Date.now() - startTime) / 1000).toFixed(1)}s)</Text>
+            )}
+          </Box>
+          <Box marginTop={1}>
+            <ProgressBar width={40} color="magenta" label="写入中..." />
+          </Box>
+        </Box>
+      )}
+      
+      {/* 完成状态 - 显示内容预览 */}
+      {!isRunning && isSuccess && (
+        <Box flexDirection="column">
+          <Text bold color="cyan">📝 写入内容预览</Text>
+          <Box 
+            borderStyle="single" 
+            borderColor="gray" 
+            paddingX={1}
+          >
+            <ContentPreview 
+              content={parsedInput.content} 
+              maxLines={Math.max(3, maxHeight - 7)}
+            />
+          </Box>
+        </Box>
+      )}
+      
+      {/* 错误状态 */}
+      {!isRunning && isError && (
+        <Box flexDirection="column">
+          <Text color="red">❌ 写入失败</Text>
+          {parsedResult?.error && (
+            <Text color="red" dim>{parsedResult.error}</Text>
+          )}
+        </Box>
+      )}
+      
+      {/* 底部状态栏 */}
+      {!isRunning && (
+        <Box marginTop={1}>
+          {isSuccess ? (
+            <Text color="green">✓ 写入完成</Text>
+          ) : (
+            <Text color="red">✗ 写入失败</Text>
+          )}
+          {duration && (
+            <Text dim> | {duration}ms</Text>
+          )}
+        </Box>
+      )}
+    </Box>
+  );
+}
+
+export default FileWriteRenderer;

package/src/components/tool-renderers/index.jsx

@@ -0,0 +1,178 @@
+/**
+ * 工具渲染器统一导出
+ * 
+ * 根据工具名称选择对应的渲染器
+ */
+
+import React from 'react';
+import { Box, Text } from 'ink';
+
+import { BashRenderer } from './bash-renderer.jsx';
+import { FileReadRenderer } from './file-read-renderer.jsx';
+import { FileWriteRenderer } from './file-write-renderer.jsx';
+import { FileEditRenderer } from './file-edit-renderer.jsx';
+import { SearchRenderer } from './search-renderer.jsx';
+import { ListRenderer } from './list-renderer.jsx';
+
+/**
+ * 工具名称到渲染器的映射
+ */
+const TOOL_RENDERER_MAP = {
+  // Bash 命令
+  bash: BashRenderer,
+  
+  // 文件读取
+  readFile: FileReadRenderer,
+  readFileLines: FileReadRenderer,
+  readFileTail: FileReadRenderer,
+  
+  // 文件写入
+  writeFile: FileWriteRenderer,
+  
+  // 文件编辑
+  editFile: FileEditRenderer,
+  regionConstrainedEdit: FileEditRenderer,
+  
+  // 搜索
+  searchFiles: SearchRenderer,
+  searchCode: SearchRenderer,
+  
+  // 目录列表
+  listFiles: ListRenderer
+};
+
+/**
+ * 默认渲染器（用于未知工具）
+ */
+function DefaultRenderer({ tool, maxHeight = 10, renderMode = 'split' }) {
+  if ( tool === 'executed' ) { // fix by joyer handle coded
+    return (
+      <Box>
+      </Box>
+    );
+  }
+
+  const { input, result, status, duration } = tool;
+
+  // 全屏模式：简化显示，不显示详细UI
+  if (renderMode === 'fullscreen') {
+    return (
+      <Box>
+        <Text dim>[{tool.tool}]</Text>
+      </Box>
+    );
+  }
+
+
+  // 分屏模式：完整显示
+  const statusConfig = {
+    pending: { icon: '⏳', color: 'gray', label: 'x等待x' },
+    running: { icon: '⚡', color: 'yellow', label: '执行中' },
+    success: { icon: '✓', color: 'green', label: '成功' },
+    error: { icon: '✗', color: 'red', label: '失败' }
+  };
+
+  const { icon, color, label } = statusConfig[status] || statusConfig.pending;
+
+  return (
+    <Box flexDirection="column">
+      {/* 工具信息 */}
+      <Box>
+        <Text color={color}>{icon} </Text>
+          <Text bold>tool name:{tool.tool}</Text>
+        <Text dim> | </Text>
+        <Text color={color}>{label}</Text>
+        {duration && <Text dim> | {duration}ms</Text>}
+      </Box>
+      
+      {/* 分隔线 */}
+      <Text dim>{'─'.repeat(60)}</Text>
+      
+      {/* 输入参数 */}
+      <Box flexDirection="column" marginTop={1}>
+        <Text bold color="cyan">📥 输入</Text>
+        <Box borderStyle="single" borderColor="gray" paddingX={1}>
+          <Text>{formatJson(input, maxHeight - 6)}</Text>
+        </Box>
+      </Box>
+      
+      {/* 输出结果 */}
+      {result && (
+        <Box flexDirection="column" marginTop={1}>
+          <Text bold color={result?.success !== false ? 'green' : 'red'}>
+            📤 输出 {result?.success !== false ? '✓' : '✗'}
+          </Text>
+          <Box borderStyle="single" borderColor="gray" paddingX={1}>
+            <Text>{formatJson(result, maxHeight - 6)}</Text>
+          </Box>
+        </Box>
+      )}
+    </Box>
+  );
+}
+
+/**
+ * 格式化 JSON 为字符串
+ */
+function formatJson(data, maxLines = 5) {
+  if (data === null || data === undefined) {
+    return 'null';
+  }
+  
+  try {
+    const str = typeof data === 'string' ? data : JSON.stringify(data, null, 2);
+    const lines = str.split('\n');
+    
+    if (lines.length <= maxLines) {
+      return str;
+    }
+    
+    return lines.slice(0, maxLines).join('\n') + `\n... 还有 ${lines.length - maxLines} 行`;
+  } catch {
+    return String(data);
+  }
+}
+
+/**
+ * 获取工具对应的渲染器
+ * 
+ * @param {string} toolName - 工具名称
+ * @returns {React.Component} 渲染器组件
+ */
+export function getToolRenderer(toolName) {
+  return TOOL_RENDERER_MAP[toolName] || DefaultRenderer;
+}
+
+/**
+ * 工具渲染器包装组件
+ *
+ * 自动根据工具名称选择对应的渲染器
+ *
+ * @param {Object} props
+ * @param {Object} props.tool - 工具执行数据
+ * @param {number} props.maxHeight - 最大高度
+ * @param {string} props.renderMode - 渲染模式 ('split' | 'fullscreen')
+ */
+export function ToolRenderer({ tool, maxHeight = 10, renderMode = 'split' }) {
+  if (!tool) {
+    return (
+      <Box justifyContent="center" alignItems="center">
+        <Text dim>暂无工具数据</Text>
+      </Box>
+    );
+  }
+
+  const Renderer = getToolRenderer(tool.tool);
+
+  return <Renderer tool={tool} maxHeight={maxHeight} renderMode={renderMode} />;
+}
+
+// 导出所有渲染器
+export { BashRenderer } from './bash-renderer.jsx';
+export { FileReadRenderer } from './file-read-renderer.jsx';
+export { FileWriteRenderer } from './file-write-renderer.jsx';
+export { FileEditRenderer } from './file-edit-renderer.jsx';
+export { SearchRenderer } from './search-renderer.jsx';
+export { ListRenderer } from './list-renderer.jsx';
+
+export default ToolRenderer;