@aiready/visualizer 0.1.13 → 0.1.18

package/web/src/constants.ts

@@ -0,0 +1,99 @@
+import { ThemeColors } from './types';
+
+export const severityColors: Record<string, string> = {
+  critical: '#ff4d4f',
+  major: '#ff9900',
+  minor: '#ffd666',
+  info: '#91d5ff',
+  default: '#97c2fc',
+};
+
+export const edgeColors: Record<string, string> = {
+  similarity: '#fb7e81',
+  dependency: '#84c1ff',
+  reference: '#ffa500',
+  related: '#6b7280',
+  default: '#848484',
+};
+
+// Ensure GRAPH_CONFIG.edgeDistances has all edge types
+const EDGE_DISTANCES = {
+  similarity: 80,
+  related: 150,
+  dependency: 100,
+  reference: 120,
+  default: 100,
+};
+
+const EDGE_STRENGTHS = {
+  similarity: 0.5,
+  related: 0.1,
+  dependency: 0.3,
+  reference: 0.2,
+  default: 0.3,
+};
+
+const EDGE_OPACITIES = {
+  similarity: 0.8,
+  related: 0.2,
+  dependency: 0.5,
+  reference: 0.4,
+  default: 0.5,
+};
+
+export const themeConfig: Record<'dark' | 'light', ThemeColors> = {
+  dark: {
+    bg: '#000000',
+    text: '#e2e8f0',
+    textMuted: '#94a3b8',
+    panel: '#020617',
+    panelBorder: '#1e293b',
+    cardBg: '#0f172a',
+    cardBorder: '#1e293b',
+    grid: 'rgba(30,41,59,0.3)',
+  },
+  light: {
+    bg: '#ffffff',
+    text: '#1e293b',
+    textMuted: '#64748b',
+    panel: '#ffffff',
+    panelBorder: '#e2e8f0',
+    cardBg: '#f8fafc',
+    cardBorder: '#e2e8f0',
+    grid: 'rgba(203,213,225,0.4)',
+  },
+};
+
+export const GRAPH_CONFIG = {
+  maxNodes: 200,
+  maxEdges: 300,
+  nodeBaseRadius: 3,
+  collisionRadius: 25,
+  zoomMin: 0.1,
+  zoomMax: 4,
+  edgeDistances: {
+    similarity: 80,
+    related: 150,
+    dependency: 100,
+    reference: 120,
+    default: 100,
+  },
+  edgeStrengths: {
+    similarity: 0.5,
+    related: 0.1,
+    dependency: 0.3,
+    reference: 0.2,
+    default: 0.3,
+  },
+  edgeOpacities: {
+    similarity: 0.8,
+    related: 0.2,
+    dependency: 0.5,
+    reference: 0.4,
+    default: 0.5,
+  },
+  simulation: {
+    chargeStrength: -200,
+    centerStrength: 0.1,
+  },
+};

package/web/src/css.d.ts

@@ -0,0 +1,4 @@
+declare module '*.css' {
+  const content: string;
+  export default content;
+}

package/web/src/hooks/useDimensions.ts

@@ -0,0 +1,28 @@
+import { useEffect, useState, useRef } from 'react';
+
+export function useDimensions() {
+  const containerRef = useRef<HTMLDivElement>(null);
+  const [dimensions, setDimensions] = useState({ width: 0, height: 0 });
+
+  useEffect(() => {
+    if (!containerRef.current) return;
+
+    const updateDimensions = () => {
+      if (containerRef.current) {
+        const rect = containerRef.current.getBoundingClientRect();
+        setDimensions({ width: rect.width, height: rect.height });
+      }
+    };
+
+    updateDimensions();
+
+    const resizeObserver = new ResizeObserver(updateDimensions);
+    resizeObserver.observe(containerRef.current);
+
+    return () => {
+      resizeObserver.disconnect();
+    };
+  }, []);
+
+  return { containerRef, dimensions };
+}

package/web/src/hooks/useTheme.ts

