\n \n \n \n\n",[],[66,98],"a3760a1e-53ae-11f1-8bd1-ee650bb23af1","components","a3760adc-53ae-11f1-8bd1-ee650bb23af1",9,["D",1779214495694],[112,113,114],[66,106],{"_35":131,"_13":132,"_38":133,"_40":107,"_41":42,"_43":134,"_45":46,"_47":135,"_17":49,"_50":93,"_52":136,"_54":55,"_56":-5,"_76":137,"_18":138},{"_35":123,"_13":124,"_38":125,"_40":107,"_41":42,"_43":126,"_45":46,"_47":127,"_17":49,"_50":93,"_52":128,"_54":55,"_56":-5,"_76":129,"_18":130},{"_35":115,"_13":116,"_38":117,"_40":107,"_41":42,"_43":118,"_45":46,"_47":119,"_17":49,"_50":93,"_52":120,"_54":55,"_56":-5,"_76":121,"_18":122},"b203f3b6-53ae-11f1-83c5-ee650bb23af1","SearchBar.tsx","b203f47e-53ae-11f1-83c5-ee650bb23af1",11,["D",1779214520114],"/** @jsxImportSource https://esm.sh/react@18.2.0 */\nimport { useState, useRef, useEffect, useCallback } from \"https://esm.sh/react@18.2.0\";\n\ninterface SearchResult {\n symbol: string;\n name: string;\n type: string;\n exchange: string;\n}\n\nexport function SearchBar({ onSelect }: { onSelect: (symbol: string) => void }) {\n const [query, setQuery] = useState(\"\");\n const [results, setResults] = useState([]);\n const [isOpen, setIsOpen] = useState(false);\n const [loading, setLoading] = useState(false);\n const debounceRef = useRef(null);\n const containerRef = useRef(null);\n\n // Close dropdown on outside click\n useEffect(() => {\n const handler = (e: MouseEvent) => {\n if (containerRef.current && !containerRef.current.contains(e.target as Node)) {\n setIsOpen(false);\n }\n };\n document.addEventListener(\"mousedown\", handler);\n return () => document.removeEventListener(\"mousedown\", handler);\n }, []);\n\n const search = useCallback(async (q: string) => {\n if (q.length < 1) { setResults([]); return; }\n setLoading(true);\n try {\n const resp = await fetch(`/api/search?q=${encodeURIComponent(q)}`);\n const data = await resp.json();\n setResults(data.results || []);\n setIsOpen(true);\n } catch {\n setResults([]);\n } finally {\n setLoading(false);\n }\n }, []);\n\n const handleInput = (e: Event) => {\n const val = (e.target as HTMLInputElement).value;\n setQuery(val);\n if (debounceRef.current) clearTimeout(debounceRef.current);\n debounceRef.current = window.setTimeout(() => search(val), 300);\n };\n\n const handleSelect = (sym: string) => {\n setQuery(sym);\n setIsOpen(false);\n onSelect(sym);\n };\n\n const handleKeyDown = (e: KeyboardEvent) => {\n if (e.key === \"Enter\" && query.trim()) {\n setIsOpen(false);\n onSelect(query.trim().toUpperCase());\n }\n };\n\n const typeEmoji: Record = {\n EQUITY: \"📈\",\n ETF: \"📦\",\n CRYPTOCURRENCY: \"🪙\",\n CURRENCY: \"💱\",\n FUTURES: \"📊\",\n INDEX: \"🏛️\",\n };\n\n return (\n

\n 🔍\n results.length > 0 && setIsOpen(true)}\n placeholder=\"Search symbol (AAPL, BTC-USD, EURUSD=X)\"\n class=\"bg-transparent outline-none text-sm text-white placeholder-gray-500 w-64\"\n />\n {loading && ...}\n

\n\n {isOpen && results.length > 0 && (\n

\n {results.map((r) => (\n handleSelect(r.symbol)}\n >\n {typeEmoji[r.type] || \"📄\"}\n

{r.symbol}

{r.name}

\n {r.exchange}\n \n ))}\n

\n )}\n

