// ============================================================= // page-markets.jsx — public market data showcase at /#/markets // // The /#/account dashboard has rich fuel + refinery + oil panels // gated behind sign-in. fuel_signals, refinery_signals, refineries // are all anon-readable, so this page surfaces the same intelligence // publicly — proof of the data layer behind the platform. // ============================================================= const { useState: useStateMK, useEffect: useEffectMK, } = React; function MarketsPage({ onNav }) { const [fuel, setFuel] = useStateMK([]); const [refSignals, setRefSignals] = useStateMK([]); const [refineries, setRefineries] = useStateMK([]); const [fred, setFred] = useStateMK([]); const [loading, setLoading] = useStateMK(true); useEffectMK(() => { let alive = true; if (!window.SI_DB || !window.SI_DB.raw) { setLoading(false); return; } (async () => { try { const [f, rs, rf, fi] = await Promise.all([ window.SI_DB.raw.select("fuel_signals", "select=*&order=period.desc&limit=400"), window.SI_DB.raw.select("refinery_signals", "select=*&order=period.desc&limit=200"), window.SI_DB.raw.select("refineries", "select=name,operator,capacity_kbpd,padd,city,state&order=capacity_kbpd.desc&limit=30"), window.SI_DB.raw.select( "freight_indices", "select=series,value_num,period,source,notes&source=like.fred:*&order=period.desc&limit=400" ).catch(() => []), ]); if (!alive) return; setFuel(Array.isArray(f) ? f : []); setRefSignals(Array.isArray(rs) ? rs : []); setRefineries(Array.isArray(rf) ? rf : []); setFred(Array.isArray(fi) ? fi : []); } catch {} finally { if (alive) setLoading(false); } })(); return () => { alive = false; }; }, []); // Group freight_indices rows by series → sorted observations (newest first) const fredBySeries = React.useMemo(() => { const out = {}; for (const r of fred) { const s = r.series; if (!s) continue; (out[s] = out[s] || []).push(r); } for (const k of Object.keys(out)) { out[k].sort((a, b) => (b.period || "").localeCompare(a.period || "")); } return out; }, [fred]); // Compute latest value + 4-period delta % for a series (4-period roughly = // 1 month for weekly series, 4 months for monthly series — close enough for // a "is this accelerating or decelerating?" signal). const fredCard = (seriesName, label, unit, fmt = "num") => { const obs = fredBySeries[seriesName]; if (!obs || obs.length === 0) return null; const latest = parseFloat(obs[0].value_num); const ref = obs.length >= 5 ? parseFloat(obs[4].value_num) : null; const pct = (ref && ref !== 0) ? ((latest - ref) / ref) * 100 : null; const formatted = fmt === "thousand" ? `${latest.toLocaleString(undefined, { maximumFractionDigits: 0 })}` : fmt === "percent" ? `${latest.toFixed(1)}%` : fmt === "money" ? `$${latest.toLocaleString(undefined, { maximumFractionDigits: 0 })}` : latest.toLocaleString(undefined, { maximumFractionDigits: 1 }); return { label, unit, formatted, period: obs[0].period, pct }; }; const latest = (s) => fuel.find(f => f.series === s && f.region !== "futures-month-ago"); const monthAgo = (s) => fuel.find(f => f.series === s && f.region === "futures-month-ago"); function MoMTag({ series }) { const cur = latest(series); const old = monthAgo(series); if (!cur || !old) return null; const a = parseFloat(cur.value_num); const b = parseFloat(old.value_num); if (!a || !b) return null; const pct = ((a - b) / b) * 100; const dir = pct > 0.5 ? "up" : pct < -0.5 ? "down" : "flat"; const arrow = dir === "up" ? "▲" : dir === "down" ? "▼" : "—"; const color = dir === "up" ? "oklch(0.55 0.18 25)" : dir === "down" ? "oklch(0.50 0.14 145)" : "var(--ink-soft)"; return ( {arrow} {Math.abs(pct).toFixed(1)}% MoM ); } const wti = latest("wti_crude_futures"); const brent = latest("brent_crude_futures"); const ulsd = latest("ulsd_diesel_futures"); const rbob = latest("rbob_gas_futures"); const retailUS = latest("diesel_retail_us"); const regions = [ ["west", "West Coast"], ["east", "East Coast"], ["gulf", "Gulf Coast"], ["midwest", "Midwest"], ["rocky", "Rocky Mtn"] ].map(([r, name]) => ({ ...latest(`diesel_retail_${r}`), name })); // Implied retail diesel from ULSD futures: rough rule of thumb // retail = futures wholesale + ~$1.10/gal (taxes + dist + retail margin) const implied = ulsd ? parseFloat(ulsd.value_num) + 1.10 : null; const actualUS = retailUS ? parseFloat(retailUS.value_num) : null; const gap = (implied != null && actualUS != null) ? actualUS - implied : null; // Refinery utilization — find the most recent reading per scope const utilByScope = {}; refSignals.filter(r => r.signal_type === "utilization_pct").forEach(r => { if (!utilByScope[r.scope] || r.period > utilByScope[r.scope].period) { utilByScope[r.scope] = r; } }); const utilizationCards = ["us", "padd-1", "padd-2", "padd-3", "padd-4", "padd-5"] .map(s => ({ scope: s, signal: utilByScope[s] })) .filter(x => x.signal); return (
Live market data · refreshed daily

