roadmap-kit 1.0.0

package/dashboard/tailwind.config.js

@@ -0,0 +1,142 @@
+/** @type {import('tailwindcss').Config} */
+export default {
+  content: [
+    "./index.html",
+    "./src/**/*.{js,ts,jsx,tsx}",
+  ],
+  darkMode: 'class',
+  theme: {
+    extend: {
+      fontFamily: {
+        display: ['Orbitron', 'system-ui', 'sans-serif'],
+        sans: ['Space Grotesk', 'system-ui', 'sans-serif'],
+        mono: ['IBM Plex Mono', 'monospace'],
+      },
+      colors: {
+        // Pure black base
+        void: {
+          DEFAULT: '#000000',
+          50: '#0a0a0a',
+          100: '#0d0d0d',
+          200: '#121212',
+          300: '#1a1a1a',
+          400: '#222222',
+        },
+        // Electric terminal green
+        matrix: {
+          DEFAULT: '#00ff88',
+          dim: '#00cc6a',
+          bright: '#33ffaa',
+          glow: 'rgba(0, 255, 136, 0.5)',
+        },
+        // Amber warning/active
+        signal: {
+          DEFAULT: '#ff9500',
+          dim: '#cc7700',
+          bright: '#ffaa33',
+          glow: 'rgba(255, 149, 0, 0.5)',
+        },
+        // Cyan interactive
+        cyber: {
+          DEFAULT: '#00d4ff',
+          dim: '#00a8cc',
+          bright: '#33ddff',
+          glow: 'rgba(0, 212, 255, 0.5)',
+        },
+        // Rose danger
+        alert: {
+          DEFAULT: '#ff3366',
+          dim: '#cc2952',
+          bright: '#ff5580',
+          glow: 'rgba(255, 51, 102, 0.5)',
+        },
+        // Status semantic colors
+        status: {
+          completed: '#00ff88',
+          progress: '#ff9500',
+          pending: '#555555'
+        },
+        severity: {
+          high: '#ff3366',
+          medium: '#ff9500',
+          low: '#00d4ff'
+        }
+      },
+      boxShadow: {
+        'matrix': '0 0 20px rgba(0, 255, 136, 0.3), 0 0 40px rgba(0, 255, 136, 0.1)',
+        'signal': '0 0 20px rgba(255, 149, 0, 0.3), 0 0 40px rgba(255, 149, 0, 0.1)',
+        'cyber': '0 0 20px rgba(0, 212, 255, 0.3), 0 0 40px rgba(0, 212, 255, 0.1)',
+        'alert': '0 0 20px rgba(255, 51, 102, 0.3), 0 0 40px rgba(255, 51, 102, 0.1)',
+        'inner-glow': 'inset 0 0 30px rgba(0, 255, 136, 0.05)',
+      },
+      keyframes: {
+        "scan": {
+          "0%": { transform: "translateY(-100%)" },
+          "100%": { transform: "translateY(100vh)" },
+        },
+        "pulse-glow": {
+          "0%, 100%": { opacity: "0.5" },
+          "50%": { opacity: "1" },
+        },
+        "flicker": {
+          "0%, 100%": { opacity: "1" },
+          "50%": { opacity: "0.95" },
+          "52%": { opacity: "1" },
+          "54%": { opacity: "0.9" },
+          "56%": { opacity: "1" },
+        },
+        "typing": {
+          "from": { width: "0" },
+          "to": { width: "100%" },
+        },
+        "blink": {
+          "0%, 100%": { opacity: "1" },
+          "50%": { opacity: "0" },
+        },
+        "slide-up": {
+          "from": { opacity: "0", transform: "translateY(20px)" },
+          "to": { opacity: "1", transform: "translateY(0)" },
+        },
+        "slide-in-left": {
+          "from": { opacity: "0", transform: "translateX(-20px)" },
+          "to": { opacity: "1", transform: "translateX(0)" },
+        },
+        "slide-left": {
+          "from": { opacity: "0", transform: "translateX(100%)" },
+          "to": { opacity: "1", transform: "translateX(0)" },
+        },
+        "fade-in": {
+          "from": { opacity: "0" },
+          "to": { opacity: "1" },
+        },
+        "progress-fill": {
+          "from": { width: "0" },
+          "to": { width: "var(--progress-width)" },
+        },
+      },
+      animation: {
+        "scan": "scan 8s linear infinite",
+        "pulse-glow": "pulse-glow 2s ease-in-out infinite",
+        "flicker": "flicker 0.15s ease-in-out",
+        "typing": "typing 2s steps(30) forwards",
+        "blink": "blink 1s step-end infinite",
+        "slide-up": "slide-up 0.4s ease-out forwards",
+        "slide-in-left": "slide-in-left 0.3s ease-out forwards",
+        "slide-left": "slide-left 0.3s ease-out forwards",
+        "fade-in": "fade-in 0.3s ease-out forwards",
+        "progress-fill": "progress-fill 1s ease-out forwards",
+      },
+      backgroundImage: {
+        'grid-pattern': `
+          linear-gradient(rgba(0, 255, 136, 0.03) 1px, transparent 1px),
+          linear-gradient(90deg, rgba(0, 255, 136, 0.03) 1px, transparent 1px)
+        `,
+        'scanline': 'repeating-linear-gradient(0deg, transparent, transparent 2px, rgba(0, 0, 0, 0.1) 2px, rgba(0, 0, 0, 0.1) 4px)',
+      },
+      backgroundSize: {
+        'grid': '40px 40px',
+      },
+    },
+  },
+  plugins: [],
+}

