ToothFairyAI_Public/tf_code
1
0
Fork 0
mirror of https://gitea.toothfairyai.com/ToothFairyAI/tf_code.git synced 2026-04-20 15:44:44 +00:00
Code Issues Packages Projects Releases Wiki Activity

chore(app): debug window

Browse Source
This commit is contained in:
Adam
2026-03-10 07:05:49 -05:00
parent d2c765e2b3
commit 5ec5d1dace
1 changed files with 17 additions and 8 deletions
Download Patch File Download Diff File Expand all files Collapse all files

25
packages/app/src/components/debug-bar.tsx
View File

@@ -49,14 +49,19 @@ const bad = (n: number | undefined, limit: number, low = false) => {
const session = (path: string) => path.includes("/session") 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 ( return (
<Tooltip value={props.tip} placement="left"> <Tooltip value={props.tip} placement="top">
<div class="flex w-full flex-col items-center px-0.5 py-1 text-center"> <div
<div class="text-[7px] font-black uppercase tracking-[0.04em] opacity-70 leading-none">{props.label}</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 <div
classList={{ 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, "text-text-on-critical-base": !!props.bad,
"opacity-70": !!props.dim, "opacity-70": !!props.dim,
}} }}
@@ -355,10 +360,13 @@ export function DebugBar() {
return ( return (
<aside <aside
aria-label="Development performance diagnostics" 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]" 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)" }} 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 <Cell
label="NAV" label="NAV"
tip="Last completed route transition touching a session page, measured from router start until the first paint after it settles." 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()} value={heapv()}
bad={bad(heap(), 0.8)} bad={bad(heap(), 0.8)}
dim={state.heap.used === undefined} dim={state.heap.used === undefined}
wide
/> />
</div> </div>
</aside> </aside>