From 8a4024f619273cf2573c63a3b0ffca4aa8cfa68e Mon Sep 17 00:00:00 2001
From: asepharyana <superaseph@gmail.com>
Date: Sat, 1 Aug 2026 10:37:21 +0700
Subject: [PATCH] fix(fe): crash 'reading charAt' on message avatar fallback
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

msg.username bisa undefined saat pesan live masuk lewat WS
(message_updated Partial payload / capture tidak lengkap) ->
msg.username.charAt(0) TypeError, halaman /messages mati.

- message-card + search-panel: username?.charAt(0) ?? '?'
- created_at di-guard juga biar tidak render 'Invalid Date'
Verifikasi: tsc PASS, build PASS, biome 0 error. DB saat ini 0 row
null username (1176 total) — crash murni dari jalur WS live.
---
 .../src/components/analysis/search-panel.tsx         |  6 ++++--
 .../src/components/messages/message-card.tsx         | 12 +++++++++---
 2 files changed, 13 insertions(+), 5 deletions(-)

diff --git a/services/frontend/src/components/analysis/search-panel.tsx b/services/frontend/src/components/analysis/search-panel.tsx
index 4a220ad..dc54a38 100644
--- a/services/frontend/src/components/analysis/search-panel.tsx
+++ b/services/frontend/src/components/analysis/search-panel.tsx
@@ -70,7 +70,7 @@ export function SearchPanel() {
                       <Avatar className="size-8 shrink-0 mt-0.5">
                         <AvatarImage src={msg.avatar_url ?? undefined} />
                         <AvatarFallback className="text-xs">
-                          {msg.username.charAt(0).toUpperCase()}
+                          {msg.username?.charAt(0).toUpperCase() ?? "?"}
                         </AvatarFallback>
                       </Avatar>
                       <div className="flex-1 min-w-0 space-y-2">
@@ -79,7 +79,9 @@ export function SearchPanel() {
                             {msg.username}
                           </span>
                           <span className="text-xs text-muted-foreground">
-                            {new Date(msg.created_at).toLocaleString()}
+                            {msg.created_at
+                              ? new Date(msg.created_at).toLocaleString()
+                              : ""}
                           </span>
                           {msg.ai_status && (
                             <Badge
diff --git a/services/frontend/src/components/messages/message-card.tsx b/services/frontend/src/components/messages/message-card.tsx
index cb81130..845e96d 100644
--- a/services/frontend/src/components/messages/message-card.tsx
+++ b/services/frontend/src/components/messages/message-card.tsx
@@ -6,7 +6,11 @@ import { Badge } from "@/components/ui/badge";
 import { Button } from "@/components/ui/button";
 import { Card, CardContent } from "@/components/ui/card";
 import { Progress } from "@/components/ui/progress";
-import { safeParseJsonArray, getMessageChannelLabel, renderMessageContent } from "@/lib/format";
+import {
+  getMessageChannelLabel,
+  renderMessageContent,
+  safeParseJsonArray,
+} from "@/lib/format";
 import type { MessageRecord } from "@/lib/types";
 import { cn } from "@/lib/utils";
 import { AiStatusBadge } from "./ai-status-badge";
@@ -43,14 +47,16 @@ export function MessageCard({
           <Avatar className="size-8 shrink-0 mt-0.5">
             <AvatarImage src={msg.avatar_url ?? undefined} />
             <AvatarFallback className="text-xs">
-              {msg.username.charAt(0).toUpperCase()}
+              {msg.username?.charAt(0).toUpperCase() ?? "?"}
             </AvatarFallback>
           </Avatar>
           <div className="flex-1 min-w-0 space-y-2">
             <div className="flex items-center gap-2 flex-wrap">
               <span className="text-sm font-medium">{msg.username}</span>
               <span className="text-xs text-muted-foreground">
-                {new Date(msg.created_at).toLocaleString()}
+                {msg.created_at
+                  ? new Date(msg.created_at).toLocaleString()
+                  : ""}
               </span>
               <span
                 className="text-xs text-muted-foreground"