The freight market, priced in real time.

Crude futures, diesel retail, the futures-vs-pump gap, refinery utilization across all five PADDs, and the 30 highest-capacity US refineries — pulled from federal regulatory feeds and refreshed daily. The numbers shippers, carriers, and brokers use to price freight and predict fuel-surcharge moves.

{/* Fuel + oil futures */}
Fuel & oil markets Futures vs pump · the gap predicts fuel-surcharge moves
{loading ? (
Loading market data…
) : (
{wti && (
WTI crude · futures
${parseFloat(wti.value_num).toFixed(2)}
/ barrel · CL=F
)} {brent && (
Brent crude · futures
${parseFloat(brent.value_num).toFixed(2)}
/ barrel · East-Coast benchmark
)} {wti && brent && (
Brent–WTI spread
5 ? "oklch(0.55 0.18 25)" : "var(--ink)" }}> ${(parseFloat(brent.value_num) - parseFloat(wti.value_num)).toFixed(2)}
{(parseFloat(brent.value_num) - parseFloat(wti.value_num)) > 5 ? "wide — East Coast refining cost rising" : "tight — domestic crude advantage"}
)} {ulsd && (
ULSD diesel · futures
${parseFloat(ulsd.value_num).toFixed(3)}
/ gallon · HO=F
)} {rbob && (
RBOB gasoline · futures
${parseFloat(rbob.value_num).toFixed(3)}
/ gallon · RB=F
)} {retailUS && (
Diesel retail · US average
${parseFloat(retailUS.value_num).toFixed(3)}
/ gallon · DOE weekly · {retailUS.period}
)} {gap != null && (
Futures-to-pump gap
0.30 ? "oklch(0.55 0.18 25)" : "oklch(0.50 0.14 145)" }}> {gap > 0 ? "+" : ""}${gap.toFixed(2)}
actual vs implied · {gap > 0.20 ? "pump above expectation" : gap < -0.20 ? "pump below expectation" : "in line"}
)}
)}
{/* Regional retail diesel */} {regions.some(r => r.value_num) && (
Regional retail diesel · DOE weekly
$/gallon by PADD region: {regions.filter(r => r.value_num).map(r => (
{r.name} ${parseFloat(r.value_num).toFixed(3)}
))}
)} {/* Refinery utilization across PADDs */} {utilizationCards.length > 0 && (
US refinery utilization · weekly EIA % of nameplate capacity in operation
{utilizationCards.map(({ scope, signal }) => { const v = parseFloat(signal.value_num); const label = scope === "us" ? "US Total" : scope === "padd-1" ? "PADD 1 · East" : scope === "padd-2" ? "PADD 2 · Midwest" : scope === "padd-3" ? "PADD 3 · Gulf" : scope === "padd-4" ? "PADD 4 · Rockies" : scope === "padd-5" ? "PADD 5 · West" : scope; const accent = v >= 92 ? "oklch(0.55 0.18 50)" : v >= 85 ? "oklch(0.55 0.16 145)" : "oklch(0.55 0.18 25)"; return (
{label}
{v.toFixed(1)}%
Period {signal.period}
); })}
)} {/* Top 30 US refineries */} {refineries.length > 0 && (
Top US refineries by capacity {refineries.length} largest · kbpd nameplate
{refineries.map((r, i) => (
{r.name} {r.operator || "—"} {r.capacity_kbpd ? r.capacity_kbpd.toLocaleString() : "—"}
))}
kbpd = thousand barrels per day · nameplate capacity from federal regulatory filings
)} {/* Macro freight indicators (FRED) — rail, truck, labor */} {(() => { const groups = [ { heading: "Rail volume", sub: "AAR Class I weekly carloads + intermodal", cards: [ fredCard("rail_carloads_weekly", "Carloads", "k carloads/week", "thousand"), fredCard("rail_intermodal_weekly", "Intermodal units", "k units/week", "thousand"), ].filter(Boolean), }, { heading: "Truck activity", sub: "ATA tonnage · PPI · industrial production", cards: [ fredCard("ata_truck_tonnage", "ATA Truck Tonnage Index", "2015=100"), fredCard("ppi_long_distance_truck", "PPI Long-Distance Trucking", "Dec-2003=100"), fredCard("ppi_general_freight_truck", "PPI General Freight", "1984=100"), fredCard("ind_prod_truck_transport", "Ind. Production: Trucking", "2017=100"), fredCard("ind_prod_auto_assembly", "Auto Assembly (auto-pull)", "2017=100"), ].filter(Boolean), }, { heading: "Driver labor market", sub: "JOLTS · CES — transportation + warehousing sector", cards: [ fredCard("jolts_jobopenings_transp", "Job openings rate", "%", "percent"), fredCard("jolts_quits_transp", "Quits rate", "%", "percent"), fredCard("jolts_layoffs_transp", "Layoffs rate", "%", "percent"), fredCard("jolts_hires_transp", "Hires rate", "%", "percent"), fredCard("ces_payrolls_truck_transport", "Trucking payrolls", "thousands", "thousand"), fredCard("ces_payrolls_warehouse_storage","Warehouse payrolls", "thousands", "thousand"), ].filter(Boolean), }, { heading: "Demand proxies", sub: "Real retail · e-commerce · unemployment · prices", cards: [ fredCard("real_retail_sales", "Real retail + food", "$M"), fredCard("ecommerce_retail_sales","E-commerce retail", "$M"), fredCard("unemployment_rate", "Unemployment rate", "%", "percent"), fredCard("pce_price_index", "PCE Price Index", "2017=100"), ].filter(Boolean), }, ].filter(g => g.cards.length > 0); if (groups.length === 0) return null; return (
Macro freight indicators · FRED Rail · truck · labor · demand

Federal Reserve macro series scoped to freight-relevant categories. Each card shows the latest published value plus the 4-period % change — JOLTS quits trending up means driver wage pressure; ATA tonnage diverging from rail carloads is a mode-shift signal.

{groups.map(g => (

{g.heading}

{g.sub}
{g.cards.map((c, i) => { const dir = c.pct == null ? null : (c.pct > 0.5 ? "up" : c.pct < -0.5 ? "down" : "flat"); const arrow = dir === "up" ? "▲" : dir === "down" ? "▼" : dir === "flat" ? "—" : null; const color = dir === "up" ? "oklch(0.50 0.14 145)" : dir === "down" ? "oklch(0.55 0.18 25)" : "var(--ink-soft)"; return (
{c.label}
{c.formatted}
{c.unit} · {c.period}
{arrow && (
{arrow} {Math.abs(c.pct).toFixed(1)}% / 4-period
)}
); })}
))}

Source: Federal Reserve Economic Data (FRED), api.stlouisfed.org. Refreshed daily.

); })()} {/* Cross-links — push visitors into other surfaces */}
Connected surfaces Markets · into the rest of the graph
{ e.preventDefault(); onNav("clarity"); }} style={{ textDecoration: "none", color: "inherit", padding: 16, border: "1px solid var(--rule)", borderRadius: 6, background: "#fff", display: "block" }}>
Clarity Dashboard →
The Bloomberg-style data wall: live signal ticker, hot lanes, enterprise shippers, flagged carriers.
{ e.preventDefault(); onNav("rates"); }} style={{ textDecoration: "none", color: "inherit", padding: 16, border: "1px solid var(--rule)", borderRadius: 6, background: "#fff", display: "block" }}>
Lane Rates →
$/mi heat bands and headhaul-vs-backhaul asymmetry — the math that decides what a load pays.
{ e.preventDefault(); onNav("account"); }} style={{ textDecoration: "none", color: "inherit", padding: 16, border: "1px solid var(--ink)", borderRadius: 6, background: "var(--ink)", color: "var(--paper)", display: "block" }}>
Full operations dashboard →
Sign in for the live operator-network feed, weather strip, port pulse, gravity map, and per-metro signals.
); } window.MarketsPage = MarketsPage;