stemtrace 0.1.0__py3-none-any.whl

stemtrace/server/ui/frontend/src/routes/index.tsx

@@ -0,0 +1,119 @@
+import { createFileRoute, useNavigate } from '@tanstack/react-router'
+import { useState } from 'react'
+import { Filters } from '@/components/Filters'
+import { TaskList } from '@/components/TaskList'
+import { TaskTimeline } from '@/components/TaskTimeline'
+
+interface SearchParams {
+  state?: string
+  name?: string
+  from_date?: string
+  to_date?: string
+  view?: 'list' | 'timeline'
+}
+
+export const Route = createFileRoute('/')({
+  component: TasksPage,
+  validateSearch: (search: Record<string, unknown>): SearchParams => ({
+    state: typeof search.state === 'string' ? search.state : undefined,
+    name: typeof search.name === 'string' ? search.name : undefined,
+    from_date: typeof search.from_date === 'string' ? search.from_date : undefined,
+    to_date: typeof search.to_date === 'string' ? search.to_date : undefined,
+    view: search.view === 'list' || search.view === 'timeline' ? search.view : undefined,
+  }),
+})
+
+type ViewMode = 'list' | 'timeline'
+
+function TasksPage() {
+  const navigate = useNavigate()
+  const { state, name, from_date, to_date, view } = Route.useSearch()
+
+  const [viewMode, setViewMode] = useState<ViewMode>(view ?? 'list')
+  const filters = {
+    state,
+    name: name ?? '',
+    from_date,
+    to_date,
+  }
+
+  const setFilters = (newFilters: {
+    state?: string
+    name: string
+    from_date?: string
+    to_date?: string
+  }) => {
+    navigate({
+      to: '/',
+      search: {
+        state: newFilters.state,
+        name: newFilters.name || undefined,
+        from_date: newFilters.from_date,
+        to_date: newFilters.to_date,
+        view: viewMode,
+      },
+      replace: true,
+    })
+  }
+
+  const handleViewModeChange = (mode: ViewMode) => {
+    setViewMode(mode)
+    navigate({
+      to: '/',
+      search: {
+        state,
+        name: name || undefined,
+        from_date,
+        to_date,
+        view: mode,
+      },
+      replace: true,
+    })
+  }
+
+  return (
+    <div className="space-y-6">
+      {/* Page header */}
+      <div className="flex items-center justify-between">
+        <div>
+          <h1 className="text-2xl font-bold text-slate-100">Tasks</h1>
+          <p className="text-sm text-slate-500 mt-1">
+            Monitor your Celery task execution in real-time
+          </p>
+        </div>
+
+        {/* View toggle */}
+        <div className="flex items-center gap-2 bg-slate-800 rounded-lg p-1">
+          <button
+            type="button"
+            onClick={() => handleViewModeChange('list')}
+            className={`px-3 py-1.5 text-sm rounded-md transition-colors ${
+              viewMode === 'list'
+                ? 'bg-slate-700 text-slate-100'
+                : 'text-slate-400 hover:text-slate-200'
+            }`}
+          >
+            List
+          </button>
+          <button
+            type="button"
+            onClick={() => handleViewModeChange('timeline')}
+            className={`px-3 py-1.5 text-sm rounded-md transition-colors ${
+              viewMode === 'timeline'
+                ? 'bg-slate-700 text-slate-100'
+                : 'text-slate-400 hover:text-slate-200'
+            }`}
+          >
+            Timeline
+          </button>
+        </div>
+      </div>
+
+      {/* Filters */}
+      <Filters filters={filters} onFiltersChange={setFilters} />
+
+      {/* Content */}
+      {viewMode === 'list' ? <TaskList filters={filters} /> : <TaskTimeline filters={filters} />}
+    </div>
+  )
+}

stemtrace/server/ui/frontend/src/routes/registry.tsx

