A React + TypeScript web application that provides a visual interface for Claude Code sessions, enabling real-time interaction with AI coding assistants.

• 查看和管理多个 Claude Code 会话
• 创建、删除会话
• 会话状态跟踪（进行中、已完成、待处理）
• 会话列表侧边栏导航

• 通过 Server-Sent Events (SSE) 实时流式传输执行结果
• 支持与 Claude Code 后端 API 的双向通信
• 消息内容实时更新和显示

• 展示 AI 助手的工具调用过程
• 可折叠的工具参数和结果显示
• 支持多种工具类型（文件操作、命令执行等）
• 工具调用与响应的关联映射

• 支持文本和结构化内容格式
• Markdown 渲染支持
• 代码语法高亮显示
• 消息过滤和导航功能

• Mock 数据支持，可离线开发
• 开发和生产构建模式
• 热重载开发服务器
• TypeScript 类型安全

• 前端框架: React 18 + TypeScript
• 构建工具: Vite
• UI 组件: shadcn/ui + Radix UI
• 样式: Tailwind CSS
• 状态管理: TanStack Query
• 路由: React Router
• 主题: 支持暗色模式

npm install

npm run dev

开发服务器将在 http://localhost:8080 启动

npm run build        # 生产构建
npm run build:dev    # 开发构建
npm run preview      # 预览生产构建

npm run lint

应用需要 Claude Code 后端 API 服务运行在 http://localhost:8521，提供以下端点：

• GET /claude/sessions - 获取会话列表
• GET /claude/sessions/{id} - 获取会话详情
• DELETE /claude/sessions/{id} - 删除会话
• POST /sessions - 创建执行会话（SSE 流）

src/
├── components/        # React 组件
│   ├── ui/           # shadcn/ui 组件库
│   ├── Sidebar.tsx   # 会话列表侧边栏
│   └── ChatPanel.tsx # 消息显示面板
├── services/         # API 和流式服务
├── hooks/            # 自定义 React Hooks
├── types/            # TypeScript 类型定义
├── utils/            # 工具函数
└── pages/            # 页面组件

详细的开发指南和架构说明请参考 CLAUDE.md

MIT