package/dashboard/vite.config.js

@@ -0,0 +1,18 @@
+import { defineConfig } from 'vite'
+import react from '@vitejs/plugin-react'
+
+// https://vitejs.dev/config/
+//
+// Environment variables:
+//   PORT         - Server port (default: 6969)
+//   BASE_PATH    - Base path for subpath deployment (default: '/')
+//                  Example: BASE_PATH=/roadmap npm run build
+//
+export default defineConfig({
+  plugins: [react()],
+  base: process.env.BASE_PATH || '/',
+  server: {
+    port: parseInt(process.env.PORT) || 6969,
+    open: true
+  }
+})

package/docker/Dockerfile

@@ -0,0 +1,35 @@
+# ROADMAP-KIT Dockerfile
+# Lightweight Node.js image for running the dashboard
+
+FROM node:20-alpine
+
+# Install git (required for scanner)
+RUN apk add --no-cache git
+
+# Set working directory
+WORKDIR /app
+
+# Copy roadmap-kit files
+COPY package.json ./
+COPY scanner.js ./
+COPY cli.js ./
+COPY dashboard ./dashboard
+
+# Install dependencies
+RUN npm install
+
+# Install dashboard dependencies
+WORKDIR /app/dashboard
+RUN npm install
+
+# Back to root
+WORKDIR /app
+
+# Expose port
+EXPOSE 3001
+
+# Set entrypoint
+COPY docker/entrypoint.sh /entrypoint.sh
+RUN chmod +x /entrypoint.sh
+
+ENTRYPOINT ["/entrypoint.sh"]

package/docker/docker-compose.yml

@@ -0,0 +1,30 @@
+# ROADMAP-KIT Docker Compose Configuration
+# Add this to your existing docker-compose.yml or use standalone
+
+version: '3.8'
+
+services:
+  roadmap-dashboard:
+    build:
+      context: ../
+      dockerfile: docker/Dockerfile
+    container_name: roadmap-dashboard
+    ports:
+      - "${ROADMAP_PORT:-6969}:6969"
+    environment:
+      - PORT=6969
+    volumes:
+      # Mount .git directory (read-only) for scanner
+      - ../.git:/app/.git:ro
+      # Mount roadmap.json for sync
+      - ../roadmap.json:/app/roadmap.json
+      # Mount project root for file access
+      - ..:/project:ro
+    restart: unless-stopped
+      - NODE_ENV=development
+    networks:
+      - roadmap-network
+
+networks:
+  roadmap-network:
+    driver: bridge

package/docker/entrypoint.sh

@@ -0,0 +1,31 @@
+#!/bin/sh
+
+# ROADMAP-KIT Entrypoint
+# Runs scanner and starts Vite dashboard
+
+set -e
+
+echo "🗺️  ROADMAP-KIT Docker Container"
+echo "================================="
+
+# Check if roadmap.json exists
+if [ ! -f /app/roadmap.json ]; then
+    echo "⚠️  roadmap.json not found"
+    echo "Creating from template..."
+    cp /app/templates/roadmap.template.json /app/roadmap.json
+fi
+
+# Run scanner to update roadmap
+echo "🔄 Scanning Git history..."
+cd /app
+node scanner.js || echo "⚠️  Scanner failed (might not be a git repo)"
+
+# Copy roadmap.json to dashboard public folder
+echo "📋 Copying roadmap to dashboard..."
+mkdir -p /app/dashboard/public
+cp /app/roadmap.json /app/dashboard/public/roadmap.json
+
+# Start Vite dev server
+echo "🚀 Starting dashboard on http://localhost:3001"
+cd /app/dashboard
+exec npm run dev -- --host 0.0.0.0

