fix(ui): use stable content-derived list keys instead of array indexes

Index keys reattach React state and DOM to the wrong rows if a list ever
reorders or filters. Breadcrumb segments now key by href/label and stats by
label; code lines and support-matrix rows, whose content can legitimately
repeat, key via a new `keyed()` helper (content + occurrence counter) so keys
follow the item and duplicates never collide.

Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>

Author: sgammon

packages/ui/src/components/breadcrumbs.tsx

@@ -23,7 +23,7 @@ export function Breadcrumbs({ segments, className, ...props }: BreadcrumbsProps)
         {segments.map((segment, i) => {
           const isLast = i === segments.length - 1;
           return (
-            <li key={`${segment.label}-${i}`} className="flex items-center gap-1.5">
+            <li key={segment.href ?? segment.label} className="flex items-center gap-1.5">
               {isLast ? (
                 <span aria-current="page" className="font-medium text-foreground">
                   {segment.label}

packages/ui/src/components/code-block.tsx

@@ -1,7 +1,7 @@
 import * as React from "react";
 import { Check, Copy } from "lucide-react";
 import { Highlight, type PrismTheme } from "prism-react-renderer";
-import { cn } from "../lib/utils";
+import { cn, keyed } from "../lib/utils";
 import { useMessages } from "../i18n/provider";
 
 /**
@@ -102,13 +102,16 @@ function Highlighted({ code, lang }: { code: string; lang?: string }) {
     <Highlight theme={eldPrismTheme} code={code} language={prismLang(lang)}>
       {({ tokens, getLineProps, getTokenProps }) => (
         <>
-          {tokens.map((line, i) => (
-            <span key={i} {...getLineProps({ line })} className="block">
-              {line.map((token, j) => (
-                <span key={j} {...getTokenProps({ token })} />
-              ))}
-            </span>
-          ))}
+          {/* Lines carry no ids, so key by content (disambiguated for repeats). */}
+          {keyed(tokens, (line) => line.map((token) => token.content).join("")).map(
+            ({ item: line, key }) => (
+              <span key={key} {...getLineProps({ line })} className="block">
+                {line.map((token, j) => (
+                  <span key={j} {...getTokenProps({ token })} />
+                ))}
+              </span>
+            ),
+          )}
         </>
       )}
     </Highlight>

packages/ui/src/components/stat-strip.tsx

@@ -39,7 +39,7 @@ export function StatStrip({
         const last = i === stats.length - 1;
         return (
           <div
-            key={i}
+            key={stat.label}
             className={cn("flex flex-col gap-1.5 p-5", !lastInRow && !last && "border-r border-border")}
           >
             {/* Semantic order is <dt> (term/label) then <dd> (value); `order-*`

packages/ui/src/components/support-matrix.tsx

@@ -1,6 +1,6 @@
 import * as React from "react";
 import { Check, CircleDot, X, type LucideIcon } from "lucide-react";
-import { cn } from "../lib/utils";
+import { cn, keyed } from "../lib/utils";
 import { useMessages } from "../i18n/provider";
 import type { Messages } from "../i18n/messages";
 
@@ -71,12 +71,15 @@ export function SupportMatrix({
           </tr>
         </thead>
         <tbody>
-          {rows.map((row, i) => {
+          {/* Rows carry no ids — key by the method name when it's a string
+              (the common case), disambiguated for repeats via `keyed`. */}
+          {keyed(rows, (row) => (typeof row.method === "string" ? row.method : row.status)).map(
+            ({ item: row, key }) => {
             const status = STATUS_META[row.status];
             const StatusIcon = status.icon;
             const statusLabel = m.supportMatrix[status.messageKey];
             return (
-              <tr key={i} className="border-t border-border">
+              <tr key={key} className="border-t border-border">
                 <td className="px-4 py-2.5 font-mono text-[var(--primary-emphasis)]">{row.method}</td>
                 <td className="px-4 py-2.5 text-center">
                   <StatusIcon

packages/ui/src/lib/utils.ts

@@ -5,3 +5,21 @@ import { twMerge } from "tailwind-merge";
 export function cn(...inputs: ClassValue[]) {
   return twMerge(clsx(inputs));
 }
+
+/**
+ * Stable React keys for items with no id: `base(item)` disambiguated by an
+ * occurrence counter, so keys follow content when the list reorders or filters
+ * (unlike array indexes) and stay unique when two items share a base.
+ */
+export function keyed<T>(
+  items: readonly T[],
+  base: (item: T) => string,
+): { item: T; key: string }[] {
+  const seen = new Map<string, number>();
+  return items.map((item) => {
+    const b = base(item);
+    const n = seen.get(b) ?? 0;
+    seen.set(b, n + 1);
+    return { item, key: n === 0 ? b : `${b}~${n}` };
+  });
+}