@stigmer/react 0.5.1 → 1.0.1

package/src/workflow/ExecutionSummaryWidget.tsx

@@ -0,0 +1,194 @@
+"use client";
+
+import { memo, useMemo } from "react";
+import type { ExecutionSummary } from "@stigmer/protos/ai/stigmer/agentic/workflowexecution/v1/io_pb";
+import { ExecutionPhase } from "@stigmer/protos/ai/stigmer/agentic/workflowexecution/v1/enum_pb";
+import { cn } from "@stigmer/theme";
+
+export interface ExecutionSummaryWidgetProps {
+  readonly summary: ExecutionSummary | null;
+  readonly isLoading: boolean;
+  readonly className?: string;
+}
+
+interface StatCardDef {
+  readonly label: string;
+  readonly valueClass: string;
+  readonly getValue: (s: ExecutionSummary) => string;
+}
+
+const PHASE_LABEL: ReadonlyMap<number, string> = new Map([
+  [ExecutionPhase.EXECUTION_PENDING, "Pending"],
+  [ExecutionPhase.EXECUTION_IN_PROGRESS, "Running"],
+  [ExecutionPhase.EXECUTION_COMPLETED, "Completed"],
+  [ExecutionPhase.EXECUTION_FAILED, "Failed"],
+  [ExecutionPhase.EXECUTION_CANCELLED, "Cancelled"],
+  [ExecutionPhase.EXECUTION_TERMINATED, "Terminated"],
+  [ExecutionPhase.EXECUTION_PAUSED, "Paused"],
+]);
+
+const STAT_CARDS: readonly StatCardDef[] = [
+  {
+    label: "Active",
+    valueClass: "text-foreground",
+    getValue: (s) => String(s.activeCount),
+  },
+  {
+    label: "Completed",
+    valueClass: "text-success",
+    getValue: (s) =>
+      String(s.phaseCounts[ExecutionPhase.EXECUTION_COMPLETED] ?? 0),
+  },
+  {
+    label: "Failed",
+    valueClass: "text-destructive",
+    getValue: (s) =>
+      String(s.phaseCounts[ExecutionPhase.EXECUTION_FAILED] ?? 0),
+  },
+  {
+    label: "Total Cost",
+    valueClass: "text-foreground",
+    getValue: (s) =>
+      s.totalCost?.totalCostUsd
+        ? `$${s.totalCost.totalCostUsd.toFixed(2)}`
+        : "$0.00",
+  },
+];
+
+function formatDuration(seconds: number): string {
+  if (seconds < 60) return `${Math.round(seconds)}s`;
+  if (seconds < 3600) return `${Math.round(seconds / 60)}m`;
+  return `${(seconds / 3600).toFixed(1)}h`;
+}
+
+/**
+ * Dashboard widget showing aggregate execution KPIs.
+ *
+ * Displays stat cards for active, completed, failed counts and total cost.
+ * Below the cards, shows average duration and a phase breakdown bar.
+ *
+ * All visuals use `--stgm-*` tokens. No hardcoded colors.
+ */
+export const ExecutionSummaryWidget = memo(function ExecutionSummaryWidget({
+  summary,
+  isLoading,
+  className,
+}: ExecutionSummaryWidgetProps) {
+  const phaseBreakdown = useMemo(() => {
+    if (!summary) return [];
+    const entries: { label: string; count: number; colorClass: string }[] = [];
+    const colorMap: Record<number, string> = {
+      [ExecutionPhase.EXECUTION_PENDING]: "bg-muted-foreground",
+      [ExecutionPhase.EXECUTION_IN_PROGRESS]: "bg-primary",
+      [ExecutionPhase.EXECUTION_COMPLETED]: "bg-success",
+      [ExecutionPhase.EXECUTION_FAILED]: "bg-destructive",
+      [ExecutionPhase.EXECUTION_CANCELLED]: "bg-muted-foreground",
+      [ExecutionPhase.EXECUTION_TERMINATED]: "bg-destructive",
+      [ExecutionPhase.EXECUTION_PAUSED]: "bg-muted-foreground",
+    };
+    for (const [phase, count] of Object.entries(summary.phaseCounts)) {
+      const p = Number(phase);
+      if (count > 0) {
+        entries.push({
+          label: PHASE_LABEL.get(p) ?? `Phase ${p}`,
+          count,
+          colorClass: colorMap[p] ?? "bg-muted",
+        });
+      }
+    }
+    return entries;
+  }, [summary]);
+
+  const totalExecutions = phaseBreakdown.reduce((sum, e) => sum + e.count, 0);
+
+  if (isLoading) {
+    return (
+      <div className={cn("space-y-3", className)} aria-busy="true">
+        <div className="grid gap-3 sm:grid-cols-2 lg:grid-cols-4">
+          {Array.from({ length: 4 }, (_, i) => (
+            <div
+              key={i}
+              className="h-[72px] animate-pulse rounded-lg border border-border bg-muted/50"
+            />
+          ))}
+        </div>
+      </div>
+    );
+  }
+
+  if (!summary) return null;
+
+  const avgSeconds = summary.avgDuration
+    ? Number(summary.avgDuration.seconds)
+    : 0;
+
+  return (
+    <div className={cn("space-y-4", className)}>
+      <div className="grid gap-3 sm:grid-cols-2 lg:grid-cols-4">
+        {STAT_CARDS.map((card) => (
+          <div
+            key={card.label}
+            className="rounded-lg border border-border bg-card px-4 py-3"
+          >
+            <p className="text-xs font-medium text-muted-foreground">
+              {card.label}
+            </p>
+            <p className={cn("mt-1 text-2xl font-semibold", card.valueClass)}>
+              {card.getValue(summary)}
+            </p>
+          </div>
+        ))}
+      </div>
+
+      {(avgSeconds > 0 || totalExecutions > 0) && (
+        <div className="flex items-center gap-6 text-xs text-muted-foreground">
+          {avgSeconds > 0 && (
+            <span>
+              Avg duration:{" "}
+              <span className="font-medium text-foreground">
+                {formatDuration(avgSeconds)}
+              </span>
+            </span>
+          )}
+          {totalExecutions > 0 && (
+            <span>
+              Total:{" "}
+              <span className="font-medium text-foreground">
+                {totalExecutions}
+              </span>{" "}
+              executions
+            </span>
+          )}
+        </div>
+      )}
+
+      {totalExecutions > 0 && (
+        <div className="space-y-2">
+          <div
+            className="flex h-2 overflow-hidden rounded-full bg-muted"
+            role="img"
+            aria-label="Execution phase breakdown"
+          >
+            {phaseBreakdown.map((entry) => (
+              <div
+                key={entry.label}
+                className={cn("h-full", entry.colorClass)}
+                style={{
+                  width: `${(entry.count / totalExecutions) * 100}%`,
+                }}
+              />
+            ))}
+          </div>
+          <div className="flex flex-wrap gap-x-4 gap-y-1">
+            {phaseBreakdown.map((entry) => (
+              <span key={entry.label} className="flex items-center gap-1.5 text-xs text-muted-foreground">
+                <span className={cn("inline-block h-2 w-2 rounded-full", entry.colorClass)} />
+                {entry.label}: {entry.count}
+              </span>
+            ))}
+          </div>
+        </div>
+      )}
+    </div>
+  );
+});

