iflow-run 1.0.0 → 1.0.2

package/README.md

@@ -2,12 +2,21 @@
 
 一个用于查看 iFlow CLI 会话轨迹和历史会话的 Web 应用程序。
 
+[![npm version](https://badge.fury.io/js/iflow-run.svg)](https://www.npmjs.com/package/iflow-run)
+[![GitHub stars](https://img.shields.io/github/stars/KeWen-Du/iflow-run?style=social)](https://github.com/KeWen-Du/iflow-run)
+
 ## 功能特性
 
 - 📁 **项目管理** - 浏览和查看 iFlow CLI 创建的所有项目
 - 💬 **会话浏览** - 查看每个项目下的所有会话历史
 - 🔍 **消息详情** - 查看完整的对话消息，包括用户消息、助手响应、工具调用和工具结果
 - 👁️ **预览功能** - 快速预览会话的第一条消息内容
+- 📊 **会话上下文** - 显示工作目录、Git 分支、版本信息等环境上下文
+- 🔎 **消息筛选** - 支持按类型筛选消息（用户/助手/工具调用）和内容搜索
+- 💰 **Token 统计** - 显示模型名称、Token 消耗、执行时间和预估成本
+- 🔄 **环境追踪** - 检测并显示工作目录和 Git 分支的变更
+- 📥 **导出功能** - 支持导出会话为 Markdown 或 JSON 格式
+- 📋 **消息目录** - 快速导航到用户消息
 - 🎨 **现代 UI** - 采用暗色主题和玻璃拟态设计，提供优雅的用户体验
 - 📱 **响应式设计** - 支持桌面端和移动端访问
 
@@ -85,14 +94,16 @@ npx iflow-run
 
 ```
 iflow-run/
-├── server.js           # Express 服务器
-├── package.json        # 项目配置
-├── public/             # 前端静态文件
-│   ├── index.html      # 主页面
-│   ├── app.js          # 前端逻辑
-│   ├── styles.css      # 样式文件
-│   └── test.html       # 测试页面
-└── test_screenshot.py  # 自动化测试脚本
+├── server.js              # Express 服务器
+├── package.json           # 项目配置
+├── bin/                   # 全局可执行文件
+│   └── iflow-run.js      # CLI 入口文件
+├── public/                # 前端静态文件
+│   ├── index.html         # 主页面
+│   ├── app.js             # 前端逻辑
+│   ├── styles.css         # 样式文件
+│   └── test.html          # 测试页面
+└── test_screenshot.py     # 自动化测试脚本
 ```
 
 ## API 接口
@@ -113,6 +124,41 @@ GET /api/sessions/:projectId/:sessionId
 
 返回指定会话的完整消息记录。
 
+### 搜索会话
+
+```http
+GET /api/search?q=关键词&page=1&limit=20&type=all
+```
+
+查询参数：
+- `q` (string): 搜索关键词
+- `page` (number): 页码，默认 1
+- `limit` (number): 每页结果数，默认 20
+- `type` (string): 消息类型筛选，可选值：`all`、`user`、`assistant`，默认 `all`
+- `startDate` (number): 开始时间戳（可选）
+- `endDate` (number): 结束时间戳（可选）
+
+响应示例：
+```json
+{
+  "results": [
+    {
+      "projectId": "project-id",
+      "projectName": "项目名称",
+      "sessionId": "session-1234567890",
+      "content": "消息内容预览...",
+      "type": "user",
+      "timestamp": 1704110400000,
+      "uuid": "message-uuid"
+    }
+  ],
+  "total": 100,
+  "page": 1,
+  "limit": 20,
+  "totalPages": 5
+}
+```
+
 ## 配置
 
 ### 通过命令行参数配置
@@ -164,11 +210,7 @@ python test_screenshot.py
 3. 点击第一个会话并截图会话详情
 4. 测试返回按钮功能
 
-## 截图
 
-![项目列表](https://via.placeholder.com/400x300/1a1a24/ffffff?text=Projects+List)
-![会话列表](https://via.placeholder.com/400x300/1a1a24/ffffff?text=Sessions+List)
-![会话详情](https://via.placeholder.com/400x300/1a1a24/ffffff?text=Session+Detail)
 
 ## 开发
 
@@ -198,6 +240,7 @@ python test_screenshot.py
 1. `.iflow` 目录路径是否正确
 2. 目录下是否有 `projects` 子目录
 3. 项目目录中是否有 `session-*.jsonl` 文件
+4. 尝试使用 `--dir` 参数指定正确的 iflow 目录
 
 ### 消息显示为空？
 
@@ -205,6 +248,19 @@ python test_screenshot.py
 - 会话文件格式不正确
 - 消息内容不包含可显示的文本
 - 消息格式不符合预期
+- 使用了消息筛选功能，当前筛选条件下没有匹配的消息
+
+### 工具结果显示不完整？
+
+工具结果默认折叠显示，点击工具结果的标题栏可以展开查看完整内容。长结果会自动截断，可以通过复制按钮获取完整内容。
+
+### Token 统计不准确？
+
+Token 统计依赖于会话消息中的 `usage` 字段。如果模型未返回该信息，则无法显示 Token 统计。
+
+### 环境变更提示没有显示？
+
+环境变更提示需要消息中包含 `cwd` 或 `gitBranch` 字段。只有当这些字段发生变化时才会显示提示。
 
 ## 贡献
 

package/bin/iflow-run.js

@@ -2,10 +2,22 @@
 
 const path = require('path');
 const os = require('os');
+const fs = require('fs');
+const { spawn, exec } = require('child_process');
 
 // 解析命令行参数
 const args = process.argv.slice(2);
 
+// PID 文件路径
+const homeDir = os.homedir();
+const iflowRunDir = path.join(homeDir, '.iflow-run');
+const pidFile = path.join(iflowRunDir, 'iflow-run.pid');
+
+// 确保 .iflow-run 目录存在
+if (!fs.existsSync(iflowRunDir)) {
+  fs.mkdirSync(iflowRunDir, { recursive: true });
+}
+
 // 显示帮助信息
 function showHelp() {
   console.log(`
@@ -17,6 +29,8 @@ iflow-run - iFlow CLI 会话轨迹查看器
 选项:
   --port=<端口>       指定服务器端口 (默认: 3000)
   --dir=<目录>        指定 iflow 数据目录 (默认: ~/.iflow)
+  -d, --daemon        后台运行
+  --stop              停止后台运行的服务
   -h, --help          显示帮助信息
   -v, --version       显示版本号
 
@@ -25,7 +39,9 @@ iflow-run - iFlow CLI 会话轨迹查看器
   IFLOW_RUN_DIR       指定 iflow 数据目录
 
 示例:
-  iflow-run                          # 使用默认配置启动
+  iflow-run                          # 使用默认配置启动（前台）
+  iflow-run --daemon                 # 后台运行
+  iflow-run --stop                   # 停止后台服务
   iflow-run --port=8080              # 指定端口 8080
   iflow-run --dir=/path/to/iflow     # 指定 iflow 目录
   IFLOW_RUN_PORT=8080 iflow-run      # 使用环境变量指定端口
@@ -42,7 +58,157 @@ function showVersion() {
   console.log(`iflow-run v${pkg.version}`);
 }
 
+// 获取后台进程 PID
+function getDaemonPid() {
+  try {
+    if (fs.existsSync(pidFile)) {
+      const pid = parseInt(fs.readFileSync(pidFile, 'utf8').trim());
+      return pid;
+    }
+  } catch (err) {
+    console.error('读取 PID 文件失败:', err.message);
+  }
+  return null;
+}
+
+// 检查进程是否运行
+function isProcessRunning(pid) {
+  try {
+    process.kill(pid, 0); // 发送信号 0 检查进程是否存在
+    return true;
+  } catch (err) {
+    return false;
+  }
+}
+
+// 停止后台服务
+function stopDaemon() {
+  const pid = getDaemonPid();
+  
+  if (!pid) {
+    console.log('没有找到后台运行的服务');
+    process.exit(0);
+  }
+
+  if (isProcessRunning(pid)) {
+    try {
+      if (process.platform === 'win32') {
+        exec(`taskkill /F /PID ${pid}`, (error) => {
+          if (error) {
+            console.error('停止服务失败:', error.message);
+            process.exit(1);
+          }
+          console.log('后台服务已停止');
+          fs.unlinkSync(pidFile);
+          process.exit(0);
+        });
+      } else {
+        process.kill(pid, 'SIGTERM');
+        console.log('后台服务已停止');
+        fs.unlinkSync(pidFile);
+        process.exit(0);
+      }
+    } catch (err) {
+      console.error('停止服务失败:', err.message);
+      process.exit(1);
+    }
+  } else {
+    console.log('后台服务未运行');
+    // 清理过期的 PID 文件
+    if (fs.existsSync(pidFile)) {
+      fs.unlinkSync(pidFile);
+    }
+    process.exit(0);
+  }
+}
+
+// 后台运行
+function startDaemon(port, dir) {
+  const pid = getDaemonPid();
+  
+  if (pid && isProcessRunning(pid)) {
+    console.log('服务已经在后台运行');
+    console.log('如需重启，请先使用: iflow-run --stop');
+    process.exit(1);
+  }
+
+  console.log('正在启动后台服务...');
+
+  if (process.platform === 'win32') {
+    // Windows 使用 start 命令启动新窗口
+    const nodePath = process.execPath;
+    const serverPath = path.join(__dirname, '..', 'server.js');
+    const portArg = port ? `IFLOW_RUN_PORT=${port} ` : '';
+    const dirArg = dir ? `IFLOW_RUN_DIR=${dir} ` : '';
+    
+    const command = `start /B cmd /C "${portArg}${dirArg}"${nodePath}" "${serverPath}"`;
+    
+    exec(command, (error) => {
+      if (error) {
+        console.error('启动失败:', error.message);
+        process.exit(1);
+      }
+      
+      // 等待一段时间，然后查找新启动的进程
+      setTimeout(() => {
+        // 使用 tasklist 查找 iflow-run 相关的 node 进程
+        exec('tasklist /FI "IMAGENAME eq node.exe" /FO CSV', (err, stdout) => {
+          if (err) {
+            console.error('无法获取进程信息');
+            process.exit(1);
+          }
+          
+          // 解析输出，找到最新的 node 进程
+          const lines = stdout.split('\n').slice(1);
+          const pids = lines
+            .filter(line => line.includes('node.exe'))
+            .map(line => {
+              const parts = line.split(',');
+              return parseInt(parts[1].replace(/"/g, '').trim());
+            });
+          
+          if (pids.length > 0) {
+            // 取最大的 PID（最新启动的）
+            const newPid = Math.max(...pids);
+            fs.writeFileSync(pidFile, newPid.toString());
+            console.log('后台服务启动成功');
+            console.log('使用 "iflow-run --stop" 停止服务');
+          } else {
+            console.error('无法获取进程 PID');
+            process.exit(1);
+          }
+        });
+      }, 1000);
+    });
+  } else {
+    // Linux/Mac 使用 detached 模式
+    const nodePath = process.execPath;
+    const serverPath = path.join(__dirname, '..', 'server.js');
+    
+    const env = { ...process.env };
+    if (port) env.IFLOW_RUN_PORT = port;
+    if (dir) env.IFLOW_RUN_DIR = dir;
+    
+    const child = spawn(nodePath, [serverPath], {
+      detached: true,
+      stdio: 'ignore',
+      env
+    });
+    
+    child.unref();
+    fs.writeFileSync(pidFile, child.pid.toString());
+    console.log('后台服务启动成功');
+    console.log('使用 "iflow-run --stop" 停止服务');
+    process.exit(0);
+  }
+}
+
 // 处理参数
+let port = null;
+let dir = null;
+let daemonMode = false;
+let stopCommand = false;
+
 for (const arg of args) {
   if (arg === '-h' || arg === '--help') {
     showHelp();
@@ -52,7 +218,28 @@ for (const arg of args) {
     showVersion();
     process.exit(0);
   }
+  if (arg === '-d' || arg === '--daemon') {
+    daemonMode = true;
+  }
+  if (arg === '--stop') {
+    stopCommand = true;
+  }
+  if (arg.startsWith('--port=')) {
+    port = arg.split('=')[1];
+  }
+  if (arg.startsWith('--dir=')) {
+    dir = arg.split('=')[1];
+  }
 }
 
-// 启动服务器
-require('../server.js');
+// 执行命令
+if (stopCommand) {
+  stopDaemon();
+} else if (daemonMode) {
+  startDaemon(port, dir);
+} else {
+  // 前台运行
+  if (port) process.env.IFLOW_RUN_PORT = port;
+  if (dir) process.env.IFLOW_RUN_DIR = dir;
+  require('../server.js');
+}

package/package.json

@@ -1 +1 @@
-{"name": "iflow-run", "version": "1.0.0", "description": "查看 iflow-cli 会话轨迹和历史会话的 Web 应用", "main": "server.js", "bin": {"iflow-run": "./bin/iflow-run.js"}, "scripts": {"start": "node server.js", "dev": "node server.js"}, "keywords": ["iflow", "session", "history", "cli", "viewer", "dashboard"], "author": "dukewen <dukewen666@gmail.com>", "license": "MIT", "files": ["bin/", "public/", "server.js", "package.json", "README.md"], "dependencies": {"express": "^4.18.2", "cors": "^2.8.5"}, "engines": {"node": ">=14.0.0"}}
+{"name": "iflow-run", "version": "1.0.2", "description": "查看 iflow-cli 会话轨迹和历史会话的 Web 应用", "main": "server.js", "bin": {"iflow-run": "./bin/iflow-run.js"}, "scripts": {"start": "node server.js", "dev": "node server.js"}, "keywords": ["iflow", "session", "history", "cli", "viewer", "dashboard"], "author": "dukewen <dukewen666@gmail.com>", "license": "MIT", "files": ["bin/", "public/", "server.js", "package.json", "README.md"], "dependencies": {"express": "^4.18.2", "cors": "^2.8.5"}, "engines": {"node": ">=14.0.0"}}

package/server.js

@@ -247,6 +247,61 @@ function extractContent(msg) {
   return JSON.stringify(content);
 }
 
-app.listen(PORT, () => {
-  console.log(`iflow-run server running at http://localhost:${PORT}`);
-});
+// 检测端口是否可用
+function isPortAvailable(port) {
+  return new Promise((resolve) => {
+    const net = require('net');
+    const server = net.createServer();
+
+    server.once('error', (err) => {
+      if (err.code === 'EADDRINUSE') {
+        resolve(false);
+      } else {
+        resolve(true);
+      }
+    });
+
+    server.once('listening', () => {
+      server.close();
+      resolve(true);
+    });
+
+    server.listen(port);
+  });
+}
+
+// 自动查找可用端口
+async function findAvailablePort(startPort) {
+  let port = startPort;
+  let attempts = 0;
+  const maxAttempts = 100;
+
+  while (attempts < maxAttempts) {
+    const available = await isPortAvailable(port);
+    if (available) {
+      return port;
+    }
+    port++;
+    attempts++;
+  }
+
+  throw new Error(`Unable to find available port after ${maxAttempts} attempts`);
+}
+
+// 启动服务器
+(async () => {
+  try {
+    const availablePort = await findAvailablePort(PORT);
+    
+    if (availablePort !== PORT) {
+      console.log(`Port ${PORT} is occupied, using port ${availablePort} instead`);
+    }
+    
+    app.listen(availablePort, () => {
+      console.log(`iflow-run server running at http://localhost:${availablePort}`);
+    });
+  } catch (error) {
+    console.error('Failed to start server:', error.message);
+    process.exit(1);
+  }
+})();