package/package.json

@@ -0,0 +1,68 @@
+{
+  "name": "roadmap-kit",
+  "version": "1.0.0",
+  "description": "AI-powered project management for Vibe Coding. Track features, tasks, and technical debt with a visual dashboard.",
+  "main": "cli.js",
+  "type": "module",
+  "bin": {
+    "roadmap-kit": "./cli.js"
+  },
+  "files": [
+    "cli.js",
+    "scanner.js",
+    "setup.sh",
+    "dashboard/",
+    "templates/",
+    "docker/",
+    "!dashboard/node_modules",
+    "README.md",
+    "INSTALL.md",
+    "LICENSE"
+  ],
+  "scripts": {
+    "scan": "node scanner.js",
+    "dev": "cd dashboard && npm run dev",
+    "dev:scan": "node scanner.js && cd dashboard && npm run dev",
+    "build": "cd dashboard && npm run build",
+    "preview": "cd dashboard && npm run preview",
+    "postinstall": "echo '\\n🗺️  ROADMAP-KIT installed! Run: npx roadmap-kit init\\n'"
+  },
+  "keywords": [
+    "ai",
+    "vibe-coding",
+    "roadmap",
+    "project-management",
+    "claude",
+    "cursor",
+    "cline",
+    "windsurf",
+    "copilot",
+    "ai-coding",
+    "developer-tools",
+    "task-tracking",
+    "technical-debt"
+  ],
+  "author": {
+    "name": "HACKLET",
+    "url": "https://hacklet.es"
+  },
+  "license": "MIT",
+  "homepage": "https://roadmap.ink",
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/hacklet1101/roadmap-kit.git"
+  },
+  "bugs": {
+    "url": "https://github.com/hacklet1101/roadmap-kit/issues"
+  },
+  "dependencies": {
+    "simple-git": "^3.22.0",
+    "chalk": "^5.3.0",
+    "commander": "^12.0.0",
+    "ora": "^8.0.1"
+  },
+  "devDependencies": {},
+  "engines": {
+    "node": ">=18.0.0"
+  }
+}

package/scanner.js

