[{"_1":2,"_3":-5,"_4":-5},"loaderData",{"_5":6,"_7":8,"_9":10},"actionData","errors","root",{"_152":153,"_154":155},"routes/_app.x.$handle.$name",{"_11":12,"_13":14,"_15":16,"_18":19,"_17":-7,"_115":-5,"_20":116,"_22":117,"_118":119,"_120":121,"_25":122,"_24":-5,"_123":-5,"_124":-5,"_125":53,"_126":127,"_128":44,"_129":-5,"_130":-5,"_131":132},"routes/_app.x.$handle.$name.branch.$branch.code.$",{"_11":12,"_13":14,"_15":16,"_17":-7,"_18":19,"_20":21,"_22":23,"_24":-7,"_25":26,"_27":-5,"_28":-5,"_29":-5,"_30":-5,"_31":-5},"handle","ziggyware","name","Gemini-Trader-5","branchName","main","version","path","","project",{"_33":61,"_13":14,"_45":62,"_63":-5,"_64":53,"_65":66,"_67":66,"_68":-5,"_69":-5,"_70":71,"_72":-5,"_73":53,"_74":-5,"_75":-5,"_76":77,"_78":79,"_80":-5,"_81":-5,"_82":-5,"_83":-5,"_84":85,"_86":85,"_87":88,"_89":88,"_90":88,"_91":85,"_92":85,"_93":94,"_95":96,"_97":98,"_99":53},"tree",[56],"file","contents",[32],"upstream","pull","ahead","behind","envVars",{"_33":34,"_13":35,"_36":37,"_38":-5,"_39":40,"_41":42,"_43":44,"_45":46,"_17":47,"_48":49,"_50":51,"_52":53,"_54":-5,"_18":55},"id","5be627a0-3e47-11f1-8309-42b51c65c3df","main.ts","fileId","1ad03192-2e49-11f1-a975-42dde27851f2","parentId","branchId","1acc2a8e-2e49-11f1-a975-42dde27851f2","branchVersion",11,"latest",true,"createdAt",["D",1776861163039],10,"fileType","http","content","/** @jsxImportSource https://esm.sh/react@18.2.0 */\nimport { createRoot } from \"https://esm.sh/react-dom@18.2.0/client\";\nimport { useState, useEffect, useRef, useCallback, useMemo } from \"https://esm.sh/react@18.2.0\";\n\n// ═══════════════════════════════════════════════════════════════\n// TRADING FORGE — Industrial Perceptual Instrument\n// Continuous-field temporal resolution with structural steel UI\n// ═══════════════════════════════════════════════════════════════\n\nconst THEME = {\n bg: \"#080a0f\",\n panel: \"#0d1017\",\n panelEdge: \"#161b26\",\n rivet: \"#1c2233\",\n rivetHighlight: \"#2a3348\",\n steel: \"#0f1219\",\n accent: \"#ff6b35\",\n accentDim: \"#ff6b3540\",\n cyan: \"#00d4ff\",\n cyanDim: \"#00d4ff30\",\n green: \"#00ff88\",\n greenDim: \"#00ff8840\",\n red: \"#ff3366\",\n redDim: \"#ff336640\",\n text: \"#a8adb8\",\n textBright: \"#d0d4dc\",\n textDim: \"#5a6070\",\n gridLine: \"#141924\",\n sessionLine: \"#ff6b3560\",\n volumeProfile: \"#00d4ff18\",\n volumeProfileEdge: \"#00d4ff40\",\n crosshair: \"#ffffff30\",\n};\n\nconst TIMEFRAMES = [\n { label: \"1m\", seconds: 60, gemini: \"1m\" },\n { label: \"5m\", seconds: 300, gemini: \"5m\" },\n { label: \"15m\", seconds: 900, gemini: \"15m\" },\n { label: \"30m\", seconds: 1800, gemini: \"30m\" },\n { label: \"1H\", seconds: 3600, gemini: \"1hr\" },\n { label: \"6H\", seconds: 21600, gemini: \"6hr\" },\n { label: \"1D\", seconds: 86400, gemini: \"1day\" },\n];\n\nconst PAIRS = {\n \"Major\": [\"BTCUSD\", \"ETHUSD\", \"SOLUSD\", \"DOGEUSD\", \"AVAXUSD\", \"LINKUSD\"],\n \"Alt\": [\"MATICUSD\", \"AAVEUSD\", \"UNIUSD\", \"COMPUSD\", \"MKRUSD\", \"SNXUSD\"],\n \"Stable\": [\"GUSDUSD\", \"DAIUSD\"],\n \"Cross\": [\"ETHBTC\", \"SOLBTC\", \"SOLETH\", \"LINKBTC\", \"DOGEBTC\"],\n};\n\nconst TARGET_CANDLES = 30;\nconst SESSION_HOURS = 4;\nconst VOLUME_PROFILE_BINS = 24;\nconst MA_DEFAULTS = [\n { period: 9, color: \"#ff6b35\", type: \"EMA\", visible: true },\n { period: 21, color: \"#00d4ff\", type: \"SMA\", visible: true },\n { period: 50, color: \"#9966ff\", type: \"EMA\", visible: true },\n];\nconst RSI_PERIOD = 14;\n\nconst clamp = (v, lo, hi) => Math.max(lo, Math.min(hi, v));\nconst lerp = (a, b, t) => a + (b - a) * t;\nconst smoothstep = (t) => t * t * (3 - 2 * t);\nconst formatPrice = (p, decimals = 2) => {\n if (p === undefined || p === null || isNaN(p)) return \"—\";\n if (p >= 1e6) return (p / 1e6).toFixed(2) + \"M\";\n if (p >= 1e4) return (p / 1e3).toFixed(1) + \"K\";\n if (p < 0.01) return p.toFixed(6);\n if (p < 1) return p.toFixed(4);\n return p.toFixed(decimals);\n};\nconst formatTime = (ts) => {\n const d = new Date(ts);\n return d.toLocaleTimeString([], { hour: \"2-digit\", minute: \"2-digit\" });\n};\nconst formatDate = (ts) => {\n const d = new Date(ts);\n return d.toLocaleDateString([], { month: \"short\", day: \"numeric\" });\n};\n\nconst computeEMA = (data, period) => {\n if (!data.length) return [];\n const k = 2 / (period + 1);\n const result = [data[0]];\n for (let i = 1; i < data.length; i++) {\n result.push(data[i] * k + result[i - 1] * (1 - k));\n }\n return result;\n};\n\nconst computeSMA = (data, period) => {\n const result = [];\n for (let i = 0; i < data.length; i++) {\n if (i < period - 1) { result.push(null); continue; }\n let sum = 0;\n for (let j = i - period + 1; j <= i; j++) sum += data[j];\n result.push(sum / period);\n }\n return result;\n};\n\nconst computeRSI = (closes, period = 14) => {\n const rsi = [];\n if (closes.length < period + 1) return closes.map(() => 50);\n let gainSum = 0, lossSum = 0;\n for (let i = 1; i <= period; i++) {\n const delta = closes[i] - closes[i - 1];\n if (delta > 0) gainSum += delta;\n else lossSum -= delta;\n }\n let avgGain = gainSum / period;\n let avgLoss = lossSum / period;\n for (let i = 0; i < period; i++) rsi.push(50);\n const rs = avgLoss === 0 ? 100 : avgGain / avgLoss;\n rsi.push(100 - 100 / (1 + rs));\n for (let i = period + 1; i < closes.length; i++) {\n const delta = closes[i] - closes[i - 1];\n avgGain = (avgGain * (period - 1) + Math.max(delta, 0)) / period;\n avgLoss = (avgLoss * (period - 1) + Math.max(-delta, 0)) / period;\n const r = avgLoss === 0 ? 100 : avgGain / avgLoss;\n rsi.push(100 - 100 / (1 + r));\n }\n return rsi;\n};\n\nconst aggregateCandles = (raw, factor) => {\n if (factor <= 1 || !raw.length) return raw;\n const n = Math.ceil(factor);\n const result = [];\n for (let i = 0; i < raw.length; i += n) {\n const slice = raw.slice(i, Math.min(i + n, raw.length));\n if (!slice.length) break;\n result.push({\n time: slice[0].time,\n open: slice[0].open,\n high: Math.max(...slice.map((c) => c.high)),\n low: Math.min(...slice.map((c) => c.low)),\n close: slice[slice.length - 1].close,\n volume: slice.reduce((s, c) => s + c.volume, 0),\n });\n }\n return result;\n};\n\nconst lerpCandles = (candlesA, candlesB, t) => {\n if (t <= 0 || !candlesB.length) return candlesA;\n if (t >= 1 || !candlesA.length) return candlesB;\n const st = smoothstep(t);\n const longer = candlesA.length >= candlesB.length ? candlesA : candlesB;\n const shorter = candlesA.length >= candlesB.length ? candlesB : candlesA;\n const ratio = shorter.length / longer.length;\n return longer.map((c, i) => {\n const si = Math.min(Math.floor(i * ratio), shorter.length - 1);\n const sc = shorter[si];\n const blend = candlesA.length >= candlesB.length ? st : 1 - st;\n return {\n time: c.time,\n open: lerp(c.open, sc.open, blend),\n high: lerp(c.high, sc.high, blend),\n low: lerp(c.low, sc.low, blend),\n close: lerp(c.close, sc.close, blend),\n volume: lerp(c.volume, sc.volume, blend),\n };\n });\n};\n\nconst Rivet = ({ x, y, size = 6 }) => (\n \n);\n\nconst ScrewHead = ({ x, y, size = 10 }) => (\n \n \n \n);\n\nconst IndustrialPanel = ({ children, style, label, screws = true, glowColor }) => (\n \n {glowColor && (\n \n )}\n {label && (\n \n {label}\n \n )}\n {screws && (\n <>\n \n \n \n )}\n {children}\n \n);\n\nconst HingeBracket = ({ side = \"left\" }) => (\n \n \n \n \n);\n\nconst AngleBracket = () => (\n \n

\n \n

\n \n);\n\nfunction TradingForge() {\n const [pair, setPair] = useState(\"BTCUSD\");\n const [category, setCategory] = useState(\"Major\");\n const [rawCandles, setRawCandles] = useState([]);\n const [zoomLevel, setZoomLevel] = useState(3);\n const [panOffset, setPanOffset] = useState(0);\n const [logScale, setLogScale] = useState(false);\n const [maConfig, setMaConfig] = useState(MA_DEFAULTS);\n const [crosshair, setCrosshair] = useState(null);\n const [drawMode, setDrawMode] = useState(false);\n const [drawings, setDrawings] = useState([]);\n const [drawStart, setDrawStart] = useState(null);\n const [drawPreview, setDrawPreview] = useState(null);\n const [showPairModal, setShowPairModal] = useState(false);\n const [showMAModal, setShowMAModal] = useState(false);\n const [wsConnected, setWsConnected] = useState(false);\n const [lastPrice, setLastPrice] = useState(null);\n const [loading, setLoading] = useState(true);\n const [chartPanel, setChartPanel] = useState(\"vol\");\n const [flashTs, setFlashTs] = useState(0);\n\n const mainCanvasRef = useRef(null);\n const volCanvasRef = useRef(null);\n const rsiCanvasRef = useRef(null);\n const wsRef = useRef(null);\n const animFrameRef = useRef(null);\n const touchRef = useRef({ startDist: 0, startZoom: 0, startX: 0, startPan: 0, mode: null });\n const containerRef = useRef(null);\n const prevZoomRef = useRef(zoomLevel);\n const lerpTRef = useRef(0);\n\n const tfIndex = useMemo(() => {\n const idx = clamp(Math.round(zoomLevel), 0, TIMEFRAMES.length - 1);\n return idx;\n }, [zoomLevel]);\n\n const currentTF = TIMEFRAMES[tfIndex];\n const prevTFIndex = useMemo(() => clamp(Math.round(prevZoomRef.current), 0, TIMEFRAMES.length - 1), []);\n\n const displayCandles = useMemo(() => {\n if (!rawCandles.length) return [];\n const factor = Math.max(1, currentTF.seconds / 60);\n const agg = aggregateCandles(rawCandles, factor);\n const start = Math.max(0, agg.length - TARGET_CANDLES - Math.round(panOffset));\n const end = Math.min(agg.length, start + TARGET_CANDLES);\n return agg.slice(start, end);\n }, [rawCandles, currentTF, panOffset]);\n\n const priceRange = useMemo(() => {\n if (!displayCandles.length) return { min: 0, max: 1, range: 1 };\n let min = Infinity, max = -Infinity;\n displayCandles.forEach((c) => {\n if (c.low < min) min = c.low;\n if (c.high > max) max = c.high;\n });\n const padding = (max - min) * 0.08 || max * 0.01;\n min -= padding;\n max += padding;\n if (logScale) {\n min = Math.max(min, 0.0001);\n max = Math.max(max, min + 0.001);\n }\n return { min, max, range: max - min };\n }, [displayCandles, logScale]);\n\n const toY = useCallback(\n (price, height) => {\n if (logScale) {\n const logMin = Math.log(Math.max(priceRange.min, 0.0001));\n const logMax = Math.log(Math.max(priceRange.max, 0.0002));\n const logP = Math.log(Math.max(price, 0.0001));\n return height - ((logP - logMin) / (logMax - logMin)) * height;\n }\n return height - ((price - priceRange.min) / priceRange.range) * height;\n },\n [priceRange, logScale]\n );\n\n const fromY = useCallback(\n (y, height) => {\n const ratio = (height - y) / height;\n if (logScale) {\n const logMin = Math.log(Math.max(priceRange.min, 0.0001));\n const logMax = Math.log(Math.max(priceRange.max, 0.0002));\n return Math.exp(logMin + ratio * (logMax - logMin));\n }\n return priceRange.min + ratio * priceRange.range;\n },\n [priceRange, logScale]\n );\n\n const sessions = useMemo(() => {\n if (!displayCandles.length) return [];\n const sessionMs = SESSION_HOURS * 3600 * 1000;\n const breaks = [];\n let sessionStart = displayCandles[0].time;\n displayCandles.forEach((c, i) => {\n if (c.time - sessionStart >= sessionMs) {\n breaks.push({ index: i, time: c.time });\n sessionStart = c.time;\n }\n });\n return breaks;\n }, [displayCandles]);\n\n const volumeProfile = useMemo(() => {\n if (!displayCandles.length) return [];\n const profiles = [];\n let startIdx = 0;\n const sessionBreaks = [...sessions.map((s) => s.index), displayCandles.length];\n sessionBreaks.forEach((endIdx) => {\n const slice = displayCandles.slice(startIdx, endIdx);\n if (slice.length < 2) { startIdx = endIdx; return; }\n let lo = Infinity, hi = -Infinity;\n slice.forEach((c) => { lo = Math.min(lo, c.low); hi = Math.max(hi, c.high); });\n const binSize = (hi - lo) / VOLUME_PROFILE_BINS || 1;\n const bins = new Array(VOLUME_PROFILE_BINS).fill(0);\n slice.forEach((c) => {\n const mid = (c.high + c.low) / 2;\n const bin = clamp(Math.floor((mid - lo) / binSize), 0, VOLUME_PROFILE_BINS - 1);\n bins[bin] += c.volume;\n });\n const maxVol = Math.max(...bins, 1);\n profiles.push({ startIdx, endIdx, lo, hi, bins, maxVol, binSize });\n startIdx = endIdx;\n });\n return profiles;\n }, [displayCandles, sessions]);\n\n const maLines = useMemo(() => {\n if (!displayCandles.length) return [];\n const closes = displayCandles.map((c) => c.close);\n return maConfig.map((ma) => {\n if (!ma.visible) return { ...ma, values: [] };\n const values = ma.type === \"EMA\" ? computeEMA(closes, ma.period) : computeSMA(closes, ma.period);\n return { ...ma, values };\n });\n }, [displayCandles, maConfig]);\n\n const rsiValues = useMemo(() => {\n if (!rawCandles.length) return [];\n const factor = Math.max(1, currentTF.seconds / 60);\n const agg = aggregateCandles(rawCandles, factor);\n const closes = agg.map((c) => c.close);\n const fullRsi = computeRSI(closes, RSI_PERIOD);\n const start = Math.max(0, agg.length - TARGET_CANDLES - Math.round(panOffset));\n return fullRsi.slice(start, start + TARGET_CANDLES);\n }, [rawCandles, currentTF, panOffset]);\n\n const fetchCandles = useCallback(async (symbol, tf) => {\n setLoading(true);\n try {\n const url = `https://api.gemini.com/v2/candles/${symbol.toLowerCase()}/${tf}`;\n const resp = await fetch(url);\n if (!resp.ok) throw new Error(`HTTP ${resp.status}`);\n const data = await resp.json();\n const candles = data\n .map(([time, open, high, low, close, volume]) => ({\n time: time,\n open: parseFloat(open),\n high: parseFloat(high),\n low: parseFloat(low),\n close: parseFloat(close),\n volume: parseFloat(volume),\n }))\n .sort((a, b) => a.time - b.time);\n setRawCandles(candles);\n if (candles.length) setLastPrice(candles[candles.length - 1].close);\n } catch (e) {\n console.error(\"Fetch candles failed:\", e);\n }\n setLoading(false);\n }, []);\n\n useEffect(() => {\n fetchCandles(pair, \"1m\");\n const iv = setInterval(() => fetchCandles(pair, \"1m\"), 30000);\n return () => clearInterval(iv);\n }, [pair, fetchCandles]);\n\n useEffect(() => {\n if (wsRef.current) { wsRef.current.close(); wsRef.current = null; }\n setWsConnected(false);\n try {\n const ws = new WebSocket(`wss://api.gemini.com/v1/marketdata/${pair}?trades=true`);\n ws.onerror = () => setWsConnected(false);\n ws.onclose = () => setWsConnected(false);\n ws.onopen = () => setWsConnected(true);\n ws.onmessage = (e) => {\n try {\n const msg = JSON.parse(e.data);\n if (msg.type === \"trade\" || (msg.events && msg.events.some((ev) => ev.type === \"trade\"))) {\n const trades = msg.events ? msg.events.filter((ev) => ev.type === \"trade\") : [msg];\n trades.forEach((t) => {\n const price = parseFloat(t.price);\n if (!isNaN(price)) {\n setLastPrice(price);\n setFlashTs(Date.now());\n }\n });\n }\n } catch {}\n };\n wsRef.current = ws;\n } catch {}\n return () => { if (wsRef.current) wsRef.current.close(); };\n }, [pair]);\n\n const drawMainChart = useCallback(() => {\n const canvas = mainCanvasRef.current;\n if (!canvas || !displayCandles.length) return;\n const ctx = canvas.getContext(\"2d\");\n const W = canvas.width;\n const H = canvas.height;\n const dpr = window.devicePixelRatio || 1;\n ctx.clearRect(0, 0, W, H);\n\n const w = W / dpr;\n const h = H / dpr;\n ctx.save();\n ctx.scale(dpr, dpr);\n\n const candleW = (w - 40) / TARGET_CANDLES;\n const bodyW = Math.max(2, candleW * 0.6);\n const chartLeft = 0;\n const chartRight = w - 52;\n const chartW = chartRight - chartLeft;\n\n ctx.fillStyle = THEME.bg;\n ctx.fillRect(0, 0, w, h);\n\n const nGridLines = 6;\n ctx.strokeStyle = THEME.gridLine;\n ctx.lineWidth = 0.5;\n for (let i = 0; i <= nGridLines; i++) {\n const y = (i / nGridLines) * h;\n ctx.beginPath();\n ctx.moveTo(chartLeft, y);\n ctx.lineTo(chartRight, y);\n ctx.stroke();\n }\n\n sessions.forEach((s) => {\n const x = chartLeft + (s.index / TARGET_CANDLES) * chartW;\n ctx.strokeStyle = THEME.sessionLine;\n ctx.lineWidth = 1;\n ctx.setLineDash([4, 4]);\n ctx.beginPath();\n ctx.moveTo(x, 0);\n ctx.lineTo(x, h);\n ctx.stroke();\n ctx.setLineDash([]);\n });\n\n volumeProfile.forEach((vp) => {\n const xStart = chartLeft + (vp.startIdx / TARGET_CANDLES) * chartW;\n const xEnd = chartLeft + (Math.min(vp.endIdx, TARGET_CANDLES) / TARGET_CANDLES) * chartW;\n const profileW = xEnd - xStart;\n vp.bins.forEach((vol, bi) => {\n const binPrice = vp.lo + bi * vp.binSize;\n const binPriceTop = binPrice + vp.binSize;\n const yBot = toY(binPrice, h);\n const yTop = toY(binPriceTop, h);\n const barW = (vol / vp.maxVol) * profileW * 0.3;\n ctx.fillStyle = THEME.volumeProfile;\n ctx.fillRect(xStart, yTop, barW, yBot - yTop);\n ctx.strokeStyle = THEME.volumeProfileEdge;\n ctx.lineWidth = 0.5;\n ctx.strokeRect(xStart, yTop, barW, yBot - yTop);\n });\n });\n\n displayCandles.forEach((c, i) => {\n const x = chartLeft + (i + 0.5) * (chartW / TARGET_CANDLES);\n const isUp = c.close >= c.open;\n const color = isUp ? THEME.green : THEME.red;\n const dimColor = isUp ? THEME.greenDim : THEME.redDim;\n const oY = toY(c.open, h);\n const cY = toY(c.close, h);\n const hY = toY(c.high, h);\n const lY = toY(c.low, h);\n\n ctx.strokeStyle = color;\n ctx.lineWidth = 1;\n ctx.beginPath();\n ctx.moveTo(x, hY);\n ctx.lineTo(x, lY);\n ctx.stroke();\n\n const top = Math.min(oY, cY);\n const bot = Math.max(oY, cY);\n const bodyH = Math.max(1, bot - top);\n ctx.fillStyle = isUp ? dimColor : color;\n ctx.fillRect(x - bodyW / 2, top, bodyW, bodyH);\n ctx.strokeStyle = color;\n ctx.lineWidth = 0.8;\n ctx.strokeRect(x - bodyW / 2, top, bodyW, bodyH);\n });\n\n maLines.forEach((ma) => {\n if (!ma.visible || !ma.values.length) return;\n ctx.strokeStyle = ma.color;\n ctx.lineWidth = 1.2;\n ctx.globalAlpha = 0.8;\n ctx.beginPath();\n let started = false;\n ma.values.forEach((v, i) => {\n if (v === null) return;\n const x = chartLeft + (i + 0.5) * (chartW / TARGET_CANDLES);\n const y = toY(v, h);\n if (!started) { ctx.moveTo(x, y); started = true; }\n else ctx.lineTo(x, y);\n });\n ctx.stroke();\n ctx.globalAlpha = 1;\n });\n\n drawings.forEach((line) => {\n const x1 = chartLeft + (line.i1 + 0.5) * (chartW / TARGET_CANDLES);\n const y1 = toY(line.p1, h);\n const x2 = chartLeft + (line.i2 + 0.5) * (chartW / TARGET_CANDLES);\n const y2 = toY(line.p2, h);\n ctx.strokeStyle = THEME.accent;\n ctx.lineWidth = 1.5;\n ctx.setLineDash([6, 3]);\n ctx.beginPath();\n ctx.moveTo(x1, y1);\n ctx.lineTo(x2, y2);\n ctx.stroke();\n ctx.setLineDash([]);\n [{ x: x1, y: y1 }, { x: x2, y: y2 }].forEach(({ x, y }) => {\n ctx.fillStyle = THEME.accent;\n ctx.beginPath();\n ctx.arc(x, y, 3, 0, Math.PI * 2);\n ctx.fill();\n });\n });\n\n if (drawPreview && drawStart) {\n const x1 = chartLeft + (drawStart.i + 0.5) * (chartW / TARGET_CANDLES);\n const y1 = toY(drawStart.p, h);\n ctx.strokeStyle = THEME.cyan;\n ctx.lineWidth = 1.5;\n ctx.setLineDash([4, 4]);\n ctx.beginPath();\n ctx.moveTo(x1, y1);\n ctx.lineTo(drawPreview.x, drawPreview.y);\n ctx.stroke();\n ctx.setLineDash([]);\n }\n\n if (crosshair) {\n ctx.strokeStyle = THEME.crosshair;\n ctx.lineWidth = 0.5;\n ctx.setLineDash([3, 3]);\n ctx.beginPath();\n ctx.moveTo(crosshair.x, 0);\n ctx.lineTo(crosshair.x, h);\n ctx.moveTo(chartLeft, crosshair.y);\n ctx.lineTo(chartRight, crosshair.y);\n ctx.stroke();\n ctx.setLineDash([]);\n\n const price = fromY(crosshair.y, h);\n ctx.fillStyle = THEME.panelEdge;\n ctx.fillRect(chartRight + 2, crosshair.y - 10, 50, 20);\n ctx.fillStyle = THEME.textBright;\n ctx.font = \"10px 'JetBrains Mono', monospace\";\n ctx.textAlign = \"left\";\n ctx.fillText(formatPrice(price), chartRight + 5, crosshair.y + 4);\n }\n\n ctx.fillStyle = THEME.steel;\n ctx.fillRect(chartRight, 0, 52, h);\n ctx.strokeStyle = THEME.panelEdge;\n ctx.lineWidth = 1;\n ctx.beginPath();\n ctx.moveTo(chartRight, 0);\n ctx.lineTo(chartRight, h);\n ctx.stroke();\n\n ctx.font = \"9px 'JetBrains Mono', monospace\";\n ctx.fillStyle = THEME.textDim;\n ctx.textAlign = \"left\";\n for (let i = 0; i <= nGridLines; i++) {\n const y = (i / nGridLines) * h;\n const price = fromY(y, h);\n ctx.fillText(formatPrice(price), chartRight + 4, y + 3);\n }\n\n if (lastPrice !== null) {\n const lpY = toY(lastPrice, h);\n if (lpY >= 0 && lpY <= h) {\n const flash = Date.now() - flashTs < 600;\n ctx.strokeStyle = flash ? THEME.cyan : THEME.accent;\n ctx.lineWidth = flash ? 1.5 : 1;\n ctx.setLineDash([2, 2]);\n ctx.beginPath();\n ctx.moveTo(chartLeft, lpY);\n ctx.lineTo(chartRight, lpY);\n ctx.stroke();\n ctx.setLineDash([]);\n ctx.fillStyle = flash ? THEME.cyan : THEME.accent;\n ctx.fillRect(chartRight + 1, lpY - 9, 51, 18);\n ctx.fillStyle = \"#000\";\n ctx.font = \"bold 10px 'JetBrains Mono', monospace\";\n ctx.fillText(formatPrice(lastPrice), chartRight + 4, lpY + 4);\n }\n }\n\n ctx.restore();\n }, [displayCandles, priceRange, toY, fromY, sessions, volumeProfile, maLines, crosshair, drawings, drawStart, drawPreview, lastPrice, logScale, flashTs]);\n\n const drawVolumeChart = useCallback(() => {\n const canvas = volCanvasRef.current;\n if (!canvas || !displayCandles.length) return;\n const ctx = canvas.getContext(\"2d\");\n const dpr = window.devicePixelRatio || 1;\n const W = canvas.width;\n const H = canvas.height;\n ctx.clearRect(0, 0, W, H);\n const w = W / dpr;\n const h = H / dpr;\n ctx.save();\n ctx.scale(dpr, dpr);\n\n ctx.fillStyle = THEME.bg;\n ctx.fillRect(0, 0, w, h);\n\n const chartRight = w - 52;\n const maxVol = Math.max(...displayCandles.map((c) => c.volume), 1);\n const barW = (chartRight / TARGET_CANDLES) * 0.6;\n\n displayCandles.forEach((c, i) => {\n const x = (i + 0.5) * (chartRight / TARGET_CANDLES);\n const isUp = c.close >= c.open;\n const barH = (c.volume / maxVol) * (h - 4);\n const grd = ctx.createLinearGradient(x, h, x, h - barH);\n grd.addColorStop(0, isUp ? THEME.greenDim : THEME.redDim);\n grd.addColorStop(1, \"transparent\");\n ctx.fillStyle = grd;\n ctx.fillRect(x - barW / 2, h - barH, barW, barH);\n ctx.strokeStyle = isUp ? THEME.green + \"60\" : THEME.red + \"60\";\n ctx.lineWidth = 0.5;\n ctx.strokeRect(x - barW / 2, h - barH, barW, barH);\n });\n\n ctx.fillStyle = THEME.steel;\n ctx.fillRect(chartRight, 0, 52, h);\n ctx.strokeStyle = THEME.panelEdge;\n ctx.lineWidth = 1;\n ctx.beginPath();\n ctx.moveTo(chartRight, 0);\n ctx.lineTo(chartRight, h);\n ctx.stroke();\n\n ctx.font = \"8px 'JetBrains Mono', monospace\";\n ctx.fillStyle = THEME.textDim;\n ctx.textAlign = \"left\";\n ctx.fillText(formatPrice(maxVol), chartRight + 4, 12);\n ctx.fillText(\"0\", chartRight + 4, h - 2);\n ctx.restore();\n }, [displayCandles]);\n\n const drawRSIChart = useCallback(() => {\n const canvas = rsiCanvasRef.current;\n if (!canvas || !rsiValues.length) return;\n const ctx = canvas.getContext(\"2d\");\n const dpr = window.devicePixelRatio || 1;\n const W = canvas.width;\n const H = canvas.height;\n ctx.clearRect(0, 0, W, H);\n const w = W / dpr;\n const h = H / dpr;\n ctx.save();\n ctx.scale(dpr, dpr);\n\n ctx.fillStyle = THEME.bg;\n ctx.fillRect(0, 0, w, h);\n\n const chartRight = w - 52;\n const rsiToY = (v) => h - (v / 100) * h;\n\n [30, 50, 70].forEach((level) => {\n const y = rsiToY(level);\n ctx.strokeStyle = level === 50 ? THEME.panelEdge : THEME.gridLine;\n ctx.lineWidth = 0.5;\n ctx.setLineDash(level === 50 ? [] : [3, 3]);\n ctx.beginPath();\n ctx.moveTo(0, y);\n ctx.lineTo(chartRight, y);\n ctx.stroke();\n ctx.setLineDash([]);\n });\n\n const overbought = rsiToY(70);\n const oversold = rsiToY(30);\n ctx.fillStyle = THEME.redDim + \"20\";\n ctx.fillRect(0, 0, chartRight, overbought);\n ctx.fillStyle = THEME.greenDim + \"20\";\n ctx.fillRect(0, oversold, chartRight, h - oversold);\n\n const barW = (chartRight / TARGET_CANDLES) * 0.5;\n rsiValues.forEach((rsi, i) => {\n if (i >= displayCandles.length) return;\n const c = displayCandles[i];\n const x = (i + 0.5) * (chartRight / TARGET_CANDLES);\n const isUp = c.close >= c.open;\n\n const rsiY = rsiToY(rsi);\n const midY = rsiToY(50);\n const top = Math.min(rsiY, midY);\n const bot = Math.max(rsiY, midY);\n const color = rsi >= 50 ? THEME.green : THEME.red;\n const dimColor = rsi >= 50 ? THEME.greenDim : THEME.redDim;\n\n ctx.fillStyle = dimColor;\n ctx.fillRect(x - barW / 2, top, barW, Math.max(1, bot - top));\n ctx.strokeStyle = color + \"80\";\n ctx.lineWidth = 0.5;\n ctx.strokeRect(x - barW / 2, top, barW, Math.max(1, bot - top));\n });\n\n ctx.strokeStyle = THEME.cyan;\n ctx.lineWidth = 1.2;\n ctx.beginPath();\n rsiValues.forEach((v, i) => {\n const x = (i + 0.5) * (chartRight / TARGET_CANDLES);\n const y = rsiToY(v);\n if (i === 0) ctx.moveTo(x, y);\n else ctx.lineTo(x, y);\n });\n ctx.stroke();\n\n ctx.fillStyle = THEME.steel;\n ctx.fillRect(chartRight, 0, 52, h);\n ctx.strokeStyle = THEME.panelEdge;\n ctx.lineWidth = 1;\n ctx.beginPath();\n ctx.moveTo(chartRight, 0);\n ctx.lineTo(chartRight, h);\n ctx.stroke();\n\n ctx.font = \"8px 'JetBrains Mono', monospace\";\n ctx.fillStyle = THEME.textDim;\n ctx.textAlign = \"left\";\n [70, 50, 30].forEach((lv) => {\n ctx.fillText(lv.toString(), chartRight + 4, rsiToY(lv) + 3);\n });\n ctx.restore();\n }, [rsiValues, displayCandles]);\n\n useEffect(() => {\n const render = () => {\n drawMainChart();\n drawVolumeChart();\n drawRSIChart();\n animFrameRef.current = requestAnimationFrame(render);\n };\n animFrameRef.current = requestAnimationFrame(render);\n return () => cancelAnimationFrame(animFrameRef.current);\n }, [drawMainChart, drawVolumeChart, drawRSIChart]);\n\n const setupCanvas = useCallback((canvas, height) => {\n if (!canvas || !containerRef.current) return;\n const dpr = window.devicePixelRatio || 1;\n const rect = containerRef.current.getBoundingClientRect();\n const w = rect.width;\n canvas.width = w * dpr;\n canvas.height = height * dpr;\n canvas.style.width = w + \"px\";\n canvas.style.height = height + \"px\";\n }, []);\n\n useEffect(() => {\n const resize = () => {\n setupCanvas(mainCanvasRef.current, 340);\n setupCanvas(volCanvasRef.current, 80);\n setupCanvas(rsiCanvasRef.current, 90);\n };\n resize();\n window.addEventListener(\"resize\", resize);\n return () => window.removeEventListener(\"resize\", resize);\n }, [setupCanvas]);\n\n const getCanvasCoords = useCallback((e, canvas) => {\n if (!canvas) return { x: 0, y: 0 };\n const rect = canvas.getBoundingClientRect();\n const clientX = e.touches ? e.touches[0].clientX : e.clientX;\n const clientY = e.touches ? e.touches[0].clientY : e.clientY;\n return { x: clientX - rect.left, y: clientY - rect.top };\n }, []);\n\n const getCandleIndex = useCallback((x) => {\n if (!containerRef.current) return 0;\n const w = containerRef.current.getBoundingClientRect().width - 52;\n return clamp(Math.floor((x / w) * TARGET_CANDLES), 0, TARGET_CANDLES - 1);\n }, []);\n\n const handlePointerDown = useCallback(\n (e) => {\n const coords = getCanvasCoords(e, mainCanvasRef.current);\n if (drawMode) {\n const i = getCandleIndex(coords.x);\n const p = fromY(coords.y, 340);\n setDrawStart({ i, p, x: coords.x, y: coords.y });\n return;\n }\n if (e.touches && e.touches.length === 2) {\n const dx = e.touches[1].clientX - e.touches[0].clientX;\n const dy = e.touches[1].clientY - e.touches[0].clientY;\n touchRef.current = { startDist: Math.hypot(dx, dy), startZoom: zoomLevel, startX: 0, startPan: panOffset, mode: \"pinch\" };\n } else {\n touchRef.current = { ...touchRef.current, startX: coords.x, startPan: panOffset, mode: \"pan\" };\n }\n },\n [drawMode, zoomLevel, panOffset, getCanvasCoords, getCandleIndex, fromY]\n );\n\n const handlePointerMove = useCallback(\n (e) => {\n const coords = getCanvasCoords(e, mainCanvasRef.current);\n if (drawMode && drawStart) {\n setDrawPreview({ x: coords.x, y: coords.y });\n return;\n }\n if (!drawMode) setCrosshair(coords);\n if (touchRef.current.mode === \"pinch\" && e.touches && e.touches.length === 2) {\n const dx = e.touches[1].clientX - e.touches[0].clientX;\n const dy = e.touches[1].clientY - e.touches[0].clientY;\n const dist = Math.hypot(dx, dy);\n const scale = dist / touchRef.current.startDist;\n const newZoom = clamp(touchRef.current.startZoom + (1 - scale) * 3, 0, TIMEFRAMES.length - 1);\n setZoomLevel(newZoom);\n } else if (touchRef.current.mode === \"pan\") {\n const dx = coords.x - touchRef.current.startX;\n const candleW = (containerRef.current.getBoundingClientRect().width - 52) / TARGET_CANDLES;\n setPanOffset(clamp(touchRef.current.startPan + dx / candleW, 0, Math.max(0, rawCandles.length / Math.max(1, currentTF.seconds / 60) - TARGET_CANDLES)));\n }\n },\n [drawMode, drawStart, getCanvasCoords, rawCandles.length, currentTF]\n );\n\n const handlePointerUp = useCallback(\n (e) => {\n if (drawMode && drawStart) {\n const coords = getCanvasCoords(e, mainCanvasRef.current);\n const i2 = getCandleIndex(coords.x);\n const p2 = fromY(coords.y, 340);\n if (Math.abs(drawStart.i - i2) > 0 || Math.abs(drawStart.p - p2) > 0.01) {\n setDrawings((prev) => [...prev, { i1: drawStart.i, p1: drawStart.p, i2, p2 }]);\n }\n setDrawStart(null);\n setDrawPreview(null);\n return;\n }\n touchRef.current.mode = null;\n },\n [drawMode, drawStart, getCanvasCoords, getCandleIndex, fromY]\n );\n\n const handleWheel = useCallback(\n (e) => {\n e.preventDefault();\n const delta = e.deltaY > 0 ? 0.15 : -0.15;\n setZoomLevel((z) => clamp(z + delta, 0, TIMEFRAMES.length - 1));\n },\n []\n );\n\n const priceChange = displayCandles.length >= 2\n ? displayCandles[displayCandles.length - 1].close - displayCandles[0].open\n : 0;\n const priceChangePct = displayCandles.length >= 2\n ? ((priceChange / displayCandles[0].open) * 100)\n : 0;\n const isUp = priceChange >= 0;\n\n return (\n \n \n\n {/* ═══ HEADER BAR ═══ */}\n \n

\n \n setShowPairModal(true)}\n style={{\n display: \"flex\",\n alignItems: \"center\",\n gap: 6,\n cursor: \"pointer\",\n padding: \"3px 10px\",\n background: THEME.steel,\n border: `1px solid ${THEME.panelEdge}`,\n borderRadius: 2,\n }}\n >\n {pair}\n ▼\n

\n \n {lastPrice ? formatPrice(lastPrice) : \"—\"}\n \n \n {isUp ? \"+\" : \"\"}{priceChange.toFixed(2)} ({isUp ? \"+\" : \"\"}{priceChangePct.toFixed(2)}%)\n \n

\n {wsConnected ? \"LIVE\" : \"OFF\"}\n

\n\n {/* ═══ TOOLBAR ═══ */}\n \n {TIMEFRAMES.map((tf, i) => (\n setZoomLevel(i)}\n style={{\n padding: \"2px 7px\",\n fontSize: 9,\n fontWeight: tfIndex === i ? 700 : 400,\n color: tfIndex === i ? THEME.accent : THEME.textDim,\n background: tfIndex === i ? THEME.accentDim : \"transparent\",\n border: `1px solid ${tfIndex === i ? THEME.accent + \"40\" : \"transparent\"}`,\n borderRadius: 2,\n cursor: \"pointer\",\n fontFamily: \"inherit\",\n letterSpacing: 1,\n }}\n >\n {tf.label}\n \n ))}\n

\n setLogScale(!logScale)}\n style={{\n padding: \"2px 7px\",\n fontSize: 9,\n fontWeight: logScale ? 700 : 400,\n color: logScale ? THEME.cyan : THEME.textDim,\n background: logScale ? THEME.cyanDim : \"transparent\",\n border: `1px solid ${logScale ? THEME.cyan + \"40\" : \"transparent\"}`,\n borderRadius: 2,\n cursor: \"pointer\",\n fontFamily: \"inherit\",\n letterSpacing: 1,\n }}\n >\n LOG\n \n { setDrawMode(!drawMode); setCrosshair(null); }}\n style={{\n padding: \"2px 7px\",\n fontSize: 9,\n fontWeight: drawMode ? 700 : 400,\n color: drawMode ? THEME.accent : THEME.textDim,\n background: drawMode ? THEME.accentDim : \"transparent\",\n border: `1px solid ${drawMode ? THEME.accent + \"40\" : \"transparent\"}`,\n borderRadius: 2,\n cursor: \"pointer\",\n fontFamily: \"inherit\",\n letterSpacing: 1,\n }}\n >\n ✏ DRAW\n \n {drawings.length > 0 && (\n setDrawings([])}\n style={{\n padding: \"2px 7px\",\n fontSize: 9,\n color: THEME.red,\n background: \"transparent\",\n border: `1px solid ${THEME.red}30`,\n borderRadius: 2,\n cursor: \"pointer\",\n fontFamily: \"inherit\",\n }}\n >\n CLR\n \n )}\n setShowMAModal(true)}\n style={{\n padding: \"2px 7px\",\n fontSize: 9,\n color: THEME.textDim,\n background: \"transparent\",\n border: `1px solid ${THEME.panelEdge}`,\n borderRadius: 2,\n cursor: \"pointer\",\n fontFamily: \"inherit\",\n letterSpacing: 1,\n }}\n >\n MA⚙\n \n

\n {maConfig.filter(m => m.visible).map((ma, i) => (\n \n {ma.type}{ma.period}\n \n ))}\n

\n\n \n\n {/* ═══ MAIN CHART ═══ */}\n

\n \n \n {loading && (\n \n LOADING FORGE…\n

\n )}\n { setCrosshair(null); touchRef.current.mode = null; }}\n onWheel={handleWheel}\n onTouchStart={handlePointerDown}\n onTouchMove={handlePointerMove}\n onTouchEnd={handlePointerUp}\n />\n \n {displayCandles.filter((_, i) => i % Math.ceil(TARGET_CANDLES / 6) === 0).map((c, i) => (\n \n {formatTime(c.time)}\n \n ))}\n

\n \n\n \n\n {/* ═══ SUB PANEL TABS ═══ */}\n \n {[\n { key: \"vol\", label: \"VOLUME\" },\n { key: \"rsi\", label: \"RSI CANDLE\" },\n ].map((tab) => (\n setChartPanel(tab.key)}\n style={{\n flex: 1,\n padding: \"4px 0\",\n fontSize: 9,\n fontWeight: chartPanel === tab.key ? 700 : 400,\n color: chartPanel === tab.key ? THEME.accent : THEME.textDim,\n background: chartPanel === tab.key ? THEME.accentDim : \"transparent\",\n border: \"none\",\n borderBottom: chartPanel === tab.key ? `2px solid ${THEME.accent}` : \"2px solid transparent\",\n cursor: \"pointer\",\n fontFamily: \"inherit\",\n letterSpacing: 2,\n }}\n >\n {tab.label}\n \n ))}\n \n\n {/* ═══ VOLUME / RSI PANELS ═══ */}\n

\n \n \n

\n\n \n\n {/* ═══ INFO FOOTER ═══ */}\n \n {crosshair && displayCandles.length > 0 && (() => {\n const w = containerRef.current ? containerRef.current.getBoundingClientRect().width - 52 : 300;\n const idx = clamp(Math.floor((crosshair.x / w) * TARGET_CANDLES), 0, displayCandles.length - 1);\n const c = displayCandles[idx];\n if (!c) return null;\n return (\n <>\n {formatDate(c.time)} {formatTime(c.time)}\n O {formatPrice(c.open)}\n H {formatPrice(c.high)}\n L {formatPrice(c.low)}\n C {formatPrice(c.close)}\n V {formatPrice(c.volume)}\n \n );\n })()}\n {!crosshair && (\n \n TRADING FORGE v1 — {currentTF.label} — {displayCandles.length} candles\n \n )}\n

\n \n \n

\n \n\n {/* ═══ PAIR SELECTOR MODAL ═══ */}\n {showPairModal && (\n setShowPairModal(false)}\n >\n e.stopPropagation()}\n style={{\n background: THEME.panel,\n border: `1px solid ${THEME.panelEdge}`,\n padding: 16,\n maxWidth: 340,\n width: \"100%\",\n maxHeight: \"70vh\",\n overflowY: \"auto\",\n position: \"relative\",\n }}\n >\n \n \n

\n SELECT INSTRUMENT\n

\n {Object.entries(PAIRS).map(([cat, pairs]) => (\n

\n {cat.toUpperCase()}\n

\n {pairs.map((p) => (\n { setPair(p); setShowPairModal(false); setPanOffset(0); setDrawings([]); }}\n style={{\n padding: \"4px 10px\",\n fontSize: 10,\n fontWeight: pair === p ? 700 : 400,\n color: pair === p ? THEME.accent : THEME.text,\n background: pair === p ? THEME.accentDim : THEME.steel,\n border: `1px solid ${pair === p ? THEME.accent + \"60\" : THEME.panelEdge}`,\n borderRadius: 2,\n cursor: \"pointer\",\n fontFamily: \"inherit\",\n }}\n >\n {p}\n \n ))}\n

\n ))}\n

\n \n )}\n\n {/* ═══ MA CONFIG MODAL ═══ */}\n {showMAModal && (\n setShowMAModal(false)}\n >\n e.stopPropagation()}\n style={{\n background: THEME.panel,\n border: `1px solid ${THEME.panelEdge}`,\n padding: 16,\n maxWidth: 320,\n width: \"100%\",\n position: \"relative\",\n }}\n >\n \n

\n MOVING AVERAGES\n

\n {maConfig.map((ma, idx) => (\n \n

\n {\n const next = [...maConfig];\n next[idx] = { ...next[idx], type: e.target.value };\n setMaConfig(next);\n }}\n style={{\n background: THEME.bg,\n color: THEME.text,\n border: `1px solid ${THEME.panelEdge}`,\n fontSize: 10,\n fontFamily: \"inherit\",\n padding: \"2px 4px\",\n }}\n >\n \n \n \n {\n const next = [...maConfig];\n next[idx] = { ...next[idx], period: parseInt(e.target.value) || 1 };\n setMaConfig(next);\n }}\n style={{\n width: 48,\n background: THEME.bg,\n color: THEME.text,\n border: `1px solid ${THEME.panelEdge}`,\n fontSize: 10,\n fontFamily: \"inherit\",\n padding: \"2px 4px\",\n textAlign: \"center\",\n }}\n />\n {\n const next = [...maConfig];\n next[idx] = { ...next[idx], visible: !next[idx].visible };\n setMaConfig(next);\n }}\n style={{\n marginLeft: \"auto\",\n padding: \"2px 8px\",\n fontSize: 9,\n color: ma.visible ? THEME.green : THEME.red,\n background: \"transparent\",\n border: `1px solid ${ma.visible ? THEME.green + \"40\" : THEME.red + \"40\"}`,\n borderRadius: 2,\n cursor: \"pointer\",\n fontFamily: \"inherit\",\n }}\n >\n {ma.visible ? \"ON\" : \"OFF\"}\n \n

\n ))}\n setMaConfig([...maConfig, { period: 100, color: \"#ffaa00\", type: \"SMA\", visible: true }])}\n style={{\n width: \"100%\",\n padding: \"6px\",\n marginTop: 4,\n fontSize: 9,\n color: THEME.textDim,\n background: THEME.bg,\n border: `1px dashed ${THEME.panelEdge}`,\n cursor: \"pointer\",\n fontFamily: \"inherit\",\n letterSpacing: 1,\n }}\n >\n + ADD MA\n \n

\n \n )}\n\n \n \n );\n}\n\n\nexport default async function(req: Request): Promise {\n return new Response(\n `\n\n\n\n\n\n

\n\n`,\n { headers: { \"Content-Type\": \"text/html\" } }\n );\n}\n\nif (typeof document !== \"undefined\") {\n createRoot(document.getElementById(\"root\")!).render();\n}","deleted",false,"label",[35],{"_33":34,"_13":35,"_36":37,"_38":-5,"_39":40,"_41":42,"_43":44,"_45":57,"_17":47,"_48":49,"_50":51,"_52":53,"_54":-5,"_58":59,"_18":60},["D",1776861163039],"children",[],[35],"1acb544c-2e49-11f1-a975-42dde27851f2",["D",1775102694221],"deletedAt","legacyEnvVars","privacy","public","httpPrivacy","description","imageUrl","userId","2c6d46b0-54dd-11f0-a86c-6fbc2b29331a","pinnedFileId","pinPreview","pinMigrated","screenshotVersion","likeCount",0,"orgId","850db142-aa5e-4914-bceb-1e2e085ae4c5","tursoName","tursoHostname","tursoMeasuredAt","pinned","userPerm","r","valPerm","blobPerm","rw","emailPerm","sqlitePerm","projectPerm","telemetryPerm","user",{"_11":12,"_114":110},"org",{"_11":12,"_108":-5,"_109":110,"_70":71,"_111":112,"_113":53},"branch",{"_17":42,"_13":16,"_33":40,"_100":61,"_101":-5,"_102":-5,"_103":-5,"_104":-5,"_105":-5,"_106":14,"_107":12},"isOwned","projectId","forkedBranchId","forkedBranchVersion","forkedProjectPrivacy","forkedProjectId","forkedProjectOrgId","projectName","userHandle","displayName","avatar","https://img.clerk.com/eyJ0eXBlIjoicHJveHkiLCJzcmMiOiJodHRwczovL2ltYWdlcy5jbGVyay5kZXYvb2F1dGhfZ2l0aHViL2ltZ18yekJHRDE5SGVoUHUzUENQaXY2MTRkT3h0cncifQ","tier","free","canRestrictVals","profileImageUrl","adoptOrgId",{"_33":61,"_13":14,"_45":148,"_63":-5,"_64":53,"_65":66,"_67":66,"_68":-5,"_69":-5,"_70":71,"_72":-5,"_73":53,"_74":-5,"_75":-5,"_76":77,"_78":79,"_80":-5,"_81":-5,"_82":-5,"_83":-5,"_84":85,"_86":85,"_87":88,"_89":88,"_90":88,"_91":85,"_92":85,"_93":149,"_95":150,"_97":151,"_99":53},[145],"files",[145],"counts",{"_135":77,"_136":137,"_138":77,"_31":139,"_140":141},[133],"upstreamProject","upstreamBranch","emptyEnvVars","flags",[],"hasHttpFiles","grants","orgs","customDomains",{},{"_33":34,"_13":35,"_36":37,"_38":-5,"_39":40,"_41":42,"_43":44,"_45":46,"_17":47,"_48":49,"_50":51,"_52":53,"_54":-5,"_18":134},[35],"pulls","branches",1,"forks",{"_142":77,"_144":77},"connections",{"_142":77,"_143":77},"count","unfilledCount","emptyCount",{"_33":34,"_13":35,"_36":37,"_38":-5,"_39":40,"_41":42,"_43":44,"_45":57,"_17":47,"_48":49,"_50":51,"_52":53,"_54":-5,"_58":146,"_18":147},[],[35],["D",1775102694221],{"_11":12,"_114":110},{"_11":12,"_108":-5,"_109":110,"_70":71,"_111":112,"_113":53},{"_17":42,"_13":16,"_33":40,"_100":61,"_101":-5,"_102":-5,"_103":-5,"_104":-5,"_105":-5,"_106":14,"_107":12},"ctx",{"_93":-5,"_130":185,"_186":187,"_188":189,"_190":53,"_191":53,"_192":53,"_193":44,"_194":-5,"_195":-7,"_196":-7,"_197":77,"_198":53,"_199":53,"_200":-5,"_201":53,"_202":53,"_203":53,"_204":-5},"ENV",{"_156":157,"_158":159,"_160":16,"_161":162,"_163":164,"_165":166,"_167":168,"_169":170,"_171":172,"_173":174,"_175":176,"_177":178,"_179":180,"_181":182,"_183":184},"REACT_APP_SENTRY_DSN","https://586020d86f05489db63a554690acf1e9@o1398359.ingest.sentry.io/6724499","RENDER_GIT_COMMIT","e87eb04e707cf64e7e532c8e8ec395f209e17f15","RENDER_GIT_BRANCH","POSTHOG_API_TOKEN","phc_nmoyuAkStEZuUp69rYlg1DZgrIt19Gx0Y4Hwf8tGgJP","POSTHOG_API_HOST","https://wart.val.town","WEB_API_TEMPLATE","https://{val}.web.val.run","APP_URL","https://www.val.town","MODULE_URL","https://esm.town","VANITY_WEB_API_TEMPLATE","https://{label}.val.run/","DENOLS_URL","https://lsp.val.town","NODE_ENV","production","CLOUDFLARE_TURNSTILE_SITE_KEY","0x4AAAAAACtaIZJH7s9rBMZ6","GOOGLE_CLIENT_ID","875989696899-jtsqkhlbdv5jrlsk8631p7ipjg3c6o62.apps.googleusercontent.com","STRIPE_PUBLISHABLE_KEY","pk_live_51N2zvWEpZTTLipIkVEwXrUG9AT0yeOOEYxszarZT1jpsZV58Ly6wlg3SltZpHN26CUalOBmUSY7adQRQiSkCZz2500qSXNkf8Y","API_URL","https://api.val.town",[],"preferencesKeybindings","default","preferencesTheme","light","preferencesFixers","preferencesCopilot","preferencesSelectionAi","preferencesCloseBrackets","preferencesChatPanelState","preferencesDprint","preferencesDenofmt","notificationCount","flagDenols","isBusinessOrgMember","businessOrgHandle","isBusinessOrgAdmin","isHigherTownieTier","navCollapsed","currentOrgId"]

Code