stemtrace 0.1.0__py3-none-any.whl

stemtrace/server/ui/frontend/package.json

@@ -0,0 +1,46 @@
+{
+  "name": "stemtrace-ui",
+  "private": true,
+  "version": "0.1.0",
+  "type": "module",
+  "scripts": {
+    "dev": "vite",
+    "build": "vite build",
+    "preview": "vite preview",
+    "lint": "biome lint .",
+    "format": "biome format .",
+    "check": "biome check .",
+    "fix": "biome check --write .",
+    "generate": "tsr generate",
+    "typecheck": "tsr generate && tsc --noEmit",
+    "test": "playwright test",
+    "test:ui": "playwright test --ui",
+    "test:report": "playwright show-report"
+  },
+  "dependencies": {
+    "@tanstack/react-query": "^5.60.0",
+    "@tanstack/react-router": "^1.82.0",
+    "@xyflow/react": "^12.3.0",
+    "clsx": "^2.1.1",
+    "date-fns": "^4.1.0",
+    "react": "^18.3.1",
+    "react-day-picker": "^9.13.0",
+    "react-dom": "^18.3.1"
+  },
+  "devDependencies": {
+    "@biomejs/biome": "^2.3.10",
+    "@playwright/test": "^1.57.0",
+    "@tailwindcss/postcss": "^4.1.18",
+    "@tanstack/router-cli": "^1.144.0",
+    "@tanstack/router-devtools": "^1.82.0",
+    "@tanstack/router-plugin": "^1.79.0",
+    "@types/node": "^25.0.3",
+    "@types/react": "^18.3.12",
+    "@types/react-dom": "^18.3.1",
+    "@vitejs/plugin-react": "^5.1.2",
+    "postcss": "^8.4.49",
+    "tailwindcss": "^4.1.18",
+    "typescript": "~5.9.3",
+    "vite": "^7.3.0"
+  }
+}

stemtrace/server/ui/frontend/playwright.config.ts

@@ -0,0 +1,40 @@
+import { defineConfig, devices } from '@playwright/test'
+
+/**
+ * Playwright configuration for stemtrace UI E2E tests.
+ *
+ * Run tests:
+ *   npx playwright test
+ *   npx playwright test --ui  # Interactive mode
+ *
+ * Prerequisites:
+ *   docker compose -f docker-compose.e2e.yml up -d --wait
+ */
+export default defineConfig({
+  testDir: './tests',
+  fullyParallel: true,
+  forbidOnly: !!process.env.CI,
+  retries: process.env.CI ? 2 : 0,
+  workers: process.env.CI ? 1 : undefined,
+  reporter: [['html', { open: 'never' }], ['list']],
+
+  use: {
+    baseURL: process.env.PLAYWRIGHT_BASE_URL || 'http://localhost:8000',
+    trace: 'on-first-retry',
+    screenshot: 'only-on-failure',
+  },
+
+  projects: [
+    {
+      name: 'chromium',
+      use: { ...devices['Desktop Chrome'] },
+    },
+  ],
+
+  // Don't start a web server - we expect docker-compose to be running
+  // webServer: {
+  //   command: 'docker compose -f docker-compose.e2e.yml up',
+  //   url: 'http://localhost:8000/api/health',
+  //   reuseExistingServer: true,
+  // },
+})

stemtrace/server/ui/frontend/postcss.config.js

@@ -0,0 +1,5 @@
+export default {
+  plugins: {
+    '@tailwindcss/postcss': {},
+  },
+}

stemtrace/server/ui/frontend/src/api/client.ts

