stemtrace 0.1.0__py3-none-any.whl

stemtrace/server/ui/frontend/src/components/TaskList.tsx

@@ -0,0 +1,172 @@
+/**
+ * Task list component with infinite scroll.
+ */
+
+import { Link } from '@tanstack/react-router'
+import { useTasksInfinite } from '@/api/queries'
+import { useInfiniteScroll } from '@/hooks/useInfiniteScroll'
+import { TaskStateBadge } from './TaskStateBadge'
+
+interface TaskListProps {
+  filters: {
+    state: string | undefined
+    name: string
+    from_date?: string
+    to_date?: string
+  }
+}
+
+export function TaskList({ filters }: TaskListProps) {
+  const { data, isLoading, error, hasNextPage, isFetchingNextPage, fetchNextPage } =
+    useTasksInfinite({
+      state: filters.state,
+      name: filters.name || undefined,
+      from_date: filters.from_date,
+      to_date: filters.to_date,
+    })
+
+  const { lastElementRef } = useInfiniteScroll({
+    hasNextPage,
+    isFetchingNextPage,
+    fetchNextPage,
+  })
+
+  if (isLoading) {
+    return <TaskListSkeleton />
+  }
+
+  if (error) {
+    return (
+      <div className="text-center py-12 text-red-400">
+        Failed to load tasks. Is the server running?
+      </div>
+    )
+  }
+
+  const allTasks = data?.pages.flatMap((page) => page.tasks) ?? []
+  const total = data?.pages[0]?.total ?? 0
+
+  if (!allTasks.length) {
+    return <EmptyState />
+  }
+
+  return (
+    <div className="space-y-2">
+      {allTasks.map((task, index) => {
+        const isLast = index === allTasks.length - 1
+        return (
+          <Link
+            key={task.task_id}
+            ref={isLast ? lastElementRef : undefined}
+            to="/tasks/$taskId"
+            params={{ taskId: task.task_id }}
+            className="flex items-center justify-between p-4 bg-slate-900 rounded-lg border border-slate-800 hover:border-slate-700 transition-colors"
+          >
+            <div className="flex items-center gap-4 min-w-0">
+              <TaskStateBadge state={task.state} />
+              <div className="min-w-0">
+                <p className="text-slate-200 truncate">{task.name}</p>
+                <p className="text-xs text-slate-500 font-mono">{task.task_id.slice(0, 8)}...</p>
+              </div>
+            </div>
+
+            <div className="flex items-center gap-6 text-sm text-slate-400">
+              {task.duration_ms !== null && <span className="font-mono">{task.duration_ms}ms</span>}
+              {task.children.length > 0 && (
+                <span className="text-xs bg-slate-800 px-2 py-0.5 rounded">
+                  {task.children.length} children
+                </span>
+              )}
+              <span className="text-xs">{formatRelativeTime(task.last_updated)}</span>
+            </div>
+          </Link>
+        )
+      })}
+
+      {/* Loading indicator */}
+      {isFetchingNextPage && <LoadingMore />}
+
+      {/* Pagination info */}
+      <div className="text-center text-sm text-slate-500 pt-4">
+        Showing {allTasks.length} of {total} tasks
+      </div>
+    </div>
+  )
+}
+
+function formatRelativeTime(timestamp: string | null): string {
+  if (!timestamp) return ''
+  const date = new Date(timestamp)
+  const now = new Date()
+  const diff = now.getTime() - date.getTime()
+
+  if (diff < 60000) return 'just now'
+  if (diff < 3600000) return `${Math.floor(diff / 60000)}m ago`
+  if (diff < 86400000) return `${Math.floor(diff / 3600000)}h ago`
+  return date.toLocaleDateString()
+}
+
+function EmptyState() {
+  return (
+    <div className="text-center py-16 bg-slate-900/50 rounded-xl border border-slate-800">
+      <div className="text-4xl mb-4">📋</div>
+      <h3 className="text-lg font-medium text-slate-200">No tasks found</h3>
+      <p className="text-sm text-slate-500 mt-1">
+        Try adjusting your filters or run some Celery tasks
+      </p>
+    </div>
+  )
+}
+
+function LoadingMore() {
+  return (
+    <div className="flex justify-center py-4">
+      <div className="flex items-center gap-2 text-sm text-slate-400">
+        <svg
+          className="animate-spin h-4 w-4"
+          xmlns="http://www.w3.org/2000/svg"
+          fill="none"
+          viewBox="0 0 24 24"
+          aria-hidden="true"
+        >
+          <circle
+            className="opacity-25"
+            cx="12"
+            cy="12"
+            r="10"
+            stroke="currentColor"
+            strokeWidth="4"
+          />
+          <path
+            className="opacity-75"
+            fill="currentColor"
+            d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"
+          />
+        </svg>
+        Loading more...
+      </div>
+    </div>
+  )
+}
+
+function TaskListSkeleton() {
+  return (
+    <div className="space-y-2 animate-pulse">
+      {[...Array(5)].map((_, i) => (
+        <div
+          key={i}
+          className="flex items-center justify-between p-4 bg-slate-900 rounded-lg border border-slate-800"
+        >
+          <div className="flex items-center gap-4">
+            <div className="w-16 h-5 bg-slate-800 rounded" />
+            <div>
+              <div className="w-48 h-4 bg-slate-800 rounded" />
+              <div className="w-24 h-3 bg-slate-800 rounded mt-2" />
+            </div>
+          </div>
+          <div className="w-16 h-4 bg-slate-800 rounded" />
+        </div>
+      ))}
+    </div>
+  )
+}

