From f65873d6906d9a3e10af9224726ceba742a2c62a Mon Sep 17 00:00:00 2001
From: Logan <Logan@simplestepsolutions.com>
Date: Mon, 1 Jun 2026 01:56:51 -0400
Subject: [PATCH] Fix TypeScript key prop error on SourceCallPlayer map

Wrap SourceCallPlayer in Fragment to avoid the broken JSX env treating
key as a component prop on the custom component.
---
 drb-frontend/app/systems/page.tsx | 10 ++++++----
 1 file changed, 6 insertions(+), 4 deletions(-)

diff --git a/drb-frontend/app/systems/page.tsx b/drb-frontend/app/systems/page.tsx
index 427ce2b..3af1aa9 100644
--- a/drb-frontend/app/systems/page.tsx
+++ b/drb-frontend/app/systems/page.tsx
@@ -1,6 +1,6 @@
 "use client";
 
-import { useRef, useState } from "react";
+import { useRef, useState, Fragment } from "react";
 import { useSystems } from "@/lib/useSystems";
 import { c2api } from "@/lib/c2api";
 import type { SystemRecord, VocabularyPendingTerm } from "@/lib/types";
@@ -841,7 +841,7 @@ function SourceCallPlayer({ callId }: { callId: string }) {
       setLoading(true);
       try {
         const c = await c2api.getCall(callId);
-        setCall(c as typeof call);
+        setCall(c as unknown as typeof call);
       } finally {
         setLoading(false);
       }
@@ -1038,8 +1038,10 @@ function VocabularyPanel({ systemId }: { systemId: string }) {
                         </div>
                         {p.source_call_ids && p.source_call_ids.length > 0 && (
                           <div className="pl-1 space-y-1">
-                            {p.source_call_ids.map((id) => (
-                              <SourceCallPlayer key={id} callId={id} />
+                            {p.source_call_ids.map((id: string) => (
+                              <Fragment key={id}>
+                                <SourceCallPlayer callId={id} />
+                              </Fragment>
                             ))}
                           </div>
                         )}