@vibecodetown/mcp-server 1.3.1

package/build/mcp/tools/vibe_pm/diagrams/animator.js

@@ -0,0 +1,122 @@
+// SVG Animation Injector
+// SSOT: docs/DEV_SPEC/active/diagram-as-code/DIAGRAM_ANIMATION_IMPL_GUIDE.md
+import * as fs from "node:fs/promises";
+// Import shared constants
+import { COLOR_MAPPINGS, CSS_KEYFRAMES, CSS_CLASSES, } from "./constants.js";
+// Re-export COLOR_MAPPINGS for backward compatibility
+export { COLOR_MAPPINGS };
+export function injectAnimationStyles(svgContent, options = {}) {
+    const { includeKeyframes = true, includeHoverEffects = true } = options;
+    // Build style block
+    let styleContent = "";
+    if (includeKeyframes) {
+        styleContent += CSS_KEYFRAMES;
+    }
+    styleContent += CSS_CLASSES;
+    if (!includeHoverEffects) {
+        // Remove hover styles if not wanted
+        styleContent = styleContent.replace(/\/\* Hover effects \*\/[\s\S]*$/, "");
+    }
+    const styleBlock = `<style type="text/css"><![CDATA[${styleContent}]]></style>`;
+    // Inject style block after opening <svg> tag
+    let animatedSvg = svgContent.replace(/(<svg[^>]*>)/, `$1\n${styleBlock}\n`);
+    // Add animation classes to elements based on fill color
+    for (const mapping of COLOR_MAPPINGS) {
+        // Match fill attribute and add class
+        // Handle both fill="#color" and style="fill:#color"
+        const fillPattern = new RegExp(`(fill="${mapping.svgFill}"(?![^>]*class=))`, "gi");
+        animatedSvg = animatedSvg.replace(fillPattern, `$1 class="${mapping.animClass}"`);
+        // Also handle style attribute
+        const stylePattern = new RegExp(`(style="[^"]*fill:\\s*${mapping.svgFill}[^"]*"(?![^>]*class=))`, "gi");
+        animatedSvg = animatedSvg.replace(stylePattern, `$1 class="${mapping.animClass}"`);
+    }
+    return animatedSvg;
+}
+export async function animateSvgFile(svgPath, outputPath, options = {}) {
+    const finalOutputPath = outputPath || svgPath.replace(/\.svg$/, "_animated.svg");
+    try {
+        // Read SVG
+        const svgContent = await fs.readFile(svgPath, "utf-8");
+        // Inject animations
+        const animatedSvg = injectAnimationStyles(svgContent, options);
+        // Write output
+        await fs.writeFile(finalOutputPath, animatedSvg, "utf-8");
+        return {
+            success: true,
+            inputPath: svgPath,
+            outputPath: finalOutputPath,
+            error: null,
+        };
+    }
+    catch (err) {
+        const message = err instanceof Error ? err.message : String(err);
+        return {
+            success: false,
+            inputPath: svgPath,
+            outputPath: finalOutputPath,
+            error: message,
+        };
+    }
+}
+// ============================================================================
+// Node ID Injection (for interactivity)
+// ============================================================================
+export function injectNodeIds(svgContent, nodeIdMap // label → node_id
+) {
+    let result = svgContent;
+    for (const [label, nodeId] of nodeIdMap) {
+        // Find text elements with the label and add data attribute to parent group
+        // This is a heuristic - PlantUML SVG structure varies
+        const textPattern = new RegExp(`(<g[^>]*>\\s*<[^>]*>\\s*<text[^>]*>[^<]*${escapeRegex(label)}[^<]*</text>)`, "gi");
+        result = result.replace(textPattern, (match, group) => {
+            // Add data-node-id to the group if not already present
+            if (!group.includes("data-node-id")) {
+                return group.replace("<g", `<g data-node-id="${nodeId}"`);
+            }
+            return match;
+        });
+    }
+    return result;
+}
+function escapeRegex(str) {
+    return str.replace(/[.*+?^${}()|[\]\\]/g, "\\$&");
+}
+export function injectTooltips(svgContent, tooltips) {
+    let result = svgContent;
+    for (const tooltip of tooltips) {
+        const parts = [];
+        if (tooltip.where)
+            parts.push(`WHERE: ${tooltip.where}`);
+        if (tooltip.why)
+            parts.push(`WHY: ${tooltip.why}`);
+        if (tooltip.next)
+            parts.push(`NEXT: ${tooltip.next}`);
+        if (parts.length === 0)
+            continue;
+        const titleContent = parts.join("\n");
+        // Find the group with this node ID and add/update title
+        const pattern = new RegExp(`(<g[^>]*data-node-id="${escapeRegex(tooltip.nodeId)}"[^>]*>)`, "gi");
+        result = result.replace(pattern, (match, group) => {
+            // Check if title already exists
+            if (result.includes(`${group}<title>`)) {
+                return match;
+            }
+            return `${group}\n  <title>${titleContent}</title>`;
+        });
+    }
+    return result;
+}
+export function animateSvg(svgContent, options = {}) {
+    let result = svgContent;
+    // Step 1: Inject animation styles
+    result = injectAnimationStyles(result, options);
+    // Step 2: Inject node IDs (if provided)
+    if (options.nodeIdMap) {
+        result = injectNodeIds(result, options.nodeIdMap);
+    }
+    // Step 3: Inject tooltips (if provided)
+    if (options.tooltips) {
+        result = injectTooltips(result, options.tooltips);
+    }
+    return result;
+}

