fix(web): unwrap CacheMetaInterceptor envelope + dev port migration + homepage diacritic

Several fixes discovered while smoke-testing the homepage under the new
port layout (web 3200 / api 3201) to avoid clashing with a sibling project:

- analytics-api: add `unwrap<T>()` helper for the `{ data, cacheMeta }`
  envelope the backend CacheMetaInterceptor appends to every
  `/analytics/*` response. Apply to all 9 analytics methods. Without this
  `data.activeCount` (etc.) were `undefined`, crashing KpiStrip with
  `TypeError: Cannot read properties of undefined (reading 'toLocaleString')`.
- public page: hard-coded `city = 'Ho Chi Minh'` returned 0 rows because
  the DB stores `'Hồ Chí Minh'` and the SQL filter is case-insensitive but
  not diacritic-insensitive. Use the accented spelling.
- use-analytics hooks: add `useAuthedAnalytics()` gate so unauthenticated
  visitors on public routes no longer fire 401s from analytics queries.
- next.config.js CSP: add localhost:3200/3201 (http + ws) to connect-src so
  the web origin can reach the relocated API. Without this fetches hit
  `TypeError: Failed to fetch` on login.
- .claude/launch.json + package.json: web → 3200, api → 3201 (was 3000/3001,
  conflicting with the sibling psyforge project also using 3000).
- Minor follow-ups from parallel QA work on this branch (analytics modules,
  notifications gateway, auth test fixtures, trending-areas handler + DTO
  + tests, a few E2E smoke specs).

Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>

apps/web/lib/analytics-api.ts

@@ -1,5 +1,23 @@
 import { apiClient } from './api-client';
 
