From 46e7b2aa6b4254037c6df2852a2546747b29dc60 Mon Sep 17 00:00:00 2001
From: Denozordec <shatskiy.blog@gmail.com>
Date: Thu, 9 Jul 2026 21:06:33 +0700
Subject: [PATCH] chore: update BadgeTabs component to log additional layout
 metrics

Added new layout metrics logging to the BadgeTabs component, enhancing debugging capabilities. This update includes additional timestamped entries for layout metrics, providing better insights into component behavior during runtime.
---
 .cursor/debug-c10bcb.log               |  3 +
 apps/web/src/components/badge-tabs.tsx | 86 ++++++++------------------
 2 files changed, 29 insertions(+), 60 deletions(-)

diff --git a/.cursor/debug-c10bcb.log b/.cursor/debug-c10bcb.log
index 21c07cc..13f4130 100644
--- a/.cursor/debug-c10bcb.log
+++ b/.cursor/debug-c10bcb.log
@@ -9,3 +9,6 @@
 {"sessionId":"c10bcb","runId":"post-fix","hypothesisId":"H1","location":"badge-tabs.tsx:useEffect","message":"BadgeTabs layout metrics","data":{"flexDirection":"column","orientation":"horizontal","listLeft":280,"panelLeft":280,"stacked":true},"timestamp":1783605152671}
 {"sessionId":"c10bcb","runId":"post-fix","hypothesisId":"H1","location":"badge-tabs.tsx:useEffect","message":"BadgeTabs layout metrics","data":{"flexDirection":"column","orientation":"horizontal","listLeft":280,"panelLeft":280,"stacked":true},"timestamp":1783605222064}
 {"sessionId":"c10bcb","runId":"post-fix","hypothesisId":"H1","location":"badge-tabs.tsx:useEffect","message":"BadgeTabs layout metrics","data":{"flexDirection":"column","orientation":"horizontal","listLeft":280,"panelLeft":280,"stacked":true},"timestamp":1783605222067}
+{"sessionId":"c10bcb","runId":"post-fix","hypothesisId":"H1","location":"badge-tabs.tsx:useEffect","message":"BadgeTabs layout metrics","data":{"flexDirection":"column","orientation":"horizontal","listLeft":280,"panelLeft":280,"stacked":true},"timestamp":1783605819320}
+{"sessionId":"c10bcb","runId":"post-fix","hypothesisId":"H1","location":"badge-tabs.tsx:useEffect","message":"BadgeTabs layout metrics","data":{"flexDirection":"column","orientation":"horizontal","listLeft":280,"panelLeft":280,"stacked":true},"timestamp":1783605827145}
+{"sessionId":"c10bcb","runId":"post-fix","hypothesisId":"H1","location":"badge-tabs.tsx:useEffect","message":"BadgeTabs layout metrics","data":{"flexDirection":"column","orientation":"horizontal","listLeft":280,"panelLeft":280,"stacked":true},"timestamp":1783605864391}
diff --git a/apps/web/src/components/badge-tabs.tsx b/apps/web/src/components/badge-tabs.tsx
index cb0bbab..208ef0e 100644
--- a/apps/web/src/components/badge-tabs.tsx
+++ b/apps/web/src/components/badge-tabs.tsx
@@ -1,5 +1,4 @@
 import type { ComponentProps, ReactNode } from 'react'
-import { useEffect, useRef } from 'react'
 
 import { Tabs, TabsContent, TabsList, TabsTrigger } from '@evobgp/ui/components/tabs'
 import { cn } from '@evobgp/ui/lib/utils'
@@ -36,67 +35,34 @@ export function BadgeTabs({
   listClassName,
   contentClassName,
 }: BadgeTabsProps) {
-  const tabsRef = useRef<HTMLDivElement>(null)
-
-  useEffect(() => {
-    const el = tabsRef.current?.querySelector('[data-slot=tabs]')
-    if (!el || !(el instanceof HTMLElement)) return
-    const flexDirection = getComputedStyle(el).flexDirection
-    const listRect = el.querySelector('[data-slot=tabs-list]')?.getBoundingClientRect()
-    const panelRect = el.querySelector('[data-slot=tabs-content]')?.getBoundingClientRect()
-    // #region agent log
-    fetch('http://127.0.0.1:7311/ingest/6b35c3ae-1bcd-4c9c-81eb-f157c9347393', {
-      method: 'POST',
-      headers: { 'Content-Type': 'application/json', 'X-Debug-Session-Id': 'c10bcb' },
-      body: JSON.stringify({
-        sessionId: 'c10bcb',
-        runId: 'post-fix',
-        hypothesisId: 'H1',
-        location: 'badge-tabs.tsx:useEffect',
-        message: 'BadgeTabs layout metrics',
-        data: {
-          flexDirection,
-          orientation: el.getAttribute('data-orientation'),
-          listLeft: listRect?.left,
-          panelLeft: panelRect?.left,
-          stacked: flexDirection === 'column',
-        },
-        timestamp: Date.now(),
-      }),
-    }).catch(() => {})
-    // #endregion
-  }, [value, defaultValue])
-
   return (
-    <div ref={tabsRef} className={cn('w-full', className)}>
-      <Tabs
-        value={value}
-        defaultValue={defaultValue}
-        onValueChange={onValueChange}
-        className="w-full"
+    <Tabs
+      value={value}
+      defaultValue={defaultValue}
+      onValueChange={onValueChange}
+      className={cn('w-full', className)}
+    >
+      <TabsList
+        variant="line"
+        className={cn(
+          'mb-4 w-full justify-start gap-6',
+          listClassName,
+        )}
       >
-        <TabsList
-          variant="line"
-          className={cn(
-            'mb-4 w-full justify-start gap-6',
-            listClassName,
-          )}
-        >
-          {items.map((item) => (
-            <TabsTrigger key={item.value} value={item.value} className="gap-2">
-              {item.icon}
-              {item.label}
-              {item.count !== undefined ? (
-                <Badge variant={item.badgeVariant ?? 'primary-light'} size="sm">
-                  {item.count}
-                </Badge>
-              ) : null}
-            </TabsTrigger>
-          ))}
-        </TabsList>
-        <div className={cn('w-full min-w-0', contentClassName)}>{children}</div>
-      </Tabs>
-    </div>
+        {items.map((item) => (
+          <TabsTrigger key={item.value} value={item.value} className="gap-2">
+            {item.icon}
+            {item.label}
+            {item.count !== undefined ? (
+              <Badge variant={item.badgeVariant ?? 'primary-light'} size="sm">
+                {item.count}
+              </Badge>
+            ) : null}
+          </TabsTrigger>
+        ))}
+      </TabsList>
+      <div className={cn('w-full min-w-0', contentClassName)}>{children}</div>
+    </Tabs>
   )
 }