@stigmer/react 3.1.17 → 3.2.0

package/src/workflow/WorkflowExecutionArtifactPanel.tsx

@@ -1,107 +0,0 @@
-"use client";
-
-import { memo, useCallback, useState } from "react";
-import type { Artifact } from "@stigmer/protos/ai/stigmer/agentic/artifact/v1/api_pb";
-import { cn } from "@stigmer/theme";
-import { useStigmer } from "../hooks.js";
-import { formatBytes } from "./format-utils.js";
-
-/** Props for {@link WorkflowExecutionArtifactPanel}. */
-export interface WorkflowExecutionArtifactPanelProps {
-  /** Artifacts produced by the execution. */
-  readonly artifacts: readonly Artifact[];
-  /** Additional CSS class names. */
-  readonly className?: string;
-}
-
-/**
- * Sidebar panel listing artifacts produced by the workflow execution.
- * Each artifact shows its display name, content type, size, and a
- * download button that fetches a pre-signed URL via `getDownloadUrl`.
- */
-export const WorkflowExecutionArtifactPanel = memo(function WorkflowExecutionArtifactPanel({
-  artifacts,
-  className,
-}: WorkflowExecutionArtifactPanelProps) {
-  if (artifacts.length === 0) return null;
-
-  return (
-    <div className={cn("flex flex-col", className)}>
-      <div className="px-3 py-2">
-        <h3 className="text-xs font-semibold uppercase tracking-wider text-muted-foreground">
-          Artifacts
-        </h3>
-      </div>
-
-      <div className="flex flex-col">
-        {artifacts.map((artifact) => (
-          <ArtifactRow key={artifact.metadata?.id ?? artifact.metadata?.name} artifact={artifact} />
-        ))}
-      </div>
-    </div>
-  );
-});
-
-function ArtifactRow({ artifact }: { readonly artifact: Artifact }) {
-  const stigmer = useStigmer();
-  const [isDownloading, setIsDownloading] = useState(false);
-
-  const id = artifact.metadata?.id ?? "";
-  const displayName = artifact.spec?.displayName ?? artifact.metadata?.name ?? "Unnamed";
-  const contentType = artifact.spec?.contentType ?? "";
-  const sizeBytes = artifact.status?.sizeBytes ?? BigInt(0);
-
-  const handleDownload = useCallback(async () => {
-    if (!id || isDownloading) return;
-    setIsDownloading(true);
-    try {
-      const downloadUrl = await stigmer.artifact.getDownloadUrl(id);
-      if (downloadUrl.url) {
-        window.open(downloadUrl.url, "_blank", "noopener,noreferrer");
-      }
-    } catch {
-      // Graceful degradation — download not available
-    } finally {
-      setIsDownloading(false);
-    }
-  }, [id, stigmer, isDownloading]);
-
-  return (
-    <div className="flex items-center gap-2 px-3 py-1.5">
-      <span className="shrink-0 text-xs text-muted-foreground" aria-hidden="true">
-        <FileIcon />
-      </span>
-      <div className="min-w-0 flex-1">
-        <p className="truncate text-xs text-foreground">{displayName}</p>
-        <p className="text-[10px] text-muted-foreground">
-          {contentType}
-          {sizeBytes > BigInt(0) && <> · {formatBytes(sizeBytes)}</>}
-        </p>
-      </div>
-      <button
-        type="button"
-        onClick={handleDownload}
-        disabled={isDownloading || !id}
-        className={cn(
-          "shrink-0 rounded px-1.5 py-0.5 text-[10px] font-medium",
-          "border border-border text-muted-foreground",
-          "hover:bg-muted hover:text-foreground",
-          "disabled:pointer-events-none disabled:opacity-50",
-        )}
-        aria-label={`Download ${displayName}`}
-      >
-        {isDownloading ? "…" : "↓"}
-      </button>
-    </div>
-  );
-}
-
-function FileIcon() {
-  return (
-    <svg width="12" height="12" viewBox="0 0 12 12" fill="none" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round">
-      <path d="M7 1H3a1 1 0 00-1 1v8a1 1 0 001 1h6a1 1 0 001-1V4L7 1z" />
-      <path d="M7 1v3h3" />
-    </svg>
-  );
-}
-

package/src/workflow/WorkflowExecutionCostPanel.tsx

