@aiready/visualizer 0.1.37 → 0.1.40

package/web/src/components/Navbar.tsx

@@ -2,15 +2,15 @@ import { ThemeColors, GraphData, Theme, BusinessMetrics } from '../types';
 
 // Icons as inline SVG components for the theme toggle
 const SunIcon = ({ className }: { className?: string }) => (
-  <svg 
+  <svg
     className={className}
-    width="16" 
-    height="16" 
-    viewBox="0 0 24 24" 
-    fill="none" 
-    stroke="currentColor" 
-    strokeWidth="2" 
-    strokeLinecap="round" 
+    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" />
@@ -26,15 +26,15 @@ const SunIcon = ({ className }: { className?: string }) => (
 );
 
 const MoonIcon = ({ className }: { className?: string }) => (
-  <svg 
+  <svg
     className={className}
-    width="16" 
-    height="16" 
-    viewBox="0 0 24 24" 
-    fill="none" 
-    stroke="currentColor" 
-    strokeWidth="2" 
-    strokeLinecap="round" 
+    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" />
@@ -42,15 +42,15 @@ const MoonIcon = ({ className }: { className?: string }) => (
 );
 
 const SystemIcon = ({ className }: { className?: string }) => (
-  <svg 
+  <svg
     className={className}
-    width="16" 
-    height="16" 
-    viewBox="0 0 24 24" 
-    fill="none" 
-    stroke="currentColor" 
-    strokeWidth="2" 
-    strokeLinecap="round" 
+    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" />
@@ -67,37 +67,43 @@ interface NavbarProps {
   metadata?: BusinessMetrics;
 }
 
-export function Navbar({ colors, theme, setTheme, data, metadata }: NavbarProps) {
+export function Navbar({
+  colors,
+  theme,
+  setTheme,
+  data,
+  metadata,
+}: NavbarProps) {
   return (
-    <nav 
+    <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 
+      style={{
+        backgroundColor: `${colors.panel}f5`,
+        borderColor: colors.panelBorder,
       }}
     >
       {/* Subtle gradient overlay */}
-      <div 
+      <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" 
+          <img
+            src="/logo-transparent-bg.png"
+            alt="AIReady"
+            className="h-9 w-auto"
           />
         </div>
-        <div 
-          className="h-7 w-px" 
-          style={{ backgroundColor: colors.panelBorder }} 
+        <div
+          className="h-7 w-px"
+          style={{ backgroundColor: colors.panelBorder }}
         />
-        <h1 
-          className="text-sm font-semibold tracking-wide uppercase" 
+        <h1
+          className="text-sm font-semibold tracking-wide uppercase"
           style={{ color: colors.textMuted }}
         >
           Codebase
@@ -106,7 +112,14 @@ export function Navbar({ colors, theme, setTheme, data, metadata }: NavbarProps)
 
       <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' }}>
+        <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' },
@@ -125,7 +138,7 @@ export function Navbar({ colors, theme, setTheme, data, metadata }: NavbarProps)
               }}
               title={`Switch to ${label} theme`}
             >
-              <Icon 
+              <Icon
                 className="transition-transform duration-200"
                 style={{ transform: theme === key ? 'scale(1.1)' : 'scale(1)' }}
               />
@@ -136,10 +149,10 @@ export function Navbar({ colors, theme, setTheme, data, metadata }: NavbarProps)
 
         {data && (
           <div className="flex items-center" style={{ gap: '12px' }}>
-            <div 
+            <div
               className="rounded-lg border text-xs font-medium flex items-center"
-              style={{ 
-                backgroundColor: `${colors.cardBg}cc`, 
+              style={{
+                backgroundColor: `${colors.cardBg}cc`,
                 borderColor: colors.cardBorder,
                 padding: '8px 14px',
                 gap: '8px',
@@ -149,10 +162,10 @@ export function Navbar({ colors, theme, setTheme, data, metadata }: NavbarProps)
               <span style={{ color: colors.textMuted }}>Files</span>
               <span style={{ color: colors.text }}>{data.nodes.length}</span>
             </div>
-            <div 
+            <div
               className="rounded-lg border text-xs font-medium flex items-center"
-              style={{ 
-                backgroundColor: `${colors.cardBg}cc`, 
+              style={{
+                backgroundColor: `${colors.cardBg}cc`,
                 borderColor: colors.cardBorder,
                 padding: '8px 14px',
                 gap: '8px',
@@ -163,10 +176,10 @@ export function Navbar({ colors, theme, setTheme, data, metadata }: NavbarProps)
               <span style={{ color: colors.text }}>{data.edges.length}</span>
             </div>
             {metadata?.estimatedMonthlyCost !== undefined && (
-              <div 
+              <div
                 className="rounded-lg border text-xs font-medium flex items-center"
-                style={{ 
-                  backgroundColor: `${colors.cardBg}cc`, 
+                style={{
+                  backgroundColor: `${colors.cardBg}cc`,
                   borderColor: colors.cardBorder,
                   padding: '8px 14px',
                   gap: '8px',
@@ -178,7 +191,8 @@ export function Navbar({ colors, theme, setTheme, data, metadata }: NavbarProps)
                 <span style={{ color: '#f59e0b', fontWeight: 600 }}>
                   {metadata.estimatedMonthlyCost >= 1000
                     ? `$${(metadata.estimatedMonthlyCost / 1000).toFixed(1)}k`
-                    : `$${metadata.estimatedMonthlyCost.toFixed(0)}`}/mo
+                    : `$${metadata.estimatedMonthlyCost.toFixed(0)}`}
+                  /mo
                 </span>
               </div>
             )}

package/web/src/components/NodeDetails.tsx

@@ -1,34 +1,29 @@
 import { ThemeColors, FileNode } from '../types';
 
 // Info Row Component for consistent styling
-function InfoRow({ 
-  label, 
-  value, 
+function InfoRow({
+  label,
+  value,
   valueColor = 'inherit',
   highlight = false,
-  colors
-}: { 
-  label: string; 
+  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 }}
-      >
+    <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 
+      <span
         className={`text-xs font-semibold ${highlight ? 'px-3 py-1 rounded-full' : ''}`}
-        style={{ 
+        style={{
           color: valueColor,
-          backgroundColor: highlight ? `${valueColor}25` : 'transparent'
+          backgroundColor: highlight ? `${valueColor}25` : 'transparent',
         }}
       >
         {value}
@@ -43,128 +38,163 @@ interface NodeDetailsProps {
   onClose?: () => void;
 }
 
-export function NodeDetails({ colors, selectedNode, onClose }: NodeDetailsProps) {
+export function NodeDetails({
+  colors,
+  selectedNode,
+  onClose,
+}: NodeDetailsProps) {
   return (
-    <div 
-      style={{ 
+    <div
+      style={{
         padding: '16px 16px',
         height: '100%',
         overflowY: 'auto',
         overflowX: 'hidden',
-        animation: 'fadeIn 0.2s ease-in'
+        animation: 'fadeIn 0.2s ease-in',
       }}
     >
       {/* Header */}
-      <div className="flex justify-between items-center" style={{ marginBottom: '16px' }}>
+      <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" 
+          <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 
+          <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">
+            <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="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">
+              <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 }}>
+              <h4
+                className="font-semibold text-sm truncate"
+                style={{ color: colors.text }}
+              >
                 {selectedNode.label}
               </h4>
             </div>
-            <p 
-              className="text-xs break-all truncate" 
+            <p
+              className="text-xs break-all truncate"
               style={{ color: colors.textMuted }}
               title={selectedNode.id}
             >
               {selectedNode.label}
             </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 }}>
+              <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'} 
+              <InfoRow
+                label="Severity"
+                value={selectedNode.severity || 'none'}
                 valueColor={selectedNode.color}
                 highlight
                 colors={colors}
               />
-              <InfoRow 
-                label="Token Cost" 
-                value={selectedNode.tokenCost?.toLocaleString() || '0'} 
+              <InfoRow
+                label="Token Cost"
+                value={selectedNode.tokenCost?.toLocaleString() || '0'}
                 valueColor="#22d3ee"
                 colors={colors}
               />
               {selectedNode.duplicates !== undefined && (
-                <InfoRow 
-                  label="Issues Found" 
-                  value={selectedNode.duplicates} 
+                <InfoRow
+                  label="Issues Found"
+                  value={selectedNode.duplicates}
                   valueColor="#c084fc"
                   colors={colors}
                 />
               )}
             </div>
           </div>
-          
+
           {/* Description/Details - No border */}
           {selectedNode.title && (
-            <div 
+            <div
               className="rounded-xl p-4"
-              style={{ 
-                backgroundColor: `${colors.cardBg}80`
+              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 }}>
+                <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" 
+                <h5
+                  className="text-xs font-semibold uppercase tracking-wider"
                   style={{ color: colors.textMuted }}
                 >
                   Details
                 </h5>
               </div>
-              <pre 
+              <pre
                 className="text-xs whitespace-pre-wrap font-mono leading-relaxed p-3 rounded-lg"
-                style={{ 
+                style={{
                   color: colors.textMuted,
                   backgroundColor: colors.panel,
-                  overflow: 'auto'
+                  overflow: 'auto',
                 }}
               >
                 {selectedNode.title}
@@ -173,18 +203,18 @@ export function NodeDetails({ colors, selectedNode, onClose }: NodeDetailsProps)
           )}
         </div>
       ) : (
-        <div 
+        <div
           className="flex flex-col items-center justify-center py-10 text-center rounded-xl"
-          style={{ 
-            backgroundColor: `${colors.cardBg}50`
+          style={{
+            backgroundColor: `${colors.cardBg}50`,
           }}
         >
-          <svg 
-            width="48" 
-            height="48" 
-            viewBox="0 0 24 24" 
-            fill="none" 
-            stroke="currentColor" 
+          <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 }}
@@ -192,8 +222,8 @@ export function NodeDetails({ colors, selectedNode, onClose }: NodeDetailsProps)
             <circle cx="11" cy="11" r="8" />
             <path d="m21 21-4.3-4.3" />
           </svg>
-          <p 
-            className="text-sm font-medium" 
+          <p
+            className="text-sm font-medium"
             style={{ color: colors.textMuted }}
           >
             Click a node to view details

package/web/src/hooks/useTheme.ts

@@ -3,11 +3,14 @@ import { Theme, EffectiveTheme } from '../types';
 
 export function useTheme() {
   const getSystemTheme = (): EffectiveTheme => {
-    return window.matchMedia('(prefers-color-scheme: dark)').matches ? 'dark' : 'light';
+    return window.matchMedia('(prefers-color-scheme: dark)').matches
+      ? 'dark'
+      : 'light';
   };
 
   const [theme, setTheme] = useState<Theme>('system');
-  const [systemTheme, setSystemTheme] = useState<EffectiveTheme>(getSystemTheme());
+  const [systemTheme, setSystemTheme] =
+    useState<EffectiveTheme>(getSystemTheme());
 
   useEffect(() => {
     const mediaQuery = window.matchMedia('(prefers-color-scheme: dark)');

package/web/src/main.tsx

@@ -8,4 +8,4 @@ createRoot(rootEl).render(
   <StrictMode>
     <App />
   </StrictMode>
-);
+);

package/web/src/style.css

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

package/web/src/styles/index.css

@@ -1,4 +1,4 @@
-@import "tailwindcss";
+@import 'tailwindcss';
 
 /* Base styles */
 * {
@@ -7,7 +7,9 @@
   padding: 0;
 }
 
-html, body, #root {
+html,
+body,
+#root {
   height: 100%;
   width: 100%;
   overflow: hidden;
@@ -15,9 +17,9 @@ html, body, #root {
 
 body {
   margin: 0;
-  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen',
-    'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue',
-    sans-serif;
+  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;
 }