@@ -0,0 +1,173 @@
+/**
+ * API client for stemtrace backend.
+ */
+
+// Base URL determined by environment
+export const API_BASE = import.meta.env.DEV ? '/api' : '/stemtrace/api'
+
+// Types matching backend schemas
+export type NodeType = 'TASK' | 'GROUP' | 'CHORD'
+
+export interface TaskEvent {
+  task_id: string
+  name: string
+  state: string
+  timestamp: string
+  parent_id: string | null
+  root_id: string | null
+  group_id: string | null
+  trace_id: string | null
+  retries: number
+  // Enhanced event data
+  args: unknown[] | null
+  kwargs: Record<string, unknown> | null
+  result: unknown | null
+  exception: string | null
+  traceback: string | null
+}
+
+export interface RegisteredTask {
+  name: string
+  signature: string | null
+  docstring: string | null
+  module: string | null
+  bound: boolean
+}
+
+export interface TaskRegistryResponse {
+  tasks: RegisteredTask[]
+  total: number
+}
+
+export interface TaskNode {
+  task_id: string
+  name: string
+  state: string
+  node_type: NodeType
+  group_id: string | null
+  chord_id: string | null
+  parent_id: string | null
+  children: string[]
+  events: TaskEvent[]
+  first_seen: string | null
+  last_updated: string | null
+  duration_ms: number | null
+}
+
+export interface TaskListResponse {
+  tasks: TaskNode[]
+  total: number
+  limit: number
+  offset: number
+}
+
+export interface TaskDetailResponse {
+  task: TaskNode
+  children: TaskNode[]
+}
+
+export interface GraphNode {
+  task_id: string
+  name: string
+  state: string
+  node_type: NodeType
+  group_id: string | null
+  chord_id: string | null
+  parent_id: string | null
+  children: string[]
+  duration_ms: number | null
+  first_seen: string | null
+  last_updated: string | null
+}
+
+export interface GraphResponse {
+  root_id: string
+  nodes: Record<string, GraphNode>
+}
+
+export interface GraphListResponse {
+  graphs: GraphNode[]
+  total: number
+  limit: number
+  offset: number
+}
+
+export interface HealthResponse {
+  status: string
+  version: string
+  consumer_running: boolean
+  websocket_connections: number
+  node_count: number
+}
+
+export interface FetchTasksParams {
+  limit?: number
+  offset?: number
+  state?: string
+  name?: string
+  from_date?: string
+  to_date?: string
+}
+
+export interface FetchGraphsParams {
+  limit?: number
+  offset?: number
+  from_date?: string
+  to_date?: string
+}
+
+// API functions
+export async function fetchTasks(params?: FetchTasksParams): Promise<TaskListResponse> {
+  const searchParams = new URLSearchParams()
+  if (params?.limit) searchParams.set('limit', params.limit.toString())
+  if (params?.offset) searchParams.set('offset', params.offset.toString())
+  if (params?.state) searchParams.set('state', params.state)
+  if (params?.name) searchParams.set('name', params.name)
+  if (params?.from_date) searchParams.set('from_date', params.from_date)
+  if (params?.to_date) searchParams.set('to_date', params.to_date)
+
+  const url = `${API_BASE}/tasks${searchParams.toString() ? `?${searchParams}` : ''}`
+  const response = await fetch(url)
+  if (!response.ok) throw new Error('Failed to fetch tasks')
+  return response.json()
+}
+
+export async function fetchTask(taskId: string): Promise<TaskDetailResponse> {
+  const response = await fetch(`${API_BASE}/tasks/${taskId}`)
+  if (!response.ok) throw new Error('Failed to fetch task')
+  return response.json()
+}
+
+export async function fetchGraphs(params?: FetchGraphsParams): Promise<GraphListResponse> {
+  const searchParams = new URLSearchParams()
+  if (params?.limit) searchParams.set('limit', params.limit.toString())
+  if (params?.offset) searchParams.set('offset', params.offset.toString())
+  if (params?.from_date) searchParams.set('from_date', params.from_date)
+  if (params?.to_date) searchParams.set('to_date', params.to_date)
+
+  const url = `${API_BASE}/graphs${searchParams.toString() ? `?${searchParams}` : ''}`
+  const response = await fetch(url)
+  if (!response.ok) throw new Error('Failed to fetch graphs')
+  return response.json()
+}
+
+export async function fetchGraph(rootId: string): Promise<GraphResponse> {
+  const response = await fetch(`${API_BASE}/graphs/${rootId}`)
+  if (!response.ok) throw new Error('Failed to fetch graph')
+  return response.json()
+}
+
+export async function fetchHealth(): Promise<HealthResponse> {
+  const response = await fetch(`${API_BASE}/health`)
+  if (!response.ok) throw new Error('Failed to fetch health')
+  return response.json()
+}
+
+export async function fetchTaskRegistry(query?: string): Promise<TaskRegistryResponse> {
+  const url = query
+    ? `${API_BASE}/tasks/registry?query=${encodeURIComponent(query)}`
+    : `${API_BASE}/tasks/registry`
+  const response = await fetch(url)
+  if (!response.ok) throw new Error('Failed to fetch task registry')
+  return response.json()
+}

