@aiready/visualizer 0.1.13 → 0.1.18

package/web/src/components/LegendPanel.tsx

@@ -0,0 +1,284 @@
+import { ThemeColors, SeverityLevel, EdgeType } from '../types';
+import { severityColors, edgeColors } from '../constants';
+
+// Checkbox/Toggle Icon
+const CheckIcon = ({ checked }: { checked: boolean }) => (
+  <svg 
+    width="14" 
+    height="14" 
+    viewBox="0 0 24 24" 
+    fill="none" 
+    stroke={checked ? '#10b981' : '#6b7280'} 
+    strokeWidth="3"
+    strokeLinecap="round" 
+    strokeLinejoin="round"
+  >
+    {checked && <path d="M20 6L9 17l-5-5" />}
+  </svg>
+);
+
+// Legend Item with Toggle
+function LegendItemWithToggle({ 
+  color, 
+  label, 
+  isGlow = false,
+  isLine = false,
+  colors,
+  isVisible,
+  onToggle
+}: { 
+  color: string; 
+  label: string;
+  isGlow?: boolean;
+  isLine?: boolean;
+  colors: ThemeColors;
+  isVisible: boolean;
+  onToggle: () => void;
+}) {
+  return (
+    <button 
+      onClick={onToggle}
+      className="group cursor-pointer transition-all hover:bg-white/5 w-full"
+      style={{ 
+        display: 'flex', 
+        alignItems: 'center', 
+        gap: '8px', 
+        padding: '6px 8px',
+        borderRadius: '8px',
+        opacity: isVisible ? 1 : 0.4,
+      }}
+      title={isVisible ? `Click to hide ${label}` : `Click to show ${label}`}
+    >
+      {/* Toggle checkbox */}
+      <div 
+        className="flex-shrink-0 w-5 h-5 rounded border-2 flex items-center justify-center transition-colors"
+        style={{ 
+          borderColor: isVisible ? '#10b981' : colors.panelBorder,
+          backgroundColor: isVisible ? `${color}20` : 'transparent'
+        }}
+      >
+        {isVisible && (
+          <svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke={color} strokeWidth="3">
+            <path d="M20 6L9 17l-5-5" strokeLinecap="round" strokeLinejoin="round" />
+          </svg>
+        )}
+      </div>
+      
+      {isLine ? (
+        <span 
+          className="w-10 h-1 rounded-full flex-shrink-0" 
+          style={{ backgroundColor: color }} 
+        />
+      ) : (
+        <span 
+          className={`w-4 h-4 rounded-full flex-shrink-0 ${isGlow ? 'shadow-lg' : ''}`}
+          style={{ 
+            backgroundColor: color, 
+            boxShadow: isGlow && isVisible ? `0 0 10px ${color}90` : 'none' 
+          }} 
+        />
+      )}
+      <span 
+        className="text-sm font-medium transition-colors leading-tight"
+        style={{ color: colors.textMuted }}
+      >
+        {label}
+      </span>
+    </button>
+  );
+}
+
+// Regular Legend Item (non-toggleable)
+function LegendItem({ 
+  color, 
+  label, 
+  isGlow = false,
+  isLine = false,
+  colors
+}: { 
+  color: string; 
+  label: string;
+  isGlow?: boolean;
+  isLine?: boolean;
+  colors: ThemeColors;
+}) {
+  return (
+    <div 
+      className="group cursor-default transition-all hover:bg-white/5"
+      style={{ 
+        display: 'flex', 
+        alignItems: 'center', 
+        gap: '8px', 
+        padding: '6px 0',
+        borderRadius: '8px'
+      }}
+    >
+      {isLine ? (
+        <span 
+          className="w-10 h-1 rounded-full transition-transform group-hover:scale-y-150 flex-shrink-0" 
+          style={{ backgroundColor: color }} 
+        />
+      ) : (
+        <span 
+          className={`w-4 h-4 rounded-full transition-transform group-hover:scale-125 flex-shrink-0 ${isGlow ? 'shadow-lg' : ''}`}
+          style={{ 
+            backgroundColor: color, 
+            boxShadow: isGlow ? `0 0 10px ${color}90` : 'none' 
+          }} 
+        />
+      )}
+      <span 
+        className="text-sm font-medium transition-colors leading-tight"
+        style={{ color: colors.textMuted }}
+      >
+        {label}
+      </span>
+    </div>
+  );
+}
+
+interface LegendPanelProps {
+  colors: ThemeColors;
+  visibleSeverities: Set<SeverityLevel>;
+  visibleEdgeTypes: Set<EdgeType>;
+  onToggleSeverity: (severity: SeverityLevel) => void;
+  onToggleEdgeType: (edgeType: EdgeType) => void;
+}
+
+export function LegendPanel({ 
+  colors, 
+  visibleSeverities, 
+  visibleEdgeTypes,
+  onToggleSeverity,
+  onToggleEdgeType 
+}: LegendPanelProps) {
+  // Get visible counts - exclude 'default' (No Issues) from count
+  const visibleSeverityCount = visibleSeverities.size;
+  const totalSeverities = Object.keys(severityColors).length - 1; // -1 for 'default'
+  const visibleEdgeCount = visibleEdgeTypes.size;
+  const totalEdgeTypes = Object.keys(edgeColors).filter(k => k !== 'default' && k !== 'reference').length;
+
+  return (
+    <div style={{ padding: '16px 16px', animation: 'fadeIn 0.2s ease-in' }}>
+      <div style={{ display: 'flex', flexDirection: 'column', gap: '20px' }}>
+        {/* Header */}
+        <div style={{ paddingBottom: '16px', borderBottom: `1px solid ${colors.cardBorder}` }}>
+          <h2 
+            className="text-base font-bold tracking-wide" 
+            style={{ color: colors.text }}
+          >
+            Legend
+          </h2>
+        </div>
+
+        {/* Severity Legend with Toggles */}
+        <div style={{ display: 'flex', flexDirection: 'column', gap: '8px' }}>
+          <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', marginBottom: '4px' }}>
+            <h3 
+              className="text-xs font-bold uppercase tracking-widest" 
+              style={{ color: colors.textMuted }}
+            >
+              Severity
+            </h3>
+            <span 
+              className="text-xs font-medium" 
+              style={{ color: visibleSeverityCount === totalSeverities ? '#10b981' : '#f59e0b' }}
+            >
+              {visibleSeverityCount}/{totalSeverities}
+            </span>
+          </div>
+          <div style={{ display: 'flex', flexDirection: 'column', gap: '4px' }}>
+            {Object.entries(severityColors)
+              .filter(([key]) => key !== 'default') // Filter out "No Issues" - not useful for visualization
+              .map(([key, color]) => (
+                <LegendItemWithToggle 
+                  key={key}
+                  color={color}
+                  label={key.charAt(0).toUpperCase() + key.slice(1)}
+                  isGlow={key !== 'default'}
+                  colors={colors}
+                  isVisible={visibleSeverities.has(key as SeverityLevel)}
+                  onToggle={() => onToggleSeverity(key as SeverityLevel)}
+                />
+              ))}
+          </div>
+        </div>
+
+        {/* Connections Legend with Toggles */}
+        <div style={{ display: 'flex', flexDirection: 'column', gap: '8px' }}>
+          <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', marginBottom: '4px' }}>
+            <h3 
+              className="text-xs font-bold uppercase tracking-widest" 
+              style={{ color: colors.textMuted }}
+            >
+              Connections
+            </h3>
+            <span 
+              className="text-xs font-medium" 
+              style={{ color: visibleEdgeCount === totalEdgeTypes ? '#10b981' : '#f59e0b' }}
+            >
+              {visibleEdgeCount}/{totalEdgeTypes}
+            </span>
+          </div>
+          <div style={{ display: 'flex', flexDirection: 'column', gap: '4px' }}>
+            {Object.entries(edgeColors)
+              .filter(([k]) => k !== 'default' && k !== 'reference')
+              .map(([key, color]) => (
+                <LegendItemWithToggle 
+                  key={key}
+                  color={color}
+                  label={key.charAt(0).toUpperCase() + key.slice(1)}
+                  isLine
+                  colors={colors}
+                  isVisible={visibleEdgeTypes.has(key as EdgeType)}
+                  onToggle={() => onToggleEdgeType(key as EdgeType)}
+                />
+              ))}
+          </div>
+        </div>
+
+        {/* Node Size Info */}
+        <div style={{ display: 'flex', flexDirection: 'column', gap: '12px' }}>
+          <h3 
+            className="text-xs font-bold uppercase tracking-widest" 
+            style={{ color: colors.textMuted, marginBottom: '4px' }}
+          >
+            Node Size
+          </h3>
+          <div style={{ display: 'flex', flexDirection: 'column', gap: '12px' }}>
+            <p 
+              className="text-xs leading-relaxed" 
+              style={{ color: colors.textMuted }}
+            >
+              Larger nodes indicate higher <span className="text-cyan-400 font-medium">token cost</span> and more <span className="text-purple-400 font-medium">issues</span>.
+            </p>
+            <div className="flex items-center gap-3">
+              <div className="flex -space-x-2">
+                <span className="w-3 h-3 rounded-full bg-cyan-400 border-2" style={{ borderColor: colors.panel }} />
+                <span className="w-5 h-5 rounded-full bg-cyan-400 border-2" style={{ borderColor: colors.panel }} />
+                <span className="w-7 h-7 rounded-full bg-cyan-400 border-2" style={{ borderColor: colors.panel }} />
+              </div>
+              <span className="text-xs" style={{ color: colors.textMuted }}>→</span>
+              <span className="text-xs font-medium" style={{ color: colors.text }}>More Impact</span>
+            </div>
+          </div>
+        </div>
+
+        {/* Quick Tips */}
+        <div 
+          className="p-4 rounded-xl"
+          style={{ 
+            backgroundColor: `${colors.cardBg}80`
+          }}
+        >
+          <p 
+            className="text-xs leading-relaxed" 
+            style={{ color: colors.textMuted }}
+          >
+            <span className="font-semibold text-amber-400">💡 Tip:</span> Click and drag nodes to rearrange. Scroll to zoom. Toggle items above to filter.
+          </p>
+        </div>
+      </div>
+    </div>
+  );
+}