stemtrace/server/ui/frontend/src/components/TaskStateBadge.tsx

@@ -0,0 +1,27 @@
+/**
+ * Badge component for displaying task state.
+ */
+
+import { clsx } from 'clsx'
+
+interface TaskStateBadgeProps {
+  state: string
+  className?: string
+}
+
+const stateClasses: Record<string, string> = {
+  PENDING: 'task-state-pending',
+  RECEIVED: 'task-state-received',
+  STARTED: 'task-state-started',
+  SUCCESS: 'task-state-success',
+  FAILURE: 'task-state-failure',
+  RETRY: 'task-state-retry',
+  REVOKED: 'task-state-revoked',
+  REJECTED: 'task-state-rejected',
+}
+
+export function TaskStateBadge({ state, className }: TaskStateBadgeProps) {
+  const stateClass = stateClasses[state] ?? 'task-state-pending'
+
+  return <span className={clsx('task-state-badge', stateClass, className)}>{state}</span>
+}

stemtrace/server/ui/frontend/src/components/TaskTimeline.tsx

@@ -0,0 +1,144 @@
+import { Link } from '@tanstack/react-router'
+import { clsx } from 'clsx'
+import type { TaskNode } from '@/api/client'
+import { useTasks } from '@/api/queries'
+import { formatDuration, stateColors, TERMINAL_STATES, TimelineBar } from './TimelineBar'
+
+interface TaskTimelineProps {
+  filters: {
+    state: string | undefined
+    name: string
+    from_date?: string
+    to_date?: string
+  }
+}
+
+export function TaskTimeline({ filters }: TaskTimelineProps) {
+  const { data, isLoading, error } = useTasks({
+    state: filters.state,
+    name: filters.name || undefined,
+    from_date: filters.from_date,
+    to_date: filters.to_date,
+  })
+
+  if (isLoading) {
+    return <TimelineSkeleton />
+  }
+
+  if (error) {
+    return <div className="text-center py-12 text-red-400">Failed to load timeline</div>
+  }
+
+  if (!data?.tasks.length) {
+    return (
+      <div className="text-center py-16 bg-slate-900/50 rounded-xl border border-slate-800">
+        <div className="text-4xl mb-4">📊</div>
+        <h3 className="text-lg font-medium text-slate-200">No tasks to display</h3>
+      </div>
+    )
+  }
+
+  const tasks = data.tasks.filter((t) => t.first_seen && t.last_updated)
+  if (tasks.length === 0) {
+    return <div className="text-center py-12 text-slate-400">No timing data available</div>
+  }
+
+  const times = tasks.flatMap((t) => [
+    new Date(t.first_seen!).getTime(),
+    new Date(t.last_updated!).getTime(),
+  ])
+  const minTime = Math.min(...times)
+  const maxTime = Math.max(...times)
+  const range = maxTime - minTime || 1
+
+  return (
+    <div className="bg-slate-900 rounded-xl border border-slate-800 p-6 overflow-x-auto">
+      <div className="flex justify-between text-xs text-slate-500 mb-4 pl-48">
+        <span>{formatTime(new Date(minTime))}</span>
+        <span>{formatTime(new Date(minTime + range / 2))}</span>
+        <span>{formatTime(new Date(maxTime))}</span>
+      </div>
+
+      <div className="space-y-2">
+        {tasks.map((task) => (
+          <TaskTimelineRow key={task.task_id} task={task} minTime={minTime} range={range} />
+        ))}
+      </div>
+
+      <div className="flex flex-wrap gap-4 mt-6 pt-4 border-t border-slate-800 text-xs text-slate-400">
+        {Object.entries(stateColors).map(([state, color]) => (
+          <div key={state} className="flex items-center gap-1.5">
+            <div
+              className={clsx('h-3 rounded', color, TERMINAL_STATES.has(state) ? 'w-2' : 'w-3')}
+            />
+            <span>{state}</span>
+          </div>
+        ))}
+      </div>
+    </div>
+  )
+}
+
+interface TaskTimelineRowProps {
+  task: TaskNode
+  minTime: number
+  range: number
+}
+
+function TaskTimelineRow({ task, minTime, range }: TaskTimelineRowProps) {
+  const taskStart = task.first_seen ? new Date(task.first_seen).getTime() : minTime
+  const taskStartPct = ((taskStart - minTime) / range) * 100
+  const wouldOverflow = taskStartPct > 85
+
+  return (
+    <div className="flex items-center gap-4 h-8 group">
+      <Link
+        to="/tasks/$taskId"
+        params={{ taskId: task.task_id }}
+        className="w-44 truncate text-sm text-slate-300 hover:text-emerald-400 transition-colors"
+        title={task.name}
+      >
+        {task.name.split('.').pop()}
+      </Link>
+
+      <div className="flex-1 relative h-6">
+        <div className="absolute inset-0 bg-slate-800/50 rounded" />
+        <div
+          className="absolute h-full"
+          style={
+            wouldOverflow
+              ? { right: 0, minWidth: '80px', maxWidth: '200px' }
+              : { left: `${taskStartPct}%`, minWidth: '80px', maxWidth: '200px' }
+          }
+        >
+          <TimelineBar events={task.events} height="sm" />
+        </div>
+      </div>
+
+      <div className="w-20 text-right text-xs text-slate-500 font-mono">
+        {task.duration_ms !== null ? formatDuration(task.duration_ms) : '-'}
+      </div>
+    </div>
+  )
+}
+
+function formatTime(date: Date): string {
+  return date.toLocaleTimeString([], { hour: '2-digit', minute: '2-digit', second: '2-digit' })
+}
+
+function TimelineSkeleton() {
+  return (
+    <div className="bg-slate-900 rounded-xl border border-slate-800 p-6 animate-pulse">
+      <div className="h-4 w-full bg-slate-800 rounded mb-4" />
+      <div className="space-y-2">
+        {[...Array(5)].map((_, i) => (
+          <div key={i} className="flex items-center gap-4 h-8">
+            <div className="w-44 h-4 bg-slate-800 rounded" />
+            <div className="flex-1 h-6 bg-slate-800 rounded" />
+            <div className="w-20 h-4 bg-slate-800 rounded" />
+          </div>
+        ))}
+      </div>
+    </div>
+  )
+}