\n );\n}\n",[],[66,106,116],"c6b94040-53ae-11f1-a85a-ee650bb23af1","Chart.tsx","c6b940ea-53ae-11f1-a85a-ee650bb23af1",12,["D",1779214554856],"/** @jsxImportSource https://esm.sh/react@18.2.0 */\nimport { useState, useEffect, useRef, useCallback } from \"https://esm.sh/react@18.2.0\";\n\ninterface Candle {\n time: number;\n open: number;\n high: number;\n low: number;\n close: number;\n volume: number;\n}\n\ninterface ChartData {\n symbol: string;\n currency: string;\n exchangeName: string;\n instrumentType: string;\n candles: Candle[];\n}\n\n// Calculate anchored VWAP from a given index\nfunction calcAnchoredVWAP(candles: Candle[], anchorIdx: number) {\n const vwapData: { time: number; value: number }[] = [];\n let cumTPV = 0; // cumulative (typical price * volume)\n let cumVol = 0; // cumulative volume\n\n for (let i = anchorIdx; i < candles.length; i++) {\n const c = candles[i];\n const tp = (c.high + c.low + c.close) / 3;\n cumTPV += tp * c.volume;\n cumVol += c.volume;\n if (cumVol > 0) {\n vwapData.push({ time: c.time, value: Number((cumTPV / cumVol).toFixed(4)) });\n }\n }\n return vwapData;\n}\n\nexport function Chart({ symbol, interval }: { symbol: string; interval: \"5m\" | \"1d\" }) {\n const containerRef = useRef(null);\n const chartRef = useRef(null);\n const candleSeriesRef = useRef(null);\n const volumeSeriesRef = useRef(null);\n const vwapSeriesRef = useRef(null);\n const candlesRef = useRef([]);\n const [anchorTime, setAnchorTime] = useState(null);\n const [status, setStatus] = useState(\"Loading...\");\n const [chartInfo, setChartInfo] = useState<{ symbol: string; currency: string } | null>(null);\n const lwcModuleRef = useRef(null);\n\n const range = interval === \"5m\" ? \"5d\" : \"1y\";\n\n // Load lightweight-charts dynamically\n const getLWC = useCallback(async () => {\n if (lwcModuleRef.current) return lwcModuleRef.current;\n lwcModuleRef.current = await import(\"https://esm.sh/lightweight-charts@4.1.3\");\n return lwcModuleRef.current;\n }, []);\n\n // Initialize chart\n useEffect(() => {\n let disposed = false;\n\n (async () => {\n const lwc = await getLWC();\n if (disposed || !containerRef.current) return;\n\n // Clean up previous chart\n if (chartRef.current) {\n chartRef.current.remove();\n chartRef.current = null;\n }\n\n const chart = lwc.createChart(containerRef.current, {\n layout: {\n background: { color: \"#0a0a1a\" },\n textColor: \"#9ca3af\",\n },\n grid: {\n vertLines: { color: \"#1f2937\" },\n horzLines: { color: \"#1f2937\" },\n },\n crosshair: {\n mode: lwc.CrosshairMode.Normal,\n },\n rightPriceScale: {\n borderColor: \"#374151\",\n },\n timeScale: {\n borderColor: \"#374151\",\n timeVisible: interval === \"5m\",\n secondsVisible: false,\n },\n width: containerRef.current.clientWidth,\n height: containerRef.current.clientHeight,\n });\n\n const candleSeries = chart.addCandlestickSeries({\n upColor: \"#22c55e\",\n downColor: \"#ef4444\",\n borderDownColor: \"#ef4444\",\n borderUpColor: \"#22c55e\",\n wickDownColor: \"#ef4444\",\n wickUpColor: \"#22c55e\",\n });\n\n const volumeSeries = chart.addHistogramSeries({\n color: \"#3b82f6\",\n priceFormat: { type: \"volume\" },\n priceScaleId: \"\",\n });\n\n volumeSeries.priceScale().applyOptions({\n scaleMargins: { top: 0.8, bottom: 0 },\n });\n\n chartRef.current = chart;\n candleSeriesRef.current = candleSeries;\n volumeSeriesRef.current = volumeSeries;\n\n // Handle resize\n const resizeObserver = new ResizeObserver((entries) => {\n if (entries[0] && chartRef.current) {\n const { width, height } = entries[0].contentRect;\n chartRef.current.applyOptions({ width, height });\n }\n });\n resizeObserver.observe(containerRef.current);\n\n // Click handler for anchoring\n chart.subscribeClick((param: any) => {\n if (!param.time) return;\n // Find the candle index by time\n const candles = candlesRef.current;\n const clickedTime = typeof param.time === \"object\"\n ? new Date(param.time.year, param.time.month - 1, param.time.day).getTime() / 1000\n : param.time;\n const idx = candles.findIndex((c) => c.time === clickedTime);\n if (idx >= 0) {\n setAnchorTime(clickedTime);\n drawVWAP(candles, idx);\n }\n });\n\n return () => {\n resizeObserver.disconnect();\n };\n })();\n\n return () => {\n disposed = true;\n if (chartRef.current) {\n chartRef.current.remove();\n chartRef.current = null;\n }\n };\n }, [interval]);\n\n // Draw VWAP line\n const drawVWAP = useCallback(async (candles: Candle[], anchorIdx: number) => {\n const lwc = await getLWC();\n if (!chartRef.current) return;\n\n // Remove old VWAP line\n if (vwapSeriesRef.current) {\n chartRef.current.removeSeries(vwapSeriesRef.current);\n vwapSeriesRef.current = null;\n }\n\n const vwapData = calcAnchoredVWAP(candles, anchorIdx);\n if (vwapData.length === 0) return;\n\n const vwapSeries = chartRef.current.addLineSeries({\n color: \"#f59e0b\",\n lineWidth: 2,\n lineStyle: lwc.LineStyle.Solid,\n title: \"AVWAP\",\n priceLineVisible: true,\n lastValueVisible: true,\n });\n\n vwapSeries.setData(vwapData);\n\n // Add anchor marker\n candleSeriesRef.current?.setMarkers([{\n time: candles[anchorIdx].time,\n position: \"belowBar\",\n color: \"#f59e0b\",\n shape: \"arrowUp\",\n text: \"⚓ Anchor\",\n }]);\n\n vwapSeriesRef.current = vwapSeries;\n }, [getLWC]);\n\n // Fetch data\n useEffect(() => {\n let cancelled = false;\n\n (async () => {\n setStatus(\"Loading...\");\n setAnchorTime(null);\n\n // Remove old vwap and markers\n if (vwapSeriesRef.current && chartRef.current) {\n chartRef.current.removeSeries(vwapSeriesRef.current);\n vwapSeriesRef.current = null;\n }\n if (candleSeriesRef.current) {\n candleSeriesRef.current.setMarkers([]);\n }\n\n try {\n const resp = await fetch(`/api/chart?symbol=${encodeURIComponent(symbol)}&interval=${interval}&range=${range}`);\n const data: ChartData = await resp.json();\n if (cancelled) return;\n\n if ((data as any).error) {\n setStatus((data as any).error);\n return;\n }\n\n const candles = data.candles;\n candlesRef.current = candles;\n\n if (candleSeriesRef.current) {\n candleSeriesRef.current.setData(\n candles.map((c) => ({ time: c.time, open: c.open, high: c.high, low: c.low, close: c.close })),\n );\n }\n\n if (volumeSeriesRef.current) {\n volumeSeriesRef.current.setData(\n candles.map((c) => ({\n time: c.time,\n value: c.volume,\n color: c.close >= c.open ? \"rgba(34,197,94,0.3)\" : \"rgba(239,68,68,0.3)\",\n })),\n );\n }\n\n if (chartRef.current) {\n chartRef.current.timeScale().fitContent();\n }\n\n setChartInfo({ symbol: data.symbol, currency: data.currency });\n setStatus(\"\");\n } catch (err) {\n if (!cancelled) setStatus(\"Failed to load data\");\n }\n })();\n\n return () => { cancelled = true; };\n }, [symbol, interval, range]);\n\n // Clear anchor\n const clearAnchor = () => {\n setAnchorTime(null);\n if (vwapSeriesRef.current && chartRef.current) {\n chartRef.current.removeSeries(vwapSeriesRef.current);\n vwapSeriesRef.current = null;\n }\n if (candleSeriesRef.current) {\n candleSeriesRef.current.setMarkers([]);\n }\n };\n\n return (\n

