[truncated — 8099 more characters]
```
### src/index.js
```javascript
import React from 'react';
import ReactDOM from 'react-dom/client';
import * as Sentry from '@sentry/react';
import './index.css';
import App from './App';
import 'leaflet/dist/leaflet.css';
Sentry.init({
dsn: 'https://88a79ec1bcc225ef2e5aebdc5f92cd14@o4511601777836032.ingest.us.sentry.io/4511601791729664',
dataCollection: {
// To disable sending user data and HTTP bodies, uncomment the lines below. For more info visit:
// https://docs.sentry.io/platforms/javascript/guides/react/configuration/options/#dataCollection
// userInfo: false,
// httpBodies: []
},
integrations: [
Sentry.browserTracingIntegration(),
Sentry.replayIntegration(),
],
// Tracing
tracesSampleRate: 1.0, // Capture 100% of the transactions
// Set 'tracePropagationTargets' to control for which URLs distributed tracing should be enabled
tracePropagationTargets: ['localhost', /^\/api\//],
// Session Replay
replaysSessionSampleRate: 0.1, // This sets the sample rate at 10%. You may want to change it to 100% while in development and then sample at a lower rate in production.
replaysOnErrorSampleRate: 1.0, // If you're not already sampling the entire session, change the sample rate to 100% when sampling sessions where errors occur.
// Enable logs to be sent to Sentry
enableLogs: true,
});
const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(
);
```
### server/index.js
```javascript
require('dotenv').config();
const express = require('express');
const cors = require('cors');
const healthRouter = require('./routes/health');
const analysisRouter = require('./routes/analysis');
const visualizeRouter = require('./routes/visualize');
const conditionsRouter = require('./routes/conditions');
const askRouter = require('./routes/ask');
const locationRouter = require('./routes/location');
const uploadRouter = require('./routes/upload');
const app = express();
const PORT = process.env.PORT || 3001;
const allowedOrigins = ['http://localhost:3000', ...(process.env.ALLOWED_ORIGINS?.split(',') || [])];
app.use(cors({ origin: allowedOrigins }));
app.use(express.json());
app.use('/uploads', express.static(require('path').join(__dirname, 'uploads')));
app.use('/api', healthRouter);
app.use('/api', analysisRouter);
app.use('/api', visualizeRouter);
app.use('/api', conditionsRouter);
app.use('/api', askRouter);
app.use('/api', locationRouter);
app.use('/api', uploadRouter);
app.listen(PORT, () => {
console.log(`UrbanPilot server running on http://localhost:${PORT}`);
if (!process.env.ANTHROPIC_API_KEY) {
console.warn('Warning: ANTHROPIC_API_KEY not set — agents will fall back to mock data');
}
if (!process.env.GOOGLE_MAPS_SERVER_API_KEY) {
console.warn('Warning: GOOGLE_MAPS_SERVER_API_KEY not set — location search and present-day view will be unavailable');
}
if (!process.env.CENSUS_API_KEY) {
console.warn('Warning: CENSUS_API_KEY not set — Housing Agent will run without verified ACS data');
}
});
```
### src/App.js
```javascript
import React, { useState, useEffect } from 'react';
import {
Sun, Cloud, CloudRain, CloudSnow, CloudLightning, CloudFog,
} from 'lucide-react';
import {
analyzeNeighborhood, generateVisualization, getConditions, askQuestion,
getStreetViewStatus, streetViewImageUrl, satelliteImageUrl,
} from './services/analysisApi';
import StreetViewPanel from './components/StreetViewPanel';
import TopHeader from './components/TopHeader';
import ControlStrip from './components/ControlStrip';
import DataMethodologySection from './components/DataMethodologySection';
import AnalysisStatusBar from './components/AnalysisStatusBar';
import ScoreBreakdownPanel from './components/ScoreBreakdownPanel';
import CurrentConditionsPanel from './components/CurrentConditionsPanel';
import PlanningFindings from './components/PlanningFindings';
import MainMapPanel from './components/MainMapPanel';
import AIAssistantPanel from './components/AIAssistantPanel';
import ReadyToAnalyzeCard from './components/ReadyToAnalyzeCard';
import ProjectedScenarioChanges from './components/ProjectedScenarioChanges';
import VisualizeStreetscapeAction from './components/VisualizeStreetscapeAction';
// Placeholder shown before the user searches for a location. Never re-substituted after a
// real place is selected — see selectedLocation state in App().
const DEFAULT_LOCATION = {
placeId: null,
displayName: 'Downtown Berkeley, CA',
formattedAddress: 'Downtown Berkeley, CA',
latitude: 37.8703,
longitude: -122.2677,
};
const AGENTS = [
{ id: 'coordinator', label: 'Coordinator' },
{ id: 'climate', label: 'Climate Agent' },
{ id: 'accessibility', label: 'Accessibility Agent' },
{ id: 'housing', label: 'Housing Agent' },
{ id: 'urban_design', label: 'Urban Design Agent' },
];
const GOAL_CHIPS = [
'Add housing near transit',
'Reduce urban heat island effect',
'Improve bike & pedestrian safety',
'Increase tree canopy coverage',
'Add affordable housing',
'Improve flood resilience',
];
// WMO weather codes -> icon, per https://open-meteo.com/en/docs
function weatherIcon(code) {
if (code === 0) return Sun;
if ([1, 2, 3].includes(code)) return Cloud;
if ([45, 48].includes(code)) return CloudFog;
if (code >= 51 && code <= 67) return CloudRain;
if (code >= 71 && code <= 77) return CloudSnow;
if (code >= 80 && code <= 99) return CloudLightning;
return Cloud;
}
function aqiCategory(aqi) {
if (aqi == null) return null;
if (aqi <= 50) return { label: 'Good', color: 'text-emerald-400' };
if (aqi <= 100) return { label: 'Moderate', color: 'text-amber-400' };
if (aqi <= 150) return { label: 'Unhealthy (SG)', color: 'text-orange-400' };
if (aqi <= 200) return { label: 'Unhealthy', color: 'text-rose-400' };
return { label: 'Very Unhealthy', color: 'text-purple-400' };
}
// FEMA NFHL-derived, not AI — femaFloodRisk is a deterministic lookup over the verified
// flood zone/SFHA fields (server/services/femaNfhlService.js: floodRiskFromZone()). No
// verified heat-risk dataset exists anywhere in this codebase (heat island is Claude
// narrative only), so there's no equivalent getHeatRisk — the header no longer shows one
// rather than label an AI guess as a risk badge.
function getFloodRisk(climate) {
const fema = climate?.climateData;
if (!climate?.climateAvailable || fema?.femaFloodRisk == null) return null;
return { label: fema.femaFloodRisk };
}
export default function App() {
const [goal, setGoal] = useState('');
const [analysisState, setAnalysisState] = useState('idle');
const [agentStatuses, setAgentStatuses] = useState({});
const [results, setResults] = useState(null);
const [copied, setCopied] = useState(false);
const [visualizingYear, setVisualizingYear] = useState(null);
const [visualizedImages, setVisualizedImages] = useState({});
const [visualizeError, setVisualizeError] = useState(null);
const [conditions, setConditions] = useState(null);
const [selectedScenario, setSelectedScenario] = useState('2040');
const [chatMessages, setChatMessages] = useState([]);
const [chatInput, setChatInput] = useState('');
const [chatLoading, setChatLoading] = useState(false);
const [selectedLocation, setSelectedLocation] = useState(DEFAULT_LOCATION);
const [analysisError, setAnalysisError] = useState(null);
const [userVisionText, setUserVisionText] = useState('');
const [referenceImage, setReferenceImage] = useState(null);
const [presentPhotoUrl, setPresentPhotoUrl] = useState(null);
const [presentPhotoSource, setPresentPhotoSource] = useState(null);
useEffect(() => {
let cancelled = false;
getConditions(selectedLocation.latitude, selectedLocation.longitude)
.then(c => { if (!cancelled) setConditions(c); })
.catch(() => { if (!cancelled) setConditions(null); });
return () => { cancelled = true; };
}, [selectedLocation]);
// The real "now" photo for the site — Street View if covered, satellite otherwise. Used to
// display the 2026 scenario, and (per explicit product decision, accepting the associated
// Google Maps Platform ToS risk) as the default Midjourney reference image for 2040/2075
// when the user hasn't uploaded their own photo.
useEffect(() => {
let cancelled = false;
const { latitude, longitude } = selectedLocation;
getStreetViewStatus(latitude, longitude)
.then(({ available }) => {
if (cancelled) return;
setPresentPhotoUrl(available ? streetViewImageUrl(latitude, longitude) : satelliteImageUrl(latitude, longitude));
setPresentPhotoSource(available ? 'google-street-view' : 'google-satellite');
})
.catch(() => {
if (cancelled) return;
setPresentPhotoUrl(satelliteImageUrl(latitude, longitude));
setPresentPhotoSource('google-satellite');
});
return () => { cancelled = true; };
}, [selectedLocation]);
function handleLocationSelected(location) {
setSelectedLocation(location);
// A new location invalidates any analy
[truncated — 13294 more characters]
```
### postcss.config.js
```javascript
module.exports = {
plugins: {
tailwindcss: {},
autoprefixer: {},
},
}
```
### index.css
```css
@tailwind base;
@tailwind components;
@tailwind utilities;
/* Import Leaflet CSS */
@import 'leaflet/dist/leaflet.css';
body {
margin: 0;
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen',
'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue',
sans-serif;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
/* Ensure map container has proper height */
.leaflet-container {
height: 100%;
width: 100%;
}
```
[94 more indexed source files omitted to keep this export small. The full file list is in the Codebase structure section above.]