agegr/pi-web

# pi-web [中文文档](./README.zh-CN.md) [pi 编程智能体](https://github.com/badlogic/pi-mono)的本地 Web UI。pi-web 会读取你的本地 pi 会话文件，并为你提供一个浏览器工作区，用于会话浏览、实时聊天、模型配置、技能管理以及项目文件预览。  在 CLI 和 pi-web 中的同一个 pi 会话：结构化的工具调用、易读的 Markdown、会话浏览以及更清晰的结果。 ## 快速开始 **无需安装直接运行：** ``` npx @agegr/pi-web@latest ``` **或者全局安装：** ``` npm install -g @agegr/pi-web pi-web ``` 然后打开 [http://localhost:30141](http://localhost:30141)。CLI 会在服务器就绪后尝试自动打开浏览器。 **选项：** ``` pi-web --port 8080 # custom port pi-web --hostname 127.0.0.1 # local access only pi-web -p 8080 -H 127.0.0.1 # combine options pi-web --no-open # do not open the browser automatically PORT=8080 pi-web # environment variable is also supported PI_WEB_NO_OPEN=1 pi-web # useful when running as a background service ``` ## 功能 - **轻松恢复工作**：按项目浏览之前的 pi 对话，无需在终端历史记录或会话路径中费力翻找。 - **安全地尝试不同方向**：从较早的消息继续，或者将一个会话分叉到单独的路线。 - **跨分支工作**：从侧边栏切换 Git worktree，以便新会话和资源管理器跟随你选择的检出（checkout）。 - **在项目旁聊天**：在智能体工作时，在左侧浏览文件，并在右侧预览源代码、文档、图片、音频和 PDF。 - **清晰查看会话状态**：可从顶部栏查看上下文使用情况、成本、压缩状态和系统提示词详细信息。 - **减少终端配置**：通过 Web UI 管理模型、登录/API 密钥、模型测试和技能开关。 ## 注意事项 - **数据目录**：pi-web 默认读取 `~/.pi/agent/sessions`。设置 `PI_CODING_AGENT_DIR` 以指向另一个 pi 智能体目录。 - **会话文件**：文件存储为 `~/.pi/agent/sessions//_.jsonl`。 - **模型配置**：模型面板会读取和写入 pi 智能体目录中的 `models.json`。模型列表和默认值来自 pi 的配置。 - **文件访问**：文件浏览和预览的范围仅限于选定的项目目录以及会话中出现的工作目录。 - **Git worktree**：请参阅 [pi-web 中的 Worktree](./docs/worktrees.md)，了解切换器何时出现、如何创建新 worktree 以及删除操作的作用。 - **分叉与会话内分支**：分叉会创建一个新的 `.jsonl` 文件。“从此处编辑”会在同一个会话文件内创建另一个分支。 ## 开发 ``` npm install npm run dev ``` 本地开发服务器运行在 [http://localhost:30141](http://localhost:30141)。 常用检查： ``` node_modules/.bin/tsc --noEmit npm run lint ``` 在本地开发期间避免运行 `next build` / `npm run build`。它会写入 `.next/` 目录，并可能干扰开发服务器；将构建留给发布工作。 ## 项目结构 ``` app/ api/ agent/ # creates/drives AgentSession and exposes SSE events auth/ # OAuth and API key management cwd/validate/ # custom working directory validation default-cwd/ # pi default working directory lookup files/ # file listing, reading, preview, and watching home/ # current user home directory models/ # available models, default model, thinking levels models-config/ # read/write models.json and test models sessions/ # session reads, rename, delete, context, HTML export skills/ # skill listing, search, install, enable/disable components/ AppShell.tsx # main layout, URL state, top panels, file tabs SessionSidebar.tsx # project selector, session tree, Explorer ChatWindow.tsx # messages, SSE, image drag/drop, minimap ChatInput.tsx # input bar, model/tools/thinking/compact/slash controls MessageView.tsx # message, thinking, tool call/result rendering ModelsConfig.tsx # model and auth configuration panel SkillsConfig.tsx # skill management panel FileExplorer.tsx # file tree FileViewer.tsx # source, diff, image, audio, PDF, DOCX preview lib/ rpc-manager.ts # AgentSessionWrapper lifecycle and global registry session-reader.ts # parses .jsonl session files and branch contexts normalize.ts # normalizes toolCall field names file-access.ts # file read safety boundary file-paths.ts # path encoding and relative path helpers markdown.ts # Markdown/Mermaid/KaTeX plugin configuration pi-types.ts # pi-related types hooks/ useAgentSession.ts # session loading, command sending, SSE state machine useAudio.ts # completion sound useDragDrop.ts # image drag/drop useTheme.ts # theme switching bin/ pi-web.js # npm CLI entrypoint ```

标签：AI编程助手, MITM代理, SOC Prime, TCP SYN 扫描, Web UI, 代码预览, 会话管理, 开发工具, 暗色界面, 本地工具, 自动化攻击