Merge pull request 'chore(deps): update dependency @types/node to v24.10.7' (#34) from renovate/all-dependencies into main

Reviewed-on: #30

Dockerfile

@@ -1,4 +1,4 @@
-FROM node:22-alpine AS base
+FROM node:24-slim AS base
 WORKDIR /app
 ENV NEXT_TELEMETRY_DISABLED=1
 
@@ -13,7 +13,7 @@ COPY --from=deps /app/node_modules ./node_modules
 COPY . .
 RUN npm run build
 
-FROM gcr.io/distroless/nodejs22-debian12 AS runner
+FROM gcr.io/distroless/nodejs24-debian13 AS runner
 WORKDIR /app
 ENV NODE_ENV=production
 ENV NEXT_TELEMETRY_DISABLED=1

app/api/session/[...params]/route.ts

@@ -0,0 +1,60 @@
+import { auth } from "@/lib/auth";
+import { headers } from "next/headers"
+import { NextRequest } from "next/server";
+
+export async function PATCH(req: NextRequest, context: { params: Promise<{ params: string[] }> }) {
+  const { params } = await context.params;
+  const requestHeaders = await headers();
+  const result = await auth.api.getToken({ headers: requestHeaders }).catch(() => null);
+  if (!result || typeof result !== "object" || !("token" in result)) {
+    return new Response("Unauthorized", { status: 401 });
+  }
+
+  const { token } = result as { token: string };
+  if (!token) {
+    return new Response("Unauthorized", { status: 401 });
+  }
+
+  const data = await fetch(`${process.env.API_URL}/api/session/${params.join("/")}`, {
+    method: "PATCH",
+    headers: {
+      authorization: `Bearer ${token}`,
+    },
+    cache: "no-store",
+    body: await req.text(),
+  })
+
+  return data;
+}
+
+export async function DELETE(req: NextRequest, context: { params: Promise<{ params: string[] }> }) {
+  const { params } = await context.params;
+  if (!params || params.length < 3) {
+    return new Response("Bad Request", { status: 400 });
+  }
+  const node = params[0]
+  const tunnelType = params[1]
+  const slug = params[2]
+
+  const requestHeaders = await headers();
+  const result = await auth.api.getToken({ headers: requestHeaders }).catch(() => null);
+  if (!result || typeof result !== "object" || !("token" in result)) {
+    return new Response("Unauthorized", { status: 401 });
+  }
+
+  const { token } = result as { token: string };
+  if (!token) {
+    return new Response("Unauthorized", { status: 401 });
+  }
+
+  const data = await fetch(`${process.env.API_URL}/api/session/${node}/${tunnelType}/${slug}`, {
+    method: "DELETE",
+    headers: {
+      authorization: `Bearer ${token}`,
+    },
+    cache: "no-store",
+    body: await req.text(),
+  })
+
+  return data;
+}

app/dashboard/dashboard-client.tsx

@@ -0,0 +1,556 @@
+"use client"
+
+import { useEffect, useState, type FormEvent } from "react"
+import Link from "next/link"
+import { useRouter } from "next/navigation"
+import TunnelConfig, { type TunnelConfig as TunnelConfigType, type Server } from "@/components/tunnel-config"
+import { authClient } from "@/lib/auth-client"
+
+const defaultConfig: TunnelConfigType = {
+  type: "http",
+  serverPort: 443,
+  localPort: 8000,
+}
+
+const STOP_CONFIRMATION_TEXT = "YEAH SURE BUDDY"
+
+const formatStartedAgo = (timestamp?: ApiTimestamp): string | undefined => {
+  if (!timestamp) return undefined
+  const startedMs = timestamp.seconds * 1000 + Math.floor(timestamp.nanos / 1_000_000)
+  const diffSeconds = Math.max(0, Math.floor((Date.now() - startedMs) / 1000))
+
+  if (diffSeconds < 60) return `${diffSeconds}s ago`
+  const diffMinutes = Math.floor(diffSeconds / 60)
+  if (diffMinutes < 60) return `${diffMinutes}m ago`
+  const diffHours = Math.floor(diffMinutes / 60)
+  if (diffHours < 24) return `${diffHours}h ago`
+  const diffDays = Math.floor(diffHours / 24)
+  return `${diffDays}d ago`
+}
+
+const toActiveConnection = (session: ApiSession): ActiveConnection => {
+  const startedAgo = formatStartedAgo(session.started_at)
+
+  return {
+    id: session.slug || `${session.node}-${session.started_at?.seconds ?? Date.now()}`,
+    name: session.slug || session.node || "Unknown tunnel",
+    slug: session.slug,
+    status: session.active ? "connected" : "error",
+    protocol: (session.forwarding_type || "http").toLowerCase(),
+    serverLabel: session.node || "Unknown node",
+    node: session.node,
+    remote: session.slug ? `${session.slug}.${session.node}` : session.node || "—",
+    startedAgo,
+  }
+}
+
+type ApiTimestamp = {
+  seconds: number
+  nanos: number
+}
+
+type ApiSession = {
+  node: string
+  forwarding_type: "HTTP" | "HTTPS" | "TCP" | string
+  slug: string
+  user_id: string
+  active: boolean
+  started_at?: ApiTimestamp
+}
+
+type ApiSessionList = ApiSession[]
+
+type SessionResponse = Awaited<ReturnType<typeof authClient.getSession>>
+
+interface DashboardClientProps {
+  initialActiveConnections: ApiSessionList
+}
+
+type ActiveConnectionStatus = "connected" | "pending" | "error"
+
+type ActiveConnection = {
+  id: string
+  name: string
+  slug?: string
+  status: ActiveConnectionStatus
+  protocol: string
+  serverLabel: string
+  node?: string
+  remote: string
+  localPort?: number
+  serverPort?: number
+  startedAgo?: string
+}
+
+export default function DashboardClient({ initialActiveConnections }: DashboardClientProps) {
+  const router = useRouter()
+  const [selectedServer, setSelectedServer] = useState<Server | null>(null)
+  const [tunnelConfig, setTunnelConfig] = useState<TunnelConfigType>(defaultConfig)
+  const [statusMessage, setStatusMessage] = useState<string | null>(null)
+  const [activeConnections, setActiveConnections] = useState<ActiveConnection[]>(
+    initialActiveConnections.map(toActiveConnection),
+  )
+  const { data: cachedSession } = authClient.useSession()
+  const [session, setSession] = useState<SessionResponse["data"] | null>(cachedSession ?? null)
+  const [openActionId, setOpenActionId] = useState<string | null>(null)
+  const [stopModal, setStopModal] = useState<{
+    connectionId: string
+    node?: string
+    slug?: string
+    protocol?: string
+    name: string
+  } | null>(null)
+  const [stopModalInput, setStopModalInput] = useState("")
+  const [stopSaving, setStopSaving] = useState(false)
+  const [stopError, setStopError] = useState<string | null>(null)
+  const [slugModal, setSlugModal] = useState<{
+    connectionId: string
+    currentSlug: string
+    newSlug: string
+    node: string
+  } | null>(null)
+  const [slugError, setSlugError] = useState<string | null>(null)
+  const [slugSaving, setSlugSaving] = useState(false)
+
+  useEffect(() => {
+    setActiveConnections(initialActiveConnections.map(toActiveConnection))
+  }, [initialActiveConnections])
+
+  useEffect(() => {
+    if (!session && cachedSession) {
+      setSession(cachedSession)
+    }
+  }, [cachedSession, session])
+
+  const openStopModal = (connection: ActiveConnection) => {
+    setStopModal({
+      connectionId: connection.id,
+      node: connection.node || connection.serverLabel,
+      slug: connection.slug || connection.name,
+      protocol: connection.protocol,
+      name: connection.name,
+    })
+    setStopModalInput("")
+    setStopError(null)
+    setOpenActionId(null)
+  }
+
+  const closeStopModal = () => {
+    setStopModal(null)
+    setStopModalInput("")
+    setStopSaving(false)
+    setStopError(null)
+  }
+
+  const stopConnection = async () => {
+    if (!stopModal) return
+
+    if (stopModalInput.trim() !== STOP_CONFIRMATION_TEXT) {
+      setStopError("Please type the confirmation phrase exactly.")
+      return
+    }
+
+    const node = stopModal.node
+    const tunnelType = stopModal.protocol?.toLowerCase()
+    const slug = stopModal.slug
+
+    if (!node || !tunnelType || !slug) {
+      setStopError("Missing connection details; cannot stop.")
+      return
+    }
+
+    setStopSaving(true)
+    setStopError(null)
+    setStatusMessage(null)
+
+    try {
+      const endpoint = `/api/session/${encodeURIComponent(node)}/${encodeURIComponent(tunnelType)}/${encodeURIComponent(slug)}`
+      const response = await fetch(endpoint, {
+        method: "DELETE",
+      })
+
+      if (!response.ok) {
+        const message = await response.text()
+        setStopError(message || "Failed to stop connection.")
+        return
+      }
+
+      setActiveConnections((prev) => prev.filter((conn) => conn.id !== stopModal.connectionId))
+      setStatusMessage("Connection stopped")
+      closeStopModal()
+    } catch (error) {
+      console.error("Failed to stop connection", error)
+      setStopError("Failed to stop connection.")
+    } finally {
+      setStopSaving(false)
+    }
+  }
+
+  const openChangeSlugModal = (connection: ActiveConnection) => {
+    setSlugModal({
+      connectionId: connection.id,
+      currentSlug: connection.name,
+      newSlug: connection.name,
+      node: connection.node || connection.serverLabel,
+    })
+    setSlugError(null)
+    setOpenActionId(null)
+  }
+
+  const closeSlugModal = () => setSlugModal(null)
+
+  const validateSlug = (value: string): string | null => {
+    const trimmed = value.trim().toLowerCase()
+    if (trimmed.length < 3 || trimmed.length > 20) return "Slug must be 3-20 characters."
+    if (!/^[a-z0-9-]+$/.test(trimmed)) return "Only lowercase letters, numbers, and hyphens are allowed."
+    if (trimmed.startsWith("-") || trimmed.endsWith("-")) return "No leading or trailing hyphens."
+    return null
+  }
+
+  const submitSlugChange = async (event: FormEvent<HTMLFormElement>) => {
+    event.preventDefault()
+    if (!slugModal) return
+
+    const trimmedSlug = slugModal.newSlug.trim().toLowerCase()
+    const validationError = validateSlug(trimmedSlug)
+    setSlugError(validationError)
+    if (validationError) return
+
+    setSlugSaving(true)
+    setStatusMessage(null)
+
+    try {
+      const response = await fetch(`/api/session/${slugModal.node}`, {
+        method: "PATCH",
+        headers: {
+          "Content-Type": "application/json",
+        },
+        body: JSON.stringify({ old: slugModal.currentSlug, new: trimmedSlug }),
+      })
+
+      if (!response.ok) {
+        const message = await response.text()
+        setSlugError(message || "Failed to update slug.")
+        return
+      }
+
+      setActiveConnections((prev) =>
+        prev.map((conn) =>
+          conn.id === slugModal.connectionId
+            ? {
+              ...conn,
+              name: trimmedSlug,
+              remote: conn.node ? `${trimmedSlug}.${conn.node}` : trimmedSlug,
+            }
+            : conn,
+        ),
+      )
+
+      setStatusMessage("Slug updated")
+      setSlugModal(null)
+    } catch (error) {
+      console.error("Failed to update slug", error)
+      setSlugError("Failed to update slug.")
+    } finally {
+      setSlugSaving(false)
+    }
+  }
+
+  useEffect(() => {
+    if (slugModal || stopModal) {
+      const previousOverflow = document.body.style.overflow
+      document.body.style.overflow = "hidden"
+      return () => {
+        document.body.style.overflow = previousOverflow
+      }
+    }
+  }, [slugModal, stopModal])
+
+  useEffect(() => {
+    const closeOnEscape = (event: KeyboardEvent) => {
+      if (event.key === "Escape") {
+        setOpenActionId(null)
+        setSlugModal(null)
+        setStopModal(null)
+      }
+    }
+
+    window.addEventListener("keydown", closeOnEscape)
+    return () => window.removeEventListener("keydown", closeOnEscape)
+  }, [])
+
+  const stopModalContent = !stopModal
+    ? null
+    : (
+      <div className="fixed inset-0 z-30 flex items-center justify-center bg-black/60 px-4">
+        <div className="w-full max-w-md rounded-lg border border-gray-800 bg-gray-900 p-6 shadow-xl">
+          <div className="flex items-start justify-between gap-4 mb-6">
+            <div className="flex items-start gap-3">
+              <div className="flex h-10 w-10 shrink-0 items-center justify-center rounded-full bg-red-500/10 ring-1 ring-red-500/20">
+                <svg className="h-5 w-5 text-red-400" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+                  <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M12 9v2m0 4h.01m-6.938 4h13.856c1.54 0 2.502-1.667 1.732-3L13.732 4c-.77-1.333-2.694-1.333-3.464 0L3.34 16c-.77 1.333.192 3 1.732 3z" />
+                </svg>
+              </div>
+              <div>
+                <h3 className="text-lg font-semibold text-white">Stop connection</h3>
+                <p className="mt-1 text-sm text-gray-400 leading-relaxed">
+                  Type <span className="font-mono text-xs text-red-300 bg-red-950/50 px-1.5 py-0.5 rounded">{STOP_CONFIRMATION_TEXT}</span> to stop <span className="font-medium text-gray-300">{stopModal.slug || stopModal.name}</span> on {stopModal.node || "this node"}.
+                </p>
+              </div>
+            </div>
+            <button
+              onClick={closeStopModal}
+              className="flex h-8 w-8 items-center justify-center rounded-lg text-gray-400 transition-colors hover:bg-gray-800 hover:text-gray-200"
+              aria-label="Close modal"
+            >
+              <svg className="h-5 w-5" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+                <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M6 18L18 6M6 6l12 12" />
+              </svg>
+            </button>
+          </div>
+
+          <div className="mt-4 space-y-4">
+            <label className="block text-sm text-gray-300">
+              Confirmation phrase
+              <input
+                type="text"
+                value={stopModalInput}
+                onChange={(e) => {
+                  setStopModalInput(e.target.value)
+                  if (stopError) setStopError(null)
+                }}
+                placeholder={STOP_CONFIRMATION_TEXT}
+                className="mt-2 w-full rounded-md border border-gray-700 bg-gray-800 px-3 py-2 text-white focus:border-emerald-500 focus:outline-none"
+              />
+            </label>
+            {stopError && <p className="text-sm text-red-400">{stopError}</p>}
+            <div className="flex items-center justify-end gap-3">
+              <button
+                type="button"
+                onClick={closeStopModal}
+                className="rounded-md px-4 py-2 text-sm font-medium bg-gray-700 text-gray-200 border border-gray-700 hover:bg-gray-600 hover:border-gray-500"
+                disabled={stopSaving}
+              >
+                Cancel
+              </button>
+              <button
+                type="button"
+                onClick={stopConnection}
+                disabled={stopModalInput.trim() !== STOP_CONFIRMATION_TEXT || stopSaving}
+                className={`rounded-md px-4 py-2 text-sm font-medium text-white${stopModalInput.trim() === STOP_CONFIRMATION_TEXT && !stopSaving ? 'bg-red-600 hover:bg-red-700 border border-gray-500' : 'bg-red-900 hover:text-white-300 cursor-not-allowed border border-gray-700'}`}>
+                {stopSaving ? "Stopping..." : "Confirm stop"}
+              </button>
+            </div>
+          </div>
+        </div>
+      </div>
+    )
+
+  const slugModalContent = !slugModal
+    ? null
+    : (
+      <div className="fixed inset-0 z-20 flex items-center justify-center bg-black/60 px-4">
+        <div className="w-full max-w-md rounded-lg border border-gray-800 bg-gray-900 p-6 shadow-xl">
+          <div className="flex items-start justify-between gap-4">
+            <div>
+              <h3 className="text-lg font-semibold text-white">Change slug</h3>
+              <p className="text-sm text-gray-400">Update the identifier for this tunnel.</p>
+            </div>
+            <button
+              onClick={closeSlugModal}
+              className="text-gray-400 hover:text-gray-200"
+              aria-label="Close modal"
+            >
+              ×
+            </button>
+          </div>
+
+          <form onSubmit={submitSlugChange} className="mt-4 space-y-4">
+            <label className="block text-sm text-gray-300">
+              New slug
+              <input
+                type="text"
+                value={slugModal.newSlug}
+                onChange={(e) => {
+                  const nextValue = e.target.value.toLowerCase()
+                  setSlugModal((prev) => (prev ? { ...prev, newSlug: nextValue } : prev))
+                  setSlugError(validateSlug(nextValue))
+                }}
+                className="mt-2 w-full rounded-md border border-gray-700 bg-gray-800 px-3 py-2 text-white focus:border-emerald-500 focus:outline-none"
+                placeholder={slugModal.currentSlug}
+              />
+              {slugError && <p className="mt-2 text-sm text-red-400">{slugError}</p>}
+            </label>
+
+            <div className="flex items-center justify-end gap-3">
+              <button
+                type="button"
+                onClick={closeSlugModal}
+                className="rounded-md border border-gray-700 px-4 py-2 text-sm text-gray-200 hover:border-gray-500"
+              >
+                Cancel
+              </button>
+              <button
+                type="submit"
+                disabled={Boolean(slugError) || slugSaving}
+                className="rounded-md bg-emerald-600 px-4 py-2 text-sm font-medium text-white hover:bg-emerald-500 disabled:cursor-not-allowed disabled:opacity-60"
+              >
+                {slugSaving ? "Saving..." : "Save slug"}
+              </button>
+            </div>
+          </form>
+        </div>
+      </div>
+    )
+
+  return (
+    <>
+      <main className="flex-1">
+        <div className="max-w-7xl mx-auto px-4 py-8 space-y-6">
+          <div className="flex flex-col gap-1">
+            <h1 className="text-2xl font-semibold">Active Forwarding</h1>
+            <p className="text-sm text-gray-400">Live tunnels for this session.</p>
+          </div>
+
+          {statusMessage && (
+            <div className="rounded-lg border border-emerald-700 bg-emerald-900/40 px-4 py-3 text-sm text-emerald-200">
+              {statusMessage}
+            </div>
+          )}
+
+          <div className="rounded-lg border border-gray-800 bg-gray-900 p-5">
+            <div className="flex items-center justify-between mb-4">
+              <div>
+                <h2 className="text-lg font-semibold">Active Connections</h2>
+                <p className="text-sm text-gray-400">Monitor and manage your running tunnels</p>
+              </div>
+              <button
+                type="button"
+                onClick={() => router.refresh()}
+                className="text-sm text-emerald-400 hover:text-emerald-300"
+              >
+                Refresh
+              </button>
+            </div>
+
+            {activeConnections.length === 0 ? (
+              <div className="rounded-lg border border-dashed border-gray-700 bg-gray-800/60 p-6 text-center text-gray-400">
+                No active connections yet. Configure a tunnel to see it here.
+              </div>
+            ) : (
+              <div className="space-y-3">
+                {activeConnections.map((connection) => {
+                  const metaParts: string[] = []
+                  if (connection.localPort && connection.serverPort) {
+                    metaParts.push(`Local ${connection.localPort} → Server ${connection.serverPort}`)
+                  }
+                  if (connection.startedAgo) {
+                    metaParts.push(connection.startedAgo)
+                  }
+                  const metaText = metaParts.length > 0 ? metaParts.join(" · ") : "No session metadata yet"
+
+                  return (
+                    <div
+                      key={connection.id}
+                      className="rounded-lg border border-gray-800 bg-gray-800/60 p-4 flex flex-col gap-3 md:flex-row md:items-center md:justify-between"
+                    >
+                      <div className="space-y-1">
+                        <div className="flex items-center gap-2">
+                          <span className="text-white font-medium">{connection.name}</span>
+                          <span
+                            className={`rounded-full px-2 py-0.5 text-xs font-semibold ${connection.status === "connected"
+                              ? "bg-emerald-900/60 text-emerald-300 border border-emerald-700"
+                              : connection.status === "pending"
+                                ? "bg-yellow-900/60 text-yellow-300 border border-yellow-700"
+                                : "bg-red-900/60 text-red-300 border border-red-700"
+                              }`}
+                          >
+                            {connection.status === "connected"
+                              ? "Connected"
+                              : connection.status === "pending"
+                                ? "Reconnecting"
+                                : "Error"}
+                          </span>
+                        </div>
+                        <p className="text-sm text-gray-300">
+                          {(connection.protocol || "http").toUpperCase()} · {connection.serverLabel}
+                        </p>
+                        {(() => {
+                          const isTcp = connection.protocol === "tcp"
+                          const isHttp = connection.protocol === "http" || connection.protocol === "https"
+                          const httpRemote = connection.remote ? `https://${connection.remote}` : "—"
+                          const tcpRemote =
+                            connection.node && connection.name
+                              ? `tcp://${connection.node}:${connection.name}`
+                              : connection.remote || "—"
+
+                          const displayRemote = isTcp ? tcpRemote : isHttp ? httpRemote : connection.remote || "—"
+
+                          return <p className="text-xs text-gray-400">{displayRemote}</p>
+                        })()}
+                        <p className="text-xs text-gray-500">{metaText}</p>
+                      </div>
+
+                      <div className="flex flex-wrap items-center gap-3 md:justify-end relative">
+                        <button
+                          onClick={() =>
+                            setOpenActionId((current) => (current === connection.id ? null : connection.id))
+                          }
+                          className="rounded-lg border border-gray-700 px-3 py-2 text-sm text-gray-200 hover:border-gray-500 transition"
+                        >
+                          Actions
+                        </button>
+
+                        {openActionId === connection.id && (
+                          <div className="absolute right-0 top-12 z-10 w-44 rounded-md border border-gray-700 bg-gray-800 shadow-lg">
+                            <button
+                              className="w-full px-3 py-2 text-left text-sm text-gray-200 hover:bg-gray-700"
+                              onClick={() => openStopModal(connection)}
+                            >
+                              Stop connection
+                            </button>
+                            {connection.protocol !== "tcp" && (
+                              <button
+                                className="w-full px-3 py-2 text-left text-sm text-gray-200 hover:bg-gray-700"
+                                onClick={() => openChangeSlugModal(connection)}
+                              >
+                                Change slug
+                              </button>
+                            )}
+                          </div>
+                        )}
+                      </div>
+                    </div>
+                  )
+                })}
+              </div>
+            )}
+          </div>
+
+          <div className="rounded-lg border border-gray-800 bg-gray-900 p-5">
+            <div className="flex flex-col gap-2 mb-4 sm:flex-row sm:items-center sm:justify-between">
+              <div>
+                <h2 className="text-lg font-semibold">Custom Tunnel Configuration</h2>
+                <p className="text-sm text-gray-400">Pick a location, test latency, and shape your tunnel exactly how you need.</p>
+              </div>
+              <Link href="/tunnel-not-found" className="text-sm text-emerald-400 hover:text-emerald-300">
+                View docs
+              </Link>
+            </div>
+
+            <TunnelConfig
+              config={tunnelConfig}
+              onConfigChange={setTunnelConfig}
+              selectedServer={selectedServer}
+              onServerSelect={setSelectedServer}
+              isAuthenticated={Boolean(session)}
+              userId={session?.user?.sshIdentifier}
+            />
+          </div>
+        </div>
+      </main>
+      {stopModalContent}
+      {slugModalContent}
+    </>
+  )
+}

app/dashboard/page.tsx

@@ -1,208 +1,39 @@
-"use client"
-
-import { useEffect, useState } from "react"
-import Link from "next/link"
-import TunnelConfig, { type TunnelConfig as TunnelConfigType, type Server } from "@/components/tunnel-config"
-import { authClient } from "@/lib/auth-client"
 import SiteHeader from "@/components/site-header"
 import SiteFooter from "@/components/site-footer"
+import { auth } from "@/lib/auth"
+import { headers } from "next/headers"
+import DashboardClient from "./dashboard-client"
+import { redirect } from "next/navigation";
 
-const defaultConfig: TunnelConfigType = {
-  type: "http",
-  serverPort: 443,
-  localPort: 8000,
-}
+export default async function DashboardPage() {
+  const requestHeaders = await headers()
+  const session = await auth.api.getSession({
+    headers: requestHeaders,
+  }).catch(() => {
+    redirect('/')
+  })
 
-type ActiveConnection = {
-  id: string
-  name: string
-  serverLabel: string
-  protocol: TunnelConfigType["type"]
-  localPort: number
-  serverPort: number
-  remote: string
-  status: "connected" | "pending" | "error"
-  latencyMs: number | null
-  dataInOut: string
-  startedAgo: string
-}
+  const { token } = await auth.api.getToken({
+    headers: requestHeaders,
+  }).catch(() => {
+    redirect('/')
+  })
 
-export default function DashboardPage() {
-  const [selectedServer, setSelectedServer] = useState<Server | null>(null)
-  const [tunnelConfig, setTunnelConfig] = useState<TunnelConfigType>(defaultConfig)
-  const [statusMessage, setStatusMessage] = useState<string | null>(null)
-  const [activeConnections, setActiveConnections] = useState<ActiveConnection[]>([
-    {
-      id: "conn-1",
-      name: "Frontend Preview",
-      serverLabel: "Singapore",
-      protocol: "http",
-      localPort: 3000,
-      serverPort: 443,
-      remote: "https://sgp.tunnl.live",
-      status: "connected",
-      latencyMs: 34,
-      dataInOut: "1.2 GB",
-      startedAgo: "3h 12m",
+  const data = await fetch(`${process.env.API_URL}/api/sessions`, {
+    method: "GET",
+    headers: {
+      "Authorization": `Bearer ${token}`,
     },
-    {
-      id: "conn-2",
-      name: "Game TCP",
-      serverLabel: "Frankfurt",
-      protocol: "tcp",
-      localPort: 25565,
-      serverPort: 20555,
-      remote: "tcp://eu.tunnl.live:20555",
-      status: "connected",
-      latencyMs: 120,
-      dataInOut: "320 MB",
-      startedAgo: "54m",
-    },
-  ])
-
-  type SessionResponse = Awaited<ReturnType<typeof authClient.getSession>>
-  const [session, setSession] = useState<SessionResponse["data"] | null>(null)
-
-  useEffect(() => {
-    const fetchSession = async () => {
-      try {
-        const result = await authClient.getSession()
-        if (result.data) {
-          setSession(result.data)
-        }
-      } catch (error) {
-        console.error("Error fetching session", error)
-      }
-    }
-
-    fetchSession()
-  }, [])
-
-  const stopConnection = (id: string) => {
-    setActiveConnections((prev) => prev.filter((conn) => conn.id !== id))
-    setStatusMessage("Connection stopped")
-  }
+    cache: "no-store",
+  })
+  const initialActiveConnections = await data.json()
 
   return (
     <div className="flex min-h-screen flex-col bg-gray-950 text-white">
-      <SiteHeader />
-
-      <main className="flex-1">
-        <div className="max-w-7xl mx-auto px-4 py-8 space-y-6">
-          <div className="flex flex-col gap-1">
-            <h1 className="text-2xl font-semibold">Active Forwarding</h1>
-            <p className="text-sm text-gray-400">Live tunnels for this session.</p>
-          </div>
-
-          {statusMessage && (
-            <div className="rounded-lg border border-emerald-700 bg-emerald-900/40 px-4 py-3 text-sm text-emerald-200">
-              {statusMessage}
-            </div>
-          )}
-
-          <div className="rounded-lg border border-gray-800 bg-gray-900 p-5">
-            <div className="flex items-center justify-between mb-4">
-              <div>
-                <h2 className="text-lg font-semibold">Active Connections</h2>
-                <p className="text-sm text-gray-400">Monitor and manage your running tunnels</p>
-              </div>
-              <Link
-                href="/tunnel-not-found"
-                className="text-sm text-emerald-400 hover:text-emerald-300"
-              >
-                View logs
-              </Link>
-            </div>
-
-            {activeConnections.length === 0 ? (
-              <div className="rounded-lg border border-dashed border-gray-700 bg-gray-800/60 p-6 text-center text-gray-400">
-                No active connections yet. Configure a tunnel to see it here.
-              </div>
-            ) : (
-              <div className="space-y-3">
-                {activeConnections.map((connection) => (
-                  <div
-                    key={connection.id}
-                    className="rounded-lg border border-gray-800 bg-gray-800/60 p-4 flex flex-col gap-3 md:flex-row md:items-center md:justify-between"
-                  >
-                    <div className="space-y-1">
-                      <div className="flex items-center gap-2">
-                        <span className="text-white font-medium">{connection.name}</span>
-                        <span
-                          className={`rounded-full px-2 py-0.5 text-xs font-semibold ${
-                            connection.status === "connected"
-                              ? "bg-emerald-900/60 text-emerald-300 border border-emerald-700"
-                              : connection.status === "pending"
-                                ? "bg-yellow-900/60 text-yellow-300 border border-yellow-700"
-                                : "bg-red-900/60 text-red-300 border border-red-700"
-                          }`}
-                        >
-                          {connection.status === "connected"
-                            ? "Connected"
-                            : connection.status === "pending"
-                              ? "Reconnecting"
-                              : "Error"}
-                        </span>
-                      </div>
-                      <p className="text-sm text-gray-300">
-                        {connection.protocol.toUpperCase()} · {connection.serverLabel}
-                      </p>
-                      <p className="text-xs text-gray-400">{connection.remote}</p>
-                      <p className="text-xs text-gray-500">
-                        Local {connection.localPort} → Server {connection.serverPort} · {connection.startedAgo}
-                      </p>
-                    </div>
-
-                    <div className="flex flex-wrap items-center gap-3 md:justify-end">
-                      <div className="text-right">
-                        <p className="text-sm text-gray-300">Latency</p>
-                        <p className="text-lg font-semibold text-white">
-                          {connection.latencyMs ? `${connection.latencyMs}ms` : "—"}
-                        </p>
-                      </div>
-                      <div className="text-right">
-                        <p className="text-sm text-gray-300">Data</p>
-                        <p className="text-lg font-semibold text-white">{connection.dataInOut}</p>
-                      </div>
-                      <button
-                        onClick={() => stopConnection(connection.id)}
-                        className="rounded-lg border border-gray-700 px-3 py-2 text-sm text-gray-200 hover:border-red-500 hover:text-red-200 transition"
-                      >
-                        Stop
-                      </button>
-                    </div>
-                  </div>
-                ))}
-              </div>
-            )}
-          </div>
-
-          <div className="rounded-lg border border-gray-800 bg-gray-900 p-5">
-            <div className="flex flex-col gap-2 mb-4 sm:flex-row sm:items-center sm:justify-between">
-              <div>
-                <h2 className="text-lg font-semibold">Custom Tunnel Configuration</h2>
-                <p className="text-sm text-gray-400">Pick a location, test latency, and shape your tunnel exactly how you need.</p>
-              </div>
-              <Link
-                href="/tunnel-not-found"
-                className="text-sm text-emerald-400 hover:text-emerald-300"
-              >
-                View docs
-              </Link>
-            </div>
-
-            <TunnelConfig
-              config={tunnelConfig}
-              onConfigChange={setTunnelConfig}
-              selectedServer={selectedServer}
-              onServerSelect={setSelectedServer}
-              isAuthenticated={Boolean(session)}
-              userId={session?.user?.id}
-            />
-          </div>
-        </div>
-      </main>
-
+      <SiteHeader session={session} />
+      <DashboardClient
+        initialActiveConnections={initialActiveConnections}
+      />
       <SiteFooter />
     </div>
   )

app/page.tsx

@@ -5,7 +5,6 @@ import TunnelConfig, { type TunnelConfig as TunnelConfigType, type Server } from
 import SiteHeader from "@/components/site-header"
 import SiteFooter from "@/components/site-footer"
 import { authClient } from "@/lib/auth-client"
-import { useEffect } from "react"
 
 const defaultConfig: TunnelConfigType = {
   type: "http",
@@ -16,26 +15,10 @@ const defaultConfig: TunnelConfigType = {
 export default function Home() {
   const [selectedServer, setSelectedServer] = useState<Server | null>(null)
   const [tunnelConfig, setTunnelConfig] = useState<TunnelConfigType>(defaultConfig)
-  type SessionData = Awaited<ReturnType<typeof authClient.getSession>>;
-  const [logedin, setLogedin] = useState<SessionData | null>(null)
-
-  useEffect(() => {
-    const fetchData = async () => {
-      try {
-        const result = await authClient.getSession()
-        if (result.data != null) {
-          setLogedin(result.data.user);
-        }
-      } catch (error) {
-        console.error('Error fetching data:', error);
-      }
-    };
-
-    fetchData();
-  }, []);
+  const { data: session } = authClient.useSession()
   return (
     <div className="flex min-h-screen flex-col bg-gray-950 text-white">
-      <SiteHeader />
+      <SiteHeader session={session}/>
       <main className="flex-1 flex flex-col items-center justify-center px-4 py-8">
         <div className="w-full max-w-4xl mx-auto">
           <div className="text-center mb-12">
@@ -52,8 +35,8 @@ export default function Home() {
             onConfigChange={setTunnelConfig}
             selectedServer={selectedServer}
             onServerSelect={setSelectedServer}
-            isAuthenticated={logedin != null ? true : false}
-            userId={logedin?.id}
+            isAuthenticated={Boolean(session)}
+            userId={session?.user?.sshIdentifier}
           />
 
           <div className="max-w-3xl mx-auto">

app/settings/page.tsx

@@ -1,40 +1,36 @@
 "use client"
 
-import { useEffect, useState } from "react"
+import { useEffect, useState } from "react";
+import { useRouter } from "next/navigation";
 import { authClient } from "@/lib/auth-client"
 import SiteHeader from "@/components/site-header"
 import SiteFooter from "@/components/site-footer"
 
 export default function SettingsPage() {
-  type SessionResponse = Awaited<ReturnType<typeof authClient.getSession>>
-  const [session, setSession] = useState<SessionResponse["data"] | null>(null)
   const [requireAuth, setRequireAuth] = useState(true)
   const [message, setMessage] = useState<string | null>(null)
+  const { data: session, isPending } = authClient.useSession();
+  const router = useRouter();
 
   useEffect(() => {
-    const loadSession = async () => {
-      try {
-        const result = await authClient.getSession()
-        if (result.data) {
-          setSession(result.data)
-        }
-      } catch (error) {
-        console.error("Failed to load session", error)
-      }
+    if (!isPending && !session) {
+      router.push('/login');
     }
+  }, [session, isPending, router]);
 
-    loadSession()
-  }, [])
-
+  if (isPending) {
+    return <div>Loading...</div>;
+  }
+  
   const handleToggle = (value: boolean) => {
     setRequireAuth(value)
     setMessage(value ? "Authentication required for tunnel requests" : "Authentication not required for tunnel requests")
     setTimeout(() => setMessage(null), 2500)
   }
 
-  return (
+  return session ? (
     <div className="flex min-h-screen flex-col bg-gray-950 text-white">
-      <SiteHeader />
+      <SiteHeader session={session} />
 
       <main className="flex-1">
         <div className="max-w-5xl mx-auto px-4 py-8 space-y-6">
@@ -80,5 +76,5 @@ export default function SettingsPage() {
       </main>
       <SiteFooter />
     </div>
-  )
+  ) : null;
 }

components/site-header.tsx

@@ -3,29 +3,16 @@
 import Link from "next/link"
 import TunnlLogo from "./tunnl-logo"
 import UserMenu from "./user-menu"
-import { useEffect, useState } from "react"
 import { authClient } from "@/lib/auth-client";
 import { redirect, RedirectType } from 'next/navigation'
 
-export default function SiteHeader() {
-    type SessionData = Awaited<ReturnType<typeof authClient.getSession>>;
-    const [logedin, setLogedin] = useState<SessionData | null>(null)
-
-    useEffect(() => {
-        const fetchData = async () => {
-            try {
-                const result = await authClient.getSession()
-                if (result.data != null) {
-                    setLogedin(result.data.user);
-                }
-            } catch (error) {
-                console.error('Error fetching data:', error);
-            }
-        };
-
-        fetchData();
-    }, []);
+type UseSessionReturn = ReturnType<typeof authClient.useSession>;
+type SessionType = UseSessionReturn extends { data: infer D } ? D : never;
+type SiteHeaderProps = {
+  session?: SessionType;
+};
 
+export default function SiteHeader({ session }: SiteHeaderProps) {
     const logout = async () => {
         await authClient.signOut({
             fetchOptions: {
@@ -47,12 +34,12 @@ export default function SiteHeader() {
                     </div>
                     
                     <div className="flex items-center gap-4">
-                        {logedin ? (
+                        {session ? (
                             <UserMenu
                                 user={{
-                                    name: logedin.name ?? "User",
-                                    email: logedin.email ?? "",
-                                    image: logedin.image ?? undefined,
+                                    name: session.user?.name ?? "User",
+                                    email: session.user.email ?? "",
+                                    image: session.user.image ?? undefined,
                                 }}
                                 onSignOut={logout}
                             />

drizzle.config.ts

@@ -1,7 +1,7 @@
 import { defineConfig } from "drizzle-kit";
 export default defineConfig({
   dialect: "postgresql",
-  schema: "./app/db/schema/*",
+  schema: "./lib/schema/*",
   out: "./drizzle",
   dbCredentials: {
     url: process.env.DATABASE_URL!

lib/auth-client.ts

@@ -1,2 +1,8 @@
 import { createAuthClient } from "better-auth/react"
-export const authClient = createAuthClient({})
+import { jwtClient } from "better-auth/client/plugins"
+import { inferAdditionalFields } from "better-auth/client/plugins";
+import { auth } from "@/lib/auth"
+
+export const authClient = createAuthClient({
+    plugins: [jwtClient(), inferAdditionalFields<typeof auth>()],
+})

lib/auth.ts

@@ -2,14 +2,25 @@ import { betterAuth } from "better-auth";
 import { drizzleAdapter } from "better-auth/adapters/drizzle";
 import { db } from "@/lib/db";
 import * as schema from "@/lib/schema/auth"
+import { jwt } from "better-auth/plugins";
 
 export const auth = betterAuth({
+    plugins: [jwt()],
     socialProviders: {
         google: {
             clientId: process.env.GOOGLE_CLIENT_ID!,
             clientSecret: process.env.GOOGLE_CLIENT_SECRET!,
         },
     },
+    user: {
+        additionalFields: {
+            sshIdentifier: {
+                type: "string",
+                nullable: false,
+                input: false,
+            }
+        },
+    },
     database: drizzleAdapter(db, {
         provider: "pg",
         schema: schema

lib/schema/auth.ts

@@ -1,8 +1,15 @@
-import { pgTable, text, timestamp, boolean } from "drizzle-orm/pg-core";
+import { relations, sql } from "drizzle-orm";
+import { pgTable, text, timestamp, boolean, index } from "drizzle-orm/pg-core";
 
 export const user = pgTable("user", {
   id: text("id").primaryKey(),
   name: text("name").notNull(),
+  sshIdentifier: text("ssh_identifier")
+    .notNull()
+    .unique()
+    .default(
+      sql`substr(encode(gen_random_bytes(16), 'hex'), 1, 32)`
+    ),
   email: text("email").notNull().unique(),
   emailVerified: boolean("email_verified").default(false).notNull(),
   image: text("image"),
@@ -13,49 +20,88 @@ export const user = pgTable("user", {
     .notNull(),
 });
 
-export const session = pgTable("session", {
+export const session = pgTable(
+  "session",
+  {
+    id: text("id").primaryKey(),
+    expiresAt: timestamp("expires_at").notNull(),
+    token: text("token").notNull().unique(),
+    createdAt: timestamp("created_at").defaultNow().notNull(),
+    updatedAt: timestamp("updated_at")
+      .$onUpdate(() => /* @__PURE__ */ new Date())
+      .notNull(),
+    ipAddress: text("ip_address"),
+    userAgent: text("user_agent"),
+    userId: text("user_id")
+      .notNull()
+      .references(() => user.id, { onDelete: "cascade" }),
+  },
+  (table) => [index("session_userId_idx").on(table.userId)],
+);
+
+export const account = pgTable(
+  "account",
+  {
+    id: text("id").primaryKey(),
+    accountId: text("account_id").notNull(),
+    providerId: text("provider_id").notNull(),
+    userId: text("user_id")
+      .notNull()
+      .references(() => user.id, { onDelete: "cascade" }),
+    accessToken: text("access_token"),
+    refreshToken: text("refresh_token"),
+    idToken: text("id_token"),
+    accessTokenExpiresAt: timestamp("access_token_expires_at"),
+    refreshTokenExpiresAt: timestamp("refresh_token_expires_at"),
+    scope: text("scope"),
+    password: text("password"),
+    createdAt: timestamp("created_at").defaultNow().notNull(),
+    updatedAt: timestamp("updated_at")
+      .$onUpdate(() => /* @__PURE__ */ new Date())
+      .notNull(),
+  },
+  (table) => [index("account_userId_idx").on(table.userId)],
+);
+
+export const verification = pgTable(
+  "verification",
+  {
+    id: text("id").primaryKey(),
+    identifier: text("identifier").notNull(),
+    value: text("value").notNull(),
+    expiresAt: timestamp("expires_at").notNull(),
+    createdAt: timestamp("created_at").defaultNow().notNull(),
+    updatedAt: timestamp("updated_at")
+      .defaultNow()
+      .$onUpdate(() => /* @__PURE__ */ new Date())
+      .notNull(),
+  },
+  (table) => [index("verification_identifier_idx").on(table.identifier)],
+);
+
+export const jwks = pgTable("jwks", {
   id: text("id").primaryKey(),
-  expiresAt: timestamp("expires_at").notNull(),
-  token: text("token").notNull().unique(),
-  createdAt: timestamp("created_at").defaultNow().notNull(),
-  updatedAt: timestamp("updated_at")
-    .$onUpdate(() => /* @__PURE__ */ new Date())
-    .notNull(),
-  ipAddress: text("ip_address"),
-  userAgent: text("user_agent"),
-  userId: text("user_id")
-    .notNull()
-    .references(() => user.id, { onDelete: "cascade" }),
+  publicKey: text("public_key").notNull(),
+  privateKey: text("private_key").notNull(),
+  createdAt: timestamp("created_at").notNull(),
+  expiresAt: timestamp("expires_at"),
 });
 
-export const account = pgTable("account", {
-  id: text("id").primaryKey(),
-  accountId: text("account_id").notNull(),
-  providerId: text("provider_id").notNull(),
-  userId: text("user_id")
-    .notNull()
-    .references(() => user.id, { onDelete: "cascade" }),
-  accessToken: text("access_token"),
-  refreshToken: text("refresh_token"),
-  idToken: text("id_token"),
-  accessTokenExpiresAt: timestamp("access_token_expires_at"),
-  refreshTokenExpiresAt: timestamp("refresh_token_expires_at"),
-  scope: text("scope"),
-  password: text("password"),
-  createdAt: timestamp("created_at").defaultNow().notNull(),
-  updatedAt: timestamp("updated_at")
-    .$onUpdate(() => /* @__PURE__ */ new Date())
-    .notNull(),
-});
+export const userRelations = relations(user, ({ many }) => ({
+  sessions: many(session),
+  accounts: many(account),
+}));
 
-export const verification = pgTable("verification", {
-  id: text("id").primaryKey(),
-  identifier: text("identifier").notNull(),
-  value: text("value").notNull(),
-  expiresAt: timestamp("expires_at").notNull(),
-  createdAt: timestamp("created_at").defaultNow().notNull(),
-  updatedAt: timestamp("updated_at")
-    .defaultNow()
-    .$onUpdate(() => /* @__PURE__ */ new Date())
-    .notNull(),
-});
+export const sessionRelations = relations(session, ({ one }) => ({
+  user: one(user, {
+    fields: [session.userId],
+    references: [user.id],
+  }),
+}));
+
+export const accountRelations = relations(account, ({ one }) => ({
+  user: one(user, {
+    fields: [account.userId],
+    references: [user.id],
+  }),
+}));

package-lock.json

@@ -47,12 +47,14 @@
       "version": "0.3.0",
       "resolved": "https://registry.npmjs.org/@better-auth/utils/-/utils-0.3.0.tgz",
       "integrity": "sha512-W+Adw6ZA6mgvnSnhOki270rwJ42t4XzSK6YWGF//BbVXL6SwCLWfyzBc1lN2m/4RM28KubdBKQ4X5VMoLRNPQw==",
-      "license": "MIT"
+      "license": "MIT",
+      "peer": true
     },
     "node_modules/@better-fetch/fetch": {
       "version": "1.1.21",
       "resolved": "https://registry.npmjs.org/@better-fetch/fetch/-/fetch-1.1.21.tgz",
-      "integrity": "sha512-/ImESw0sskqlVR94jB+5+Pxjf+xBwDZF/N5+y2/q4EqD7IARUTSpPfIo8uf39SYpCxyOCtbyYpUrZ3F/k0zT4A=="
+      "integrity": "sha512-/ImESw0sskqlVR94jB+5+Pxjf+xBwDZF/N5+y2/q4EqD7IARUTSpPfIo8uf39SYpCxyOCtbyYpUrZ3F/k0zT4A==",
+      "peer": true
     },
     "node_modules/@drizzle-team/brocli": {
       "version": "0.10.2",
@@ -1994,9 +1996,9 @@
       "license": "MIT"
     },
     "node_modules/@types/node": {
-      "version": "24.10.4",
-      "resolved": "https://registry.npmjs.org/@types/node/-/node-24.10.4.tgz",
-      "integrity": "sha512-vnDVpYPMzs4wunl27jHrfmwojOGKya0xyM3sH+UE5iv5uPS6vX7UIoh6m+vQc5LGBq52HBKPIn/zcSZVzeDEZg==",
+      "version": "24.10.7",
+      "resolved": "https://registry.npmjs.org/@types/node/-/node-24.10.7.tgz",
+      "integrity": "sha512-+054pVMzVTmRQV8BhpGv3UyfZ2Llgl8rdpDTon+cUH9+na0ncBVXj3wTUKh14+Kiz18ziM3b4ikpP5/Pc0rQEQ==",
       "devOptional": true,
       "license": "MIT",
       "dependencies": {
@@ -2009,6 +2011,7 @@
       "integrity": "sha512-RmhMd/wD+CF8Dfo+cVIy3RR5cl8CyfXQ0tGgW6XBL8L4LM/UTEbNXYRbLwU6w+CgrKBNbrQWt4FUtTfaU5jSYQ==",
       "devOptional": true,
       "license": "MIT",
+      "peer": true,
       "dependencies": {
         "@types/node": "*",
         "pg-protocol": "*",
@@ -2016,9 +2019,12 @@
       }
     },
     "node_modules/@types/react": {
-      "version": "19.2.7",
+      "version": "19.2.8",
+      "resolved": "https://registry.npmjs.org/@types/react/-/react-19.2.8.tgz",
+      "integrity": "sha512-3MbSL37jEchWZz2p2mjntRZtPt837ij10ApxKfgmXCTuHWagYg7iA5bqPw6C8BMPfwidlvfPI/fxOc42HLhcyg==",
       "dev": true,
       "license": "MIT",
+      "peer": true,
       "dependencies": {
         "csstype": "^3.2.2"
       }
@@ -2151,6 +2157,7 @@
       "version": "1.4.10",
       "resolved": "https://registry.npmjs.org/@better-auth/core/-/core-1.4.10.tgz",
       "integrity": "sha512-AThrfb6CpG80wqkanfrbN2/fGOYzhGladHFf3JhaWt/3/Vtf4h084T6PJLrDE7M/vCCGYvDI1DkvP3P1OB2HAg==",
+      "peer": true,
       "dependencies": {
         "@standard-schema/spec": "^1.0.0",
         "zod": "^4.1.12"
@@ -2181,6 +2188,7 @@
       "resolved": "https://registry.npmjs.org/better-call/-/better-call-1.1.7.tgz",
       "integrity": "sha512-6gaJe1bBIEgVebQu/7q9saahVzvBsGaByEnE8aDVncZEDiJO7sdNB28ot9I6iXSbR25egGmmZ6aIURXyQHRraQ==",
       "license": "MIT",
+      "peer": true,
       "dependencies": {
         "@better-auth/utils": "^0.3.0",
         "@better-fetch/fetch": "^1.1.4",
@@ -2299,6 +2307,7 @@
     "node_modules/d3-selection": {
       "version": "3.0.0",
       "license": "ISC",
+      "peer": true,
       "engines": {
         "node": ">=12"
       }
@@ -2391,6 +2400,7 @@
       "integrity": "sha512-O9EC/miwdnRDY10qRxM8P3Pg8hXe3LyU4ZipReKOgTwn4OqANmftj8XJz1UPUAS6NMHf0E2htjsbQujUTkncCg==",
       "devOptional": true,
       "license": "MIT",
+      "peer": true,
       "dependencies": {
         "@drizzle-team/brocli": "^0.10.2",
         "@esbuild-kit/esm-loader": "^2.5.5",
@@ -2406,6 +2416,7 @@
       "resolved": "https://registry.npmjs.org/drizzle-orm/-/drizzle-orm-0.45.1.tgz",
       "integrity": "sha512-Te0FOdKIistGNPMq2jscdqngBRfBpC8uMFVwqjf6gtTVJHIQ/dosgV/CLBU2N4ZJBsXL5savCba9b0YJskKdcA==",
       "license": "Apache-2.0",
+      "peer": true,
       "peerDependencies": {
         "@aws-sdk/client-rds-data": ">=3",
         "@cloudflare/workers-types": ">=4",
@@ -2545,6 +2556,7 @@
       "devOptional": true,
       "hasInstallScript": true,
       "license": "MIT",
+      "peer": true,
       "bin": {
         "esbuild": "bin/esbuild"
       },
@@ -2646,20 +2658,21 @@
       "resolved": "https://registry.npmjs.org/jose/-/jose-6.1.3.tgz",
       "integrity": "sha512-0TpaTfihd4QMNwrz/ob2Bp7X04yuxJkjRGi4aKmOqwhov54i6u79oCv7T+C7lo70MKH6BesI3vscD1yb/yzKXQ==",
       "license": "MIT",
+      "peer": true,
       "funding": {
         "url": "https://github.com/sponsors/panva"
       }
     },
     "node_modules/js-tokens": {
       "version": "4.0.0",
-      "license": "MIT",
-      "peer": true
+      "license": "MIT"
     },
     "node_modules/kysely": {
       "version": "0.28.9",
       "resolved": "https://registry.npmjs.org/kysely/-/kysely-0.28.9.tgz",
       "integrity": "sha512-3BeXMoiOhpOwu62CiVpO6lxfq4eS6KMYfQdMsN/2kUCRNuF2YiEr7u0HLHaQU+O4Xu8YXE3bHVkwaQ85i72EuA==",
       "license": "MIT",
+      "peer": true,
       "engines": {
         "node": ">=20.0.0"
       }
@@ -2924,7 +2937,6 @@
     "node_modules/loose-envify": {
       "version": "1.4.0",
       "license": "MIT",
-      "peer": true,
       "dependencies": {
         "js-tokens": "^3.0.0 || ^4.0.0"
       },
@@ -2974,6 +2986,7 @@
         }
       ],
       "license": "MIT",
+      "peer": true,
       "engines": {
         "node": "^20.0.0 || >=22.0.0"
       }
@@ -2989,6 +3002,7 @@
       "resolved": "https://registry.npmjs.org/next/-/next-16.1.1.tgz",
       "integrity": "sha512-QI+T7xrxt1pF6SQ/JYFz95ro/mg/1Znk5vBebsWwbpejj1T0A23hO7GYEaVac9QUOT2BIMiuzm0L99ooq7k0/w==",
       "license": "MIT",
+      "peer": true,
       "dependencies": {
         "@next/env": "16.1.1",
         "@swc/helpers": "0.5.15",
@@ -3068,7 +3082,6 @@
     "node_modules/object-assign": {
       "version": "4.1.1",
       "license": "MIT",
-      "peer": true,
       "engines": {
         "node": ">=0.10.0"
       }
@@ -3078,6 +3091,7 @@
       "resolved": "https://registry.npmjs.org/pg/-/pg-8.16.3.tgz",
       "integrity": "sha512-enxc1h0jA/aq5oSDMvqyW3q89ra6XIIDZgCX9vkMrnz5DFTw/Ny3Li2lFQ+pt3L6MCgm/5o2o8HW9hiJji+xvw==",
       "license": "MIT",
+      "peer": true,
       "dependencies": {
         "pg-connection-string": "^2.9.1",
         "pg-pool": "^3.10.1",
@@ -3247,6 +3261,7 @@
       "resolved": "https://registry.npmjs.org/react/-/react-19.2.3.tgz",
       "integrity": "sha512-Ku/hhYbVjOQnXDZFv2+RibmLFGwFdeeKHFcOTlrt7xplBnya5OGn/hIRDsqDiSUcfORsDC7MPxwork8jBwsIWA==",
       "license": "MIT",
+      "peer": true,
       "engines": {
         "node": ">=0.10.0"
       }
@@ -3256,6 +3271,7 @@
       "resolved": "https://registry.npmjs.org/react-dom/-/react-dom-19.2.3.tgz",
       "integrity": "sha512-yELu4WmLPw5Mr/lmeEpox5rw3RETacE++JgHqQzd2dg+YbJuat3jH4ingc+WPZhxaoFzdv9y33G+F7Nl5O0GBg==",
       "license": "MIT",
+      "peer": true,
       "dependencies": {
         "scheduler": "^0.27.0"
       },
@@ -3265,8 +3281,7 @@
     },
     "node_modules/react-is": {
       "version": "16.13.1",
-      "license": "MIT",
-      "peer": true
+      "license": "MIT"
     },
     "node_modules/react-simple-maps": {
       "version": "3.0.0",
@@ -3425,7 +3440,8 @@
       "version": "4.1.18",
       "resolved": "https://registry.npmjs.org/tailwindcss/-/tailwindcss-4.1.18.tgz",
       "integrity": "sha512-4+Z+0yiYyEtUVCScyfHCxOYP06L5Ne+JiHhY2IjR2KWMIWhJOYZKLSGZaP5HkZ8+bY0cxfzwDE5uOmzFXyIwxw==",
-      "license": "MIT"
+      "license": "MIT",
+      "peer": true
     },
     "node_modules/tailwindcss-animate": {
       "version": "1.0.7",