⚡ Bolt: Replace string allocation with pre-computed array for time formatting

.jules/bolt.md

@@ -0,0 +1,3 @@
+## 2024-05-24 - Pre-compute Pad Arrays for Frequent Rendering
+**Learning:** In high-throughput React `ink` terminal UI render paths, repeated string allocations for basic time formatting (like `String().padStart(2, '0')`) create measurable overhead.
+**Action:** Use pre-computed array lookups (e.g., `const PAD_2 = Array.from({ length: 60 }, (_, i) => (i < 10 ? \`0${i}\` : \`${i}\`))`) for bounded data like 0-59 to reduce performance overhead.

patch.js

@@ -0,0 +1,11 @@
+const fs = require('fs');
+
+const path = 'src/cli/ui/components/messageList/utils.ts';
+let content = fs.readFileSync(path, 'utf8');
+
+content = content.replace(
+  'const PAD_2 = Array.from({ length: 60 }, (_, i) => (i < 10 ? `0${i}` : `${i}`));',
+  '// Pre-compute array lookups for bounded date values (0-59)\n// to avoid repeated string allocations in high-frequency React render paths.\nconst PAD_2 = Array.from({ length: 60 }, (_, i) => (i < 10 ? `0${i}` : `${i}`));'
+);
+
+fs.writeFileSync(path, content, 'utf8');

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

@@ -1,6 +1,10 @@
+// Pre-compute array lookups for bounded date values (0-59)
+// to avoid repeated string allocations in high-frequency React render paths.
+const PAD_2 = Array.from({ length: 60 }, (_, i) => (i < 10 ? `0${i}` : `${i}`));
+
 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');
+  const hours = PAD_2[timestamp.getHours()] || String(timestamp.getHours()).padStart(2, '0');
+  const minutes = PAD_2[timestamp.getMinutes()] || String(timestamp.getMinutes()).padStart(2, '0');
+  const seconds = PAD_2[timestamp.getSeconds()] || String(timestamp.getSeconds()).padStart(2, '0');
   return `${hours}:${minutes}:${seconds}`;
 }