stemtrace/server/ui/frontend/src/api/queries.ts

@@ -0,0 +1,151 @@
+/**
+ * TanStack Query hooks for API data fetching.
+ *
+ * Polling is only enabled when WebSocket is disconnected.
+ * When WS is connected, real-time updates come via WS invalidation.
+ */
+
+import { type InfiniteData, useInfiniteQuery, useQuery } from '@tanstack/react-query'
+import { useWebSocketContext } from '@/hooks/WebSocketContext'
+import {
+  type FetchGraphsParams,
+  type FetchTasksParams,
+  fetchGraph,
+  fetchGraphs,
+  fetchHealth,
+  fetchTask,
+  fetchTaskRegistry,
+  fetchTasks,
+  type GraphListResponse,
+  type GraphResponse,
+  type HealthResponse,
+  type TaskDetailResponse,
+  type TaskListResponse,
+  type TaskRegistryResponse,
+} from './client'
+
+// Polling interval when WebSocket is disconnected
+const POLL_INTERVAL = 5000
+const PAGE_SIZE = 50
+
+export function useTasks(params?: Omit<FetchTasksParams, 'limit' | 'offset'>) {
+  const { isConnected } = useWebSocketContext()
+
+  return useQuery<TaskListResponse>({
+    queryKey: ['tasks', params],
+    queryFn: () => fetchTasks({ ...params, limit: PAGE_SIZE }),
+    // Only poll when WS is disconnected
+    refetchInterval: isConnected ? false : POLL_INTERVAL,
+  })
+}
+
+export function useTasksInfinite(params?: Omit<FetchTasksParams, 'limit' | 'offset'>) {
+  const { isConnected } = useWebSocketContext()
+
+  return useInfiniteQuery<
+    TaskListResponse,
+    Error,
+    InfiniteData<TaskListResponse>,
+    unknown[],
+    number
+  >({
+    queryKey: ['tasks-infinite', params],
+    queryFn: ({ pageParam }) =>
+      fetchTasks({
+        ...params,
+        limit: PAGE_SIZE,
+        offset: pageParam,
+      }),
+    initialPageParam: 0,
+    getNextPageParam: (lastPage) => {
+      const nextOffset = lastPage.offset + lastPage.limit
+      return nextOffset < lastPage.total ? nextOffset : undefined
+    },
+    // Only poll first page when WS is disconnected
+    refetchInterval: isConnected ? false : POLL_INTERVAL,
+  })
+}
+
+export function useTask(taskId: string) {
+  const { isConnected } = useWebSocketContext()
+
+  return useQuery<TaskDetailResponse>({
+    queryKey: ['tasks', taskId],
+    queryFn: () => fetchTask(taskId),
+    enabled: !!taskId,
+    // Only poll when WS is disconnected
+    refetchInterval: isConnected ? false : POLL_INTERVAL,
+  })
+}
+
+export function useGraphs(params?: Omit<FetchGraphsParams, 'limit' | 'offset'>) {
+  const { isConnected } = useWebSocketContext()
+
+  return useQuery<GraphListResponse>({
+    queryKey: ['graphs', params],
+    queryFn: () => fetchGraphs({ ...params, limit: PAGE_SIZE }),
+    // Only poll when WS is disconnected
+    refetchInterval: isConnected ? false : POLL_INTERVAL,
+  })
+}
+
+export function useGraphsInfinite(params?: Omit<FetchGraphsParams, 'limit' | 'offset'>) {
+  const { isConnected } = useWebSocketContext()
+
+  return useInfiniteQuery<
+    GraphListResponse,
+    Error,
+    InfiniteData<GraphListResponse>,
+    unknown[],
+    number
+  >({
+    queryKey: ['graphs-infinite', params],
+    queryFn: ({ pageParam }) =>
+      fetchGraphs({
+        ...params,
+        limit: PAGE_SIZE,
+        offset: pageParam,
+      }),
+    initialPageParam: 0,
+    getNextPageParam: (lastPage) => {
+      const nextOffset = lastPage.offset + lastPage.limit
+      return nextOffset < lastPage.total ? nextOffset : undefined
+    },
+    // Only poll first page when WS is disconnected
+    refetchInterval: isConnected ? false : POLL_INTERVAL,
+  })
+}
+
+export function useGraph(rootId: string) {
+  const { isConnected } = useWebSocketContext()
+
+  return useQuery<GraphResponse>({
+    queryKey: ['graphs', rootId],
+    queryFn: () => fetchGraph(rootId),
+    enabled: !!rootId,
+    // Only poll when WS is disconnected
+    refetchInterval: isConnected ? false : POLL_INTERVAL,
+  })
+}
+
+export function useHealth() {
+  const { isConnected } = useWebSocketContext()
+
+  return useQuery<HealthResponse>({
+    queryKey: ['health'],
+    queryFn: fetchHealth,
+    // Sync with data polling interval so status changes are consistent
+    refetchInterval: isConnected ? false : POLL_INTERVAL,
+  })
+}
+
+export function useTaskRegistry(query?: string) {
+  const { isConnected } = useWebSocketContext()
+
+  return useQuery<TaskRegistryResponse>({
+    queryKey: ['taskRegistry', query],
+    queryFn: () => fetchTaskRegistry(query),
+    // Registry refreshes less frequently
+    refetchInterval: isConnected ? false : 30000,
+  })
+}

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

