/** * NuAskSylvan — Time Corridor UI: PAST / NOW / NEXT (fullscreen in app shell when this tab is active). * Time corridor: shared rail height + inbound/outbound dots; PAST / NOW / NEXT **card rows** share one **`TIME_CORRIDOR_GRID`** (`auto 1fr auto 1fr auto 1fr auto`) so dashed joins stay aligned when swiping (no wider center column on NOW). NOW meta band * matches PAST/NEXT row count for aligned rails. Header avatar = profile photo (Flow Plan / cache pattern) → PowerUp; day strip removed. * PAST: **completed** activities only (`activity` local datetime ≤ now) from the loaded itinerary timeline; when none yet (e.g. trip starts tomorrow), the PAST rail shows **ghost** slots — never future stops as if visited. **First paint:** PAST corridor + journey strip + places count initialize as **ghosts / zero** (no `DEMO` POI flash) until `loadPastCorridorData` + `computeTemporalCorridor` run. **Day summary copy:** the “{count} places” line and the **PLACES** ring both use **`placesActivityCount`** (length of **pastOnly**), not the count of filled **visible** corridor slots (**pastRealCount**, max 3). * Day summary + map stay mocked. **Panel strip** (过往 · 当下 · 接下来) below the header jumps/slides the horizontal corridor; corridor meta shows **times row only** above the card rail; localized stat labels on the day-summary grid (discovery is visual — corridor/timeline, no instructional banner). * **Add Here — post-start lock:** For **30 minutes** after the start time of the corridor **previous** activity (`nowPrevCard` source row), **Add Here** is **disabled** (not merely a post-click error); **Replace Next** stays enabled when a real next row exists. While disabled, a **single amber status strip** under the action row explains the gate (same chrome for loading, no-reco, post-start lock, and post-add en-route replace-only). `POST /api/micro-action/propose-slot` returns **`reason_code: "SLOT_AFTER_COMMITMENT"`** when the computed slot would pass the safe window before the next commitment; the UI shows **`nuask_propose_slot_after_commitment`** (10 locales), not raw English `reason` text. * Travel-only mode: when straight-line travel time to the next itinerary stop meets/exceeds the remaining time window, * micro-action POIs are suppressed — UI shows only next-stop guidance (ETA, directions). Background geolocation keeps travel math current. * NOW rail: “Available Window” sits in a full-width row **below** the three-column corridor so dashed connectors stay one straight line; top-reco card uses taller viewport + hero band for more visible detail. * NOW refresh column: **small** confined ripple rings behind the sync orb (`clamp(76px–124px)`), not viewport-sized — avoids phone-wide “radar.” While syncing, the orb’s center specular is hidden so it does not read as a warm dot through the translucent sync mask. Orb glow + TOP header LED use soft gradients / `nuask-led-halo` (no `animate-ping`). * Inline latest reply: optional **hologram** panel (~half viewport) with cyan scan-line styling + **4-button** bar (Back · Full chat · Copy · Clear); keys **1–4** when holo is open; **Back** returns to compact strip; **Expand** restores holo from compact. * NOW top-reco header: HUD-style bar (cyan LED, **Top recommendation** title + tier badge column). Tier copy (**STRONG FIT** / …) uses a **single tap target**: tier pill + amber **!** open the same **popover** (`topRecoHudCaption`). **Alternatives** heading + **!** share one **button**; POI-hours **short line + !** share one **button**. Popovers: **Escape** / scoped **pointerdown outside** / **Got it** (`data-nuask-explain-root`). Sync orb halos use **`nuask-orb-idle-breathe`** (theme keyframes: **~1.28×** peak scale, same 2s cadence + opacity swing) so the pulse reads around the static 62px core. * Alternatives: rows show **PERSONALIZED** / **NEXT BEST** tier chips (violet vs slate) when the API sends `recommendation_tier`; catalog **#1** (`nowRecoOptions[0]`) can still show an emerald **STRONG FIT** chip when that row is the ranked-first POI. Tapping an alternative **snaps** the NOW inner scroll surface (`nowSectionScrollRef`) to **top**. * TOP reco HUD+: loading sync intensifies grid/LED/badge; subtle SVG noise on header. * TOP reco shell: **static** full-perimeter ring + inner card surface; hero photo fallbacks: POI media → next itinerary activity image → map tile. * TOP reco gate: full recommendation container is hidden until the first refresh cycle completes; while awaiting/syncing, a tech “Enter the fray” hold screen shows; on reveal, a short blur/translate-in animation runs. * NEXT: **same time-corridor contract** as PAST/NOW — `CORRIDOR_META_BAND` wraps **times row only** (`TIME_CORRIDOR_GRID`), then card rail; third slot uses **`nextAfterCard`** from the **second future** itinerary activity (demo strip when none). Below the rail, **Upcoming highlight** and **After that** sit in the same **`bg-[#030303]`** section shells as PAST **Journey moments**. Highlight hero: activity photo → else **map-image** tile; body from **`nextHighlightBody`**; meta **`nextHighlightDistanceLine`** when coords exist; **`nextHighlightThumbMapUrl`** is a small map **preview** beside “View on Map” (also links to directions when available)—not a help icon; map tile labels use **ASCII** (`mapLabelLetter`) so markers are not emoji “?”. **After that** uses the same **tall image + text** journey-card pattern as PAST when `imageUrl` / itinerary exists. * NOW hotbar (panel NOW): **Explore Nearby** → **`NuAskNearbyPoisShell`** (`POST /api/nuask/nearby-pois` with **`nearby_personality_focus: true`**: catalog still **near** device coords, but Smart Brain passes **`extractTravelerTags`** + optional **must-match** into POI Catalog and sorts **catalog score then distance**); hotkey icon = **📍** map-pin emoji with a light **CSS hue-rotate** so default red reads **emerald** (matches tile `ring`/`glow`); not a custom SVG pin. **Improve Plan** → **`NuAskWeatherPlanShell`** (`POST /api/nuask/weather-day-suggest`); **Use My Time** → **`NuAskUseMyTimeShell`**: **`POST /api/nuask/nearby-pois`** without personality flag, client **gap-fit** labels (travel + dwell vs **Available Window** minutes)—time-budget lane (Ask Sylvan via NOW hotkeys / TV chat, no in-shell CTA). **Emergency** POSTs `EMERGENCY` chat, **`NuAskEmergencyShell`** until Back/Cancel. * **Trip keys:** **`corridorTripKey`** feeds corridor/display + **`GET …/itineraries/:tripKey`**. Mutation bodies (**`/api/micro-action/select`**, **`/api/nuask/weather-day-suggest`**) attach **`trip_key`** only from **`corridorMutationTripKey`** (**`is_today_plan`** row); omitted when none (pairs Smart Brain Issue **#61**). * **SPA (AppShell):** For \`nu-ask-sylvan\`, \`pages/app.js\` **hides** app-shell bottom tabs and passes \`embeddedAppShell: false\` so this page renders **\`InternalShellTwinNav\`** (**Power Up · Explore**) beneath the inline chat strip. **NOW dock (Explore parity):** four hotkeys use **\`shellTwinDockOuter\` / \`shellTwinDockHubInner\`** (same tokens as Explore/Power Up hub); the **chat** band uses the same **\`#030508\` / hairline \`border-t\`** treatment as the immersive shell (no extra pulse — matches Explore hub calm strip); **\`InternalShellTwinNav\`** uses **\`staticTwinEdge\`** so the **60px twin** strip keeps **\`sf-twin-shell-nav-pulse\`** alone (same as Explore twin). **NOW panel:** corridor strip stays fixed; **TV frame** (\`rounded-[13px]\` / \`overflow-hidden\`) uses **\`SYLVAN_TECH_THEME.classes.dockScrollPaddingBottom\`** + **\`tvRimMaxHeight\`** so the plate stays **above** the fixed **four NOW hotkeys** + chat + twin nav (hotkeys sit directly on top of the chat composer band; chat sits directly on top of twin nav, \`gap-0\`). Inner \`overflow-y-auto overscroll-y-contain\` only. **Open full chat** on NOW mounts **\`AskSylvanPage\`** (\`embeddedExploreTv\`) inside that TV frame — **NOW-only**; PAST/NEXT omit that control. * * **Responsive contract:** layout tokens mirror **`window.SYLVAN_TECH_THEME.layout`** (`pages/shared/sylvan-tech-theme.js`) and are bound here as **`NUASK_LAYOUT`** (with inline fallback if the script is absent). Typical manual QA is **iPhone 14 Pro Max** (~430×932 CSS px); do not add viewport-specific `sm:`/`md:` hacks for that frame—change the shared layout so **360–440px-wide** phones share the same behavior. */ (function () { 'use strict'; const { useState, useRef, useEffect, useLayoutEffect, useMemo, useCallback } = React; const FONT = "-apple-system, BlinkMacSystemFont, 'SF Pro Text', 'Inter', 'Segoe UI', Roboto, sans-serif"; const ST = typeof window !== 'undefined' && window.SYLVAN_TECH_THEME ? window.SYLVAN_TECH_THEME : null; /** Add Here disabled for this many ms after the corridor “previous” activity start (Replace Next stays available). */ const NUASK_ACTIVITY_POST_START_ADD_LOCK_MS = 30 * 60 * 1000; /** Reference accent ≈ #2DE2C5 — from shared theme when loaded */ const C = ST?.palette || { accent: '#2DE2C5', accentMuted: 'rgba(45,226,197,0.35)', accentSoft: 'rgba(45,226,197,0.12)', bg: '#000000', card: '#111111', stroke: 'rgba(45,226,197,0.45)' }; const DEMO = { nowLocal: '1:48 PM', windowEnd: '3:00 PM', windowMins: 42, prevTime: '11:30 AM', prevStop: 'ArtScience Museum', nextStop: 'Merlion Park', nextTime: '3:00 PM', pastStops: [ { time: '8:30 AM', title: 'Changi Airport', sub: 'Arrived', icon: '✈️' }, { time: '10:00 AM', title: 'Marina Bay Walk', sub: 'Walk', icon: '🚶' }, { time: '11:30 AM', title: 'ArtScience Museum', sub: 'Visited', icon: '🚶' } ], stats: { places: 3, steps: '8,432', distance: '6.8 km', duration: '3h 15m', energy: 'High' }, reco: { name: '% Arabica Coffee', tag: 'STRONG FIT', lineWalk: '5 min walk (0.4 km)', lineDwell: '35 min (Ideal duration)', lineRating: '4.6 (1.2k reviews)', blurb: 'Great coffee, calm vibe. Just 5 min walk from here.' }, merlionDesc: 'Iconic Singapore landmark with amazing photo spots.', afterThat: { time: '4:00 PM', title: 'Gardens by the Bay', sub: 'Explore' }, /** NOW hotbar — matches decision-radar spec; `target` null = mock only; per-tile glow + ring tint */ nowHotbar: [ { key: 'nearby', title: 'Explore Nearby', sub: 'Nearby picks ranked to your profile & personality.', icon: 'pin', glow: 'rgba(34,197,94,0.35)', ring: 'rgba(52,211,153,0.4)', target: null }, { key: 'improve', title: 'Improve Plan', sub: 'Weather vs today’s stops.', icon: 'sliders', glow: 'rgba(56,189,248,0.35)', ring: 'rgba(125,211,252,0.4)', target: null }, { key: 'time', title: 'Use My Time', sub: 'What fits your window.', icon: 'stopwatch', glow: 'rgba(167,139,250,0.35)', ring: 'rgba(196,181,253,0.4)', badgeMins: true, target: null }, { key: 'emergency', title: 'Emergency', sub: 'Quick help if needed.', icon: 'shield', glow: 'rgba(248,130,18,0.35)', ring: 'rgba(251,162,52,0.4)', target: null } ] }; /** * Single layout contract for **all phone widths** (360–440 CSS px): rem + svh/dvh + one max column width. * Canonical values live in `pages/shared/sylvan-tech-theme.js` — keep this fallback in sync. */ const NUASK_LAYOUT = ST?.layout || { shell: 'relative mx-auto flex h-full min-h-0 w-full max-w-[440px] flex-col overflow-x-hidden text-white [touch-action:manipulation]', sectionPad: 'px-4 pt-3', nowSectionPad: 'px-4 pt-3', recoTopDefault: 'relative overflow-x-hidden rounded-2xl p-[2px]', recoTopOverlay: 'relative overflow-x-hidden rounded-2xl p-[2px]' }; /** * NOW TV corridor — same contract as Explore (`ExplorePage.jsx` exploreMainColumn + tv rim) and Power Up: * bottom padding clears the fixed hotbar + twin-nav stack; rim max-height caps the plate above the dock. * Source of truth: `pages/shared/sylvan-tech-theme.js` → `classes.dockScrollPaddingBottom`, `classes.tvRimMaxHeight`. */ const NUASK_NOW_DOCK_SCROLL_PB = ST?.classes?.dockScrollPaddingBottom || 'pb-[max(0.75rem,calc(9.25rem+env(safe-area-inset-bottom)))]'; const NUASK_NOW_TV_RIM_MAX = ST?.classes?.tvRimMaxHeight || 'max-h-[min(82svh,calc(100dvh-9.25rem-env(safe-area-inset-bottom)))]'; /** Panel titles/subtitles default from `pages/logic/nuask-ui-i18n-bootstrap.js` → `window.NUASK_UI_DEFAULTS` */ /** zh-CN (and future) packs from `pages/logic/nuask-ui-lang-packs.js` — generated by `scripts/merge-nuask-now-ui-strings.js`. */ /** Match Smart Brain `/api/sys-message` normalization (`zh` → `zh-CN`). */ function normalizeNuAskUiLang(code) { if (!code || typeof code !== 'string') return 'en'; const l = code.trim().toLowerCase(); if (l === 'zh' || l === 'zh-cn' || l === 'chinese') return 'zh-CN'; return code.trim(); } /** * PROFILE_KV `preferred_language` is sole preference authority (SYSTEM_MAP). * NuAsk uses this for STT `languageCode`, chat payloads, and SYS/UI locale — then app language state / cache. */ function resolveNuAskPreferredLanguageCode() { if (typeof window === 'undefined') return 'en'; try { const pl = window.SylvanFlowState?.getProfile?.()?.preferred_language; if (typeof pl === 'string' && pl.trim()) return pl.trim(); } catch (e) { /* noop */ } try { const gl = window.SylvanFlowState?.getLanguage?.(); if (typeof gl === 'string' && gl.trim()) return gl.trim(); } catch (e2) { /* noop */ } return 'en'; } /** English defaults overlaid with embedded locale pack when KV has not hydrated yet (avoids English UI for zh users). */ function buildNuAskUiStringBase(langCode) { const defaults = typeof window !== 'undefined' && window.NUASK_UI_DEFAULTS ? { ...window.NUASK_UI_DEFAULTS } : {}; const n = normalizeNuAskUiLang(langCode); const packs = typeof window !== 'undefined' ? window.NUASK_UI_LANG_PACKS : null; if (n === 'zh-CN' && packs && packs['zh-CN']) { return { ...defaults, ...packs['zh-CN'] }; } return defaults; } function arrayBufferToBase64(buffer) { const bytes = new Uint8Array(buffer); const chunk = 0x8000; let binary = ''; for (let i = 0; i < bytes.length; i += chunk) { const slice = bytes.subarray(i, i + chunk); binary += String.fromCharCode(...slice); } return btoa(binary); } /** Inline composer is plain text only — strip common markdown so **bold** does not show asterisks. */ function plainTextFromChatMarkdown(s) { if (typeof s !== 'string' || !s) return ''; let t = s.replace(/\r\n/g, '\n'); t = t.replace(/\*\*([^*]+)\*\*/g, '$1'); t = t.replace(/\*([^*]+)\*/g, '$1'); t = t.replace(/`([^`]+)`/g, '$1'); return t.trim(); } const SF_API_BASE = typeof window !== 'undefined' && window.SF_API_BASE ? window.SF_API_BASE : ''; const SMART_BRAIN_MEDIA_BASE = 'https://smart-brain.foofiebean.workers.dev'; const SYLVANFLOW_LOGO_ASSET = '/assets/sylvanflow-logo.png'; function normalizeRecoImageUrl(rawUrl) { const s = asText(rawUrl); if (!s) return ''; // Catalog can provide photo tokens like "places//photos/". // Convert these into proxy URLs that browser can load directly. if (s.startsWith('places/')) { return `${SMART_BRAIN_MEDIA_BASE}/place-photo?photo_name=${encodeURIComponent(s)}&maxwidth=800`; } return s; } function resolveRecoMediaImageUrl(poi) { const coverUrl = asText(poi?.media?.cover_image_url); if (coverUrl) return coverUrl; const coverKey = asText(poi?.media?.cover_image_r2_key || poi?.media?.cover_r2_key); if (coverKey) return `${SMART_BRAIN_MEDIA_BASE}/poi-image?key=${encodeURIComponent(coverKey)}`; const mediaImages = Array.isArray(poi?.media?.images) ? poi.media.images : []; for (const img of mediaImages) { if (typeof img === 'string' && img) return normalizeRecoImageUrl(img); const u = asText(img?.url || img?.src); if (u) return normalizeRecoImageUrl(u); const k = asText(img?.r2_key || img?.key); if (k) return `${SMART_BRAIN_MEDIA_BASE}/poi-image?key=${encodeURIComponent(k)}`; } return ''; } /** * 5-day flow plan (catalog POIs) repeated across a fixed test window — from POI catalog * `data/poi-catalogs/global/r2_global_1.4_103.8_ac.json`. Client-only PAST corridor (not ITINERARY_KV). */ const NUASK_FIVE_DAY_FLOW_PLAN_POIS = [ { name: 'Gardens by the Bay', place_id: 'ChIJMxZ-kwQZ2jERdsqftXeWCWI', address: '18 Marina Gardens Dr, Singapore 018953', lat: 1.2815683, lng: 103.8636132 }, { name: 'Marina Bay Sands Singapore', place_id: 'ChIJA5LATO4Z2jER111V-v6abAI', address: '10 Bayfront Ave, Singapore 018956', lat: 1.2837574999999999, lng: 103.8591065 }, { name: 'Singapore Botanic Gardens', place_id: 'ChIJvWDbfRwa2jERgNnTOpAU3-o', address: '1 Cluny Rd, Singapore 259569', lat: 1.3138397, lng: 103.8159136 }, { name: 'National Museum of Singapore', place_id: 'ChIJD1u-EaMZ2jERaLhNfFkR45I', address: '93 Stamford Rd, Singapore 178897', lat: 1.296613, lng: 103.84850910000002 }, { name: 'Merlion Park', place_id: 'ChIJBTYg1g4Z2jERp_MBbu5erWY', address: '1 Fullerton Rd, Singapore 049213', lat: 1.2867449, lng: 103.85438719999999 } ]; const NUASK_SYNTHETIC_REGION = 'global_1.4_103.8'; /** * Apr 30 → May 20 (inclusive), current calendar year: one activity per day, 8 AM–11 PM, * POI = NUASK_FIVE_DAY_FLOW_PLAN_POIS[dayOffset % 5] (5-day pattern repeats). */ function buildSyntheticApr30ToMay20PastItinerary() { const items_by_day = {}; const year = new Date().getFullYear(); const cursor = new Date(year, 3, 30); cursor.setHours(0, 0, 0, 0); const end = new Date(year, 4, 20); end.setHours(0, 0, 0, 0); let cycleIndex = 0; for (; cursor.getTime() <= end.getTime(); cursor.setDate(cursor.getDate() + 1)) { const y = cursor.getFullYear(); const mo = String(cursor.getMonth() + 1).padStart(2, '0'); const da = String(cursor.getDate()).padStart(2, '0'); const dayKey = `${y}-${mo}-${da}`; const p = NUASK_FIVE_DAY_FLOW_PLAN_POIS[cycleIndex % NUASK_FIVE_DAY_FLOW_PLAN_POIS.length]; cycleIndex += 1; const label = cursor.toLocaleDateString(undefined, { month: 'short', day: 'numeric' }); items_by_day[dayKey] = [ { title: p.name, Title: p.name, start_time: '8:00 AM', start_time_local: `${label} · 8:00 AM`, end_time: '11:00 PM', end_time_local: '11:00 PM', location: p.address, Location: p.address, place_id: p.place_id, lat: p.lat, lng: p.lng, activity_type: '8 AM – 11 PM', catalog_region_key: NUASK_SYNTHETIC_REGION, description: `NuAsk PAST synthetic · 5-day loop day ${((cycleIndex - 1) % 5) + 1}/5 · not persisted.` } ]; } return { items_by_day, tz: 'Asia/Singapore' }; } /** Flatten itinerary activities in day order (sorted day keys). */ function flattenItineraryActivities(itinerary) { const itemsByDay = itinerary?.items_by_day; if (!itemsByDay || typeof itemsByDay !== 'object') return []; const entries = Object.entries(itemsByDay).sort(([a], [b]) => String(a).localeCompare(String(b))); const out = []; for (const [dayKey, activities] of entries) { if (Array.isArray(activities)) { for (let i = 0; i < activities.length; i++) { const act = activities[i]; if (!act || typeof act !== 'object') continue; if (act._hidden === true || act.hidden === true) continue; out.push({ ...act, __dayKey: dayKey, __activityIndex: i }); } } } return out; } function formatActivityTimeLabel(activity) { const raw = activity.start_time_local || activity.start_time || activity.Start_Time || ''; if (raw == null || raw === '') return '—'; const s = String(raw).trim(); const mins = parseTimeToMinutes(s); if (mins != null) { const d = new Date(); d.setHours(Math.floor(mins / 60), mins % 60, 0, 0); return formatTimeLabel(d); } try { const d = new Date(s); if (!Number.isNaN(d.getTime())) { return d.toLocaleTimeString(undefined, { hour: 'numeric', minute: '2-digit' }); } } catch (e) { /* ignore */ } return s.length > 12 ? `${s.slice(0, 12)}…` : s; } function getActivityLocationLabel(activity) { const loc = activity.location || activity.Location || ''; if (loc && typeof loc === 'object') { const fromObj = loc.address || loc.name || loc.Location || ''; return String(fromObj || '').trim(); } return String(loc || '').trim(); } function asText(value) { if (value == null) return ''; if (typeof value === 'string') return value.trim(); if (typeof value === 'number' || typeof value === 'boolean') return String(value); return ''; } /** One ASCII letter for static map tile markers — raw emoji first-char can render as "?" on map previews. */ function mapLabelLetter(title) { const s = asText(title); const m = s.match(/[A-Za-z0-9]/); return m ? m[0].toUpperCase() : 'N'; } function renderCorridorIcon(iconValue, isPlaceholder) { if (isPlaceholder) { return ( SylvanFlow ); } return <>{iconValue}; } function extractActivityCoords(activity) { if (!activity || typeof activity !== 'object') return null; const normalize = (latRaw, lngRaw) => { const a = Number(latRaw); const b = Number(lngRaw); if (!Number.isFinite(a) || !Number.isFinite(b)) return null; if (Math.abs(a) <= 90 && Math.abs(b) <= 180) return { lat: a, lng: b }; // Defensive swap for legacy/shapeshifted rows with reversed fields. if (Math.abs(b) <= 90 && Math.abs(a) <= 180) return { lat: b, lng: a }; return null; }; const pick = (obj) => { if (!obj || typeof obj !== 'object') return null; return ( normalize(obj.lat ?? obj.latitude ?? obj.Lat, obj.lng ?? obj.longitude ?? obj.Lng) || normalize(obj.coord_lat ?? obj.coordLat, obj.coord_lng ?? obj.coordLng) ); }; const locObj = activity.location && typeof activity.location === 'object' && !Array.isArray(activity.location) ? activity.location : activity.Location && typeof activity.Location === 'object' && !Array.isArray(activity.Location) ? activity.Location : null; const extrasObj = activity.extras && typeof activity.extras === 'object' && !Array.isArray(activity.extras) ? activity.extras : null; const candidates = [ activity, locObj, activity.coords, activity.coordinates, extrasObj?.coord, locObj?.coord ]; for (const c of candidates) { const v = pick(c); if (v) return v; } return null; } function isChinaCoords(coords) { if (!coords) return false; const lat = Number(coords.lat); const lng = Number(coords.lng); if (!Number.isFinite(lat) || !Number.isFinite(lng)) return false; return lat >= 18.0 && lat <= 54.0 && lng >= 73.0 && lng <= 135.0; } function pickActivityIcon(activity, fallbackIndex) { const text = [ asText(activity.title), asText(activity.Title), asText(activity.activity_type), asText(activity.Activity_Type), asText(activity.category), asText(activity.description), asText(activity.Description), getActivityLocationLabel(activity) ] .join(' ') .toLowerCase(); if (/airport|changi|flight|arriv|depart|terminal|航班|机场|抵达/.test(text)) return '✈️'; if (/hotel|check.?in|stay|住宿|酒店/.test(text)) return '🏨'; if (/dinner|lunch|breakfast|restaurant|food|cafe|bar|hawker|晚餐|午餐|早餐|餐|吃/.test(text)) return '🍽️'; if (/museum|gallery|artscience|历史|博物馆|展览/.test(text)) return '🏛️'; if (/garden|park|bay|botanic|nature|海湾|花园|公园/.test(text)) return '🌿'; if (/temple|mosque|church|cathedral|monastery|庙|清真寺|教堂/.test(text)) return '🛕'; if (/walk|stroll|hike|trail|漫步|步行|徒步/.test(text)) return '🚶'; if (/shopping|mall|market|shop|购物|商场/.test(text)) return '🛍️'; if (/zoo|safari|aquarium|ocean|wild|动物园|夜间野生动物/.test(text)) return '🦁'; const icons = ['📍', '🚶', '🌿']; return icons[fallbackIndex % icons.length]; } function activityToPastStop(activity, index) { const title = asText(activity.title) || asText(activity.Title) || 'Activity'; const location = getActivityLocationLabel(activity); const sub = asText(activity.activity_type) || asText(activity.Activity_Type) || asText(activity.category) || (location ? String(location).split(',')[0] : '') || 'Stop'; return { time: formatActivityTimeLabel(activity), title, sub: sub.length > 16 ? `${sub.slice(0, 14)}…` : sub, icon: pickActivityIcon(activity, index) }; } function buildPastStopsRow(activities, placeholder) { const ghost = placeholder || { time: '—', title: '—', sub: '—', icon: '◌', ghost: true }; const fromApi = activities.slice(0, 3).map((a, i) => activityToPastStop(a, i)); const out = [ghost, ghost, ghost]; const start = Math.max(0, 3 - fromApi.length); for (let i = 0; i < fromApi.length; i++) out[start + i] = fromApi[i]; return out; } function buildPastCardTargets(activities, tripKey) { const realTargets = activities.slice(0, 3).map((a) => { if (!a || !tripKey || !a.__dayKey || a.__activityIndex == null) return null; return { tripKey, dayKey: a.__dayKey, activityIndex: a.__activityIndex, activity: a }; }); const out = [null, null, null]; const start = Math.max(0, 3 - realTargets.length); for (let i = 0; i < realTargets.length; i++) out[start + i] = realTargets[i]; return out; } function getActivityImageUrl(activity) { return ( asText(activity.image_url) || asText(activity.Image_URL) || asText(activity.photo_url) || asText(activity.Photo_URL) || '' ); } function buildPastJourneyItems(activities, placeholder) { const real = activities.slice(0, 3).map((a, idx) => ({ time: formatActivityTimeLabel(a), title: asText(a.title) || asText(a.Title) || `Stop ${idx + 1}`, subtitle: getActivityLocationLabel(a) || asText(a.activity_type) || 'Journey', imageUrl: getActivityImageUrl(a), icon: pickActivityIcon(a, idx) })); const ghost = placeholder || { time: '—', title: '—', subtitle: '—', imageUrl: '', icon: '◌', ghost: true }; const out = [ghost, ghost, ghost]; const start = Math.max(0, 3 - real.length); for (let i = 0; i < real.length; i++) out[start + i] = real[i]; return out; } /** First paint before corridor fetch — same shape as `buildPastStopsRow([], …)` ghosts (no demo POI flash). */ const NUASK_INITIAL_PAST_STOP_GHOST = { time: '—', title: '—', sub: '—', icon: '◌', ghost: true }; const NUASK_INITIAL_PAST_STOPS_ROW = [ NUASK_INITIAL_PAST_STOP_GHOST, NUASK_INITIAL_PAST_STOP_GHOST, NUASK_INITIAL_PAST_STOP_GHOST ]; const NUASK_INITIAL_PAST_JOURNEY_GHOST = { time: '—', title: '—', subtitle: '—', imageUrl: '', icon: '◌', ghost: true }; const NUASK_INITIAL_PAST_JOURNEY_ITEMS = [ NUASK_INITIAL_PAST_JOURNEY_GHOST, NUASK_INITIAL_PAST_JOURNEY_GHOST, NUASK_INITIAL_PAST_JOURNEY_GHOST ]; function parseTimeToMinutes(raw) { const s = asText(raw).toUpperCase(); if (!s) return null; const m12 = s.match(/^(\d{1,2}):(\d{2})\s*(AM|PM)$/); if (m12) { let h = Number(m12[1]) % 12; const mins = Number(m12[2]); if (m12[3] === 'PM') h += 12; return h * 60 + mins; } const m24 = s.match(/^(\d{1,2}):(\d{2})$/); if (m24) { return Number(m24[1]) * 60 + Number(m24[2]); } return null; } function getActivityDateTime(activity) { const dayKey = asText(activity.__dayKey); if (!dayKey) return null; const mins = parseTimeToMinutes(activity.start_time_local || activity.start_time || activity.Start_Time); if (mins == null) return null; const [y, m, d] = dayKey.split('-').map((v) => Number(v)); if (!y || !m || !d) return null; const dt = new Date(y, m - 1, d, 0, 0, 0, 0); dt.setMinutes(mins); return dt; } function formatTimeLabel(date) { return date.toLocaleTimeString(undefined, { hour: 'numeric', minute: '2-digit' }); } function formatDistanceLabel(km) { const n = Number(km); if (!Number.isFinite(n)) return ''; if (n < 1) return `${Math.round(n * 1000)} m`; return `${n.toFixed(1)} km`; } /** Great-circle distance for transparent “leg” estimates (not routing). */ function haversineKm(lat1, lng1, lat2, lng2) { const a1 = Number(lat1); const o1 = Number(lng1); const a2 = Number(lat2); const o2 = Number(lng2); if (![a1, o1, a2, o2].every((x) => Number.isFinite(x))) return null; const R = 6371; const toRad = (d) => (d * Math.PI) / 180; const dLat = toRad(a2 - a1); const dLng = toRad(o2 - o1); const h = Math.sin(dLat / 2) ** 2 + Math.cos(toRad(a1)) * Math.cos(toRad(a2)) * Math.sin(dLng / 2) ** 2; return 2 * R * Math.asin(Math.min(1, Math.sqrt(h))); } /** Rough drive-time hint from straight-line km (catalog uses straight-line from device location). */ function roughUrbanDriveMinutes(km, urbanKmh) { const k = Number(km); const v = Number(urbanKmh) > 0 ? Number(urbanKmh) : 22; if (!Number.isFinite(k) || k < 0) return null; return Math.max(1, Math.round((k / v) * 60)); } function joinTagList(tags, maxItems) { const arr = Array.isArray(tags) ? tags.filter(Boolean).map((t) => String(t).trim()).filter(Boolean) : []; const cap = typeof maxItems === 'number' ? maxItems : 8; if (arr.length === 0) return ''; const shown = arr.slice(0, cap); const extra = arr.length > cap ? ` (+${arr.length - cap} more)` : ''; return `${shown.join(', ')}${extra}`; } function formatDurationMins(minsInput) { const mins = Math.max(0, Math.round(Number(minsInput) || 0)); const h = Math.floor(mins / 60); const m = mins % 60; if (h <= 0) return `${m}m`; if (m <= 0) return `${h}h`; return `${h}h ${m}m`; } /** Walking pace for short legs — “Use My Time” gap estimates (tourist on foot). */ function roughWalkMinutes(km) { const k = Number(km); const walkKmh = 5; if (!Number.isFinite(k) || k < 0) return null; return Math.max(1, Math.round((k / walkKmh) * 60)); } /** * Travel minutes for gap-fit: walk if ≤2 km straight-line, else urban straight-line pace (matches other NOW copy). */ function roughTravelMinutesForGap(km) { const k = Number(km); if (!Number.isFinite(k) || k < 0) return null; if (k <= 2) return roughWalkMinutes(k); return roughUrbanDriveMinutes(k); } /** Heuristic dwell for “does this POI fit the gap?” — catalog category string only (no new backend). */ function estimateDwellMinutesForGap(primaryCategory) { const c = String(primaryCategory || '').toLowerCase(); if (/meal|restaurant|food|cafe|coffee|dining|bar|bakery|bistro/.test(c)) return 45; if (/museum|gallery|art/.test(c)) return 75; if (/park|garden|nature|trail|beach|zoo|wildlife/.test(c)) return 40; if (/shop|mall|market|retail|store/.test(c)) return 35; if (/temple|church|mosque|historic|monument|landmark|attraction|walking/.test(c)) return 35; return 35; } const GAP_BUFFER_MIN = 5; /** Labels POIs for Use My Time: comfortable / tight / skip vs remaining window. */ function buildGapFitRows(pois, windowMins) { const W = Math.max(0, Math.round(Number(windowMins) || 0)); const list = Array.isArray(pois) ? pois : []; const rows = list.map((poi) => { const dm = typeof poi.distance_m === 'number' ? poi.distance_m : null; const km = dm != null ? dm / 1000 : null; const travelMin = km != null ? roughTravelMinutesForGap(km) : null; const dwellMin = estimateDwellMinutesForGap(poi.primary_category); const totalMin = travelMin != null ? travelMin + dwellMin + GAP_BUFFER_MIN : null; let fit = 'unknown'; if (totalMin != null && W > 0) { if (totalMin <= W * 0.55) fit = 'comfortable'; else if (totalMin <= W) fit = 'tight'; else fit = 'skip'; } else if (W <= 0) fit = 'skip'; return { poi, km, travelMin, dwellMin, totalMin, fit }; }); const rank = { comfortable: 0, tight: 1, skip: 2, unknown: 3 }; rows.sort((a, b) => { const da = a.totalMin != null ? a.totalMin : 9999; const db = b.totalMin != null ? b.totalMin : 9999; if (rank[a.fit] !== rank[b.fit]) return rank[a.fit] - rank[b.fit]; return da - db; }); return rows; } function formatClientDayKeyLocal(date) { const y = date.getFullYear(); const m = String(date.getMonth() + 1).padStart(2, '0'); const d = String(date.getDate()).padStart(2, '0'); return `${y}-${m}-${d}`; } function offsetDayKeyLocal(baseDate, deltaDays) { const d = new Date(baseDate); d.setHours(12, 0, 0, 0); d.setDate(d.getDate() + Number(deltaDays || 0)); return formatClientDayKeyLocal(d); } function formatClientLocalHHMM(date) { const h = String(date.getHours()).padStart(2, '0'); const m = String(date.getMinutes()).padStart(2, '0'); return `${h}:${m}`; } function getRecoKey(opt, idx) { return String(opt?.id || opt?.poi_id || `reco-${idx}`); } /** One horizontal “rail” height so PAST / NOW / NEXT icon axis lines up when swiping (time corridor). Match NOW refresh orb column (~120px). */ const CORRIDOR_RAIL_H = 'min-h-[120px]'; /** * **Identical** 7-column template on PAST / NOW / NEXT: inbound · card · dash · card · dash · card · outbound. * All three card slots are equal `1fr` so dashed segments share the same horizontal rhythm when the snap scroller moves — a wider center (e.g. `1.35fr`) skewed dashes at panel joins. Center column still fits the 120px orb via inner `max-w-[120px]` + `mx-auto`. */ const TIME_CORRIDOR_GRID = 'grid grid-cols-[auto_1fr_auto_1fr_auto_1fr_auto] items-center gap-[2px]'; /** Meta band above the card rail (times row only — slot caption row removed). */ const CORRIDOR_META_BAND = 'mb-1.5'; /** Teal dashed segment (horizontal). */ function CorridorDash() { return
; } /** Endpoint / handoff node on the corridor rail. */ function CorridorEndDot() { return (
); } /** Solid teal cap — hands off to the next panel’s inbound dot (time corridor). */ function CorridorTrailCap() { return (
); } /** Inbound handoff from the previous panel (matches trail cap / prior dot). */ function CorridorInbound() { return (
); } /** Outbound handoff into the next panel (pairs with NEXT / NOW inbound dot). */ function CorridorOutbound() { return (
); } /** * Same horizontal footprint as `CorridorInbound` / `CorridorOutbound` but **no** rail `min-h-[120px]`. * Use in NOW micro-label + time rows only. Full corridor widgets reserve ~120px for card-row alignment; using them * (even with `invisible`) in label rows forced those rows to ~120px tall — huge gaps above/below the clock line vs PAST/NEXT. */ function CorridorInboundLabelAlign() { return (
); } function CorridorOutboundLabelAlign() { return (
); } function corridorNavigate(view) { const legalAgreed = localStorage.getItem('sylvanflow_legal_agreed'); const restrictedTabs = ['explore', 'ask-sylvan', 'nu-ask-sylvan']; if (restrictedTabs.includes(view) && !legalAgreed) { // SF_ALLOW_HARDEXIT_REDIRECT window.location.href = '/legal?return=/app'; return; } if (window.appState && typeof window.appState.set === 'function') { window.appState.set({ view }); } } function SlidersIconBrand() { /** Same sky accent as Explore `flowPick` + Power Up `flow-finder` hub slot (second tile). */ const stroke = '#bae6fd'; const strokeSoft = 'rgba(125,211,252,0.72)'; return ( ); } function HotbarIcon({ spec }) { if (spec.icon === 'sliders') return ; if (spec.icon === 'pin') { /** Classic 📍 (same glyph as before SVG swap); hue-rotate nudges platform “red pin” toward emerald to align with `spec.ring` / tile chrome. */ return ( 📍 ); } if (spec.icon === 'stopwatch') return ⏱; if (spec.icon === 'shield') return 🛡️; return null; } /** * Inline Crisis HUD for NOW hotbar Emergency: rose conic rim, LED + mono telemetry header, optional sweep. * Wraps `EmergencyInApp` with `embedded` so the list sits on transparent bg inside the dark shell. */ function NuAskEmergencyShell({ phase, errorMessage, emergencyId, languageCode: emergencyLang, onBack, onCancel, onRetry, nuAskT }) { const t = nuAskT || {}; const roseGlow = 'rgba(244, 63, 94, 0.42)'; const headerChrome = (rightSlot) => (

{t.emergencyCrisisLink || 'Crisis link'}

{t.emergencyHeaderTitle || 'Emergency'}

{rightSlot}
); return (
{phase === 'loading' ? ( <> {headerChrome( )}

{t.emergencyProtocol || 'Emergency protocol'}

{t.emergencyConnecting || 'Connecting…'}

{t.emergencyConnectHint || 'Same request as typing EMERGENCY in Ask Sylvan — resolving services for your location.'}

) : null} {phase === 'error' ? ( <> {headerChrome( )}

{errorMessage && String(errorMessage).trim() ? errorMessage : t.emergencyRequestFailed || 'Request failed. Try again or use Ask Sylvan.'}

) : null} {phase === 'ready' && emergencyId ? ( <> {headerChrome( )}
{typeof window !== 'undefined' && window.EmergencyInApp ? React.createElement(window.EmergencyInApp, { tabParams: { emergency_id: emergencyId, mode: 'emergency', languageCode: emergencyLang || undefined }, embedded: true }) : (

{t.emergencyModuleNotLoaded || 'Emergency UI module not loaded.'}

)}
) : null}
); } /** * NOW hotbar **Explore Nearby**: ~5 catalog POIs near you, ranked by **traveler tags + personality** (catalog score), then distance (`nearby_personality_focus` on API). */ function NuAskNearbyPoisShell({ phase, errorMessage, pois, onBack, nuAskT }) { const t = nuAskT || {}; return (

{t.shellNearbyKicker || 'Nearby'}

{t.shellNearbyTitle || 'Explore Nearby'}

{phase === 'loading' ? (

{t.loadingNearbyPois || 'Loading catalog POIs…'}

) : null} {phase === 'error' ? (

{errorMessage}

) : null} {phase === 'ready' && (!pois || pois.length === 0) ? (

{t.noPoisInRange || 'No catalog POIs in range.'}

) : null} {phase === 'ready' && pois && pois.length > 0 ? (
    {pois.map((poi, i) => { const mapsUrl = `https://www.google.com/maps/search/?api=1&query=${encodeURIComponent(`${poi.lat},${poi.lng}`)}`; const dm = typeof poi.distance_m === 'number' ? poi.distance_m < 1000 ? `${poi.distance_m} m` : `${(poi.distance_m / 1000).toFixed(1)} km` : '—'; const cat = poi.primary_category ? String(poi.primary_category) : nuAskUiStrings.poiWord || 'POI'; return (

  • {poi.name || 'Place'}

    {cat} · {dm}

    • ); })}
) : null}
); } /** NOW hotbar **Improve Plan**: weather-first + indoor/outdoor hints + advisory reorder (same day). */ function NuAskWeatherPlanShell({ phase, errorMessage, data, onBack, nuAskT }) { const t = nuAskT || {}; const snaps = Array.isArray(data?.weather_snapshots) ? data.weather_snapshots : []; const acts = Array.isArray(data?.activities) ? data.activities : []; const sugg = Array.isArray(data?.suggestions) ? data.suggestions : []; const proposed = Array.isArray(data?.proposed_order) ? data.proposed_order : []; const rf = data?.route_feasibility; const ch = rf?.chronological_route; const wr = rf?.weather_route; return (

{t.shellImproveKicker || 'Weather first'}

{t.shellImproveTitle || 'Improve Plan'}

{phase === 'loading' ? (

{t.loadingWeatherPlan || 'Analyzing weather and today’s plan…'}

) : null} {phase === 'error' ? (

{errorMessage}

) : null} {phase === 'ready' && data ? ( <>
{snaps.map((s, i) => (

{s.label}

{s.temp_c != null ? `${s.temp_c}°` : '—'}

{s.condition || '—'} {s.pop != null ? ` · ${s.pop}% ${t.weatherRainWord || 'rain'}` : ''}

))}

{(t.weatherRiskNextHoursTemplate || 'Next ~{hours}h risk:').replace( '{hours}', String(data.horizon_hours || 6) )}{' '} {data.horizon_precipitation_risk === 'elevated' ? t.weatherRiskHigher || 'Higher' : t.weatherRiskLower || 'Lower'}

{t.weatherExposureHeading || 'Your day (exposure guess)'}

    {acts.map((a, i) => (
  • {a.title} · {a.start_time_local || '—'} {a.exposure} {a.in_horizon ? ( {t.weatherInWindow || 'in window'} ) : null}
    • ))}
{sugg.length > 0 ? (

{t.weatherSuggestionsHeading || 'Suggestions'}

{sugg.map((t, i) => (

{t}

))}
) : null} {ch && ch.legs > 0 ? (

{t.weatherRouteSenseHeading || 'Route sense (mapped stops)'}

{(t.weatherClockOrderTemplate || 'Clock order ≈ {drive_min} min straight-line leg total between stops with coordinates') .replace('{drive_min}', String(ch.drive_min ?? '—'))} {rf?.reorder_applied && wr && wr.legs > 0 ? ` · ${(t.weatherSuggestedOrderTemplate || 'weather-suggested order ≈ {drive_min} min.') .replace('{drive_min}', String(wr.drive_min ?? '—'))}` : ''}

{rf?.skipped_weather_reorder_reason ? (

{rf.skipped_weather_reorder_reason}

) : null}
) : null} {proposed.length > 0 ? (

{t.weatherSuggestedVisitOrderHeading || 'Suggested visit order'}

    {proposed.map((p, i) => (
  1. {p.title} ({p.start_time_local || '—'}) {p.reason}
    2. ))}
) : null}

{data.disclaimer}

) : null}
); } /** * NOW hotbar **Use My Time**: time-budget lane — nearby catalog POIs labeled by travel + dwell vs **Available Window**. * Uses `POST /api/nuask/nearby-pois` + client gap-fit math (distinct from distance-only Nearby list and Improve Plan). */ function NuAskUseMyTimeShell({ phase, errorMessage, windowMins, endLabel, rows, onBack, nuAskT }) { const t = nuAskT || {}; const W = Math.max(0, Math.round(Number(windowMins) || 0)); return (

{t.shellTimeKicker || 'Time budget'}

{t.shellTimeTitle || 'Use My Time'}

~{formatDurationMins(W)} {t.timeLeftWord || 'left'} · {t.untilWord || 'until'} {endLabel || '—'}

{phase === 'loading' ? (

{t.scoringWindowPois || 'Scoring POIs against your window…'}

) : null} {phase === 'error' ? (

{errorMessage}

) : null} {phase === 'ready' && W <= 0 ? (

{t.noMinutesInWindow || 'No minutes left in this window'}

{t.adjustPlanHint || 'Adjust your plan or use Improve Plan if today needs reordering.'}

) : null} {phase === 'ready' && W > 0 && (!rows || rows.length === 0) ? (

{t.noPoisInRange || 'No catalog POIs in range.'}

) : null} {phase === 'ready' && W > 0 && rows && rows.length > 0 ? ( <>

{t.gapFitFootnote || `Straight-line travel + typical dwell + ${GAP_BUFFER_MIN}m buffer — estimates only (not live traffic).`}

    {rows.map((row, i) => { const poi = row.poi; const mapsUrl = `https://www.google.com/maps/search/?api=1&query=${encodeURIComponent(`${poi.lat},${poi.lng}`)}`; const dm = typeof poi.distance_m === 'number' ? poi.distance_m < 1000 ? `${poi.distance_m} m` : `${(poi.distance_m / 1000).toFixed(1)} km` : '—'; const cat = poi.primary_category ? String(poi.primary_category) : nuAskUiStrings.poiWord || 'POI'; const badge = row.fit === 'comfortable' ? { text: t.fitComfortable || 'Comfortable fit', cls: 'bg-emerald-950/90 text-emerald-200 border-emerald-500/35' } : row.fit === 'tight' ? { text: t.fitTight || 'Tight', cls: 'bg-amber-950/80 text-amber-100 border-amber-500/35' } : row.fit === 'skip' ? { text: t.fitWontFit || "Won't fit", cls: 'bg-zinc-900/90 text-zinc-400 border-white/10' } : { text: '—', cls: 'bg-black/40 text-[#9CA3AF] border-white/10' }; const leg = row.travelMin != null && row.totalMin != null ? (t.gapFitLegTemplate || '~{travel}m travel + ~{dwell}m visit + buffer → ~{total}m') .replace('{travel}', String(row.travelMin)) .replace('{dwell}', String(row.dwellMin)) .replace('{total}', String(row.totalMin)) : '—'; return (

  • {poi.name || nuAskUiStrings.placeWord || 'Place'}

    {badge.text}

    {cat} · {dm}

    {leg}
    • ); })}
) : null}
); } function NuAskSylvanPage({ embeddedAppShell = false } = {}) { const scrollerRef = useRef(null); const tourPanelNavRef = useRef(null); const tourNowRailRef = useRef(null); const [corridorTourOpen, setCorridorTourOpen] = useState(false); const [corridorTourForce, setCorridorTourForce] = useState(false); const [corridorTourAwaitOpen, setCorridorTourAwaitOpen] = useState(false); const [corridorTourDontShow, setCorridorTourDontShow] = useState(false); const [corridorTourLabels, setCorridorTourLabels] = useState({ skip: 'Skip', next: 'Next', done: 'Done', dontShowAgain: "Don't show this again", corridorTitle: 'Time corridor', corridorBody: 'Your day is organized in three panels — Past, Now, and Next. Swipe horizontally or tap a tab to move through time.', nowTitle: 'The corridor rail', nowBody: 'Each panel shows times and stops along your trip. Now is where you decide what to do in this moment; Past and Next help you reflect and plan ahead.' }); const [panel, setPanel] = useState(1); const [profile, setProfile] = useState(() => window.SylvanFlowState?.getProfile?.() || null); const [profilePhotoUrl, setProfilePhotoUrl] = useState(null); const [pastStopsRow, setPastStopsRow] = useState(() => NUASK_INITIAL_PAST_STOPS_ROW.map((s) => ({ ...s }))); const [pastCardTargets, setPastCardTargets] = useState([null, null, null]); const [pastJourneyItems, setPastJourneyItems] = useState(() => NUASK_INITIAL_PAST_JOURNEY_ITEMS.map((s) => ({ ...s })) ); const [placesActivityCount, setPlacesActivityCount] = useState(0); const [corridorActivities, setCorridorActivities] = useState([]); const [corridorTripKey, setCorridorTripKey] = useState(null); /** Trip key for today's plan only — sent on micro-action select / weather-day so future-only itineraries are not hinted. */ const [corridorMutationTripKey, setCorridorMutationTripKey] = useState(null); const hasActiveTripContext = useMemo(() => { const now = new Date(); const y = offsetDayKeyLocal(now, -1); const t = offsetDayKeyLocal(now, 0); const tm = offsetDayKeyLocal(now, 1); const activeWindow = new Set([y, t, tm]); return corridorActivities.some((a) => activeWindow.has(asText(a?.__dayKey))); }, [corridorActivities]); const [nowPrevCard, setNowPrevCard] = useState({ time: DEMO.prevTime, title: DEMO.prevStop, sub: 'Visited', icon: '🏛️' }); const [nowNextCard, setNowNextCard] = useState({ time: DEMO.nextTime, title: DEMO.nextStop, sub: 'Next', icon: '🦁' }); /** Third corridor slot on NEXT — following itinerary activity after `nowNextCard` (demo when no data). */ const [nextAfterCard, setNextAfterCard] = useState({ time: DEMO.afterThat.time, title: DEMO.afterThat.title, sub: DEMO.afterThat.sub, icon: '🌿', imageUrl: '' }); /** When itinerary has a second future stop + trip context — opens activity detail (same as PAST journey cards). */ const [nextAfterCardTarget, setNextAfterCardTarget] = useState(null); const [hasUpcomingActivity, setHasUpcomingActivity] = useState(false); /** Start time (ms) of the latest itinerary row at/ before “now” — drives 30m Add Here lock vs Replace Next. */ const [nowCorridorPrevStartMs, setNowCorridorPrevStartMs] = useState(0); /** NEXT hero body: first non-empty description from the next commitment activity (KV/bootstrap fallback if empty). */ const [nextHighlightBody, setNextHighlightBody] = useState(''); const [nowNextImageUrl, setNowNextImageUrl] = useState(''); const [nowRecoOptions, setNowRecoOptions] = useState([]); const [nowRecoPersistUntilMs, setNowRecoPersistUntilMs] = useState(0); const [nowRecoLoading, setNowRecoLoading] = useState(false); /** First successful refresh completion gates TOP reco shell (no demo flash before sync). */ const [nowRecoSyncPhase, setNowRecoSyncPhase] = useState('awaiting'); /** HUD “!” explain popovers: `reco_top` | `alternatives_slot_time` | `poi_hours` */ const [nuAskExplainKey, setNuAskExplainKey] = useState(null); const [topRecoRevealKey, setTopRecoRevealKey] = useState(0); /** * NOW hotbar detail overlay (replaces TOP recommendation column). * Emergency: same contract as chat — POST /api/chat/send message "EMERGENCY", then embed EmergencyInApp. */ const [nowHotbarDetail, setNowHotbarDetail] = useState(null); /** Explore Nearby: TOP-slot catalog list (distance-only, no traveler-tag personalization) */ const [nowNearbyOpen, setNowNearbyOpen] = useState(false); const [nowNearbyPhase, setNowNearbyPhase] = useState('idle'); const [nowNearbyPois, setNowNearbyPois] = useState([]); const [nowNearbyError, setNowNearbyError] = useState(''); /** Improve Plan: weather vs today’s itinerary (advisory). */ const [nowWeatherPlanOpen, setNowWeatherPlanOpen] = useState(false); const [nowWeatherPlanPhase, setNowWeatherPlanPhase] = useState('idle'); const [nowWeatherPlanData, setNowWeatherPlanData] = useState(null); /** Full Ask Sylvan thread inside NOW TV bezel (\`AskSylvanPage\` + \`embeddedExploreTv\`), not standalone \`ask-sylvan\` route. */ const [nowTvAskOpen, setNowTvAskOpen] = useState(false); const [nowWeatherPlanError, setNowWeatherPlanError] = useState(''); /** Use My Time: gap-fit panel (nearby POIs scored vs Available Window). */ const [nowUseMyTimeOpen, setNowUseMyTimeOpen] = useState(false); const [nowUseMyTimePhase, setNowUseMyTimePhase] = useState('idle'); const [nowUseMyTimeError, setNowUseMyTimeError] = useState(''); const [nowUseMyTimeRows, setNowUseMyTimeRows] = useState([]); const [nowRecoError, setNowRecoError] = useState(''); const [nowRecoMicroActionId, setNowRecoMicroActionId] = useState(''); const [selectedRecoKey, setSelectedRecoKey] = useState(null); const [nowRecoActionLoading, setNowRecoActionLoading] = useState(''); const [nowRecoActionError, setNowRecoActionError] = useState(''); const [nowRecoActionInfo, setNowRecoActionInfo] = useState(''); const [nowEnRouteLockUntilMs, setNowEnRouteLockUntilMs] = useState(0); const [nowEnRouteLockPoiName, setNowEnRouteLockPoiName] = useState(''); const [nowEnRouteLockPoiId, setNowEnRouteLockPoiId] = useState(''); const [nowRecoProposal, setNowRecoProposal] = useState(null); const [pastMiniMapImgFailed, setPastMiniMapImgFailed] = useState(false); const [showLocationPrompt, setShowLocationPrompt] = useState(false); const [topRecoImageIdx, setTopRecoImageIdx] = useState(0); const [topRecoImageExhausted, setTopRecoImageExhausted] = useState(false); const [topRecoExpanded, setTopRecoExpanded] = useState(true); const [expandedAltRecoKey, setExpandedAltRecoKey] = useState(null); const [nowClock, setNowClock] = useState(() => { const now = new Date(); const anchor = parseTimeToMinutes(DEMO.nextTime); const end = new Date(now); if (anchor != null) { end.setHours(Math.floor(anchor / 60), anchor % 60, 0, 0); // Keep a forward-looking window if current time has passed today's anchor. if (end.getTime() < now.getTime()) end.setDate(end.getDate() + 1); } else { end.setMinutes(end.getMinutes() + DEMO.windowMins); } const mins = Math.max(0, Math.round((end.getTime() - now.getTime()) / 60000)); return { nowLabel: formatTimeLabel(now), endLabel: formatTimeLabel(end), mins }; }); const [nuAskUiStrings, setNuAskUiStrings] = useState(() => { const base = buildNuAskUiStringBase( typeof window !== 'undefined' ? resolveNuAskPreferredLanguageCode() : 'en' ); return Object.keys(base).length > 0 ? base : { pastSubtitle: 'Your journey so far', chatPlaceholder: 'Ask...', panelPastTitle: 'PAST', panelNowTitle: 'NOW', panelNowSubtitle: 'Your moment to decide', panelNextTitle: 'NEXT', panelNextSubtitle: "What's coming up", panelSwitcherAria: 'Time corridor panels' }; }); const nowHotbarItems = useMemo(() => { const byKey = { nearby: { title: nuAskUiStrings.hotbarNearbyTitle, sub: nuAskUiStrings.hotbarNearbySub }, improve: { title: nuAskUiStrings.hotbarImproveTitle, sub: nuAskUiStrings.hotbarImproveSub }, time: { title: nuAskUiStrings.hotbarTimeTitle, sub: nuAskUiStrings.hotbarTimeSub }, emergency: { title: nuAskUiStrings.hotbarEmergencyTitle, sub: nuAskUiStrings.hotbarEmergencySub } }; return DEMO.nowHotbar.map((h) => ({ ...h, title: byKey[h.key]?.title || h.title, sub: byKey[h.key]?.sub || h.sub })); }, [nuAskUiStrings]); /** NOW panel — inline Ask (same APIs as AskSylvanPage; optional full-chat navigation). */ const [nuAskInlineInput, setNuAskInlineInput] = useState(''); const [nuAskInlineSending, setNuAskInlineSending] = useState(false); const [nuAskInlineTyping, setNuAskInlineTyping] = useState(false); const [nuAskLastAssistantText, setNuAskLastAssistantText] = useState(''); const [nuAskLatestVisible, setNuAskLatestVisible] = useState(false); const [nuAskLatestMounted, setNuAskLatestMounted] = useState(false); /** Half-viewport “hologram” latest reply vs compact strip (Back returns to strip). */ const [nuAskLatestHolo, setNuAskLatestHolo] = useState(false); const [nuAskInlineError, setNuAskInlineError] = useState(''); const [nowLockTickMs, setNowLockTickMs] = useState(() => Date.now()); const NUASK_INLINE_MAX_LEN = 240; const NUASK_LATEST_TTL_MS = 120000; const NUASK_LATEST_FADE_MS = 500; const NUASK_STT_MAX_MS = 20000; const NUASK_STT_MAX_BYTES = 1000000; const EN_ROUTE_LOCK_STORAGE_KEY = 'nuask_en_route_lock_v1'; const nuAskInlineInputRef = useRef(''); const nuAskInlineSendingRef = useRef(false); const nuAskSttRecorderRef = useRef(null); const nuAskSttStreamRef = useRef(null); const nuAskSttChunksRef = useRef([]); const nuAskSttTimeoutRef = useRef(null); const nuAskSttStartedAtRef = useRef(0); const nuAskLatestHideTimerRef = useRef(null); const nuAskLatestClearTimerRef = useRef(null); const [nuAskSttPhase, setNuAskSttPhase] = useState('idle'); const [nuAskSttSupported] = useState(() => { try { return !!(navigator?.mediaDevices?.getUserMedia && window?.MediaRecorder); } catch (e) { return false; } }); const nowRecoReqSeqRef = useRef(0); const nowRecoInFlightRef = useRef(false); const prevPanelRef = useRef(-1); const nuAskNotifyPromptedRef = useRef(false); const nuAskNowDockRef = useRef(null); const [nuAskNowDockHeight, setNuAskNowDockHeight] = useState(0); const nowTopRecoScrollAnchorRef = useRef(null); /** NOW “TV” scroll surface — TOP reco / shells / loading fray scroll inside this only (corridor strip stays fixed). */ const nowSectionScrollRef = useRef(null); const prevNowRecoLoadingRef = useRef(false); const wasNowRecoLoadingForRevealRef = useRef(false); /** Snap inner NOW scroll so the TOP stack (hero image + header) is flush to the top of the TV column. */ const snapNowRecoScrollToTop = useCallback(() => { try { const wrap = nowSectionScrollRef.current; if (!wrap) return; if (typeof wrap.scrollTo === 'function') wrap.scrollTo({ top: 0, behavior: 'auto' }); else wrap.scrollTop = 0; } catch { /* no-op */ } }, []); const handleAlternativeRowClick = useCallback( (opt, fullListIdx, altRowIndex) => { const key = getRecoKey(opt, fullListIdx); setSelectedRecoKey(key); setExpandedAltRecoKey((prev) => (prev === key ? null : key)); requestAnimationFrame(() => { requestAnimationFrame(() => snapNowRecoScrollToTop()); }); }, [snapNowRecoScrollToTop] ); const [nowRecoTravelerTags, setNowRecoTravelerTags] = useState([]); /** Last `/api/micro-action/preview` weather snapshot — feeds “Why this recommendation?”. */ const [nowRecoWeatherContext, setNowRecoWeatherContext] = useState(null); const [nowNextCoords, setNowNextCoords] = useState(null); /** Device coords for travel math — updated by NOW geolocation poll and by successful refresh. */ const [liveUserCoords, setLiveUserCoords] = useState(null); const nowClockRef = useRef(nowClock); const nowNextCoordsRef = useRef(nowNextCoords); const normalizePoiIdKey = useCallback((v) => asText(v).trim().toLowerCase(), []); const normalizeNameKey = useCallback((v) => { const s = asText(v).toLowerCase(); // Canonicalize punctuation/spacing so "Malay Heritage Centre", "Malay-Heritage Centre", etc. match. return s.replace(/[^a-z0-9\u4e00-\u9fff]+/g, ' ').trim(); }, []); const itineraryPoiIdSet = useMemo(() => { const out = new Set(); const now = new Date(); const y = offsetDayKeyLocal(now, -1); const t = offsetDayKeyLocal(now, 0); const tm = offsetDayKeyLocal(now, 1); for (const a of corridorActivities || []) { const day = asText(a?.__dayKey); if (day && day !== y && day !== t && day !== tm) continue; const pid = normalizePoiIdKey( a?.poi_id || a?.poiId || a?.catalog_poi_id || a?.place_id || a?.google_place_id || a?.id ); if (pid) out.add(pid); } return out; }, [corridorActivities, normalizePoiIdKey]); const itineraryNameSet = useMemo(() => { const out = new Set(); const now = new Date(); const y = offsetDayKeyLocal(now, -1); const t = offsetDayKeyLocal(now, 0); const tm = offsetDayKeyLocal(now, 1); for (const a of corridorActivities || []) { const day = asText(a?.__dayKey); if (day && day !== y && day !== t && day !== tm) continue; const n = normalizeNameKey(a?.title || a?.name || a?.poi_name || a?.location_name || ''); if (n) out.add(n); } // Also suppress anything currently shown in corridor cards (covers race before activities refresh). [nowPrevCard?.title, nowNextCard?.title, nextAfterCard?.title].forEach((name) => { const n = normalizeNameKey(name); if (n) out.add(n); }); return out; }, [corridorActivities, normalizeNameKey, nowPrevCard?.title, nowNextCard?.title, nextAfterCard?.title]); const engageEnRouteLock = useCallback((poiName, poiId) => { setNowEnRouteLockPoiName(asText(poiName).trim()); setNowEnRouteLockPoiId(normalizePoiIdKey(poiId)); setNowEnRouteLockUntilMs(Date.now() + 30 * 60 * 1000); setNowRecoPersistUntilMs(Date.now() + 30 * 60 * 1000); }, [normalizePoiIdKey]); useEffect(() => { if (typeof window !== 'undefined' && window.SYLVAN_TECH_THEME?.ensureKeyframes) { window.SYLVAN_TECH_THEME.ensureKeyframes(); } }, []); useEffect(() => { const loadNuAskStrings = async () => { const language = resolveNuAskPreferredLanguageCode(); const defaults = buildNuAskUiStringBase(language); const loadMap = typeof window !== 'undefined' && Array.isArray(window.NUASK_I18N_LOAD_MAP) ? window.NUASK_I18N_LOAD_MAP : []; try { const pairs = await Promise.all( loadMap.map(async ([prop, key]) => { const v = await window.getSysMessage?.(key, language); return [prop, v]; }) ); const next = { ...defaults }; for (const [prop, v] of pairs) { if (v != null && String(v).trim() !== '') next[prop] = v; } const baked = typeof window !== 'undefined' && window.NUASK_UI_DEFAULTS ? window.NUASK_UI_DEFAULTS : null; if (baked) { for (const k of Object.keys(baked)) { const cur = next[k]; if (cur == null || (typeof cur === 'string' && cur.trim() === '')) { next[k] = baked[k]; } } } setNuAskUiStrings(next); } catch (e) { /* keep fallback strings */ } }; loadNuAskStrings(); const onLang = () => loadNuAskStrings(); const onProfile = () => loadNuAskStrings(); if (window.SylvanFlowState?.on) { window.SylvanFlowState.on('language', onLang); window.SylvanFlowState.on('profile', onProfile); return () => { window.SylvanFlowState.off('language', onLang); window.SylvanFlowState.off('profile', onProfile); }; } return undefined; }, []); useEffect(() => { if (nuAskExplainKey == null) return undefined; const onDown = (ev) => { const el = ev.target; if (!(el instanceof Element)) return; if (el.closest(`[data-nuask-explain-root="${nuAskExplainKey}"]`)) return; setNuAskExplainKey(null); }; const onKey = (ev) => { if (ev.key === 'Escape') setNuAskExplainKey(null); }; document.addEventListener('pointerdown', onDown, true); window.addEventListener('keydown', onKey); return () => { document.removeEventListener('pointerdown', onDown, true); window.removeEventListener('keydown', onKey); }; }, [nuAskExplainKey]); useEffect(() => { nowClockRef.current = nowClock; }, [nowClock]); useEffect(() => { nowNextCoordsRef.current = nowNextCoords; }, [nowNextCoords]); useEffect(() => { const c = liveUserCoords; if (!c || !Number.isFinite(c.lat) || !Number.isFinite(c.lng)) return; if (typeof navigator === 'undefined' || !('serviceWorker' in navigator)) return; navigator.serviceWorker.ready .then((reg) => { if (!reg?.active) return; reg.active.postMessage({ type: 'NUASK_BACKGROUND_SET_COORDS', payload: { lat: c.lat, lng: c.lng } }); }) .catch(() => {}); }, [liveUserCoords]); useEffect(() => { if (panel !== 1) return; if (nuAskNotifyPromptedRef.current) return; nuAskNotifyPromptedRef.current = true; if (typeof Notification === 'undefined' || typeof Notification.requestPermission !== 'function') return; if (Notification.permission === 'default') { Notification.requestPermission().catch(() => {}); } }, [panel]); /** Light geolocation while NOW is visible so travel-vs-window works without tapping sync first. */ useEffect(() => { if (panel !== 1 || !navigator.geolocation) return undefined; let cancelled = false; const read = () => { navigator.geolocation.getCurrentPosition( (pos) => { if (cancelled) return; setLiveUserCoords({ lat: pos.coords.latitude, lng: pos.coords.longitude }); }, () => {}, { enableHighAccuracy: false, timeout: 12000, maximumAge: 60000 } ); }; read(); const id = setInterval(read, 40000); return () => { cancelled = true; clearInterval(id); }; }, [panel]); useEffect(() => { const computeTemporalCorridor = () => { const now = new Date(); const ghostPastStop = { time: '—', title: nuAskUiStrings.panelPastTitle || 'PAST', sub: hasActiveTripContext ? (nuAskUiStrings.noLiveRecommendationYet || 'Standby') : (nuAskUiStrings.errNoTrip || 'No active trip linked'), icon: '◌', ghost: true }; const ghostPastJourney = { time: '—', title: nuAskUiStrings.panelPastTitle || 'PAST', subtitle: hasActiveTripContext ? (nuAskUiStrings.noLiveRecommendationYet || 'Standby') : (nuAskUiStrings.errNoTrip || 'No active trip linked'), imageUrl: '', icon: '◌', ghost: true }; const timeline = corridorActivities .map((a) => { const dt = getActivityDateTime(a); return dt ? { ...a, __dt: dt } : null; }) .filter(Boolean) .sort((a, b) => a.__dt.getTime() - b.__dt.getTime()); const pastOnly = timeline.filter((a) => a.__dt.getTime() <= now.getTime()); const futureOnly = timeline.filter((a) => a.__dt.getTime() > now.getTime()); /** Do not fall back to `timeline` when `pastOnly` is empty — that mislabels future stops as PAST and inflates counts (Issue #93). */ const visiblePast = pastOnly.slice(-3); setPlacesActivityCount(pastOnly.length); setPastStopsRow(buildPastStopsRow(visiblePast, ghostPastStop)); setPastCardTargets(buildPastCardTargets(visiblePast, corridorTripKey)); setPastJourneyItems(buildPastJourneyItems(visiblePast, ghostPastJourney)); if (!hasActiveTripContext) { const standbyTitle = nuAskUiStrings.panelNowTitle || 'NOW'; const standbySub = nuAskUiStrings.errNoTrip || 'No active trip linked'; setNowPrevCard({ time: '—', title: standbyTitle, sub: standbySub, icon: '◌' }); setNowNextCard({ time: '—', title: standbyTitle, sub: standbySub, icon: '◌' }); setNextHighlightBody(''); setNowNextImageUrl(''); setNowNextCoords(null); setNextAfterCard({ time: '—', title: nuAskUiStrings.panelNextTitle || 'NEXT', sub: standbySub, icon: '◌', imageUrl: '' }); setNextAfterCardTarget(null); setHasUpcomingActivity(false); setNowCorridorPrevStartMs(0); setNowClock({ nowLabel: formatTimeLabel(now), endLabel: formatTimeLabel(now), mins: 0 }); return; } const prev = pastOnly.length > 0 ? pastOnly[pastOnly.length - 1] : null; const next = futureOnly.length > 0 ? futureOnly[0] : null; if (prev) { setNowCorridorPrevStartMs(prev.__dt.getTime()); setNowPrevCard({ time: formatActivityTimeLabel(prev), title: asText(prev.title) || asText(prev.Title) || DEMO.prevStop, sub: asText(prev.activity_type) || asText(prev.Activity_Type) || (getActivityLocationLabel(prev).split(',')[0] || 'Visited'), icon: pickActivityIcon(prev, 0) }); } else { setNowCorridorPrevStartMs(0); } if (next) { setHasUpcomingActivity(true); setNowNextCard({ time: formatActivityTimeLabel(next), title: asText(next.title) || asText(next.Title) || DEMO.nextStop, sub: asText(next.activity_type) || asText(next.Activity_Type) || (getActivityLocationLabel(next).split(',')[0] || 'Next'), icon: pickActivityIcon(next, 1) }); setNextHighlightBody( asText(next.rich_description) || asText(next.Rich_Description) || asText(next.description) || asText(next.Description) || '' ); setNowNextImageUrl(getActivityImageUrl(next)); setNowNextCoords(extractActivityCoords(next)); } else { setHasUpcomingActivity(false); setNowNextCard({ time: '—', title: nuAskUiStrings.panelNowTitle || 'NOW', sub: nuAskUiStrings.noLiveRecommendationYet || 'No live recommendation yet', icon: '◌' }); setNextHighlightBody(''); setNowNextImageUrl(''); setNowNextCoords(null); } const after = futureOnly.length > 1 ? futureOnly[1] : null; if (after) { setNextAfterCard({ time: formatActivityTimeLabel(after), title: asText(after.title) || asText(after.Title) || DEMO.afterThat.title, sub: asText(after.activity_type) || asText(after.Activity_Type) || (getActivityLocationLabel(after).split(',')[0] || DEMO.afterThat.sub), icon: pickActivityIcon(after, 2), imageUrl: getActivityImageUrl(after) }); setNextAfterCardTarget( corridorTripKey && after.__dayKey != null && after.__activityIndex != null ? { tripKey: corridorTripKey, dayKey: after.__dayKey, activityIndex: after.__activityIndex, activity: after } : null ); } else { setNextAfterCard({ time: '—', title: nuAskUiStrings.panelNextTitle || 'NEXT', sub: nuAskUiStrings.noLiveRecommendationYet || 'No live recommendation yet', icon: '◌', imageUrl: '' }); setNextAfterCardTarget(null); } const end = next?.__dt ? new Date(next.__dt) : new Date(now); const mins = Math.max(0, Math.round((end.getTime() - now.getTime()) / 60000)); setNowClock({ nowLabel: formatTimeLabel(now), endLabel: formatTimeLabel(end), mins }); }; computeTemporalCorridor(); const timer = setInterval(computeTemporalCorridor, 30000); return () => clearInterval(timer); }, [corridorActivities, corridorTripKey, hasActiveTripContext, nuAskUiStrings]); const refreshNowRecommendations = async () => { if (nowEnRouteLockUntilMs > Date.now()) { setNowRecoActionInfo( (nuAskUiStrings.enRouteReplaceOnlyTitle || 'On the way to {poi}. Replace-only for now.') .replace(/\{poi\}/g, nowEnRouteLockPoiName || asText(nowNextCard?.title) || (nuAskUiStrings.panelNowTitle || 'NOW')) ); return; } if (!SF_API_BASE || !window.SylvanFlowAuth?.authenticatedFetch) { setNowRecoSyncPhase('ready'); return; } if (nowRecoInFlightRef.current) return; const reqSeq = ++nowRecoReqSeqRef.current; nowRecoInFlightRef.current = true; setNowRecoLoading(true); setNowRecoError(''); setNowRecoActionError(''); setNowRecoActionInfo(''); setNowRecoWeatherContext(null); const getCoords = async () => { if (!navigator.geolocation) return null; try { const pos = await new Promise((resolve, reject) => { navigator.geolocation.getCurrentPosition(resolve, reject, { enableHighAccuracy: true, timeout: 10000, maximumAge: 120000 }); }); return { lat: pos.coords.latitude, lng: pos.coords.longitude }; } catch (e) { return null; } }; try { const coords = await getCoords(); if (!coords) { setShowLocationPrompt(true); throw new Error(nuAskUiStrings.errLocationRequired || 'Live location is required. Please enable location and refresh.'); } setShowLocationPrompt(false); setLiveUserCoords(coords); const nextAct = nowNextCoordsRef.current; const clock = nowClockRef.current; if (nextAct && clock && clock.mins > 0) { const kmEdge = haversineKm(coords.lat, coords.lng, nextAct.lat, nextAct.lng); if (kmEdge != null) { const travelEdgeMin = roughUrbanDriveMinutes(kmEdge); if (travelEdgeMin >= clock.mins - 2) { setNowRecoOptions([]); setNowRecoMicroActionId(''); setSelectedRecoKey(null); setNowRecoTravelerTags([]); setNowRecoWeatherContext(null); return; } } } const now = new Date(); const body = { coords, latitude: coords.lat, longitude: coords.lng, location: { lat: coords.lat, lng: coords.lng }, intent: 'what do i do now?', client_day_key: formatClientDayKeyLocal(now), client_local_hhmm: formatClientLocalHHMM(now), client_weekday: now.getDay(), context: { now_local: nowClock.nowLabel, available_window_mins: nowClock.mins, previous_activity: nowPrevCard.title, next_activity: nowNextCard.title } }; const res = await window.SylvanFlowAuth.authenticatedFetch(`${SF_API_BASE}/api/micro-action/preview`, { method: 'POST', headers: { 'Content-Type': 'application/json' }, body: JSON.stringify(body) }); window.SylvanFlowAuth.handleAuthResponse(res); const data = await res.json(); if (!res.ok || !data?.ok) throw new Error(data?.error || nuAskUiStrings.errLoadRecommendations || 'Unable to load recommendations'); if (reqSeq !== nowRecoReqSeqRef.current) return; const nextAfter = nowNextCoordsRef.current; const clockAfter = nowClockRef.current; if (nextAfter && clockAfter && clockAfter.mins > 0 && coords) { const kmLate = haversineKm(coords.lat, coords.lng, nextAfter.lat, nextAfter.lng); if (kmLate != null && roughUrbanDriveMinutes(kmLate) >= clockAfter.mins - 2) { setNowRecoOptions([]); setNowRecoMicroActionId(''); setSelectedRecoKey(null); setNowRecoTravelerTags([]); setNowRecoWeatherContext(null); return; } } const rawOptions = Array.isArray(data.options) ? data.options.slice(0, 6) : []; const lockName = normalizeNameKey(nowEnRouteLockPoiName); const lockPoiId = normalizePoiIdKey(nowEnRouteLockPoiId); const options = rawOptions .filter((opt) => { const pid = normalizePoiIdKey( opt?.poi?.poi_id || opt?.poi?.id || opt?.poi?.catalog_poi_id || opt?.poi?.place_id || opt?.poi?.google_place_id || opt?.poi_id ); if (pid) { if (lockPoiId && pid === lockPoiId) return false; if (itineraryPoiIdSet.has(pid)) return false; } const name = normalizeNameKey(opt?.poi?.name || opt?.summary || ''); if (!name) return true; if (lockName && name === lockName) return false; if (itineraryNameSet.has(name)) return false; return true; }) .slice(0, 3); setNowRecoOptions(options); setNowRecoPersistUntilMs(Date.now() + 360000); setNowRecoMicroActionId(asText(data.micro_action_id) || ''); setSelectedRecoKey(options.length > 0 ? getRecoKey(options[0], 0) : null); setNowRecoTravelerTags(Array.isArray(data.traveler_tags_used) ? data.traveler_tags_used : []); setNowRecoWeatherContext(data.weather_context && typeof data.weather_context === 'object' ? data.weather_context : null); setLiveUserCoords(coords); } catch (e) { if (reqSeq !== nowRecoReqSeqRef.current) return; setNowRecoError(e?.message || nuAskUiStrings.errLoadRecommendations || 'Unable to load recommendations'); setNowRecoOptions([]); setNowRecoPersistUntilMs(0); setNowRecoMicroActionId(''); setSelectedRecoKey(null); setNowRecoTravelerTags([]); setNowRecoWeatherContext(null); } finally { if (reqSeq === nowRecoReqSeqRef.current) { setNowRecoLoading(false); setNowRecoSyncPhase('ready'); } nowRecoInFlightRef.current = false; } }; const clearNowHotbarDetail = useCallback(() => { setNowHotbarDetail(null); }, []); const closeNearbyPanel = useCallback(() => { setNowNearbyOpen(false); setNowNearbyPhase('idle'); setNowNearbyPois([]); setNowNearbyError(''); }, []); const closeWeatherPlanPanel = useCallback(() => { setNowWeatherPlanOpen(false); setNowWeatherPlanPhase('idle'); setNowWeatherPlanData(null); setNowWeatherPlanError(''); }, []); const closeUseMyTimePanel = useCallback(() => { setNowUseMyTimeOpen(false); setNowUseMyTimePhase('idle'); setNowUseMyTimeError(''); setNowUseMyTimeRows([]); }, []); /** POST /api/nuask/weather-day-suggest — same calendar day; needs trip_key + location. */ const openWeatherDaySuggestFromNowHotbar = useCallback(async () => { if (!SF_API_BASE || !window.SylvanFlowAuth?.authenticatedFetch) { setNowWeatherPlanOpen(true); setNowWeatherPlanPhase('error'); setNowWeatherPlanError(nuAskUiStrings.errApiUnavailable || 'API not available.'); return; } if (!corridorMutationTripKey) { setNowWeatherPlanOpen(true); setNowWeatherPlanPhase('error'); setNowWeatherPlanError(nuAskUiStrings.errNoTrip || ''); return; } setNowHotbarDetail(null); setNowNearbyOpen(false); setNowNearbyPhase('idle'); setNowNearbyPois([]); setNowNearbyError(''); setNowUseMyTimeOpen(false); setNowUseMyTimePhase('idle'); setNowUseMyTimeRows([]); setNowUseMyTimeError(''); setNowWeatherPlanOpen(true); setNowWeatherPlanPhase('loading'); setNowWeatherPlanError(''); setNowWeatherPlanData(null); const getCoords = async () => { if (!navigator.geolocation) return null; try { const pos = await new Promise((resolve, reject) => { navigator.geolocation.getCurrentPosition(resolve, reject, { enableHighAccuracy: true, timeout: 10000, maximumAge: 120000 }); }); return { lat: pos.coords.latitude, lng: pos.coords.longitude }; } catch (e) { return null; } }; let coords = liveUserCoords; if (!coords || typeof coords.lat !== 'number') { coords = await getCoords(); } if (!coords) { setShowLocationPrompt(true); setNowWeatherPlanPhase('error'); setNowWeatherPlanError(nuAskUiStrings.errLocationForWeather || 'Turn on location for weather and timing.'); return; } setShowLocationPrompt(false); setLiveUserCoords(coords); try { const now = new Date(); const res = await window.SylvanFlowAuth.authenticatedFetch(`${SF_API_BASE}/api/nuask/weather-day-suggest`, { method: 'POST', headers: { 'Content-Type': 'application/json' }, body: JSON.stringify({ coords, trip_key: corridorMutationTripKey, client_day_key: formatClientDayKeyLocal(now), client_local_hhmm: formatClientLocalHHMM(now), horizon_hours: 6 }) }); window.SylvanFlowAuth.handleAuthResponse(res); const data = await res.json(); if (!res.ok || data.ok !== true) throw new Error(data?.error || 'Request failed'); setNowWeatherPlanData(data); setNowWeatherPlanPhase('ready'); } catch (e) { setNowWeatherPlanPhase('error'); setNowWeatherPlanError(e?.message || nuAskUiStrings.errWeatherAnalyze || 'Could not analyze weather vs plan.'); } }, [SF_API_BASE, liveUserCoords, corridorMutationTripKey, nuAskUiStrings]); /** TOP-slot ~5 POIs: nearby + traveler personality via `nearby_personality_focus` on POST /api/nuask/nearby-pois. */ const openNearbyFromNowHotbar = useCallback(async () => { if (!SF_API_BASE || !window.SylvanFlowAuth?.authenticatedFetch) { setNowHotbarDetail(null); setNowNearbyOpen(true); setNowNearbyPhase('error'); setNowNearbyError(nuAskUiStrings.errApiUnavailable || 'API not available.'); return; } setNowHotbarDetail(null); setNowWeatherPlanOpen(false); setNowWeatherPlanPhase('idle'); setNowWeatherPlanData(null); setNowWeatherPlanError(''); setNowUseMyTimeOpen(false); setNowUseMyTimePhase('idle'); setNowUseMyTimeRows([]); setNowUseMyTimeError(''); setNowNearbyOpen(true); setNowNearbyPhase('loading'); setNowNearbyError(''); setNowNearbyPois([]); const getCoords = async () => { if (!navigator.geolocation) return null; try { const pos = await new Promise((resolve, reject) => { navigator.geolocation.getCurrentPosition(resolve, reject, { enableHighAccuracy: true, timeout: 10000, maximumAge: 120000 }); }); return { lat: pos.coords.latitude, lng: pos.coords.longitude }; } catch (e) { return null; } }; let coords = liveUserCoords; if (!coords || typeof coords.lat !== 'number' || typeof coords.lng !== 'number') { coords = await getCoords(); } if (!coords) { setShowLocationPrompt(true); setNowNearbyPhase('error'); setNowNearbyError(nuAskUiStrings.errLocationNearby || 'Turn on location to see nearby catalog POIs.'); return; } setShowLocationPrompt(false); setLiveUserCoords(coords); try { const res = await window.SylvanFlowAuth.authenticatedFetch(`${SF_API_BASE}/api/nuask/nearby-pois`, { method: 'POST', headers: { 'Content-Type': 'application/json' }, body: JSON.stringify({ coords, limit: 5, nearby_personality_focus: true }) }); window.SylvanFlowAuth.handleAuthResponse(res); const data = await res.json(); if (!res.ok || data.ok !== true) throw new Error(data?.error || 'Request failed'); setNowNearbyPois(Array.isArray(data.pois) ? data.pois : []); setNowNearbyPhase('ready'); } catch (e) { setNowNearbyPhase('error'); setNowNearbyError(e?.message || nuAskUiStrings.errLoadNearby || 'Could not load nearby POIs.'); } }, [SF_API_BASE, liveUserCoords, nuAskUiStrings]); /** Use My Time: same catalog nearby fetch as Explore Nearby, scored vs **Available Window** (gap-fit). */ const openUseMyTimeFromNowHotbar = useCallback(async () => { if (!SF_API_BASE || !window.SylvanFlowAuth?.authenticatedFetch) { setNowUseMyTimeOpen(true); setNowUseMyTimePhase('error'); setNowUseMyTimeError(nuAskUiStrings.errApiUnavailable || 'API not available.'); return; } setNowHotbarDetail(null); setNowNearbyOpen(false); setNowNearbyPhase('idle'); setNowNearbyPois([]); setNowNearbyError(''); setNowWeatherPlanOpen(false); setNowWeatherPlanPhase('idle'); setNowWeatherPlanData(null); setNowWeatherPlanError(''); setNowUseMyTimeOpen(true); setNowUseMyTimePhase('loading'); setNowUseMyTimeError(''); setNowUseMyTimeRows([]); const windowMins = Math.max(0, Math.round(Number(nowClockRef.current?.mins) || 0)); const getCoords = async () => { if (!navigator.geolocation) return null; try { const pos = await new Promise((resolve, reject) => { navigator.geolocation.getCurrentPosition(resolve, reject, { enableHighAccuracy: true, timeout: 10000, maximumAge: 120000 }); }); return { lat: pos.coords.latitude, lng: pos.coords.longitude }; } catch (e) { return null; } }; let coords = liveUserCoords; if (!coords || typeof coords.lat !== 'number' || typeof coords.lng !== 'number') { coords = await getCoords(); } if (!coords) { setShowLocationPrompt(true); setNowUseMyTimePhase('error'); setNowUseMyTimeError(nuAskUiStrings.errLocationNearby || 'Turn on location to score places against your window.'); return; } setShowLocationPrompt(false); setLiveUserCoords(coords); try { const res = await window.SylvanFlowAuth.authenticatedFetch(`${SF_API_BASE}/api/nuask/nearby-pois`, { method: 'POST', headers: { 'Content-Type': 'application/json' }, body: JSON.stringify({ coords, limit: 8 }) }); window.SylvanFlowAuth.handleAuthResponse(res); const data = await res.json(); if (!res.ok || data.ok !== true) throw new Error(data?.error || 'Request failed'); const pois = Array.isArray(data.pois) ? data.pois : []; const rows = buildGapFitRows(pois, windowMins); setNowUseMyTimeRows(rows); setNowUseMyTimePhase('ready'); } catch (e) { setNowUseMyTimePhase('error'); setNowUseMyTimeError(e?.message || nuAskUiStrings.errLoadNearby || 'Could not load POIs for your window.'); } }, [SF_API_BASE, liveUserCoords, nuAskUiStrings]); /** Mirrors Ask Sylvan `sendMessage` for exact `EMERGENCY` intent + chat_id + coords + languageCode. */ const startEmergencyFromNowHotbar = useCallback(async () => { if (!SF_API_BASE || !window.SylvanFlowAuth?.authenticatedFetch) { setNowHotbarDetail({ kind: 'emergency', phase: 'error', errorMessage: nuAskUiStrings.errApiUnavailable || 'API not available.' }); return; } setNowNearbyOpen(false); setNowNearbyPhase('idle'); setNowNearbyPois([]); setNowNearbyError(''); setNowWeatherPlanOpen(false); setNowWeatherPlanPhase('idle'); setNowWeatherPlanData(null); setNowWeatherPlanError(''); setNowUseMyTimeOpen(false); setNowUseMyTimePhase('idle'); setNowUseMyTimeRows([]); setNowUseMyTimeError(''); setNowHotbarDetail({ kind: 'emergency', phase: 'loading' }); const getCoords = async () => { if (!navigator.geolocation) return null; try { const pos = await new Promise((resolve, reject) => { navigator.geolocation.getCurrentPosition(resolve, reject, { enableHighAccuracy: true, timeout: 10000, maximumAge: 120000 }); }); return { lat: pos.coords.latitude, lng: pos.coords.longitude, accuracy: pos.coords.accuracy }; } catch (e) { return null; } }; const readChatId = () => { try { const s = localStorage.getItem('sylvanflow_chat_id'); if (s && typeof s === 'string' && s.startsWith('chat:')) return s; } catch (e) { /* ignore */ } return null; }; try { const coords = await getCoords(); if (!coords) { setNowHotbarDetail({ kind: 'emergency', phase: 'error', errorMessage: nuAskUiStrings.errLocationRequired || 'Turn on location to load emergency services near you.' }); return; } setLiveUserCoords(coords); const languageCode = resolveNuAskPreferredLanguageCode(); const requestBody = { message: 'EMERGENCY', chat_id: readChatId(), languageCode, latitude: coords.lat, longitude: coords.lng, location: { lat: coords.lat, lng: coords.lng, ...(typeof coords.accuracy === 'number' && Number.isFinite(coords.accuracy) ? { accuracy: coords.accuracy } : {}) } }; const res = await window.SylvanFlowAuth.authenticatedFetch(`${SF_API_BASE}/api/chat/send`, { method: 'POST', headers: { 'Content-Type': 'application/json' }, body: JSON.stringify(requestBody) }); window.SylvanFlowAuth.handleAuthResponse(res); const data = await res.json(); if (!res.ok || data.ok !== true) { setNowHotbarDetail({ kind: 'emergency', phase: 'error', errorMessage: data?.error || data?.message || nuAskUiStrings.emergencyRequestFailed || 'Emergency request failed.' }); return; } if (data.chat_id && typeof data.chat_id === 'string') { try { localStorage.setItem('sylvanflow_chat_id', data.chat_id); } catch (e) { /* ignore */ } } const emergencyId = data.ai?.emergency_id || data.emergency_id; if (!emergencyId || String(emergencyId).trim() === '') { const hint = typeof data.ai_reply === 'string' && data.ai_reply ? data.ai_reply.slice(0, 280) : ''; setNowHotbarDetail({ kind: 'emergency', phase: 'error', errorMessage: hint || nuAskUiStrings.emergencyRequestFailed || 'No emergency session id returned. Try Ask Sylvan chat.' }); return; } setNowHotbarDetail({ kind: 'emergency', phase: 'ready', emergencyId: String(emergencyId).trim(), languageCode }); } catch (e) { setNowHotbarDetail({ kind: 'emergency', phase: 'error', errorMessage: e?.message || nuAskUiStrings.emergencyRequestFailed || 'Could not reach the server.' }); } }, [SF_API_BASE, nuAskUiStrings]); const readStoredChatId = useCallback(() => { try { const s = localStorage.getItem('sylvanflow_chat_id'); if (s && typeof s === 'string' && s.startsWith('chat:')) return s; } catch (e) { /* ignore */ } return null; }, []); const scheduleNuAskLatestHide = useCallback(() => { if (nuAskLatestHideTimerRef.current) { clearTimeout(nuAskLatestHideTimerRef.current); nuAskLatestHideTimerRef.current = null; } if (nuAskLatestClearTimerRef.current) { clearTimeout(nuAskLatestClearTimerRef.current); nuAskLatestClearTimerRef.current = null; } nuAskLatestHideTimerRef.current = setTimeout(() => { setNuAskLatestVisible(false); }, NUASK_LATEST_TTL_MS); nuAskLatestClearTimerRef.current = setTimeout(() => { setNuAskLatestMounted(false); }, NUASK_LATEST_TTL_MS + NUASK_LATEST_FADE_MS); }, [NUASK_LATEST_FADE_MS, NUASK_LATEST_TTL_MS]); const showNuAskLatestCard = useCallback( (nextText) => { const normalized = plainTextFromChatMarkdown(typeof nextText === 'string' ? nextText.trim() : ''); if (normalized) setNuAskLastAssistantText(normalized); const hasText = normalized || nuAskLastAssistantText; if (!hasText) return; setNuAskLatestMounted(true); setNuAskLatestVisible(true); setNuAskLatestHolo(true); scheduleNuAskLatestHide(); }, [nuAskLastAssistantText, scheduleNuAskLatestHide] ); const touchNuAskChatBox = useCallback(() => { if (!nuAskLastAssistantText) return; setNuAskLatestMounted(true); setNuAskLatestVisible(true); setNuAskLatestHolo(true); scheduleNuAskLatestHide(); }, [nuAskLastAssistantText, scheduleNuAskLatestHide]); useEffect(() => { if (!nuAskLastAssistantText) setNuAskLatestHolo(false); }, [nuAskLastAssistantText]); const dismissNuAskLatestHolo = useCallback(() => setNuAskLatestHolo(false), []); const clearNuAskLatestReply = useCallback(() => { setNuAskLastAssistantText(''); setNuAskLatestVisible(false); setNuAskLatestMounted(false); setNuAskLatestHolo(false); if (nuAskLatestHideTimerRef.current) { clearTimeout(nuAskLatestHideTimerRef.current); nuAskLatestHideTimerRef.current = null; } if (nuAskLatestClearTimerRef.current) { clearTimeout(nuAskLatestClearTimerRef.current); nuAskLatestClearTimerRef.current = null; } }, []); const copyNuAskLatestReply = useCallback(async () => { const t = nuAskLastAssistantText; if (!t || typeof navigator === 'undefined' || !navigator.clipboard?.writeText) return; try { await navigator.clipboard.writeText(t); } catch (e) { /* noop */ } }, [nuAskLastAssistantText]); const openNowFullChatInTv = useCallback(() => { setNowTvAskOpen(true); }, []); const closeNowTvAsk = useCallback(() => { setNowTvAskOpen(false); }, []); useEffect(() => { if (panel !== 1 || !nuAskLatestHolo || !nuAskLastAssistantText) return undefined; const onKey = (e) => { if (e.defaultPrevented || e.altKey || e.ctrlKey || e.metaKey) return; const el = e.target; if (el && (el.tagName === 'INPUT' || el.tagName === 'TEXTAREA' || el.isContentEditable)) return; const k = e.key; if (k === '1') { e.preventDefault(); dismissNuAskLatestHolo(); } else if (k === '2') { e.preventDefault(); openNowFullChatInTv(); } else if (k === '3') { e.preventDefault(); void copyNuAskLatestReply(); } else if (k === '4') { e.preventDefault(); clearNuAskLatestReply(); } }; window.addEventListener('keydown', onKey); return () => window.removeEventListener('keydown', onKey); }, [ panel, nuAskLatestHolo, nuAskLastAssistantText, dismissNuAskLatestHolo, copyNuAskLatestReply, clearNuAskLatestReply, openNowFullChatInTv ]); /** Same `/api/chat/status` polling contract as `AskSylvanPage.waitForAssistantReply`; updates NuAsk last-reply only. */ const waitForNuAskAssistantReply = useCallback( async ({ timeoutMs = 12000, intervalMs = 1500, sinceTimestamp } = {}) => { const start = Date.now(); while (Date.now() - start < timeoutMs) { let statusUrl = `${SF_API_BASE}/api/chat/status`; if (sinceTimestamp) statusUrl += `?last_message_time=${encodeURIComponent(sinceTimestamp)}`; const res = await window.SylvanFlowAuth.authenticatedFetch(statusUrl); window.SylvanFlowAuth.handleAuthResponse(res); if (res.ok) { const data = await res.json(); if (data?.ok && Array.isArray(data?.new_messages) && data.new_messages.length > 0) { const additions = data.new_messages .filter((m) => m.type === 'assistant' || m.ai_reply) .map((m) => ({ text: m.text || m.ai_reply, timestamp: m.timestamp || m.created_at_utc || new Date().toISOString() })); if (additions.length) { const last = additions[additions.length - 1]; const t = last.text != null ? String(last.text) : ''; if (t) return t; } } } await new Promise((r) => setTimeout(r, intervalMs)); } return null; }, [SF_API_BASE] ); const sendNuAskInlineChat = useCallback(async () => { if (!SF_API_BASE || !window.SylvanFlowAuth?.authenticatedFetch) { setNuAskInlineError(nuAskUiStrings.errApiUnavailable || 'Chat is unavailable.'); return; } if (nuAskInlineSendingRef.current) return; const text = nuAskInlineInputRef.current.trim().slice(0, NUASK_INLINE_MAX_LEN); if (!text) return; nuAskInlineSendingRef.current = true; setNuAskInlineSending(true); setNuAskInlineError(''); nuAskInlineInputRef.current = ''; setNuAskInlineInput(''); const userTimestamp = new Date().toISOString(); const languageCode = resolveNuAskPreferredLanguageCode(); const chatId = readStoredChatId(); const requestBody = { message: text, chat_id: chatId || null, languageCode, chat_mode: 'nuask_info_only' }; if ( liveUserCoords && typeof liveUserCoords.lat === 'number' && Number.isFinite(liveUserCoords.lat) && typeof liveUserCoords.lng === 'number' && Number.isFinite(liveUserCoords.lng) ) { requestBody.latitude = liveUserCoords.lat; requestBody.longitude = liveUserCoords.lng; requestBody.location = { lat: liveUserCoords.lat, lng: liveUserCoords.lng, ...(typeof liveUserCoords.accuracy === 'number' && Number.isFinite(liveUserCoords.accuracy) ? { accuracy: liveUserCoords.accuracy } : {}) }; if (window.uiLogger) { window.uiLogger.uiLog('[NUASK_INLINE] send with location', { hasAccuracy: typeof liveUserCoords.accuracy === 'number' }); } } try { if (window.uiLogger) { window.uiLogger.uiLog('[NUASK_INLINE] send start', { messageLength: text.length, hasChatId: !!chatId, hasLocation: !!requestBody.location }); } const res = await window.SylvanFlowAuth.authenticatedFetch(`${SF_API_BASE}/api/chat/send`, { method: 'POST', headers: { 'Content-Type': 'application/json' }, body: JSON.stringify(requestBody) }); window.SylvanFlowAuth.handleAuthResponse(res); let data; try { data = await res.json(); } catch (jsonError) { if (window.uiLogger) { window.uiLogger.uiError('[NUASK_INLINE] JSON parse error', { message: jsonError?.message }); } const invalidResponseMsg = (typeof window !== 'undefined' && window.getSysMessage ? await window.getSysMessage('ui:invalid_response') : null) || 'Sorry, I received an invalid response. Please try again.'; setNuAskInlineError(invalidResponseMsg); return; } if (!res.ok || data.ok === false) { const errText = data?.message || data?.error || 'Could not send message.'; setNuAskInlineError(errText); return; } if (data.ok !== true) { const unexpectedResponseMsg = (typeof window !== 'undefined' && window.getSysMessage ? await window.getSysMessage('ui:unexpected_response') : null) || 'Sorry, I received an unexpected response. Please try again.'; setNuAskInlineError(unexpectedResponseMsg); return; } if (data.chat_id && typeof data.chat_id === 'string') { try { localStorage.setItem('sylvanflow_chat_id', data.chat_id); } catch (e) { /* ignore */ } } if (typeof data.ai_reply === 'string' && data.ai_reply.trim() !== '') { const nextLatest = data.ai_reply.trim(); showNuAskLatestCard(nextLatest); if (typeof navigator !== 'undefined' && 'serviceWorker' in navigator) { navigator.serviceWorker.ready .then((reg) => { if (reg?.active) reg.active.postMessage({ type: 'NUASK_BACKGROUND_TRIGGER' }); }) .catch(() => {}); } return; } setNuAskInlineTyping(true); const polled = await waitForNuAskAssistantReply({ timeoutMs: 12000, intervalMs: 1500, sinceTimestamp: userTimestamp }); setNuAskInlineTyping(false); if (polled) { const nextLatest = polled.trim(); showNuAskLatestCard(nextLatest); if (typeof navigator !== 'undefined' && 'serviceWorker' in navigator) { navigator.serviceWorker.ready .then((reg) => { if (reg?.active) reg.active.postMessage({ type: 'NUASK_BACKGROUND_TRIGGER' }); }) .catch(() => {}); } } else { const timeoutMessage = (typeof window !== 'undefined' && window.getSysMessage ? await window.getSysMessage('ui:chat_timeout') : null) || "Sylvan didn't respond. Please try again."; setNuAskInlineError(timeoutMessage); } } catch (e) { if (window.uiLogger) { window.uiLogger.uiWarn('[NUASK_INLINE] send failed', { message: e?.message }); } setNuAskInlineError(e?.message || nuAskUiStrings.errApiUnavailable || 'Could not reach the server.'); } finally { nuAskInlineSendingRef.current = false; setNuAskInlineSending(false); setNuAskInlineTyping(false); } }, [ SF_API_BASE, liveUserCoords, readStoredChatId, waitForNuAskAssistantReply, nuAskUiStrings, showNuAskLatestCard ]); const cleanupNuAskSttCapture = useCallback(() => { if (nuAskSttTimeoutRef.current) { clearTimeout(nuAskSttTimeoutRef.current); nuAskSttTimeoutRef.current = null; } const stream = nuAskSttStreamRef.current; if (stream) { for (const track of stream.getTracks()) { try { track.stop(); } catch (e) { /* noop */ } } } nuAskSttStreamRef.current = null; nuAskSttRecorderRef.current = null; }, []); const transcribeNuAskVoiceBlob = useCallback( async (blob, durationMs) => { if (!SF_API_BASE || !window.SylvanFlowAuth?.authenticatedFetch) { setNuAskInlineError(nuAskUiStrings.errApiUnavailable || 'Voice input is unavailable.'); setNuAskSttPhase('idle'); return; } try { setNuAskInlineError(''); setNuAskSttPhase('transcribing'); const arr = await blob.arrayBuffer(); if (arr.byteLength > NUASK_STT_MAX_BYTES) { setNuAskInlineError('Voice clip too large. Keep clips under 20 seconds.'); setNuAskSttPhase('idle'); return; } const audioBase64 = arrayBufferToBase64(arr); const sttLanguageCode = resolveNuAskPreferredLanguageCode(); const res = await window.SylvanFlowAuth.authenticatedFetch(`${SF_API_BASE}/api/stt/transcribe`, { method: 'POST', headers: { 'Content-Type': 'application/json' }, body: JSON.stringify({ audio_base64: audioBase64, mime_type: blob.type || 'audio/webm', duration_ms: durationMs, languageCode: sttLanguageCode }) }); window.SylvanFlowAuth.handleAuthResponse(res); const data = await res.json().catch(() => ({})); if (!res.ok || data?.ok !== true) { const errText = data?.error || data?.reason || data?.message || (nuAskUiStrings.errApiUnavailable || 'Could not transcribe voice.'); setNuAskInlineError(errText); setNuAskSttPhase('idle'); return; } const transcript = typeof data?.text === 'string' ? data.text.trim() : ''; if (!transcript) { setNuAskInlineError('No speech detected. Please try again.'); setNuAskSttPhase('idle'); return; } const clipped = plainTextFromChatMarkdown(transcript.slice(0, NUASK_INLINE_MAX_LEN)); nuAskInlineInputRef.current = clipped; setNuAskInlineInput(clipped); touchNuAskChatBox(); setNuAskSttPhase('idle'); void sendNuAskInlineChat(); } catch (e) { setNuAskInlineError(e?.message || 'Could not transcribe voice.'); setNuAskSttPhase('idle'); } }, [SF_API_BASE, nuAskUiStrings, sendNuAskInlineChat, touchNuAskChatBox] ); const stopNuAskVoiceCapture = useCallback(() => { const activeRecorder = nuAskSttRecorderRef.current; if (!activeRecorder || activeRecorder.state !== 'recording') return; setNuAskSttPhase('transcribing'); try { activeRecorder.stop(); } catch (e) { setNuAskInlineError('Could not stop recording.'); setNuAskSttPhase('idle'); cleanupNuAskSttCapture(); } }, [cleanupNuAskSttCapture]); const startNuAskVoiceCapture = useCallback(async () => { if (!nuAskSttSupported) { setNuAskInlineError('Voice input is not supported on this device.'); return; } if (nuAskInlineSending || nuAskInlineTyping || nuAskSttPhase === 'transcribing') return; const activeRecorder = nuAskSttRecorderRef.current; if (activeRecorder && activeRecorder.state === 'recording') return; try { setNuAskInlineError(''); const stream = await navigator.mediaDevices.getUserMedia({ audio: true }); nuAskSttStreamRef.current = stream; nuAskSttChunksRef.current = []; nuAskSttStartedAtRef.current = Date.now(); const mimeCandidates = ['audio/webm;codecs=opus', 'audio/webm', 'audio/mp4']; const pickedMime = mimeCandidates.find((m) => window.MediaRecorder.isTypeSupported(m)); const recorder = pickedMime ? new MediaRecorder(stream, { mimeType: pickedMime }) : new MediaRecorder(stream); nuAskSttRecorderRef.current = recorder; recorder.ondataavailable = (evt) => { if (evt?.data && evt.data.size > 0) nuAskSttChunksRef.current.push(evt.data); }; recorder.onerror = () => { setNuAskInlineError('Voice recording failed. Please try again.'); setNuAskSttPhase('idle'); cleanupNuAskSttCapture(); }; recorder.onstop = async () => { const chunks = Array.isArray(nuAskSttChunksRef.current) ? nuAskSttChunksRef.current : []; nuAskSttChunksRef.current = []; const elapsed = Math.max(1, Date.now() - (nuAskSttStartedAtRef.current || Date.now())); const blob = chunks.length > 0 ? new Blob(chunks, { type: recorder.mimeType || 'audio/webm' }) : null; cleanupNuAskSttCapture(); if (!blob || blob.size <= 0) { setNuAskSttPhase('idle'); return; } if (blob.size < 720) { setNuAskInlineError('Recording too short — hold the mic a moment longer.'); setNuAskSttPhase('idle'); return; } await transcribeNuAskVoiceBlob(blob, Math.min(elapsed, NUASK_STT_MAX_MS)); }; recorder.start(120); setNuAskSttPhase('recording'); nuAskSttTimeoutRef.current = setTimeout(() => { const current = nuAskSttRecorderRef.current; if (current && current.state === 'recording') { stopNuAskVoiceCapture(); } }, NUASK_STT_MAX_MS + 300); } catch (e) { setNuAskInlineError('Microphone permission denied or unavailable.'); setNuAskSttPhase('idle'); cleanupNuAskSttCapture(); } }, [ NUASK_STT_MAX_MS, cleanupNuAskSttCapture, nuAskInlineSending, nuAskInlineTyping, nuAskSttPhase, nuAskSttSupported, stopNuAskVoiceCapture, transcribeNuAskVoiceBlob ]); const handleNuAskVoicePressStart = useCallback( (evt) => { evt?.preventDefault?.(); touchNuAskChatBox(); void startNuAskVoiceCapture(); }, [startNuAskVoiceCapture, touchNuAskChatBox] ); const handleNuAskVoicePressEnd = useCallback( (evt) => { evt?.preventDefault?.(); stopNuAskVoiceCapture(); }, [stopNuAskVoiceCapture] ); useEffect(() => { return () => { cleanupNuAskSttCapture(); }; }, [cleanupNuAskSttCapture]); useEffect(() => { return () => { if (nuAskLatestHideTimerRef.current) clearTimeout(nuAskLatestHideTimerRef.current); if (nuAskLatestClearTimerRef.current) clearTimeout(nuAskLatestClearTimerRef.current); }; }, []); useLayoutEffect(() => { const updateDockMetrics = () => { const measure = () => { let nextH = 0; try { const el = nuAskNowDockRef.current; if (el?.getBoundingClientRect) nextH = Math.max(0, Math.ceil(el.getBoundingClientRect().height || 0)); } catch (e) { nextH = 0; } setNuAskNowDockHeight((prev) => (prev === nextH ? prev : nextH)); }; requestAnimationFrame(() => { requestAnimationFrame(measure); }); }; updateDockMetrics(); window.addEventListener('resize', updateDockMetrics); let ro; if (typeof ResizeObserver !== 'undefined' && nuAskNowDockRef.current) { ro = new ResizeObserver(updateDockMetrics); ro.observe(nuAskNowDockRef.current); } return () => { window.removeEventListener('resize', updateDockMetrics); if (ro) ro.disconnect(); }; }, [panel, nuAskLatestMounted, nuAskLatestVisible, nuAskInlineError, nuAskInlineTyping, nuAskSttPhase, nuAskInlineInput, nowTvAskOpen]); useEffect(() => { const enteredNow = panel === 1 && prevPanelRef.current !== 1; prevPanelRef.current = panel; if (!enteredNow) return; if (nowRecoInFlightRef.current || nowRecoLoading) return; const hasFreshReco = nowRecoOptions.length > 0 && nowRecoPersistUntilMs > Date.now(); if (hasFreshReco) return; refreshNowRecommendations(); }, [panel, SF_API_BASE, nowRecoLoading, nowRecoOptions.length, nowRecoPersistUntilMs]); useEffect(() => { const wasLoading = prevNowRecoLoadingRef.current; prevNowRecoLoadingRef.current = nowRecoLoading; if (!wasLoading || nowRecoLoading || panel !== 1) return; requestAnimationFrame(() => { requestAnimationFrame(() => snapNowRecoScrollToTop()); }); }, [nowRecoLoading, panel, snapNowRecoScrollToTop]); useEffect(() => { if (wasNowRecoLoadingForRevealRef.current && !nowRecoLoading && nowRecoSyncPhase === 'ready') { setTopRecoRevealKey((k) => k + 1); } wasNowRecoLoadingForRevealRef.current = nowRecoLoading; }, [nowRecoLoading, nowRecoSyncPhase]); useEffect(() => { if (!showLocationPrompt) return undefined; const timer = setTimeout(() => setShowLocationPrompt(false), 3000); return () => clearTimeout(timer); }, [showLocationPrompt]); useEffect(() => { try { const raw = localStorage.getItem(EN_ROUTE_LOCK_STORAGE_KEY); if (!raw) return; const parsed = JSON.parse(raw); const until = Number(parsed?.until_ms || 0); const poi = asText(parsed?.poi_name || '').trim(); const poiId = normalizePoiIdKey(parsed?.poi_id || ''); if (until > Date.now()) { setNowEnRouteLockUntilMs(until); setNowEnRouteLockPoiName(poi); setNowEnRouteLockPoiId(poiId); } else { localStorage.removeItem(EN_ROUTE_LOCK_STORAGE_KEY); } } catch {} }, [normalizePoiIdKey]); useEffect(() => { if (!nowEnRouteLockUntilMs) return undefined; const ms = nowEnRouteLockUntilMs - Date.now(); if (ms <= 0) { setNowEnRouteLockUntilMs(0); setNowEnRouteLockPoiName(''); setNowEnRouteLockPoiId(''); return undefined; } const t = setTimeout(() => { setNowEnRouteLockUntilMs(0); setNowEnRouteLockPoiName(''); setNowEnRouteLockPoiId(''); }, ms + 20); return () => clearTimeout(t); }, [nowEnRouteLockUntilMs]); useEffect(() => { if (!(nowEnRouteLockUntilMs > Date.now())) return undefined; const t = setInterval(() => setNowLockTickMs(Date.now()), 1000); return () => clearInterval(t); }, [nowEnRouteLockUntilMs]); useEffect(() => { try { if (nowEnRouteLockUntilMs > Date.now()) { localStorage.setItem( EN_ROUTE_LOCK_STORAGE_KEY, JSON.stringify({ until_ms: nowEnRouteLockUntilMs, poi_name: nowEnRouteLockPoiName || '', poi_id: nowEnRouteLockPoiId || '' }) ); } else { localStorage.removeItem(EN_ROUTE_LOCK_STORAGE_KEY); } } catch {} }, [nowEnRouteLockUntilMs, nowEnRouteLockPoiName, nowEnRouteLockPoiId]); useEffect(() => { const syncProfile = () => setProfile(window.SylvanFlowState?.getProfile?.() || null); syncProfile(); if (window.SylvanFlowState?.on) { window.SylvanFlowState.on('profile', syncProfile); return () => window.SylvanFlowState.off('profile', syncProfile); } return undefined; }, []); useEffect(() => { setProfilePhotoUrl(null); if (!profile || !SF_API_BASE || !window.SylvanFlowAuth?.authenticatedFetch) return; const CACHE_KEY = 'profile_photo_cache_v1'; const CACHE_MAX_AGE_MS = 7 * 24 * 60 * 60 * 1000; if (profile.profile_photo_url && !profile.profile_photo_url.includes('/api/profile-photo/')) { setProfilePhotoUrl(profile.profile_photo_url); return; } const r2Key = profile.profile_photo_r2_key; const fetchSelfPhoto = async () => { try { const res = await window.SylvanFlowAuth.authenticatedFetch(`${SF_API_BASE}/api/profile-photo/self`); if (res.status === 204 || !res.ok) { setProfilePhotoUrl(null); return; } const blob = await res.blob(); if (blob.size === 0 || !blob.type.startsWith('image/')) { setProfilePhotoUrl(null); return; } const reader = new FileReader(); reader.onloadend = () => { const dataUrl = reader.result; if (r2Key && dataUrl) { try { localStorage.setItem( CACHE_KEY, JSON.stringify({ profile_photo_r2_key: r2Key, dataUrl, cachedAt: Date.now() }) ); } catch (e) { /* ignore */ } } setProfilePhotoUrl(dataUrl); }; reader.onerror = () => setProfilePhotoUrl(null); reader.readAsDataURL(blob); } catch (e) { setProfilePhotoUrl(null); } }; if (r2Key || (profile.profile_photo_url && profile.profile_photo_url.includes('/api/profile-photo/'))) { (async () => { try { if (r2Key) { const cached = localStorage.getItem(CACHE_KEY); if (cached) { const cacheData = JSON.parse(cached); const cacheAge = Date.now() - (cacheData.cachedAt || 0); if ( cacheData.profile_photo_r2_key === r2Key && cacheAge < CACHE_MAX_AGE_MS && cacheData.dataUrl ) { setProfilePhotoUrl(cacheData.dataUrl); return; } localStorage.removeItem(CACHE_KEY); } } await fetchSelfPhoto(); } catch (e) { setProfilePhotoUrl(null); } })(); } else if (profile.photo_url) { setProfilePhotoUrl(profile.photo_url); } }, [profile?.profile_photo_r2_key, profile?.profile_photo_url, profile?.photo_url]); useEffect(() => { let cancelled = false; async function loadPastCorridorData() { let activities = []; let resolvedTripKey = null; let mutationTripKey = null; if (SF_API_BASE && window.SylvanFlowAuth?.authenticatedFetch) { try { let tripKey = null; const pickCorridorTripKey = (list) => { if (!list || list.length === 0) return null; const today = list.find((it) => it && (it.is_today_plan === true || it.is_today_plan === 'true')); const first = list[0]; return (today || first).trip_key || (today || first).Trip_Key || null; }; const pickTodayPlanTripKeyOnly = (list) => { if (!list || list.length === 0) return null; const today = list.find((it) => it && (it.is_today_plan === true || it.is_today_plan === 'true')); if (!today) return null; return today.trip_key || today.Trip_Key || null; }; const cachedList = window.SylvanFlowState?.getItineraries?.(); if (cachedList && cachedList.length > 0) { tripKey = pickCorridorTripKey(cachedList); mutationTripKey = pickTodayPlanTripKeyOnly(cachedList); } if (!tripKey) { const res = await window.SylvanFlowAuth.authenticatedFetch( `${SF_API_BASE}/api/itineraries?client_day_key=${encodeURIComponent(formatClientDayKeyLocal(new Date()))}` ); window.SylvanFlowAuth.handleAuthResponse(res); if (res.ok && !cancelled) { const data = await res.json(); const itins = data.itineraries || []; if (itins.length > 0) { tripKey = pickCorridorTripKey(itins); mutationTripKey = pickTodayPlanTripKeyOnly(itins); if (window.SylvanFlowState?.setItineraries) window.SylvanFlowState.setItineraries(itins); } } } resolvedTripKey = tripKey; if (tripKey && !cancelled) { const res2 = await window.SylvanFlowAuth.authenticatedFetch( `${SF_API_BASE}/api/itineraries/${encodeURIComponent(tripKey)}` ); window.SylvanFlowAuth.handleAuthResponse(res2); if (res2.ok && !cancelled) { const detail = await res2.json(); const itinerary = detail.itinerary; if (itinerary) { activities = flattenItineraryActivities(itinerary); } } } } catch (e) { if (!cancelled && window.uiLogger) { window.uiLogger.uiWarn('[NuAsk] past corridor load failed:', e?.message || e); } } } if (activities.length === 0) { mutationTripKey = null; } if (!cancelled) { setCorridorTripKey(resolvedTripKey); setCorridorMutationTripKey(mutationTripKey); setCorridorActivities(activities); } } loadPastCorridorData(); const onItins = () => { if (!cancelled) loadPastCorridorData(); }; if (window.SylvanFlowState?.on) { window.SylvanFlowState.on('itineraries', onItins); } return () => { cancelled = true; if (window.SylvanFlowState?.off) window.SylvanFlowState.off('itineraries', onItins); }; }, []); useEffect(() => { const el = scrollerRef.current; if (!el) return; const scrollToNow = () => { const w = el.clientWidth; if (w > 0) el.scrollLeft = w; }; scrollToNow(); requestAnimationFrame(() => requestAnimationFrame(scrollToNow)); const onScroll = () => { const cw = el.clientWidth || 1; const i = Math.round(el.scrollLeft / cw); setPanel(Math.max(0, Math.min(2, i))); }; el.addEventListener('scroll', onScroll, { passive: true }); return () => el.removeEventListener('scroll', onScroll); }, []); const SpotlightTourCmp = typeof window !== 'undefined' ? window.SpotlightTour : null; const STS = typeof window !== 'undefined' ? window.SpotlightTourStorage : null; const beginCorridorTour = useCallback((force) => { setCorridorTourForce(!!force); setCorridorTourAwaitOpen(true); }, []); const closeCorridorTour = useCallback( (meta) => { setCorridorTourOpen(false); setCorridorTourForce(false); setCorridorTourAwaitOpen(false); const uk = profile?.user_key || (STS && STS.readUserKey()); if (uk && STS && meta && meta.dontShowAgain) { STS.setNuaskCorridorTourSuppressed(uk, true); } setCorridorTourDontShow(false); }, [profile?.user_key] ); const corridorTourSteps = useMemo( () => [ { resolveTarget: () => tourPanelNavRef.current, title: corridorTourLabels.corridorTitle, body: corridorTourLabels.corridorBody }, { resolveTarget: () => tourNowRailRef.current, title: corridorTourLabels.nowTitle, body: corridorTourLabels.nowBody } ], [corridorTourLabels] ); useEffect(() => { let cancelled = false; const lang = profile?.preferred_language || resolveNuAskPreferredLanguageCode() || 'en'; const load = async (key, fb) => { if (typeof window.getSysMessage !== 'function') return fb; try { const v = await window.getSysMessage(key, lang); return v && String(v).trim() ? String(v).trim() : fb; } catch (_) { return fb; } }; (async () => { const [skip, next, done, dontShowAgain, corridorTitle, corridorBody, nowTitle, nowBody] = await Promise.all([ load('ui:nuask_tour_skip', 'Skip'), load('ui:nuask_tour_next', 'Next'), load('ui:nuask_tour_done', 'Done'), load('ui:nuask_tour_dont_show_again', corridorTourLabels.dontShowAgain), load('ui:nuask_tour_corridor_title', corridorTourLabels.corridorTitle), load('ui:nuask_tour_corridor_body', corridorTourLabels.corridorBody), load('ui:nuask_tour_now_title', corridorTourLabels.nowTitle), load('ui:nuask_tour_now_body', corridorTourLabels.nowBody) ]); if (cancelled) return; setCorridorTourLabels({ skip, next, done, dontShowAgain, corridorTitle, corridorBody, nowTitle, nowBody }); })(); return () => { cancelled = true; }; }, [profile?.preferred_language, profile?.user_key]); useEffect(() => { if (!STS) return undefined; const pending = STS.consumePendingTour(STS.TOUR_IDS.NUASK_CORRIDOR); if (pending) beginCorridorTour(!!pending.force); const onTour = (ev) => { const d = ev.detail; if (d && d.tourId === STS.TOUR_IDS.NUASK_CORRIDOR) { beginCorridorTour(!!d.force); } }; window.addEventListener(STS.TOUR_EVENT, onTour); return () => window.removeEventListener(STS.TOUR_EVENT, onTour); }, [beginCorridorTour]); useEffect(() => { if (!corridorTourAwaitOpen) return undefined; const t = window.setTimeout(() => { setCorridorTourOpen(true); setCorridorTourAwaitOpen(false); }, 200); return () => window.clearTimeout(t); }, [corridorTourAwaitOpen]); useEffect(() => { if (corridorTourForce) return; if (!STS) return undefined; const uk = profile?.user_key || STS.readUserKey(); if (!uk) return undefined; if (STS.isNuaskCorridorTourSuppressed(uk)) return undefined; const t = window.setTimeout(() => setCorridorTourOpen(true), 500); return () => window.clearTimeout(t); }, [profile?.user_key, corridorTourForce]); const travelKmStraightToNext = useMemo(() => { if (!liveUserCoords || !nowNextCoords) return null; return haversineKm( liveUserCoords.lat, liveUserCoords.lng, nowNextCoords.lat, nowNextCoords.lng ); }, [liveUserCoords, nowNextCoords]); const travelFromHereToNextMins = useMemo(() => { if (travelKmStraightToNext == null) return null; return roughUrbanDriveMinutes(travelKmStraightToNext); }, [travelKmStraightToNext]); const travelLeaveAlert = useMemo(() => { if (!hasActiveTripContext) return null; if (travelFromHereToNextMins == null || nowClock.mins <= 0 || !nowNextCoords) return null; const travelMins = travelFromHereToNextMins; const windowMins = nowClock.mins; const nextTitle = asText(nowNextCard.title) || (nuAskUiStrings.yourNextStop || 'your next stop'); if (travelMins >= windowMins) { return { tone: 'urgent', title: nuAskUiStrings.travelAlertUrgentTitle || 'Start travelling to your next stop now', body: ( nuAskUiStrings.travelAlertUrgentBodyTemplate || 'About {travel_mins} min straight-line travel to “{next_title}”, but only about {window_mins} min until that activity — you should be on your way (estimates, not live traffic).' ) .replace('{travel_mins}', String(travelMins)) .replace('{next_title}', nextTitle) .replace('{window_mins}', String(windowMins)) }; } if (travelMins >= windowMins - 2) { return { tone: 'tight', title: nuAskUiStrings.travelAlertTightTitle || 'Tight — consider leaving now', body: (nuAskUiStrings.travelAlertTightBodyTemplate || '~{travel_mins} min travel to “{next_title}” vs ~{window_mins} min left. Buffer is thin.') .replace('{travel_mins}', String(travelMins)) .replace('{next_title}', nextTitle) .replace('{window_mins}', String(windowMins)) }; } return null; }, [hasActiveTripContext, travelFromHereToNextMins, nowClock.mins, nowNextCoords, nowNextCard.title, nuAskUiStrings]); /** No sidetrip POIs — travel time to next stop consumes (or exceeds) the remaining window. */ const travelOnlyMode = travelLeaveAlert != null; const nextStopDirectionsUrl = useMemo(() => { if (!nowNextCoords) return ''; const q = `${nowNextCoords.lat},${nowNextCoords.lng}`; return `https://www.google.com/maps/dir/?api=1&destination=${encodeURIComponent(q)}`; }, [nowNextCoords]); /** NEXT hero sub-line: straight-line km + urban-pace minutes when device location and next coords exist. */ const nextHighlightDistanceLine = useMemo(() => { if (!liveUserCoords || !nowNextCoords) return ''; const km = haversineKm(liveUserCoords.lat, liveUserCoords.lng, nowNextCoords.lat, nowNextCoords.lng); if (km == null || !Number.isFinite(Number(km))) return ''; const n = Number(km); const walkMin = roughUrbanDriveMinutes(n); const kmStr = n < 10 ? n.toFixed(1) : String(Math.round(n)); const tpl = nuAskUiStrings.nextHighlightMetaTemplate || '~{walk} min · {km} km'; return tpl.replace(/\{walk\}/g, String(walkMin)).replace(/\{km\}/g, kmStr); }, [liveUserCoords, nowNextCoords, nuAskUiStrings]); const nextPanelMapImageUrl = useMemo(() => { if (!nowNextCoords) return ''; const lab = encodeURIComponent(mapLabelLetter(nowNextCard.title)); return `${SMART_BRAIN_MEDIA_BASE}/map-image?lat=${encodeURIComponent(String(nowNextCoords.lat))}&lng=${encodeURIComponent(String(nowNextCoords.lng))}&label=${lab}&zoom=14&size=1200x700`; }, [nowNextCoords, nowNextCard.title]); const nextHighlightThumbMapUrl = useMemo(() => { if (!nowNextCoords) return ''; const lab = encodeURIComponent(mapLabelLetter(nowNextCard.title)); return `${SMART_BRAIN_MEDIA_BASE}/map-image?lat=${encodeURIComponent(String(nowNextCoords.lat))}&lng=${encodeURIComponent(String(nowNextCoords.lng))}&label=${lab}&zoom=15&size=400x300`; }, [nowNextCoords, nowNextCard.title]); const pastMapPoints = useMemo(() => { return pastCardTargets .map((t, idx) => { const coords = extractActivityCoords(t?.activity); if (!coords) return null; return { lat: coords.lat, lng: coords.lng, label: String(idx + 1), title: asText(t?.activity?.title) || asText(t?.activity?.Title) || `Stop ${idx + 1}` }; }) .filter(Boolean); }, [pastCardTargets]); const standbyPastCoords = useMemo(() => { const d = new Date(); const seed = Number(`${d.getFullYear()}${d.getMonth() + 1}${d.getDate()}`); const lat = 1.28 + ((seed % 17) - 8) * 0.0022; const lng = 103.85 + (((Math.floor(seed / 10)) % 19) - 9) * 0.0022; return { lat, lng }; }, []); const pastMiniMapMode = useMemo(() => { if (!hasActiveTripContext) return 'standby_random'; if (pastMapPoints.length > 0) return 'active_with_pins'; return 'active_context'; }, [hasActiveTripContext, pastMapPoints]); const pastMiniMapFocus = useMemo(() => { if (pastMiniMapMode === 'standby_random') return standbyPastCoords; if (pastMapPoints.length > 0) return pastMapPoints[pastMapPoints.length - 1]; if (nowNextCoords) return nowNextCoords; if (liveUserCoords) return liveUserCoords; return standbyPastCoords; }, [pastMiniMapMode, standbyPastCoords, pastMapPoints, nowNextCoords, liveUserCoords]); const pastMiniMapImageUrl = useMemo(() => { if (pastMiniMapMode === 'active_with_pins' && pastMapPoints.length > 1) { const markersParam = pastMapPoints .map((p) => `${p.lat},${p.lng},${mapLabelLetter(p.label)}`) .join(';'); const pathParam = pastMapPoints.map((p) => `${p.lat},${p.lng}`).join(';'); return `${SMART_BRAIN_MEDIA_BASE}/map-image?markers=${encodeURIComponent(markersParam)}&path=${encodeURIComponent(pathParam)}&zoom=14&size=640x360&scale=2&maptype=roadmap`; } const focus = pastMiniMapMode === 'active_with_pins' ? pastMapPoints[0] : pastMiniMapFocus; if (!focus) return ''; const lab = encodeURIComponent( pastMiniMapMode === 'standby_random' ? 'S' : mapLabelLetter(asText(focus.title) || 'P') ); return `${SMART_BRAIN_MEDIA_BASE}/map-image?lat=${encodeURIComponent(String(focus.lat))}&lng=${encodeURIComponent(String(focus.lng))}&label=${lab}&zoom=14&size=640x360&scale=2&maptype=roadmap`; }, [pastMiniMapMode, pastMapPoints, pastMiniMapFocus]); const pastMiniMapSrc = pastMiniMapImgFailed ? '' : pastMiniMapImageUrl; const pastMiniMapLinkUrl = useMemo(() => { const useGaode = isChinaCoords(pastMiniMapFocus); if (pastMiniMapMode === 'active_with_pins' && pastMapPoints.length > 1) { const first = pastMapPoints[0]; const last = pastMapPoints[pastMapPoints.length - 1]; const via = pastMapPoints.slice(1, -1); if (useGaode) { return `https://uri.amap.com/navigation?from=${encodeURIComponent(`${first.lng},${first.lat},Start`)}&to=${encodeURIComponent(`${last.lng},${last.lat},End`)}&mode=car&policy=1&src=sylvanflow&coordinate=gaode&callnative=1`; } const waypoints = via.map((p) => `${p.lat},${p.lng}`).join('|'); const q = new URLSearchParams({ api: '1', origin: `${first.lat},${first.lng}`, destination: `${last.lat},${last.lng}`, travelmode: 'driving' }); if (waypoints) q.set('waypoints', waypoints); return `https://www.google.com/maps/dir/?${q.toString()}`; } if (!pastMiniMapFocus) return ''; if (useGaode) { return `https://uri.amap.com/marker?position=${encodeURIComponent(`${pastMiniMapFocus.lng},${pastMiniMapFocus.lat}`)}&name=${encodeURIComponent(asText(pastMiniMapFocus.title) || 'Map point')}&src=sylvanflow&coordinate=gaode&callnative=1`; } return `https://www.google.com/maps/search/?api=1&query=${encodeURIComponent(`${pastMiniMapFocus.lat},${pastMiniMapFocus.lng}`)}`; }, [pastMiniMapMode, pastMapPoints, pastMiniMapFocus]); useEffect(() => { setPastMiniMapImgFailed(false); }, [pastMiniMapImageUrl]); const nowRecoPersistActive = nowRecoPersistUntilMs > Date.now(); /** Orbit + TOP recommendation card: only after first sync completes; hidden again while a refresh is in flight. */ const showNowRecoTopStack = nowRecoSyncPhase === 'ready' && !nowRecoLoading; /** * Scroll clearance for the fixed bottom dock (hotbar + inline Ask + twin nav). * Use measured height + gap — do not cap low or long WHY / alternatives copy ends under the dock. */ const dockMeasuredH = nuAskNowDockHeight > 12 ? nuAskNowDockHeight : 0; const nuAskDockBottomPadPx = Math.max( 36, dockMeasuredH > 0 ? dockMeasuredH + 6 : 96 ); const nuAskDockSectionBottomPadStyle = useMemo( () => ({ paddingBottom: `calc(${nuAskDockBottomPadPx}px + env(safe-area-inset-bottom, 0px))` }), [nuAskDockBottomPadPx] ); useEffect(() => { if (panel !== 1) setNowTvAskOpen(false); }, [panel]); const goToPanel = useCallback((index) => { const el = scrollerRef.current; if (!el) return; const w = el.clientWidth || 1; const i = Math.max(0, Math.min(2, Math.floor(Number(index)) || 0)); el.scrollTo({ left: i * w, behavior: 'smooth' }); }, []); const corridorPanelHeader = useMemo(() => { if (panel === 0) { return { title: nuAskUiStrings.panelPastTitle, subtitle: nuAskUiStrings.pastSubtitle }; } if (panel === 1) { return { title: nuAskUiStrings.panelNowTitle, subtitle: nuAskUiStrings.panelNowSubtitle }; } return { title: nuAskUiStrings.panelNextTitle, subtitle: nuAskUiStrings.panelNextSubtitle }; }, [panel, nuAskUiStrings]); const header = corridorPanelHeader; const panelSubtitle = panel === 0 ? nuAskUiStrings.pastSubtitle : header.subtitle; const displayName = profile?.name || profile?.user_name || 'User'; const pastRealCount = useMemo(() => pastCardTargets.filter(Boolean).length, [pastCardTargets]); const showPastDetailBlocks = hasActiveTripContext && pastRealCount > 0; const nextStandbyMode = !hasActiveTripContext || !hasUpcomingActivity; const nowPrevPlaceholder = !hasActiveTripContext || asText(nowPrevCard?.icon) === '◌'; const nowNextPlaceholder = !hasActiveTripContext || !hasUpcomingActivity || asText(nowNextCard?.icon) === '◌'; const enRouteLockActive = nowEnRouteLockUntilMs > Date.now(); const enRouteRemainingLabel = useMemo(() => { const remainMs = Math.max(0, nowEnRouteLockUntilMs - nowLockTickMs); const totalSec = Math.floor(remainMs / 1000); const m = String(Math.floor(totalSec / 60)).padStart(2, '0'); const s = String(totalSec % 60).padStart(2, '0'); return `${m}:${s}`; }, [nowEnRouteLockUntilMs, nowLockTickMs]); const pastHeroTitle = useMemo(() => { if (!hasActiveTripContext) return `${nuAskUiStrings.panelPastTitle || 'PAST'} · STANDBY`; if (pastRealCount <= 1) return nuAskUiStrings.journeyMoments || (nuAskUiStrings.panelPastTitle || 'PAST'); return `${nuAskUiStrings.greatStart || 'Great start!'} 🥳`; }, [hasActiveTripContext, pastRealCount, nuAskUiStrings]); const pastHeroBody = useMemo(() => { if (!hasActiveTripContext) return nuAskUiStrings.errNoTrip || 'No active trip linked'; const tpl = nuAskUiStrings.placesExploredTemplate || "You've explored {count} places."; return String(tpl).replace('{count}', String(Math.max(0, placesActivityCount))); }, [hasActiveTripContext, placesActivityCount, nuAskUiStrings]); const hasLiveReco = nowRecoOptions.length > 0 && (nowRecoPersistActive || !travelOnlyMode); /** POI hours footnote must not depend on SYS hydration alone — other NOW lines use `|| '…'` fallbacks. */ const poiHoursVerifyDisclaimerResolved = useMemo(() => { const s = nuAskUiStrings.poiHoursVerifyDisclaimer; if (typeof s === 'string' && s.trim()) return s.trim(); try { const d = typeof window !== 'undefined' && window.NUASK_UI_DEFAULTS?.poiHoursVerifyDisclaimer; if (typeof d === 'string' && d.trim()) return d.trim(); } catch (e) { /* noop */ } return 'Hours and listings can be wrong or out of date. Before you go, confirm the place is still open and still operating (not permanently closed).'; }, [nuAskUiStrings.poiHoursVerifyDisclaimer]); const availableWindowBridgeText = useMemo(() => { if (!hasActiveTripContext) return ''; const tpl = nuAskUiStrings.nowAvailableWindowBridgeTemplate; if (!tpl || String(tpl).trim() === '') return ''; const nextTitle = asText(nowNextCard?.title); if (!nextTitle || !nowClock.endLabel) return ''; const windowMins = formatDurationMins(nowClock.mins); return String(tpl) .replace(/\{window_mins\}/g, windowMins) .replace(/\{next_title\}/g, nextTitle) .replace(/\{end_time\}/g, nowClock.endLabel); }, [ hasActiveTripContext, nuAskUiStrings.nowAvailableWindowBridgeTemplate, nowClock.mins, nowClock.endLabel, nowNextCard?.title ]); const addPostStartWindowActive = useMemo(() => { if (!hasActiveTripContext || !Number.isFinite(nowCorridorPrevStartMs) || nowCorridorPrevStartMs <= 0) { return false; } const t = nowLockTickMs; return t >= nowCorridorPrevStartMs && t < nowCorridorPrevStartMs + NUASK_ACTIVITY_POST_START_ADD_LOCK_MS; }, [hasActiveTripContext, nowCorridorPrevStartMs, nowLockTickMs]); const patchMicroDisabledReason = useMemo(() => { if (nowRecoActionLoading) return nuAskUiStrings.patchDisabledLoading || ''; if (enRouteLockActive) return nuAskUiStrings.enRouteReplaceOnlyBody || ''; if (!hasLiveReco) return nuAskUiStrings.patchDisabledNoReco || ''; if (addPostStartWindowActive) return nuAskUiStrings.addHerePostStartLockHint || ''; return ''; }, [nowRecoActionLoading, enRouteLockActive, hasLiveReco, addPostStartWindowActive, nuAskUiStrings]); const replaceNextDisabledReason = useMemo(() => { if (nowRecoActionLoading) return nuAskUiStrings.patchDisabledLoading || ''; if (!hasLiveReco) return nuAskUiStrings.patchDisabledNoReco || ''; if (nowNextPlaceholder) return nuAskUiStrings.replaceNextNoFutureActivity || 'No next activity to replace yet.'; return ''; }, [nowRecoActionLoading, hasLiveReco, nowNextPlaceholder, nuAskUiStrings]); const resolveNuAskRecoTierBadge = (opt) => { const tier = opt?.recommendation_tier; if (tier === 'strong_fit') return nuAskUiStrings.strongFitDefault || 'STRONG FIT'; if (tier === 'personalized') return nuAskUiStrings.recoPersonalizedBadge || 'PERSONALIZED'; if (tier === 'alternative') return nuAskUiStrings.recoNextBestBadge || 'NEXT BEST'; return ''; }; const selectedRecoIdx = nowRecoOptions.findIndex((opt, idx) => getRecoKey(opt, idx) === selectedRecoKey); const topReco = (selectedRecoIdx >= 0 ? nowRecoOptions[selectedRecoIdx] : nowRecoOptions[0]) || null; const addHereDisabled = !hasLiveReco || !!nowRecoActionLoading || enRouteLockActive || addPostStartWindowActive; const addHereDisabledBannerLines = useMemo(() => { if (!addHereDisabled) return null; if (nowRecoActionLoading) { const line = nuAskUiStrings.patchDisabledLoading || 'Wait for the current action to finish.'; return line.trim() ? [line] : null; } if (enRouteLockActive) { const poi = nowEnRouteLockPoiName || topReco?.poi?.name || asText(nowNextCard?.title) || (nuAskUiStrings.panelNowTitle || 'NOW'); const titleLine = (nuAskUiStrings.enRouteReplaceOnlyTitle || 'On the way to {poi}. Replace-only for now.') .replace(/\{poi\}/g, poi); const body = nuAskUiStrings.enRouteReplaceOnlyBody || ''; const countdown = (nuAskUiStrings.enRouteCountdownTemplate || 'Time left before Add unlock: {time}').replace( /\{time\}/g, enRouteRemainingLabel ); return [titleLine, body, countdown].map((s) => String(s || '').trim()).filter(Boolean); } if (!hasLiveReco) { const line = nuAskUiStrings.patchDisabledNoReco || ''; return line.trim() ? [line] : null; } if (addPostStartWindowActive) { const line = nuAskUiStrings.addHerePostStartLockHint || 'During the first 30 minutes after your current activity starts, Add here stays off—use Replace next, or wait until the half-hour mark if time allows.'; return line.trim() ? [line] : null; } return null; }, [ addHereDisabled, nowRecoActionLoading, enRouteLockActive, hasLiveReco, addPostStartWindowActive, nuAskUiStrings, nowEnRouteLockPoiName, topReco?.poi?.name, nowNextCard?.title, enRouteRemainingLabel ]); const rankedTopReco = nowRecoOptions[0] || null; const rankedTopKey = rankedTopReco != null ? getRecoKey(rankedTopReco, 0) : null; const altRecos = nowRecoOptions .map((opt, fullIdx) => ({ opt, fullIdx })) .filter(({ fullIdx }) => (selectedRecoIdx >= 0 ? fullIdx !== selectedRecoIdx : fullIdx !== 0)) .slice(0, 2); const topRecoFirstPhoto = typeof topReco?.poi?.photos?.[0] === 'string' ? topReco?.poi?.photos?.[0] : (topReco?.poi?.photos?.[0]?.url || topReco?.poi?.photos?.[0]?.src || ''); const topRecoPhotoCandidates = useMemo(() => { const rows = [ resolveRecoMediaImageUrl(topReco?.poi), normalizeRecoImageUrl(topRecoFirstPhoto), normalizeRecoImageUrl(topReco?.poi?.photo_url), normalizeRecoImageUrl(topReco?.poi?.image_url), Number.isFinite(Number(topReco?.poi?.lat)) && Number.isFinite(Number(topReco?.poi?.lng)) ? `${SMART_BRAIN_MEDIA_BASE}/map-image?lat=${encodeURIComponent(String(topReco?.poi?.lat))}&lng=${encodeURIComponent(String(topReco?.poi?.lng))}&label=${encodeURIComponent((topReco?.poi?.name || 'P').slice(0, 1))}&zoom=15&size=1200x700` : '', normalizeRecoImageUrl(nowNextImageUrl), nowNextCoords && Number.isFinite(Number(nowNextCoords.lat)) && Number.isFinite(Number(nowNextCoords.lng)) ? `${SMART_BRAIN_MEDIA_BASE}/map-image?lat=${encodeURIComponent(String(nowNextCoords.lat))}&lng=${encodeURIComponent(String(nowNextCoords.lng))}&label=${encodeURIComponent((asText(nowNextCard?.title) || 'N').slice(0, 1))}&zoom=15&size=1200x700` : '' ]; const seen = new Set(); const out = []; for (const u of rows) { if (!u || typeof u !== 'string') continue; const t = u.trim(); if (!t || seen.has(t)) continue; seen.add(t); out.push(t); } return out; }, [topReco, topRecoFirstPhoto, nowNextImageUrl, nowNextCoords, nowNextCard?.title]); const topRecoPhotoUrl = topRecoPhotoCandidates[topRecoImageIdx] || ''; const topRecoName = topReco?.poi?.name || topReco?.summary || nuAskUiStrings.noLiveRecommendationYet || 'No live recommendation yet'; const topRecoDistance = formatDistanceLabel(topReco?.poi?.distance_km) || ''; const topRecoReviewCount = topReco?.poi?.review_count ?? topReco?.poi?.user_ratings_total ?? 0; const topRecoRating = Number.isFinite(Number(topReco?.poi?.rating)) ? `${Number(topReco?.poi?.rating).toFixed(1)} (${topRecoReviewCount} ${nuAskUiStrings.reviewsSuffix || 'reviews'})` : ''; const topRecoDesc = topReco?.poi?.rich_description || topReco?.poi?.description || nuAskUiStrings.recoRefreshHint; const topRecoCategory = topReco?.poi?.category || topReco?.microAction?.category || ''; const displayRecoIdxForTag = selectedRecoIdx >= 0 ? selectedRecoIdx : 0; const displayRecoKeyForTag = topReco ? getRecoKey(topReco, displayRecoIdxForTag) : null; const isTopRecoRankedFirst = hasLiveReco && rankedTopKey != null && displayRecoKeyForTag != null && displayRecoKeyForTag === rankedTopKey; /** Match `topRecoTag`: badge can show STRONG FIT from rank when `recommendation_tier` is absent. */ const topRecoHudCaption = useMemo(() => { const tier = topReco?.recommendation_tier || (topReco && isTopRecoRankedFirst ? 'strong_fit' : null); if (tier === 'strong_fit') { return ( nuAskUiStrings.recoTierCaptionStrongFit || 'Best overall catalog match for right now.' ); } if (tier === 'personalized') { return ( nuAskUiStrings.recoTierCaptionPersonalized || 'Boosted for your tags—not just nearby.' ); } if (tier === 'alternative') { return ( nuAskUiStrings.recoTierCaptionAlternative || 'Strong next choice—same vetting as the top two.' ); } return nuAskUiStrings.catalogRankedTimeFeasible || 'Catalog-ranked · Fits your window'; }, [ topReco?.recommendation_tier, topReco, isTopRecoRankedFirst, nuAskUiStrings.recoTierCaptionStrongFit, nuAskUiStrings.recoTierCaptionPersonalized, nuAskUiStrings.recoTierCaptionAlternative, nuAskUiStrings.catalogRankedTimeFeasible ]); const topRecoApiLabel = topReco?.label && String(topReco.label).trim(); const tierBadgeLabel = topReco ? resolveNuAskRecoTierBadge(topReco) : ''; const topRecoTag = topReco ? tierBadgeLabel || (isTopRecoRankedFirst ? topRecoApiLabel || nuAskUiStrings.strongFitDefault || DEMO.reco.tag : topRecoApiLabel || nuAskUiStrings.recoAlternativeBadge || 'Alternative') : ''; const nuAskExplainBangBtnClass = 'inline-flex h-[17px] min-w-[17px] shrink-0 items-center justify-center rounded-full border border-amber-400/55 bg-gradient-to-b from-amber-500/28 to-amber-950/45 px-[3px] text-[11px] font-black leading-none text-amber-50 shadow-[0_0_10px_rgba(251,191,36,0.28)] ring-1 ring-amber-300/20 active:scale-[0.94]'; const nuAskExplainBubbleBoxClass = 'w-[min(19.5rem,calc(100vw-2.25rem))] max-w-[calc(100%-0.5rem)] rounded-xl border border-cyan-400/45 bg-[rgba(5,14,16,0.97)] px-3 py-2.5 shadow-[0_16px_48px_rgba(0,0,0,0.65)] backdrop-blur-md'; const recoWhyLines = (() => { if (!hasLiveReco || !topReco) return []; const opt = topReco; const poi = opt.poi || {}; const lines = []; const fmt = (template, vars) => { let out = template; for (const [k, v] of Object.entries(vars || {})) { out = out.replace(new RegExp(`\{${k}\}`, 'g'), String(v)); } return out; }; if (nowRecoWeatherContext && typeof nowRecoWeatherContext === 'object') { const w = nowRecoWeatherContext; if (w.summary_line) { lines.push( fmt(nuAskUiStrings.whyWeatherSummaryTemplate || 'Weather: {summary}.', { summary: w.summary_line }) ); } else { const tempLabel = w.temp_c != null ? `${w.temp_c}°C` : '—'; const c = w.condition != null ? String(w.condition) : '—'; const p = w.pop != null ? `${w.pop}%` : '—'; lines.push( fmt( nuAskUiStrings.whyWeatherPopTemplate || 'Weather: {temp} · {condition} · {pop} {rain_word} (POP).', { temp: tempLabel, condition: c, pop: p, rain_word: nuAskUiStrings.weatherRainWord || 'rain' } ) ); } if (nowRecoWeatherContext.severe_outdoor_avoidance) { lines.push( nuAskUiStrings.whyHeavyRainDownrank || 'Heavy rain / high POP — open-air & landmark-outdoor picks are strongly down-ranked so they should not appear as #1 when sheltered alternatives exist.' ); } else if (w.favors_indoor) { lines.push( nuAskUiStrings.whyRainIndoorBoost || 'Rain or elevated POP — ranking boosts indoor/sheltered picks and penalizes open-air from name, category, and map types (same pipeline as Smart Brain scoring).' ); } else { lines.push( nuAskUiStrings.whyConditionsOutdoorOk || 'Conditions look OK for outdoor-style picks — no strong weather down-rank from POP/condition alone.' ); } } if (asText(opt.poi_exposure)) { lines.push( fmt( nuAskUiStrings.whyExposureGuessTemplate || 'Exposure guess for this POI: {exposure} (from catalog text & types).', { exposure: asText(opt.poi_exposure) } ) ); } if (opt.shelter_likely === true) { lines.push( nuAskUiStrings.whyShelterSignal || 'Shelter signal: name/category reads indoor-friendly (heuristic).' ); } else if (opt.shelter_likely === false && nowRecoWeatherContext?.favors_indoor) { lines.push( nuAskUiStrings.whyNotIndoorCaution || 'Does not read as clearly indoor — in wet weather double-check cover or visit length.' ); } const mr = asText(opt.match_reason); if (mr) lines.push( fmt(nuAskUiStrings.whyIntentFitTemplate || 'Intent fit: {reason}.', { reason: mr }) ); const tt = joinTagList(nowRecoTravelerTags, 10); if (tt) lines.push( fmt( nuAskUiStrings.whyTravelerTagsTemplate || 'Traveler / personality tags considered: {tags}.', { tags: tt } ) ); const ct = joinTagList(poi.category_tags, 6); const vt = joinTagList(poi.vibe_tags, 6); const st = joinTagList(poi.suitability_tags, 6); if (ct) lines.push( fmt(nuAskUiStrings.whyPoiCategoryTagsTemplate || 'POI category tags: {tags}.', { tags: ct }) ); if (vt) lines.push( fmt(nuAskUiStrings.whyVibeTagsTemplate || 'Behaviour / vibe tags: {tags}.', { tags: vt }) ); if (st) lines.push( fmt(nuAskUiStrings.whySuitabilityTagsTemplate || 'Suitability tags: {tags}.', { tags: st }) ); const lr = asText(opt.learning_reason); if (lr) { lines.push( fmt(nuAskUiStrings.whyLearningBoostTemplate || 'Learning boost: {reason}.', { reason: lr }) ); } else if (opt.score_breakdown && typeof opt.score_breakdown === 'object') { const b = opt.score_breakdown.base; const lb = opt.score_breakdown.learning_boost; const parts = []; if (b != null && Number.isFinite(Number(b))) parts.push(`base ${Number(b).toFixed(2)}`); if (lb != null && Number.isFinite(Number(lb))) parts.push(`learning +${(Number(lb) * 100).toFixed(0)}%`); if (parts.length) lines.push( fmt(nuAskUiStrings.whyRankingSignalTemplate || 'Ranking signal: {parts}.', { parts: parts.join(', ') }) ); } const dk = Number(poi.distance_km); if (Number.isFinite(dk)) { const drive = roughUrbanDriveMinutes(dk); lines.push( fmt( nuAskUiStrings.whyDistanceFromLocationTemplate || 'Straight-line distance from your location: {distance} (~{drive} min at urban pace, estimate).', { distance: formatDistanceLabel(dk), drive } ) ); } if (nowClock.mins > 0) { lines.push( fmt(nuAskUiStrings.whyFreeWindowTemplate || 'Free window before your next commitment: {window}.', { window: formatDurationMins(nowClock.mins) }) ); } const plat = Number(poi.lat); const plng = Number(poi.lng); if (nowNextCoords && Number.isFinite(plat) && Number.isFinite(plng)) { const legKm = haversineKm(plat, plng, nowNextCoords.lat, nowNextCoords.lng); if (legKm != null) { const dm = roughUrbanDriveMinutes(legKm); lines.push( fmt( nuAskUiStrings.whyPoiToNextTemplate || 'Rough straight-line from this POI to your next stop ({next_title}): {distance} (~{drive} min, estimate).', { next_title: asText(nowNextCard.title), distance: formatDistanceLabel(legKm), drive: dm } ) ); } } else if (asText(nowNextCard.title)) { lines.push( fmt( nuAskUiStrings.whyNextStopNoCoordsTemplate || 'Next itinerary stop: {next_title}{time_suffix}. Precise route time needs coordinates on that activity.', { next_title: asText(nowNextCard.title), time_suffix: nowNextCard.time ? ` (${nowNextCard.time})` : '' } ) ); } return lines; })(); useEffect(() => { setTopRecoExpanded(true); setExpandedAltRecoKey(null); setTopRecoImageIdx(0); setTopRecoImageExhausted(false); }, [nowRecoOptions]); useEffect(() => { // Reset image candidate pointer when selected recommendation changes. setTopRecoImageIdx(0); setTopRecoImageExhausted(false); }, [selectedRecoKey, topReco?.id, topReco?.poi?.name]); const submitRecoSelection = async (modeLabel) => { setNowRecoActionError(''); setNowRecoActionInfo(''); setNowRecoProposal(null); if (modeLabel === 'add') { const t = Date.now(); if ( hasActiveTripContext && nowCorridorPrevStartMs > 0 && t >= nowCorridorPrevStartMs && t < nowCorridorPrevStartMs + NUASK_ACTIVITY_POST_START_ADD_LOCK_MS ) { return; } } if (modeLabel === 'add' && nowEnRouteLockUntilMs > Date.now()) { setNowRecoActionInfo( (nuAskUiStrings.enRouteReplaceOnlyTitle || 'On the way to {poi}. Replace-only for now.') .replace(/\{poi\}/g, nowEnRouteLockPoiName || asText(nowNextCard?.title) || (nuAskUiStrings.panelNowTitle || 'NOW')) ); return; } if (modeLabel === 'replace' && nowNextPlaceholder) { setNowRecoActionError( nuAskUiStrings.replaceNextNoFutureActivity || 'No next activity to replace yet.' ); return; } if (!topReco?.id) { setNowRecoActionError(nuAskUiStrings.noLiveRecommendationYet || ''); return; } if (!nowRecoMicroActionId) { setNowRecoActionError(nuAskUiStrings.patchDisabledNoReco || ''); return; } if (!SF_API_BASE || !window.SylvanFlowAuth?.authenticatedFetch) { setNowRecoActionError(nuAskUiStrings.errApiUnavailable || ''); return; } setNowRecoActionLoading(modeLabel); try { const now = new Date(); const clientDayKey = formatClientDayKeyLocal(now); const clientLocalHHMM = formatClientLocalHHMM(now); // Propose-only flow for Add Here: compute a reasonable slot using x+y+z. // If no day itinerary exists yet (first add), server returns NOT_FOUND_STATE and we fall back to immediate patch. if (modeLabel === 'add' && liveUserCoords && topReco?.poi) { try { const proposeRes = await window.SylvanFlowAuth.authenticatedFetch(`${SF_API_BASE}/api/micro-action/propose-slot`, { method: 'POST', headers: { 'Content-Type': 'application/json' }, body: JSON.stringify({ coords: liveUserCoords, client_day_key: clientDayKey, client_local_hhmm: clientLocalHHMM, poi: topReco.poi }) }); window.SylvanFlowAuth.handleAuthResponse(proposeRes); const proposeData = await proposeRes.json().catch(() => null); if (proposeRes.ok && proposeData?.ok && proposeData?.proposal?.proposed_start_hhmm) { setNowRecoProposal(proposeData.proposal); setNowRecoActionInfo( `Suggested time: ${proposeData.proposal.proposed_start_hhmm}. Confirm to add.` ); return; } if (proposeRes.ok && proposeData?.state === 'NO_FEASIBLE_SLOT') { const slotAfterCommitment = proposeData?.reason_code === 'SLOT_AFTER_COMMITMENT' || (typeof proposeData?.reason === 'string' && proposeData.reason.toLowerCase().includes('commitment')); setNowRecoActionError( slotAfterCommitment ? (nuAskUiStrings.proposeSlotAfterCommitment || nuAskUiStrings.noFeasibleWindow) : proposeData?.reason || nuAskUiStrings.noFeasibleWindow ); return; } } catch {} } const body = { micro_action_id: nowRecoMicroActionId, option_id: topReco.id, client_day_key: clientDayKey, client_local_hhmm: clientLocalHHMM, patch_mode: modeLabel === 'replace' ? 'replace_next' : 'add', ...(corridorMutationTripKey ? { trip_key: corridorMutationTripKey } : {}) }; const res = await window.SylvanFlowAuth.authenticatedFetch(`${SF_API_BASE}/api/micro-action/select`, { method: 'POST', headers: { 'Content-Type': 'application/json' }, body: JSON.stringify(body) }); window.SylvanFlowAuth.handleAuthResponse(res); const data = await res.json(); if (!res.ok || !data?.ok) throw new Error(data?.error || 'Unable to apply recommendation'); if (modeLabel === 'add') { engageEnRouteLock( topReco?.poi?.name || topReco?.summary || '', topReco?.poi?.poi_id || topReco?.poi?.id || topReco?.poi?.catalog_poi_id || topReco?.poi?.place_id || topReco?.poi?.google_place_id || topReco?.id ); setNowRecoActionInfo( (nuAskUiStrings.enRouteReplaceOnlyTitle || 'On the way to {poi}. Replace-only for now.') .replace(/\{poi\}/g, asText(topReco?.poi?.name || topReco?.summary || nowEnRouteLockPoiName || '')) ); } else { setNowRecoActionInfo(nuAskUiStrings.recommendationAppliedReplaceNext || 'Recommendation applied (replace-next request sent).'); } } catch (e) { setNowRecoActionError(e?.message || 'Unable to apply recommendation'); } finally { setNowRecoActionLoading(''); } }; const confirmRecoProposal = async (action) => { if (!nowRecoProposal?.proposed_start_hhmm) return; setNowRecoActionError(''); setNowRecoActionInfo(''); const hhmm = action === 'edit' ? (window.prompt('Pick a time (HH:MM, 24-hour).', nowRecoProposal.proposed_start_hhmm) || '').trim() : nowRecoProposal.proposed_start_hhmm; if (!/^\d{2}:\d{2}$/.test(hhmm)) { setNowRecoActionError('Invalid time. Please use HH:MM (24-hour).'); return; } setNowRecoActionLoading('add'); try { const now = new Date(); const body = { micro_action_id: nowRecoMicroActionId, option_id: topReco?.id, client_day_key: formatClientDayKeyLocal(now), client_local_hhmm: hhmm, patch_mode: 'add', ...(corridorMutationTripKey ? { trip_key: corridorMutationTripKey } : {}) }; const res = await window.SylvanFlowAuth.authenticatedFetch(`${SF_API_BASE}/api/micro-action/select`, { method: 'POST', headers: { 'Content-Type': 'application/json' }, body: JSON.stringify(body) }); window.SylvanFlowAuth.handleAuthResponse(res); const data = await res.json(); if (!res.ok || !data?.ok) throw new Error(data?.error || 'Unable to apply recommendation'); setNowRecoProposal(null); engageEnRouteLock( topReco?.poi?.name || topReco?.summary || '', topReco?.poi?.poi_id || topReco?.poi?.id || topReco?.poi?.catalog_poi_id || topReco?.poi?.place_id || topReco?.poi?.google_place_id || topReco?.id ); setNowRecoActionInfo( (nuAskUiStrings.addedToItineraryAtTemplate || 'Added to your itinerary at {time}.').replace(/\{time\}/g, hhmm) ); } catch (e) { setNowRecoActionError(e?.message || 'Unable to apply recommendation'); } finally { setNowRecoActionLoading(''); } }; const skipSelectedRecommendation = () => { setNowRecoActionError(''); setNowRecoActionInfo('Skipped this recommendation for now.'); if (!hasLiveReco) return; const currentKey = topReco ? getRecoKey(topReco, selectedRecoIdx >= 0 ? selectedRecoIdx : 0) : null; const remaining = nowRecoOptions.filter((opt, idx) => getRecoKey(opt, idx) !== currentKey); setNowRecoOptions(remaining); setSelectedRecoKey(remaining.length > 0 ? getRecoKey(remaining[0], 0) : null); }; return (
{/* Header — reference: menu · large caps title · SF */}

{header.title}

{panelSubtitle}

{/* —— PAST —— (ref: cards + gutters only; dashed joins card edge → card edge; trail cap → NOW) */}
{pastStopsRow.map((s, i) => (

{s.time}

))}
{pastStopsRow.map((s, idx) => ( {idx < pastStopsRow.length - 1 ? (
) : ( )} ))}
{showPastDetailBlocks ? ( <>

{pastHeroTitle}

{pastHeroBody}

{placesActivityCount} {nuAskUiStrings.placesLabel}

{nuAskUiStrings.daySummary}

{[ ['👣', nuAskUiStrings.statStepsLabel || 'Steps', DEMO.stats.steps], ['📏', nuAskUiStrings.statDistLabel || 'Dist', DEMO.stats.distance], ['⏱', nuAskUiStrings.statTimeLabel || 'Time', DEMO.stats.duration], ['⚡', nuAskUiStrings.statEnergyLabel || 'Energy', DEMO.stats.energy] ].map(([ic, lab, val]) => (
{ic}

{val}

{lab}

))}

{nuAskUiStrings.journeyMoments}

{pastJourneyItems.map((item, idx) => ( ))}
) : (

{nuAskUiStrings.panelPastTitle || 'PAST'} · STANDBY

{nuAskUiStrings.errNoTrip || 'No active trip linked'}

)} { if (!pastMiniMapLinkUrl) e.preventDefault(); }} className={`group relative block overflow-hidden rounded-2xl border bg-[#030303] ${ pastMiniMapMode === 'standby_random' ? 'opacity-60' : 'opacity-100' }`} style={{ borderColor: pastMiniMapMode === 'standby_random' ? 'rgba(255,255,255,0.10)' : 'rgba(45,226,197,0.22)', boxShadow: pastMiniMapMode === 'standby_random' ? '0 0 0 1px rgba(255,255,255,0.05), inset 0 0 22px rgba(255,255,255,0.03)' : '0 0 34px -18px rgba(45,226,197,0.36), 0 14px 34px -22px rgba(0,0,0,0.85)' }} aria-label={nuAskUiStrings.nextViewOnMap || 'Open map'} >
{/* —— NOW —— (ref: dashed only prev → ○ and ○ → next; no full-bleed line through the circle) */}

{nowPrevCard.time}

{nuAskUiStrings.nowWord || 'NOW'} · {nowClock.nowLabel}

{nowNextCard.time}

{renderCorridorIcon(nowPrevCard.icon, nowPrevPlaceholder)}

{nowPrevCard.title}

{nowPrevCard.sub}

{(nowRecoLoading ? [0, 1, 2] : [0, 1]).map((i) => (
))}
{renderCorridorIcon(nowNextCard.icon, nowNextPlaceholder)}

{nowNextCard.title}

{nowNextCard.sub}

{nuAskUiStrings.availableWindow || 'Available Window'}{' '} {formatDurationMins(nowClock.mins)}

{nowClock.nowLabel} - {nowClock.endLabel}

{availableWindowBridgeText ? (

{availableWindowBridgeText}

) : null}
{showLocationPrompt ? (

{nuAskUiStrings.locationOffHint}

) : null}
{panel === 1 && nowTvAskOpen && typeof window !== 'undefined' && window.AskSylvanPage ? (
{nuAskUiStrings.ariaAskSylvan || 'Ask Sylvan'}
{React.createElement(window.AskSylvanPage, { embeddedExploreTv: true })}
) : null}
{nowHotbarDetail?.kind === 'emergency' ? ( void startEmergencyFromNowHotbar()} /> ) : nowUseMyTimeOpen ? ( ) : nowWeatherPlanOpen ? ( ) : nowNearbyOpen ? ( ) : !showNowRecoTopStack ? (

{nuAskUiStrings.corridorLink || 'Corridor link'}

{(nuAskUiStrings.enterTheFray || 'ENTER THE FRAY').split('').map((ch, i) => ( {ch === ' ' ? '\u00a0' : ch} ))}

{nowRecoLoading ? nuAskUiStrings.syncDetailLive || 'Syncing live POIs · catalog rank · your window' : nuAskUiStrings.preparingHandshake || 'Preparing corridor handshake'}

{[0, 1, 2, 3, 4].map((i) => ( ))}
) : (
{/* Static rim + subtle moving perimeter sweep for "live" feel. */}
{travelOnlyMode && travelLeaveAlert ? ( <>

● {nuAskUiStrings.yourNextStop || 'Your next stop'}

{nuAskUiStrings.goNow || 'Go now'}
{nowNextCoords ? ( ) : null}

{asText(nowNextCard.title)}

{nowNextCard.time} · {nuAskUiStrings.untilWord || 'until'} {nowClock.endLabel}

{travelLeaveAlert.title}

{travelLeaveAlert.body}

{nuAskUiStrings.fromLocationToNext || 'From your location → next stop'}

~{travelFromHereToNextMins != null ? travelFromHereToNextMins : '—'}{' '} {nuAskUiStrings.minSuffix || 'min'}

{travelKmStraightToNext != null ? formatDistanceLabel(travelKmStraightToNext) : '—'}{' '} {nuAskUiStrings.straightLineUrbanNote || 'straight-line · urban-pace estimate (not live traffic)'}

{nuAskUiStrings.sidetripOffNote}

{nextStopDirectionsUrl ? ( {nuAskUiStrings.openDirections || 'Open directions'} ) : null}
) : ( <>
' )}")`, backgroundSize: '128px 128px' }} aria-hidden />

{nuAskUiStrings.topRecommendation || 'Top recommendation'}

{nuAskExplainKey === 'reco_top' ? (

{topRecoHudCaption}

) : null}
{topRecoPhotoUrl && !topRecoImageExhausted ? ( {topRecoName} { setTopRecoImageIdx((idx) => { const next = idx + 1; if (next < topRecoPhotoCandidates.length) return next; setTopRecoImageExhausted(true); return idx; }); }} /> ) : null}

{topRecoName}

{topRecoExpanded ? ( <>

{topRecoDesc}

{topRecoDistance ?

{topRecoDistance}

: null} {hasLiveReco && topReco?.suggested_start_hhmm ? (

{nuAskUiStrings.bestSlotLabel || 'Best slot'}: {topReco.suggested_start_hhmm}

) : null} {hasLiveReco && topReco?.action_hint ? (

{topReco.action_hint === 'replace_next' ? (nuAskUiStrings.actionHintReplaceNext || 'Action: replace next slot') : (nuAskUiStrings.actionHintAddNow || 'Action: add in this gap')}

) : null} {hasLiveReco && Number.isFinite(Number(topReco?.poi?.distance_km)) ? (

~{roughUrbanDriveMinutes(Number(topReco.poi.distance_km))}{' '} {nuAskUiStrings.urbanPaceFromDistance || 'min urban pace (from straight-line distance estimate, not live traffic)'}

) : (

{DEMO.reco.lineDwell}

)} {topRecoRating ?

{topRecoRating}

: null} {topRecoCategory ?

{topRecoCategory}

: null}
) : null} {nowRecoLoading ? (

{nuAskUiStrings.loadingAlternatives || 'Loading alternatives…'}

) : null} {!nowRecoLoading && nowRecoError ? (

{nowRecoError}

) : null} {!nowRecoLoading ? (
{nuAskExplainKey === 'alternatives_slot_time' ? (

{nuAskUiStrings.alternativesSlotExplain || 'Suggested start times come from gap-fit in your itinerary window. Kilometers are straight-line from you to the venue; urban minutes are a rough pace estimate, not live traffic.'}

) : null}
{altRecos.map(({ opt, fullIdx }, altRowIndex) => { const rowKey = getRecoKey(opt, fullIdx); const isRankedTopPick = hasLiveReco && rankedTopKey != null && rowKey === rankedTopKey; const tierRowLabel = resolveNuAskRecoTierBadge(opt); const strongFitRowLabel = isRankedTopPick ? (rankedTopReco?.label && String(rankedTopReco.label).trim()) || nuAskUiStrings.strongFitDefault || 'Strong fit' : ''; const rowBadgeText = tierRowLabel || strongFitRowLabel; return (
{expandedAltRecoKey === rowKey ? (

{opt?.poi?.rich_description || opt?.poi?.description || opt?.summary || nuAskUiStrings.noExtraDetails || 'No additional details yet.'}

{formatDistanceLabel(opt?.poi?.distance_km) || nuAskUiStrings.nearbyLabel || 'Nearby'} {Number.isFinite(Number(opt?.poi?.rating)) ? `${Number(opt.poi.rating).toFixed(1)} ${nuAskUiStrings.ratingWord || 'rating'}` : nuAskUiStrings.ratingNa || 'Rating n/a'} {opt?.poi?.category ? ( {opt.poi.category} ) : null}
) : null}
); })} {altRecos.length === 0 ? (

{nuAskUiStrings.noAlternativesYet || 'No live alternatives available yet.'}

) : null}
{hasLiveReco && poiHoursVerifyDisclaimerResolved ? (
{nuAskExplainKey === 'poi_hours' ? (

{poiHoursVerifyDisclaimerResolved}

) : null}
) : null}
) : null}
{addHereDisabled && addHereDisabledBannerLines && addHereDisabledBannerLines.length > 0 ? (
{addHereDisabledBannerLines.map((line, i) => (

0 ? 'mt-1' : ''}`} > {line}

))}
) : null} {nowRecoProposal ? (

{(nuAskUiStrings.confirmAddTime || 'Confirm add at {time}?').replace( '{time}', nowRecoProposal.proposed_start_hhmm )}

) : null} {nowRecoActionInfo && !enRouteLockActive ?

{nowRecoActionInfo}

: null} {nowRecoActionError ?

{nowRecoActionError}

: null}

{nuAskUiStrings.whyHeading || 'Why this recommendation?'}

{hasLiveReco && recoWhyLines.length > 0 ? (
    {recoWhyLines.map((line, i) => (
  • {line}
    • ))}
) : (

{hasLiveReco ? nuAskUiStrings.whyFallbackPull || 'Pull to refresh once more if decision details did not load.' : nuAskUiStrings.whyFallbackWait || 'Waiting for a live catalog-ranked option. Tap refresh after location is available.'}

)}
)}
)}
{/* —— NEXT —— (time corridor: times row — then TIME_CORRIDOR_GRID cards) */}

{nowClock.endLabel}

{nowNextCard.time}

{nextAfterCard.time}

{renderCorridorIcon('⏱️', nextStandbyMode)}

{nuAskUiStrings.availableWindow || 'Available window'}

{(nuAskUiStrings.nextCardWindowSubTemplate || '{mins} min left · ends {end}') .replace(/\{mins\}/g, String(nowClock.mins)) .replace(/\{end\}/g, nowClock.endLabel)}

{renderCorridorIcon(nowNextCard.icon, nextStandbyMode)}

{nowNextCard.title}

{nowNextCard.sub}

{renderCorridorIcon(nextAfterCard.icon, nextStandbyMode)}

{nextAfterCard.title}

{nextAfterCard.sub}

{/* Upcoming highlight — outer shell matches PAST “Journey moments” */}

{nuAskUiStrings.nextHighlightHeading || 'Upcoming highlight'}

{hasActiveTripContext && hasUpcomingActivity ? (
{nowNextImageUrl ? ( {asText(nowNextCard.title) ) : nextPanelMapImageUrl ? ( ) : (
{renderCorridorIcon(nowNextCard.icon, nextStandbyMode)}
)}

{nowNextCard.title}

{nowNextCard.time} {nowNextCard.sub ? ` · ${nowNextCard.sub}` : ''} {nextHighlightDistanceLine ? ` · ${nextHighlightDistanceLine}` : ''}

{String(nextHighlightBody || '').trim() ? nextHighlightBody : (hasActiveTripContext ? (nuAskUiStrings.noLiveRecommendationYet || 'No upcoming activity yet') : (nuAskUiStrings.errNoTrip || 'No active trip linked'))}

{nextStopDirectionsUrl ? ( {nuAskUiStrings.nextViewOnMap || 'View on Map'} ) : ( )} {nextStopDirectionsUrl ? ( {nowNextCoords && nextHighlightThumbMapUrl ? ( { e.target.style.display = 'none'; const fb = e.target.nextElementSibling; if (fb) fb.style.display = 'flex'; }} /> ) : null}
) : (
)}
) : (
◌

{nuAskUiStrings.panelNextTitle || 'NEXT'}

—

{hasActiveTripContext ? (nuAskUiStrings.noLiveRecommendationYet || 'No upcoming activity yet') : (nuAskUiStrings.errNoTrip || 'No active trip linked')}

)}
{/* After that — same outer shell; inner card matches PAST journey tile (image band + text) */}

{nuAskUiStrings.nextAfterThatHeading || 'After that'}

{!hasActiveTripContext || !hasUpcomingActivity ? (
◌

—

{nuAskUiStrings.panelNextTitle || 'NEXT'}

{hasActiveTripContext ? (nuAskUiStrings.noLiveRecommendationYet || 'No upcoming activity yet') : (nuAskUiStrings.errNoTrip || 'No active trip linked')}

) : null} {hasActiveTripContext && hasUpcomingActivity ? ( ) : null}
{/* NOW hotbar (panel 1) + inline Ask — one full-width shell, gap-0: hotkeys flush above chat, chat flush above InternalShellTwinNav */}
{panel === 0 || panel === 1 || panel === 2 ? (
{panel === 1 ? (
{nowHotbarItems.map((h, hubIdx) => { const glow = h.glow; const ring = h.ring; return ( ); })}
) : null}
{!(panel === 1 && nowTvAskOpen) ? ( <> {nuAskLastAssistantText && nuAskLatestMounted ? (
{nuAskLatestHolo ? (

{nuAskUiStrings.latest || 'Latest'}

{nuAskUiStrings.replyHoloHint || 'Holo'}

{nuAskLastAssistantText}

) : (

{nuAskUiStrings.latest || 'Latest'}

{nuAskLastAssistantText}

)}
) : null} {nuAskInlineError ? (

{nuAskInlineError}

) : null}
{nuAskInlineTyping ? ( {nuAskUiStrings.typing || 'Sylvan is typing…'} ) : nuAskInlineSending ? ( Sending… ) : nuAskInlineInput ? ( plainTextFromChatMarkdown(nuAskInlineInput) ) : nuAskSttPhase === 'recording' ? ( nuAskUiStrings.voiceTapStop || 'Recording…' ) : nuAskSttPhase === 'transcribing' ? ( nuAskUiStrings.voiceTranscribing || 'Transcribing…' ) : ( nuAskUiStrings.voiceTapToTalk || 'Hold to talk' )} {panel === 1 ? ( ) : null}
) : null}
) : null} {SpotlightTourCmp ? ( ) : null} {!embeddedAppShell && window.InternalShellTwinNav ? React.createElement(window.InternalShellTwinNav, { variant: 'nuask', leftLabel: nuAskUiStrings.navPowerUp || 'Profile', rightLabel: nuAskUiStrings.navExplore || 'Explore', ariaLabel: nuAskUiStrings.corridorBottomNavAria || 'Power Up and Explore', staticTwinEdge: true }) : null}
); } if (typeof window !== 'undefined') { window.NuAskSylvanPage = NuAskSylvanPage; } })();