@aiready/visualizer 0.1.37 → 0.1.38

package/web/src/components/LegendPanel.tsx

@@ -1,16 +1,21 @@
-import { ThemeColors, SeverityLevel, EdgeType, BusinessMetrics } from '../types';
+import {
+  ThemeColors,
+  SeverityLevel,
+  EdgeType,
+  BusinessMetrics,
+} 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'} 
+  <svg
+    width="14"
+    height="14"
+    viewBox="0 0 24 24"
+    fill="none"
+    stroke={checked ? '#10b981' : '#6b7280'}
     strokeWidth="3"
-    strokeLinecap="round" 
+    strokeLinecap="round"
     strokeLinejoin="round"
   >
     {checked && <path d="M20 6L9 17l-5-5" />}
@@ -18,16 +23,16 @@ const CheckIcon = ({ checked }: { checked: boolean }) => (
 );
 
 // Legend Item with Toggle
-function LegendItemWithToggle({ 
-  color, 
-  label, 
+function LegendItemWithToggle({
+  color,
+  label,
   isGlow = false,
   isLine = false,
   colors,
   isVisible,
-  onToggle
-}: { 
-  color: string; 
+  onToggle,
+}: {
+  color: string;
   label: string;
   isGlow?: boolean;
   isLine?: boolean;
@@ -36,13 +41,13 @@ function LegendItemWithToggle({
   onToggle: () => void;
 }) {
   return (
-    <button 
+    <button
       onClick={onToggle}
       className="group cursor-pointer transition-all hover:bg-white/5 w-full"
-      style={{ 
-        display: 'flex', 
-        alignItems: 'center', 
-        gap: '8px', 
+      style={{
+        display: 'flex',
+        alignItems: 'center',
+        gap: '8px',
         padding: '6px 8px',
         borderRadius: '8px',
         opacity: isVisible ? 1 : 0.4,
@@ -50,35 +55,46 @@ function LegendItemWithToggle({
       title={isVisible ? `Click to hide ${label}` : `Click to show ${label}`}
     >
       {/* Toggle checkbox */}
-      <div 
+      <div
         className="flex-shrink-0 w-5 h-5 rounded border-2 flex items-center justify-center transition-colors"
-        style={{ 
+        style={{
           borderColor: isVisible ? '#10b981' : colors.panelBorder,
-          backgroundColor: isVisible ? `${color}20` : 'transparent'
+          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
+            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-10 h-1 rounded-full flex-shrink-0"
+          style={{ backgroundColor: color }}
         />
       ) : (
-        <span 
+        <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' 
-          }} 
+          style={{
+            backgroundColor: color,
+            boxShadow: isGlow && isVisible ? `0 0 10px ${color}90` : 'none',
+          }}
         />
       )}
-      <span 
+      <span
         className="text-sm font-medium transition-colors leading-tight"
         style={{ color: colors.textMuted }}
       >
@@ -89,45 +105,45 @@ function LegendItemWithToggle({
 }
 
 // Regular Legend Item (non-toggleable)
-function LegendItem({ 
-  color, 
-  label, 
+function LegendItem({
+  color,
+  label,
   isGlow = false,
   isLine = false,
-  colors
-}: { 
-  color: string; 
+  colors,
+}: {
+  color: string;
   label: string;
   isGlow?: boolean;
   isLine?: boolean;
   colors: ThemeColors;
 }) {
   return (
-    <div 
+    <div
       className="group cursor-default transition-all hover:bg-white/5"
-      style={{ 
-        display: 'flex', 
-        alignItems: 'center', 
-        gap: '8px', 
+      style={{
+        display: 'flex',
+        alignItems: 'center',
+        gap: '8px',
         padding: '6px 0',
-        borderRadius: '8px'
+        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-10 h-1 rounded-full transition-transform group-hover:scale-y-150 flex-shrink-0"
+          style={{ backgroundColor: color }}
         />
       ) : (
-        <span 
+        <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' 
-          }} 
+          style={{
+            backgroundColor: color,
+            boxShadow: isGlow ? `0 0 10px ${color}90` : 'none',
+          }}
         />
       )}
-      <span 
+      <span
         className="text-sm font-medium transition-colors leading-tight"
         style={{ color: colors.textMuted }}
       >
@@ -146,9 +162,9 @@ interface LegendPanelProps {
   metadata?: BusinessMetrics;
 }
 
-export function LegendPanel({ 
-  colors, 
-  visibleSeverities, 
+export function LegendPanel({
+  colors,
+  visibleSeverities,
   visibleEdgeTypes,
   onToggleSeverity,
   onToggleEdgeType,
@@ -158,15 +174,22 @@ export function LegendPanel({
   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;
+  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" 
+        <div
+          style={{
+            paddingBottom: '16px',
+            borderBottom: `1px solid ${colors.cardBorder}`,
+          }}
+        >
+          <h2
+            className="text-base font-bold tracking-wide"
             style={{ color: colors.text }}
           >
             Legend
@@ -175,16 +198,28 @@ export function LegendPanel({
 
         {/* 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" 
+          <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' }}
+            <span
+              className="text-xs font-medium"
+              style={{
+                color:
+                  visibleSeverityCount === totalSeverities
+                    ? '#10b981'
+                    : '#f59e0b',
+              }}
             >
               {visibleSeverityCount}/{totalSeverities}
             </span>
@@ -193,7 +228,7 @@ export function LegendPanel({
             {Object.entries(severityColors)
               .filter(([key]) => key !== 'default') // Filter out "No Issues" - not useful for visualization
               .map(([key, color]) => (
-                <LegendItemWithToggle 
+                <LegendItemWithToggle
                   key={key}
                   color={color}
                   label={key.charAt(0).toUpperCase() + key.slice(1)}
@@ -208,16 +243,26 @@ export function LegendPanel({
 
         {/* 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" 
+          <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' }}
+            <span
+              className="text-xs font-medium"
+              style={{
+                color:
+                  visibleEdgeCount === totalEdgeTypes ? '#10b981' : '#f59e0b',
+              }}
             >
               {visibleEdgeCount}/{totalEdgeTypes}
             </span>
@@ -226,7 +271,7 @@ export function LegendPanel({
             {Object.entries(edgeColors)
               .filter(([k]) => k !== 'default' && k !== 'reference')
               .map(([key, color]) => (
-                <LegendItemWithToggle 
+                <LegendItemWithToggle
                   key={key}
                   color={color}
                   label={key.charAt(0).toUpperCase() + key.slice(1)}
@@ -241,93 +286,151 @@ export function LegendPanel({
 
         {/* Node Size Info */}
         <div style={{ display: 'flex', flexDirection: 'column', gap: '12px' }}>
-          <h3 
-            className="text-xs font-bold uppercase tracking-widest" 
+          <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" 
+          <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>.
+              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 }} />
+                <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>
+              <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>
 
         {/* Business Impact Section */}
-        {metadata && (metadata.estimatedMonthlyCost || metadata.estimatedDeveloperHours || metadata.aiAcceptanceRate) && (
-          <div style={{ display: 'flex', flexDirection: 'column', gap: '8px' }}>
-            <h3 
-              className="text-xs font-bold uppercase tracking-widest" 
-              style={{ color: colors.textMuted, marginBottom: '4px' }}
+        {metadata &&
+          (metadata.estimatedMonthlyCost ||
+            metadata.estimatedDeveloperHours ||
+            metadata.aiAcceptanceRate) && (
+            <div
+              style={{ display: 'flex', flexDirection: 'column', gap: '8px' }}
             >
-              Business Impact
-            </h3>
-            <div 
-              className="p-3 rounded-xl" 
-              style={{ backgroundColor: `${colors.cardBg}80`, display: 'flex', flexDirection: 'column', gap: '6px' }}
-            >
-              {metadata.estimatedMonthlyCost !== undefined && (
-                <div className="flex justify-between items-center py-1 px-2 rounded-lg hover:bg-white/5 transition-colors">
-                  <span className="text-xs font-medium" style={{ color: colors.textMuted }}>💰 Monthly Cost</span>
-                  <span className="text-xs font-bold" style={{ color: '#f59e0b' }}>
-                    {metadata.estimatedMonthlyCost >= 1000
-                      ? `$${(metadata.estimatedMonthlyCost / 1000).toFixed(1)}k`
-                      : `$${metadata.estimatedMonthlyCost.toFixed(0)}`}
-                  </span>
-                </div>
-              )}
-              {metadata.estimatedDeveloperHours !== undefined && (
-                <div className="flex justify-between items-center py-1 px-2 rounded-lg hover:bg-white/5 transition-colors">
-                  <span className="text-xs font-medium" style={{ color: colors.textMuted }}>⏱️ Fix Time</span>
-                  <span className="text-xs font-bold" style={{ color: '#22d3ee' }}>
-                    {metadata.estimatedDeveloperHours >= 40
-                      ? `${(metadata.estimatedDeveloperHours / 40).toFixed(1)}w`
-                      : `${metadata.estimatedDeveloperHours.toFixed(1)}h`}
-                  </span>
-                </div>
-              )}
-              {metadata.aiAcceptanceRate !== undefined && (
-                <div className="flex justify-between items-center py-1 px-2 rounded-lg hover:bg-white/5 transition-colors">
-                  <span className="text-xs font-medium" style={{ color: colors.textMuted }}>🤖 AI Acceptance</span>
-                  <span 
-                    className="text-xs font-bold"
-                    style={{ 
-                      color: metadata.aiAcceptanceRate >= 0.7 ? '#4ade80' : metadata.aiAcceptanceRate >= 0.5 ? '#fb923c' : '#f87171' 
-                    }}
-                  >
-                    {Math.round(metadata.aiAcceptanceRate * 100)}%
-                  </span>
-                </div>
-              )}
+              <h3
+                className="text-xs font-bold uppercase tracking-widest"
+                style={{ color: colors.textMuted, marginBottom: '4px' }}
+              >
+                Business Impact
+              </h3>
+              <div
+                className="p-3 rounded-xl"
+                style={{
+                  backgroundColor: `${colors.cardBg}80`,
+                  display: 'flex',
+                  flexDirection: 'column',
+                  gap: '6px',
+                }}
+              >
+                {metadata.estimatedMonthlyCost !== undefined && (
+                  <div className="flex justify-between items-center py-1 px-2 rounded-lg hover:bg-white/5 transition-colors">
+                    <span
+                      className="text-xs font-medium"
+                      style={{ color: colors.textMuted }}
+                    >
+                      💰 Monthly Cost
+                    </span>
+                    <span
+                      className="text-xs font-bold"
+                      style={{ color: '#f59e0b' }}
+                    >
+                      {metadata.estimatedMonthlyCost >= 1000
+                        ? `$${(metadata.estimatedMonthlyCost / 1000).toFixed(1)}k`
+                        : `$${metadata.estimatedMonthlyCost.toFixed(0)}`}
+                    </span>
+                  </div>
+                )}
+                {metadata.estimatedDeveloperHours !== undefined && (
+                  <div className="flex justify-between items-center py-1 px-2 rounded-lg hover:bg-white/5 transition-colors">
+                    <span
+                      className="text-xs font-medium"
+                      style={{ color: colors.textMuted }}
+                    >
+                      ⏱️ Fix Time
+                    </span>
+                    <span
+                      className="text-xs font-bold"
+                      style={{ color: '#22d3ee' }}
+                    >
+                      {metadata.estimatedDeveloperHours >= 40
+                        ? `${(metadata.estimatedDeveloperHours / 40).toFixed(1)}w`
+                        : `${metadata.estimatedDeveloperHours.toFixed(1)}h`}
+                    </span>
+                  </div>
+                )}
+                {metadata.aiAcceptanceRate !== undefined && (
+                  <div className="flex justify-between items-center py-1 px-2 rounded-lg hover:bg-white/5 transition-colors">
+                    <span
+                      className="text-xs font-medium"
+                      style={{ color: colors.textMuted }}
+                    >
+                      🤖 AI Acceptance
+                    </span>
+                    <span
+                      className="text-xs font-bold"
+                      style={{
+                        color:
+                          metadata.aiAcceptanceRate >= 0.7
+                            ? '#4ade80'
+                            : metadata.aiAcceptanceRate >= 0.5
+                              ? '#fb923c'
+                              : '#f87171',
+                      }}
+                    >
+                      {Math.round(metadata.aiAcceptanceRate * 100)}%
+                    </span>
+                  </div>
+                )}
+              </div>
             </div>
-          </div>
-        )}
+          )}
 
         {/* Quick Tips */}
-        <div 
+        <div
           className="p-4 rounded-xl"
-          style={{ 
-            backgroundColor: `${colors.cardBg}80`
+          style={{
+            backgroundColor: `${colors.cardBg}80`,
           }}
         >
-          <p 
-            className="text-xs leading-relaxed" 
+          <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.
+            <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>

package/web/src/components/LoadingSpinner.tsx

@@ -6,10 +6,13 @@ interface LoadingSpinnerProps {
 
 export function LoadingSpinner({ colors }: LoadingSpinnerProps) {
   return (
-    <div className="flex h-screen items-center justify-center" style={{ backgroundColor: colors.bg, color: colors.text }}>
+    <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" 
+        <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>