Initial commit

src/components/MemoryProgressBar.tsx

@@ -0,0 +1,103 @@
+import { useStore } from '@nanostores/preact';
+import { $freeInternalHeap, $totalInternalHeap } from './AppProviderStore';
+
+interface MemoryProgressBarProps {
+    showDetails?: boolean;
+    className?: string;
+}
+
+export default function MemoryProgressBar({ showDetails = true, className = "" }: MemoryProgressBarProps) {
+    const freeInternalHeap = useStore($freeInternalHeap);
+    const totalInternalHeap = useStore($totalInternalHeap);
+    
+    // Calculate used and percentage
+    const usedInternalHeap = totalInternalHeap - freeInternalHeap;
+    const usagePercentage = totalInternalHeap > 0 ? (usedInternalHeap / totalInternalHeap) * 100 : 0;
+    const freePercentage = 100 - usagePercentage;
+
+    // Determine color based on usage
+    const getProgressColor = (percentage: number) => {
+        if (percentage < 50) return 'bg-green-500';
+        if (percentage < 75) return 'bg-yellow-500';
+        if (percentage < 90) return 'bg-orange-500';
+        return 'bg-red-500';
+    };
+
+    const getTextColor = (percentage: number) => {
+        if (percentage < 50) return 'text-green-600';
+        if (percentage < 75) return 'text-yellow-600';
+        if (percentage < 90) return 'text-orange-600';
+        return 'text-red-600';
+    };
+
+    const formatBytes = (bytes: number) => {
+        if (bytes === 0) return '0 B';
+        const k = 1024;
+        const sizes = ['B', 'KB', 'MB'];
+        const i = Math.floor(Math.log(bytes) / Math.log(k));
+        return parseFloat((bytes / Math.pow(k, i)).toFixed(1)) + ' ' + sizes[i];
+    };
+
+    // Create segments for the memory bar (like Linux htop)
+    const totalSegments = 20;
+    const usedSegments = Math.round((usagePercentage / 100) * totalSegments);
+    
+    const getSegmentColor = (segmentIndex: number) => {
+        if (segmentIndex >= usedSegments) return 'bg-gray-300'; // Empty
+        
+        const percentageAtSegment = (segmentIndex / totalSegments) * 100;
+        if (percentageAtSegment < 50) return 'bg-green-500';
+        if (percentageAtSegment < 75) return 'bg-yellow-500';
+        if (percentageAtSegment < 90) return 'bg-orange-500';
+        return 'bg-red-500';
+    };
+
+    return (
+        <div className={`space-y-2 ${className}`}>
+            {/* Linux-style Memory Bar with segments */}
+            <div className="flex items-center space-x-3">
+                <div className="flex-1">
+                    <div className="flex items-center justify-between mb-1">
+                        <span className="text-sm font-medium text-gray-700">Internal Heap</span>
+                        <div className="text-right">
+                            <span className={`text-sm font-medium ${getTextColor(usagePercentage)}`}>
+                                {usagePercentage.toFixed(1)}%
+                            </span>
+                            <div className="text-xs text-gray-600">
+                                {formatBytes(usedInternalHeap)}/{formatBytes(totalInternalHeap)}
+                            </div>
+                        </div>
+                    </div>
+                    {/* Memory segments */}
+                    <div className="flex space-x-0.5">
+                        {Array.from({ length: totalSegments }, (_, i) => (
+                            <div
+                                key={i}
+                                className={`h-3 flex-1 transition-colors duration-300 ${getSegmentColor(i)}`}
+                                style={{ minWidth: '2px' }}
+                            ></div>
+                        ))}
+                    </div>
+                </div>
+            </div>
+
+            {/* Memory Stats */}
+            {showDetails && (
+                <div className="grid grid-cols-3 gap-3 text-xs text-gray-600">
+                    <div className="flex justify-between">
+                        <span>Used:</span>
+                        <span className="font-medium">{formatBytes(usedInternalHeap)}</span>
+                    </div>
+                    <div className="flex justify-between">
+                        <span>Free:</span>
+                        <span className="font-medium text-green-600">{formatBytes(freeInternalHeap)}</span>
+                    </div>
+                    <div className="flex justify-between">
+                        <span>Total:</span>
+                        <span className="font-medium">{formatBytes(totalInternalHeap)}</span>
+                    </div>
+                </div>
+            )}
+        </div>
+    );
+}