// V6 — ARGUS (autonomous-first, manual hidden in drawer) // Brand: Argus, OMV navy #06275c. Logo is the X-drone with corner brackets, // recreated as SVG. Layout: thin header → hero feed (massive) + right panel // (Coverage + Live inspection details) → history strip. Manual control is // a floating action button in the feed; opening it slides a drawer up over // the bottom of the feed and shows an "Autonomous paused" banner. // ─── Brand tokens ──────────────────────────────────────────────────── const OMV_NAVY = '#06275c'; // brand primary const OMV_NAVY_DEEP = '#04193b'; // deeper / fills const OMV_NAVY_HI = '#1d4a8f'; // ui highlight (active states) const OMV_BLUE_GLOW = '#3b7dd8'; // bright signal accent for live indicators const v6 = { canvas: '#06080c', surface: '#0c0f15', surfaceHi: '#11151d', inset: '#04060a', hair: 'rgba(238,232,222,0.07)', hairBright: 'rgba(238,232,222,0.14)', text: '#eef0f3', textDim: '#bdc1c9', mute: '#8a8f99', faint: '#4d525c', danger: '#e54545', warn: '#e5b94a', ok: '#5bba6f', mono: { fontFamily: '"JetBrains Mono", monospace' }, brand: { fontFamily: '"Helvetica Neue", Helvetica, Arial, sans-serif', letterSpacing: 6, fontWeight: 500 }, }; // Shared data (from v6-data.jsx) const { DETECTIONS, PRIORITY, STATUS } = window; // Hold-to-jog hook (local to V6 to avoid scope collisions with V4) function useV6Jog() { const [held, setHeld] = React.useState(null); const timer = React.useRef(null); const start = (id) => { setHeld(id); let n = 0; timer.current = setInterval(() => { n++; }, 100); }; const stop = () => { setHeld(null); if (timer.current) { clearInterval(timer.current); timer.current = null; } }; return { held, start, stop }; } // ─── Argus Logo (4-arrow camera shutter — provided artwork) ────────── function ArgusLogo({ size = 24, color = '#fff', bg = v6.surface }) { // Geometry in 64×64 viewBox: rounded L brackets at corners act as // arrowheads; diagonal shafts run from the iris out to each bracket; // camera-shutter iris sits in the center. const shaft = 4.2; const headW = 5.2; // Shaft endpoints: bracket inner-corner (~10,10) → iris ring (~23,23) return ( {/* Diagonal arrow shafts (drawn first so brackets cap them) */} {/* 4 rounded-corner L brackets — outer corner rounded, arm tips square */} {/* Iris — outer ring (clears the shafts with bg gap), inner shutter */} {/* 6-blade pinwheel shutter (white wedges separate the blades) */} {[0, 60, 120, 180, 240, 300].map(deg => ( ))} {/* Center dot */} ); } // ─── Header ────────────────────────────────────────────────────────── function V6Header() { const statuses = [ { key: 'esp32', label: 'ESP32 Motor Controller', detail: '192.168.4.1 · -52 dBm', state: 'ok' }, { key: 'pi', label: 'Raspberry Pi', detail: '29.7 fps stream · -42 dBm', state: 'ok' }, { key: 'motors', label: 'Motors', detail: '4 cables · 0.42 A', state: 'ok' }, { key: 'ir', label: 'IR Sensor', detail: 'Calibrating · 24.0°C ambient', state: 'warn' }, ]; const [hovered, setHovered] = React.useState(null); return (
{/* Brand */}
ARGUS
THERMAL INSPECTION · OMV
{/* Mission center */}
MISSIONOMV-A · GAS DISTRIBUTION HUB 4 · SESSION47 · 14:22:08 UTC
{/* Status icons */}
{statuses.map(s => { const color = s.state === 'ok' ? v6.ok : s.state === 'warn' ? v6.warn : v6.danger; const icon = s.key === 'esp32' || s.key === 'motors' ? : s.key === 'pi' ? : ; return (
setHovered(s.key)} onMouseLeave={() => setHovered(null)} style={{ position: 'relative', display: 'flex', alignItems: 'center', justifyContent: 'center', width: 34, height: 34, cursor: 'pointer', background: hovered === s.key ? v6.surfaceHi : 'transparent', color: v6.text }}> {icon}
{hovered === s.key && (
{s.label}
{s.detail}
)}
); })}
{/* E-stop, hangs past the bar */}
); } // ─── Coverage block in right rail ──────────────────────────────────── function V6CoverageBlock({ onAnomalyHover, anomalies, hoverAnomaly }) { return (
Coverage 800 × 800 mm
{/* Square map on the left */}
{hoverAnomaly && (
{hoverAnomaly.id} · {hoverAnomaly.temp}
PASS {hoverAnomaly.pass} · {hoverAnomaly.time}
)}
{/* Vertically-stacked stats on the right */}
{[ ['SWEPT', '42%', v6.text], ['FLAGGED', '02', '#ff7070'], ['ETA', '05:51', v6.text], ].map(([k, v, c]) => (
{k}
{v}
))}
); } // Swept region map (same algorithm as V4/V5 but using OMV navy) function V6SweptCoverage({ progress = 0.42, anomalies = [], onAnomalyHover, w = 240, h = 240 }) { const rows = 6; const margin = 6; const innerW = w - margin * 2; const innerH = h - margin * 2; const rowH = innerH / rows; const head = progress * rows; const fullRows = Math.floor(head); const partial = head - fullRows; const goingRight = fullRows % 2 === 0; const headX = margin + (goingRight ? partial * innerW : (1 - partial) * innerW); const headY = margin + fullRows * rowH + rowH / 2; return ( {/* swept rows */} {Array.from({ length: fullRows }).map((_, r) => ( ))} {partial > 0 && ( )} {/* anomalies */} {anomalies.map((a, i) => ( onAnomalyHover?.(a)} onMouseLeave={() => onAnomalyHover?.(null)}> ))} {/* head */} ); } // ─── Live inspection details panel ──────────────────────────────────── function V6InspectionDetails({ status, onStart, onPauseResume, onStop }) { const running = status === 'running'; const paused = status === 'paused'; const idle = status === 'idle'; const progress = idle ? 0 : 0.42; const D = DETECTIONS[0]; const anomCount = DETECTIONS.filter(d => d.status === 'new' || d.status === 'acknowledged').length; const recent = [...DETECTIONS].filter(d => d.priority === 'critical' || d.priority === 'high').slice(0, 2); const pillColor = running ? v6.ok : paused ? v6.warn : v6.mute; const pillLabel = running ? 'AUTONOMOUS' : paused ? 'PAUSED' : 'READY'; const title = running ? 'SCAN ACTIVE' : paused ? 'STANDING BY' : 'READY TO SCAN'; const subline = idle ? 'AWAITING START' : 'PASS 04 OF 12  ·  CELL 40 OF 96'; return (
Inspection {pillLabel}
{/* Title + status (A1 voice) */}
{title}
{subline}
{/* Big progress number */}
{Math.round(progress * 100)} %
ELAPSED {idle ? '——:——' : '04:18'}
ETA {idle ? '——:——' : '05:51'}
{/* Live readouts — single 4-col row */}
{[ ['X', String(D.location.x), 'cm'], ['Y', String(D.location.y), 'cm'], ['Z', String(D.location.z), 'cm'], ['ANOM', String(anomCount).padStart(2, '0'), ''], ].map(([k, val, unit], i) => (
0 ? `1px solid ${v6.hair}` : 'none', }}>
{k}
{val} {unit && {unit}}
))}
{/* Recent anomalies list */}
Recent anomalies
{recent.map((d, i) => { const a = { id: `A${i + 1}`, pass: d.pass, temp: d.temp, time: d.time, coords: `X ${d.location.x} Y ${d.location.y}` }; return (
{a.id} {a.temp}
{a.coords} · {a.time}
P{a.pass}
); })}
{/* Inspection controls */}
{idle ? ( ) : ( )}
); } // ─── Tab toggle (between Inspection and Manual) ───────────────────── function V6TabToggle({ active, onChange }) { return (
{[ { key: 'inspection', label: 'INSPECTION' }, { key: 'manual', label: 'MANUAL' }, ].map(t => { const isActive = active === t.key; return ( ); })}
); } // ─── New manual control panel (inspiration-style buttons) ───────────── function V6ManualPanel({ onResume }) { const [speed, setSpeed] = React.useState(45); const [zPos, setZPos] = React.useState(62); const jog = useV6Jog(); return (
{/* Status header + hint */}
Control AUTONOMOUS PAUSED
TAP TO JOG · HOLD FOR CONTINUOUS
{/* Position readout — compact single inline row */}
{[ ['X', '0842'], ['Y', '0314'], ['Z', '1280'], ].map(([axis, value], i) => (
0 ? 12 : 0, borderLeft: i > 0 ? `1px solid ${v6.hair}` : 'none', }}>
{axis} · MM
{value}
))}
{/* Controls — X/Y pad + Z column */}
Z UP
Z DN
{/* Speed slider */}
Speed {speed}%
setSpeed(+e.target.value)} style={{ position: 'absolute', inset: 0, opacity: 0, cursor: 'pointer', width: '100%' }} />
{/* Resume autonomous */}
); } // Pill-style jog button (rounded rectangle, subtle fill) function V6PillBtn({ id, jog, dir, width, height }) { const isHeld = jog.held === id; const arrow = { up: 'M5 14 L10 6 L15 14 Z', down: 'M5 6 L15 6 L10 14 Z', left: 'M14 5 L14 15 L6 10 Z', right: 'M6 5 L6 15 L14 10 Z', }[dir]; return ( ); } // Center "XY" button (home) function V6HomeBtn({ id, jog }) { const isHeld = jog.held === id; return ( ); } // Vertical Z position bar — draggable function V6ZBar({ value, onChange }) { const ref = React.useRef(null); const dragging = React.useRef(false); const update = React.useCallback((e) => { if (!ref.current) return; const rect = ref.current.getBoundingClientRect(); const y = (e.touches ? e.touches[0].clientY : e.clientY) - rect.top; const pct = Math.max(0, Math.min(100, 100 - (y / rect.height) * 100)); onChange(Math.round(pct)); }, [onChange]); React.useEffect(() => { const move = (e) => { if (dragging.current) update(e); }; const up = () => { dragging.current = false; }; window.addEventListener('mousemove', move); window.addEventListener('mouseup', up); window.addEventListener('touchmove', move); window.addEventListener('touchend', up); return () => { window.removeEventListener('mousemove', move); window.removeEventListener('mouseup', up); window.removeEventListener('touchmove', move); window.removeEventListener('touchend', up); }; }, [update]); return (
{ dragging.current = true; update(e); }} onTouchStart={(e) => { dragging.current = true; update(e); }} style={{ width: 24, height: 48, background: 'rgba(0,0,0,0.4)', border: '1px solid rgba(255,255,255,0.06)', borderRadius: 4, position: 'relative', cursor: 'ns-resize', margin: '4px 0', }} > {/* Fill */}
{/* Handle */}
{/* Tick lines */}
{[25, 50, 75].map(p => (
))}
); } // ─── Right rail ────────────────────────────────────────────────────── function V6RightRail({ activeTab, onTabChange, status, onStart, onPauseResume, onStop }) { const [hoverAnomaly, setHoverAnomaly] = React.useState(null); const anomalies = [ { id: 'A1', x: 0.32, y: 0.72, temp: '64.2°C', pass: '012', time: '14:18' }, { id: 'A2', x: 0.18, y: 0.30, temp: '38.4°C', pass: '009', time: '14:00' }, ]; return (
{activeTab === 'inspection' ? : onTabChange('inspection')} /> }
); } // ─── Hero feed with light HUD + manual FAB ─────────────────────────── function V6HeroFeed() { const [mode, setMode] = React.useState('thermal'); const D = DETECTIONS[0]; const avg = ((D.ambient + D.tempVal) / 2); return (
{/* A1: corner brackets */} {/* Mode toggle */}
{['thermal', 'normal'].map(m => ( ))}
{/* Anomaly live banner */}
ANOMALY · {D.temp} · LIVE
{/* Temp tape — top left */}
MIN{D.ambient.toFixed(1)}°C AVG{avg.toFixed(1)}°C MAX{D.tempVal.toFixed(1)}°C
IRON
{/* A1: tick marks at min / avg / max */}
{[ { v: D.ambient, label: String(Math.round(D.ambient)) }, { v: avg, label: String(Math.round(avg)) }, { v: D.tempVal, label: String(Math.round(D.tempVal)) }, ].map((t, i) => { const pct = (t.v / 50) * 100; return (
{t.label}
); })}
50°C
{/* Position breadcrumb — bottom left, above FAB */}
X {D.location.x} Y {D.location.y} Z {D.location.z} cm
{/* REC indicator — bottom-right, balancing the position breadcrumb */}
REC · 21:58:42 29.7 fps
); } // ─── A1 corner brackets (hairline overlay on the hero feed) ───────── function V6FeedCorners() { const L = 14; const o = 14; const arms = [ { x: o, y: o, d: 'M0 0 L14 0 M0 0 L0 14' }, { x: `calc(100% - ${o + L}px)`, y: o, d: 'M14 0 L0 0 M14 0 L14 14' }, { x: o, y: `calc(100% - ${o + L}px)`, d: 'M0 14 L0 0 M0 14 L14 14' }, { x: `calc(100% - ${o + L}px)`, y: `calc(100% - ${o + L}px)`, d: 'M14 14 L0 14 M14 14 L14 0' }, ]; return (
{arms.map((a, i) => ( ))}
); } // ─── Detection card (A1: cleaner — left accent border, no status pill) ── function V6DetectionCard({ d, onClick }) { const pri = PRIORITY[d.priority]; return (
{ e.currentTarget.style.background = v6.surfaceHi; }} onMouseLeave={(e) => { e.currentTarget.style.background = v6.inset; }} > {/* Top: priority + temp */}
{pri.label} {d.temp}
{/* Past + Current thumbs */}
PAST
CURRENT
{/* Area + time */}
{d.area} {d.time}
); } // ─── History strip — CRITICAL + HIGH only, with "+N more" chip ─────── function V6History({ onOpenDetail }) { const sorted = [...DETECTIONS].sort((a, b) => (b.date + ' ' + b.time).localeCompare(a.date + ' ' + a.time)); const visible = sorted.filter(d => d.priority === 'critical' || d.priority === 'high'); const today = sorted[0]?.date; const todayCount = sorted.filter(d => d.date === today).length; return (
Detections {todayCount} LEAKS TODAY · SHOWING CRITICAL + HIGH
{visible.map(d => ( onOpenDetail(d)} /> ))}
); } // ─── Alarm modal ───────────────────────────────────────────────────── function V6AlarmModal({ detection, onAcknowledge, onSwitchManual }) { const pri = PRIORITY[detection.priority]; const isCritical = detection.priority === 'critical'; return (
{/* Header */}
{pri.label} · LEAK DETECTED
{detection.id} · PASS {detection.pass} · {detection.time}
{!isCritical && ( )}
{/* Body */}
HOTSPOT
TEMPERATURE
{detection.tempVal.toFixed(1)} °C {detection.delta}
{[ ['LOCATION', `X ${detection.location.x} Y ${detection.location.y}`], ['CONFIDENCE', `${Math.round(detection.confidence * 100)}%`], ['AREA', detection.area], ['STATUS', STATUS[detection.status].label], ].map(([k, v]) => (
{k}
{v}
))}
{/* Pause banner */}
AUTONOMOUS SCAN PAUSED · AWAITING ACKNOWLEDGEMENT
{/* Actions */}
{isCritical ? ( <> ) : ( )}
); } // ─── Root ───────────────────────────────────────────────────────────── function V6Argus() { const [activeTab, setActiveTab] = React.useState('inspection'); const [status, setStatus] = React.useState('running'); // land mid-scan const [demoFired, setDemoFired] = React.useState(true); // suppress auto-fire; we pre-arm the alarm const [alarm, setAlarm] = React.useState(null); // start on base view — no alarm popup on load const [showDetail, setShowDetail] = React.useState(false); const [selectedDetection, setSelectedDetection] = React.useState(null); const isManual = activeTab === 'manual'; // Demo: fire alarm 2.5s after inspection starts running (once per session) React.useEffect(() => { if (status !== 'running' || demoFired) return; const t = setTimeout(() => { setAlarm(DETECTIONS[0]); setDemoFired(true); }, 2500); return () => clearTimeout(t); }, [status, demoFired]); const HistoryDetailPage = window.V6HistoryDetailPage; return (
setStatus('running')} onPauseResume={() => setStatus(status === 'running' ? 'paused' : 'running')} onStop={() => { setStatus('idle'); setDemoFired(false); }} />
{ setSelectedDetection(d); setShowDetail(true); }} /> {alarm && ( setAlarm(null)} onSwitchManual={() => { setAlarm(null); setActiveTab('manual'); }} /> )} {showDetail && HistoryDetailPage && ( { setShowDetail(false); setSelectedDetection(null); }} /> )}
); } window.V6Argus = V6Argus; Object.assign(window, { v6, OMV_NAVY, OMV_NAVY_DEEP, OMV_NAVY_HI, OMV_BLUE_GLOW });