@@ -0,0 +1,27 @@
+import { useEffect, useState } from 'react';
+import { Theme, EffectiveTheme } from '../types';
+
+export function useTheme() {
+  const getSystemTheme = (): EffectiveTheme => {
+    return window.matchMedia('(prefers-color-scheme: dark)').matches ? 'dark' : 'light';
+  };
+
+  const [theme, setTheme] = useState<Theme>('system');
+  const [systemTheme, setSystemTheme] = useState<EffectiveTheme>(getSystemTheme());
+
+  useEffect(() => {
+    const mediaQuery = window.matchMedia('(prefers-color-scheme: dark)');
+    setSystemTheme(mediaQuery.matches ? 'dark' : 'light');
+
+    const handler = (e: MediaQueryListEvent) => {
+      setSystemTheme(e.matches ? 'dark' : 'light');
+    };
+
+    mediaQuery.addEventListener('change', handler);
+    return () => mediaQuery.removeEventListener('change', handler);
+  }, []);
+
+  const effectiveTheme = theme === 'system' ? systemTheme : theme;
+
+  return { theme, setTheme, effectiveTheme };
+}

package/web/src/main.tsx

@@ -0,0 +1,11 @@
+import { StrictMode } from 'react';
+import { createRoot } from 'react-dom/client';
+import App from './App';
+import './styles/index.css';
+
+const rootEl = document.getElementById('root')!;
+createRoot(rootEl).render(
+  <StrictMode>
+    <App />
+  </StrictMode>
+);

package/web/src/style.css

@@ -0,0 +1,2 @@
+html,body,#app{height:100%;margin:0}
+#app{font-family:Inter,system-ui,Segoe UI,Roboto,sans-serif}

package/web/src/styles/index.css

@@ -0,0 +1,42 @@
+@import "tailwindcss";
+
+/* Base styles */
+* {
+  box-sizing: border-box;
+  margin: 0;
+  padding: 0;
+}
+
+html, body, #root {
+  height: 100%;
+  width: 100%;
+  overflow: hidden;
+}
+
+body {
+  margin: 0;
+  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen',
+    'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue',
+    sans-serif;
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+}
+
+#root {
+  width: 100%;
+  height: 100vh;
+  display: flex;
+  flex-direction: column;
+}
+
+/* Smooth fade-in animation for panel transitions */
+@keyframes fadeIn {
+  from {
+    opacity: 0;
+    transform: translateY(-4px);
+  }
+  to {
+    opacity: 1;
+    transform: translateY(0);
+  }
+}

package/web/src/types.ts

@@ -0,0 +1,78 @@
+// Types for the visualization
+
+export interface FileNode {
+  id: string;
+  label: string;
+  value: number;
+  color: string;
+  title: string;
+  duplicates?: number;
+  tokenCost?: number;
+  severity?: string;
+}
+
+export interface GraphEdge {
+  source: string;
+  target: string;
+  type: string;
+}
+
+export interface GraphData {
+  nodes: FileNode[];
+  edges: GraphEdge[];
+}
+
+// Filter types
+export type SeverityLevel = 'critical' | 'major' | 'minor' | 'info';
+export type EdgeType = 'similarity' | 'dependency' | 'reference' | 'related';
+
+export interface FilterState {
+  visibleSeverities: Set<SeverityLevel>;
+  visibleEdgeTypes: Set<EdgeType>;
+}
+
+export interface PatternIssue {
+  fileName: string;
+  issues: Array<{ type: string; severity: string; message: string }>;
+  metrics: { tokenCost: number; consistencyScore: number };
+}
+
+export interface Duplicate {
+  file1: string;
+  file2: string;
+  severity: string;
+  patternType: string;
+}
+
+export interface ContextFile {
+  file: string;
+  tokenCost: number;
+  linesOfCode: number;
+  dependencyCount: number;
+  dependencyList: string[];
+  relatedFiles: string[];
+  severity: string;
+  issues: string[];
+}
+
+export interface ReportData {
+  patterns: PatternIssue[];
+  duplicates: Duplicate[];
+  context: ContextFile[];
+  summary: { totalIssues: number };
+}
+
+export type Theme = 'dark' | 'light' | 'system';
+
+export interface ThemeColors {
+  bg: string;
+  text: string;
+  textMuted: string;
+  panel: string;
+  panelBorder: string;
+  cardBg: string;
+  cardBorder: string;
+  grid: string;
+}
+
+export type EffectiveTheme = 'dark' | 'light';

package/web/src/utils.ts

