From 7885884e45214b3b346710c300ebd4b21b52a107 Mon Sep 17 00:00:00 2001
From: Yves Gugger <guggeryves@hotmail.com>
Date: Wed, 17 Dec 2025 10:00:27 +0100
Subject: [PATCH] Fix TypeScript type casting for details object

---
 .../src/components/analyze/AnalyzePanel.tsx   | 64 ++++++++++---------
 1 file changed, 35 insertions(+), 29 deletions(-)

diff --git a/frontend/src/components/analyze/AnalyzePanel.tsx b/frontend/src/components/analyze/AnalyzePanel.tsx
index 39890f0..9a2afb1 100644
--- a/frontend/src/components/analyze/AnalyzePanel.tsx
+++ b/frontend/src/components/analyze/AnalyzePanel.tsx
@@ -489,37 +489,43 @@ export function AnalyzePanel() {
                             </div>
 
                             {/* Radio Test Details */}
-                            {item.key === 'radio_test' && item.details && (
-                              <div className="mt-2 flex flex-wrap gap-2">
-                                {item.details.syllables !== undefined && (
-                                  <span className="px-2 py-0.5 bg-white/5 border border-white/10 text-[10px] font-mono text-white/50">
-                                    {item.details.syllables} syllables
-                                  </span>
-                                )}
-                                {item.details.length !== undefined && (
-                                  <span className="px-2 py-0.5 bg-white/5 border border-white/10 text-[10px] font-mono text-white/50">
-                                    {item.details.length} chars
-                                  </span>
-                                )}
-                                {item.details.has_hyphen && (
-                                  <span className="px-2 py-0.5 bg-amber-500/10 border border-amber-500/20 text-[10px] font-mono text-amber-400">
-                                    has hyphen
-                                  </span>
-                                )}
-                                {item.details.has_digits && (
-                                  <span className="px-2 py-0.5 bg-amber-500/10 border border-amber-500/20 text-[10px] font-mono text-amber-400">
-                                    has digits
-                                  </span>
-                                )}
-                              </div>
-                            )}
+                            {item.key === 'radio_test' && item.details && (() => {
+                              const d = item.details as Record<string, any>
+                              return (
+                                <div className="mt-2 flex flex-wrap gap-2">
+                                  {d.syllables !== undefined && (
+                                    <span className="px-2 py-0.5 bg-white/5 border border-white/10 text-[10px] font-mono text-white/50">
+                                      {d.syllables} syllables
+                                    </span>
+                                  )}
+                                  {d.length !== undefined && (
+                                    <span className="px-2 py-0.5 bg-white/5 border border-white/10 text-[10px] font-mono text-white/50">
+                                      {d.length} chars
+                                    </span>
+                                  )}
+                                  {d.has_hyphen && (
+                                    <span className="px-2 py-0.5 bg-amber-500/10 border border-amber-500/20 text-[10px] font-mono text-amber-400">
+                                      has hyphen
+                                    </span>
+                                  )}
+                                  {d.has_digits && (
+                                    <span className="px-2 py-0.5 bg-amber-500/10 border border-amber-500/20 text-[10px] font-mono text-amber-400">
+                                      has digits
+                                    </span>
+                                  )}
+                                </div>
+                              )
+                            })()}
 
                             {/* Registrar Details */}
-                            {(item.key === 'tld_cheapest_register_usd' || item.key === 'tld_cheapest_renew_usd') && item.details?.registrar && (
-                              <div className="mt-1 text-[10px] font-mono text-white/30">
-                                via {item.details.registrar}
-                              </div>
-                            )}
+                            {(item.key === 'tld_cheapest_register_usd' || item.key === 'tld_cheapest_renew_usd') && item.details && (() => {
+                              const d = item.details as Record<string, any>
+                              return d.registrar ? (
+                                <div className="mt-1 text-[10px] font-mono text-white/30">
+                                  via {d.registrar}
+                                </div>
+                              ) : null
+                            })()}
                           </div>
                         </div>
                       </div>