diff --git a/.jules/bolt.md b/.jules/bolt.md new file mode 100644 index 00000000..e6321f06 --- /dev/null +++ b/.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). diff --git a/bun.lock b/bun.lock index f1109aa4..d19f7943 100644 --- a/bun.lock +++ b/bun.lock @@ -1,6 +1,5 @@ { "lockfileVersion": 1, - "configVersion": 1, "workspaces": { "": { "name": "salmon-loop", diff --git a/src/cli/ui/components/messageList/utils.ts b/src/cli/ui/components/messageList/utils.ts index ca9a3ed9..e59d523d 100644 --- a/src/cli/ui/components/messageList/utils.ts +++ b/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}`; }