/* intel.jsx — RaDa Intelligence. * Institutional intelligence showcase (Overview / Science / Insights Lab / * Operations / Manage). External institutions + GSG staff log in here. * * Faithful port of Claude Design's RaDa Intelligence showcase design. * - Overview + Operations: LIVE from get_portfolio_intelligence (real M0-M5, * counties, per-farm inventory). Falls back to the design's numbers only * while the live fetch is in flight. * - Science + Insights Lab: the design's interactive cockpit. The data shown is * an illustrative sample field (flagged) - the live per-farm cockpit is the * Panel Workbench. P001: nothing synthetic is presented as a real reading. * - Auth: Firebase (same project as the county portal). Access = GSG staff * Workspace domain OR a provisioned `intel_viewer` claim; the data API gates * server-side on the same token. Aggregate, no PII. * Stack: in-browser React (UMD) + Babel, chemeli design tokens — same as the * county portal. Implements design handoff 2026-06-26. — Claudia (Code) */ const { useState, useEffect, useRef } = React; const FB_CONFIG = { apiKey: "AIzaSyAFQ37zvZAD4vWIE5nwuCxzHUeCY8P-m5s", authDomain: "root-range-465417-m6.firebaseapp.com", projectId: "root-range-465417-m6", storageBucket: "root-range-465417-m6.firebasestorage.app", messagingSenderId: "6353794009", appId: "1:6353794009:web:09a6a1ffa464dfea445fc8" }; const PORTFOLIO_URL = "https://get-portfolio-intelligence-5bsfvjejza-ew.a.run.app"; const INTEL_FIELD_URL = "https://get-intel-field-5bsfvjejza-ew.a.run.app"; const REGISTER_FARM_URL = "https://register-farm-5bsfvjejza-ew.a.run.app"; const S2_TRUECOLOR_URL = "https://get-s2-truecolor-5bsfvjejza-ew.a.run.app"; const FEATURED_FIELD = "field_20260626151521"; // Arap_Samoei_Farm_05 /* ---- CSS-string -> React style object (keeps the design's exact inline CSS) */ function s(css) { const o = {}; String(css).split(';').forEach(d => { const i = d.indexOf(':'); if (i < 0) return; const k = d.slice(0, i).trim(); if (!k) return; const v = d.slice(i + 1).trim(); o[k.startsWith('--') ? k : k.replace(/-([a-z])/g, (_, c) => c.toUpperCase())] = v; }); return o; } const merge = (css, extra) => Object.assign(s(css), extra || {}); /* ---- themes (verbatim from the design; cream == chemeli daylight) */ const THEMES = { dark: { bg: '#0B0D11', bg2: '#0E1217', panel: '#14181F', panel2: '#1A1F28', inset: '#0F1318', ink: '#E8EEF5', ink2: '#97A3B2', ink3: '#5F6A78', line: '#222A33', lineSoft: '#1A2129', accent: '#E0993F', accentDeep: '#B47432', accentSoft: 'rgba(224,153,63,.14)', good: '#5BB82E', goodSoft: 'rgba(91,184,46,.14)', warn: '#E3A53F', warnSoft: 'rgba(227,165,63,.14)', bad: '#E0573A', badSoft: 'rgba(224,87,58,.14)', note: '#5E94C4', noteSoft: 'rgba(94,148,196,.14)', grid: '#1C232C' }, cream: { bg: '#F5EFE3', bg2: '#EFE8DA', panel: '#FCF7EC', panel2: '#FFFFFF', inset: '#EFE8DA', ink: '#16201E', ink2: '#4A5856', ink3: '#7A8682', line: '#E0D6C2', lineSoft: '#EBE2CF', accent: '#DE994C', accentDeep: '#B47432', accentSoft: '#FBE4C2', good: '#4A9E25', goodSoft: '#D8EBC9', warn: '#C77E1A', warnSoft: '#F8E4BD', bad: '#C0492B', badSoft: '#F4D6CB', note: '#3B6F8C', noteSoft: '#CEDFE7', grid: '#E0D6C2' } }; const TV = { good: 'var(--good)', warn: 'var(--warn)', bad: 'var(--bad)', note: 'var(--note)', accent: 'var(--accent)', ink: 'var(--ink)', ink2: 'var(--ink2)', ink3: 'var(--ink3)' }; const tv = k => TV[k] || 'var(--ink2)'; const MODULES = [ { id: 'overview', label: 'Overview', short: 'Overview', icon: 'monitoring', roles: ['CEO', 'Admin', 'Analyst', 'Agronomist'] }, { id: 'operations', label: 'Operations', short: 'Ops', icon: 'travel_explore', roles: ['CEO', 'Admin', 'Analyst', 'Agronomist', 'Field Agent'] }, { id: 'science', label: 'Science', short: 'Science', icon: 'science', roles: ['CEO', 'Admin', 'Analyst'] }, { id: 'insights', label: 'Insights Lab', short: 'Insights', icon: 'experiment', roles: ['CEO', 'Admin', 'Analyst', 'Agronomist'] }, { id: 'manage', label: 'Manage', short: 'Manage', icon: 'tune', roles: ['CEO', 'Admin'] } ]; const ROLES = ['CEO', 'Analyst', 'Agronomist', 'Field Agent', 'Admin']; const TITLES = { overview: 'Overview', operations: 'Operations', science: 'Science', insights: 'Insights Lab', manage: 'Manage' }; /* ---- synthetic series for the illustrative Science cockpit (sample field) */ const SERIES = (function () { const out = []; const start = Date.UTC(2024, 6, 1); const total = 52; for (let i = 0; i < total; i++) { const d = new Date(start); d.setUTCDate(d.getUTCDate() + Math.round(i * (720 / total))); const phase = (i / total) * Math.PI * 4; let ndvi = 0.5 + 0.27 * Math.sin(phase - Math.PI / 2) + 0.04 * Math.sin(i * 1.7); ndvi = Math.max(0.13, Math.min(0.9, ndvi)); const baseline = 0.5 + 0.21 * Math.sin(phase - Math.PI / 2); const rain = Math.max(0, Math.round(40 + 250 * Math.pow(Math.max(0, Math.sin(phase - 0.9)), 2))); out.push({ ndvi: +ndvi.toFixed(3), baseline: +baseline.toFixed(3), rain: rain, date: d }); } return out; })(); const CELLOFF = (function () { const a = []; for (let i = 0; i < 120; i++) { const f = Math.abs(Math.sin((i + 1) * 12.9898) * 43758.5453); a.push((f - Math.floor(f)) * 0.34 - 0.17); } return a; })(); const STAGES = [{ name: 'Bud break', emoji: '🌱', range: 'Aug–Sep' }, { name: 'Flowering', emoji: '🌼', range: 'Oct–Nov' }, { name: 'Fruit set', emoji: '🍈', range: 'Dec–Jan' }, { name: 'Fruit fill', emoji: '🥭', range: 'Feb–Mar' }, { name: 'Maturation', emoji: '🟠', range: 'Apr–May' }, { name: 'Harvest', emoji: '🧺', range: 'Jun–Jul' }]; const fmtDate = ms => { const d = new Date(ms); const p = n => String(n).padStart(2, '0'); return d.getUTCFullYear() + '-' + p(d.getUTCMonth() + 1) + '-' + p(d.getUTCDate()); }; const fmtMon = ms => { const M = ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec']; const d = new Date(ms); return M[d.getUTCMonth()] + ' ' + d.getUTCFullYear(); }; function ramp(v) { v = Math.max(0, Math.min(1, v)); const L = (a, b, t) => Math.round(a + (b - a) * t); let r, g, b; if (v < 0.5) { const t = v / 0.5; r = L(0xC0, 0xE3, t); g = L(0x49, 0xA5, t); b = L(0x2B, 0x3F, t); } else { const t = (v - 0.5) / 0.5; r = L(0xE3, 0x5B, t); g = L(0xA5, 0xB8, t); b = L(0x3F, 0x2E, t); } return 'rgb(' + r + ',' + g + ',' + b + ')'; } const mc = m => m === 'M0' ? 'var(--ink3)' : m === 'M1' ? 'var(--note)' : m === 'M2' ? 'var(--note)' : m === 'M3' ? 'var(--warn)' : 'var(--good)'; const num = (v, d = 0) => (v == null || v !== v) ? '—' : Number(v).toLocaleString(undefined, { maximumFractionDigits: d }); /* eyebrow tag marking a sample / illustrative figure (P001 honesty) */ function SampleTag({ text }) { return {text || 'sample'}; } /* LOUD, non-dismissible P001 banner pinned to the top of synthetic tabs (Science / Insights Lab). Full-width, high-contrast, sticks while scrolling so a screenshot of any part of the tab still reads as illustrative. */ function SampleBanner() { return (
warning
Sample · Illustrative Demonstration field — not live farm data. Live per-farm analysis runs in the Workbench.
); } /* LIVE banner shown once real per-field data has loaded. States the field + last acquisition and marks which sub-panels are still indicative (P001 honesty). */ function LiveFieldBanner({ fd, busy, note }) { const f = fd && fd.field; return (
{busy ? 'sync' : 'satellite_alt'}
Live · from the warehouse {f ? (f.name + (f.crop ? ' · ' + f.crop : '') + ' · ' + (f.pixels || '?') + 'px · ' + (f.n_obs || '?') + ' acquisitions · latest ' + ((f.last_obs || '').slice(0, 10))) : 'loading field…'}{note ? · {note} : null}
); } /* Real Google Maps (hybrid satellite) + the field's live 10 m spots overlaid from the per-pixel cells, coloured by the chosen index (NDVI/NDMI/NDRE). True-colour toggle swaps the basemap; GT pins drop at capture locations; spots are clickable. Same engine as the /app demo (Map.jsx). */ function FieldMap({ cells, center, index, basemap, gtPoints, height, s2 }) { const ref = useRef(null), mapRef = useRef(null), rects = useRef([]), gtm = useRef([]); const [sel, setSel] = useState(null); function normIdx(raw, idx) { return idx === 'ndmi' ? Math.max(0, Math.min(1, (raw + 0.1) / 0.5)) : idx === 'ndre' ? Math.max(0, Math.min(1, raw / 0.5)) : idx === 'vv' ? Math.max(0, Math.min(1, (raw + 22) / 18)) : raw; } function paint() { if (!mapRef.current || !window.google || !window.google.maps) return; rects.current.forEach(r => r.setMap(null)); rects.current = []; gtm.current.forEach(m => m.setMap(null)); gtm.current = []; const px = cells || []; const d = 0.000055; // ~10 m half-cell in degrees if (index && px.length) { px.forEach(p => { const raw = p[index]; if (raw == null) return; const rect = new google.maps.Rectangle({ map: mapRef.current, bounds: { north: p.lat + d, south: p.lat - d, east: p.lng + d, west: p.lng - d }, fillColor: ramp(normIdx(raw, index)), fillOpacity: 0.72, strokeWeight: 0, clickable: true }); rect.addListener('click', () => setSel({ lat: p.lat, lng: p.lng, ndvi: p.ndvi, ndmi: p.ndmi, ndre: p.ndre })); rects.current.push(rect); }); } if (gtPoints && gtPoints.length) { gtPoints.forEach(g => gtm.current.push(new google.maps.Marker({ position: { lat: g.lat, lng: g.lng }, map: mapRef.current, icon: { path: google.maps.SymbolPath.CIRCLE, scale: 6, fillColor: '#5BB82E', fillOpacity: 1, strokeColor: '#fff', strokeWeight: 2 }, title: 'ground-truth capture (approx. field centre)' }))); } if (px.length) { const b = new google.maps.LatLngBounds(); px.forEach(p => b.extend({ lat: p.lat, lng: p.lng })); mapRef.current.fitBounds(b); } } useEffect(() => { let n = 0, dead = false; const init = () => { if (dead) return; if (!window.google || !window.google.maps) { if (n++ < 120) setTimeout(init, 150); return; } if (mapRef.current || !ref.current) return; // data-viz map: native UI off (reference = /app PortfolioMap), keep zoom + fullscreen. // Native mapTypeControl/streetViewControl collided with the app's own chrome (2026-07-02 regression). mapRef.current = new google.maps.Map(ref.current, { center: center || { lat: 0.52, lng: 35.27 }, zoom: 17, mapTypeId: basemap || 'satellite', gestureHandling: 'greedy', tilt: 0, disableDefaultUI: true, zoomControl: true, fullscreenControl: true }); paint(); }; init(); return () => { dead = true; rects.current.forEach(r => r.setMap(null)); gtm.current.forEach(m => m.setMap(null)); if (s2ov.current) s2ov.current.setMap(null); }; }, []); useEffect(() => { paint(); }, [cells, index, gtPoints]); useEffect(() => { if (mapRef.current && basemap && window.google) mapRef.current.setMapTypeId(basemap); }, [basemap]); // real Sentinel-2 RGB drape (true-colour): padded bounds from the CF keep it aligned const s2ov = useRef(null); useEffect(() => { if (!window.google || !mapRef.current) return; if (s2ov.current) { s2ov.current.setMap(null); s2ov.current = null; } if (s2 && s2.url && s2.bounds) { s2ov.current = new google.maps.GroundOverlay(s2.url, s2.bounds, { clickable: false }); s2ov.current.setMap(mapRef.current); } }, [s2]); return React.createElement('div', { style: { position: 'relative' } }, React.createElement('div', { ref, style: { width: '100%', height: height || 360, borderRadius: 10, overflow: 'hidden', background: '#0b1726' } }), sel ? React.createElement('div', { onClick: () => setSel(null), style: { position: 'absolute', bottom: 8, left: 8, background: 'rgba(11,13,17,.9)', color: '#fff', borderRadius: 8, padding: '8px 11px', fontFamily: "'JetBrains Mono',monospace", fontSize: 10.5, lineHeight: 1.55, cursor: 'pointer' } }, React.createElement('div', { style: { color: '#97A3B2' } }, sel.lat.toFixed(5) + ', ' + sel.lng.toFixed(5)), React.createElement('div', null, 'NDVI ' + (sel.ndvi != null ? sel.ndvi.toFixed(3) : '—') + ' · NDMI ' + (sel.ndmi != null ? sel.ndmi.toFixed(3) : '—') + ' · NDRE ' + (sel.ndre != null ? sel.ndre.toFixed(3) : '—'))) : null); } /* Real Google map for the Add-a-farm flow - tap to drop polygon corners, real Street View pegman + fullscreen. Reports the corners up via onPolygon. */ function AddFarmMap({ height, onPolygon }) { const ref = useRef(null), mapRef = useRef(null), poly = useRef(null), pts = useRef([]), mks = useRef([]); const [count, setCount] = useState(0); useEffect(() => { let n = 0, dead = false; const init = () => { if (dead) return; if (!window.google || !window.google.maps) { if (n++ < 120) setTimeout(init, 150); return; } if (mapRef.current || !ref.current) return; mapRef.current = new google.maps.Map(ref.current, { center: { lat: 0.52, lng: 35.27 }, zoom: 15, mapTypeId: 'hybrid', tilt: 0, gestureHandling: 'greedy', zoomControl: true, mapTypeControl: true, streetViewControl: true, fullscreenControl: true, scaleControl: true }); poly.current = new google.maps.Polygon({ map: mapRef.current, paths: [], strokeColor: '#DE994C', strokeWeight: 2, fillColor: '#DE994C', fillOpacity: 0.18, editable: false }); mapRef.current.addListener('click', (e) => { pts.current.push({ lat: e.latLng.lat(), lng: e.latLng.lng() }); poly.current.setPath(pts.current); mks.current.push(new google.maps.Marker({ position: e.latLng, map: mapRef.current, icon: { path: google.maps.SymbolPath.CIRCLE, scale: 5, fillColor: '#DE994C', fillOpacity: 1, strokeColor: '#fff', strokeWeight: 1.5 } })); setCount(pts.current.length); if (onPolygon) onPolygon(pts.current.slice()); }); }; init(); return () => { dead = true; }; }, []); function clear() { pts.current = []; mks.current.forEach(m => m.setMap(null)); mks.current = []; if (poly.current) poly.current.setPath([]); setCount(0); if (onPolygon) onPolygon([]); } return React.createElement('div', { style: { position: 'relative', height: height || 560 } }, React.createElement('div', { ref, style: { width: '100%', height: '100%', borderRadius: 12, overflow: 'hidden', background: '#0b1726' } }), React.createElement('div', { style: { position: 'absolute', top: 12, left: 12, background: 'rgba(11,13,17,.85)', color: '#fff', borderRadius: 8, padding: '6px 11px', fontSize: 12, fontFamily: "'JetBrains Mono',monospace", pointerEvents: 'none' } }, count ? (count + ' corners · drag the pegman for Street View') : 'Tap to drop boundary corners · drag the pegman for Street View'), count ? React.createElement('button', { onClick: clear, style: { position: 'absolute', top: 46, left: 12, background: 'rgba(11,13,17,.85)', color: '#fff', border: 'none', borderRadius: 8, padding: '6px 11px', fontSize: 12, cursor: 'pointer', fontFamily: 'inherit', zIndex: 5 } }, 'Clear') : null); } /* Real Google map of ALL farms - status pins, click to drill into a farm. Mirrors Map.jsx PortfolioMap. */ function PortfolioMap({ farms, onPick, height }) { const ref = useRef(null), mapRef = useRef(null), mks = useRef([]); const COL = { red: '#E0573A', amber: '#E3A53F', green: '#5BB82E', grey: '#7A8A86' }; function draw() { if (!mapRef.current || !window.google || !window.google.maps) return; mks.current.forEach(m => m.setMap(null)); mks.current = []; const ll = (farms || []).filter(f => f.lat != null && f.lng != null); ll.forEach(f => { const m = new google.maps.Marker({ position: { lat: f.lat, lng: f.lng }, map: mapRef.current, title: f.farm_name || f.farm_id, icon: { path: google.maps.SymbolPath.CIRCLE, scale: 6.5, fillColor: COL[f.status] || COL.green, fillOpacity: 0.95, strokeColor: '#0B0D11', strokeWeight: 1.4 } }); m.addListener('click', () => onPick && onPick(f.farm_id, f.farm_name)); mks.current.push(m); }); if (ll.length) { const b = new google.maps.LatLngBounds(); ll.forEach(f => b.extend({ lat: f.lat, lng: f.lng })); mapRef.current.fitBounds(b); } } useEffect(() => { let n = 0, dead = false; const init = () => { if (dead) return; if (!window.google || !window.google.maps) { if (n++ < 120) setTimeout(init, 150); return; } if (mapRef.current || !ref.current) return; mapRef.current = new google.maps.Map(ref.current, { center: { lat: 0.3, lng: 37.6 }, zoom: 6, mapTypeId: 'hybrid', gestureHandling: 'greedy', tilt: 0, zoomControl: true, mapTypeControl: true, streetViewControl: true, fullscreenControl: true, scaleControl: true }); draw(); }; init(); return () => { dead = true; mks.current.forEach(m => m.setMap(null)); mks.current = []; }; }, []); useEffect(() => { draw(); }, [farms]); return React.createElement('div', { ref, style: { width: '100%', height: height || 300, borderRadius: 12, overflow: 'hidden', background: '#0b1726' } }); } /* ========================== RADA INTELLIGENCE ========================== */ function Console({ live, user, onSignOut }) { const [st, setStRaw] = useState({ theme: 'dark', role: 'CEO', active: 'overview', enabled: { overview: true, operations: true, science: true, insights: true, manage: true }, frame: 40, playing: false, speed: 1, loop: true, overlays: { truecolor: false, ndvi: true, ndmi: false, ndre: false, radar: false, rain: true, gt: true }, sciView: 'spectral', addFarm: false, compare: false, cmpVars: { ndmi: false, ndre: false, gdd: false }, lab: 'zones', hypoBaseline: 'cohort', hypoIndex: 'wsi42', opStatus: 'all', opQ: '', anomThresh: 1.0, farmName: '', cropSel: 'Mango', visionJson: '', addPts: [], saveMsg: '', saveBusy: false, addSaved: 0, cmpVar: 'ndvi' }); const set = p => setStRaw(s0 => Object.assign({}, s0, typeof p === 'function' ? p(s0) : p)); const timer = useRef(null); /* ---- LIVE per-field science (Science + Insights) from get_intel_field ---- */ const [fieldId, setFieldId] = useState(FEATURED_FIELD); const [fieldData, setFieldData] = useState(null); const [fieldBusy, setFieldBusy] = useState(false); useEffect(() => { if (!user) return; let alive = true; setFieldBusy(true); user.getIdToken() .then(tok => fetch(INTEL_FIELD_URL + '?field=' + encodeURIComponent(fieldId), { headers: { Authorization: 'Bearer ' + tok } })) .then(r => r.json().then(j => ({ ok: r.ok, j }))) .then(({ ok, j }) => { if (alive && ok && j && j.series) { setFieldData(j); } if (alive) setFieldBusy(false); }) .catch(() => { if (alive) setFieldBusy(false); }); return () => { alive = false; }; }, [fieldId, user]); /* ---- real Sentinel-2 true-colour drape (get_s2_truecolor). Fetched when the true-colour overlay is ON, for the acquisition date under the timeline cursor; debounced so scrubbing doesn't hammer Earth Engine. ---- */ const [s2, setS2] = useState(null); const s2Key = useRef(''); useEffect(() => { if (!user || !st.overlays.truecolor || !fieldData || !Array.isArray(fieldData.cells) || !fieldData.cells.length || !Array.isArray(fieldData.series) || !fieldData.series.length) { if (!st.overlays.truecolor) { setS2(null); s2Key.current = ''; } return; } const idx = Math.min(st.frame, fieldData.series.length - 1); const dateStr = String(fieldData.series[idx].date || '').slice(0, 10); const key = fieldId + '|' + dateStr; if (key === s2Key.current) return; const tmr = setTimeout(() => { s2Key.current = key; const las = fieldData.cells.map(c => c.lat), lns = fieldData.cells.map(c => c.lng); const qs = '?south=' + Math.min.apply(null, las) + '&west=' + Math.min.apply(null, lns) + '&north=' + Math.max.apply(null, las) + '&east=' + Math.max.apply(null, lns) + (dateStr ? '&date=' + dateStr : ''); user.getIdToken() .then(tok => fetch(S2_TRUECOLOR_URL + qs, { headers: { Authorization: 'Bearer ' + tok } })) .then(r => r.ok ? r.json() : null) .then(j => { if (j && j.url && j.bounds && s2Key.current === key) setS2(j); }) .catch(() => {}); }, 600); return () => clearTimeout(tmr); }, [st.overlays.truecolor, st.frame, fieldData, fieldId, user]); // live spectral series mapped to the chart's {ndvi,ndmi,ndre,baseline,rain,date} shape (or null -> synthetic fallback) const liveArr = (fieldData && Array.isArray(fieldData.series) && fieldData.series.length) ? fieldData.series.map(p => ({ ndvi: p.ndvi, ndmi: p.ndmi, ndre: p.ndre, baseline: (p.baseline != null ? p.baseline : p.ndvi), rain: p.rain || 0, date: new Date(p.date) })) : null; const seriesLen = (liveArr || SERIES).length; // SC-6 second field to compare (real, live) - fetched on demand from the same CF const [cmpFieldId, setCmpFieldId] = useState(null); const [cmpData, setCmpData] = useState(null); useEffect(() => { if (!user || !cmpFieldId) { setCmpData(null); return; } let alive = true; user.getIdToken() .then(tok => fetch(INTEL_FIELD_URL + '?field=' + encodeURIComponent(cmpFieldId), { headers: { Authorization: 'Bearer ' + tok } })) .then(r => r.json().then(j => ({ ok: r.ok, j }))) .then(({ ok, j }) => { if (alive && ok && j && j.series) setCmpData(j); }) .catch(() => {}); return () => { alive = false; }; }, [cmpFieldId, user]); /* auto-play transport — effect owns the interval, keyed on play/speed/loop */ useEffect(() => { if (!st.playing) { clearInterval(timer.current); return; } clearInterval(timer.current); const ms = Math.max(90, 460 / st.speed); timer.current = setInterval(() => { set(s0 => { let f = s0.frame + 1; if (f >= seriesLen) { if (s0.loop) return { frame: 0 }; clearInterval(timer.current); return { playing: false }; } return { frame: f }; }); }, ms); return () => clearInterval(timer.current); }, [st.playing, st.speed, st.loop, seriesLen]); // handlers const toggleTheme = () => set(s0 => ({ theme: s0.theme === 'dark' ? 'cream' : 'dark' })); const setRole = r => set(s0 => { const cur = MODULES.find(m => m.id === s0.active); let active = s0.active; if (!cur || !cur.roles.includes(r)) { const f = MODULES.find(m => s0.enabled[m.id] && m.roles.includes(r)); active = f ? f.id : s0.active; } return { role: r, active }; }); const go = id => { const m = MODULES.find(x => x.id === id); if (!m || !st.enabled[id] || !m.roles.includes(st.role)) return; set({ active: id }); }; // drill: click a farm (Ops map/table/feed) -> load it into the live Science cockpit const openFarm = (fid) => { if (!fid) return; setFieldId(fid); set({ active: 'science', sciView: 'map', playing: false, frame: 9999 }); }; // register a real farm from the Add-a-farm map -> register_farm CF (BQ identity + Firestore + pixelation) const saveFarm = () => { if (!st.farmName.trim()) { set({ saveMsg: 'Enter a farm name.' }); return; } const pts = st.addPts || []; if (pts.length < 3) { set({ saveMsg: 'Draw at least 3 boundary corners on the map.' }); return; } if (!user) { set({ saveMsg: 'Sign-in required.' }); return; } const ring = pts.map(p => [p.lng, p.lat]); ring.push(ring[0]); // close the GeoJSON ring const body = { farm_name: st.farmName.trim(), crop_type: st.cropSel, owner_id: (user && user.email) || 'intel_showcase', source_app: 'intel_showcase', source_kind: 'SH', geometry: { type: 'Polygon', coordinates: [ring] }, idempotency_key: 'intel_' + st.farmName.trim().replace(/\s+/g, '_').toLowerCase() + '_' + pts.length + '_' + Math.round(pts[0].lat * 1e4) + '_' + Math.round(pts[0].lng * 1e4) }; set({ saveBusy: true, saveMsg: 'Registering ' + st.farmName.trim() + '…' }); user.getIdToken() .then(tok => fetch(REGISTER_FARM_URL, { method: 'POST', headers: { 'Content-Type': 'application/json', Authorization: 'Bearer ' + tok }, body: JSON.stringify(body) })) .then(r => r.json().then(j => ({ ok: r.ok, j }))) .then(({ ok, j }) => { if (ok && j && j.farm_id) set({ saveBusy: false, saveMsg: '✓ Registered ' + (j.display_name || j.farm_id) + ' · ' + pts.length + ' corners. Pixelation + 24-month backfill queued.', farmName: '', addPts: [], addSaved: (st.addSaved || 0) + 1 }); else set({ saveBusy: false, saveMsg: 'Registration failed: ' + ((j && (j.error || j.message)) || 'unexpected response') }); }) .catch(e => set({ saveBusy: false, saveMsg: 'Registration failed: ' + String(e) })); }; const togglePlay = () => set(s0 => ({ playing: !s0.playing })); const cycleSpeed = () => { const sp = [0.5, 1, 2, 4]; set(s0 => ({ speed: sp[(sp.indexOf(s0.speed) + 1) % sp.length] })); }; const toggleLoop = () => set(s0 => ({ loop: !s0.loop })); const onScrub = e => { const v = +e.target.value; set({ frame: v, playing: false }); }; const toggleOverlay = k => set(s0 => ({ overlays: Object.assign({}, s0.overlays, { [k]: !s0.overlays[k] }) })); const setLab = id => set({ lab: id }); const toggleModule = id => { if (id === 'overview' || id === 'manage') return; set(s0 => { const en = Object.assign({}, s0.enabled, { [id]: !s0.enabled[id] }); let active = s0.active; if (active === id && !en[id]) active = 'overview'; return { enabled: en, active }; }); }; const setSciView = v => set({ sciView: v }); const toggleCompare = () => set(s0 => ({ compare: !s0.compare })); const toggleCmpVar = k => set(s0 => ({ cmpVars: Object.assign({}, s0.cmpVars, { [k]: !s0.cmpVars[k] }) })); // ---- theme root const t = THEMES[st.theme] || THEMES.dark; const rootStyle = Object.assign( { '--bg': t.bg, '--bg2': t.bg2, '--panel': t.panel, '--panel2': t.panel2, '--inset': t.inset, '--ink': t.ink, '--ink2': t.ink2, '--ink3': t.ink3, '--line': t.line, '--lineSoft': t.lineSoft, '--accent': t.accent, '--accentDeep': t.accentDeep, '--accentSoft': t.accentSoft, '--good': t.good, '--goodSoft': t.goodSoft, '--warn': t.warn, '--warnSoft': t.warnSoft, '--bad': t.bad, '--badSoft': t.badSoft, '--note': t.note, '--noteSoft': t.noteSoft, '--grid': t.grid }, { background: 'var(--bg)', color: 'var(--ink)', fontFamily: "'Familjen Grotesk',system-ui,sans-serif", height: '100vh', display: 'flex', overflow: 'hidden' } ); const modules = MODULES.filter(m => st.enabled[m.id]).map(m => { const active = m.id === st.active; const allowed = m.roles.includes(st.role); return { id: m.id, short: m.short, icon: m.icon, active, lock: !allowed, onClick: () => go(m.id), iconColor: active ? 'var(--accent)' : (allowed ? 'var(--ink2)' : 'var(--ink3)'), labelColor: active ? 'var(--ink)' : (allowed ? 'var(--ink2)' : 'var(--ink3)'), bg: active ? 'var(--accentSoft)' : 'transparent', opacity: allowed ? '1' : '.4', cursor: allowed ? 'pointer' : 'not-allowed' }; }); const L = live; // live API payload or null const tot = L && L.totals, ml = L && L.m_levels, cb = L && L.crop_conf_buckets; const NF = (tot && tot.farms) || 89; // ---- OVERVIEW (live where possible) const ladderMeta = [ { id: 'M0', name: 'Registered', blurb: 'Polygon pixelated · 24-month backfill pulled', advance: 'needs crop-ID label', tone: 'ink3' }, { id: 'M1', name: 'Crop identified', blurb: 'Crop confirmed by label or vision-AI', advance: 'needs seasonal baseline', tone: 'note' }, { id: 'M2', name: 'Baselined', blurb: 'Indices + self seasonal baseline established', advance: 'needs harvest-window measure', tone: 'note' }, { id: 'M3', name: 'Phenology', blurb: 'Harvest window & growth stage measured', advance: 'needs ground-truth calibration', tone: 'warn' }, { id: 'M4', name: 'Calibrated', blurb: 'Walk/calibration captures linked to pixels', advance: 'needs model validation', tone: 'accent' }, { id: 'M5', name: 'Validated', blurb: 'Model agrees with reality · loop closed', advance: 'trusted intelligence', tone: 'good' } ]; const ladderCounts = ml ? [ml.M0, ml.M1, ml.M2, ml.M3, ml.M4, ml.M5] : [57, 0, 28, 4, 0, 0]; const ladderMax = Math.max.apply(null, ladderCounts.concat([1])); const ladder = ladderMeta.map((r, i) => ({ ...r, count: ladderCounts[i] || 0, toneColor: tv(r.tone), barW: Math.round((ladderCounts[i] || 0) / ladderMax * 100) + '%' })); const m3plus = tot ? tot.m3plus : 4; const valColor = tone => tone === 'bad' ? 'var(--bad)' : tone === 'warn' ? 'var(--warn)' : tone === 'good' ? 'var(--good)' : 'var(--ink)'; const kpisRaw = [ { label: 'Farms onboarded', value: String(NF), sub: ((tot && tot.counties) || 7) + ' counties', icon: 'agriculture', tone: 'ink' }, { label: 'Measured intel (M3+)', value: String(m3plus), sub: (Math.round(1000 * m3plus / NF) / 10) + '% of the portfolio', icon: 'trending_up', tone: 'warn' }, { label: 'Crop-ID coverage', value: (tot ? tot.crop_id_pct : 36) + '%', sub: 'avg conf ' + (tot && tot.crop_id_conf != null ? tot.crop_id_conf : '0.57'), icon: 'label', tone: (tot ? tot.crop_id_pct : 36) >= 50 ? 'good' : 'warn' }, { label: 'One label from M2', value: String(tot ? tot.unlock_ready : 56), sub: 'unlock-ready backlog', icon: 'lock_open', tone: 'note' } ]; const kpis = kpisRaw.map(k => ({ ...k, iconColor: tv(k.tone), valColor: valColor(k.tone) })); const cbCounts = cb ? [cb.high, cb.med, cb.low, cb.unlabelled] : [9, 21, 12, 47]; const confidence = [ { label: 'High ≥80%', tone: 'good' }, { label: 'Medium 50–79%', tone: 'warn' }, { label: 'Low <50%', tone: 'bad' }, { label: 'Unlabelled', tone: 'ink3' } ].map((c, i) => ({ ...c, count: cbCounts[i] || 0, toneColor: tv(c.tone), barW: Math.round((cbCounts[i] || 0) / NF * 100) + '%' })); const cntFallback = [ { county: 'Makueni', n_farms: 24, dominant_crop: 'Mango', m2_coverage: .82, n_red: 0, n_amber: 4 }, { county: 'Kilifi', n_farms: 16, dominant_crop: 'Cashew', m2_coverage: .1, n_red: 1, n_amber: 4 }, { county: 'Muranga', n_farms: 12, dominant_crop: 'Macadamia', m2_coverage: .5, n_red: 0, n_amber: 1 }, { county: 'UasinGishu', n_farms: 11, dominant_crop: 'Maize', m2_coverage: .15, n_red: 0, n_amber: 2 }, { county: 'Machakos', n_farms: 9, dominant_crop: 'Mixed', m2_coverage: 0, n_red: 0, n_amber: 2 }, { county: 'Kiambu', n_farms: 9, dominant_crop: 'Coffee', m2_coverage: 0, n_red: 0, n_amber: 1 }, { county: 'Kirinyaga', n_farms: 8, dominant_crop: 'Tea', m2_coverage: 0, n_red: 0, n_amber: 1 } ]; const cntRaw = (L && L.counties && L.counties.length) ? L.counties : cntFallback; const sc = v => v >= 0.25 ? 'var(--bad)' : v >= 0.15 ? 'var(--warn)' : 'var(--good)'; const counties = cntRaw.map(c => { const stress = c.n_farms ? ((c.n_red || 0) + (c.n_amber || 0)) / c.n_farms : 0; const cov = Math.round((c.m2_coverage || 0) * 100); return { name: c.county, farms: c.n_farms, crop: c.dominant_crop || '—', stressW: Math.round(stress * 100) + '%', stressColor: sc(stress), m: cov + '% M2', mColor: cov >= 50 ? 'var(--good)' : cov > 0 ? 'var(--note)' : 'var(--ink3)' }; }); const activity = [ { tone: 'good', icon: 'arrow_upward', text: 'Makueni-Mango-007 advanced M2 → M3', time: '2h' }, { tone: 'note', icon: 'science', text: 'WSI42 swept — B11 carrier confirmed', time: '5h' }, { tone: 'warn', icon: 'warning', text: '14 farms still reading the US plane (empty in app)', time: '1d' }, { tone: 'accent', icon: 'photo_camera', text: '12 walk captures synced — 0 carried structured labels', time: '1d' }, { tone: 'bad', icon: 'priority_high', text: 'Macadamia-001 flagged off-pattern (30% conf)', time: '2d' } ].map(a => ({ ...a, toneColor: tv(a.tone) })); const funnel = [{ label: 'flagged', v: 23, tone: 'bad' }, { label: 'queued', v: 11, tone: 'warn' }, { label: 'visited', v: 3, tone: 'note' }, { label: 'labelled', v: 2, tone: 'good' }].map(f => ({ ...f, toneColor: tv(f.tone), h: Math.round(f.v / 23 * 46) + 10 + 'px' })); // ---- SCIENCE geometry (LIVE series when loaded, else synthetic fallback) const arr = liveArr || SERIES, n = arr.length, W = 1000, H = 240, pL = 8, pR = 8, pT = 12, pB = 24; const isLiveSci = !!liveArr; const xAt = i => pL + (i / (n - 1)) * (W - pL - pR); const yAt = v => pT + (1 - v) * (H - pT - pB); const maxRain = Math.max.apply(null, arr.map(p => p.rain)) || 300; const ndviPoints = arr.map((p, i) => xAt(i).toFixed(1) + ',' + yAt(p.ndvi).toFixed(1)).join(' '); const baselinePoints = arr.map((p, i) => xAt(i).toFixed(1) + ',' + yAt(p.baseline).toFixed(1)).join(' '); // SC-3 NDMI series line (live only, when the NDMI overlay is on) const ndmiPoints = (isLiveSci && st.overlays.ndmi) ? arr.filter(p => p.ndmi != null).map((p) => { const i = arr.indexOf(p); return xAt(i).toFixed(1) + ',' + yAt(Math.max(0, Math.min(1, p.ndmi))).toFixed(1); }).join(' ') : ''; // SC-1 overlay stack drives the FieldMap: index priority NDRE>NDMI>NDVI; true-colour swaps basemap; GT pins // True-colour ON = show the raw satellite imagery with NO index heatmap over it const sciIndex = st.overlays.truecolor ? null : (st.overlays.radar ? 'vv' : st.overlays.ndre ? 'ndre' : st.overlays.ndmi ? 'ndmi' : st.overlays.ndvi ? 'ndvi' : null); // always label-free imagery: 'hybrid' draws Google's POI/road labels over the spectral // cells (the "Chemist" collision) and styles arrays can't suppress labels on hybrid const sciBasemap = 'satellite'; const sciGT = (st.overlays.gt && fieldData && fieldData.field && fieldData.field.lat != null && Array.isArray(fieldData.ground_truth) && fieldData.ground_truth.length) ? [{ lat: fieldData.field.lat, lng: fieldData.field.lng }] : null; const bw = (W - pL - pR) / n * 0.5; const rainBars = arr.map((p, i) => { const h = (p.rain / maxRain) * (H - pT - pB) * 0.5; return { x: (xAt(i) - bw / 2).toFixed(1), y: (H - pB - h).toFixed(1), w: bw.toFixed(1), h: h.toFixed(1) }; }); const f = Math.min(st.frame, n - 1), cur = arr[f] || arr[n - 1] || { ndvi: 0.5, baseline: 0.5, rain: 0 }, cursorX = xAt(f).toFixed(1); const liveCells = (fieldData && Array.isArray(fieldData.cells) && fieldData.cells.length) ? fieldData.cells : null; const fieldCols = 12, fieldRows = 7, fieldCells = []; for (let i = 0; i < fieldCols * fieldRows; i++) { // real per-pixel NDVI sampled into the grid when live, else synthetic jitter around the frame mean const v = liveCells ? liveCells[i % liveCells.length].ndvi : Math.max(0.06, Math.min(0.96, cur.ndvi + CELLOFF[i])); fieldCells.push({ color: ramp(v) }); } const overlayMeta = { truecolor: { label: 'True-colour', tone: 'ink2' }, ndvi: { label: 'NDVI — vigour', tone: 'good' }, ndmi: { label: 'NDMI — moisture', tone: 'note' }, ndre: { label: 'NDRE — nitrogen', tone: 'accent' }, radar: { label: 'Radar VV (S1)', tone: 'ink2' }, rain: { label: 'Rainfall (CHIRPS)', tone: 'note' }, gt: { label: 'Ground-truth pts', tone: 'good' } }; const overlays = Object.keys(overlayMeta).map(k => { const on = !!st.overlays[k]; const dot = tv(overlayMeta[k].tone); return { key: k, label: overlayMeta[k].label, on, dot, check: on ? 'check' : '', boxColor: on ? dot : 'var(--line)', boxBg: on ? dot : 'transparent', onToggle: () => toggleOverlay(k) }; }); const sv = st.sciView; const viewTabs = [{ id: 'map', label: 'Map' }, { id: 'spectral', label: 'Spectral' }, { id: 'gt', label: 'Ground truth' }].map(v => ({ label: v.label, onClick: () => setSciView(v.id), bg: sv === v.id ? 'var(--accent)' : 'transparent', color: sv === v.id ? '#0B0D11' : 'var(--ink2)' })); const mapOnly = sv === 'map', showSpectral = sv === 'spectral', showGT = sv === 'gt'; const sciGrid = mapOnly ? '1fr' : '1fr 1fr'; // NDVI-derived season position (per-field, non-static). The old strip was a fixed fruit // calendar keyed only on month-of-year - same for every field. Per-crop phenophase is // Mariia's parked model; here we place the field within its OWN NDVI cycle from live data. const PHASES = [{ n: 'Establishing', g: '🌱' }, { n: 'Greening', g: '🌿' }, { n: 'Peak canopy', g: '🟢' }, { n: 'Senescing', g: '🍂' }]; let phaseIdx = 2, phaseRel = 0.5, phaseSlope = 0; if (isLiveSci && arr.length > 3) { const vals = arr.map(p => p.ndvi).filter(v => v != null); const mn = Math.min.apply(null, vals), mx = Math.max.apply(null, vals); phaseRel = (mx > mn) ? (cur.ndvi - mn) / (mx - mn) : 0.5; const prev = arr[Math.max(0, f - 2)]; phaseSlope = (prev && prev !== cur && prev.ndvi != null) ? cur.ndvi - prev.ndvi : 0; if (phaseRel < 0.35 && phaseSlope >= -0.01) phaseIdx = 0; else if (phaseSlope > 0.02) phaseIdx = 1; else if (phaseRel >= 0.72) phaseIdx = 2; else if (phaseSlope < -0.02) phaseIdx = 3; else phaseIdx = phaseRel >= 0.6 ? 2 : 1; } const growthLineW = Math.round((phaseIdx / 3) * 82 + 6) + '%'; const phaseRelPct = Math.round(phaseRel * 100); const stages = PHASES.map((sg, i) => { const stt = i < phaseIdx ? 'done' : (i === phaseIdx ? 'active' : 'todo'); return { name: sg.n, emoji: sg.g, range: '', nodeBg: stt === 'done' ? 'var(--good)' : (stt === 'active' ? 'var(--accent)' : 'var(--inset)'), nodeBorder: stt === 'active' ? 'var(--accent)' : (stt === 'done' ? 'var(--good)' : 'var(--line)'), nameColor: stt === 'todo' ? 'var(--ink3)' : 'var(--ink)', emojiOp: stt === 'todo' ? '0.4' : '1', pulse: stt === 'active' ? 'blink 2s infinite' : 'none' }; }); // Structural readouts - real indices only. NO soil moisture (not measured, P001); NDMI is the moisture proxy. const lai = (cur.ndvi * 4.2).toFixed(1); const ndmiV = (cur.ndmi != null) ? cur.ndmi : null; const ndreV = (cur.ndre != null) ? cur.ndre : null; const norm01 = (v, lo, hi) => Math.max(0, Math.min(1, (v - lo) / (hi - lo))); const structural = [ { label: 'Vigour · NDVI', val: cur.ndvi.toFixed(2), tone: cur.ndvi > 0.55 ? 'good' : cur.ndvi > 0.4 ? 'warn' : 'bad', pct: norm01(cur.ndvi, 0.2, 0.85) * 100, verdict: cur.ndvi > 0.55 ? 'healthy' : cur.ndvi > 0.4 ? 'watch' : 'low' }, { label: 'Moisture · NDMI', val: ndmiV != null ? ndmiV.toFixed(2) : '—', tone: ndmiV == null ? 'ink3' : ndmiV > 0.30 ? 'good' : ndmiV > 0.15 ? 'warn' : 'bad', pct: ndmiV != null ? norm01(ndmiV, 0, 0.5) * 100 : 0, verdict: ndmiV == null ? '—' : ndmiV > 0.30 ? 'adequate' : ndmiV > 0.15 ? 'drying' : 'low' }, { label: 'Nitrogen · NDRE', val: ndreV != null ? ndreV.toFixed(2) : '—', tone: ndreV == null ? 'ink3' : ndreV > 0.35 ? 'good' : ndreV > 0.20 ? 'warn' : 'note', pct: ndreV != null ? norm01(ndreV, 0, 0.5) * 100 : 0, verdict: ndreV == null ? '—' : ndreV > 0.35 ? 'good' : ndreV > 0.20 ? 'fair' : 'low' }, { label: 'Canopy · LAI (est)', val: lai, tone: cur.ndvi > 0.55 ? 'good' : cur.ndvi > 0.4 ? 'warn' : 'bad', pct: norm01(+lai, 0, 5) * 100, verdict: 'est' } ].map(sg => ({ label: sg.label, val: sg.val, valColor: tv(sg.tone), pct: Math.round(sg.pct), verdict: sg.verdict })); // --- REAL derived signal vs the field's OWN seasonal baseline (live only). No cohort // model, no per-band attribution - we only claim what the series supports. --- let devZ = null, ndmiDelta = null; if (isLiveSci && arr.length > 4) { const devs = arr.map(p => (p.ndvi != null && p.baseline != null) ? p.ndvi - p.baseline : null).filter(v => v != null); if (devs.length > 3) { const mean = devs.reduce((a, b) => a + b, 0) / devs.length; const sd = Math.sqrt(devs.reduce((a, b) => a + (b - mean) * (b - mean), 0) / devs.length) || 1e-6; const curDev = (cur.ndvi != null && cur.baseline != null) ? cur.ndvi - cur.baseline : 0; devZ = (curDev - mean) / sd; } const prev = arr[Math.max(0, f - 1)]; if (cur.ndmi != null && prev && prev !== cur && prev.ndmi != null) ndmiDelta = cur.ndmi - prev.ndmi; } const devZlabel = devZ == null ? null : (devZ <= -1.5 ? 'below baseline' : (devZ >= 1.5 ? 'above baseline' : 'near baseline')); const devZtone = devZ == null ? 'ink3' : (devZ <= -1.5 ? 'bad' : (devZ >= 1.5 ? 'good' : 'warn')); // cropRead - NDVI-vs-own-baseline / phase fact only; NO fabricated SWIR/band causal claim (P001) let cropRead; if (isLiveSci && devZlabel) cropRead = 'NDVI is ' + devZlabel + ' for this field’s own seasonal norm (' + (devZ >= 0 ? '+' : '') + devZ.toFixed(1) + 'σ).'; else if (cur.ndvi < 0.4) cropRead = 'Low canopy this acquisition — ' + PHASES[phaseIdx].n.toLowerCase() + '.'; else cropRead = PHASES[phaseIdx].n + ' — NDVI ' + cur.ndvi.toFixed(2) + ' of this field’s own range.'; // SC-6 compare = a real second field's NDVI trajectory (not a fabricated benchmark) const showCompare = !!(cmpData && Array.isArray(cmpData.series) && cmpData.series.length > 1); const cmpVar = st.cmpVar || 'ndvi'; let comparePoints = ''; if (showCompare) { const cs = cmpData.series.filter(p => p[cmpVar] != null); const m = cs.length; comparePoints = cs.map((p, j) => (pL + (m > 1 ? j / (m - 1) : 0) * (W - pL - pR)).toFixed(1) + ',' + yAt(Math.max(0, Math.min(1, p[cmpVar]))).toFixed(1)).join(' '); } const cmpName = cmpData && cmpData.field ? cmpData.field.name : null; const cmpFields = (fieldData && Array.isArray(fieldData.fields)) ? fieldData.fields.filter(o => o.id !== fieldId) : []; // single-select compare variable (drives the compare overlay line) - GDD dropped (no per-date GDD in the series) const cmpVars = [{ k: 'ndvi', label: 'NDVI' }, { k: 'ndmi', label: 'NDMI' }, { k: 'ndre', label: 'NDRE' }].map(v => { const on = cmpVar === v.k; return { label: v.label, onClick: () => set({ cmpVar: v.k }), bg: on ? 'var(--accent)' : 'transparent', col: on ? '#0B0D11' : 'var(--ink2)', bd: on ? 'var(--accent)' : 'var(--line)' }; }); // GT cards - REAL captures for the field (walk + calibration). No fabricated severity/pixel - // those columns are NULL fleet-wide; we show only label + date + view/kind. Empty for most fields. const gtCards = (isLiveSci && Array.isArray(fieldData.ground_truth)) ? fieldData.ground_truth.map(g => ({ label: String(g.label || 'capture').replace(/_/g, ' '), date: g.d, view: String(g.view || g.kind || '').replace(/_/g, ' '), toneColor: tv('note'), tint: 'rgba(120,140,160,.14)' })) : []; // ---- INSIGHTS const labTabs = [{ id: 'zones', label: 'Zones' }, { id: 'stress', label: 'Stress assessment' }, { id: 'hypo', label: 'Hypothesis tester' }, { id: 'anomalies', label: 'Anomalies' }, { id: 'drivers', label: 'Drivers' }, { id: 'dispatch', label: 'Dispatch queue' }].map(l => ({ label: l.label, onClick: () => setLab(l.id), color: st.lab === l.id ? 'var(--accent)' : 'var(--ink2)', under: st.lab === l.id ? 'var(--accent)' : 'transparent' })); // Zones - LIVE NDVI-tercile stats from get_intel_field when loaded, else synthetic. const zAction = { A: 'Hold — this block is tracking on vigour.', B: 'Watch — mid-vigour; check the NDMI trend before it shows in NDVI.', C: 'Investigate — under-performing block; confirm cause (water vs nutrient).' }; const liveZones = (fieldData && Array.isArray(fieldData.zones) && fieldData.zones.length) ? fieldData.zones : null; const zones = (liveZones ? liveZones.map(z => ({ id: z.id, label: z.label, ndvi: (z.ndvi != null ? z.ndvi.toFixed(2) : '—'), area: (z.area_ha != null ? z.area_ha + ' ha' : '—'), stress: (z.stress_pct != null ? z.stress_pct + '%' : '—'), tone: z.tone, action: zAction[z.id] || '' })) : [ { id: 'A', label: 'Zone A · vigorous', ndvi: '0.78', area: '1.1 ha', stress: '4%', tone: 'good', action: zAction.A }, { id: 'B', label: 'Zone B · mid / watch', ndvi: '0.52', area: '0.6 ha', stress: '31%', tone: 'warn', action: zAction.B }, { id: 'C', label: 'Zone C · under-performing', ndvi: '0.34', area: '0.3 ha', stress: '58%', tone: 'bad', action: zAction.C } ] ).map(z => ({ ...z, toneColor: tv(z.tone) })); const zoneCols = 12, zoneRows = 7, zoneCells = []; for (let i = 0; i < zoneCols * zoneRows; i++) { // real per-pixel NDVI pattern when live, else synthetic const v = liveCells ? liveCells[i % liveCells.length].ndvi : Math.max(0.06, Math.min(0.96, [0.78, 0.52, 0.34][i % 3] + CELLOFF[i] * 0.5)); zoneCells.push({ color: ramp(v), ring: '1px', ringColor: 'rgba(0,0,0,.18)' }); } // IN-1 Anomalies - rank the field's spots by NDVI deviation below the field mean (LIVE cells, client-side) let anomAll = [], anomMean = null, anomSd = null; if (liveCells) { const vs = liveCells.map(c => c.ndvi).filter(v => v != null); if (vs.length > 3) { anomMean = vs.reduce((a, b) => a + b, 0) / vs.length; anomSd = Math.sqrt(vs.reduce((a, b) => a + (b - anomMean) * (b - anomMean), 0) / vs.length) || 1e-6; anomAll = liveCells.filter(c => c.ndvi != null).map(c => ({ pixel_id: c.pixel_id, lat: c.lat, lng: c.lng, ndvi: c.ndvi, ndmi: c.ndmi, z: (c.ndvi - anomMean) / anomSd })).sort((a, b) => a.z - b.z); } } const anomThresh = st.anomThresh || 1.0; const anomalies = anomAll.filter(c => c.z <= -anomThresh); // IN-3 Drivers - fleet rule_v1 distribution (LIVE from payload) const DRV_LABEL = { healthy: 'Healthy', veg_drop: 'Vegetation drop', water_deficit: 'Water deficit', monitoring: 'Monitoring', insufficient_data: 'Awaiting data' }; const DRV_TONE = { healthy: 'good', veg_drop: 'bad', water_deficit: 'warn', monitoring: 'warn', insufficient_data: 'ink3' }; const driverDist = (L && Array.isArray(L.driver_dist) && L.driver_dist.length) ? L.driver_dist.map(d => ({ key: d.driver, label: DRV_LABEL[d.driver] || d.driver, n: d.n || 0, conf: d.avg_conf, tone: DRV_TONE[d.driver] || 'ink2' })) : null; const driverTotal = driverDist ? driverDist.reduce((a, d) => a + d.n, 0) : 0; // IN-4 this field's rule_v1 driver (LIVE) const fdrv = fieldData && fieldData.field_driver; const hb = st.hypoBaseline, hi = st.hypoIndex; let hypoVerdict, hypoTone, hypoSub; if (hi === 'wsi42' && hb === 'cohort') { hypoVerdict = 'STRESS · high'; hypoTone = 'var(--bad)'; hypoSub = '+2.0σ vs the crop cohort · carrier B11 (SWIR) leads NDVI.'; } else if (hi === 'wsi42' && hb === 'self') { hypoVerdict = 'STRESS · moderate'; hypoTone = 'var(--warn)'; hypoSub = '+1.3σ vs the field’s own seasonal prior for this day-of-year.'; } else if (hi === 'ndvi' && hb === 'cohort') { hypoVerdict = 'WATCH · low'; hypoTone = 'var(--warn)'; hypoSub = 'NDVI still sits inside the cohort band — vigour is masking the moisture drop.'; } else { hypoVerdict = 'NORMAL'; hypoTone = 'var(--good)'; hypoSub = 'NDVI is near the field’s own baseline for this day-of-year.'; } const segB = active => ({ border: active ? 'var(--accent)' : 'var(--line)', bg: active ? 'var(--accentSoft)' : 'var(--inset)' }); const bSelf = segB(hb === 'self'), bCoh = segB(hb === 'cohort'), iN = segB(hi === 'ndvi'), iW = segB(hi === 'wsi42'); const otherLab = { anomalies: { icon: 'scatter_plot', title: 'Anomalies', body: 'Ranks this field’s most-deviating spots (anomaly × low NDVI) into a visit list with coordinates — coming next.' }, drivers: { icon: 'category', title: 'Drivers (labelled)', body: 'Distribution of confirmed stressors — water / nutrient / pest / disease — from ground-truth labels. Builds as labels arrive.' }, dispatch: { icon: 'send', title: 'Dispatch queue', body: 'Most-deviating spots become a coordinate visit list to hand an agronomist. Wires onto the same spot-task backend.' } }; const ol = otherLab[st.lab] || otherLab.anomalies; // ---- OPERATIONS rows (live) const opFallback = [ { farm_name: 'Makueni-Mango-007', county: 'Makueni', crop: 'Mango', m_level: 3, cropid_conf: .85, m_bottleneck: 'needs ground-truth calibration' }, { farm_name: 'EST_Kibwezi_017', county: 'Kibwezi', crop: 'Mango', m_level: 2, cropid_conf: .5, m_bottleneck: 'needs harvest-window measure' }, { farm_name: 'Avc Saina farm', county: 'UasinGishu', crop: 'Avocado', m_level: 2, cropid_conf: .9, m_bottleneck: 'needs harvest-window measure' }, { farm_name: 'Kilifi-Galana-01', county: 'Kilifi', crop: 'Cashew', m_level: 0, cropid_conf: .25, m_bottleneck: 'needs crop-ID label' } ]; const opSrc = (L && L.farms && L.farms.length) ? L.farms : opFallback; const stDot = s0 => s0 === 'red' ? 'var(--bad)' : s0 === 'amber' ? 'var(--warn)' : s0 === 'green' ? 'var(--good)' : 'var(--ink3)'; function opIssue(r) { if (!r.status || r.status === 'grey') return 'Awaiting clear observations'; if (r.status === 'green') return 'On track (rule_v1)'; const parts = []; if (r.driver) parts.push(DRV_LABEL[r.driver] || r.driver); if (r.ndvi_delta != null) parts.push('NDVI ' + (r.ndvi_delta >= 0 ? '+' : '') + (r.ndvi_delta * 100).toFixed(0) + '%'); if (r.latest_ndmi != null) parts.push('NDMI ' + Number(r.latest_ndmi).toFixed(2)); return parts.join(' · ') || (DRV_LABEL[r.driver] || 'Flagged'); } const opAll = opSrc.map(r => { const lvl = 'M' + (r.m_level == null ? 0 : r.m_level); const conf = r.cropid_conf != null ? Math.round(r.cropid_conf * 100) + '%' : '—'; const ct = r.cropid_conf == null ? 'ink3' : r.cropid_conf >= 0.8 ? 'good' : r.cropid_conf >= 0.5 ? 'warn' : 'bad'; const status = r.status || null; return { farm_id: r.farm_id, farm: r.farm_name || '—', county: r.county || '—', crop: r.crop || '—', lat: r.lat, lng: r.lng, status, dot: stDot(status), issue: opIssue(r), asOf: r.driver_as_of, lvl, lvlColor: mc(lvl), conf, confColor: tv(ct), next: r.m_bottleneck || '—', rank: status === 'red' ? 0 : status === 'amber' ? 1 : status === 'green' ? 2 : 3 }; }); const opCounts = { red: opAll.filter(r => r.status === 'red').length, amber: opAll.filter(r => r.status === 'amber').length, green: opAll.filter(r => r.status === 'green').length }; const opQ = (st.opQ || '').toLowerCase(); const opRows = opAll.filter(r => (st.opStatus === 'all' || r.status === st.opStatus) && (!opQ || (r.farm + ' ' + r.county + ' ' + r.crop).toLowerCase().includes(opQ))); const opAttention = opAll.filter(r => r.status === 'red' || r.status === 'amber').sort((a, b) => a.rank - b.rank).slice(0, 6); const opStatusTabs = [['all', 'All', opAll.length], ['red', 'Urgent', opCounts.red], ['amber', 'Watch', opCounts.amber], ['green', 'Good', opCounts.green]].map(x => ({ id: x[0], label: x[1], n: x[2], on: st.opStatus === x[0], color: x[0] === 'red' ? 'var(--bad)' : x[0] === 'amber' ? 'var(--warn)' : x[0] === 'green' ? 'var(--good)' : 'var(--ink)' })); const manageModules = MODULES.map(m => { const fixed = (m.id === 'overview' || m.id === 'manage'); const en = !!st.enabled[m.id]; return { id: m.id, label: m.label, icon: m.icon, roles: m.roles.join(' · '), fixed, toggleable: !fixed, onToggle: () => toggleModule(m.id), swBg: en ? 'var(--accent)' : 'var(--line)', swX: en ? '23px' : '3px' }; }); const isOverview = st.active === 'overview', isScience = st.active === 'science', isInsights = st.active === 'insights', isOperations = st.active === 'operations', isManage = st.active === 'manage'; const liveTag = L ? ('live · as of ' + (L.as_of || '—')) : 'syncing live data…'; return (
{/* ===== RAIL ===== */} {/* ===== MAIN COLUMN ===== */}
RADA INTELLIGENCE
{TITLES[st.active] || ''}
{liveTag}
Viewing as
{/* ============ OVERVIEW ============ */} {isOverview && (
Where we are · intelligence level
{NF} farms are seeing the sky. Only {m3plus} have intelligence we can trust — and none are calibrated against the ground yet.
{kpis.map((k, i) => (
{k.label} {k.icon}
{k.value}
{k.sub}
))}
Intelligence maturity ladder
From a polygon on a map to ground-proven intelligence
each farm climbs M0 → M5
{ladder.map((r, i) => (
{r.id}
{r.count}
{r.name}
{r.blurb}
↳ {r.advance}
))}
lightbulb
What this means — intelligence is wide but shallow. We can draw stress maps on {(tot ? tot.crop_id_pct : 36)}% of farms, but only {m3plus} have measured phenology and zero are calibrated against ground truth. {tot ? tot.unlock_ready : 56} farms are one crop-ID label away from M2 — the whole portfolio is dammed up at labelling.
target
Ground-truth coverage · the crown jewel
{L && L.ground_truth ? live : }
{L && L.ground_truth ? L.ground_truth.photos : 196}
photos captured
{L && L.ground_truth ? L.ground_truth.linked : 0}
linked to a pixel + label
{L && L.ground_truth ? L.ground_truth.farms_with_gt : 4}/{NF}
farms with any ground truth
What this means — the satellite model is still unproven against reality. Every capture must answer where · when · what · how-bad + photo or it never enters training. Closing this gap is the single highest-leverage move on the board.
Crop-ID model confidence
{confidence.map((c, i) => (
{c.label}{c.count}
))}
Most farms are unlabelled or low-confidence — the model is guessing on the majority until labels arrive.
Coverage · {counties.length} counties
Makueni leads
{counties.map((c, i) => (
{c.name} {c.farms}
{c.crop}
{c.m}
))}
bar = share of farms under stress · open the map in Operations to drill in
Intelligence activity
example events — the live activity log ships with the event bus
{activity.map((a, i) => (
{a.icon}
{a.text}
{a.time}
))}
databasePipeline health
Canonical planeEU · gsg_*_eu
Last satellite pass{L ? (L.as_of || '—') : '2 days ago'}live
Stranded on US plane~14 farms · snapshot
conversion_pathDispatch loop
{funnel.map((fn, i) => (
{fn.v}
{fn.label}
))}
Stress found → visited → labelled. The loop barely closes — only 2 of 23 became training data.
cycloneHazard outlook · beta
All-clear (illustrative)
El Niño ~96% likely in the Oct–Dec window (NOAA CPC). Bands calm now. The live ward-level hazard nowcast runs in the hazard pipeline; this card is illustrative until it is wired here.
)} {/* ============ SCIENCE ============ */} {isScience && (
{isLiveSci ? : }
layers
{viewTabs.map((v, i) =>
{v.label}
)}
{isLiveSci && fieldData.field ? (fieldData.field.n_obs + ' valid obs') : '43 valid obs · median'}
{PHASES[phaseIdx].g}
{PHASES[phaseIdx].n} · NDVI-derived{isLiveSci ? {phaseRelPct}% of this field’s NDVI range{fieldData.phenology && fieldData.phenology.days_since_planting != null ? ' · day ' + fieldData.phenology.days_since_planting : ''} : null}
{cropRead}
{structural.map((sg, i) => (
{sg.label}
{sg.val}{sg.verdict}
))}
{stages.map((g, i) => (
{g.emoji}
{g.name}
{g.range}
))}
Map · 10 m spots{liveCells ? ' · ' + (sciIndex ? sciIndex.toUpperCase() : 'true-colour') : ''}{st.overlays.truecolor && s2 ? 'Sentinel-2 · ' + s2.date + ' · ' + s2.cloud_pct + '% cloud' : fmtDate(cur.date)}
{liveCells ? :
{fieldCells.map((c, i) =>
)}
}
{showSpectral && (
{!isLiveSci && synthetic demonstration data}
{isLiveSci ? 'NDVI × NDMI × rainfall · live' : 'NDVI × rainfall · 24 mo · synthetic'}NDVI {cur.ndvi.toFixed(3)}
{st.overlays.rain && rainBars.map((b, i) => )} {showCompare && } {ndmiPoints && }
{fmtMon(arr[0].date)}▮ rain · — baseline{fmtMon(arr[n - 1].date)}
)} {showGT && (
Ground truth · captures for this field{gtCards.length ? (gtCards.length + ' on file') : ''}
{gtCards.length ? (
{gtCards.map((g, i) => (
photo_camera
{g.label}
{g.date}{g.view ? ' · ' + g.view : ''}
))}
) : (
photo_camera
No ground-truth captures linked to this field yet.
Farm-walk + calibration photos flow in from the Tu-RaDa app — 196 on file across 19 farms so far.
)}
Captures don’t yet carry a structured pixel link or severity — that’s the calibration step (M4).
)}
{fmtDate(cur.date)}
acq {f + 1}/{n}{isLiveSci && fieldData.field ? ' · ' + (fieldData.field.pixels || '?') + ' px' : ''}
← earlierrain {cur.rain} mm · {fmtMon(cur.date)}most recent →
Overlay stack
{overlays.map((o, i) => ( ))}
Classification{isLiveSci ? vs own baseline : }
{isLiveSci ? (
{devZlabel || '—'}
NDVI vs own baseline{devZ == null ? '—' : (devZ >= 0 ? '+' : '') + devZ.toFixed(1) + 'σ'}
NDMI vs prev{ndmiDelta == null ? '—' : (ndmiDelta >= 0 ? '+' : '') + ndmiDelta.toFixed(2)}
methodself seasonal σ
 ) : (
stress
z vs cohort+2.0σ
signal carrierB11 · SWIR
confidencehigh
 )}
Comparecompare_arrows
{isLiveSci && fieldData.field ? fieldData.field.name : 'Sample field'} · base
{showCompare && (
{cmpName || 'loading…'} · {cmpVar.toUpperCase()}
)} {!showCompare && (
add
)}
Compare variable
{cmpVars.map((v, i) => )}
)} {/* ============ INSIGHTS LAB ============ */} {isInsights && (
Insights Lab
Turn raw signals into decisions you can defend
{liveZones ? : }
{labTabs.map((tb, i) => )}
{st.lab === 'zones' && (
Kenya · {NF} farmschevron_right{isLiveSci && fieldData.field ? {fieldData.field.name}{fieldData.field.crop ? ' · ' + fieldData.field.crop : ''} : Makueni · 24chevron_rightsample field}
Zones cluster a field's spots into a few management blocks — so an agronomist acts on a block, not 84 separate pixels. Same idea scales up: counties cluster into regional zones for a bird's-eye view of Makueni.
Clustered into 3 zones
{zoneCells.map((z, i) =>
)}
{zones.map((z, i) => (
{z.label}{z.area}
NDVI {z.ndvi} stress {z.stress}
arrow_forward{z.action}
))}
)} {st.lab === 'stress' && (
Stress assessment ranks the likely cause against the field's own seasonal baseline. The Evidence below is live for the selected field; the cause attribution + verdict are a worked example — the live classifier runs in the Workbench.
1 · Evidence
NDVI vs own baseline{isLiveSci && devZ != null ? ((devZ >= 0 ? '+' : '') + devZ.toFixed(1) + 'σ') : '+2.0σ'}
NDMI Δ vs prev{isLiveSci && ndmiDelta != null ? ((ndmiDelta >= 0 ? '+' : '') + ndmiDelta.toFixed(2)) : '−0.14'}
latest NDMI{isLiveSci && cur.ndmi != null ? cur.ndmi.toFixed(2) : '0.18'}
arrow_forward
2 · Method
Rank candidate drivers by how far each spectral signature deviates from this field's self seasonal prior, weighted by any ground-truth photo. Low-confidence high-deviation cases are flagged for an agronomist.
arrow_forward
3 · Verdict
{fdrv ? (
{DRV_LABEL[fdrv.driver] || fdrv.driver}
rule_v1 · {fdrv.confidence != null ? ('confidence ' + fdrv.confidence) : 'confidence n/a'} · as of {(fdrv.last_week || '').slice(0, 10)}
satellite-derived, not GT-confirmed
 ) : (
Water stress
example conclusion · open a field for its live rule_v1 verdict
 )}
)} {st.lab === 'hypo' && (
Change one assumption and watch the call move. This is how you pressure-test a classification before trusting it — the answer depends on the baseline and the index you choose.
Baseline
Index
if baseline = {hb} and index = {hi} → classify
Resulting call
{hypoVerdict}
{hypoSub}
Shows how the call moves with your assumptions — the σ values are illustrative; the live run is in the Workbench.
)} {st.lab === 'anomalies' && (
{isLiveSci ? (
The field's most-deviating spots, ranked by NDVI vs the field's own mean. {anomAll.length} spots · mean NDVI {anomMean != null ? anomMean.toFixed(2) : '—'}
≤ −{anomThresh.toFixed(1)}σ set({ anomThresh: +e.target.value })} style={s("width:120px")} />
{anomalies.length ? (
RankCoordinatesNDVIz
{anomalies.slice(0, 60).map((c, i) => (
#{i + 1} {c.lat.toFixed(5)}, {c.lng.toFixed(5)} {c.ndvi.toFixed(3)} {c.z.toFixed(1)}σ
))}
{anomalies.length} spots ≤ −{anomThresh.toFixed(1)}σ · live per-pixel NDVI, latest acquisition
) :
No spots beyond −{anomThresh.toFixed(1)}σ — this field is uniform. Lower the threshold to inspect.
} ) :
Open a field (Science tab) to rank its spots by deviation.
}
)} {st.lab === 'dispatch' && (
A coordinate visit list from the worst spots — hand to an agronomist. Assignment + status tracking need a dispatch backend (not built yet).
{isLiveSci && anomalies.length ? (
{fieldData.field.name} · {anomalies.length} spots to visit (≤ −{anomThresh.toFixed(1)}σ)
{anomalies.slice(0, 30).map((c, i) => '#' + (i + 1) + '  ' + c.lat.toFixed(5) + ', ' + c.lng.toFixed(5) + '   NDVI ' + c.ndvi.toFixed(2) + '  (' + c.z.toFixed(1) + 'σ)').join('\n')}
) :
Open a field and flag spots in Anomalies to build a visit list.
}
)} {st.lab === 'drivers' && (
Fleet driver mix — rule_v1, satellite-derived, not ground-truth-confirmed. Each farm's latest weekly classification.
{driverDist ? (
{driverDist.map((d, i) => (
{d.label}{d.n} · {driverTotal ? Math.round(d.n / driverTotal * 100) : 0}%{d.conf != null ? ' · conf ' + d.conf : ''}
))}
{driverTotal} farms classified · rule_v1 (latest week per farm)
) :
Driver distribution loads with the portfolio.
}
photo_camera
GT-confirmed stressors (water / nutrient / pest / disease from field photos): none linked yet — captures carry no structured stressor label; that's the calibration step (M4).
)}
)} {/* ============ OPERATIONS ============ */} {isOperations && (
{!st.addFarm && (
Operations
Farm inventory & onboarding
{NF} farms
M0:{ladderCounts[0]} · M2:{ladderCounts[2]} · M3:{ladderCounts[3]}
{/* real all-farms map - status pins, tap to drill */}
Fleet map · tap a farm to open it
{opCounts.red} urgent {opCounts.amber} watch {opCounts.green} good
Pin colour = rule_v1 status (satellite-derived, not ground-truth-confirmed). Tap a pin → the farm's live 10 m spots in Science.
{/* attention feed - worst farms first */} {opAttention.length > 0 && (
Needs attention{opCounts.red + opCounts.amber} flagged · rule_v1
{opAttention.map((r, i) => (
openFarm(r.farm_id)} style={merge("display:flex;align-items:center;gap:10px;background:var(--inset);border:1px solid var(--line);border-radius:10px;padding:10px 12px;cursor:pointer", { borderLeft: '3px solid ' + r.dot })}>
{r.farm}
{r.county} · {r.issue}
chevron_right
))}
)} {/* filterable, clickable inventory table */}
{opStatusTabs.map((tb, i) =>
set({ opStatus: tb.id })} style={merge("font-size:11.5px;font-weight:600;padding:6px 11px;border-radius:7px;cursor:pointer", { background: tb.on ? 'var(--accent)' : 'transparent', color: tb.on ? '#0B0D11' : 'var(--ink2)' })}>{tb.label} {tb.n}
)}
set({ opQ: e.target.value })} placeholder="Search farm / county / crop" style={s("background:var(--inset);border:1px solid var(--line);border-radius:8px;padding:8px 12px;font-size:12.5px;color:var(--ink);outline:none;font-family:inherit;min-width:200px")} />
FarmCountyCropLevelStatus · issue
{opRows.map((r, i) => (
openFarm(r.farm_id)} style={s("display:grid;grid-template-columns:16px 1.6fr .9fr .9fr 60px 1.5fr;gap:12px;padding:11px 18px;border-top:1px solid var(--lineSoft);align-items:center;font-size:12.5px;cursor:pointer")}> {r.farm} {r.county} {r.crop} {r.lvl} {r.issue}
))}
{opRows.length} of {opAll.length} farms · status is rule_v1 (satellite-derived), not ground-truth-confirmed
)} {st.addFarm && (
Operations · onboarding
Add a farm
info Tap the map to drop the farm boundary corners (drag the pegman for Street View). Save registers the farm live — writes to the identity layer + Firestore and queues pixelation + 24-month backfill.
set({ addPts: pts })} />
Farm name
set({ farmName: e.target.value })} placeholder="e.g. Makueni-Mango-007" style={s("width:100%;box-sizing:border-box;background:var(--inset);border:1px solid var(--line);border-radius:9px;padding:10px 12px;font-size:13px;color:var(--ink);outline:none;font-family:inherit")} />
Crop
Paste vision-AI JSON · optional