AI导哈

生命周期管理工具

一个基于Svelte/TypeScript的现代Web应用程序，用于全面管理软件需求、任务和架构决策，提供实时项目指标和健康状态监控。

  • by heffrey78
  • TypeScript
  • 本地部署
  • 2 星标
  • 更新于
在 GitHub 查看 heffrey78/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

  2. 安装依赖项

    npm install

  3. 配置MCP连接 （可选） 编辑 src/lib/services/mcp-client.ts 要修改服务器URL，请执行以下操作：

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

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

    npm run mcp-bridge

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

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

    npm run dev

  6. 打开应用程序 引导到http://localhost:5173/

🔌 连接到真实数据

当前状态

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

获取真实数据

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

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

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

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

    npm run mcp-bridge

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

  3. 验证连接

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

  4. 创建真实数据 通过Claude Code或直接通过MCP协议使用MCP服务器工具：

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

  5. 通过克劳德互动 连接到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. 提交拉取请求

📄 许可证

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

🔗 相关项目

💡 后续步骤

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

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

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

相关 MCP