more clean up

apps/studio/components/interfaces/UnifiedLogs/UnifiedLogs.tsx

@@ -401,6 +401,8 @@ export const UnifiedLogsTable = () => {
                           />
                         </TabsContent>
 
+                        {/* [Joshen] JFYI this is currently just hardcoded data to explore the UX */}
+                        {/* Will need to be either implemented prior to launch or hidden */}
                         <TabsContent
                           value="trace"
                           className="flex-grow overflow-auto data-[state=active]:flex-grow h-full mt-0"

apps/studio/components/interfaces/UnifiedLogs/components/Trace/details/span-detail.tsx

@@ -1,90 +1,116 @@
-'use client'
-import { X } from 'lucide-react'
-import { cn } from 'ui'
-import type { LayoutSpan } from '../utils/layout-algorithm'
+import { ArrowRight, Clock, X } from 'lucide-react'
+import {
+  Button,
+  Tabs_Shadcn_ as Tabs,
+  TabsContent_Shadcn_ as TabsContent,
+  TabsList_Shadcn_ as TabsList,
+  TabsTrigger_Shadcn_ as TabsTrigger,
+} from 'ui'
+
+interface Span {
+  id: string
+  name: string
+  startTime: number
+  endTime: number
+  level: number
+  highlight?: boolean
+}
 
 interface SpanDetailProps {
-  span: LayoutSpan
+  span: Span
   onClose: () => void
 }
 
 export function SpanDetail({ span, onClose }: SpanDetailProps) {
+  const duration = span.endTime - span.startTime
+
   return (
-    <div className="w-full md:w-96 border-t border-neutral-800 md:border-t-0 md:border-l-neutral-800 md:border-l overflow-y-auto">
-      <div className="flex justify-between items-center p-3 border-b border-neutral-800 sticky top-0 bg-black">
-        <h3 className="font-medium">Span Details</h3>
-        <button
-          onClick={onClose}
-          className="p-1 rounded-full hover:bg-neutral-800"
-          aria-label="Close panel"
-        >
-          <X className="h-4 w-4" />
-        </button>
-      </div>
-
-      <div className="p-4">
+    <div className="p-4 bg-black text-white w-96 border-l">
+      <div className="flex justify-between items-center">
         <h3 className="font-semibold text-lg mb-2 truncate">{span.name}</h3>
-        <div className="text-sm text-neutral-400">
-          <div className="flex justify-between">
-            <span>Start Time</span>
-            <span>{span.startTime.toFixed(2)}ms</span>
-          </div>
-          <div className="flex justify-between mt-1">
-            <span>End Time</span>
-            <span>{span.endTime.toFixed(2)}ms</span>
-          </div>
-          <div className="flex justify-between mt-1">
-            <span>Duration</span>
-            <span className="text-white">{(span.endTime - span.startTime).toFixed(2)}ms</span>
-          </div>
-          <div className="flex justify-between mt-1">
-            <span>Depth</span>
-            <span>{span.depth}</span>
-          </div>
-          <div className="flex justify-between mt-1">
-            <span>Row</span>
-            <span>{span.row}</span>
-          </div>
-          {span.status && (
-            <div className="flex justify-between mt-3">
-              <span>Status</span>
-              <span
-                className={cn(
-                  span.status === 'error'
-                    ? 'text-red-500'
-                    : span.status === 'warning'
-                      ? 'text-yellow-500'
-                      : span.status === 'success'
-                        ? 'text-green-500'
-                        : 'text-blue-500'
-                )}
-              >
-                {span.status.toUpperCase()}
-              </span>
-            </div>
-          )}
-
-          {span.children.length > 0 && (
-            <div className="mt-3">
-              <span className="block mb-1">Child Spans:</span>
-              <ul className="list-disc pl-5">
-                {span.children.map((child) => (
-                  <li key={child.id} className="text-xs">
-                    {child.name}
-                  </li>
-                ))}
-              </ul>
-            </div>
-          )}
-
-          {span.parent && (
-            <div className="mt-3">
-              <span className="block mb-1">Parent Span:</span>
-              <div className="text-xs pl-5">{span.parent.name}</div>
-            </div>
-          )}
-        </div>
+        <Button type="text" onClick={onClose}>
+          <X className="h-4 w-4" />
+        </Button>
       </div>
+
+      <div className="flex items-center gap-2 text-sm text-neutral-400 mb-4">
+        <Clock className="h-4 w-4" />
+        <span>{span.startTime.toFixed(2)}ms</span>
+        <ArrowRight className="h-3 w-3" />
+        <span>{span.endTime.toFixed(2)}ms</span>
+        <span className="font-medium text-white">({duration.toFixed(2)}ms)</span>
+      </div>
+
+      <Tabs defaultValue="details" className="text-white">
+        <TabsList className="grid grid-cols-4 mb-4 bg-neutral-900">
+          <TabsTrigger value="details">Details</TabsTrigger>
+          <TabsTrigger value="logs">Logs</TabsTrigger>
+          <TabsTrigger value="network">Network</TabsTrigger>
+          <TabsTrigger value="source">Source</TabsTrigger>
+        </TabsList>
+
+        <TabsContent value="details" className="space-y-4">
+          <div className="border border-neutral-800 rounded-md p-3 bg-neutral-900">
+            <h4 className="font-medium text-sm mb-2">Span Information</h4>
+            <div className="grid grid-cols-2 gap-2 text-sm">
+              <div className="text-neutral-500">ID</div>
+              <div>{span.id}</div>
+              <div className="text-neutral-500">Name</div>
+              <div>{span.name}</div>
+              <div className="text-neutral-500">Start Time</div>
+              <div>{span.startTime.toFixed(2)}ms</div>
+              <div className="text-neutral-500">End Time</div>
+              <div>{span.endTime.toFixed(2)}ms</div>
+              <div className="text-neutral-500">Duration</div>
+              <div>{duration.toFixed(2)}ms</div>
+            </div>
+          </div>
+
+          <div className="border border-neutral-800 rounded-md p-3">
+            <h4 className="font-medium text-sm mb-2">Attributes</h4>
+            <div className="text-sm text-neutral-500 italic">No attributes available</div>
+          </div>
+        </TabsContent>
+
+        <TabsContent value="logs">
+          <div className="border border-neutral-800 rounded-md p-3 h-64 overflow-y-auto">
+            <div className="text-sm text-neutral-500 italic">No logs available for this span</div>
+          </div>
+        </TabsContent>
+
+        <TabsContent value="network">
+          <div className="border border-neutral-800 rounded-md p-3 h-64 overflow-y-auto">
+            <div className="text-sm text-neutral-500 italic">No network requests for this span</div>
+          </div>
+        </TabsContent>
+
+        <TabsContent value="source">
+          <div className="border border-neutral-800 rounded-md p-3 bg-neutral-900 font-mono text-sm h-64 overflow-y-auto">
+            <pre className="text-xs">
+              {`// Sample source code
+function processRequest(req, res) {
+  // Start span
+  const span = tracer.startSpan('${span.name}');
+  
+  try {
+    // Process request
+    const result = await handleRequest(req);
+    
+    // End span
+    span.end();
+    
+    return result;
+  } catch (error) {
+    // Record error
+    span.recordException(error);
+    span.end();
+    throw error;
+  }
+}`}
+            </pre>
+          </div>
+        </TabsContent>
+      </Tabs>
     </div>
   )
 }

apps/studio/components/interfaces/UnifiedLogs/components/Trace/span-detail.tsx

@@ -1,116 +0,0 @@
-import { Clock, ArrowRight, X } from 'lucide-react'
-import {
-  Button,
-  Tabs_Shadcn_ as Tabs,
-  TabsContent_Shadcn_ as TabsContent,
-  TabsList_Shadcn_ as TabsList,
-  TabsTrigger_Shadcn_ as TabsTrigger,
-} from 'ui'
-
-interface Span {
-  id: string
-  name: string
-  startTime: number
-  endTime: number
-  level: number
-  highlight?: boolean
-}
-
-interface SpanDetailProps {
-  span: Span
-  onClose: () => void
-}
-
-export default function SpanDetail({ span, onClose }: SpanDetailProps) {
-  const duration = span.endTime - span.startTime
-
-  return (
-    <div className="p-4 bg-black text-white w-96 border-l">
-      <div className="flex justify-between items-center">
-        <h3 className="font-semibold text-lg mb-2 truncate">{span.name}</h3>
-        <Button type="text" onClick={onClose}>
-          <X className="h-4 w-4" />
-        </Button>
-      </div>
-
-      <div className="flex items-center gap-2 text-sm text-neutral-400 mb-4">
-        <Clock className="h-4 w-4" />
-        <span>{span.startTime.toFixed(2)}ms</span>
-        <ArrowRight className="h-3 w-3" />
-        <span>{span.endTime.toFixed(2)}ms</span>
-        <span className="font-medium text-white">({duration.toFixed(2)}ms)</span>
-      </div>
-
-      <Tabs defaultValue="details" className="text-white">
-        <TabsList className="grid grid-cols-4 mb-4 bg-neutral-900">
-          <TabsTrigger value="details">Details</TabsTrigger>
-          <TabsTrigger value="logs">Logs</TabsTrigger>
-          <TabsTrigger value="network">Network</TabsTrigger>
-          <TabsTrigger value="source">Source</TabsTrigger>
-        </TabsList>
-
-        <TabsContent value="details" className="space-y-4">
-          <div className="border border-neutral-800 rounded-md p-3 bg-neutral-900">
-            <h4 className="font-medium text-sm mb-2">Span Information</h4>
-            <div className="grid grid-cols-2 gap-2 text-sm">
-              <div className="text-neutral-500">ID</div>
-              <div>{span.id}</div>
-              <div className="text-neutral-500">Name</div>
-              <div>{span.name}</div>
-              <div className="text-neutral-500">Start Time</div>
-              <div>{span.startTime.toFixed(2)}ms</div>
-              <div className="text-neutral-500">End Time</div>
-              <div>{span.endTime.toFixed(2)}ms</div>
-              <div className="text-neutral-500">Duration</div>
-              <div>{duration.toFixed(2)}ms</div>
-            </div>
-          </div>
-
-          <div className="border border-neutral-800 rounded-md p-3">
-            <h4 className="font-medium text-sm mb-2">Attributes</h4>
-            <div className="text-sm text-neutral-500 italic">No attributes available</div>
-          </div>
-        </TabsContent>
-
-        <TabsContent value="logs">
-          <div className="border border-neutral-800 rounded-md p-3 h-64 overflow-y-auto">
-            <div className="text-sm text-neutral-500 italic">No logs available for this span</div>
-          </div>
-        </TabsContent>
-
-        <TabsContent value="network">
-          <div className="border border-neutral-800 rounded-md p-3 h-64 overflow-y-auto">
-            <div className="text-sm text-neutral-500 italic">No network requests for this span</div>
-          </div>
-        </TabsContent>
-
-        <TabsContent value="source">
-          <div className="border border-neutral-800 rounded-md p-3 bg-neutral-900 font-mono text-sm h-64 overflow-y-auto">
-            <pre className="text-xs">
-              {`// Sample source code
-function processRequest(req, res) {
-  // Start span
-  const span = tracer.startSpan('${span.name}');
-  
-  try {
-    // Process request
-    const result = await handleRequest(req);
-    
-    // End span
-    span.end();
-    
-    return result;
-  } catch (error) {
-    // Record error
-    span.recordException(error);
-    span.end();
-    throw error;
-  }
-}`}
-            </pre>
-          </div>
-        </TabsContent>
-      </Tabs>
-    </div>
-  )
-}

apps/studio/components/interfaces/UnifiedLogs/components/Trace/timeline/minimap.tsx

@@ -1,6 +1,5 @@
-'use client'
+import { MouseEvent, RefObject } from 'react'
 
-import type React from 'react'
 import { cn } from 'ui'
 import type { LayoutSpan } from '../utils/layout-algorithm'
 
@@ -9,8 +8,8 @@ interface MinimapProps {
   duration: number
   visiblePortionStart: number
   visiblePortionWidth: number
-  onClick: (e: React.MouseEvent) => void
-  minimapRef: React.RefObject<HTMLDivElement>
+  onClick: (e: MouseEvent) => void
+  minimapRef: RefObject<HTMLDivElement>
   spanAbsoluteRows: Record<string, number>
 }
 

apps/studio/components/interfaces/UnifiedLogs/components/Trace/timeline/timeline-cursor.tsx

@@ -1,7 +1,4 @@
-'use client'
-
-import type React from 'react'
-import { forwardRef, useImperativeHandle, useRef, useEffect } from 'react'
+import { forwardRef, useEffect, useImperativeHandle, useRef } from 'react'
 import { cn, Tooltip, TooltipContent, TooltipTrigger } from 'ui'
 
 interface TimelineCursorProps {

apps/studio/components/interfaces/UnifiedLogs/components/Trace/timeline/timeline-header.tsx

@@ -1,6 +1,6 @@
-'use client'
 import { ChevronDown, Clock, Search, ZoomIn, ZoomOut } from 'lucide-react'
 import { useEffect, useRef, useState } from 'react'
+
 import { traceDataSets } from '../data/trace-data'
 
 interface TimelineHeaderProps {

apps/studio/components/interfaces/UnifiedLogs/components/Trace/timeline/timeline-marker.tsx

@@ -1,7 +1,6 @@
-'use client'
-
 import { AlertCircle, AlertTriangle, CheckCircle, Info } from 'lucide-react'
-import type React from 'react'
+
+import { MouseEvent } from 'react'
 import { cn } from 'ui'
 import type { Marker } from '../types/trace'
 
@@ -9,7 +8,7 @@ interface TimelineMarkerProps {
   marker: Marker
   duration: number
   isSelected: boolean
-  onClick: (e: React.MouseEvent, marker: Marker) => void
+  onClick: (e: MouseEvent, marker: Marker) => void
 }
 
 export function TimelineMarker({ marker, duration, isSelected, onClick }: TimelineMarkerProps) {

apps/studio/components/interfaces/UnifiedLogs/components/Trace/timeline/timeline-span.tsx

@@ -1,5 +1,3 @@
-'use client'
-
 import {
   AlertTriangle,
   ArrowRight,
@@ -12,7 +10,8 @@ import {
   Search,
   Server,
 } from 'lucide-react'
-import type React from 'react'
+import { MouseEvent } from 'react'
+
 import { cn } from 'ui'
 import type { Span } from '../types/trace'
 import type { LayoutSpan } from '../utils/layout-algorithm'
@@ -23,7 +22,7 @@ interface TimelineSpanProps {
   isSelected: boolean
   isVisible: boolean
   endBeyondViewport: boolean
-  onClick: (e: React.MouseEvent, span: LayoutSpan) => void
+  onClick: (e: MouseEvent, span: LayoutSpan) => void
   showTimestamps: boolean
   absoluteRow: number
 }

apps/studio/components/interfaces/UnifiedLogs/components/Trace/trace-viewer-client.tsx

@@ -1,7 +1,6 @@
-'use client'
-
-import { useState, useEffect } from 'react'
 import dynamic from 'next/dynamic'
+import { useEffect, useState } from 'react'
+
 import type { TraceData } from './types/trace'
 
 // Use dynamic import with ssr: false to prevent server-side rendering issues

apps/studio/components/interfaces/UnifiedLogs/components/Trace/trace-viewer.tsx

@@ -1,7 +1,8 @@
 import { useEffect, useMemo, useRef, useState } from 'react'
+
 import { traceDataSets } from './data/trace-data'
 import { MarkerDetail } from './details/marker-detail'
-import SpanDetail from './span-detail'
+import { SpanDetail } from './details/span-detail'
 import { Minimap } from './timeline/minimap'
 import { TimelineCursor, type TimelineCursorRef } from './timeline/timeline-cursor'
 import { TimelineHeader } from './timeline/timeline-header'