@stigmer/react 0.5.1 → 1.0.1

package/src/workflow/WorkflowExecutionTaskPanel.tsx

@@ -0,0 +1,135 @@
+"use client";
+
+import { memo } from "react";
+import { cn } from "@stigmer/theme";
+import { WorkflowTaskKind } from "@stigmer/protos/ai/stigmer/agentic/workflow/v1/enum_pb";
+import type { DerivedTaskState } from "../internal/store/workflow-execution-event-store";
+
+/** Props for {@link WorkflowExecutionTaskPanel}. */
+export interface WorkflowExecutionTaskPanelProps {
+  /** Derived task states from the event store. */
+  readonly taskStates: ReadonlyMap<string, DerivedTaskState>;
+  /** Total number of tasks declared in the workflow. */
+  readonly totalTasks: number;
+  /** Currently selected task name (for highlighting). */
+  readonly selectedTaskName?: string | null;
+  /** Callback when a task row is clicked. */
+  readonly onSelectTask?: (taskName: string) => void;
+  /** Additional CSS class names. */
+  readonly className?: string;
+}
+
+const STATUS_CONFIG: Record<DerivedTaskState["status"], { icon: string; colorClass: string }> = {
+  pending: { icon: "○", colorClass: "text-muted-foreground" },
+  running: { icon: "●", colorClass: "text-foreground" },
+  completed: { icon: "✓", colorClass: "text-success" },
+  failed: { icon: "✕", colorClass: "text-destructive" },
+  skipped: { icon: "⊘", colorClass: "text-muted-foreground" },
+  retrying: { icon: "↻", colorClass: "text-muted-foreground" },
+  waiting_approval: { icon: "◉", colorClass: "text-warning" },
+};
+
+const TASK_KIND_SHORT_LABEL: ReadonlyMap<WorkflowTaskKind, string> = new Map([
+  [WorkflowTaskKind.agent_call, "agent"],
+  [WorkflowTaskKind.llm_call, "llm"],
+  [WorkflowTaskKind.http_call, "http"],
+  [WorkflowTaskKind.grpc_call, "grpc"],
+  [WorkflowTaskKind.transform, "transform"],
+  [WorkflowTaskKind.human_input, "approval"],
+  [WorkflowTaskKind.validate, "validate"],
+  [WorkflowTaskKind.emit_event, "event"],
+  [WorkflowTaskKind.notification, "notify"],
+  [WorkflowTaskKind.eval, "eval"],
+  [WorkflowTaskKind.switch_case, "switch"],
+  [WorkflowTaskKind.for_each, "loop"],
+  [WorkflowTaskKind.fork, "fork"],
+  [WorkflowTaskKind.listen, "listen"],
+  [WorkflowTaskKind.wait, "wait"],
+]);
+
+/**
+ * Sidebar panel showing the status of each task in the workflow
+ * execution. Tasks are ordered by their first appearance in the
+ * event stream.
+ *
+ * Clicking a task row invokes `onSelectTask` which can be used
+ * to scroll the timeline to events for that task.
+ */
+export const WorkflowExecutionTaskPanel = memo(function WorkflowExecutionTaskPanel({
+  taskStates,
+  totalTasks,
+  selectedTaskName,
+  onSelectTask,
+  className,
+}: WorkflowExecutionTaskPanelProps) {
+  const tasks = Array.from(taskStates.values());
+
+  const completedCount = tasks.filter(
+    (t) => t.status === "completed" || t.status === "skipped",
+  ).length;
+
+  return (
+    <div className={cn("flex flex-col", className)}>
+      <div className="flex items-center justify-between px-3 py-2">
+        <h3 className="text-xs font-semibold uppercase tracking-wider text-muted-foreground">
+          Tasks
+        </h3>
+        {totalTasks > 0 && (
+          <span className="text-xs tabular-nums text-muted-foreground">
+            {completedCount}/{totalTasks}
+          </span>
+        )}
+      </div>
+
+      {tasks.length === 0 ? (
+        <p className="px-3 py-4 text-xs text-muted-foreground">No tasks started</p>
+      ) : (
+        <div className="flex flex-col">
+          {tasks.map((task) => {
+            const config = STATUS_CONFIG[task.status];
+            const kindLabel = TASK_KIND_SHORT_LABEL.get(task.taskKind) ?? "";
+            const isSelected = selectedTaskName === task.taskName;
+
+            return (
+              <button
+                key={task.taskName}
+                type="button"
+                onClick={() => onSelectTask?.(task.taskName)}
+                className={cn(
+                  "flex items-center gap-2 px-3 py-1.5 text-left text-xs transition-colors",
+                  "hover:bg-muted/50",
+                  isSelected && "bg-muted",
+                )}
+              >
+                <span className={cn("shrink-0 text-xs", config.colorClass)} aria-hidden="true">
+                  {config.icon}
+                </span>
+                <span className="min-w-0 flex-1 truncate text-foreground">
+                  {task.taskName}
+                </span>
+                {kindLabel && (
+                  <span className="shrink-0 text-[10px] text-muted-foreground">
+                    {kindLabel}
+                  </span>
+                )}
+                {task.durationMs > 0 && (
+                  <span className="shrink-0 tabular-nums text-[10px] text-muted-foreground">
+                    {formatDuration(task.durationMs)}
+                  </span>
+                )}
+              </button>
+            );
+          })}
+        </div>
+      )}
+    </div>
+  );
+});
+
+function formatDuration(ms: number): string {
+  if (ms < 1000) return `${ms}ms`;
+  const s = ms / 1000;
+  if (s < 60) return `${s.toFixed(1)}s`;
+  const m = Math.floor(s / 60);
+  return `${m}m`;
+}

