/** @jsxImportSource npm:hono@3/jsx */ import { basicAuth } from "https://esm.town/v/pomdtr/basicAuth?v=62"; import { Browserbase, type Session } from "npm:@browserbasehq/sdk"; import { Hono } from "npm:hono"; const app = new Hono(); const browserbase = new Browserbase(); function duration(session) { const startedAt = new Date(session.startedAt).getTime(); if (session.status === "RUNNING") { return (Date.now() - startedAt) / 1000; } const endedAt = new Date(session.endedAt).getTime(); return (endedAt - startedAt) / 1000; } // Route to list all sessions app.get("/", async (c) => { const sessions = await browserbase.listSessions(); const currentPage = Number(c.req.query("page") || 1); return c.html(

All sessions

Start a new session

, ); }); const formatDuration = (seconds) => { const minutes = Math.floor(seconds / 60); const hours = Math.floor(minutes / 60); if (hours > 0) { return `${hours}:${String(minutes % 60).padStart(2, "0")}:${String(Math.floor(seconds % 60)).padStart(2, "0")}`; } return `${minutes}:${String(Math.floor(seconds % 60)).padStart(2, "0")}`; }; function SessionsTable({ sessions, currentPage }: { sessions: Session[]; currentPage: number }) { const sessionsPerPage = 10; const totalPages = Math.ceil(sessions.length / sessionsPerPage); const paginatedSessions = sessions.slice( (currentPage - 1) * sessionsPerPage, currentPage * sessionsPerPage, ); return (

Status

Started

Duration

Session

{paginatedSessions.map((session) => (

{session.status[0] + session.status.toLowerCase().slice(1)}

{new Date(session.startedAt).toLocaleString()}

{formatDuration(duration(session))}

{session.id.substring(0, 6)}

))}

{[...Array(totalPages).keys()].map((page) => ( {page + 1} ))}

); } // Route to create a new session app.get("/sessions/new", async (c) => { console.log("here"); const session = await browserbase.createSession({ keepAlive: true }); console.log(session); return c.redirect(`/sessions/${session.id}`); }); // view a specific session app.get("/sessions/:session_id", async (c) => { const sessionId = c.req.param("session_id"); const session = await browserbase.getSession(sessionId); if (session.error) { return c.text(session.error, 500); } if (session.status === "COMPLETED") { return c.html(

Session Completed

{session.id}

Back to Sessions

, ); } const debugURLs = await browserbase.getDebugConnectionURLs(sessionId); return c.html(

All sessions

Session Completed

{session.id}

Session: {session.id}