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