Update index.html

index.html

@@ -212,6 +212,27 @@
           </div>
         </div>
 
+        <!-- Performance Metrics -->
+        <div class="p-3 bg-gray-50 border-2 border-black shadow-neo-sm">
+          <div class="text-xs font-bold mb-2 flex items-center gap-2">
+            <i class="fas fa-tachometer-alt"></i> PERFORMANCE
+          </div>
+          <div class="grid grid-cols-3 gap-2 text-[10px] font-mono">
+            <div class="bg-white p-1 border border-black">
+              <div class="text-gray-500 uppercase">Model Load</div>
+              <div class="font-bold" id="metric-compilation">-</div>
+            </div>
+            <div class="bg-white p-1 border border-black">
+              <div class="text-gray-500 uppercase">TTFT</div>
+              <div class="font-bold" id="metric-ttft">-</div>
+            </div>
+            <div class="bg-white p-1 border border-black">
+              <div class="text-gray-500 uppercase">TPS</div>
+              <div class="font-bold" id="metric-tps">-</div>
+            </div>
+          </div>
+        </div>
+
         <!-- Action Bar -->
         <div class="p-4 bg-gray-100 border-t-2 border-black flex gap-3 shrink-0">
           <button id="btn-play"
@@ -640,6 +661,10 @@
         currentBall: null,
         progress: { unlockedIndex: 0, stars: {} },
         winCondition: null,
+        // Performance metrics
+        modelCompilationTime: 0,
+        lastTTFT: 0,
+        lastTPS: 0,
       };
       function loadProgress() {
         const saved = localStorage.getItem(STORAGE_KEY);