stemtrace/server/ui/frontend/src/components/TimelineBar.tsx

@@ -0,0 +1,224 @@
+import clsx from 'clsx'
+import { useRef, useState } from 'react'
+import type { TaskEvent } from '../api/client'
+
+const stateColors: Record<string, string> = {
+  PENDING: 'bg-slate-500',
+  RECEIVED: 'bg-slate-400',
+  STARTED: 'bg-blue-500',
+  SUCCESS: 'bg-emerald-500',
+  FAILURE: 'bg-red-500',
+  RETRY: 'bg-amber-500',
+  REVOKED: 'bg-purple-500',
+  REJECTED: 'bg-red-600',
+}
+
+const TERMINAL_STATES = new Set(['SUCCESS', 'FAILURE', 'REVOKED', 'REJECTED'])
+
+// State priority within a retry cycle: PENDING → RECEIVED → STARTED → RETRY → terminal
+const STATE_PRIORITY: Record<string, number> = {
+  PENDING: 0,
+  RECEIVED: 1,
+  STARTED: 2,
+  RETRY: 3,
+  SUCCESS: 10,
+  FAILURE: 10,
+  REVOKED: 10,
+  REJECTED: 10,
+}
+
+const heightClasses = { sm: 'h-6', md: 'h-8', lg: 'h-10' }
+
+const terminalIcons: Record<string, string> = {
+  SUCCESS: '✓',
+  FAILURE: '×',
+  REVOKED: '⊘',
+  REJECTED: '⊘',
+}
+
+interface TimelineSegment {
+  state: string
+  duration: number
+  timestamp: Date
+  isTerminal: boolean
+  widthPct: number
+}
+
+function buildSegments(events: TaskEvent[]): TimelineSegment[] {
+  if (!events || events.length === 0) return []
+
+  // Filter: only keep first PENDING and first RECEIVED (retry re-queues create duplicates)
+  let hasPending = false
+  let hasReceived = false
+  const filtered = events.filter((e) => {
+    if (e.state === 'PENDING') {
+      if (hasPending) return false
+      hasPending = true
+    }
+    if (e.state === 'RECEIVED') {
+      if (hasReceived) return false
+      hasReceived = true
+    }
+    return true
+  })
+
+  // Sort by logical order: (retry_count, state_priority, timestamp)
+  // This ensures correct ordering regardless of timing issues
+  const sorted = filtered.sort((a, b) => {
+    const retryA = a.retries ?? 0
+    const retryB = b.retries ?? 0
+
+    // 1. Sort by retry count first
+    if (retryA !== retryB) return retryA - retryB
+
+    // 2. Within same retry, sort by state lifecycle
+    const priorityA = STATE_PRIORITY[a.state] ?? 5
+    const priorityB = STATE_PRIORITY[b.state] ?? 5
+    if (priorityA !== priorityB) return priorityA - priorityB
+
+    // 3. Same retry and state: use timestamp as tiebreaker
+    return new Date(a.timestamp).getTime() - new Date(b.timestamp).getTime()
+  })
+
+  const minTime = new Date(sorted[0].timestamp).getTime()
+  const maxTime = new Date(sorted[sorted.length - 1].timestamp).getTime()
+  const range = maxTime - minTime || 1
+
+  const segments: TimelineSegment[] = []
+
+  for (let i = 0; i < sorted.length; i++) {
+    const event = sorted[i]
+    const eventTime = new Date(event.timestamp).getTime()
+    const isTerminal = TERMINAL_STATES.has(event.state)
+    const nextEvent = sorted[i + 1]
+    const endTime = nextEvent ? new Date(nextEvent.timestamp).getTime() : eventTime
+
+    const duration = endTime - eventTime
+    const widthPct = range > 0 ? (duration / range) * 100 : 100 / sorted.length
+
+    segments.push({
+      state: event.state,
+      duration,
+      timestamp: new Date(event.timestamp),
+      isTerminal,
+      widthPct,
+    })
+  }
+
+  return segments
+}
+
+function formatDuration(ms: number): string {
+  if (ms < 1000) return `${ms}ms`
+  if (ms < 60000) return `${(ms / 1000).toFixed(1)}s`
+  return `${(ms / 60000).toFixed(1)}m`
+}
+
+function formatTime(date: Date): string {
+  return date.toLocaleTimeString()
+}
+
+interface TimelineBarProps {
+  events: TaskEvent[]
+  height?: 'sm' | 'md' | 'lg'
+  showLabels?: boolean
+}
+
+export function TimelineBar({ events, height = 'sm', showLabels = false }: TimelineBarProps) {
+  const [hoveredIndex, setHoveredIndex] = useState<number | null>(null)
+  const [mouseX, setMouseX] = useState(0)
+  const containerRef = useRef<HTMLDivElement>(null)
+
+  const segments = buildSegments(events)
+
+  if (segments.length === 0) {
+    return <div className={heightClasses[height]} />
+  }
+
+  const totalDuration = segments.reduce((sum, s) => sum + s.duration, 0) || 1
+
+  return (
+    <div
+      ref={containerRef}
+      className={clsx('relative overflow-visible flex', heightClasses[height])}
+      onMouseMove={(e) => {
+        if (containerRef.current) {
+          const rect = containerRef.current.getBoundingClientRect()
+          setMouseX(e.clientX - rect.left)
+        }
+      }}
+    >
+      {segments.map((segment, i) => {
+        const durationRatio = totalDuration > 0 ? segment.duration / totalDuration : 0
+        const isHovered = hoveredIndex === i
+        const isFirst = i === 0
+        const isLast = i === segments.length - 1
+
+        // Terminal states get fixed width, others grow proportionally
+        const flexStyle = segment.isTerminal
+          ? '0 0 20px'
+          : `${Math.max(1, durationRatio * 100)} 1 ${Math.max(4, durationRatio * 100)}%`
+
+        return (
+          <div
+            key={i}
+            role="presentation"
+            className={clsx(
+              'h-full flex items-center justify-center cursor-pointer',
+              'transition-[filter,transform] duration-75',
+              stateColors[segment.state] ?? 'bg-gray-500',
+              i > 0 && 'border-l border-slate-900/30',
+              isHovered && 'brightness-125 z-10',
+              isFirst && 'rounded-l',
+              isLast && 'rounded-r',
+            )}
+            style={{
+              flex: flexStyle,
+              minWidth: segment.isTerminal ? '20px' : '6px',
+              maxWidth: segment.isTerminal ? '20px' : undefined,
+            }}
+            onMouseEnter={() => setHoveredIndex(i)}
+            onMouseLeave={() => setHoveredIndex(null)}
+          >
+            {showLabels && (
+              <span className="text-xs font-semibold text-white/90">
+                {segment.isTerminal
+                  ? (terminalIcons[segment.state] ?? '⊘')
+                  : durationRatio > 0.15
+                    ? segment.state
+                    : segment.state[0]}
+              </span>
+            )}
+            {!showLabels && segment.isTerminal && (
+              <span className="text-xs font-semibold text-white/90">
+                {terminalIcons[segment.state] ?? '⊘'}
+              </span>
+            )}
+          </div>
+        )
+      })}
+
+      {hoveredIndex !== null && segments[hoveredIndex] && (
+        <div
+          className="absolute -top-12 bg-slate-950 border border-slate-700 text-white text-xs px-3 py-2 rounded-lg shadow-xl whitespace-nowrap z-20 pointer-events-none"
+          style={{ left: mouseX, transform: 'translateX(-50%)' }}
+        >
+          <div className="flex items-center gap-2">
+            <div
+              className={clsx('w-2 h-2 rounded-sm', stateColors[segments[hoveredIndex].state])}
+            />
+            <span className="font-medium">{segments[hoveredIndex].state}</span>
+            <span className="text-slate-400">•</span>
+            <span className="font-mono">{formatDuration(segments[hoveredIndex].duration)}</span>
+          </div>
+          <div className="text-slate-400 mt-1 font-mono text-[10px]">
+            {formatTime(segments[hoveredIndex].timestamp)}
+          </div>
+        </div>
+      )}
+    </div>
+  )
+}
+
+export { stateColors, TERMINAL_STATES, buildSegments, formatDuration, formatTime }
+export type { TimelineSegment }