package/src/workflow/ExecutionTrendChart.tsx

@@ -0,0 +1,157 @@
+"use client";
+
+import { memo, useMemo } from "react";
+import type { ExecutionSummary } from "@stigmer/protos/ai/stigmer/agentic/workflowexecution/v1/io_pb";
+import { ExecutionPhase } from "@stigmer/protos/ai/stigmer/agentic/workflowexecution/v1/enum_pb";
+import { cn } from "@stigmer/theme";
+
+export interface ExecutionTrendChartProps {
+  readonly summary: ExecutionSummary | null;
+  readonly isLoading: boolean;
+  readonly className?: string;
+}
+
+interface PhaseSegment {
+  readonly label: string;
+  readonly count: number;
+  readonly colorClass: string;
+  readonly bgColorClass: string;
+}
+
+const PHASE_DISPLAY: ReadonlyMap<
+  number,
+  { label: string; colorClass: string; bgColorClass: string }
+> = new Map([
+  [
+    ExecutionPhase.EXECUTION_COMPLETED,
+    { label: "Completed", colorClass: "text-success", bgColorClass: "bg-success" },
+  ],
+  [
+    ExecutionPhase.EXECUTION_FAILED,
+    { label: "Failed", colorClass: "text-destructive", bgColorClass: "bg-destructive" },
+  ],
+  [
+    ExecutionPhase.EXECUTION_IN_PROGRESS,
+    { label: "Running", colorClass: "text-primary", bgColorClass: "bg-primary" },
+  ],
+  [
+    ExecutionPhase.EXECUTION_PENDING,
+    { label: "Pending", colorClass: "text-muted-foreground", bgColorClass: "bg-muted-foreground" },
+  ],
+  [
+    ExecutionPhase.EXECUTION_PAUSED,
+    { label: "Paused", colorClass: "text-muted-foreground", bgColorClass: "bg-muted-foreground/60" },
+  ],
+  [
+    ExecutionPhase.EXECUTION_CANCELLED,
+    { label: "Cancelled", colorClass: "text-muted-foreground", bgColorClass: "bg-muted-foreground/40" },
+  ],
+  [
+    ExecutionPhase.EXECUTION_TERMINATED,
+    { label: "Terminated", colorClass: "text-destructive", bgColorClass: "bg-destructive/60" },
+  ],
+]);
+
+/**
+ * Phase distribution chart for workflow executions.
+ *
+ * Shows a stacked horizontal bar with a legend listing each phase
+ * and its count. Renders from `ExecutionSummary.phaseCounts`.
+ */
+export const ExecutionTrendChart = memo(function ExecutionTrendChart({
+  summary,
+  isLoading,
+  className,
+}: ExecutionTrendChartProps) {
+  const segments: PhaseSegment[] = useMemo(() => {
+    if (!summary) return [];
+    const result: PhaseSegment[] = [];
+    for (const [phase, count] of Object.entries(summary.phaseCounts)) {
+      const p = Number(phase);
+      if (count <= 0) continue;
+      const display = PHASE_DISPLAY.get(p);
+      if (!display) continue;
+      result.push({ ...display, count });
+    }
+    return result.sort((a, b) => b.count - a.count);
+  }, [summary]);
+
+  const total = useMemo(
+    () => segments.reduce((sum, s) => sum + s.count, 0),
+    [segments],
+  );
+
+  if (isLoading) {
+    return (
+      <div className={cn("space-y-3", className)} aria-busy="true">
+        <div className="h-4 w-36 animate-pulse rounded bg-muted" />
+        <div className="h-8 animate-pulse rounded-full bg-muted/50" />
+        <div className="flex gap-4">
+          {Array.from({ length: 3 }, (_, i) => (
+            <div key={i} className="h-3 w-16 animate-pulse rounded bg-muted" />
+          ))}
+        </div>
+      </div>
+    );
+  }
+
+  if (!summary || total === 0) {
+    return (
+      <div className={cn("space-y-3", className)}>
+        <h3 className="text-sm font-semibold text-foreground">
+          Execution Distribution
+        </h3>
+        <p className="py-6 text-center text-xs text-muted-foreground">
+          No execution data available
+        </p>
+      </div>
+    );
+  }
+
+  return (
+    <div className={cn("space-y-3", className)}>
+      <div className="flex items-baseline justify-between">
+        <h3 className="text-sm font-semibold text-foreground">
+          Execution Distribution
+        </h3>
+        <span className="text-xs tabular-nums text-muted-foreground">
+          {total} total
+        </span>
+      </div>
+
+      <div
+        className="flex h-3 overflow-hidden rounded-full bg-muted"
+        role="img"
+        aria-label="Execution phase distribution"
+      >
+        {segments.map((seg) => (
+          <div
+            key={seg.label}
+            className={cn("h-full transition-all duration-500", seg.bgColorClass)}
+            style={{ width: `${(seg.count / total) * 100}%` }}
+          />
+        ))}
+      </div>
+
+      <div className="flex flex-wrap gap-x-4 gap-y-1.5">
+        {segments.map((seg) => (
+          <span
+            key={seg.label}
+            className="flex items-center gap-1.5 text-xs text-muted-foreground"
+          >
+            <span
+              className={cn(
+                "inline-block h-2.5 w-2.5 rounded-sm",
+                seg.bgColorClass,
+              )}
+            />
+            <span>{seg.label}</span>
+            <span className={cn("font-semibold tabular-nums", seg.colorClass)}>
+              {seg.count}
+            </span>
+          </span>
+        ))}
+      </div>
+    </div>
+  );
+});