package/build/mcp/tools/vibe_pm/diagrams/constants.d.ts

@@ -0,0 +1,71 @@
+/**
+ * Stereotype colors for diagram elements
+ * These colors map to PlantUML skinparam and SVG fill values
+ */
+export declare const STEREOTYPE_COLORS: {
+    readonly CHANGED: {
+        readonly fill: "#E3F2FD";
+        readonly border: "#1E88E5";
+        readonly text: "#0D47A1";
+        readonly description: "Blue theme - modified files";
+    };
+    readonly RISK: {
+        readonly fill: "#FFEBEE";
+        readonly border: "#E53935";
+        readonly text: "#B71C1C";
+        readonly description: "Red theme - risk areas";
+    };
+    readonly UNKNOWN: {
+        readonly fill: "#FFF3E0";
+        readonly border: "#FB8C00";
+        readonly text: "#E65100";
+        readonly description: "Orange theme - unmapped areas";
+    };
+    readonly FORBIDDEN: {
+        readonly fill: "#F3E5F5";
+        readonly border: "#8E24AA";
+        readonly text: "#4A148C";
+        readonly description: "Purple theme - forbidden zones";
+    };
+};
+export type StereotypeColorKey = keyof typeof STEREOTYPE_COLORS;
+/**
+ * Maps SVG fill colors to animation classes
+ * Used by animator.ts for CSS class injection
+ */
+export interface ColorMapping {
+    svgFill: string;
+    stereotype: string;
+    animClass: string;
+}
+export declare const COLOR_MAPPINGS: ColorMapping[];
+export declare const CSS_KEYFRAMES = "\n  @keyframes pulse-red {\n    0% {\n      filter: drop-shadow(0 0 0 rgba(255, 0, 0, 0.4));\n      stroke-width: 1px;\n    }\n    50% {\n      filter: drop-shadow(0 0 8px rgba(255, 0, 0, 0.8));\n      stroke-width: 3px;\n    }\n    100% {\n      filter: drop-shadow(0 0 0 rgba(255, 0, 0, 0.4));\n      stroke-width: 1px;\n    }\n  }\n\n  @keyframes pulse-orange {\n    0% {\n      filter: drop-shadow(0 0 0 rgba(255, 140, 0, 0.4));\n      stroke-width: 1px;\n    }\n    50% {\n      filter: drop-shadow(0 0 8px rgba(255, 140, 0, 0.8));\n      stroke-width: 3px;\n    }\n    100% {\n      filter: drop-shadow(0 0 0 rgba(255, 140, 0, 0.4));\n      stroke-width: 1px;\n    }\n  }\n\n  @keyframes blink {\n    0%, 100% { opacity: 1; }\n    50% { opacity: 0.4; }\n  }\n\n  @keyframes shake {\n    0%, 100% { transform: translateX(0); }\n    10%, 30%, 50%, 70%, 90% { transform: translateX(-2px); }\n    20%, 40%, 60%, 80% { transform: translateX(2px); }\n  }\n";
+export declare const CSS_CLASSES = "\n  .anim-changed {\n    animation: pulse-red 2s infinite;\n  }\n\n  .anim-risk {\n    animation: pulse-orange 1.5s infinite;\n  }\n\n  .anim-unknown {\n    animation: blink 2s infinite;\n  }\n\n  .anim-forbidden {\n    animation: shake 0.5s infinite;\n  }\n\n  /* Hover effects */\n  .anim-changed:hover,\n  .anim-risk:hover,\n  .anim-unknown:hover,\n  .anim-forbidden:hover {\n    cursor: pointer;\n    filter: brightness(1.1);\n  }\n";
+export declare const VERDICT_COLORS: {
+    readonly GO: {
+        readonly bg: "#E8F5E9";
+        readonly border: "#4CAF50";
+        readonly text: "#1B5E20";
+    };
+    readonly FIX: {
+        readonly bg: "#FFF3E0";
+        readonly border: "#FF9800";
+        readonly text: "#E65100";
+    };
+    readonly BLOCK: {
+        readonly bg: "#FFEBEE";
+        readonly border: "#F44336";
+        readonly text: "#B71C1C";
+    };
+};
+export type VerdictColorKey = keyof typeof VERDICT_COLORS;
+/**
+ * Paths that are considered control-plane (require special authorization)
+ * Used by gate_engine to detect control_plane_hits
+ */
+export declare const CONTROL_PLANE_PATTERNS: string[];
+/**
+ * Node IDs that are considered critical (require extra review)
+ * Used by gate_engine to detect critical_nodes_touched
+ */
+export declare const CRITICAL_NODE_PATTERNS: string[];

