[{"_1":2,"_3":-5,"_4":-5},"loaderData",{"_5":6,"_7":8,"_9":10},"actionData","errors","root",{"_200":201,"_202":203},"routes/_app.x.$handle.$name",{"_11":12,"_13":14,"_15":16,"_18":19,"_17":-7,"_150":-5,"_20":151,"_22":152,"_153":154,"_155":156,"_26":157,"_24":158,"_159":-5,"_160":-5,"_161":54,"_162":163,"_164":46,"_165":-5,"_166":-5,"_167":168},"routes/_app.x.$handle.$name.branch.$branch.code.$",{"_11":12,"_13":14,"_15":16,"_17":-7,"_18":19,"_20":21,"_22":23,"_24":25,"_26":27,"_28":-5,"_29":-5,"_30":-5,"_31":-5,"_32":-5},"handle","jeffreyyoung","name","network_activity_visualizer","branchName","main","version","path","frontend","project",{"_34":97,"_13":14,"_47":98,"_99":-5,"_100":54,"_101":102,"_103":102,"_104":-5,"_105":-5,"_106":107,"_108":90,"_109":46,"_110":46,"_111":-5,"_112":49,"_113":114,"_115":-5,"_116":-5,"_117":-5,"_118":-5,"_119":120,"_121":120,"_122":123,"_124":123,"_125":123,"_126":120,"_127":120,"_128":129,"_130":131,"_132":133,"_134":54},"tree",[61,62,63],"file",{"_34":57,"_13":19,"_37":40,"_39":-5,"_41":42,"_43":44,"_45":46,"_47":58,"_17":49,"_50":59,"_51":-5,"_53":54,"_55":-5,"_18":60},"contents",[33],"upstream","pull","ahead","behind","envVars",{"_34":35,"_13":36,"_37":38,"_39":40,"_41":42,"_43":44,"_45":46,"_47":48,"_17":49,"_50":24,"_51":52,"_53":54,"_55":-5,"_18":56},"id","5ac56ee0-9405-11f0-ab17-0224a6c84d84","index.html","fileId","5ac56fbc-9405-11f0-ab17-0224a6c84d84","parentId","f2d17730-3037-4971-9232-26977c7791f5","branchId","ffc715f2-9404-11f0-8450-0224a6c84d84","branchVersion",2,"latest",true,"createdAt",["D",1758141116705],0,"fileType","content","\n\n\n \n \n Request Activity Monitor\n \n \n \n\n\n

Request Activity Monitor

\n \n Connecting...\n

\n \n

Total Requests

Success (2xx)

Errors (4xx/5xx)

0ms

Avg Duration

\n \n

\n \n \n \n \n \n

\n \n

Live Request Feed

\n \n

\n\n \n\n","deleted",false,"label",[19,36],"5ac589b6-9405-11f0-ab17-0224a6c84d84",["D",1758141116705],"directory",[19],{"_34":80,"_13":81,"_37":82,"_39":-5,"_41":42,"_43":83,"_45":46,"_47":84,"_17":49,"_50":59,"_51":-5,"_53":54,"_55":-5,"_70":85,"_18":86},{"_34":57,"_13":19,"_37":40,"_39":-5,"_41":42,"_43":44,"_45":46,"_47":73,"_17":49,"_50":59,"_51":-5,"_53":54,"_55":-5,"_70":74,"_18":75},{"_34":64,"_13":65,"_37":66,"_39":-5,"_41":42,"_43":67,"_45":46,"_47":68,"_17":49,"_50":24,"_51":69,"_53":54,"_55":-5,"_70":71,"_18":72},"68767c46-9405-11f0-bf8e-0224a6c84d84","README.md","68767d18-9405-11f0-bf8e-0224a6c84d84",3,["D",1758141139677],"# Request Activity Monitor\n\nA real-time request activity visualization system that tracks and displays all HTTP requests to your Val Town application with live updates via Server-Sent Events (SSE).\n\n## Features\n\n- **Real-time monitoring**: Live updates of all incoming requests via SSE\n- **Request statistics**: Total requests, success rate, error count, and average response time\n- **Request details**: Method, path, status code, duration, IP address, and user agent\n- **Test endpoints**: Built-in buttons to generate test traffic\n- **Responsive design**: Works on desktop and mobile devices\n- **Always returns 200 OK**: The monitoring endpoint itself never fails\n\n## Project Structure\n\n```\n├── backend/\n│ └── index.ts # Main Hono server with SSE and request logging\n├── frontend/\n│ └── index.html # Dashboard UI with live updates\n└── README.md # This file\n```\n\n## How It Works\n\n1. **Request Middleware**: All requests are logged via Hono middleware that captures:\n - Request method, path, and headers\n - Response status and duration\n - Client IP and user agent\n - Unique request ID and timestamp\n\n2. **Server-Sent Events**: The `/api/events` endpoint maintains persistent connections with browsers and broadcasts new request data in real-time\n\n3. **In-Memory Storage**: Recent requests (last 100) are stored in memory for quick access and initial page load\n\n4. **Live Dashboard**: The frontend connects via SSE and updates the UI immediately when new requests arrive\n\n## API Endpoints\n\n- `GET /` - Main dashboard (always returns 200 OK)\n- `GET /api/events` - SSE endpoint for live request updates\n- `GET /api/requests` - JSON API for recent requests\n- `GET /api/test` - Test endpoint for generating activity\n- `POST /api/test` - Test POST endpoint\n- `GET /api/slow` - Slow endpoint (2s delay) for testing\n- `GET /*` - Any other path returns 404 (also logged)\n\n## Usage\n\n1. Visit the main dashboard at `/`\n2. The page will automatically connect to the SSE stream\n3. Use the test buttons to generate sample requests\n4. Watch requests appear in real-time with full details\n5. Monitor statistics in the summary cards\n\n## Technical Details\n\n- Built with Hono for the backend API framework\n- Uses native Server-Sent Events for real-time updates\n- TailwindCSS for responsive styling\n- No external dependencies for the frontend\n- Handles SSE connection failures with automatic reconnection\n- Animates new requests for better visual feedback\n\n## Connection Status\n\nThe dashboard shows connection status with colored indicators:\n- 🟢 Green: Connected to SSE stream\n- 🟡 Yellow: Connecting/reconnecting\n- 🔴 Red: Disconnected\n\nThe system automatically attempts to reconnect if the SSE connection is lost.","children",[],[65],["D",1758141116705],[76],[19],{"_34":35,"_13":36,"_37":38,"_39":40,"_41":42,"_43":44,"_45":46,"_47":77,"_17":49,"_50":24,"_51":52,"_53":54,"_55":-5,"_70":78,"_18":79},["D",1758141116705],[],[19,36],"38e7ec44-9405-11f0-bc07-0224a6c84d84","backend","fe8a0078-b9ed-4ffd-a8d2-66338c03bb7e",1,["D",1758141059888],[87],[81],{"_34":88,"_13":89,"_37":90,"_39":82,"_41":42,"_43":91,"_45":46,"_47":92,"_17":83,"_50":93,"_51":94,"_53":54,"_55":-5,"_70":95,"_18":96},"6adc442a-9405-11f0-aab5-0224a6c84d84","index.ts","38e7d1fa-9405-11f0-bc07-0224a6c84d84",4,["D",1758141143698],"http","import { Hono } from \"https://esm.sh/hono@3.11.7\";\nimport { readFile, serveFile } from \"https://esm.town/v/std/utils@85-main/index.ts\";\n\nconst app = new Hono();\n\n// Unwrap Hono errors to see original error details\napp.onError((err) => Promise.reject(err));\n\n// Store for active SSE connections\nconst sseConnections = new Set();\n\n// Store recent requests (in-memory for simplicity)\nconst recentRequests: Array<{\n id: string;\n timestamp: string;\n method: string;\n path: string;\n userAgent?: string;\n ip?: string;\n status: number;\n duration?: number;\n}> = [];\n\n// Middleware to log all requests\napp.use(\"*\", async (c, next) => {\n const startTime = Date.now();\n const requestId = crypto.randomUUID();\n \n const requestData = {\n id: requestId,\n timestamp: new Date().toISOString(),\n method: c.req.method,\n path: c.req.path,\n userAgent: c.req.header(\"user-agent\"),\n ip: c.req.header(\"cf-connecting-ip\") || c.req.header(\"x-forwarded-for\") || \"unknown\",\n status: 200, // Will be updated after response\n };\n\n await next();\n \n const duration = Date.now() - startTime;\n const finalRequestData = {\n ...requestData,\n status: c.res.status,\n duration,\n };\n\n // Add to recent requests (keep last 100)\n recentRequests.unshift(finalRequestData);\n if (recentRequests.length > 100) {\n recentRequests.pop();\n }\n\n // Broadcast to all SSE connections\n const message = `data: ${JSON.stringify(finalRequestData)}\\n\\n`;\n for (const controller of sseConnections) {\n try {\n controller.enqueue(new TextEncoder().encode(message));\n } catch (error) {\n // Remove dead connections\n sseConnections.delete(controller);\n }\n }\n});\n\n// Serve frontend files\napp.get(\"/frontend/*\", c => serveFile(c.req.path, import.meta.url));\napp.get(\"/shared/*\", c => serveFile(c.req.path, import.meta.url));\n\n// Main dashboard route\napp.get(\"/\", async c => {\n let html = await readFile(\"/frontend/index.html\", import.meta.url);\n \n // Inject initial data\n const initialData = {\n recentRequests: recentRequests.slice(0, 50), // Send last 50 requests\n };\n \n const dataScript = ``;\n \n html = html.replace(\"\", `${dataScript}`);\n return c.html(html);\n});\n\n// SSE endpoint for live updates\napp.get(\"/api/events\", c => {\n const stream = new ReadableStream({\n start(controller) {\n // Add connection to active connections\n sseConnections.add(controller);\n \n // Send initial connection message\n const welcomeMessage = `data: ${JSON.stringify({\n type: \"connected\",\n timestamp: new Date().toISOString(),\n message: \"Connected to request activity stream\"\n })}\\n\\n`;\n \n controller.enqueue(new TextEncoder().encode(welcomeMessage));\n },\n cancel() {\n // Remove connection when client disconnects\n sseConnections.delete(this);\n }\n });\n\n return new Response(stream, {\n headers: {\n \"Content-Type\": \"text/event-stream\",\n \"Cache-Control\": \"no-cache\",\n \"Connection\": \"keep-alive\",\n },\n });\n});\n\n// API endpoint to get recent requests\napp.get(\"/api/requests\", c => {\n return c.json({\n requests: recentRequests.slice(0, 50),\n total: recentRequests.length,\n });\n});\n\n// Test endpoints to generate activity\napp.get(\"/api/test\", c => {\n return c.json({ message: \"Test endpoint hit!\", timestamp: new Date().toISOString() });\n});\n\napp.post(\"/api/test\", async c => {\n const body = await c.req.json().catch(() => ({}));\n return c.json({ message: \"POST test endpoint hit!\", body, timestamp: new Date().toISOString() });\n});\n\napp.get(\"/api/slow\", async c => {\n // Simulate slow endpoint\n await new Promise(resolve => setTimeout(resolve, 2000));\n return c.json({ message: \"Slow endpoint completed\", timestamp: new Date().toISOString() });\n});\n\n// Catch-all route for 404s\napp.notFound(c => {\n return c.json({ error: \"Not found\", path: c.req.path }, 404);\n});\n\nexport default app.fetch;",[],[81,89],"ffc6db14-9404-11f0-8450-0224a6c84d84",["D",1758140964046],"deletedAt","legacyEnvVars","privacy","public","httpPrivacy","description","imageUrl","userId","3b4e808e-fb1b-4130-93cd-9c30e28e6cfb","pinnedFileId","pinPreview","pinMigrated","screenshotVersion","likeCount","orgId","fd372ed8-9526-47fc-9a7a-9bdb45c58177","tursoName","tursoHostname","tursoMeasuredAt","pinned","userPerm","r","valPerm","blobPerm","rw","emailPerm","sqlitePerm","projectPerm","telemetryPerm","user",{"_11":12,"_149":145},"org",{"_11":12,"_143":-5,"_144":145,"_106":107,"_146":147,"_148":54},"branch",{"_17":91,"_13":16,"_34":42,"_135":97,"_136":-5,"_137":-5,"_138":-5,"_139":-5,"_140":-5,"_141":14,"_142":12},"isOwned","projectId","forkedBranchId","forkedBranchVersion","forkedProjectPrivacy","forkedProjectId","forkedProjectOrgId","projectName","userHandle","displayName","avatar","https://img.clerk.com/eyJ0eXBlIjoicHJveHkiLCJzcmMiOiJodHRwczovL2ltYWdlcy5jbGVyay5kZXYvb2F1dGhfZ2l0aHViL2ltZ18yYlBiWmVId3NYSFQ1VmtnTTZSQ1BCM082Tk0ifQ","tier","free","canRestrictVals","profileImageUrl","adoptOrgId",{"_34":97,"_13":14,"_47":196,"_99":-5,"_100":54,"_101":102,"_103":102,"_104":-5,"_105":-5,"_106":107,"_108":90,"_109":46,"_110":46,"_111":-5,"_112":49,"_113":114,"_115":-5,"_116":-5,"_117":-5,"_118":-5,"_119":120,"_121":120,"_122":123,"_124":123,"_125":123,"_126":120,"_127":120,"_128":197,"_130":198,"_132":199,"_134":54},[181,183,185],"files",[181,182,183,184,185],"counts",{"_172":49,"_173":83,"_174":49,"_32":175,"_176":177},[170],{"_34":57,"_13":19,"_37":40,"_39":-5,"_41":42,"_43":44,"_45":46,"_47":58,"_17":49,"_50":59,"_51":-5,"_53":54,"_55":-5,"_18":169},"upstreamProject","upstreamBranch","emptyEnvVars","flags",[],"hasHttpFiles","grants","orgs","customDomains",{},[19],{"_34":35,"_13":36,"_37":38,"_39":40,"_41":42,"_43":44,"_45":46,"_47":48,"_17":49,"_50":24,"_51":52,"_53":54,"_55":-5,"_18":171},[19,36],"pulls","branches","forks",{"_178":49,"_180":49},"connections",{"_178":49,"_179":49},"count","unfilledCount","emptyCount",{"_34":80,"_13":81,"_37":82,"_39":-5,"_41":42,"_43":83,"_45":46,"_47":84,"_17":49,"_50":59,"_51":-5,"_53":54,"_55":-5,"_70":194,"_18":195},{"_34":88,"_13":89,"_37":90,"_39":82,"_41":42,"_43":91,"_45":46,"_47":92,"_17":83,"_50":93,"_51":94,"_53":54,"_55":-5,"_70":192,"_18":193},{"_34":57,"_13":19,"_37":40,"_39":-5,"_41":42,"_43":44,"_45":46,"_47":73,"_17":49,"_50":59,"_51":-5,"_53":54,"_55":-5,"_70":190,"_18":191},{"_34":35,"_13":36,"_37":38,"_39":40,"_41":42,"_43":44,"_45":46,"_47":77,"_17":49,"_50":24,"_51":52,"_53":54,"_55":-5,"_70":188,"_18":189},{"_34":64,"_13":65,"_37":66,"_39":-5,"_41":42,"_43":67,"_45":46,"_47":68,"_17":49,"_50":24,"_51":69,"_53":54,"_55":-5,"_70":186,"_18":187},[],[65],[],[19,36],[184],[19],[],[81,89],[182],[81],["D",1758140964046],{"_11":12,"_149":145},{"_11":12,"_143":-5,"_144":145,"_106":107,"_146":147,"_148":54},{"_17":91,"_13":16,"_34":42,"_135":97,"_136":-5,"_137":-5,"_138":-5,"_139":-5,"_140":-5,"_141":14,"_142":12},"ctx",{"_128":-5,"_166":233,"_234":235,"_236":237,"_238":54,"_239":54,"_240":54,"_241":46,"_242":-5,"_243":-7,"_244":-7,"_245":49,"_246":54,"_247":54,"_248":-5,"_249":54,"_250":54,"_251":54,"_252":-5},"ENV",{"_204":205,"_206":207,"_208":16,"_209":210,"_211":212,"_213":214,"_215":216,"_217":218,"_219":220,"_221":222,"_223":224,"_225":226,"_227":228,"_229":230,"_231":232},"REACT_APP_SENTRY_DSN","https://586020d86f05489db63a554690acf1e9@o1398359.ingest.sentry.io/6724499","RENDER_GIT_COMMIT","e8c4b7030cb7600e4eb0736b15f422c8b8bd130f","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"]