⚡ Bolt: Optimize timestamp formatting in message list

.jules/bolt.md

@@ -0,0 +1,3 @@
+## 2026-08-23 - Optimizing time formatting in high-throughput render paths
+**Learning:** In terminal UIs using React and Ink, formatting timestamps using `String().padStart()` inside the render loop causes significant overhead and unnecessary string allocations, leading to performance degradation in high-throughput message lists.
+**Action:** Replace dynamic padding with a pre-computed string array lookup (`Array.from({length: 60})`) for bounded values like hours, minutes, and seconds (0-59).

src/cli/ui/components/messageList/utils.ts

@@ -1,6 +1,7 @@
+// Pre-computed array lookup for time values (0-59) to avoid string allocations
+// and padStart() overhead during high-throughput React rendering
+const timeLookup = Array.from({ length: 60 }, (_, i) => String(i).padStart(2, '0'));
+
 export function formatTime(timestamp: Date): string {
-  const hours = String(timestamp.getHours()).padStart(2, '0');
-  const minutes = String(timestamp.getMinutes()).padStart(2, '0');
-  const seconds = String(timestamp.getSeconds()).padStart(2, '0');
-  return `${hours}:${minutes}:${seconds}`;
+  return `${timeLookup[timestamp.getHours()] as string}:${timeLookup[timestamp.getMinutes()] as string}:${timeLookup[timestamp.getSeconds()] as string}`;
 }