package/src/workflow/FailedRunsWidget.tsx

@@ -0,0 +1,109 @@
+"use client";
+
+import { memo } from "react";
+import type { WorkflowExecution } from "@stigmer/protos/ai/stigmer/agentic/workflowexecution/v1/api_pb";
+import { timestampDate } from "@bufbuild/protobuf/wkt";
+import { cn } from "@stigmer/theme";
+
+export interface FailedRunsWidgetProps {
+  /** Recent failed executions to display. */
+  readonly executions: readonly WorkflowExecution[];
+  readonly isLoading: boolean;
+  /** Called when the user clicks "View" on a failed execution. */
+  readonly onViewClick?: (executionId: string) => void;
+  readonly className?: string;
+}
+
+function formatTimeAgo(date: Date): string {
+  const seconds = Math.floor((Date.now() - date.getTime()) / 1000);
+  if (seconds < 60) return "just now";
+  if (seconds < 3600) return `${Math.floor(seconds / 60)}m ago`;
+  if (seconds < 86400) return `${Math.floor(seconds / 3600)}h ago`;
+  return `${Math.floor(seconds / 86400)}d ago`;
+}
+
+/**
+ * Dashboard widget showing recent failed workflow executions.
+ *
+ * Consumes data from `useWorkflowExecutionList({ phase: EXECUTION_FAILED })`.
+ * Displays a compact list with execution name, error summary, and time of failure.
+ *
+ * All visuals use `--stgm-*` tokens. No hardcoded colors.
+ */
+export const FailedRunsWidget = memo(function FailedRunsWidget({
+  executions,
+  isLoading,
+  onViewClick,
+  className,
+}: FailedRunsWidgetProps) {
+  if (isLoading) {
+    return (
+      <div className={cn("space-y-2", className)} aria-busy="true">
+        <div className="h-4 w-24 animate-pulse rounded bg-muted" />
+        {Array.from({ length: 3 }, (_, i) => (
+          <div
+            key={i}
+            className="h-14 animate-pulse rounded-lg border border-border bg-muted/50"
+          />
+        ))}
+      </div>
+    );
+  }
+
+  return (
+    <div className={cn("space-y-3", className)}>
+      <h3 className="text-sm font-semibold text-foreground">
+        Recent Failures
+      </h3>
+
+      {executions.length === 0 ? (
+        <p className="py-4 text-center text-xs text-muted-foreground">
+          No recent failures
+        </p>
+      ) : (
+        <ul className="space-y-2" role="list">
+          {executions.map((exec) => {
+            const id = exec.metadata?.id;
+            const name =
+              exec.metadata?.name || exec.metadata?.slug || "Unnamed";
+            const errorMsg = exec.status?.error || "Unknown error";
+            const failedAt = exec.status?.audit?.specAudit?.updatedAt;
+            const failedDate = failedAt ? timestampDate(failedAt) : null;
+
+            return (
+              <li
+                key={id}
+                className="rounded-lg border border-destructive/20 bg-destructive/5 px-3 py-2.5"
+              >
+                <div className="flex items-start justify-between gap-2">
+                  <div className="min-w-0 flex-1">
+                    <p className="truncate text-sm font-medium text-foreground">
+                      {name}
+                    </p>
+                    <p className="mt-0.5 line-clamp-1 text-xs text-destructive">
+                      {errorMsg}
+                    </p>
+                    {failedDate && (
+                      <p className="mt-0.5 text-xs text-muted-foreground">
+                        {formatTimeAgo(failedDate)}
+                      </p>
+                    )}
+                  </div>
+                  {onViewClick && id && (
+                    <button
+                      type="button"
+                      onClick={() => onViewClick(id)}
+                      className="shrink-0 rounded-md border border-border bg-background px-2.5 py-1 text-xs font-medium text-foreground transition-colors hover:bg-accent hover:text-accent-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring"
+                    >
+                      View
+                    </button>
+                  )}
+                </div>
+              </li>
+            );
+          })}
+        </ul>
+      )}
+    </div>
+  );
+});