package/src/workflow/WorkflowExecutionTimeline.tsx

@@ -0,0 +1,118 @@
+"use client";
+
+import { memo, useCallback, useEffect, useRef } from "react";
+import type { WorkflowExecutionEvent } from "@stigmer/protos/ai/stigmer/agentic/workflowexecution/v1/event_pb";
+import { cn } from "@stigmer/theme";
+import { WorkflowExecutionTimelineEvent } from "./WorkflowExecutionTimelineEvent";
+import type { WorkflowEventStreamState } from "../internal/store/workflow-execution-event-store";
+
+/** Props for {@link WorkflowExecutionTimeline}. */
+export interface WorkflowExecutionTimelineProps {
+  /** Events ordered by sequence_number ascending. */
+  readonly events: readonly WorkflowExecutionEvent[];
+  /** Current stream lifecycle state. */
+  readonly streamState: WorkflowEventStreamState;
+  /** Callback when user clicks an agent execution link. */
+  readonly onNavigateToAgentExecution?: (executionId: string) => void;
+  /** Additional CSS class names. */
+  readonly className?: string;
+}
+
+/**
+ * Scrollable event timeline for a workflow execution.
+ *
+ * Renders each event through `WorkflowExecutionTimelineEvent` and
+ * auto-scrolls to the bottom when new events arrive during live
+ * streaming, using a bottom sentinel + IntersectionObserver pattern
+ * consistent with DD-009.
+ *
+ * Auto-scroll activates only when the sentinel is visible (user is
+ * near the bottom). When the user scrolls up, auto-scroll pauses
+ * to allow reading history.
+ */
+export const WorkflowExecutionTimeline = memo(function WorkflowExecutionTimeline({
+  events,
+  streamState,
+  onNavigateToAgentExecution,
+  className,
+}: WorkflowExecutionTimelineProps) {
+  const scrollRef = useRef<HTMLDivElement>(null);
+  const sentinelRef = useRef<HTMLDivElement>(null);
+  const isNearBottomRef = useRef(true);
+
+  // IntersectionObserver tracks whether the sentinel is in view
+  useEffect(() => {
+    const sentinel = sentinelRef.current;
+    if (!sentinel) return;
+
+    const observer = new IntersectionObserver(
+      ([entry]) => {
+        isNearBottomRef.current = entry.isIntersecting;
+      },
+      { threshold: 0.1 },
+    );
+
+    observer.observe(sentinel);
+    return () => observer.disconnect();
+  }, []);
+
+  // Auto-scroll when new events arrive and user is near bottom
+  useEffect(() => {
+    if (isNearBottomRef.current && sentinelRef.current) {
+      sentinelRef.current.scrollIntoView({ behavior: "smooth", block: "end" });
+    }
+  }, [events.length]);
+
+  const isLive = streamState.stage === "streaming";
+  const isConnecting = streamState.stage === "connecting";
+  const isComplete = streamState.stage === "complete";
+  const isError = streamState.stage === "error";
+
+  if (events.length === 0 && isConnecting) {
+    return (
+      <div className={cn("flex flex-1 items-center justify-center text-sm text-muted-foreground", className)}>
+        Loading events…
+      </div>
+    );
+  }
+
+  if (events.length === 0 && isComplete) {
+    return (
+      <div className={cn("flex flex-1 items-center justify-center text-sm text-muted-foreground", className)}>
+        No events recorded
+      </div>
+    );
+  }
+
+  return (
+    <div ref={scrollRef} className={cn("flex-1 overflow-y-auto", className)} role="list" aria-label="Execution timeline">
+      {events.map((event) => (
+        <WorkflowExecutionTimelineEvent
+          key={event.eventId}
+          event={event}
+          onNavigateToAgentExecution={onNavigateToAgentExecution}
+        />
+      ))}
+
+      {/* Stream status footer */}
+      {isLive && (
+        <div className="flex items-center gap-2 px-4 py-2 text-xs text-muted-foreground">
+          <span className="relative flex h-1.5 w-1.5">
+            <span className="absolute inline-flex h-full w-full animate-ping rounded-full bg-success opacity-75" />
+            <span className="relative inline-flex h-1.5 w-1.5 rounded-full bg-success" />
+          </span>
+          Streaming events…
+        </div>
+      )}
+
+      {isError && (
+        <div className="px-4 py-2 text-xs text-destructive">
+          Stream disconnected. Events may be incomplete.
+        </div>
+      )}
+
+      {/* Bottom sentinel for auto-scroll */}
+      <div ref={sentinelRef} className="h-px" aria-hidden="true" />
+    </div>
+  );
+});