fix: duplicate React keys in daily spend chart and TS error in generate-audio

Disambiguate first names with last initial when two top spenders share
the same first name (e.g. "Roman O." vs "Roman S."). Also fix
optional chaining in generate-audio.ts that broke CI typecheck.

Co-authored-by: Cursor <cursoragent@cursor.com>

Author: ofershap

scripts/video/generate-audio.ts

@@ -75,7 +75,7 @@ function buildVoiceSettings(script: DemoScript) {
 }
 
 async function generateSample(client: ElevenLabsClient, voice: VoiceCandidate, script: DemoScript) {
-  const sampleText = script.scenes[0].narration;
+  const sampleText = script.scenes[0]?.narration ?? "";
   const outPath = path.join(OUTPUT_DIR, `sample-${voice.name.toLowerCase()}.mp3`);
 
   console.log(`  Generating sample for "${voice.name}" → ${outPath}`);

src/app/dashboard-client.tsx

@@ -480,6 +480,11 @@ export interface DailySpendDataPoint {
   [key: string]: string | number;
 }
 
+function shortDisplayName(fullName: string): string {
+  const parts = fullName.split(" ");
+  return parts[0] ?? fullName;
+}
+
 function buildDailySpendData(breakdown: SpendBreakdownRow[]): {
   points: DailySpendDataPoint[];
   topNames: string[];
@@ -488,10 +493,28 @@ function buildDailySpendData(breakdown: SpendBreakdownRow[]): {
   for (const row of breakdown) {
     spendByUser.set(row.name, (spendByUser.get(row.name) ?? 0) + row.spend_cents);
   }
-  const topNames = [...spendByUser.entries()]
+  const topFullNames = [...spendByUser.entries()]
     .sort((a, b) => b[1] - a[1])
     .slice(0, 6)
-    .map(([name]) => name.split(" ")[0] ?? name);
+    .map(([name]) => name);
+
+  const firstNameCount = new Map<string, number>();
+  for (const name of topFullNames) {
+    const first = shortDisplayName(name);
+    firstNameCount.set(first, (firstNameCount.get(first) ?? 0) + 1);
+  }
+  const fullToDisplay = new Map<string, string>();
+  for (const name of topFullNames) {
+    const first = shortDisplayName(name);
+    if ((firstNameCount.get(first) ?? 0) > 1) {
+      const lastInitial = name.split(" ")[1]?.[0] ?? "";
+      fullToDisplay.set(name, `${first} ${lastInitial}.`);
+    } else {
+      fullToDisplay.set(name, first);
+    }
+  }
+
+  const topNames = topFullNames.map((n) => fullToDisplay.get(n) ?? n);
 
   const byDate = new Map<string, DailySpendDataPoint>();
   for (const row of breakdown) {
@@ -501,11 +524,11 @@ function buildDailySpendData(breakdown: SpendBreakdownRow[]): {
       byDate.set(row.date, point);
     }
     const point = byDate.get(row.date) as Record<string, number>;
-    const firstName = row.name.split(" ")[0] ?? row.name;
+    const display = fullToDisplay.get(row.name);
     const dollars = row.spend_cents / 100;
     point.total = (point.total ?? 0) + dollars;
-    if (topNames.includes(firstName)) {
-      point[firstName] = (point[firstName] as number) + dollars;
+    if (display) {
+      point[display] = (point[display] as number) + dollars;
     } else {
       point.Others = (point.Others as number) + dollars;
     }

src/app/insights/insights-client.tsx

@@ -418,7 +418,7 @@ export function InsightsClient({ data }: { data: InsightsData }) {
               <tbody>
                 {mergedCommands.slice(0, 20).map((row, i) => (
                   <tr
-                    key={row.command_name}
+                    key={`${row.command_name}-${i}`}
                     className="border-b border-zinc-800/30 hover:bg-zinc-800/30"
                   >
                     <td className="py-1 text-zinc-300 font-mono">{row.command_name}</td>

src/app/users/[email]/user-detail-client.tsx

@@ -410,8 +410,11 @@ export function UserDetailClient({ email, stats }: UserDetailClientProps) {
                   Commands
                 </div>
                 <div className="space-y-1.5">
-                  {stats.commandsSummary.slice(0, 10).map((c) => (
-                    <div key={c.command_name} className="flex items-center justify-between text-xs">
+                  {stats.commandsSummary.slice(0, 10).map((c, i) => (
+                    <div
+                      key={`${c.command_name}-${i}`}
+                      className="flex items-center justify-between text-xs"
+                    >
                       <span className="text-zinc-300">{c.command_name}</span>
                       <span className="font-mono text-zinc-500">
                         {c.total_usage.toLocaleString()}