fix: handle object format for narrative highlights in UnifiedInsightSection

- Updated UnifiedInsightSection to accept highlights as either strings or objects with {label, value, interpretation}
- Fixed type definitions in page.tsx to match the actual LLM output format
- Added renderHighlight helper function to format object highlights nicely

Author: devakone

apps/web/src/app/page.tsx

@@ -106,7 +106,7 @@ type AuthStats = {
     narrative?: {
       headline?: string;
       paragraphs?: string[];
-      highlights?: string[];
+      highlights?: Array<{ label: string; value: string; interpretation?: string }>;
     } | null;
     llmModel?: string | null;
     llmKeySource?: string | null;
@@ -518,7 +518,7 @@ export default async function Home({
     narrative_json: {
       headline?: string;
       paragraphs?: string[];
-      highlights?: string[];
+      highlights?: Array<{ label: string; value: string; interpretation?: string }>;
     } | null;
     llm_model: string | null;
     llm_key_source: string | null;
@@ -611,7 +611,7 @@ export default async function Home({
     narrative_json: {
       headline?: string;
       paragraphs?: string[];
-      highlights?: string[];
+      highlights?: Array<{ label: string; value: string; interpretation?: string }>;
     } | null;
     llm_model: string | null;
     llm_key_source: string | null;

apps/web/src/components/vcp/unified/UnifiedInsightSection.tsx

@@ -2,13 +2,18 @@
 
 import { cn } from "@/lib/utils";
 
+// Highlight can be a simple string or a rich object
+type HighlightItem = 
+  | string 
+  | { label: string; value: string | number; interpretation?: string };
+
 interface UnifiedInsightSectionProps {
   /** Main headline/insight */
   headline: string;
   /** Additional narrative paragraphs (LLM-generated) */
   paragraphs?: string[];
-  /** Highlight bullet points (LLM-generated) */
-  highlights?: string[];
+  /** Highlight bullet points (LLM-generated) - can be strings or objects */
+  highlights?: HighlightItem[];
   /** Whether the narrative is LLM-generated */
   isLLMGenerated?: boolean;
   /** LLM model used */
@@ -17,6 +22,21 @@ interface UnifiedInsightSectionProps {
   className?: string;
 }
 
+/**
+ * Render a highlight item - handles both string and object formats
+ */
+function renderHighlight(item: HighlightItem): string {
+  if (typeof item === "string") {
+    return item;
+  }
+  // Object format: { label, value, interpretation }
+  const parts = [`${item.label}: ${item.value}`];
+  if (item.interpretation) {
+    parts.push(`— ${item.interpretation}`);
+  }
+  return parts.join(" ");
+}
+
 /**
  * UnifiedInsightSection - Displays the main insight and LLM narrative
  *
@@ -60,7 +80,7 @@ export function UnifiedInsightSection({
             {highlights.map((highlight, idx) => (
               <li key={idx} className="flex items-start gap-2 text-sm text-slate-600">
                 <span className="mt-1 text-violet-400">•</span>
-                <span>{highlight}</span>
+                <span>{renderHighlight(highlight)}</span>
               </li>
             ))}
           </ul>