package/build/mcp/tools/vibe_pm/diagrams/constants.js

@@ -0,0 +1,158 @@
+// Shared constants for Diagram-as-Code module
+// SSOT: Central location for colors, animations, and styling constants
+// ============================================================================
+// Color Definitions (used by generator, animator, and UI)
+// ============================================================================
+/**
+ * Stereotype colors for diagram elements
+ * These colors map to PlantUML skinparam and SVG fill values
+ */
+export const STEREOTYPE_COLORS = {
+    CHANGED: {
+        fill: "#E3F2FD",
+        border: "#1E88E5",
+        text: "#0D47A1",
+        description: "Blue theme - modified files",
+    },
+    RISK: {
+        fill: "#FFEBEE",
+        border: "#E53935",
+        text: "#B71C1C",
+        description: "Red theme - risk areas",
+    },
+    UNKNOWN: {
+        fill: "#FFF3E0",
+        border: "#FB8C00",
+        text: "#E65100",
+        description: "Orange theme - unmapped areas",
+    },
+    FORBIDDEN: {
+        fill: "#F3E5F5",
+        border: "#8E24AA",
+        text: "#4A148C",
+        description: "Purple theme - forbidden zones",
+    },
+};
+export const COLOR_MAPPINGS = [
+    { svgFill: STEREOTYPE_COLORS.CHANGED.fill, stereotype: "CHANGED", animClass: "anim-changed" },
+    { svgFill: STEREOTYPE_COLORS.RISK.fill, stereotype: "RISK", animClass: "anim-risk" },
+    { svgFill: STEREOTYPE_COLORS.UNKNOWN.fill, stereotype: "UNKNOWN", animClass: "anim-unknown" },
+    { svgFill: STEREOTYPE_COLORS.FORBIDDEN.fill, stereotype: "FORBIDDEN", animClass: "anim-forbidden" },
+];
+// ============================================================================
+// CSS Keyframes Definitions
+// ============================================================================
+export const CSS_KEYFRAMES = `
+  @keyframes pulse-red {
+    0% {
+      filter: drop-shadow(0 0 0 rgba(255, 0, 0, 0.4));
+      stroke-width: 1px;
+    }
+    50% {
+      filter: drop-shadow(0 0 8px rgba(255, 0, 0, 0.8));
+      stroke-width: 3px;
+    }
+    100% {
+      filter: drop-shadow(0 0 0 rgba(255, 0, 0, 0.4));
+      stroke-width: 1px;
+    }
+  }
+
+  @keyframes pulse-orange {
+    0% {
+      filter: drop-shadow(0 0 0 rgba(255, 140, 0, 0.4));
+      stroke-width: 1px;
+    }
+    50% {
+      filter: drop-shadow(0 0 8px rgba(255, 140, 0, 0.8));
+      stroke-width: 3px;
+    }
+    100% {
+      filter: drop-shadow(0 0 0 rgba(255, 140, 0, 0.4));
+      stroke-width: 1px;
+    }
+  }
+
+  @keyframes blink {
+    0%, 100% { opacity: 1; }
+    50% { opacity: 0.4; }
+  }
+
+  @keyframes shake {
+    0%, 100% { transform: translateX(0); }
+    10%, 30%, 50%, 70%, 90% { transform: translateX(-2px); }
+    20%, 40%, 60%, 80% { transform: translateX(2px); }
+  }
+`;
+export const CSS_CLASSES = `
+  .anim-changed {
+    animation: pulse-red 2s infinite;
+  }
+
+  .anim-risk {
+    animation: pulse-orange 1.5s infinite;
+  }
+
+  .anim-unknown {
+    animation: blink 2s infinite;
+  }
+
+  .anim-forbidden {
+    animation: shake 0.5s infinite;
+  }
+
+  /* Hover effects */
+  .anim-changed:hover,
+  .anim-risk:hover,
+  .anim-unknown:hover,
+  .anim-forbidden:hover {
+    cursor: pointer;
+    filter: brightness(1.1);
+  }
+`;
+// ============================================================================
+// Gate Verdict Colors (for UI layer)
+// ============================================================================
+export const VERDICT_COLORS = {
+    GO: {
+        bg: "#E8F5E9",
+        border: "#4CAF50",
+        text: "#1B5E20",
+    },
+    FIX: {
+        bg: "#FFF3E0",
+        border: "#FF9800",
+        text: "#E65100",
+    },
+    BLOCK: {
+        bg: "#FFEBEE",
+        border: "#F44336",
+        text: "#B71C1C",
+    },
+};
+// ============================================================================
+// Control Plane Paths (blacklist for gate_engine)
+// ============================================================================
+/**
+ * Paths that are considered control-plane (require special authorization)
+ * Used by gate_engine to detect control_plane_hits
+ */
+export const CONTROL_PLANE_PATTERNS = [
+    "**/mcp/index.ts",
+    "**/mcp/tool-registry.ts",
+    "**/mcp/profile-config.ts",
+    "**/bin/*.ts",
+    "**/.vibe/**",
+    "**/schema/**",
+];
+/**
+ * Node IDs that are considered critical (require extra review)
+ * Used by gate_engine to detect critical_nodes_touched
+ */
+export const CRITICAL_NODE_PATTERNS = [
+    "*.LAYER_ENTRY.*",
+    "*.LAYER_API.*",
+    "core.*",
+    "auth.*",
+    "security.*",
+];

