chore(app): debug window

1 files changed, 17 insertions, 8 deletions

diff --git a/packages/app/src/components/debug-bar.tsx b/packages/app/src/components/debug-bar.tsx
index 93a4654f8..acfd7f90f 100644
--- a/packages/app/src/components/debug-bar.tsx
+++ b/packages/app/src/components/debug-bar.tsx
@@ -49,14 +49,19 @@ const bad = (n: number | undefined, limit: number, low = false) => {
 
 const session = (path: string) => path.includes("/session")
 
-function Cell(props: { bad?: boolean; dim?: boolean; label: string; tip: string; value: string }) {
+function Cell(props: { bad?: boolean; dim?: boolean; label: string; tip: string; value: string; wide?: boolean }) {
   return (
-    <Tooltip value={props.tip} placement="left">
-      <div class="flex w-full flex-col items-center px-0.5 py-1 text-center">
-        <div class="text-[7px] font-black uppercase tracking-[0.04em] opacity-70 leading-none">{props.label}</div>
+    <Tooltip value={props.tip} placement="top">
+      <div
+        classList={{
+          "flex min-h-[42px] w-full min-w-0 flex-col items-center justify-center rounded-[8px] bg-white/5 px-0.5 py-1 text-center": true,
+          "col-span-2": !!props.wide,
+        }}
+      >
+        <div class="text-[10px] leading-none font-black uppercase tracking-[0.04em] opacity-70">{props.label}</div>
         <div
           classList={{
-            "text-[9px] font-semibold leading-none tabular-nums": true,
+            "text-[13px] leading-none font-bold tabular-nums sm:text-[14px]": true,
             "text-text-on-critical-base": !!props.bad,
             "opacity-70": !!props.dim,
           }}
@@ -355,10 +360,13 @@ export function DebugBar() {
   return (
     <aside
       aria-label="Development performance diagnostics"
-      class="pointer-events-auto h-full min-h-0 w-[36px] shrink-0 overflow-y-auto text-text-on-interactive-base no-scrollbar sm:w-[38px]"
-      style={{ "background-color": "color-mix(in srgb, var(--icon-interactive-base) 42%, black)" }}
+      class="pointer-events-auto fixed bottom-3 right-3 z-50 w-[308px] max-w-[calc(100vw-1.5rem)] overflow-hidden rounded-xl border p-0.5 text-text-on-interactive-base shadow-[var(--shadow-lg-border-base)] sm:bottom-4 sm:right-4 sm:w-[324px]"
+      style={{
+        "background-color": "color-mix(in srgb, var(--icon-interactive-base) 42%, black)",
+        "border-color": "color-mix(in srgb, white 14%, transparent)",
+      }}
     >
-      <div class="flex min-h-full flex-col gap-0.5 py-2 font-mono">
+      <div class="grid grid-cols-5 gap-px font-mono">
         <Cell
           label="NAV"
           tip="Last completed route transition touching a session page, measured from router start until the first paint after it settles."
@@ -425,6 +433,7 @@ export function DebugBar() {
           value={heapv()}
           bad={bad(heap(), 0.8)}
           dim={state.heap.used === undefined}
+          wide
         />
       </div>
     </aside>