package/web/src/components/LoadingSpinner.tsx

@@ -0,0 +1,19 @@
+import { ThemeColors } from '../types';
+
+interface LoadingSpinnerProps {
+  colors: ThemeColors;
+}
+
+export function LoadingSpinner({ colors }: LoadingSpinnerProps) {
+  return (
+    <div className="flex h-screen items-center justify-center" style={{ backgroundColor: colors.bg, color: colors.text }}>
+      <div className="text-center">
+        <div 
+          className="animate-spin rounded-full h-12 w-12 border-b-2 mx-auto mb-4" 
+          style={{ borderColor: colors.text }}
+        />
+        <p>Loading visualization...</p>
+      </div>
+    </div>
+  );
+}

package/web/src/components/Navbar.tsx

@@ -0,0 +1,169 @@
+import { ThemeColors, GraphData, Theme } from '../types';
+
+// Icons as inline SVG components for the theme toggle
+const SunIcon = ({ className }: { className?: string }) => (
+  <svg 
+    className={className}
+    width="16" 
+    height="16" 
+    viewBox="0 0 24 24" 
+    fill="none" 
+    stroke="currentColor" 
+    strokeWidth="2" 
+    strokeLinecap="round" 
+    strokeLinejoin="round"
+  >
+    <circle cx="12" cy="12" r="4" />
+    <path d="M12 2v2" />
+    <path d="M12 20v2" />
+    <path d="m4.93 4.93 1.41 1.41" />
+    <path d="m17.66 17.66 1.41 1.41" />
+    <path d="M2 12h2" />
+    <path d="M20 12h2" />
+    <path d="m6.34 17.66-1.41 1.41" />
+    <path d="m19.07 4.93-1.41 1.41" />
+  </svg>
+);
+
+const MoonIcon = ({ className }: { className?: string }) => (
+  <svg 
+    className={className}
+    width="16" 
+    height="16" 
+    viewBox="0 0 24 24" 
+    fill="none" 
+    stroke="currentColor" 
+    strokeWidth="2" 
+    strokeLinecap="round" 
+    strokeLinejoin="round"
+  >
+    <path d="M12 3a6 6 0 0 0 9 9 9 9 0 1 1-9-9Z" />
+  </svg>
+);
+
+const SystemIcon = ({ className }: { className?: string }) => (
+  <svg 
+    className={className}
+    width="16" 
+    height="16" 
+    viewBox="0 0 24 24" 
+    fill="none" 
+    stroke="currentColor" 
+    strokeWidth="2" 
+    strokeLinecap="round" 
+    strokeLinejoin="round"
+  >
+    <rect width="20" height="14" x="2" y="3" rx="2" />
+    <path d="M8 21h8" />
+    <path d="M12 17v4" />
+  </svg>
+);
+
+interface NavbarProps {
+  colors: ThemeColors;
+  theme: Theme;
+  setTheme: (theme: Theme) => void;
+  data: GraphData | null;
+}
+
+export function Navbar({ colors, theme, setTheme, data }: NavbarProps) {
+  return (
+    <nav 
+      className="h-16 backdrop-blur-md border-b flex items-center justify-between px-6 z-50 relative"
+      style={{ 
+        backgroundColor: `${colors.panel}f5`, 
+        borderColor: colors.panelBorder 
+      }}
+    >
+      {/* Subtle gradient overlay */}
+      <div 
+        className="absolute inset-0 pointer-events-none"
+        style={{
+          background: `linear-gradient(90deg, ${colors.panel}80 0%, transparent 50%, ${colors.panel}80 100%)`,
+        }}
+      />
+      
+      <div className="flex items-center gap-5 relative z-10">
+        <div className="flex items-center justify-center">
+          <img 
+            src="/logo-transparent-bg.png" 
+            alt="AIReady" 
+            className="h-9 w-auto" 
+          />
+        </div>
+        <div 
+          className="h-7 w-px" 
+          style={{ backgroundColor: colors.panelBorder }} 
+        />
+        <h1 
+          className="text-sm font-semibold tracking-wide uppercase" 
+          style={{ color: colors.textMuted }}
+        >
+          Codebase
+        </h1>
+      </div>
+
+      <div className="flex items-center gap-6 relative z-10">
+        {/* Modern Theme Toggle */}
+        <div className="flex items-center rounded-lg border px-4 py-3" style={{ borderColor: colors.panelBorder, backgroundColor: `${colors.panel}80`, gap: '12px' }}>
+          {[
+            { key: 'dark', icon: MoonIcon, label: 'Dark' },
+            { key: 'light', icon: SunIcon, label: 'Light' },
+            { key: 'system', icon: SystemIcon, label: 'System' },
+          ].map(({ key, icon: Icon, label }) => (
+            <button
+              key={key}
+              onClick={() => setTheme(key as Theme)}
+              className="group flex items-center rounded-md text-xs font-medium transition-all duration-200"
+              style={{
+                backgroundColor: theme === key ? colors.cardBg : 'transparent',
+                color: theme === key ? colors.text : colors.textMuted,
+                border: `1px solid ${theme === key ? colors.cardBorder : 'transparent'}`,
+                padding: '8px 16px',
+                gap: '8px',
+              }}
+              title={`Switch to ${label} theme`}
+            >
+              <Icon 
+                className="transition-transform duration-200"
+                style={{ transform: theme === key ? 'scale(1.1)' : 'scale(1)' }}
+              />
+              <span>{label}</span>
+            </button>
+          ))}
+        </div>
+
+        {data && (
+          <div className="flex items-center" style={{ gap: '12px' }}>
+            <div 
+              className="rounded-lg border text-xs font-medium flex items-center"
+              style={{ 
+                backgroundColor: `${colors.cardBg}cc`, 
+                borderColor: colors.cardBorder,
+                padding: '8px 14px',
+                gap: '8px',
+              }}
+            >
+              <span className="w-2 h-2 rounded-full bg-cyan-400 animate-pulse" />
+              <span style={{ color: colors.textMuted }}>Files</span>
+              <span style={{ color: colors.text }}>{data.nodes.length}</span>
+            </div>
+            <div 
+              className="rounded-lg border text-xs font-medium flex items-center"
+              style={{ 
+                backgroundColor: `${colors.cardBg}cc`, 
+                borderColor: colors.cardBorder,
+                padding: '8px 14px',
+                gap: '8px',
+              }}
+            >
+              <span className="w-2 h-2 rounded-full bg-purple-400" />
+              <span style={{ color: colors.textMuted }}>Links</span>
+              <span style={{ color: colors.text }}>{data.edges.length}</span>
+            </div>
+          </div>
+        )}
+      </div>
+    </nav>
+  );
+}