package/build/mcp/tools/vibe_pm/diagrams/gate_engine.d.ts

@@ -0,0 +1,67 @@
+import type { DiagramModel } from "./types.js";
+export type Severity = "P0" | "P1" | "P2";
+export type Level = "BLOCK" | "FIX" | "GO_HINT";
+export interface GateMetrics {
+    unknown_rate: number;
+    changed_files: number;
+    touched_nodes: number;
+    cross_domain_edges: number;
+    risk_score: number;
+    avg_confidence: number;
+    forbidden_hits: number;
+    layer_skip_edges: number;
+    reverse_edges: number;
+    multi_match_files: number;
+    max_matches_per_file: number;
+    control_plane_hits: number;
+    critical_nodes_touched: number;
+}
+export interface ReasonLocation {
+    nodes?: string[];
+    files?: string[];
+    edges?: Array<{
+        from: string;
+        to: string;
+        relation: string;
+    }>;
+}
+export interface Recommendation {
+    do: string[];
+    move_to?: Array<{
+        file: string;
+        suggest: string;
+    }>;
+    add_spec_map?: Array<{
+        pattern: string;
+        node: string;
+    }>;
+}
+export interface GateReason {
+    code: string;
+    severity: Severity;
+    level: Level;
+    message: string;
+    why: string;
+    where: ReasonLocation;
+    metrics: Partial<GateMetrics>;
+    recommendation: Recommendation;
+}
+export interface GateVerdictFull {
+    schema_version: "diagram.gate.v2";
+    run_id: string;
+    generated_at: string;
+    verdict: "GO" | "FIX" | "BLOCK";
+    exit_code: number;
+    metrics: GateMetrics;
+    reasons: GateReason[];
+    summary: {
+        total_reasons: number;
+        block_count: number;
+        fix_count: number;
+        hint_count: number;
+    };
+}
+export declare function extractMetrics(model: DiagramModel, totalFiles: number): GateMetrics;
+export declare function evaluateGate(model: DiagramModel, totalFiles: number, overrideMetrics?: Partial<GateMetrics>): GateVerdictFull;
+export declare function formatNavigationOutput(reason: GateReason): string;
+export declare function getExitCode(verdict: GateVerdictFull): number;