@@ -0,0 +1,211 @@
+import { createFileRoute, Link } from '@tanstack/react-router'
+import { useState } from 'react'
+import { useTaskRegistry } from '@/api/queries'
+
+export const Route = createFileRoute('/registry')({
+  component: RegistryPage,
+})
+
+function RegistryPage() {
+  const [searchQuery, setSearchQuery] = useState('')
+  const { data, isLoading, error } = useTaskRegistry(searchQuery || undefined)
+
+  return (
+    <div className="space-y-6">
+      {/* Header */}
+      <div className="flex items-center justify-between">
+        <div>
+          <h1 className="text-2xl font-bold text-slate-100">Task Registry</h1>
+          <p className="text-sm text-slate-400 mt-1">
+            All discovered task definitions ({data?.total ?? 0} tasks)
+          </p>
+        </div>
+      </div>
+
+      {/* Search */}
+      <div className="relative">
+        <input
+          type="text"
+          placeholder="Search tasks..."
+          value={searchQuery}
+          onChange={(e) => setSearchQuery(e.target.value)}
+          className="w-full bg-slate-900 border border-slate-700 rounded-lg px-4 py-2.5 text-slate-100 placeholder-slate-500 focus:outline-none focus:ring-2 focus:ring-emerald-500/50 focus:border-emerald-500"
+        />
+        <svg
+          aria-hidden="true"
+          className="absolute right-3 top-1/2 -translate-y-1/2 w-5 h-5 text-slate-500"
+          fill="none"
+          stroke="currentColor"
+          viewBox="0 0 24 24"
+        >
+          <path
+            strokeLinecap="round"
+            strokeLinejoin="round"
+            strokeWidth={2}
+            d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z"
+          />
+        </svg>
+      </div>
+
+      {/* Loading state */}
+      {isLoading && (
+        <div className="space-y-3">
+          {[...Array(5)].map((_, i) => (
+            <div
+              key={i}
+              className="bg-slate-900 rounded-xl border border-slate-800 p-4 animate-pulse"
+            >
+              <div className="h-5 w-64 bg-slate-800 rounded" />
+              <div className="h-4 w-48 bg-slate-800 rounded mt-2" />
+            </div>
+          ))}
+        </div>
+      )}
+
+      {/* Error state */}
+      {error && (
+        <div className="text-center py-12">
+          <p className="text-red-400">Failed to load task registry</p>
+        </div>
+      )}
+
+      {/* Task list */}
+      {data && data.tasks.length > 0 && (
+        <div className="space-y-3">
+          {data.tasks.map((task) => (
+            <TaskCard key={task.name} task={task} />
+          ))}
+        </div>
+      )}
+
+      {/* Empty state */}
+      {data && data.tasks.length === 0 && (
+        <div className="text-center py-12 bg-slate-900 rounded-xl border border-slate-800">
+          <svg
+            aria-hidden="true"
+            className="w-12 h-12 text-slate-600 mx-auto mb-4"
+            fill="none"
+            stroke="currentColor"
+            viewBox="0 0 24 24"
+          >
+            <path
+              strokeLinecap="round"
+              strokeLinejoin="round"
+              strokeWidth={1.5}
+              d="M9 5H7a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2V7a2 2 0 00-2-2h-2M9 5a2 2 0 002 2h2a2 2 0 002-2M9 5a2 2 0 012-2h2a2 2 0 012 2"
+            />
+          </svg>
+          <p className="text-slate-400">
+            {searchQuery ? 'No tasks match your search' : 'No tasks discovered yet'}
+          </p>
+          <p className="text-sm text-slate-500 mt-1">
+            Run some Celery tasks to see them appear here
+          </p>
+        </div>
+      )}
+    </div>
+  )
+}
+
+interface TaskCardProps {
+  task: {
+    name: string
+    signature: string | null
+    docstring: string | null
+    module: string | null
+    bound: boolean
+  }
+}
+
+function TaskCard({ task }: TaskCardProps) {
+  const [expanded, setExpanded] = useState(false)
+  const shortName = task.name.split('.').pop() || task.name
+
+  return (
+    <div className="bg-slate-900 rounded-xl border border-slate-800 overflow-hidden">
+      {/* Header */}
+      <button
+        type="button"
+        onClick={() => setExpanded(!expanded)}
+        className="w-full p-4 flex items-center justify-between text-left hover:bg-slate-800/50 transition-colors"
+      >
+        <div className="flex items-center gap-3">
+          <div className="w-8 h-8 rounded-lg bg-emerald-500/10 flex items-center justify-center">
+            <svg
+              aria-hidden="true"
+              className="w-4 h-4 text-emerald-400"
+              fill="none"
+              stroke="currentColor"
+              viewBox="0 0 24 24"
+            >
+              <path
+                strokeLinecap="round"
+                strokeLinejoin="round"
+                strokeWidth={2}
+                d="M13 10V3L4 14h7v7l9-11h-7z"
+              />
+            </svg>
+          </div>
+          <div>
+            <h3 className="font-medium text-slate-100">{shortName}</h3>
+            <p className="text-sm text-slate-500 font-mono">{task.module || 'unknown'}</p>
+          </div>
+        </div>
+        <div className="flex items-center gap-3">
+          {task.bound && (
+            <span className="text-xs px-2 py-1 rounded bg-slate-800 text-slate-400">bound</span>
+          )}
+          <svg
+            aria-hidden="true"
+            className={`w-5 h-5 text-slate-500 transition-transform ${expanded ? 'rotate-180' : ''}`}
+            fill="none"
+            stroke="currentColor"
+            viewBox="0 0 24 24"
+          >
+            <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M19 9l-7 7-7-7" />
+          </svg>
+        </div>
+      </button>
+
+      {/* Expanded content */}
+      {expanded && (
+        <div className="border-t border-slate-800 p-4 space-y-4">
+          {/* Full name */}
+          <div>
+            <dt className="text-xs text-slate-500 mb-1">Full Name</dt>
+            <dd className="font-mono text-sm text-slate-300">{task.name}</dd>
+          </div>
+
+          {/* Signature */}
+          {task.signature && (
+            <div>
+              <dt className="text-xs text-slate-500 mb-1">Signature</dt>
+              <dd className="font-mono text-sm text-emerald-400 bg-slate-950 rounded-lg px-3 py-2">
+                {task.signature}
+              </dd>
+            </div>
+          )}
+
+          {/* Docstring */}
+          {task.docstring && (
+            <div>
+              <dt className="text-xs text-slate-500 mb-1">Documentation</dt>
+              <dd className="text-sm text-slate-300 whitespace-pre-wrap">{task.docstring}</dd>
+            </div>
+          )}
+
+          {/* Actions */}
+          <div className="flex gap-2 pt-2">
+            <Link
+              to="/"
+              search={{ name: shortName }}
+              className="text-xs px-3 py-1.5 rounded-lg bg-slate-800 text-slate-300 hover:bg-slate-700 transition-colors"
+            >
+              View runs →
+            </Link>
+          </div>
+        </div>
+      )}
+    </div>
+  )
+}

