Lifecycle Viewer

生命周期查看器

一个现代的Svelte/TypeScript web应用程序，用于与 生命周期MCP服务器此UI通过直观的web界面提供对软件需求、任务和架构决策的全面管理。

🚀 特性

• 仪表板概述：实时项目指标和健康指标
• 需求管理：从草稿到验证的全生命周期跟踪
• 任务管理：使用GitHub集成进行实施跟踪
• 体系结构决策：ADR管理和审查工作流程
• 实时更新：与MCP服务器的WebSocket连接
• 响应式设计：适用于台式机、平板电脑和移动设备

📋 先决条件

必需

• Node.js （v18+推荐）
• 生命周期MCP服务器 - 安装指南

MCP服务器设置

在运行Lifecycle Viewer之前，您需要让Lifecycle MCP服务器运行：

# Clone and set up the MCP server
git clone https://github.com/heffrey78/lifecycle-mcp.git
cd lifecycle-mcp

# Install with uv (recommended)
uv sync
uv run server.py

# OR install with pip
pip install -e .
lifecycle-mcp

MCP服务器应在上运行 ws://localhost:3000/mcp （或在客户端配置URL）。

🛠️ 安装和设置

1. 克隆此存储库

   git clone https://github.com/heffrey78/lifecycle-viewer.git
   cd lifecycle-viewer

1. 安装依赖项

   npm install

1. 配置MCP连接 （可选）

编辑 src/lib/services/mcp-client.ts 要修改服务器URL，请执行以下操作：

   constructor(private serverUrl: string = 'ws://localhost:3000/mcp')

1. 启动MCP网桥服务器 （在单独的终端中）

   npm run mcp-bridge

这将启动将web UI连接到MCP服务器的WebSocket网桥。

1. 启动开发服务器 （在另一个终端中）

   npm run dev

1. 打开应用程序

引导到http://localhost:5173/

🔌 连接到真实数据

当前状态

应用程序当前显示 模拟/虚拟数据 当MCP服务器未连接时。这是为了允许在不需要运行MCP服务器的情况下进行开发和演示。

获取真实数据

要查看实际项目数据，请执行以下操作：

1. 确保MCP服务器正在运行

   cd /path/to/lifecycle-mcp
   uv run server.py  # or lifecycle-mcp

1. 启动MCP网桥 （在生命周期查看器目录中）

   npm run mcp-bridge

这座桥是 必需的 -它将来自浏览器的WebSocket连接转换为与MCP服务器的stdio通信。

1. 验证连接

- 在以下位置打开生命周期查看器http://localhost:5173/ - 项目名称应在标题中显示您的实际数据库名称 - 如果显示“无项目”或“数据库错误”，UI将回退到模拟数据

1. 创建真实数据

通过Claude Code或直接通过MCP协议使用MCP服务器工具：

   # Add the server to Claude Code
   claude mcp add lifecycle lifecycle-mcp -e LIFECYCLE_DB=./lifecycle.db

1. 通过克劳德互动

连接到Claude后，您可以使用MCP工具创建真实数据：

- create_requirement -添加项目要求 - create_task -添加实施任务 - create_architecture_decision -文档架构选择

模拟数据与真实数据

• 模拟数据：当MCP服务器不可用时使用（开发/演示）
• 真实数据：当MCP服务器连接时，从您的实际生命周期数据库加载
• 无缝回退：应用程序自动检测连接状态

🏗️ 建筑

项目结构

lifecycle-viewer/
├── src/
│   ├── lib/
│   │   ├── types/lifecycle.ts          # TypeScript definitions
│   │   └── services/mcp-client.ts      # MCP communication
│   ├── routes/
│   │   ├── +layout.svelte              # Main layout with navigation
│   │   ├── +page.svelte                # Dashboard
│   │   ├── requirements/+page.svelte    # Requirements management
│   │   └── tasks/+page.svelte          # Task management
│   └── app.html                        # Base HTML template
├── static/                             # Static assets
└── tailwind.config.js                  # Styling configuration

关键组件