@@ -0,0 +1,351 @@
+#!/usr/bin/env node
+
+/**
+ * ROADMAP-KIT SCANNER
+ * Reads Git commits and updates roadmap.json automatically
+ * Parses tags: [task:id], [status:value], [debt:description]
+ */
+
+import { simpleGit } from 'simple-git';
+import { readFileSync, writeFileSync, existsSync } from 'fs';
+import { join, dirname } from 'path';
+import { fileURLToPath } from 'url';
+import chalk from 'chalk';
+import ora from 'ora';
+
+// Get current directory
+const __filename = fileURLToPath(import.meta.url);
+const __dirname = dirname(__filename);
+
+// Configuration
+const CONFIG = {
+  maxCommits: 50,
+  roadmapPath: null, // Will be set based on execution context
+};
+
+/**
+ * Parse commit message for tags
+ * Tags format: [task:id] [status:value] [debt:description]
+ */
+function parseCommitTags(message) {
+  const tags = {
+    taskId: null,
+    status: null,
+    debts: []
+  };
+
+  // Extract [task:id]
+  const taskMatch = message.match(/\[task:([^\]]+)\]/);
+  if (taskMatch) {
+    tags.taskId = taskMatch[1];
+  }
+
+  // Extract [status:value]
+  const statusMatch = message.match(/\[status:([^\]]+)\]/);
+  if (statusMatch) {
+    const status = statusMatch[1];
+    if (['pending', 'in_progress', 'completed'].includes(status)) {
+      tags.status = status;
+    }
+  }
+
+  // Extract all [debt:description]
+  const debtMatches = message.matchAll(/\[debt:([^\]]+)\]/g);
+  for (const match of debtMatches) {
+    tags.debts.push(match[1]);
+  }
+
+  return tags;
+}
+
+/**
+ * Get file statistics from commit
+ */
+async function getCommitStats(git, commitHash) {
+  try {
+    const diffSummary = await git.diffSummary([`${commitHash}^`, commitHash]);
+    return {
+      lines_added: diffSummary.insertions || 0,
+      lines_removed: diffSummary.deletions || 0,
+      files_created: diffSummary.files.filter(f => f.binary === false && f.deletions === 0).length,
+      files_modified: diffSummary.files.filter(f => f.binary === false && f.deletions > 0).length,
+      files: diffSummary.files.map(f => f.file)
+    };
+  } catch (error) {
+    // If it's the first commit, there's no parent to diff against
+    return {
+      lines_added: 0,
+      lines_removed: 0,
+      files_created: 0,
+      files_modified: 0,
+      files: []
+    };
+  }
+}
+
+/**
+ * Calculate complexity score based on lines changed
+ */
+function calculateComplexity(linesAdded, linesRemoved) {
+  const totalLines = linesAdded + linesRemoved;
+  if (totalLines < 50) return 1;
+  if (totalLines < 100) return 2;
+  if (totalLines < 200) return 3;
+  if (totalLines < 500) return 5;
+  if (totalLines < 1000) return 7;
+  return 10;
+}
+
+/**
+ * Find task in roadmap by ID
+ */
+function findTask(roadmap, taskId) {
+  for (const feature of roadmap.features) {
+    for (const task of feature.tasks) {
+      if (task.id === taskId) {
+        return { feature, task };
+      }
+    }
+  }
+  return null;
+}
+
+/**
+ * Update task with commit information
+ */
+function updateTask(task, commit, tags, stats) {
+  // Update status
+  if (tags.status) {
+    task.status = tags.status;
+
+    // Set timestamps
+    if (tags.status === 'in_progress' && !task.started_at) {
+      task.started_at = commit.date;
+    }
+    if (tags.status === 'completed' && !task.completed_at) {
+      task.completed_at = commit.date;
+    }
+  }
+
+  // Update git information
+  if (!task.git) {
+    task.git = {
+      branch: null,
+      pr_number: null,
+      pr_url: null,
+      last_commit: null,
+      commits: []
+    };
+  }
+  task.git.last_commit = commit.hash;
+  if (!task.git.commits.includes(commit.hash)) {
+    task.git.commits.push(commit.hash);
+  }
+
+  // Update affected files
+  if (stats.files && stats.files.length > 0) {
+    task.affected_files = task.affected_files || [];
+    stats.files.forEach(file => {
+      if (!task.affected_files.includes(file)) {
+        task.affected_files.push(file);
+      }
+    });
+  }
+
+  // Update metrics
+  if (!task.metrics) {
+    task.metrics = {
+      lines_added: 0,
+      lines_removed: 0,
+      files_created: 0,
+      files_modified: 0,
+      complexity_score: 0
+    };
+  }
+  task.metrics.lines_added += stats.lines_added;
+  task.metrics.lines_removed += stats.lines_removed;
+  task.metrics.files_created += stats.files_created;
+  task.metrics.files_modified += stats.files_modified;
+  task.metrics.complexity_score = calculateComplexity(
+    task.metrics.lines_added,
+    task.metrics.lines_removed
+  );
+
+  // Add technical debt
+  if (tags.debts.length > 0) {
+    task.technical_debt = task.technical_debt || [];
+    tags.debts.forEach(debtDesc => {
+      task.technical_debt.push({
+        description: debtDesc,
+        severity: 'medium', // Default severity
+        estimated_effort: 'TBD'
+      });
+    });
+  }
+
+  return task;
+}
+
+/**
+ * Calculate feature progress
+ */
+function calculateFeatureProgress(feature) {
+  if (!feature.tasks || feature.tasks.length === 0) return 0;
+
+  const completedTasks = feature.tasks.filter(t => t.status === 'completed').length;
+  return Math.round((completedTasks / feature.tasks.length) * 100);
+}
+
+/**
+ * Calculate total project progress
+ */
+function calculateTotalProgress(roadmap) {
+  if (!roadmap.features || roadmap.features.length === 0) return 0;
+
+  const totalProgress = roadmap.features.reduce((sum, feature) => {
+    return sum + (feature.progress || 0);
+  }, 0);
+
+  return Math.round(totalProgress / roadmap.features.length);
+}
+
+/**
+ * Load roadmap.json
+ */
+function loadRoadmap(roadmapPath) {
+  if (!existsSync(roadmapPath)) {
+    console.error(chalk.red('✗ roadmap.json not found'));
+    console.log(chalk.yellow('  Run "roadmap-kit init" to create one'));
+    process.exit(1);
+  }
+
+  try {
+    const content = readFileSync(roadmapPath, 'utf-8');
+    return JSON.parse(content);
+  } catch (error) {
+    console.error(chalk.red('✗ Error reading roadmap.json:'), error.message);
+    process.exit(1);
+  }
+}
+
+/**
+ * Save roadmap.json
+ */
+function saveRoadmap(roadmapPath, roadmap) {
+  try {
+    writeFileSync(roadmapPath, JSON.stringify(roadmap, null, 2), 'utf-8');
+  } catch (error) {
+    console.error(chalk.red('✗ Error saving roadmap.json:'), error.message);
+    process.exit(1);
+  }
+}
+
+/**
+ * Main scanner function
+ */
+export async function scanGitHistory(projectRoot = process.cwd()) {
+  const roadmapPath = join(projectRoot, 'roadmap.json');
+  const spinner = ora('Scanning Git history...').start();
+
+  try {
+    // Initialize git
+    const git = simpleGit(projectRoot);
+
+    // Check if it's a git repository
+    const isRepo = await git.checkIsRepo();
+    if (!isRepo) {
+      spinner.fail('Not a Git repository');
+      console.log(chalk.yellow('  Initialize Git first: git init'));
+      process.exit(1);
+    }
+
+    // Load roadmap
+    const roadmap = loadRoadmap(roadmapPath);
+
+    // Get last sync date
+    const lastSync = roadmap.project_info.last_sync
+      ? new Date(roadmap.project_info.last_sync)
+      : null;
+
+    // Get commits
+    const log = await git.log({ maxCount: CONFIG.maxCommits });
+
+    let updatedTasks = 0;
+    let newDebts = 0;
+    let processedCommits = 0;
+
+    // Process commits from newest to oldest
+    for (const commit of log.all) {
+      const commitDate = new Date(commit.date);
+
+      // Skip commits before last sync (if any)
+      if (lastSync && commitDate <= lastSync) {
+        continue;
+      }
+
+      processedCommits++;
+      const tags = parseCommitTags(commit.message);
+
+      // If no task tag, skip
+      if (!tags.taskId) {
+        continue;
+      }
+
+      // Find task in roadmap
+      const result = findTask(roadmap, tags.taskId);
+      if (!result) {
+        console.log(chalk.yellow(`\n  ⚠ Task "${tags.taskId}" not found in roadmap`));
+        continue;
+      }
+
+      // Get commit stats
+      const stats = await getCommitStats(git, commit.hash);
+
+      // Update task
+      updateTask(result.task, commit, tags, stats);
+      updatedTasks++;
+
+      if (tags.debts.length > 0) {
+        newDebts += tags.debts.length;
+      }
+
+      spinner.text = `Processing commits... (${processedCommits} commits, ${updatedTasks} tasks updated)`;
+    }
+
+    // Recalculate progress
+    roadmap.features.forEach(feature => {
+      feature.progress = calculateFeatureProgress(feature);
+    });
+    roadmap.project_info.total_progress = calculateTotalProgress(roadmap);
+    roadmap.project_info.last_sync = new Date().toISOString();
+
+    // Save updated roadmap
+    saveRoadmap(roadmapPath, roadmap);
+
+    spinner.succeed('Roadmap updated successfully');
+
+    // Print summary
+    console.log(chalk.cyan('\n📊 Summary:'));
+    console.log(chalk.white(`  • Processed commits: ${processedCommits}`));
+    console.log(chalk.white(`  • Updated tasks: ${updatedTasks}`));
+    console.log(chalk.white(`  • New technical debts: ${newDebts}`));
+    console.log(chalk.green(`  • Total progress: ${roadmap.project_info.total_progress}%`));
+
+    if (updatedTasks === 0 && processedCommits > 0) {
+      console.log(chalk.yellow('\n💡 Tip: Use commit tags like [task:id] [status:completed] to track tasks'));
+    }
+
+  } catch (error) {
+    spinner.fail('Error scanning Git history');
+    console.error(chalk.red(error.message));
+    if (error.stack) {
+      console.error(chalk.gray(error.stack));
+    }
+    process.exit(1);
+  }
+}
+
+// Run scanner if executed directly
+if (import.meta.url === `file://${process.argv[1]}`) {
+  scanGitHistory();
+}