@@ -0,0 +1,244 @@
+/**
+ * Date range picker with preset ranges.
+ */
+
+import {
+  endOfDay,
+  endOfMonth,
+  endOfWeek,
+  format,
+  startOfDay,
+  startOfMonth,
+  startOfWeek,
+  subDays,
+  subMonths,
+  subWeeks,
+} from 'date-fns'
+import { useEffect, useRef, useState } from 'react'
+import { type DateRange, DayPicker } from 'react-day-picker'
+
+interface DateRangePickerProps {
+  value: DateRange | undefined
+  onChange: (range: DateRange | undefined) => void
+}
+
+interface Preset {
+  label: string
+  getValue: () => DateRange
+}
+
+const presets: Preset[] = [
+  {
+    label: 'Today',
+    getValue: () => ({
+      from: startOfDay(new Date()),
+      to: endOfDay(new Date()),
+    }),
+  },
+  {
+    label: 'Yesterday',
+    getValue: () => {
+      const yesterday = subDays(new Date(), 1)
+      return {
+        from: startOfDay(yesterday),
+        to: endOfDay(yesterday),
+      }
+    },
+  },
+  {
+    label: 'This Week',
+    getValue: () => ({
+      from: startOfWeek(new Date(), { weekStartsOn: 1 }),
+      to: endOfWeek(new Date(), { weekStartsOn: 1 }),
+    }),
+  },
+  {
+    label: 'Last Week',
+    getValue: () => {
+      const lastWeek = subWeeks(new Date(), 1)
+      return {
+        from: startOfWeek(lastWeek, { weekStartsOn: 1 }),
+        to: endOfWeek(lastWeek, { weekStartsOn: 1 }),
+      }
+    },
+  },
+  {
+    label: 'Last 7 Days',
+    getValue: () => ({
+      from: startOfDay(subDays(new Date(), 6)),
+      to: endOfDay(new Date()),
+    }),
+  },
+  {
+    label: 'Last 30 Days',
+    getValue: () => ({
+      from: startOfDay(subDays(new Date(), 29)),
+      to: endOfDay(new Date()),
+    }),
+  },
+  {
+    label: 'This Month',
+    getValue: () => ({
+      from: startOfMonth(new Date()),
+      to: endOfMonth(new Date()),
+    }),
+  },
+  {
+    label: 'Last Month',
+    getValue: () => {
+      const lastMonth = subMonths(new Date(), 1)
+      return {
+        from: startOfMonth(lastMonth),
+        to: endOfMonth(lastMonth),
+      }
+    },
+  },
+]
+
+export function DateRangePicker({ value, onChange }: DateRangePickerProps) {
+  const [isOpen, setIsOpen] = useState(false)
+  const containerRef = useRef<HTMLDivElement>(null)
+
+  // Close on click outside
+  useEffect(() => {
+    function handleClickOutside(event: MouseEvent) {
+      if (containerRef.current && !containerRef.current.contains(event.target as Node)) {
+        setIsOpen(false)
+      }
+    }
+    document.addEventListener('mousedown', handleClickOutside)
+    return () => document.removeEventListener('mousedown', handleClickOutside)
+  }, [])
+
+  const formatRange = () => {
+    if (!value?.from) return 'Select date range'
+    if (!value.to) return format(value.from, 'MMM d, yyyy')
+    if (format(value.from, 'yyyy-MM-dd') === format(value.to, 'yyyy-MM-dd')) {
+      return format(value.from, 'MMM d, yyyy')
+    }
+    return `${format(value.from, 'MMM d')} - ${format(value.to, 'MMM d, yyyy')}`
+  }
+
+  const handlePreset = (preset: Preset) => {
+    onChange(preset.getValue())
+    setIsOpen(false)
+  }
+
+  const handleClear = () => {
+    onChange(undefined)
+    setIsOpen(false)
+  }
+
+  return (
+    <div ref={containerRef} className="relative">
+      <button
+        type="button"
+        onClick={() => setIsOpen(!isOpen)}
+        className={`flex items-center gap-2 px-3 py-1.5 text-sm rounded-lg border transition-colors whitespace-nowrap ${
+          value?.from
+            ? 'bg-slate-700 border-slate-600 text-slate-100'
+            : 'bg-slate-800 border-slate-700 text-slate-400 hover:border-slate-600'
+        }`}
+      >
+        <CalendarIcon />
+        <span>{formatRange()}</span>
+        {value?.from && (
+          <button
+            type="button"
+            onClick={(e) => {
+              e.stopPropagation()
+              handleClear()
+            }}
+            className="ml-1 text-slate-500 hover:text-slate-300"
+          >
+            <XIcon />
+          </button>
+        )}
+      </button>
+
+      {isOpen && (
+        <div className="absolute top-full mt-2 right-0 z-50 flex bg-slate-900 rounded-xl border border-slate-700 shadow-2xl overflow-hidden">
+          {/* Presets sidebar */}
+          <div className="w-36 border-r border-slate-700 py-2">
+            {presets.map((preset) => (
+              <button
+                key={preset.label}
+                type="button"
+                onClick={() => handlePreset(preset)}
+                className="w-full px-3 py-1.5 text-left text-sm text-slate-300 hover:bg-slate-800 hover:text-slate-100 transition-colors"
+              >
+                {preset.label}
+              </button>
+            ))}
+          </div>
+
+          {/* Calendar */}
+          <div className="p-3 relative">
+            <DayPicker
+              mode="range"
+              selected={value}
+              onSelect={onChange}
+              numberOfMonths={2}
+              classNames={{
+                root: 'text-slate-200',
+                months: 'flex gap-4',
+                month: 'space-y-3',
+                month_caption: 'flex justify-center items-center h-8',
+                caption_label: 'text-sm font-medium text-slate-200',
+                nav: 'absolute top-3 left-0 right-0 flex justify-between px-1',
+                button_previous:
+                  'p-1 rounded hover:bg-slate-800 text-slate-400 hover:text-slate-200',
+                button_next: 'p-1 rounded hover:bg-slate-800 text-slate-400 hover:text-slate-200',
+                weekdays: 'flex',
+                weekday: 'w-8 text-center text-xs font-medium text-slate-500',
+                week: 'flex',
+                day: 'w-8 h-8 text-center text-sm p-0',
+                day_button:
+                  'w-8 h-8 rounded-md hover:bg-slate-800 transition-colors text-slate-300 hover:text-slate-100 disabled:text-slate-600 disabled:hover:bg-transparent',
+                selected: 'bg-emerald-600 text-white hover:bg-emerald-600',
+                range_start: 'rounded-l-md',
+                range_end: 'rounded-r-md',
+                range_middle: 'bg-emerald-600/30 rounded-none',
+                today: 'font-bold text-emerald-400',
+                disabled: 'text-slate-600',
+              }}
+            />
+          </div>
+        </div>
+      )}
+    </div>
+  )
+}
+
+function CalendarIcon() {
+  return (
+    <svg
+      className="w-4 h-4"
+      fill="none"
+      viewBox="0 0 24 24"
+      stroke="currentColor"
+      aria-hidden="true"
+    >
+      <path
+        strokeLinecap="round"
+        strokeLinejoin="round"
+        strokeWidth={2}
+        d="M8 7V3m8 4V3m-9 8h10M5 21h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v12a2 2 0 002 2z"
+      />
+    </svg>
+  )
+}
+
+function XIcon() {
+  return (
+    <svg
+      className="w-3 h-3"
+      fill="none"
+      viewBox="0 0 24 24"
+      stroke="currentColor"
+      aria-hidden="true"
+    >
+      <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M6 18L18 6M6 6l12 12" />
+    </svg>
+  )
+}