[{"_1":2,"_3":-5,"_4":-5},"loaderData",{"_5":6,"_7":8,"_9":10},"actionData","errors","root",{"_191":192,"_193":194},"routes/_app.x.$handle.$name",{"_95":94,"_32":46,"_103":85,"_27":104,"_13":14,"_105":-5,"_11":106,"_107":108,"_109":110,"_111":112,"_113":114,"_20":-5,"_115":-5,"_116":-5,"_117":25,"_118":119,"_120":58,"_121":-5,"_122":-5,"_123":124},"routes/_app.x.$handle.$name.branch.$branch.version.$version.diff",{"_11":12,"_13":14,"_15":16,"_17":-5,"_18":-5},"project",{"_44":45,"_32":46,"_39":47,"_48":-5,"_49":25,"_50":51,"_52":51,"_53":-5,"_54":-5,"_18":55,"_56":31,"_57":58,"_59":58,"_60":-5,"_61":62,"_63":64,"_65":-5,"_66":-5,"_67":-5,"_68":-5,"_69":70,"_71":70,"_72":73,"_74":73,"_75":73,"_76":70,"_77":70,"_78":79,"_80":81,"_82":83,"_84":25},"version",4,"changes",[19],"aiChatInfo","userId",{"_20":21,"_22":23,"_24":25,"_26":25,"_27":28,"_29":28},"file",{"_30":31,"_32":33,"_34":38,"_36":37,"_39":40,"_41":14,"_42":43,"_24":25},"previous",{"_30":31,"_32":33,"_34":35,"_36":37},"deleted",false,"deletedHere","path","backend/index.ts","latestPath","fileId","38e7d1fa-9405-11f0-bc07-0224a6c84d84","name","index.ts","fileType","script","content","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;","http","createdAt",["D",1758141143698],"branchVersion","branchId","ffc715f2-9404-11f0-8450-0224a6c84d84","id","ffc6db14-9404-11f0-8450-0224a6c84d84","network_activity_visualizer",["D",1758140964046],"deletedAt","legacyEnvVars","privacy","public","httpPrivacy","description","imageUrl","3b4e808e-fb1b-4130-93cd-9c30e28e6cfb","pinnedFileId","pinPreview",true,"pinMigrated","screenshotVersion","likeCount",0,"orgId","fd372ed8-9526-47fc-9a7a-9bdb45c58177","tursoName","tursoHostname","tursoMeasuredAt","pinned","userPerm","r","valPerm","blobPerm","rw","emailPerm","sqlitePerm","projectPerm","telemetryPerm","user",{"_95":94,"_102":98},"org",{"_95":94,"_96":-5,"_97":98,"_18":55,"_99":100,"_101":25},"branch",{"_13":14,"_32":85,"_44":43,"_86":45,"_87":-5,"_88":-5,"_89":-5,"_90":-5,"_91":-5,"_92":46,"_93":94},"isOwned","main","projectId","forkedBranchId","forkedBranchVersion","forkedProjectPrivacy","forkedProjectId","forkedProjectOrgId","projectName","userHandle","jeffreyyoung","handle","displayName","avatar","https://img.clerk.com/eyJ0eXBlIjoicHJveHkiLCJzcmMiOiJodHRwczovL2ltYWdlcy5jbGVyay5kZXYvb2F1dGhfZ2l0aHViL2ltZ18yYlBiWmVId3NYSFQ1VmtnTTZSQ1BCM082Tk0ifQ","tier","free","canRestrictVals","profileImageUrl","branchName","","adoptOrgId",{"_44":45,"_32":46,"_39":187,"_48":-5,"_49":25,"_50":51,"_52":51,"_53":-5,"_54":-5,"_18":55,"_56":31,"_57":58,"_59":58,"_60":-5,"_61":62,"_63":64,"_65":-5,"_66":-5,"_67":-5,"_68":-5,"_69":70,"_71":70,"_72":73,"_74":73,"_75":73,"_76":70,"_77":70,"_78":188,"_80":189,"_82":190,"_84":25},"tree",[161,163,165],"files",[161,162,163,164,165],"counts",{"_151":62,"_152":148,"_153":62,"_154":155,"_156":157},"contents",[125,126,127],"upstreamProject","upstreamBranch","emptyEnvVars","flags",[],"hasHttpFiles","grants","orgs","customDomains",{},{"_44":145,"_32":146,"_30":147,"_131":-5,"_42":43,"_41":148,"_133":58,"_39":149,"_13":62,"_34":143,"_36":-5,"_24":25,"_136":-5,"_27":150},{"_44":138,"_32":139,"_30":140,"_131":-5,"_42":43,"_41":141,"_133":58,"_39":142,"_13":62,"_34":143,"_36":-5,"_24":25,"_136":-5,"_27":144},{"_44":128,"_32":129,"_30":130,"_131":-5,"_42":43,"_41":132,"_133":58,"_39":134,"_13":62,"_34":20,"_36":135,"_24":25,"_136":-5,"_27":137},"68767c46-9405-11f0-bf8e-0224a6c84d84","README.md","68767d18-9405-11f0-bf8e-0224a6c84d84","parentId",3,"latest",["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.","label",[129],"5ac589b6-9405-11f0-ab17-0224a6c84d84","frontend","f2d17730-3037-4971-9232-26977c7791f5",2,["D",1758141116705],"directory",[139],"38e7ec44-9405-11f0-bc07-0224a6c84d84","backend","fe8a0078-b9ed-4ffd-a8d2-66338c03bb7e",1,["D",1758141059888],[146],"pulls","branches","forks","envVars",{"_158":62,"_160":62},"connections",{"_158":62,"_159":62},"count","unfilledCount","emptyCount",{"_44":145,"_32":146,"_30":147,"_131":-5,"_42":43,"_41":148,"_133":58,"_39":184,"_13":62,"_34":143,"_36":-5,"_24":25,"_136":-5,"_167":185,"_27":186},{"_44":180,"_32":33,"_30":31,"_131":147,"_42":43,"_41":14,"_133":58,"_39":181,"_13":148,"_34":38,"_36":37,"_24":25,"_136":-5,"_167":182,"_27":183},{"_44":138,"_32":139,"_30":140,"_131":-5,"_42":43,"_41":141,"_133":58,"_39":177,"_13":62,"_34":143,"_36":-5,"_24":25,"_136":-5,"_167":178,"_27":179},{"_44":170,"_32":171,"_30":172,"_131":140,"_42":43,"_41":141,"_133":58,"_39":173,"_13":62,"_34":20,"_36":174,"_24":25,"_136":-5,"_167":175,"_27":176},{"_44":128,"_32":129,"_30":130,"_131":-5,"_42":43,"_41":132,"_133":58,"_39":166,"_13":62,"_34":20,"_36":135,"_24":25,"_136":-5,"_167":168,"_27":169},["D",1758141139677],"children",[],[129],"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",[],[139,171],["D",1758141116705],[164],[139],"6adc442a-9405-11f0-aab5-0224a6c84d84",["D",1758141143698],[],[146,33],["D",1758141059888],[162],[146],["D",1758140964046],{"_95":94,"_102":98},{"_95":94,"_96":-5,"_97":98,"_18":55,"_99":100,"_101":25},{"_13":14,"_32":85,"_44":43,"_86":45,"_87":-5,"_88":-5,"_89":-5,"_90":-5,"_91":-5,"_92":46,"_93":94},"ctx",{"_78":-5,"_122":224,"_225":226,"_227":228,"_229":25,"_230":25,"_231":25,"_232":58,"_233":-5,"_234":-7,"_235":-7,"_236":62,"_237":25,"_238":25,"_239":-5,"_240":25,"_241":25,"_242":25,"_243":-5},"ENV",{"_195":196,"_197":198,"_199":85,"_200":201,"_202":203,"_204":205,"_206":207,"_208":209,"_210":211,"_212":213,"_214":215,"_216":217,"_218":219,"_220":221,"_222":223},"REACT_APP_SENTRY_DSN","https://586020d86f05489db63a554690acf1e9@o1398359.ingest.sentry.io/6724499","RENDER_GIT_COMMIT","a3e067d4463eea85f6334f8e583e8516ae58c4f6","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"]

Diff · v4