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}`,
+      ),
+    );
   },
 };