package/web/src/components/NodeDetails.tsx

@@ -0,0 +1,210 @@
+import { ThemeColors, FileNode } from '../types';
+
+// Info Row Component for consistent styling
+function InfoRow({ 
+  label, 
+  value, 
+  valueColor = 'inherit',
+  highlight = false,
+  colors
+}: { 
+  label: string; 
+  value: string | number;
+  valueColor?: string;
+  highlight?: boolean;
+  colors: ThemeColors;
+}) {
+  return (
+    <div 
+      className="flex justify-between items-center py-2.5 px-3 rounded-lg transition-colors hover:bg-white/5"
+    >
+      <span 
+        className="text-xs font-medium"
+        style={{ color: colors.textMuted }}
+      >
+        {label}
+      </span>
+      <span 
+        className={`text-xs font-semibold ${highlight ? 'px-3 py-1 rounded-full' : ''}`}
+        style={{ 
+          color: valueColor,
+          backgroundColor: highlight ? `${valueColor}25` : 'transparent'
+        }}
+      >
+        {value}
+      </span>
+    </div>
+  );
+}
+
+interface NodeDetailsProps {
+  colors: ThemeColors;
+  selectedNode: FileNode | null;
+  onClose?: () => void;
+}
+
+export function NodeDetails({ colors, selectedNode, onClose }: NodeDetailsProps) {
+  return (
+    <div 
+      style={{ 
+        padding: '16px 16px',
+        height: '100%',
+        overflowY: 'auto',
+        overflowX: 'hidden',
+        animation: 'fadeIn 0.2s ease-in'
+      }}
+    >
+      {/* Header */}
+      <div className="flex justify-between items-center" style={{ marginBottom: '16px' }}>
+        <div className="flex items-center gap-2">
+          <div 
+            className="w-2 h-2 rounded-full bg-cyan-400 animate-pulse" 
+          />
+          <h3 
+            className="text-xs font-bold uppercase tracking-widest" 
+            style={{ color: colors.textMuted }}
+          >
+            Selected Node
+          </h3>
+        </div>
+        {onClose && (
+          <button 
+            onClick={onClose}
+            className="p-2 rounded-lg hover:bg-white/10 transition-colors"
+            style={{ color: colors.textMuted }}
+            title="Close details"
+          >
+            <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2">
+              <path d="M18 6L6 18M6 6l12 12" />
+            </svg>
+          </button>
+        )}
+      </div>
+      
+      {selectedNode ? (
+        <div style={{ display: 'flex', flexDirection: 'column', gap: '16px' }}>
+          {/* File Name - No border, just padding */}
+          <div className="p-4 rounded-xl" 
+            style={{ 
+              backgroundColor: `${colors.cardBg}80`
+            }}
+          >
+            <div className="flex items-center gap-2 mb-2">
+              <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" className="text-amber-400">
+                <path d="M14.5 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V7.5L14.5 2z" />
+                <polyline points="14,2 14,8 20,8" />
+              </svg>
+              <h4 className="font-semibold text-sm truncate" style={{ color: colors.text }}>
+                {selectedNode.label}
+              </h4>
+            </div>
+            <p 
+              className="text-xs break-all truncate" 
+              style={{ color: colors.textMuted }}
+              title={selectedNode.id}
+            >
+              {selectedNode.id}
+            </p>
+          </div>
+          
+          {/* Metrics - No border */}
+          <div className="rounded-xl p-1">
+            <div className="px-3 py-2">
+              <span className="text-xs font-semibold uppercase tracking-wider" style={{ color: colors.textMuted }}>
+                Metrics
+              </span>
+            </div>
+            <div className="p-1">
+              <InfoRow 
+                label="Severity" 
+                value={selectedNode.severity || 'none'} 
+                valueColor={selectedNode.color}
+                highlight
+                colors={colors}
+              />
+              <InfoRow 
+                label="Token Cost" 
+                value={selectedNode.tokenCost?.toLocaleString() || '0'} 
+                valueColor="#22d3ee"
+                colors={colors}
+              />
+              {selectedNode.duplicates !== undefined && (
+                <InfoRow 
+                  label="Issues Found" 
+                  value={selectedNode.duplicates} 
+                  valueColor="#c084fc"
+                  colors={colors}
+                />
+              )}
+            </div>
+          </div>
+          
+          {/* Description/Details - No border */}
+          {selectedNode.title && (
+            <div 
+              className="rounded-xl p-4"
+              style={{ 
+                backgroundColor: `${colors.cardBg}80`
+              }}
+            >
+              <div className="flex items-center gap-2 mb-3">
+                <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" style={{ color: colors.textMuted }}>
+                  <circle cx="12" cy="12" r="10" />
+                  <path d="M12 16v-4M12 8h.01" />
+                </svg>
+                <h5 
+                  className="text-xs font-semibold uppercase tracking-wider" 
+                  style={{ color: colors.textMuted }}
+                >
+                  Details
+                </h5>
+              </div>
+              <pre 
+                className="text-xs whitespace-pre-wrap font-mono leading-relaxed p-3 rounded-lg"
+                style={{ 
+                  color: colors.textMuted,
+                  backgroundColor: colors.panel,
+                  overflow: 'auto'
+                }}
+              >
+                {selectedNode.title}
+              </pre>
+            </div>
+          )}
+        </div>
+      ) : (
+        <div 
+          className="flex flex-col items-center justify-center py-10 text-center rounded-xl"
+          style={{ 
+            backgroundColor: `${colors.cardBg}50`
+          }}
+        >
+          <svg 
+            width="48" 
+            height="48" 
+            viewBox="0 0 24 24" 
+            fill="none" 
+            stroke="currentColor" 
+            strokeWidth="1.5"
+            className="mb-3 opacity-40"
+            style={{ color: colors.textMuted }}
+          >
+            <circle cx="11" cy="11" r="8" />
+            <path d="m21 21-4.3-4.3" />
+          </svg>
+          <p 
+            className="text-sm font-medium" 
+            style={{ color: colors.textMuted }}
+          >
+            Click a node to view details
+          </p>
+        </div>
+      )}
+    </div>
+  );
+}
+
+// Keep the old component for backwards compatibility
+export function NodeDetailsOld({ colors, selectedNode }: NodeDetailsProps) {
+  return <NodeDetails colors={colors} selectedNode={selectedNode} />;
+}

package/web/src/components/index.ts

@@ -0,0 +1,6 @@
+export { LoadingSpinner } from './LoadingSpinner';
+export { ErrorDisplay } from './ErrorDisplay';
+export { Navbar } from './Navbar';
+export { LegendPanel } from './LegendPanel';
+export { NodeDetails } from './NodeDetails';
+export { GraphCanvas } from './GraphCanvas';