\n {/* Status bar */}\n {(status || chartInfo || anchorTime) && (\n

\n {status && {status}}\n {chartInfo && !status && (\n \n {chartInfo.symbol} · {chartInfo.currency} · {interval === \"5m\" ? \"5 min\" : \"Daily\"}\n \n )}\n {anchorTime && (\n \n ⚓ Clear Anchor\n \n )}\n

\n )}\n

\n );\n}\n",[],[66,106,124],"a95f6308-53ae-11f1-8bd1-ee650bb23af1","App.tsx","a95f6434-53ae-11f1-8bd1-ee650bb23af1",10,["D",1779214505606],"/** @jsxImportSource https://esm.sh/react@18.2.0 */\nimport { useState, useCallback } from \"https://esm.sh/react@18.2.0\";\nimport { SearchBar } from \"./SearchBar.tsx\";\nimport { Chart } from \"./Chart.tsx\";\n\nexport function App() {\n const [symbol, setSymbol] = useState(\"AAPL\");\n const [interval, setInterval_] = useState<\"5m\" | \"1d\">(\"1d\");\n\n const handleSymbolSelect = useCallback((sym: string) => {\n setSymbol(sym);\n }, []);\n\n return (\n

\n {/* Header */}\n

\n ⚓\n Anchored VWAP\n

\n\n \n\n {/* Interval Toggle */}\n

\n setInterval_(\"5m\")}\n >\n 5 min\n \n setInterval_(\"1d\")}\n >\n Daily\n \n

\n\n

\n Click any candle to anchor VWAP\n view source\n

\n\n {/* Chart */}\n

\n \n

\n );\n}\n",[],[66,106,132],"de155f18-53ad-11f1-862a-ee650bb23af1",["D",1779214164558],"deletedAt","legacyEnvVars","privacy","public","httpPrivacy","description","imageUrl","userId","38c2ae40-401c-430b-ad9f-5f15f196a472","pinnedFileId","pinPreview","pinMigrated","screenshotVersion","likeCount","orgId","019e416c-d24f-735b-b0ad-5f2694549a92","tursoName","de155f1853ad11f1862aee650bb23af1","tursoHostname","de155f1853ad11f1862aee650bb23af1-val-town.aws-us-east-2.turso.io","tursoMeasuredAt",["D",1789501878689],"pinned","userPerm","r","valPerm","blobPerm","rw","emailPerm","sqlitePerm","projectPerm","telemetryPerm","user",{"_11":12,"_194":190},"org",{"_11":12,"_188":12,"_189":190,"_148":149,"_191":192,"_193":55},"branch",{"_17":61,"_13":16,"_35":42,"_180":139,"_181":-5,"_182":-5,"_183":-5,"_184":-5,"_185":-5,"_186":14,"_187":12},"isOwned","projectId","forkedBranchId","forkedBranchVersion","forkedProjectPrivacy","forkedProjectId","forkedProjectOrgId","projectName","userHandle","displayName","avatar","https://avatars.githubusercontent.com/u/210577132?v=4","tier","free","canRestrictVals","profileImageUrl","adoptOrgId",{"_35":139,"_13":14,"_47":256,"_141":-5,"_142":55,"_143":144,"_145":144,"_146":-5,"_147":-5,"_148":149,"_150":39,"_151":46,"_152":-5,"_153":-5,"_154":49,"_155":156,"_157":158,"_159":160,"_161":257,"_163":-5,"_164":165,"_166":165,"_167":168,"_169":168,"_170":168,"_171":165,"_172":165,"_173":258,"_175":259,"_177":260,"_179":55},[229,236,237],"files",[229,230,231,232,233,234,235,236,237],"counts",{"_219":49,"_220":221,"_222":49,"_31":223,"_224":225},[213,214,215],"upstreamProject","upstreamBranch","emptyEnvVars","flags",[],"hasHttpFiles","grants","orgs","customDomains",{},{"_35":65,"_13":66,"_38":67,"_40":-5,"_41":42,"_43":68,"_45":46,"_47":69,"_17":49,"_50":70,"_52":-5,"_54":55,"_56":-5,"_18":218},{"_35":58,"_13":59,"_38":60,"_40":-5,"_41":42,"_43":61,"_45":46,"_47":62,"_17":49,"_50":24,"_52":63,"_54":55,"_56":-5,"_18":217},{"_35":36,"_13":37,"_38":39,"_40":-5,"_41":42,"_43":44,"_45":46,"_47":48,"_17":49,"_50":51,"_52":53,"_54":55,"_56":-5,"_18":216},[37],[59],[66],"pulls","branches",1,"forks",{"_226":49,"_228":49},"connections",{"_226":49,"_227":49},"count","unfilledCount","emptyCount",{"_35":65,"_13":66,"_38":67,"_40":-5,"_41":42,"_43":68,"_45":46,"_47":82,"_17":49,"_50":70,"_52":-5,"_54":55,"_56":-5,"_76":254,"_18":255},{"_35":105,"_13":106,"_38":107,"_40":67,"_41":42,"_43":108,"_45":46,"_47":109,"_17":49,"_50":70,"_52":-5,"_54":55,"_56":-5,"_76":252,"_18":253},{"_35":131,"_13":132,"_38":133,"_40":107,"_41":42,"_43":134,"_45":46,"_47":135,"_17":49,"_50":93,"_52":136,"_54":55,"_56":-5,"_76":250,"_18":251},{"_35":123,"_13":124,"_38":125,"_40":107,"_41":42,"_43":126,"_45":46,"_47":127,"_17":49,"_50":93,"_52":128,"_54":55,"_56":-5,"_76":248,"_18":249},{"_35":115,"_13":116,"_38":117,"_40":107,"_41":42,"_43":118,"_45":46,"_47":119,"_17":49,"_50":93,"_52":120,"_54":55,"_56":-5,"_76":246,"_18":247},{"_35":97,"_13":98,"_38":99,"_40":67,"_41":42,"_43":100,"_45":46,"_47":101,"_17":49,"_50":24,"_52":102,"_54":55,"_56":-5,"_76":244,"_18":245},{"_35":88,"_13":89,"_38":90,"_40":67,"_41":42,"_43":91,"_45":46,"_47":92,"_17":49,"_50":93,"_52":94,"_54":55,"_56":-5,"_76":242,"_18":243},{"_35":58,"_13":59,"_38":60,"_40":-5,"_41":42,"_43":61,"_45":46,"_47":79,"_17":49,"_50":24,"_52":63,"_54":55,"_56":-5,"_76":240,"_18":241},{"_35":36,"_13":37,"_38":39,"_40":-5,"_41":42,"_43":44,"_45":46,"_47":75,"_17":49,"_50":51,"_52":53,"_54":55,"_56":-5,"_76":238,"_18":239},[],[37],[],[59],[],[66,89],[],[66,98],[],[66,106,116],[],[66,106,124],[],[66,106,132],[231,232,233],[66,106],[230,234,235],[66],["D",1779214164558],["D",1789501878689],{"_11":12,"_194":190},{"_11":12,"_188":12,"_189":190,"_148":149,"_191":192,"_193":55},{"_17":61,"_13":16,"_35":42,"_180":139,"_181":-5,"_182":-5,"_183":-5,"_184":-5,"_185":-5,"_186":14,"_187":12},"ctx",{"_173":-5,"_210":294,"_295":296,"_297":298,"_299":55,"_300":55,"_301":55,"_302":46,"_303":-5,"_304":-7,"_305":-7,"_306":49,"_307":55,"_308":55,"_309":-5,"_310":55,"_311":55,"_312":55,"_313":-5},"ENV",{"_265":266,"_267":268,"_269":16,"_270":271,"_272":273,"_274":275,"_276":277,"_278":279,"_280":281,"_282":283,"_284":285,"_286":287,"_288":289,"_290":291,"_292":293},"REACT_APP_SENTRY_DSN","https://586020d86f05489db63a554690acf1e9@o1398359.ingest.sentry.io/6724499","RENDER_GIT_COMMIT","fdb67791413f4386b4dbf18f354029a617f6160f","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