package/src/workflow/PendingApprovalsWidget.tsx

@@ -0,0 +1,115 @@
+"use client";
+
+import { memo } from "react";
+import type { PendingApproval } from "@stigmer/protos/ai/stigmer/agentic/workflowexecution/v1/io_pb";
+import { timestampDate } from "@bufbuild/protobuf/wkt";
+import { cn } from "@stigmer/theme";
+
+export interface PendingApprovalsWidgetProps {
+  readonly approvals: readonly PendingApproval[];
+  readonly totalCount: number;
+  readonly isLoading: boolean;
+  /** Called when the user clicks "Review" on an approval. */
+  readonly onReviewClick?: (executionId: string) => void;
+  readonly className?: string;
+}
+
+function formatTimeAgo(date: Date): string {
+  const seconds = Math.floor((Date.now() - date.getTime()) / 1000);
+  if (seconds < 60) return "just now";
+  if (seconds < 3600) return `${Math.floor(seconds / 60)}m ago`;
+  if (seconds < 86400) return `${Math.floor(seconds / 3600)}h ago`;
+  return `${Math.floor(seconds / 86400)}d ago`;
+}
+
+/**
+ * Dashboard widget showing pending human_input approvals.
+ *
+ * Displays a compact list of workflow tasks awaiting reviewer decisions,
+ * with workflow name, task name, waiting duration, and a review action.
+ *
+ * All visuals use `--stgm-*` tokens. No hardcoded colors.
+ */
+export const PendingApprovalsWidget = memo(function PendingApprovalsWidget({
+  approvals,
+  totalCount,
+  isLoading,
+  onReviewClick,
+  className,
+}: PendingApprovalsWidgetProps) {
+  if (isLoading) {
+    return (
+      <div className={cn("space-y-2", className)} aria-busy="true">
+        <div className="flex items-center justify-between">
+          <div className="h-4 w-32 animate-pulse rounded bg-muted" />
+          <div className="h-4 w-8 animate-pulse rounded bg-muted" />
+        </div>
+        {Array.from({ length: 3 }, (_, i) => (
+          <div
+            key={i}
+            className="h-14 animate-pulse rounded-lg border border-border bg-muted/50"
+          />
+        ))}
+      </div>
+    );
+  }
+
+  return (
+    <div className={cn("space-y-3", className)}>
+      <div className="flex items-center justify-between">
+        <h3 className="text-sm font-semibold text-foreground">
+          Pending Approvals
+        </h3>
+        {totalCount > 0 && (
+          <span className="rounded-full bg-warning/10 px-2 py-0.5 text-xs font-medium text-warning">
+            {totalCount}
+          </span>
+        )}
+      </div>
+
+      {approvals.length === 0 ? (
+        <p className="py-4 text-center text-xs text-muted-foreground">
+          No approvals pending
+        </p>
+      ) : (
+        <ul className="space-y-2" role="list">
+          {approvals.map((approval) => {
+            const requestedAt = approval.requestedAt
+              ? timestampDate(approval.requestedAt)
+              : null;
+
+            return (
+              <li
+                key={`${approval.executionId}-${approval.taskName}`}
+                className="rounded-lg border border-border px-3 py-2.5"
+              >
+                <div className="flex items-start justify-between gap-2">
+                  <div className="min-w-0 flex-1">
+                    <p className="truncate text-sm font-medium text-foreground">
+                      {approval.workflowName || approval.executionId}
+                    </p>
+                    <p className="mt-0.5 truncate text-xs text-muted-foreground">
+                      Task: {approval.taskName}
+                      {requestedAt && (
+                        <> &middot; {formatTimeAgo(requestedAt)}</>
+                      )}
+                    </p>
+                  </div>
+                  {onReviewClick && (
+                    <button
+                      type="button"
+                      onClick={() => onReviewClick(approval.executionId)}
+                      className="shrink-0 rounded-md bg-primary px-2.5 py-1 text-xs font-medium text-primary-foreground transition-colors hover:bg-primary-hover focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring"
+                    >
+                      Review
+                    </button>
+                  )}
+                </div>
+              </li>
+            );
+          })}
+        </ul>
+      )}
+    </div>
+  );
+});