@voyantjs/workflows-ui 0.37.1 → 0.38.1

package/src/components/workflow-runs-filters.tsx

@@ -0,0 +1,349 @@
+"use client"
+
+import { Button } from "@voyantjs/ui/components/button"
+import { Card, CardContent, CardHeader, CardTitle } from "@voyantjs/ui/components/card"
+import {
+  Combobox,
+  ComboboxCollection,
+  ComboboxContent,
+  ComboboxEmpty,
+  ComboboxInput,
+  ComboboxItem,
+  ComboboxList,
+} from "@voyantjs/ui/components/combobox"
+import { Input } from "@voyantjs/ui/components/input"
+import { CheckCircle2, Clock, Search, X, XCircle } from "lucide-react"
+import { useEffect, useMemo, useRef, useState } from "react"
+
+import { useWorkflowRunsUiMessagesOrDefault } from "../i18n/index.js"
+import type { ListWorkflowRunsQuery, WorkflowRun, WorkflowRunStatus } from "../types.js"
+import { TagChip } from "./common.js"
+
+export const STATUS_OPTIONS: WorkflowRunStatus[] = ["running", "failed", "succeeded", "cancelled"]
+export const TIME_RANGES = ["15m", "1h", "24h", "7d", "all"] as const
+
+export type TimeRange = (typeof TIME_RANGES)[number]
+
+export type WorkflowOption = {
+  name: string
+  count: number
+}
+
+export function WorkflowRunsFilters({
+  filters,
+  workflowOptions,
+  tagOptions,
+  statusFilters,
+  tagFilters,
+  searchQuery,
+  timeRange,
+  onChange,
+  onToggleStatus,
+  onAddTagFilter,
+  onRemoveTagFilter,
+  onSearchChange,
+  onTimeRangeChange,
+  onClear,
+}: {
+  filters: ListWorkflowRunsQuery
+  workflowOptions: WorkflowOption[]
+  tagOptions: string[]
+  statusFilters: WorkflowRunStatus[]
+  tagFilters: string[]
+  searchQuery: string
+  timeRange: TimeRange
+  onChange: (next: ListWorkflowRunsQuery) => void
+  onToggleStatus: (status: WorkflowRunStatus) => void
+  onAddTagFilter: (tag: string) => void
+  onRemoveTagFilter: (tag: string) => void
+  onSearchChange: (value: string) => void
+  onTimeRangeChange: (value: TimeRange) => void
+  onClear: () => void
+}) {
+  const messages = useWorkflowRunsUiMessagesOrDefault()
+  const searchInputRef = useRef<HTMLInputElement>(null)
+
+  useEffect(() => {
+    const onKeyDown = (event: KeyboardEvent) => {
+      if (!(event.metaKey || event.ctrlKey) || event.key.toLowerCase() !== "k") return
+      event.preventDefault()
+      searchInputRef.current?.focus()
+    }
+    globalThis.addEventListener("keydown", onKeyDown)
+    return () => globalThis.removeEventListener("keydown", onKeyDown)
+  }, [])
+
+  return (
+    <Card>
+      <CardHeader className="pb-3">
+        <div className="flex items-center justify-between gap-2">
+          <CardTitle className="text-sm">{messages.page.filterTitle}</CardTitle>
+          <Button type="button" variant="ghost" size="sm" onClick={onClear}>
+            {messages.page.clearFilters}
+          </Button>
+        </div>
+      </CardHeader>
+      <CardContent className="space-y-4">
+        <Field label={messages.page.searchLabel}>
+          <div className="relative">
+            <Search className="absolute top-1/2 left-2.5 h-4 w-4 -translate-y-1/2 text-muted-foreground" />
+            <Input
+              ref={searchInputRef}
+              className="pl-8"
+              placeholder={messages.page.searchPlaceholder}
+              value={searchQuery}
+              onChange={(event) => onSearchChange(event.target.value)}
+            />
+          </div>
+        </Field>
+        <Field label={messages.page.workflowLabel}>
+          <WorkflowCombobox
+            value={filters.workflowName ?? null}
+            options={workflowOptions}
+            placeholder={messages.page.workflowPlaceholder}
+            emptyLabel={messages.page.workflowEmpty}
+            onChange={(workflowName) =>
+              onChange({ ...filters, workflowName: workflowName ?? undefined })
+            }
+          />
+        </Field>
+        <Field label={messages.page.statusLabel}>
+          <div className="flex flex-wrap gap-1.5">
+            <Button
+              type="button"
+              variant={statusFilters.length === 0 ? "default" : "outline"}
+              size="sm"
+              onClick={() => {
+                for (const status of statusFilters) onToggleStatus(status)
+              }}
+            >
+              {messages.page.anyStatus}
+            </Button>
+            {STATUS_OPTIONS.map((status) => (
+              <Button
+                key={status}
+                type="button"
+                variant={statusFilters.includes(status) ? "default" : "outline"}
+                size="sm"
+                onClick={() => onToggleStatus(status)}
+                aria-pressed={statusFilters.includes(status)}
+              >
+                <StatusGlyph status={status} />
+                {messages.status[status]}
+              </Button>
+            ))}
+          </div>
+        </Field>
+        <Field label={messages.page.timeRangeLabel}>
+          <div className="flex flex-wrap gap-1.5">
+            {TIME_RANGES.map((range) => (
+              <Button
+                key={range}
+                type="button"
+                variant={timeRange === range ? "default" : "outline"}
+                size="sm"
+                onClick={() => onTimeRangeChange(range)}
+                aria-pressed={timeRange === range}
+              >
+                {messages.page.timeRanges[range]}
+              </Button>
+            ))}
+          </div>
+        </Field>
+        <Field label={messages.page.tagLabel}>
+          <TagFilterBuilder
+            tagOptions={tagOptions}
+            tagFilters={tagFilters}
+            placeholder={messages.page.tagPlaceholder}
+            emptyLabel={messages.page.tagEmpty}
+            addLabel={messages.page.addTag}
+            removeLabel={messages.page.removeTag}
+            onAdd={onAddTagFilter}
+            onRemove={onRemoveTagFilter}
+          />
+        </Field>
+      </CardContent>
+    </Card>
+  )
+}
+
+export function buildFilterOptions(runs: WorkflowRun[], selectedWorkflow?: string) {
+  const workflowCounts = new Map<string, number>()
+  const tags = new Set<string>()
+
+  for (const run of runs) {
+    workflowCounts.set(run.workflowName, (workflowCounts.get(run.workflowName) ?? 0) + 1)
+    for (const tag of run.tags) tags.add(tag)
+  }
+  if (selectedWorkflow && !workflowCounts.has(selectedWorkflow)) {
+    workflowCounts.set(selectedWorkflow, 0)
+  }
+
+  return {
+    workflows: Array.from(workflowCounts.entries())
+      .map(([name, count]) => ({ name, count }))
+      .sort((a, b) => b.count - a.count || a.name.localeCompare(b.name)),
+    tags: Array.from(tags).sort((a, b) => a.localeCompare(b)),
+  }
+}
+
+function WorkflowCombobox({
+  value,
+  options,
+  placeholder,
+  emptyLabel,
+  onChange,
+}: {
+  value: string | null
+  options: WorkflowOption[]
+  placeholder: string
+  emptyLabel: string
+  onChange: (value: string | null) => void
+}) {
+  const itemMap = useMemo(() => new Map(options.map((item) => [item.name, item])), [options])
+  const selectedLabel = value ?? ""
+  const [inputValue, setInputValue] = useState(selectedLabel)
+
+  useEffect(() => {
+    setInputValue(selectedLabel)
+  }, [selectedLabel])
+
+  return (
+    <Combobox
+      items={options.map((item) => item.name)}
+      value={value}
+      inputValue={inputValue}
+      autoHighlight
+      itemToStringValue={(item) => String(item)}
+      onInputValueChange={(next) => {
+        setInputValue(next)
+        if (!next) onChange(null)
+      }}
+      onValueChange={(next) => {
+        const nextValue = (next as string | null) ?? null
+        onChange(nextValue)
+        setInputValue(nextValue ?? "")
+      }}
+    >
+      <ComboboxInput placeholder={placeholder} showClear={!!value} className="w-full" />
+      <ComboboxContent>
+        <ComboboxEmpty>{emptyLabel}</ComboboxEmpty>
+        <ComboboxList>
+          <ComboboxCollection>
+            {(name) => {
+              const option = itemMap.get(String(name))
+              if (!option) return null
+              return (
+                <ComboboxItem key={option.name} value={option.name}>
+                  <div className="flex min-w-0 flex-1 items-center justify-between gap-3">
+                    <span className="truncate font-medium">{option.name}</span>
+                    <span className="text-muted-foreground text-xs">{option.count}</span>
+                  </div>
+                </ComboboxItem>
+              )
+            }}
+          </ComboboxCollection>
+        </ComboboxList>
+      </ComboboxContent>
+    </Combobox>
+  )
+}
+
+function TagFilterBuilder({
+  tagOptions,
+  tagFilters,
+  placeholder,
+  emptyLabel,
+  addLabel,
+  removeLabel,
+  onAdd,
+  onRemove,
+}: {
+  tagOptions: string[]
+  tagFilters: string[]
+  placeholder: string
+  emptyLabel: string
+  addLabel: string
+  removeLabel: string
+  onAdd: (tag: string) => void
+  onRemove: (tag: string) => void
+}) {
+  const [inputValue, setInputValue] = useState("")
+
+  const submit = () => {
+    const next = inputValue.trim()
+    if (!next) return
+    onAdd(next)
+    setInputValue("")
+  }
+
+  return (
+    <div className="space-y-2">
+      <div className="grid grid-cols-[1fr_auto] gap-2">
+        <Combobox
+          items={tagOptions}
+          value={null}
+          inputValue={inputValue}
+          autoHighlight
+          itemToStringValue={(item) => String(item)}
+          onInputValueChange={setInputValue}
+          onValueChange={(next) => {
+            const tag = (next as string | null) ?? ""
+            if (tag) {
+              onAdd(tag)
+              setInputValue("")
+            }
+          }}
+        >
+          <ComboboxInput placeholder={placeholder} className="w-full" />
+          <ComboboxContent>
+            <ComboboxEmpty>{emptyLabel}</ComboboxEmpty>
+            <ComboboxList>
+              <ComboboxCollection>
+                {(tag) => (
+                  <ComboboxItem key={String(tag)} value={String(tag)}>
+                    <TagChip tag={String(tag)} />
+                  </ComboboxItem>
+                )}
+              </ComboboxCollection>
+            </ComboboxList>
+          </ComboboxContent>
+        </Combobox>
+        <Button type="button" variant="outline" size="sm" onClick={submit}>
+          {addLabel}
+        </Button>
+      </div>
+      {tagFilters.length > 0 ? (
+        <div className="flex flex-wrap gap-1.5">
+          {tagFilters.map((tag) => (
+            <button
+              key={tag}
+              type="button"
+              className="inline-flex items-center gap-1 rounded-full border px-2 py-0.5 font-mono text-[10px] hover:bg-muted"
+              onClick={() => onRemove(tag)}
+              aria-label={`${removeLabel}: ${tag}`}
+            >
+              <TagChip tag={tag} />
+              <X className="h-3 w-3" aria-hidden="true" />
+            </button>
+          ))}
+        </div>
+      ) : null}
+    </div>
+  )
+}
+
+function Field({ label, children }: { label: string; children: React.ReactNode }) {
+  return (
+    <div className="space-y-1">
+      <span className="text-muted-foreground text-xs">{label}</span>
+      {children}
+    </div>
+  )
+}
+
+function StatusGlyph({ status }: { status: WorkflowRunStatus }) {
+  if (status === "succeeded") return <CheckCircle2 data-icon="inline-start" aria-hidden="true" />
+  if (status === "failed") return <XCircle data-icon="inline-start" aria-hidden="true" />
+  return <Clock data-icon="inline-start" aria-hidden="true" />
+}

