refactor(erd): avoid intermediate handle-encoding arrays

.jules/bolt.md

@@ -77,3 +77,6 @@ Optimized metric route processing to O(N) by creating a mapping of routes direct
 ## 2024-07-13 - [Optimize Export Dictionary FK lookups]
 **Learning:** Found O(N * C * E) performance bottleneck in ERD export dictionaries due to repeated array searching with `edges.some()` inside a nested loop over nodes and columns.
 **Action:** Replace repeated linear array scans for edges by precomputing O(1) Set lookups of foreign key column handles per node before looping.
+## 2024-09-06 - Replacing Array.from with for...of in hot paths
+**Learning:** While `Array.from(string)` is clean for string iteration and mapping, it allocates an intermediate array. In hot paths (like node ID generation in large ERD graphs), this increases garbage collection overhead.
+**Action:** Prefer `for...of` loops over `Array.from` when iterating characters for short strings in hot paths to prevent intermediate array allocations and reduce GC pressure.

frontend/src/App.coverage.test.tsx

@@ -610,6 +610,7 @@ describe('App orchestration coverage', () => {
   it('logs auto-layout failures and preserves nodes added after the undo snapshot', async () => {
     await renderReadyApp()
     fireEvent.click(screen.getByRole('button', { name: '다이어그램' }))
+    await waitFor(() => expect(screen.getAllByRole('button', { name: '열기' }).length).toBeGreaterThan(0))
     vi.useFakeTimers()
     fireEvent.click(screen.getAllByRole('button', { name: '열기' })[0]!)
     await act(async () => {
@@ -641,6 +642,7 @@ describe('App orchestration coverage', () => {
       .mockRejectedValueOnce(new Error('terminal refresh down'))
     await renderReadyApp()
     fireEvent.click(screen.getByRole('button', { name: '다이어그램' }))
+    await waitFor(() => expect(screen.getAllByRole('button', { name: '열기' }).length).toBeGreaterThan(0))
     vi.useFakeTimers()
     fireEvent.click(screen.getAllByRole('button', { name: '열기' })[0]!)
     await act(async () => {
@@ -744,6 +746,7 @@ describe('App orchestration coverage', () => {
     }))
     await renderReadyApp()
     fireEvent.click(screen.getByRole('button', { name: '다이어그램' }))
+    await waitFor(() => expect(screen.getAllByRole('button', { name: '열기' }).length).toBeGreaterThan(0))
     vi.useFakeTimers()
     fireEvent.click(screen.getAllByRole('button', { name: '열기' })[0]!)
     await act(async () => {
@@ -784,6 +787,7 @@ describe('App orchestration coverage', () => {
     })
     await renderReadyApp()
     fireEvent.click(screen.getByRole('button', { name: '다이어그램' }))
+    await waitFor(() => expect(screen.getAllByRole('button', { name: '열기' }).length).toBeGreaterThan(0))
     vi.useFakeTimers()
     fireEvent.click(screen.getAllByRole('button', { name: '열기' })[0]!)
     await act(async () => {

frontend/src/erd/handleUtils.ts

@@ -1,10 +1,17 @@
 export function sanitizeHandleId(columnName: string): string {
-  const encoded = Array.from(columnName, (char) => {
-    // Array.from only yields non-empty Unicode scalars, so codePointAt(0) is defined.
-    return char.codePointAt(0)!.toString(16).padStart(4, '0')
-  }).join('-')
+  if (!columnName) return 'c-empty';
 
-  return `c-${encoded || 'empty'}`
+  let encoded = '';
+  // ⚡ Bolt: Use for...of loop instead of Array.from(string).join('-') to prevent
+  // intermediate array allocations and reduce garbage collection pressure in hot paths.
+  for (const char of columnName) {
+    if (encoded.length > 0) {
+      encoded += '-';
+    }
+    encoded += char.codePointAt(0)!.toString(16).padStart(4, '0');
+  }
+
+  return `c-${encoded}`;
 }
 
 export function sourceColumnHandleId(columnName: string): string {