fix: resolve lint error in FirstTimePublicProfileBanner with useSyncExternalStore

- Refactor FirstTimePublicProfileBanner to use useSyncExternalStore instead of
  useState/useEffect pattern that triggered cascading render lint error
- Add llmKeySource display to UnifiedInsightSection showing narrative source
  (User key, Platform key, Sponsor key, or Deterministic fallback)
- Pass llmKeySource prop through page.tsx to UnifiedInsightSection

Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>

Author: devakone

apps/web/src/app/page.tsx

@@ -1260,6 +1260,7 @@ function AuthenticatedDashboard({
               highlights={narrativeHighlights}
               isLLMGenerated={hasLLMNarrative}
               llmModel={stats.userProfile.llmModel}
+              llmKeySource={stats.userProfile.llmKeySource}
             />
           ) : null}
 

apps/web/src/components/public-profile/FirstTimePublicProfileBanner.tsx

@@ -1,11 +1,25 @@
 "use client";
 
-import { useState, useEffect } from "react";
+import { useState, useSyncExternalStore, useCallback } from "react";
 import Link from "next/link";
 import { X, Sparkles } from "lucide-react";
 
 const STORAGE_KEY = "vcp_public_profile_intro_seen";
 
+// Subscribe to localStorage changes (for cross-tab sync if needed)
+function subscribe(callback: () => void) {
+  window.addEventListener("storage", callback);
+  return () => window.removeEventListener("storage", callback);
+}
+
+function getSnapshot(): boolean {
+  return localStorage.getItem(STORAGE_KEY) === "1";
+}
+
+function getServerSnapshot(): boolean {
+  return true; // On server, assume dismissed to avoid hydration mismatch
+}
+
 interface FirstTimePublicProfileBannerProps {
   /** Whether user's public profile is already enabled */
   profileEnabled: boolean;
@@ -22,22 +36,23 @@ export function FirstTimePublicProfileBanner({
   profileEnabled,
   hasUsername,
 }: FirstTimePublicProfileBannerProps) {
-  const [dismissed, setDismissed] = useState(true); // Start true to avoid flash
-  const [mounted, setMounted] = useState(false);
+  // Use useSyncExternalStore to safely read from localStorage
+  const dismissedFromStorage = useSyncExternalStore(
+    subscribe,
+    getSnapshot,
+    getServerSnapshot
+  );
 
-  useEffect(() => {
-    setMounted(true);
-    const seen = localStorage.getItem(STORAGE_KEY) === "1";
-    setDismissed(seen);
-  }, []);
+  const [localDismissed, setLocalDismissed] = useState(false);
+  const dismissed = dismissedFromStorage || localDismissed;
 
-  const dismiss = () => {
+  const dismiss = useCallback(() => {
     localStorage.setItem(STORAGE_KEY, "1");
-    setDismissed(true);
-  };
+    setLocalDismissed(true);
+  }, []);
 
-  // Don't render during SSR or if dismissed or if profile already enabled
-  if (!mounted || dismissed || profileEnabled) {
+  // Don't render if dismissed or if profile already enabled
+  if (dismissed || profileEnabled) {
     return null;
   }
 

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

@@ -18,6 +18,8 @@ interface UnifiedInsightSectionProps {
   isLLMGenerated?: boolean;
   /** LLM model used */
   llmModel?: string | null;
+  /** Source of LLM key used for this narrative */
+  llmKeySource?: string | null;
   /** Additional class names */
   className?: string;
 }
@@ -48,8 +50,30 @@ export function UnifiedInsightSection({
   highlights = [],
   isLLMGenerated = false,
   llmModel,
+  llmKeySource,
   className,
 }: UnifiedInsightSectionProps) {
+  const modelLabel = llmModel?.trim() || null;
+  const providerLabel = modelLabel?.startsWith("gpt-")
+    ? "OpenAI"
+    : modelLabel?.startsWith("claude-")
+      ? "Anthropic"
+      : modelLabel?.startsWith("gemini-")
+        ? "Google"
+        : null;
+  const sourceLabel =
+    llmKeySource === "user"
+      ? "User key"
+      : llmKeySource === "platform"
+        ? "Platform key"
+        : llmKeySource === "sponsor"
+          ? "Sponsor key"
+          : "Deterministic fallback";
+  const generatedWithLabel =
+    isLLMGenerated && modelLabel
+      ? `${providerLabel ? `${providerLabel} ` : ""}${modelLabel}`
+      : null;
+
   return (
     <div className={cn("border-t border-black/5 px-8 py-6 sm:px-10", className)}>
       <div className="rounded-xl border-l-4 border-l-violet-500 bg-violet-50 px-5 py-4">
@@ -85,6 +109,10 @@ export function UnifiedInsightSection({
             ))}
           </ul>
         ) : null}
+        <p className="mt-4 text-xs text-slate-500">
+          Narrative source: {sourceLabel}
+          {generatedWithLabel ? ` (${generatedWithLabel})` : ""}
+        </p>
       </div>
     </div>
   );