@@ -0,0 +1,184 @@
+import { FileNode, GraphEdge, GraphData, ReportData } from './types';
+import { severityColors, GRAPH_CONFIG } from './constants';
+
+export function getSeverityColor(severity: string | undefined): string {
+  if (!severity) return severityColors.default;
+  const s = severity.toLowerCase();
+  if (s === 'critical') return severityColors.critical;
+  if (s === 'major') return severityColors.major;
+  if (s === 'minor') return severityColors.minor;
+  if (s === 'info') return severityColors.info;
+  return severityColors.default;
+}
+
+export function transformReportToGraph(report: ReportData): GraphData {
+  const nodes: FileNode[] = [];
+  const edges: GraphEdge[] = [];
+  const nodeMap = new Map<string, FileNode>();
+
+  const fileIssues = new Map<string, { count: number; severities: Set<string>; maxSeverity: string }>();
+
+  for (const pattern of report.patterns) {
+    const issueCount = pattern.issues?.length || 0;
+    if (issueCount > 0) {
+      let maxSeverity = 'info';
+      const severityPriority: Record<string, number> = { critical: 4, major: 3, minor: 2, info: 1 };
+      for (const issue of pattern.issues) {
+        if ((severityPriority[issue.severity] || 0) > (severityPriority[maxSeverity] || 0)) {
+          maxSeverity = issue.severity;
+        }
+      }
+      fileIssues.set(pattern.fileName, { count: issueCount, severities: new Set(), maxSeverity });
+    }
+  }
+
+  for (const ctx of report.context) {
+    const issues = fileIssues.get(ctx.file);
+    const severity = issues?.maxSeverity || ctx.severity || 'default';
+    const tokenCost = ctx.tokenCost || 0;
+
+    const titleLines = [
+      `Token Cost: ${tokenCost}`,
+      `Lines of Code: ${ctx.linesOfCode}`,
+      `Dependencies: ${ctx.dependencyCount}`,
+    ];
+
+    if (issues) {
+      titleLines.push(`Issues: ${issues.count}`);
+      titleLines.push(`Severity: ${issues.maxSeverity}`);
+    }
+
+    if (ctx.issues && ctx.issues.length > 0) {
+      titleLines.push('', ...ctx.issues.slice(0, 3));
+    }
+
+    const node: FileNode = {
+      id: ctx.file,
+      label: ctx.file.split('/').pop() || ctx.file,
+      value: Math.max(10, Math.sqrt(tokenCost) * 3 + (issues?.count || 0) * 10),
+      color: getSeverityColor(severity),
+      title: titleLines.join('\n'),
+      duplicates: issues?.count,
+      tokenCost,
+      severity,
+    };
+
+    nodes.push(node);
+    nodeMap.set(ctx.file, node);
+  }
+
+  for (const ctx of report.context) {
+    const sourceDir = ctx.file.substring(0, ctx.file.lastIndexOf('/'));
+    for (const dep of ctx.dependencyList || []) {
+      if (dep.startsWith('.') || dep.startsWith('/')) {
+        // Try multiple matching strategies
+        let targetFile: string | undefined;
+        
+        // Strategy 1: Direct resolve from source file's directory
+        const normalizedDep = dep.replace(/^\.\/?/, '');
+        const possiblePaths = [
+          // With extensions
+          `${sourceDir}/${normalizedDep}.ts`,
+          `${sourceDir}/${normalizedDep}.tsx`,
+          `${sourceDir}/${normalizedDep}/index.ts`,
+          `${sourceDir}/${normalizedDep}/index.tsx`,
+          // Just the path
+          `${sourceDir}/${normalizedDep}`,
+        ];
+        
+        for (const p of possiblePaths) {
+          if (nodeMap.has(p)) {
+            targetFile = p;
+            break;
+          }
+        }
+        
+        // Strategy 2: Fall back to loose endsWith matching
+        if (!targetFile) {
+          const depBase = normalizedDep.split('/').pop() || normalizedDep;
+          targetFile = [...nodeMap.keys()].find(k => 
+            k.endsWith(`/${depBase}.ts`) || k.endsWith(`/${depBase}.tsx`) ||
+            k.endsWith(`/${depBase}/index.ts`) || k.endsWith(`/${depBase}/index.tsx`)
+          );
+        }
+        
+        if (targetFile && targetFile !== ctx.file) {
+          edges.push({ source: ctx.file, target: targetFile, type: 'dependency' });
+        }
+      }
+    }
+
+    for (const related of ctx.relatedFiles || []) {
+      if (nodeMap.has(related) && related !== ctx.file) {
+        const exists = edges.some(
+          e =>
+            (e.source === ctx.file && e.target === related) ||
+            (e.source === related && e.target === ctx.file)
+        );
+        if (!exists) edges.push({ source: ctx.file, target: related, type: 'related' });
+      }
+    }
+  }
+
+  for (const dup of report.duplicates || []) {
+    if (nodeMap.has(dup.file1) && nodeMap.has(dup.file2)) {
+      const exists = edges.some(
+        e =>
+          (e.source === dup.file1 && e.target === dup.file2) ||
+          (e.source === dup.file2 && e.target === dup.file1)
+      );
+      if (!exists) edges.push({ source: dup.file1, target: dup.file2, type: 'similarity' });
+    }
+  }
+
+  // Sort edges by priority: similarity and dependency first (most important for visualization)
+  const edgePriority: Record<string, number> = {
+    similarity: 1,
+    dependency: 2,
+    reference: 3,
+    related: 4,
+  };
+  const sortedEdges = [...edges].sort((a, b) => {
+    const priorityA = edgePriority[a.type] || 99;
+    const priorityB = edgePriority[b.type] || 99;
+    return priorityA - priorityB;
+  });
+
+  return {
+    nodes: nodes.slice(0, GRAPH_CONFIG.maxNodes),
+    edges: sortedEdges.slice(0, GRAPH_CONFIG.maxEdges),
+  };
+}
+
+export async function loadReportData(): Promise<ReportData | null> {
+  const possiblePaths = ['/report-data.json', '../report-data.json', '../../report-data.json'];
+
+  for (const path of possiblePaths) {
+    try {
+      const response = await fetch(path);
+      if (response.ok) {
+        return await response.json();
+      }
+    } catch {
+      continue;
+    }
+  }
+
+  return null;
+}
+
+export function getEdgeDistance(type: string): number {
+  return GRAPH_CONFIG.edgeDistances[type as keyof typeof GRAPH_CONFIG.edgeDistances] ?? GRAPH_CONFIG.edgeDistances.dependency;
+}
+
+export function getEdgeStrength(type: string): number {
+  return GRAPH_CONFIG.edgeStrengths[type as keyof typeof GRAPH_CONFIG.edgeStrengths] ?? GRAPH_CONFIG.edgeStrengths.dependency;
+}
+
+export function getEdgeOpacity(type: string): number {
+  return GRAPH_CONFIG.edgeOpacities[type as keyof typeof GRAPH_CONFIG.edgeOpacities] ?? GRAPH_CONFIG.edgeOpacities.dependency;
+}
+
+export function getEdgeStrokeWidth(type: string): number {
+  return type === 'similarity' ? 2 : 1;
+}

