[{"_1":2,"_3":-5,"_4":-5},"loaderData",{"_5":6,"_7":8,"_9":10},"actionData","errors","root",{"_206":207,"_208":209},"routes/_app.x.$handle.$name",{"_11":12,"_13":14,"_15":16,"_18":19,"_17":-7,"_154":-5,"_20":155,"_22":156,"_157":158,"_159":160,"_25":161,"_24":-5,"_162":-5,"_163":-5,"_164":54,"_165":166,"_167":46,"_168":-5,"_169":-5,"_170":171},"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","jeffreyyoung","name","network_activity_visualizer","branchName","main","version","path","","project",{"_35":101,"_13":14,"_47":102,"_103":-5,"_104":54,"_105":106,"_107":106,"_108":-5,"_109":-5,"_110":111,"_112":94,"_113":46,"_114":46,"_115":-5,"_116":49,"_117":118,"_119":-5,"_120":-5,"_121":-5,"_122":-5,"_123":124,"_125":124,"_126":127,"_128":127,"_129":127,"_130":124,"_131":124,"_132":133,"_134":135,"_136":137,"_138":54},"tree",[70,71,72],"file","contents",[32,33,34],"upstream","pull","ahead","behind","envVars",{"_35":64,"_13":65,"_38":66,"_40":-5,"_41":42,"_43":67,"_45":46,"_47":68,"_17":49,"_50":62,"_51":-5,"_53":54,"_55":-5,"_18":69},{"_35":57,"_13":58,"_38":59,"_40":-5,"_41":42,"_43":60,"_45":46,"_47":61,"_17":49,"_50":62,"_51":-5,"_53":54,"_55":-5,"_18":63},{"_35":36,"_13":37,"_38":39,"_40":-5,"_41":42,"_43":44,"_45":46,"_47":48,"_17":49,"_50":24,"_51":52,"_53":54,"_55":-5,"_18":56},"id","68767c46-9405-11f0-bf8e-0224a6c84d84","README.md","fileId","68767d18-9405-11f0-bf8e-0224a6c84d84","parentId","branchId","ffc715f2-9404-11f0-8450-0224a6c84d84","branchVersion",3,"latest",true,"createdAt",["D",1758141139677],0,"fileType","content","# 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.","deleted",false,"label",[37],"5ac589b6-9405-11f0-ab17-0224a6c84d84","frontend","f2d17730-3037-4971-9232-26977c7791f5",2,["D",1758141116705],"directory",[58],"38e7ec44-9405-11f0-bc07-0224a6c84d84","backend","fe8a0078-b9ed-4ffd-a8d2-66338c03bb7e",1,["D",1758141059888],[65],{"_35":64,"_13":65,"_38":66,"_40":-5,"_41":42,"_43":67,"_45":46,"_47":88,"_17":49,"_50":62,"_51":-5,"_53":54,"_55":-5,"_74":89,"_18":90},{"_35":57,"_13":58,"_38":59,"_40":-5,"_41":42,"_43":60,"_45":46,"_47":77,"_17":49,"_50":62,"_51":-5,"_53":54,"_55":-5,"_74":78,"_18":79},{"_35":36,"_13":37,"_38":39,"_40":-5,"_41":42,"_43":44,"_45":46,"_47":73,"_17":49,"_50":24,"_51":52,"_53":54,"_55":-5,"_74":75,"_18":76},["D",1758141139677],"children",[],[37],["D",1758141116705],[80],[58],{"_35":81,"_13":82,"_38":83,"_40":59,"_41":42,"_43":60,"_45":46,"_47":84,"_17":49,"_50":24,"_51":85,"_53":54,"_55":-5,"_74":86,"_18":87},"5ac56ee0-9405-11f0-ab17-0224a6c84d84","index.html","5ac56fbc-9405-11f0-ab17-0224a6c84d84",["D",1758141116705],"\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",[],[58,82],["D",1758141059888],[91],[65],{"_35":92,"_13":93,"_38":94,"_40":66,"_41":42,"_43":95,"_45":46,"_47":96,"_17":67,"_50":97,"_51":98,"_53":54,"_55":-5,"_74":99,"_18":100},"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;",[],[65,93],"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,"_153":149},"org",{"_11":12,"_147":-5,"_148":149,"_110":111,"_150":151,"_152":54},"branch",{"_17":95,"_13":16,"_35":42,"_139":101,"_140":-5,"_141":-5,"_142":-5,"_143":-5,"_144":-5,"_145":14,"_146":12},"isOwned","projectId","forkedBranchId","forkedBranchVersion","forkedProjectPrivacy","forkedProjectId","forkedProjectOrgId","projectName","userHandle","displayName","avatar","https://img.clerk.com/eyJ0eXBlIjoicHJveHkiLCJzcmMiOiJodHRwczovL2ltYWdlcy5jbGVyay5kZXYvb2F1dGhfZ2l0aHViL2ltZ18yYlBiWmVId3NYSFQ1VmtnTTZSQ1BCM082Tk0ifQ","tier","free","canRestrictVals","profileImageUrl","adoptOrgId",{"_35":101,"_13":14,"_47":202,"_103":-5,"_104":54,"_105":106,"_107":106,"_108":-5,"_109":-5,"_110":111,"_112":94,"_113":46,"_114":46,"_115":-5,"_116":49,"_117":118,"_119":-5,"_120":-5,"_121":-5,"_122":-5,"_123":124,"_125":124,"_126":127,"_128":127,"_129":127,"_130":124,"_131":124,"_132":203,"_134":204,"_136":205,"_138":54},[187,189,191],"files",[187,188,189,190,191],"counts",{"_178":49,"_179":67,"_180":49,"_31":181,"_182":183},[172,173,174],"upstreamProject","upstreamBranch","emptyEnvVars","flags",[],"hasHttpFiles","grants","orgs","customDomains",{},{"_35":64,"_13":65,"_38":66,"_40":-5,"_41":42,"_43":67,"_45":46,"_47":68,"_17":49,"_50":62,"_51":-5,"_53":54,"_55":-5,"_18":177},{"_35":57,"_13":58,"_38":59,"_40":-5,"_41":42,"_43":60,"_45":46,"_47":61,"_17":49,"_50":62,"_51":-5,"_53":54,"_55":-5,"_18":176},{"_35":36,"_13":37,"_38":39,"_40":-5,"_41":42,"_43":44,"_45":46,"_47":48,"_17":49,"_50":24,"_51":52,"_53":54,"_55":-5,"_18":175},[37],[58],[65],"pulls","branches","forks",{"_184":49,"_186":49},"connections",{"_184":49,"_185":49},"count","unfilledCount","emptyCount",{"_35":64,"_13":65,"_38":66,"_40":-5,"_41":42,"_43":67,"_45":46,"_47":88,"_17":49,"_50":62,"_51":-5,"_53":54,"_55":-5,"_74":200,"_18":201},{"_35":92,"_13":93,"_38":94,"_40":66,"_41":42,"_43":95,"_45":46,"_47":96,"_17":67,"_50":97,"_51":98,"_53":54,"_55":-5,"_74":198,"_18":199},{"_35":57,"_13":58,"_38":59,"_40":-5,"_41":42,"_43":60,"_45":46,"_47":77,"_17":49,"_50":62,"_51":-5,"_53":54,"_55":-5,"_74":196,"_18":197},{"_35":81,"_13":82,"_38":83,"_40":59,"_41":42,"_43":60,"_45":46,"_47":84,"_17":49,"_50":24,"_51":85,"_53":54,"_55":-5,"_74":194,"_18":195},{"_35":36,"_13":37,"_38":39,"_40":-5,"_41":42,"_43":44,"_45":46,"_47":73,"_17":49,"_50":24,"_51":52,"_53":54,"_55":-5,"_74":192,"_18":193},[],[37],[],[58,82],[190],[58],[],[65,93],[188],[65],["D",1758140964046],{"_11":12,"_153":149},{"_11":12,"_147":-5,"_148":149,"_110":111,"_150":151,"_152":54},{"_17":95,"_13":16,"_35":42,"_139":101,"_140":-5,"_141":-5,"_142":-5,"_143":-5,"_144":-5,"_145":14,"_146":12},"ctx",{"_132":-5,"_169":239,"_240":241,"_242":243,"_244":54,"_245":54,"_246":54,"_247":46,"_248":-5,"_249":-7,"_250":-7,"_251":49,"_252":54,"_253":54,"_254":-5,"_255":54,"_256":54,"_257":54,"_258":-5},"ENV",{"_210":211,"_212":213,"_214":16,"_215":216,"_217":218,"_219":220,"_221":222,"_223":224,"_225":226,"_227":228,"_229":230,"_231":232,"_233":234,"_235":236,"_237":238},"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"]

Code