@@ -1,120 +0,0 @@
-"use client";
-
-import { memo, useMemo } from "react";
-import { cn } from "@stigmer/theme";
-import type { DerivedCostSummary } from "../internal/store/workflow-execution-event-store.js";
-import { formatMicroUsd, formatTokenCount } from "./format-utils.js";
-
-/** Props for {@link WorkflowExecutionCostPanel}. */
-export interface WorkflowExecutionCostPanelProps {
-  /** Derived cost summary from the event store. */
-  readonly costSummary: DerivedCostSummary;
-  /** Maximum cost budget in micro-USD from the workflow spec. -1 if no limit. */
-  readonly maxCostMicros?: bigint;
-  /** Maximum token budget from the workflow spec. -1 if no limit. */
-  readonly maxTokens?: bigint;
-  /** Additional CSS class names. */
-  readonly className?: string;
-}
-
-/**
- * Sidebar panel showing budget consumption with progress bars
- * for cost and tokens.
- */
-export const WorkflowExecutionCostPanel = memo(function WorkflowExecutionCostPanel({
-  costSummary,
-  maxCostMicros,
-  maxTokens,
-  className,
-}: WorkflowExecutionCostPanelProps) {
-  const BZ = BigInt(0);
-  const hasCost = costSummary.costConsumedMicros > BZ;
-  const hasTokens = costSummary.tokensConsumed > BZ;
-
-  const costLimit = maxCostMicros ?? (costSummary.costRemainingMicros >= BZ
-    ? costSummary.costConsumedMicros + costSummary.costRemainingMicros
-    : undefined);
-
-  const tokenLimit = maxTokens ?? (costSummary.tokensRemaining >= BZ
-    ? costSummary.tokensConsumed + costSummary.tokensRemaining
-    : undefined);
-
-  if (!hasCost && !hasTokens) return null;
-
-  return (
-    <div className={cn("flex flex-col gap-3 px-3 py-2", className)}>
-      <h3 className="text-xs font-semibold uppercase tracking-wider text-muted-foreground">
-        Budget
-      </h3>
-
-      {hasCost && (
-        <BudgetGauge
-          label="Cost"
-          consumed={formatMicroUsd(costSummary.costConsumedMicros)}
-          limit={costLimit ? formatMicroUsd(costLimit) : undefined}
-          percentage={costLimit && costLimit > BZ
-            ? Number((costSummary.costConsumedMicros * BigInt(100)) / costLimit)
-            : undefined}
-          breached={costSummary.thresholdBreached}
-        />
-      )}
-
-      {hasTokens && (
-        <BudgetGauge
-          label="Tokens"
-          consumed={formatTokenCount(costSummary.tokensConsumed)}
-          limit={tokenLimit ? formatTokenCount(tokenLimit) : undefined}
-          percentage={tokenLimit && tokenLimit > BZ
-            ? Number((costSummary.tokensConsumed * BigInt(100)) / tokenLimit)
-            : undefined}
-          breached={costSummary.thresholdBreached}
-        />
-      )}
-    </div>
-  );
-});
-
-function BudgetGauge({
-  label,
-  consumed,
-  limit,
-  percentage,
-  breached,
-}: {
-  readonly label: string;
-  readonly consumed: string;
-  readonly limit?: string;
-  readonly percentage?: number;
-  readonly breached: boolean;
-}) {
-  return (
-    <div className="flex flex-col gap-1">
-      <div className="flex items-center justify-between text-xs">
-        <span className="text-muted-foreground">{label}</span>
-        <span className={cn("tabular-nums", breached ? "text-warning" : "text-foreground")}>
-          {consumed}
-          {limit && <span className="text-muted-foreground"> / {limit}</span>}
-        </span>
-      </div>
-
-      {percentage !== undefined && (
-        <div className="h-1.5 w-full overflow-hidden rounded-full bg-muted">
-          <div
-            className={cn(
-              "h-full rounded-full transition-all",
-              breached ? "bg-warning" : percentage > 80 ? "bg-warning" : "bg-primary",
-            )}
-            style={{ width: `${Math.min(percentage, 100)}%` }}
-          />
-        </div>
-      )}
-
-      {percentage !== undefined && (
-        <span className="text-[10px] tabular-nums text-muted-foreground">
-          {percentage.toFixed(0)}%
-        </span>
-      )}
-    </div>
-  );
-}
-

package/src/workflow/WorkflowExecutionTaskPanel.tsx

@@ -1,129 +0,0 @@
-"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.js";
-import { formatDuration } from "./format-utils.js";
-
-/** 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>
-  );
-});
-

package/src/workflow/WorkflowExecutionTimeline.tsx

@@ -1,151 +0,0 @@
-"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.js";
-import type { WorkflowEventStreamState, DerivedTaskState } from "../internal/store/workflow-execution-event-store.js";
-
-/** 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;
-  /** Derived task states for rendering interactive approval cards. */
-  readonly taskStates?: ReadonlyMap<string, DerivedTaskState>;
-  /** Callback to submit a human_input task approval decision. */
-  readonly onSubmitTaskApproval?: (
-    taskName: string,
-    outcome: string,
-    formData?: Record<string, unknown>,
-    comment?: string,
-  ) => Promise<unknown>;
-  /**
-   * Task names whose human_input approval is currently in flight, keyed by
-   * `taskName` so deciding one gate never spins another. Supply
-   * {@link useWorkflowExecutionActions}'s `taskApprovalSubmittingTaskNames`.
-   */
-  readonly taskApprovalSubmittingTaskNames?: ReadonlySet<string>;
-  /**
-   * Per-gate human_input approval failures, keyed by `taskName`. Supply
-   * {@link useWorkflowExecutionActions}'s `taskApprovalErrorsByTaskName`.
-   */
-  readonly taskApprovalErrorsByTaskName?: ReadonlyMap<string, Error>;
-  /** 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,
-  taskStates,
-  onSubmitTaskApproval,
-  taskApprovalSubmittingTaskNames,
-  taskApprovalErrorsByTaskName,
-  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" || streamState.stage === "reconnecting";
-  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) {
-    const hasTaskFallback = taskStates && taskStates.size > 0;
-    return (
-      <div className={cn("flex flex-1 flex-col items-center justify-center gap-1 text-sm text-muted-foreground", className)}>
-        <span>No events recorded</span>
-        {hasTaskFallback && (
-          <span className="text-xs">Task status available in the panel</span>
-        )}
-      </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}
-          taskStates={taskStates}
-          onSubmitTaskApproval={onSubmitTaskApproval}
-          taskApprovalSubmittingTaskNames={taskApprovalSubmittingTaskNames}
-          taskApprovalErrorsByTaskName={taskApprovalErrorsByTaskName}
-        />
-      ))}
-
-      {/* 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>
-  );
-});