zernio-dev · mikipalet · Jul 20, 2026 · Jul 20, 2026
diff --git a/src/app/dashboard/accounts/page.tsx b/src/app/dashboard/accounts/page.tsx
@@ -30,7 +30,7 @@ import {
 } from "@/components/ui/alert-dialog";
 import { AccountAvatar } from "@/components/accounts";
 import { ConnectPlatformGrid } from "./_components/connect-platform-grid";
-import { PLATFORM_NAMES, type Platform } from "@/lib/late-api";
+import { getPlatformName, type Platform } from "@/lib/late-api";
 import { Users, Plus, Loader2, AlertCircle, RefreshCw, Trash2 } from "lucide-react";
 
 export default function AccountsPage() {
@@ -127,7 +127,7 @@ export default function AccountsPage() {
                       </p>
                       <div className="flex items-center gap-2">
                         <Badge variant="secondary" className="text-xs">
-                          {PLATFORM_NAMES[account.platform as Platform]}
+                          {getPlatformName(account.platform)}
                         </Badge>
                         {needsReconnect && (
                           <span className="flex items-center gap-1 text-xs text-amber-600 dark:text-amber-400">

diff --git a/src/app/dashboard/page.tsx b/src/app/dashboard/page.tsx
@@ -8,7 +8,7 @@ import { Button } from "@/components/ui/button";
 import { Badge } from "@/components/ui/badge";
 import { AccountAvatar } from "@/components/accounts";
 import { PlatformIcons, PostStatusBadge } from "@/components/posts";
-import { PLATFORM_NAMES, type Platform } from "@/lib/late-api";
+import { getPlatformName } from "@/lib/late-api";
 import { format } from "date-fns/format";
 import { parseISO } from "date-fns/parseISO";
 import {
@@ -221,7 +221,7 @@ export default function DashboardPage() {
                   </span>
                 </div>
                 <Badge variant="secondary">
-                  {PLATFORM_NAMES[account.platform as Platform]}
+                  {getPlatformName(account.platform)}
                 </Badge>
               </div>
             ))

diff --git a/src/components/accounts/account-card.tsx b/src/components/accounts/account-card.tsx
@@ -5,7 +5,7 @@ import { Badge } from "@/components/ui/badge";
 import { Button } from "@/components/ui/button";
 import { Card, CardContent } from "@/components/ui/card";
 import { PlatformIcon } from "@/components/shared/platform-icon";
-import { PLATFORM_NAMES, PLATFORM_COLORS, type Platform } from "@/lib/late-api";
+import { getPlatformName, getPlatformColor, type Platform } from "@/lib/late-api";
 import { Trash2, RefreshCw, CheckCircle2, AlertCircle } from "lucide-react";
 import type { Account, AccountHealth } from "@/hooks";
 
@@ -38,7 +38,7 @@ export function AccountCard({
             </p>
             <div className="flex items-center gap-2 mt-0.5">
               <span className="text-xs text-muted-foreground">
-                {PLATFORM_NAMES[platform]}
+                {getPlatformName(platform)}
               </span>
               <AccountHealthBadge isHealthy={isHealthy} compact />
             </div>
@@ -109,7 +109,7 @@ export function AccountAvatar({ account, size = "md" }: AccountAvatarProps) {
       <Avatar className={sizeClasses[size]}>
         <AvatarImage src={account.profilePicture} />
         <AvatarFallback
-          style={{ backgroundColor: PLATFORM_COLORS[platform] }}
+          style={{ backgroundColor: getPlatformColor(platform) }}
         >
           <PlatformIcon
             platform={platform}
@@ -120,7 +120,7 @@ export function AccountAvatar({ account, size = "md" }: AccountAvatarProps) {
       </Avatar>
       <div
         className={`absolute flex items-center justify-center rounded-full border-2 border-card ${badgeSizeClasses[size]}`}
-        style={{ backgroundColor: PLATFORM_COLORS[platform] }}
+        style={{ backgroundColor: getPlatformColor(platform) }}
       >
         <PlatformIcon
           platform={platform}
@@ -191,7 +191,7 @@ export function AccountListItem({
           {account.displayName || account.username}
         </p>
         <p className="text-xs text-muted-foreground">
-          {PLATFORM_NAMES[platform]}
+          {getPlatformName(platform)}
         </p>
       </div>
       {selected && (

diff --git a/src/components/shared/platform-icon.tsx b/src/components/shared/platform-icon.tsx
@@ -1,6 +1,6 @@
 "use client";
 
-import { type Platform, PLATFORM_COLORS, PLATFORM_COLORS_DARK } from "@/lib/late-api";
+import { type Platform, getPlatformColor } from "@/lib/late-api";
 import { cn } from "@/lib/utils";
 import { useTheme } from "next-themes";
 
@@ -73,6 +73,15 @@ const platformIcons: Record<Platform, React.FC<{ className?: string; style?: Rea
   ),
 };
 
+// Generic globe, shown for platforms the API returns that we have no icon for
+// (e.g. whatsapp, discord, ads accounts). Without it the lookup above yields
+// undefined and React throws error #130.
+const FallbackPlatformIcon: React.FC<{ className?: string; style?: React.CSSProperties }> = ({ className, style }) => (
+  <svg className={className} style={style} viewBox="0 0 24 24" fill="currentColor">
+    <path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm-1 17.93c-3.95-.49-7-3.85-7-7.93 0-.62.08-1.21.21-1.79L9 15v1c0 1.1.9 2 2 2v1.93zm6.9-2.54c-.26-.81-1-1.39-1.9-1.39h-1v-3c0-.55-.45-1-1-1H8v-2h2c.55 0 1-.45 1-1V7h2c1.1 0 2-.9 2-2v-.41c2.93 1.19 5 4.06 5 7.41 0 2.08-.8 3.97-2.1 5.39z" />
+  </svg>
+);
+
 interface PlatformIconProps {
   platform: Platform;
   className?: string;
@@ -94,10 +103,10 @@ export function PlatformIcon({
   showColor = false,
   size = "md",
 }: PlatformIconProps) {
-  const Icon = platformIcons[platform];
+  const Icon = platformIcons[platform] ?? FallbackPlatformIcon;
   const { resolvedTheme } = useTheme();
   const isDark = resolvedTheme === "dark";
-  const color = isDark ? PLATFORM_COLORS_DARK[platform] : PLATFORM_COLORS[platform];
+  const color = getPlatformColor(platform, isDark);
 
   return (
     <Icon
@@ -115,7 +124,7 @@ export function PlatformBadge({
   className?: string;
 }) {
   // Badge always uses the brand color as background with white icon
-  const color = PLATFORM_COLORS[platform];
+  const color = getPlatformColor(platform);
   // For black-based platforms on dark mode, use a lighter background
   const { resolvedTheme } = useTheme();
   const isDark = resolvedTheme === "dark";

diff --git a/src/lib/late-api/types.ts b/src/lib/late-api/types.ts
@@ -82,6 +82,21 @@ export const PLATFORM_COLORS_DARK: Record<Platform, string> = {
   telegram: "#5BC4F0",
 };
 
+// The API can return platforms this app doesn't know about yet (e.g. whatsapp,
+// discord, ads accounts). Rendering must degrade gracefully, never crash, so
+// name/color lookups for arbitrary platform strings go through these helpers.
+export function getPlatformName(platform: string): string {
+  return (
+    PLATFORM_NAMES[platform as Platform] ??
+    platform.charAt(0).toUpperCase() + platform.slice(1)
+  );
+}
+
+export function getPlatformColor(platform: string, isDark = false): string {
+  const colors = isDark ? PLATFORM_COLORS_DARK : PLATFORM_COLORS;
+  return colors[platform as Platform] ?? (isDark ? "#9CA3AF" : "#6B7280");
+}
+
 // Platforms that require entity selection after OAuth
 export const PLATFORMS_WITH_ENTITY_SELECTION = [
   "facebook",