package/web/tsconfig.json

@@ -0,0 +1,22 @@
+{
+  "extends": "../../../tsconfig.base.json",
+  "compilerOptions": {
+    "target": "ES2020",
+    "useDefineForClassFields": true,
+    "lib": ["ES2020", "DOM", "DOM.Iterable"],
+    "module": "ESNext",
+    "skipLibCheck": true,
+    "moduleResolution": "bundler",
+    "allowImportingTsExtensions": true,
+    "isolatedModules": true,
+    "moduleDetection": "force",
+    "noEmit": true,
+    "jsx": "react-jsx",
+    "strict": true,
+    "noUnusedLocals": true,
+    "noUnusedParameters": true,
+    "noFallthroughCasesInSwitch": true,
+    "noUncheckedSideEffectImports": true
+  },
+  "include": ["src"]
+}

package/web/vite.config.ts

@@ -0,0 +1,46 @@
+import { defineConfig } from 'vite';
+import { resolve } from 'path';
+import react from '@vitejs/plugin-react';
+import tailwindcss from '@tailwindcss/vite';
+import { existsSync } from 'fs';
+
+export default defineConfig(({ command }) => {
+  const isDev = command === 'serve';
+  
+  // Resolve path to @aiready/components for alias
+  // Try monorepo first, then fall back to installed package
+  let componentsPath = resolve(__dirname, '../../components/src');
+  if (!existsSync(componentsPath)) {
+    // Fallback: try installed package
+    try {
+      componentsPath = require.resolve('@aiready/components');
+      componentsPath = resolve(componentsPath, '..');
+    } catch (e) {
+      // Use build dist as last resort
+      componentsPath = resolve(__dirname, '../../components/dist');
+    }
+  }
+
+  return {
+    plugins: [react(), tailwindcss()],
+    build: {
+      outDir: 'dist',
+      emptyOutDir: true,
+      rollupOptions: {
+        output: {
+          manualChunks: undefined,
+        },
+      },
+    },
+    server: {
+      // Use default port (5173); don't hardcode to avoid conflicts
+      open: false,
+    },
+    resolve: {
+      alias: {
+        // during dev resolve to source for HMR; during build use the built dist
+        '@aiready/components': isDev ? componentsPath : resolve(__dirname, '../../components/dist'),
+      },
+    },
+  };
+});