stemtrace/server/ui/frontend/src/routes/tasks.$taskId.tsx

@@ -0,0 +1,313 @@
+import { createFileRoute, Link } from '@tanstack/react-router'
+import { useMemo, useState } from 'react'
+import type { TaskEvent } from '@/api/client'
+import { useTask } from '@/api/queries'
+import { TaskStateBadge } from '@/components/TaskStateBadge'
+import { buildSegments, formatDuration, stateColors, TimelineBar } from '@/components/TimelineBar'
+
+export const Route = createFileRoute('/tasks/$taskId')({
+  component: TaskDetailPage,
+})
+
+function TaskDetailPage() {
+  const { taskId } = Route.useParams()
+  const { data, isLoading, error } = useTask(taskId)
+
+  if (isLoading) {
+    return <TaskDetailSkeleton />
+  }
+
+  if (error || !data) {
+    return (
+      <div className="text-center py-12">
+        <p className="text-red-400">Failed to load task</p>
+        <Link to="/" className="text-blue-400 hover:underline mt-2 inline-block">
+          Back to tasks
+        </Link>
+      </div>
+    )
+  }
+
+  const { task, children } = data
+  const startedEvent = task.events.find((e) => e.state === 'STARTED')
+  const hasParams = startedEvent?.args || startedEvent?.kwargs
+  const successEvent = task.events.find((e) => e.state === 'SUCCESS')
+  const hasResult = successEvent?.result !== null && successEvent?.result !== undefined
+
+  return (
+    <div className="space-y-6">
+      {/* Breadcrumb */}
+      <nav className="flex items-center gap-2 text-sm">
+        <Link to="/" className="text-slate-400 hover:text-slate-200">
+          Tasks
+        </Link>
+        <span className="text-slate-600">/</span>
+        <span className="text-slate-200 font-mono">{taskId.slice(0, 8)}</span>
+      </nav>
+
+      {/* Task header */}
+      <div className="bg-slate-900 rounded-xl border border-slate-800 p-6">
+        <div className="flex items-start justify-between">
+          <div>
+            <h1 className="text-xl font-semibold text-slate-100">{task.name}</h1>
+            <p className="text-sm text-slate-500 font-mono mt-1">{task.task_id}</p>
+          </div>
+          <TaskStateBadge state={task.state} />
+        </div>
+
+        <dl className="grid grid-cols-4 gap-4 mt-6">
+          <InfoCard label="Duration" value={formatDuration(task.duration_ms ?? 0)} />
+          <InfoCard label="First seen" value={formatTime(task.first_seen)} />
+          <InfoCard label="Last update" value={formatTime(task.last_updated)} />
+          <InfoCard label="Children" value={String(children.length)} />
+        </dl>
+      </div>
+
+      {/* Parameters */}
+      {hasParams && (
+        <div className="bg-slate-900 rounded-xl border border-slate-800 p-6">
+          <h2 className="text-lg font-semibold text-slate-100 mb-4">Parameters</h2>
+          {startedEvent?.args && (
+            <div className="mb-4">
+              <span className="text-xs text-slate-500">args</span>
+              <div className="bg-slate-950 rounded-lg p-3 mt-1 font-mono text-sm text-slate-300 overflow-x-auto">
+                <pre>{JSON.stringify(startedEvent.args, null, 2)}</pre>
+              </div>
+            </div>
+          )}
+          {startedEvent?.kwargs && Object.keys(startedEvent.kwargs).length > 0 && (
+            <div>
+              <span className="text-xs text-slate-500">kwargs</span>
+              <div className="bg-slate-950 rounded-lg p-3 mt-1 font-mono text-sm text-slate-300 overflow-x-auto">
+                <pre>{JSON.stringify(startedEvent.kwargs, null, 2)}</pre>
+              </div>
+            </div>
+          )}
+        </div>
+      )}
+
+      {/* Result */}
+      {hasResult && (
+        <div className="bg-slate-900 rounded-xl border border-slate-800 p-6">
+          <h2 className="text-lg font-semibold text-slate-100 mb-4">Result</h2>
+          <div className="bg-slate-950 rounded-lg p-3 font-mono text-sm text-emerald-400 overflow-x-auto">
+            <pre>{JSON.stringify(successEvent?.result, null, 2)}</pre>
+          </div>
+        </div>
+      )}
+
+      {/* Visual Timeline */}
+      {task.events.length > 1 && (
+        <div className="bg-slate-900 rounded-xl border border-slate-800 p-6">
+          <h2 className="text-lg font-semibold text-slate-100 mb-4">Execution Timeline</h2>
+          <TaskExecutionTimeline events={task.events} />
+        </div>
+      )}
+
+      {/* Event timeline */}
+      <div className="bg-slate-900 rounded-xl border border-slate-800 p-6">
+        <h2 className="text-lg font-semibold text-slate-100 mb-4">Event History</h2>
+        <div className="space-y-2">
+          {sortEventsByTime(task.events).map((event, index) => (
+            <EventRow key={index} event={event} />
+          ))}
+        </div>
+      </div>
+
+      {/* Children */}
+      {children.length > 0 && (
+        <div className="bg-slate-900 rounded-xl border border-slate-800 p-6">
+          <h2 className="text-lg font-semibold text-slate-100 mb-4">Child Tasks</h2>
+          <div className="space-y-2">
+            {children.map((child) => (
+              <Link
+                key={child.task_id}
+                to="/tasks/$taskId"
+                params={{ taskId: child.task_id }}
+                className="flex items-center justify-between p-3 bg-slate-800/50 rounded-lg hover:bg-slate-800 transition-colors"
+              >
+                <div className="flex-1 truncate">
+                  <span className="text-slate-200">{child.name.split('.').pop()}</span>
+                  <span className="text-slate-500 text-xs ml-2">{child.task_id.slice(0, 8)}</span>
+                </div>
+                <TaskStateBadge state={child.state} />
+              </Link>
+            ))}
+          </div>
+        </div>
+      )}
+    </div>
+  )
+}
+
+function EventRow({ event }: { event: TaskEvent }) {
+  const [expanded, setExpanded] = useState(false)
+  const hasTraceback = event.state === 'FAILURE' || event.state === 'RETRY'
+  const showError = hasTraceback && event.exception
+
+  const rowContent = (
+    <>
+      <span className="text-slate-500 font-mono text-xs">{formatTime(event.timestamp)}</span>
+      <TaskStateBadge state={event.state} />
+      {event.retries > 0 && <span className="text-xs text-slate-500">retry #{event.retries}</span>}
+      {showError && <span className="text-xs text-red-400 truncate flex-1">{event.exception}</span>}
+      {hasTraceback && event.traceback && (
+        <span className="text-xs text-slate-500 ml-auto">
+          {expanded ? '▲ collapse' : '▼ expand'}
+        </span>
+      )}
+    </>
+  )
+
+  return (
+    <div className="border-l-2 border-slate-700 pl-4 py-1">
+      {hasTraceback && event.traceback ? (
+        <button
+          type="button"
+          className="flex items-center gap-4 text-sm cursor-pointer w-full text-left hover:bg-slate-800/30 rounded -ml-1 pl-1 py-0.5 transition-colors"
+          onClick={() => setExpanded(!expanded)}
+        >
+          {rowContent}
+        </button>
+      ) : (
+        <div className="flex items-center gap-4 text-sm">{rowContent}</div>
+      )}
+
+      {expanded && event.traceback && (
+        <div className="mt-2 bg-slate-950 rounded-lg p-3 font-mono text-xs text-red-300 overflow-x-auto whitespace-pre">
+          {event.traceback}
+        </div>
+      )}
+    </div>
+  )
+}
+
+function InfoCard({ label, value }: { label: string; value: string }) {
+  return (
+    <div>
+      <dt className="text-xs text-slate-500">{label}</dt>
+      <dd className="text-sm text-slate-200 font-mono mt-1">{value}</dd>
+    </div>
+  )
+}
+
+function formatTime(timestamp: string | null | undefined): string {
+  if (!timestamp) return '-'
+  return new Date(timestamp).toLocaleTimeString()
+}
+
+// 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,
+}
+
+function sortEventsByTime(events: TaskEvent[]): TaskEvent[] {
+  // 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
+  return 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()
+  })
+}
+
+function TaskExecutionTimeline({ events }: { events: TaskEvent[] }) {
+  const [hoveredIndex, setHoveredIndex] = useState<number | null>(null)
+  const segments = useMemo(() => buildSegments(events), [events])
+
+  if (segments.length === 0) return null
+
+  const sorted = [...events].sort(
+    (a, b) => new Date(a.timestamp).getTime() - new Date(b.timestamp).getTime(),
+  )
+
+  return (
+    <div className="space-y-4">
+      <div className="bg-slate-800/50 rounded h-10">
+        <TimelineBar events={events} height="lg" showLabels />
+      </div>
+
+      {/* Time markers */}
+      <div className="flex justify-between text-xs text-slate-500">
+        <span>{formatTime(sorted[0].timestamp)}</span>
+        <span>{formatTime(sorted[sorted.length - 1].timestamp)}</span>
+      </div>
+
+      {/* Duration breakdown */}
+      <div className="flex flex-wrap gap-4 text-sm">
+        {segments.map((segment, i) => {
+          const isHovered = hoveredIndex === i
+          return (
+            <div
+              key={i}
+              role="presentation"
+              className={`flex items-center gap-2 transition-opacity cursor-default ${hoveredIndex !== null && !isHovered ? 'opacity-50' : ''}`}
+              onMouseEnter={() => setHoveredIndex(i)}
+              onMouseLeave={() => setHoveredIndex(null)}
+            >
+              <div
+                className={`rounded transition-transform ${stateColors[segment.state] ?? 'bg-gray-500'} ${segment.isTerminal ? 'w-2 h-4' : 'w-4 h-4'} ${isHovered ? 'scale-110' : ''}`}
+              />
+              <span className="text-slate-400">{segment.state}</span>
+              <span className="text-slate-200 font-mono font-medium">
+                {formatDuration(segment.duration)}
+              </span>
+            </div>
+          )
+        })}
+      </div>
+    </div>
+  )
+}
+
+function TaskDetailSkeleton() {
+  return (
+    <div className="space-y-6 animate-pulse">
+      <div className="h-4 w-32 bg-slate-800 rounded" />
+      <div className="bg-slate-900 rounded-xl border border-slate-800 p-6">
+        <div className="h-6 w-64 bg-slate-800 rounded" />
+        <div className="h-4 w-48 bg-slate-800 rounded mt-2" />
+        <div className="grid grid-cols-4 gap-4 mt-6">
+          {[...Array(4)].map((_, i) => (
+            <div key={i}>
+              <div className="h-3 w-16 bg-slate-800 rounded" />
+              <div className="h-4 w-24 bg-slate-800 rounded mt-2" />
+            </div>
+          ))}
+        </div>
+      </div>
+    </div>
+  )
+}

