将强大的 AI 编程助手如 Claude Code 和 Codex 集成到浏览器中，使其摆脱命令行限制，实现在手机、平板等移动设备上随时随地写代码。该项目解决了流式输出、会话管理、移动端适配等核心难题，为移动编程提供了全新可能。
智能速览
通过Web界面驱动后端AI编程助手，实现移动端编码。
选用Blazor Server，利用SignalR长连接完美支持流式输出。
采用适配器模式，统一处理Claude Code与Codex的输出差异。
利用IndexedDB结合防抖技术，高效管理本地会话历史。
通过持久化进程模式，显著降低交互延迟提升体验。
针对移动端进行优化，解决触摸区域和虚拟键盘布局问题。
精华内容
将强大的 AI 编程助手塞进浏览器，让移动端也能写代码，这背后涉及了复杂的技术选型与架构设计，每一步都是为了解决一个具体的痛点。
技术选型
项目的核心难点在于如何实时呈现 AI 工具的流式输出。传统的 REST API 轮询或 WebSocket 方案要么体验不佳，要么状态管理复杂。最终选择了 Blazor Server，其内置的 SignalR 长连接可以即时将服务端数据推送到浏览器，实现了几乎无延迟的流式渲染。
Blazor Server 模式下，UI 渲染在客户端，核心逻辑在服务端执行，完美契合了本项目需求。因为 Claude Code 和 Codex CLI 需要访问文件系统和执行命令，这些操作在浏览器沙箱中无法完成，而 Blazor Server 恰好能让服务器充当“大脑”，浏览器仅作为显示界面。
统一差异
Claude Code 和 Codex 的输出格式截然不同，前者是 stream-json，后者是 JSONL。为了统一处理，项目引入了适配器模式，定义了 `ICliToolAdapter` 接口，将不同工具的输出解析、参数构建、会话ID提取等操作封装在各自的适配器中。
这种设计使得扩展新工具变得简单，只需新增一个适配器类即可。例如，针对 Claude Code 特有的 `TodoWrite` 工具，专门做了 UI 优化，将 JSON 格式的待办列表转换为可视化的勾选状态，极大地提升了信息的可读性。
会话管理
为了保证会话的连续性和用户隐私，项目选择了浏览器端的 IndexedDB 来存储会话历史，而非服务端数据库。这既减少了服务器压力，也避免了用户对话被留存的风险。
在 Blazor Server 中，通过 IJSRuntime 调用预先封装好的 JavaScript 函数来操作 IndexedDB。针对流式输出会触发频繁写入的问题，引入了防抖技术：设置 500ms 的延迟，只有当输出停止后才会执行保存操作，从而将写入频率从每秒数十次降低到一两次，显著提升了浏览器性能。
进程管理
调用 CLI 工具存在两种进程管理模式：一次性进程和持久化进程。一次性进程模式每次交互都需重新启动，加载耗时可达数秒，体验很差。因此项目采用了持久化进程模式，进程在后台保持运行，后续交互通过标准输入传递指令，实现了毫秒级的响应速度。
持久化进程的挑战在于如何判断一轮输出是否结束。方案是采用“超时检测”，如果连续 2 秒没有新的输出，就认为本次回答结束。这个 2 秒的阈值是经过多次调优得出的平衡点，既能避免 AI 思考过程中的误判，又不会让用户等待过久。
移动适配
移动端适配是项目的关键目标之一。布局上，将桌面端的左右分栏改为小屏幕的上下堆叠，并增加了折叠预览区的按钮。交互上，严格遵循 Apple 人机界面指南，确保所有触摸目标的最小尺寸为 44x44 像素，并添加了按下缩放和背景色变化的反馈效果。
针对 iOS Safari 虚拟键盘弹出导致 100vh 计算错误的问题，通过 JavaScript 动态获取视口高度并设置为 CSS 自定义属性，再用 `calc(var(–vh, 1vh) * 100)` 代替 `100vh`，完美解决了页面布局错乱的问题。
工作区隔离
为确保不同会话间的文件系统隔离，项目为每个会话创建了独立的工作目录。在启动 CLI 进程时，将其工作目录设置为该隔离目录，这样 AI 生成的所有文件和执行的操作都被限制在各自的沙盒中。
此外，还实现了后台清理服务，自动删除超过 24 小时未访问的工作区，防止磁盘空间被无限占用。所有文件操作都进行了路径校验，通过对比文件绝对路径与工作区路径，有效防范了路径穿越攻击，确保了系统的安全性。
这个项目成功地将复杂的命令行工具转化为易用的Web应用，打破了编程场景的物理限制。它不仅是一个技术实践的缩影，更预示着未来开发工具向云端化、移动化演进的趋势，下一个突破点会在哪里？