stemtrace/server/ui/frontend/src/components/Tooltip.tsx

@@ -0,0 +1,54 @@
+/**
+ * Simple tooltip component with instant hover display.
+ * Supports different placements to avoid going out of bounds.
+ */
+
+import type { ReactNode } from 'react'
+
+type TooltipPlacement = 'top' | 'bottom' | 'left' | 'right'
+
+interface TooltipProps {
+  content: string
+  placement?: TooltipPlacement
+  children: ReactNode
+}
+
+const placementStyles: Record<TooltipPlacement, { container: string; arrow: string }> = {
+  top: {
+    container: 'bottom-full left-1/2 -translate-x-1/2 mb-2',
+    arrow:
+      'top-full left-1/2 -translate-x-1/2 border-t-slate-800 border-x-transparent border-b-transparent',
+  },
+  bottom: {
+    container: 'top-full left-1/2 -translate-x-1/2 mt-2',
+    arrow:
+      'bottom-full left-1/2 -translate-x-1/2 border-b-slate-800 border-x-transparent border-t-transparent',
+  },
+  left: {
+    container: 'right-full top-1/2 -translate-y-1/2 mr-2',
+    arrow:
+      'left-full top-1/2 -translate-y-1/2 border-l-slate-800 border-y-transparent border-r-transparent',
+  },
+  right: {
+    container: 'left-full top-1/2 -translate-y-1/2 ml-2',
+    arrow:
+      'right-full top-1/2 -translate-y-1/2 border-r-slate-800 border-y-transparent border-l-transparent',
+  },
+}
+
+export function Tooltip({ content, placement = 'bottom', children }: TooltipProps) {
+  const styles = placementStyles[placement]
+
+  return (
+    <div className="relative group">
+      {children}
+      <div
+        className={`absolute ${styles.container} px-2 py-1 text-xs text-slate-200 bg-slate-800 rounded shadow-lg whitespace-nowrap opacity-0 invisible group-hover:opacity-100 group-hover:visible transition-opacity duration-150 pointer-events-none z-50`}
+      >
+        {content}
+        {/* Arrow */}
+        <div className={`absolute ${styles.arrow} border-4`} />
+      </div>
+    </div>
+  )
+}