stemtrace/server/ui/frontend/src/utils/format.ts

@@ -0,0 +1,38 @@
+export function formatDuration(ms: number | null): string {
+  if (ms === null) return ''
+  if (ms < 1000) return `${ms}ms`
+  if (ms < 60000) return `${(ms / 1000).toFixed(1)}s`
+  return `${(ms / 60000).toFixed(1)}m`
+}
+
+export function formatTime(timestamp: string | null): string {
+  if (!timestamp) return ''
+  const date = new Date(timestamp)
+  return date.toLocaleTimeString('en-US', {
+    hour: '2-digit',
+    minute: '2-digit',
+    second: '2-digit',
+    hour12: false,
+  })
+}
+
+/**
+ * Format date as YYYY-MM-DD for clean URLs.
+ */
+export function formatDateParam(date: Date | undefined): string | undefined {
+  if (!date) return undefined
+  const year = date.getFullYear()
+  const month = String(date.getMonth() + 1).padStart(2, '0')
+  const day = String(date.getDate()).padStart(2, '0')
+  return `${year}-${month}-${day}`
+}
+
+/**
+ * Parse YYYY-MM-DD string to Date (start of day in local timezone).
+ */
+export function parseDateParam(str: string | undefined): Date | undefined {
+  if (!str) return undefined
+  // Parse as local date (not UTC)
+  const [year, month, day] = str.split('-').map(Number)
+  return new Date(year, month - 1, day)
+}