package/src/components/workflow-runs-page.tsx

@@ -0,0 +1,357 @@
+"use client"
+
+import { Button } from "@voyantjs/ui/components/button"
+import { Card, CardContent } from "@voyantjs/ui/components/card"
+import { Clock, Workflow } from "lucide-react"
+import { useEffect, useMemo, useState } from "react"
+
+import { useWorkflowRunsUiMessagesOrDefault } from "../i18n/index.js"
+import type {
+  ListWorkflowRunsQuery,
+  WorkflowRun,
+  WorkflowRunStatus,
+  WorkflowRunsApi,
+} from "../types.js"
+import { formatDuration, formatRelative, StatusBadge, StatusIcon, TagChip } from "./common.js"
+import { WorkflowRunDetailPage } from "./workflow-run-detail-page.js"
+import { buildFilterOptions, type TimeRange, WorkflowRunsFilters } from "./workflow-runs-filters.js"
+
+export interface WorkflowRunsPageProps {
+  api: WorkflowRunsApi
+  selectedRunId?: string | null
+  onOpenRun?: (id: string) => void
+  initialFilters?: ListWorkflowRunsQuery
+  pollIntervalMs?: number
+  className?: string
+}
+
+export function WorkflowRunsPage({
+  api,
+  selectedRunId,
+  onOpenRun,
+  initialFilters,
+  pollIntervalMs = 5000,
+  className,
+}: WorkflowRunsPageProps) {
+  const messages = useWorkflowRunsUiMessagesOrDefault()
+  const [filters, setFilters] = useState<ListWorkflowRunsQuery>(initialFilters ?? { limit: 50 })
+  const [statusFilters, setStatusFilters] = useState<WorkflowRunStatus[]>(
+    initialFilters?.status ? [initialFilters.status] : [],
+  )
+  const [tagFilters, setTagFilters] = useState<string[]>(
+    initialFilters?.tag ? [initialFilters.tag] : [],
+  )
+  const [searchQuery, setSearchQuery] = useState("")
+  const [timeRange, setTimeRange] = useState<TimeRange>("24h")
+  const [live, setLive] = useState(false)
+  const [runs, setRuns] = useState<WorkflowRun[]>([])
+  const [error, setError] = useState<string | null>(null)
+  const [loading, setLoading] = useState(false)
+  const [localSelectedRunId, setLocalSelectedRunId] = useState<string | null>(null)
+  const activeRunId = selectedRunId !== undefined ? selectedRunId : localSelectedRunId
+
+  const serverFilters = useMemo(
+    () => ({
+      ...filters,
+      status: statusFilters.length === 1 ? statusFilters[0] : undefined,
+      tag: tagFilters.length === 1 ? tagFilters[0] : undefined,
+    }),
+    [filters, statusFilters, tagFilters],
+  )
+
+  useEffect(() => {
+    let cancelled = false
+    const refresh = async () => {
+      if (typeof document !== "undefined" && document.hidden) return
+      setLoading(true)
+      try {
+        const res = await api.listRuns(serverFilters)
+        if (!cancelled) {
+          setRuns(res.data)
+          setError(null)
+        }
+      } catch (err) {
+        if (!cancelled) setError(err instanceof Error ? err.message : messages.page.loadError)
+      } finally {
+        if (!cancelled) setLoading(false)
+      }
+    }
+    void refresh()
+    const interval = setInterval(() => void refresh(), live ? 1000 : pollIntervalMs)
+    return () => {
+      cancelled = true
+      clearInterval(interval)
+    }
+  }, [api, live, messages.page.loadError, pollIntervalMs, serverFilters])
+
+  const filterOptions = useMemo(
+    () => buildFilterOptions(runs, filters.workflowName),
+    [filters.workflowName, runs],
+  )
+  const filteredRuns = useMemo(
+    () => filterRuns({ runs, statusFilters, tagFilters, searchQuery, timeRange }),
+    [runs, searchQuery, statusFilters, tagFilters, timeRange],
+  )
+
+  const openRun = (id: string) => {
+    setLocalSelectedRunId(id)
+    onOpenRun?.(id)
+  }
+  const toggleStatus = (status: WorkflowRunStatus) => {
+    setStatusFilters((current) =>
+      current.includes(status) ? current.filter((item) => item !== status) : [...current, status],
+    )
+  }
+  const addTagFilter = (tag: string) => {
+    const trimmed = tag.trim()
+    if (!trimmed) return
+    setTagFilters((current) => (current.includes(trimmed) ? current : [...current, trimmed]))
+  }
+  const removeTagFilter = (tag: string) =>
+    setTagFilters((current) => current.filter((item) => item !== tag))
+
+  return (
+    <div className={`flex min-h-screen flex-col bg-background ${className ?? ""}`}>
+      <header className="sticky top-0 z-10 border-b bg-background/95 backdrop-blur supports-[backdrop-filter]:bg-background/60">
+        <div className="container mx-auto flex items-center gap-3 px-4 py-3">
+          <Workflow className="h-5 w-5" />
+          <div className="min-w-0">
+            <h1 className="font-semibold text-base">{messages.page.title}</h1>
+            <p className="text-muted-foreground text-xs">{messages.page.subtitle}</p>
+          </div>
+          <div className="ml-auto flex items-center gap-2">
+            <Button
+              type="button"
+              variant={live ? "default" : "outline"}
+              size="sm"
+              onClick={() => setLive((value) => !value)}
+              aria-pressed={live}
+            >
+              <Clock data-icon="inline-start" aria-hidden="true" />
+              {messages.page.live}
+            </Button>
+            <span className="text-muted-foreground text-xs">
+              {messages.page.filteredRunCount(filteredRuns.length, runs.length)}
+            </span>
+          </div>
+        </div>
+      </header>
+      <main className="container mx-auto flex flex-1 flex-col gap-6 px-4 py-6 md:flex-row">
+        <aside className="space-y-3 md:w-96 md:shrink-0">
+          <WorkflowRunsFilters
+            filters={filters}
+            workflowOptions={filterOptions.workflows}
+            tagOptions={filterOptions.tags}
+            statusFilters={statusFilters}
+            tagFilters={tagFilters}
+            searchQuery={searchQuery}
+            timeRange={timeRange}
+            onChange={setFilters}
+            onToggleStatus={toggleStatus}
+            onAddTagFilter={addTagFilter}
+            onRemoveTagFilter={removeTagFilter}
+            onSearchChange={setSearchQuery}
+            onTimeRangeChange={setTimeRange}
+            onClear={() => {
+              setFilters({ limit: filters.limit ?? 50 })
+              setStatusFilters([])
+              setTagFilters([])
+              setSearchQuery("")
+              setTimeRange("24h")
+            }}
+          />
+          {error ? (
+            <Card className="border-destructive/40">
+              <CardContent className="pt-4 text-destructive text-sm">{error}</CardContent>
+            </Card>
+          ) : null}
+          <div className="space-y-2">
+            {filteredRuns.length === 0 && !loading ? (
+              <Card>
+                <CardContent className="pt-4 text-muted-foreground text-sm">
+                  {messages.page.empty}
+                </CardContent>
+              </Card>
+            ) : null}
+            {filteredRuns.map((run) => (
+              <RunListItem
+                key={run.id}
+                run={run}
+                selected={activeRunId === run.id}
+                activeTagFilters={tagFilters}
+                activeStatusFilters={statusFilters}
+                onSelect={() => openRun(run.id)}
+                onToggleStatus={toggleStatus}
+                onToggleTag={(tag) =>
+                  tagFilters.includes(tag) ? removeTagFilter(tag) : addTagFilter(tag)
+                }
+              />
+            ))}
+          </div>
+        </aside>
+        <section className="min-w-0 flex-1">
+          {activeRunId ? (
+            <WorkflowRunDetailPage api={api} runId={activeRunId} onOpenRun={openRun} />
+          ) : (
+            <SelectPrompt />
+          )}
+        </section>
+      </main>
+    </div>
+  )
+}
+
+export function WorkflowRunsPageSkeleton() {
+  const messages = useWorkflowRunsUiMessagesOrDefault()
+  return (
+    <div className="flex min-h-screen flex-col bg-background">
+      <header className="border-b px-4 py-3">
+        <div
+          className="h-5 w-40 rounded bg-muted"
+          role="status"
+          aria-label={messages.page.loading}
+        />
+      </header>
+      <main className="container mx-auto flex flex-1 flex-col gap-6 px-4 py-6 md:flex-row">
+        <aside className="space-y-3 md:w-96 md:shrink-0">
+          <div className="h-56 rounded-md bg-muted" />
+          <div className="h-20 rounded-md bg-muted" />
+          <div className="h-20 rounded-md bg-muted" />
+        </aside>
+        <section className="min-h-[24rem] flex-1 rounded-md bg-muted" />
+      </main>
+    </div>
+  )
+}
+
+function RunListItem({
+  run,
+  selected,
+  activeTagFilters,
+  activeStatusFilters,
+  onSelect,
+  onToggleStatus,
+  onToggleTag,
+}: {
+  run: WorkflowRun
+  selected: boolean
+  activeTagFilters: string[]
+  activeStatusFilters: WorkflowRunStatus[]
+  onSelect: () => void
+  onToggleStatus: (status: WorkflowRunStatus) => void
+  onToggleTag: (tag: string) => void
+}) {
+  const messages = useWorkflowRunsUiMessagesOrDefault()
+  return (
+    <div
+      className={`rounded-md border bg-card p-3 text-sm transition-colors hover:bg-muted/50 ${
+        selected ? "border-primary bg-primary/5" : "" // i18n-literal-ok: CSS classes
+      }`}
+    >
+      <div className="flex items-center gap-2">
+        <button
+          type="button"
+          onClick={onSelect}
+          className="flex min-w-0 flex-1 items-center gap-2 text-left"
+        >
+          <StatusIcon status={run.status} />
+          <span className="truncate font-medium">{run.workflowName}</span>
+          <span className="ml-auto whitespace-nowrap text-muted-foreground text-xs">
+            {formatRelative(run.startedAt, messages)}
+          </span>
+        </button>
+        <button
+          type="button"
+          onClick={() => onToggleStatus(run.status)}
+          aria-pressed={activeStatusFilters.includes(run.status)}
+        >
+          <StatusBadge status={run.status} messages={messages} />
+        </button>
+      </div>
+      {run.durationMs != null ? (
+        <div className="mt-1 text-muted-foreground text-xs">{formatDuration(run.durationMs)}</div>
+      ) : null}
+      {run.tags.length > 0 ? (
+        <div className="mt-2 flex flex-wrap gap-1">
+          {run.tags.slice(0, 3).map((tag) => (
+            <button
+              key={tag}
+              type="button"
+              onClick={() => onToggleTag(tag)}
+              aria-pressed={activeTagFilters.includes(tag)}
+              className={
+                activeTagFilters.includes(tag) ? "rounded-full ring-2 ring-primary/40" : undefined
+              }
+            >
+              <TagChip tag={tag} />
+            </button>
+          ))}
+          {run.tags.length > 3 ? (
+            <span className="text-muted-foreground text-xs">{`+${run.tags.length - 3}`}</span>
+          ) : null}
+        </div>
+      ) : null}
+    </div>
+  )
+}
+
+function SelectPrompt() {
+  const messages = useWorkflowRunsUiMessagesOrDefault()
+  return (
+    <Card>
+      <CardContent className="flex min-h-[24rem] items-center justify-center text-muted-foreground text-sm">
+        {messages.page.selectPrompt}
+      </CardContent>
+    </Card>
+  )
+}
+
+function filterRuns({
+  runs,
+  statusFilters,
+  tagFilters,
+  searchQuery,
+  timeRange,
+}: {
+  runs: WorkflowRun[]
+  statusFilters: WorkflowRunStatus[]
+  tagFilters: string[]
+  searchQuery: string
+  timeRange: TimeRange
+}) {
+  const search = searchQuery.trim().toLowerCase()
+  const cutoff = rangeCutoff(timeRange)
+
+  return runs.filter((run) => {
+    if (statusFilters.length > 0 && !statusFilters.includes(run.status)) return false
+    if (tagFilters.length > 0 && !tagFilters.every((tag) => run.tags.includes(tag))) return false
+    if (cutoff && new Date(run.startedAt).getTime() < cutoff) return false
+    if (!search) return true
+    return runSearchText(run).includes(search)
+  })
+}
+
+function rangeCutoff(range: TimeRange) {
+  if (range === "all") return null
+  const minutes =
+    range === "15m" ? 15 : range === "1h" ? 60 : range === "24h" ? 24 * 60 : 7 * 24 * 60
+  return Date.now() - minutes * 60_000
+}
+
+function runSearchText(run: WorkflowRun) {
+  return [
+    run.id,
+    run.workflowName,
+    run.trigger,
+    run.correlationId,
+    run.status,
+    ...run.tags,
+    run.error?.message,
+    run.error?.code,
+    run.input ? JSON.stringify(run.input) : null,
+    run.result ? JSON.stringify(run.result) : null,
+  ]
+    .filter(Boolean)
+    .join(" ")
+    .toLowerCase()
+}