{intentLabelText && (
)}
{/* ✅ REMOVED: situation_summary display (ugly debug info - User: Weather: Mood:) */}
{/* ✅ FIX 2: Show explicit acknowledgement when selected=true */}
{selectedOption && uiState === 'success' && (
)}
{selectedOption.poi?.photos && selectedOption.poi.photos.length > 0 && (
)
{
// 🔍 UI-BUG-01 INVESTIGATION: Log selected option photo structure
const photoValue = selectedOption.poi.photos[0];
const photoType = typeof photoValue;
const isString = photoType === 'string';
const isObject = photoType === 'object' && photoValue !== null;
const photoUrl = isString ? photoValue : (isObject ? photoValue?.url || photoValue?.src : null);
if (window.uiLogger) {
window.uiLogger.uiLog(`[UI-BUG-01] Selected option photo render`, {
hasOptionId: !!selectedOption.id,
hasPoiName: !!selectedOption.poi.name,
poiNameLength: selectedOption.poi.name?.length || 0,
photosArrayLength: selectedOption.poi.photos?.length,
photos0Type: photoType,
photos0ValueLength: isString ? photoValue?.length || 0 : (isObject ? JSON.stringify(photoValue)?.length || 0 : 0),
hasResolvedUrl: !!photoUrl,
resolvedUrlLength: photoUrl?.length || 0
});
}
return photoUrl || photoValue;
})()}
alt={selectedOption.poi.name || 'POI'}
className="w-full h-72 object-cover"
onError={(e) => {
// 🔍 UI-BUG-01 INVESTIGATION: Log image load error (admin-only, sanitized)
if (window.uiLogger) {
window.uiLogger.uiError(`[UI-BUG-01] Selected option image load error`, {
hasOptionId: !!selectedOption.id,
hasPoiName: !!selectedOption.poi.name,
srcLength: e.target.src?.length || 0,
error: e.type,
timestamp: Date.now()
});
}
e.target.style.display = 'none';
}}
onLoad={(e) => {
// 🔍 UI-BUG-01 INVESTIGATION: Log successful image load (admin-only, sanitized)
if (window.uiLogger) {
window.uiLogger.uiLog(`[UI-BUG-01] Selected option image load success`, {
hasOptionId: !!selectedOption.id,
hasPoiName: !!selectedOption.poi.name,
srcLength: e.target.src?.length || 0,
timestamp: Date.now()
});
}
}}
/>
)}
) : (
{intentLabelText}
✅
{(selectionSource === 'selected_new' && patchStatus === 'success') ? uiText.patchSuccessAck : uiText.selectedOnlyAck}
{headerSubtitle}
{selectedOption ? (
✅
{uiText.selectedHeader}
{selectedOption.poi?.name || selectedOption.summary}
{selectedOption.summary &&{selectedOption.summary}
} {selectedOption.expires_at && (() => { const expiresAt = new Date(selectedOption.expires_at); const minutesRemaining = Math.ceil((expiresAt - new Date()) / 60000); const expiresText = minutesRemaining < 0 ? `Expired (${Math.abs(minutesRemaining)} minutes ago)` : `Active until ${expiresAt.toLocaleTimeString()} (${minutesRemaining} min remaining)`; return (
{expiresText}
);
})()}
{!selectedOption.expires_at && (
{uiText.activeForTwoHours}
)}
{selectedOption.poi?.distance_km && (
{selectedOption.poi?.rich_description && (
📍
{formatDistance(selectedOption.poi.distance_km)} away
)}
{selectedOption.poi?.rating && (
⭐
{formatRating(selectedOption.poi.rating, selectedOption.poi.review_count)}
)}
{selectedOption.poi?.category && (
🏷️
{selectedOption.poi.category}
)}
{selectedOption.poi.rich_description}
)}
{selectedOption.poi?.address && (
📍 {selectedOption.poi.address}
)}
{buildMapUrl(selectedOption.poi || {}, region) && (
)}
💬 {uiText.menuFeedbackHint}
{options.map((option, idx) => {
const poi = option.poi || {};
const mapsUrl = buildMapUrl(poi, region);
// Format price level if available
const formatPrice = (priceLevel) => {
if (!priceLevel) return '';
const levels = { 1: '$', 2: '$$', 3: '$$$', 4: '$$$$' };
return levels[priceLevel] || '';
};
// Build compact meta line: "distance • category • price"
const metaParts = [];
if (poi.distance_km) {
metaParts.push(formatDistance(poi.distance_km));
}
if (poi.category) {
metaParts.push(poi.category);
}
if (poi.price_level) {
const price = formatPrice(poi.price_level);
if (price) metaParts.push(price);
}
const metaLine = metaParts.join(' • ');
return (
{option.summary && (
{/* ✅ FIX: Compact meta line - distance • category • price */}
{metaLine && (
{
// 🔍 UI-BUG-01 INVESTIGATION: Log photo structure
const photoValue = poi.photos[0];
const photoType = typeof photoValue;
const isString = photoType === 'string';
const isObject = photoType === 'object' && photoValue !== null;
const photoUrl = isString ? photoValue : (isObject ? photoValue?.url || photoValue?.src : null);
if (window.uiLogger) {
window.uiLogger.uiLog(`[UI-BUG-01] Option card photo render`, {
hasOptionId: !!option.id,
hasPoiName: !!poi.name,
poiNameLength: poi.name?.length || 0,
photosArrayLength: poi.photos?.length,
photos0Type: photoType,
photos0ValueLength: isString ? photoValue?.length || 0 : (isObject ? JSON.stringify(photoValue)?.length || 0 : 0),
hasResolvedUrl: !!photoUrl,
resolvedUrlLength: photoUrl?.length || 0
});
}
return photoUrl || photoValue;
})()}
alt={poi.name || 'POI'}
className="w-full h-56 object-cover"
loading="lazy"
crossOrigin="anonymous"
onError={(e) => {
// 🔍 UI-BUG-01 INVESTIGATION: Log image load error (admin-only, sanitized)
if (window.uiLogger) {
window.uiLogger.uiError(`[UI-BUG-01] Image load error`, {
hasOptionId: !!option.id,
hasPoiName: !!poi.name,
srcLength: e.target.src?.length || 0,
error: e.type,
timestamp: Date.now()
});
}
e.target.style.display = 'none';
}}
onLoad={(e) => {
// 🔍 UI-BUG-01 INVESTIGATION: Log successful image load (admin-only, sanitized)
if (window.uiLogger) {
window.uiLogger.uiLog(`[UI-BUG-01] Image load success`, {
hasOptionId: !!option.id,
hasPoiName: !!poi.name,
srcLength: e.target.src?.length || 0,
timestamp: Date.now()
});
}
}}
/>
)}
{poi.rich_description && (
)}
{/* ✅ FIX: Button row - equal height, mobile-friendly */}
);
})}
)}
{option.label || (idx === 0 ? 'STRONG FIT' : 'Alternative')}
{poi.name || option.summary || 'Option'}
{option.summary}
)}
{metaLine}
)}
{poi.photos && poi.photos.length > 0 && (
{poi.rich_description}
{poi.address && (
📍 {poi.address}
)}
{mapsUrl && (
🗺️
{viewOnMapText}
)}