MCP客户端(src/lib/services/mcp-client.ts)

• 基于WebSocket与Lifecycle MCP服务器的通信
• 异步/等待API匹配MCP工具签名
• 服务器不可用时自动回退到模拟数据
• 错误处理和连接管理

类型定义(src/lib/types/lifecycle.ts)

• 与数据库模式匹配的完整TypeScript接口
• 类型安全API响应和数据结构
• 状态、优先级和类型值的枚举

UI组件

• 仪表盘：项目概述，包括指标和快速行动
• 需求：带状态跟踪的可筛选表
• 任务：使用GitHub集成进行实施跟踪
• 布局：带有连接状态的导航侧边栏

🎨 定制

样式

该应用程序使用Tailwind CSS，为生命周期状态提供自定义颜色定义：

• 需求：草稿（红色）→ 正在审查（橙色）→ 已批准（蓝色）→ 准备就绪（绿色）→ 已实施（深绿色）
• 任务：未开始（红色）→ 进行中（橙色）→ 完成（绿色）
• 优先事项：P0（红色）→ P1（橙色）→ P2（蓝色）→ P3（灰色）

配置

在以下位置编辑配置：

• tailwind.config.js -造型和颜色
• src/lib/services/mcp-client.ts -服务器连接设置
• UI行为的单个页面组件

🔧 发展

可用脚本

npm run dev          # Start development server
npm run build        # Build for production
npm run preview      # Preview production build
npm run test:unit    # Run unit tests
npm run lint         # Run ESLint
npm run format       # Format code with Prettier

开发工作流程

1. 启动MCP服务器 （真实数据）： uv run server.py
2. 启动MCP网桥: npm run mcp-bridge
3. 启动开发服务器: npm run dev
4. 进行更改：热重新加载已启用
5. 测试：应用程序可以处理真实数据和模拟数据
6. 构建: npm run build 用于生产

添加新功能

1. 定义类型：向添加接口 src/lib/types/lifecycle.ts
2. 扩展MCP客户端：添加方法 src/lib/services/mcp-client.ts
3. 创建用户界面：使用TypeScript构建Svelte组件
4. 添加路线：在中创建新页面 src/routes/

📡 MCP集成

实时连接

• 网络套接字：与MCP服务器的持续连接
• 连接状态：侧边栏中的视觉指示器
• 自动重新连接：处理临时断开连接
• 回退模式：无缝过渡到模拟数据

使用的MCP工具

• query_requirements -获取需求列表
• get_requirement_details -获取单一需求
• query_tasks -获取任务列表
• get_task_details -获取单个任务
• get_project_status -获取仪表板指标
• create_requirement -添加新要求
• create_task -添加新任务
• update_requirement_status -更新生命周期状态

🚀 生产部署

为生产而建

npm run build

部署选项

• 静态主机：Vercel、Netlify、GitHub Pages
• Node.js主机：任何Node.js托管提供商
• 码头工人：使用包含的Dockerfile进行容器化（如果添加）

环境配置

设置生产环境变量：

• MCP_SERVER_URL -MCP服务器的URL
• PUBLIC_APP_NAME -应用程序名称/标题

🤝 贡献

1. 分叉存储库
2. 创建要素分支： git checkout -b feature/new-feature
3. 使用正确的TypeScript类型进行更改
4. 使用模拟和真实MCP数据进行测试
5. 提交拉取请求

📄 许可证

\[在此处添加您的许可证信息\]

🔗 相关项目

• 生命周期MCP服务器 -后端MCP服务器
• 模型上下文协议 -MCP规范

💡 后续步骤

要充分利用Lifecycle Viewer，请执行以下操作：

1. 设置MCP服务器 跟随 安装指南
2. 连接到克劳德代码 填充真实的项目数据
3. 创建您的第一个需求 使用MCP工具
4. 观看UI更新 具有真实的项目信息
5. 探索高级功能 比如GitHub集成和架构跟踪

当前的模拟数据只是一个预览——真正的力量来自于连接到实际的项目生命周期数据！