+/**
+ * Backend `/analytics/*` endpoints are wrapped by `CacheMetaInterceptor`,
+ * returning `{ data: T, cacheMeta: {...} }`. This helper unwraps so callers
+ * receive plain `T` (the cacheMeta field is currently unused on the client).
+ */
+interface CacheMetaEnvelope<T> {
+  data: T;
+  cacheMeta: { cachedAt: string | null; nextRefreshAt: string | null; source: string };
+}
+
+async function unwrap<T>(p: Promise<CacheMetaEnvelope<T> | T>): Promise<T> {
+  const raw = await p;
+  if (raw && typeof raw === 'object' && 'data' in raw && 'cacheMeta' in raw) {
+    return (raw as CacheMetaEnvelope<T>).data;
+  }
+  return raw as T;
+}
+
 export interface MarketReportDistrict {
   district: string;
   city: string;
@@ -201,51 +219,89 @@ export interface TrendingAreasResponse {
 }
 
 export const analyticsApi = {
+  // All /analytics/* endpoints are wrapped by the backend CacheMetaInterceptor.
+  // We unwrap the `{ data, cacheMeta }` envelope so callers get the plain DTO.
   getMarketReport: (city: string, period: string, propertyType?: string) => {
     const params = new URLSearchParams({ city, period });
     if (propertyType) params.set('propertyType', propertyType);
-    return apiClient.get<MarketReportResponse>(`/analytics/market-report?${params}`);
+    return unwrap<MarketReportResponse>(
+      apiClient.get<CacheMetaEnvelope<MarketReportResponse>>(
+        `/analytics/market-report?${params}`,
+      ),
+    );
   },
 
   getHeatmap: (city: string, period: string) => {
     const params = new URLSearchParams({ city, period });
-    return apiClient.get<HeatmapResponse>(`/analytics/heatmap?${params}`);
+    return unwrap<HeatmapResponse>(
+      apiClient.get<CacheMetaEnvelope<HeatmapResponse>>(`/analytics/heatmap?${params}`),
+    );
   },
 
   getPriceTrend: (district: string, city: string, propertyType: string, periods: string[]) => {
     const params = new URLSearchParams({ district, city, propertyType, periods: periods.join(',') });
-    return apiClient.get<PriceTrendResponse>(`/analytics/price-trend?${params}`);
+    return unwrap<PriceTrendResponse>(
+      apiClient.get<CacheMetaEnvelope<PriceTrendResponse>>(
+        `/analytics/price-trend?${params}`,
+      ),
+    );
   },
 
   getDistrictStats: (city: string, period: string) => {
     const params = new URLSearchParams({ city, period });
-    return apiClient.get<DistrictStatsResponse>(`/analytics/district-stats?${params}`);
+    return unwrap<DistrictStatsResponse>(
+      apiClient.get<CacheMetaEnvelope<DistrictStatsResponse>>(
+        `/analytics/district-stats?${params}`,
+      ),
+    );
   },
 
   getNearbyPOIs: (lat: number, lng: number, radius = 2000, limit = 30) =>
-    apiClient.get<NearbyPOIsResponse>(
-      `/analytics/pois/nearby?lat=${lat}&lng=${lng}&radius=${radius}&limit=${limit}`,
+    unwrap<NearbyPOIsResponse>(
+      apiClient.get<CacheMetaEnvelope<NearbyPOIsResponse>>(
+        `/analytics/pois/nearby?lat=${lat}&lng=${lng}&radius=${radius}&limit=${limit}`,
+      ),
     ),
 
   getListingAiAdvice: (listingId: string) =>
-    apiClient.post<ListingAiAdvice>(`/analytics/listings/${listingId}/ai-advice`),
+    unwrap<ListingAiAdvice>(
+      apiClient.post<CacheMetaEnvelope<ListingAiAdvice>>(
+        `/analytics/listings/${listingId}/ai-advice`,
+      ),
+    ),
 
   getProjectAiAdvice: (projectId: string) =>
-    apiClient.post<ProjectAiAdvice>(`/analytics/projects/${projectId}/ai-advice`),
+    unwrap<ProjectAiAdvice>(
+      apiClient.post<CacheMetaEnvelope<ProjectAiAdvice>>(
+        `/analytics/projects/${projectId}/ai-advice`,
+      ),
+    ),
 
   getMarketSnapshot: (city: string, propertyType?: string) => {
     const params = new URLSearchParams({ city });
     if (propertyType) params.set('propertyType', propertyType);
-    return apiClient.get<MarketSnapshotResponse>(`/analytics/market-snapshot?${params}`);
+    return unwrap<MarketSnapshotResponse>(
+      apiClient.get<CacheMetaEnvelope<MarketSnapshotResponse>>(
+        `/analytics/market-snapshot?${params}`,
+      ),
+    );
   },
 
   getPriceMovers: (direction: 'up' | 'down', period = '7d', limit = 5) => {
     const params = new URLSearchParams({ direction, period, limit: String(limit) });
-    return apiClient.get<PriceMoversResponse>(`/analytics/price-movers?${params}`);
+    return unwrap<PriceMoversResponse>(
+      apiClient.get<CacheMetaEnvelope<PriceMoversResponse>>(
+        `/analytics/price-movers?${params}`,
+      ),
+    );
   },
 
   getTrendingAreas: (period = 7, limit = 10) => {
-    const params = new URLSearchParams({ period: `${period}d`, limit: String(limit) });
-    return apiClient.get<TrendingAreasResponse>(`/analytics/trending-areas?${params}`);
+    const params = new URLSearchParams({ period: String(period), limit: String(limit) });
+    return unwrap<TrendingAreasResponse>(
+      apiClient.get<CacheMetaEnvelope<TrendingAreasResponse>>(
+        `/analytics/trending-areas?${params}`,
+      ),
+    );
   },
 };

apps/web/lib/hooks/use-analytics.ts

@@ -1,5 +1,6 @@
 import { useQuery } from '@tanstack/react-query';
 import { analyticsApi } from '@/lib/analytics-api';
+import { useAuthStore } from '@/lib/auth-store';
 
 export const analyticsKeys = {
   all: ['analytics'] as const,
@@ -19,24 +20,43 @@ export const analyticsKeys = {
     ['analytics', 'trending-areas', period] as const,
 };
 
+/**
+ * Analytics endpoints require authentication on the backend. Guard React Query
+ * hooks with `isAuthenticated` so unauthenticated visitors on public routes
+ * (e.g. homepage) do not fire requests that return 401 and spam the console.
+ */
+function useAuthedAnalytics() {
+  const isAuthenticated = useAuthStore((s) => s.isAuthenticated);
+  const isInitialized = useAuthStore((s) => s.isInitialized);
+  // Only enable queries once auth state has initialized to avoid a spurious
+  // disabled → enabled transition on first paint.
+  return isInitialized && isAuthenticated;
+}
+
 export function useMarketReport(city: string, period: string) {
+  const enabled = useAuthedAnalytics();
   return useQuery({
     queryKey: analyticsKeys.marketReport(city, period),
     queryFn: () => analyticsApi.getMarketReport(city, period),
+    enabled,
   });
 }
 
 export function useHeatmap(city: string, period: string) {
+  const enabled = useAuthedAnalytics();
   return useQuery({
     queryKey: analyticsKeys.heatmap(city, period),
     queryFn: () => analyticsApi.getHeatmap(city, period),
+    enabled,
   });
 }
 
 export function useDistrictStats(city: string, period: string) {
+  const enabled = useAuthedAnalytics();
   return useQuery({
     queryKey: analyticsKeys.districtStats(city, period),
     queryFn: () => analyticsApi.getDistrictStats(city, period),
+    enabled,
   });
 }
 
@@ -46,31 +66,38 @@ export function usePriceTrend(
   propertyType: string,
   periods: string[],
 ) {
+  const authed = useAuthedAnalytics();
   return useQuery({
     queryKey: analyticsKeys.priceTrend(district, city, propertyType, periods),
     queryFn: () => analyticsApi.getPriceTrend(district, city, propertyType, periods),
-    enabled: !!district && !!city,
+    enabled: authed && !!district && !!city,
   });
 }
 
 export function useMarketSnapshot(city: string) {
+  const enabled = useAuthedAnalytics();
   return useQuery({
     queryKey: analyticsKeys.marketSnapshot(city),
     queryFn: () => analyticsApi.getMarketSnapshot(city),
     refetchInterval: 5 * 60 * 1000,
+    enabled,
   });
 }
 
 export function usePriceMovers(direction: 'up' | 'down', period = '7d', limit = 5) {
+  const enabled = useAuthedAnalytics();
   return useQuery({
     queryKey: analyticsKeys.priceMovers(direction, period),
     queryFn: () => analyticsApi.getPriceMovers(direction, period, limit),
+    enabled,
   });
 }
 
 export function useTrendingAreas(period = 7, limit = 10) {
+  const enabled = useAuthedAnalytics();
   return useQuery({
     queryKey: analyticsKeys.trendingAreas(period),
     queryFn: () => analyticsApi.getTrendingAreas(period, limit),
+    enabled,
   });
 }