Use stable key props instead of array index in list components

[tyevco]

Summary

Several shared components use array index as the React key prop in .map() calls. While this is React's default behavior and works correctly for static lists, it can cause subtle rendering bugs when lists are filtered, reordered, or dynamically updated.

Affected Components

packages/shared-components/src/components/Dropdown.tsx

• Line 544: groupOptions.map((option, index) => <div key={index}> — should use option.value or a unique identifier
• Line 324: selectedOptions.map() with index key for multi-select chips

packages/shared-components/src/components/PerformanceChart.tsx

• Line 191: s.data.map((point, idx) => <circle key={idx}> — should use point timestamp or unique data identifier

packages/shared-components/src/components/SearchInput.tsx

• Line 450: dropdownItems.map((item, index) => <div key={index}> — should use item string value as key

packages/shared-components/src/components/CodeBlock.tsx

• Line 390: highlightedLines.map((line, index) => <tr key={index}> — should use lineNumber as key

When This Matters

Index-based keys cause issues when:

• Items are filtered (e.g., Dropdown search)
• Items are reordered (e.g., sorted results)
• Items are added/removed from the middle of the list
• Components have internal state that should persist across re-renders

Suggested Fix

Use semantically meaningful keys:

// Instead of:
options.map((option, index) => <div key={index}>)

// Use:
options.map((option) => <div key={option.value}>)

Priority

Low — these are devtools UI components where lists are typically small and rarely reordered. No crash or data loss, just potential visual glitches during rapid state changes.