@stigmer/react 0.5.1 → 1.0.1

package/src/workflow/WorkflowExecutionArtifactPanel.tsx

@@ -0,0 +1,112 @@
+"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";
+
+/** 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>
+  );
+}
+
+function formatBytes(bytes: bigint): string {
+  const n = Number(bytes);
+  if (n < 1024) return `${n} B`;
+  if (n < 1024 * 1024) return `${(n / 1024).toFixed(1)} KB`;
+  return `${(n / (1024 * 1024)).toFixed(1)} MB`;
+}

package/src/workflow/WorkflowExecutionCostPanel.tsx

@@ -0,0 +1,131 @@
+"use client";
+
+import { memo, useMemo } from "react";
+import { cn } from "@stigmer/theme";
+import type { DerivedCostSummary } from "../internal/store/workflow-execution-event-store";
+
+/** 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={formatTokens(costSummary.tokensConsumed)}
+          limit={tokenLimit ? formatTokens(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>
+  );
+}
+
+function formatMicroUsd(micros: bigint): string {
+  const val = Number(micros) / 1_000_000;
+  if (val < 0.01) return `$${val.toFixed(4)}`;
+  return `$${val.toFixed(2)}`;
+}
+
+function formatTokens(tokens: bigint): string {
+  const n = Number(tokens);
+  if (n >= 1_000_000) return `${(n / 1_000_000).toFixed(1)}M`;
+  if (n >= 1_000) return `${(n / 1_000).toFixed(1)}K`;
+  return n.toLocaleString();
+}

package/src/workflow/WorkflowExecutionHeader.tsx

@@ -0,0 +1,194 @@
+"use client";
+
+import { memo, useMemo } from "react";
+import type { WorkflowExecution } from "@stigmer/protos/ai/stigmer/agentic/workflowexecution/v1/api_pb";
+import { ExecutionPhase } from "@stigmer/protos/ai/stigmer/agentic/workflowexecution/v1/enum_pb";
+import { cn } from "@stigmer/theme";
+import { WorkflowExecutionPhaseBadge } from "./WorkflowExecutionPhaseBadge";
+import type { UseWorkflowExecutionActionsReturn } from "./useWorkflowExecutionActions";
+import type { WorkflowEventStreamState, DerivedCostSummary } from "../internal/store/workflow-execution-event-store";
+
+/** Props for {@link WorkflowExecutionHeader}. */
+export interface WorkflowExecutionHeaderProps {
+  readonly execution: WorkflowExecution;
+  readonly streamState: WorkflowEventStreamState;
+  readonly costSummary: DerivedCostSummary;
+  readonly actions: UseWorkflowExecutionActionsReturn;
+  /** Called when the user clicks "Diagnose with AI" on a failed execution. */
+  readonly onDiagnose?: () => void;
+  /** Whether the diagnosis panel is currently active. */
+  readonly isDiagnosing?: boolean;
+  readonly className?: string;
+}
+
+const RUNNING_PHASES = new Set<ExecutionPhase>([
+  ExecutionPhase.EXECUTION_PENDING,
+  ExecutionPhase.EXECUTION_IN_PROGRESS,
+]);
+
+/**
+ * Header bar for the workflow execution viewer showing phase badge,
+ * execution name, duration, cost summary, and lifecycle action buttons.
+ *
+ * Action buttons are contextual:
+ * - Running: Pause, Cancel
+ * - Paused: Resume, Cancel
+ * - Failed: Recover
+ */
+export const WorkflowExecutionHeader = memo(function WorkflowExecutionHeader({
+  execution,
+  streamState,
+  costSummary,
+  actions,
+  onDiagnose,
+  isDiagnosing,
+  className,
+}: WorkflowExecutionHeaderProps) {
+  const phase = execution.status?.phase ?? ExecutionPhase.EXECUTION_PHASE_UNSPECIFIED;
+  const name = execution.metadata?.name ?? execution.metadata?.id ?? "Execution";
+  const startedAt = execution.status?.startedAt ?? "";
+  const completedAt = execution.status?.completedAt ?? "";
+
+  const duration = useMemo(() => {
+    if (!startedAt) return null;
+    const start = new Date(startedAt).getTime();
+    const end = completedAt ? new Date(completedAt).getTime() : Date.now();
+    return formatDuration(end - start);
+  }, [startedAt, completedAt]);
+
+  const costDisplay = useMemo(() => {
+    if (costSummary.costConsumedMicros <= BigInt(0)) return null;
+    return formatMicroUsd(costSummary.costConsumedMicros);
+  }, [costSummary.costConsumedMicros]);
+
+  const isRunning = RUNNING_PHASES.has(phase);
+  const isPaused = phase === ExecutionPhase.EXECUTION_PAUSED;
+  const isFailed = phase === ExecutionPhase.EXECUTION_FAILED;
+  const isLive = streamState.stage === "streaming" || streamState.stage === "connecting";
+
+  return (
+    <header className={cn("flex items-center gap-3 border-b border-border px-4 py-3", className)}>
+      <WorkflowExecutionPhaseBadge phase={phase} />
+
+      <h2 className="min-w-0 flex-1 truncate text-sm font-semibold text-foreground">
+        {name}
+      </h2>
+
+      {duration && (
+        <span className="shrink-0 text-xs text-muted-foreground">{duration}</span>
+      )}
+
+      {costDisplay && (
+        <span className="shrink-0 text-xs text-muted-foreground">{costDisplay}</span>
+      )}
+
+      {isLive && (
+        <span className="flex items-center gap-1 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>
+          Live
+        </span>
+      )}
+
+      <div className="flex shrink-0 items-center gap-1.5">
+        {isRunning && (
+          <>
+            <ActionButton
+              label="Pause"
+              onClick={() => actions.pause()}
+              disabled={actions.isSubmitting}
+            />
+            <ActionButton
+              label="Cancel"
+              variant="destructive"
+              onClick={() => actions.cancel()}
+              disabled={actions.isSubmitting}
+            />
+          </>
+        )}
+
+        {isPaused && (
+          <>
+            <ActionButton
+              label="Resume"
+              onClick={() => actions.resume()}
+              disabled={actions.isSubmitting}
+            />
+            <ActionButton
+              label="Cancel"
+              variant="destructive"
+              onClick={() => actions.cancel()}
+              disabled={actions.isSubmitting}
+            />
+          </>
+        )}
+
+        {isFailed && (
+          <>
+            {onDiagnose && (
+              <ActionButton
+                label={isDiagnosing ? "Diagnosing…" : "Diagnose"}
+                onClick={onDiagnose}
+                disabled={actions.isSubmitting || !!isDiagnosing}
+              />
+            )}
+            <ActionButton
+              label="Recover"
+              onClick={() => actions.recover()}
+              disabled={actions.isSubmitting}
+            />
+          </>
+        )}
+      </div>
+    </header>
+  );
+});
+
+function ActionButton({
+  label,
+  variant,
+  onClick,
+  disabled,
+}: {
+  readonly label: string;
+  readonly variant?: "destructive";
+  readonly onClick: () => void;
+  readonly disabled: boolean;
+}) {
+  return (
+    <button
+      type="button"
+      onClick={onClick}
+      disabled={disabled}
+      className={cn(
+        "rounded px-2 py-1 text-xs font-medium transition-colors",
+        "disabled:pointer-events-none disabled:opacity-50",
+        variant === "destructive"
+          ? "border border-destructive/30 text-destructive hover:bg-destructive/10"
+          : "border border-border text-foreground hover:bg-muted",
+      )}
+    >
+      {label}
+    </button>
+  );
+}
+
+function formatDuration(ms: number): string {
+  if (ms < 1000) return `${ms}ms`;
+  const s = Math.floor(ms / 1000);
+  if (s < 60) return `${s}s`;
+  const m = Math.floor(s / 60);
+  const rem = s % 60;
+  if (m < 60) return rem > 0 ? `${m}m ${rem}s` : `${m}m`;
+  const h = Math.floor(m / 60);
+  const remM = m % 60;
+  return remM > 0 ? `${h}h ${remM}m` : `${h}h`;
+}
+
+function formatMicroUsd(micros: bigint): string {
+  const cents = Number(micros) / 10_000;
+  if (cents < 1) return `$${(Number(micros) / 1_000_000).toFixed(4)}`;
+  return `$${(Number(micros) / 1_000_000).toFixed(2)}`;
+}

package/src/workflow/WorkflowExecutionPhaseBadge.tsx

@@ -0,0 +1,188 @@
+"use client";
+
+import { memo } from "react";
+import { ExecutionPhase } from "@stigmer/protos/ai/stigmer/agentic/workflowexecution/v1/enum_pb";
+import { cn } from "@stigmer/theme";
+
+/** Props for {@link WorkflowExecutionPhaseBadge}. */
+export interface WorkflowExecutionPhaseBadgeProps {
+  /** The workflow execution phase to display. */
+  readonly phase: ExecutionPhase;
+  /** Additional CSS class names for the root container. */
+  readonly className?: string;
+}
+
+interface PhaseConfig {
+  readonly label: string;
+  readonly icon: () => React.JSX.Element;
+  readonly colorClass: string;
+}
+
+const PHASE_CONFIG: ReadonlyMap<ExecutionPhase, PhaseConfig> = new Map([
+  [
+    ExecutionPhase.EXECUTION_PENDING,
+    {
+      label: "Pending",
+      icon: PulseDotIcon,
+      colorClass: "text-muted-foreground",
+    },
+  ],
+  [
+    ExecutionPhase.EXECUTION_IN_PROGRESS,
+    {
+      label: "Running",
+      icon: PulseDotIcon,
+      colorClass: "text-foreground",
+    },
+  ],
+  [
+    ExecutionPhase.EXECUTION_COMPLETED,
+    {
+      label: "Completed",
+      icon: CheckIcon,
+      colorClass: "text-success",
+    },
+  ],
+  [
+    ExecutionPhase.EXECUTION_FAILED,
+    {
+      label: "Failed",
+      icon: XIcon,
+      colorClass: "text-destructive",
+    },
+  ],
+  [
+    ExecutionPhase.EXECUTION_CANCELLED,
+    {
+      label: "Cancelled",
+      icon: XIcon,
+      colorClass: "text-muted-foreground",
+    },
+  ],
+  [
+    ExecutionPhase.EXECUTION_TERMINATED,
+    {
+      label: "Terminated",
+      icon: StopIcon,
+      colorClass: "text-destructive",
+    },
+  ],
+  [
+    ExecutionPhase.EXECUTION_PAUSED,
+    {
+      label: "Paused",
+      icon: PauseIcon,
+      colorClass: "text-muted-foreground",
+    },
+  ],
+]);
+
+/**
+ * Displays the lifecycle phase of a `WorkflowExecution` as an
+ * inline badge with a status icon and label.
+ *
+ * Renders nothing for `EXECUTION_PHASE_UNSPECIFIED`.
+ *
+ * All visual properties flow through `--stgm-*` tokens.
+ *
+ * @example
+ * ```tsx
+ * <WorkflowExecutionPhaseBadge phase={ExecutionPhase.EXECUTION_COMPLETED} />
+ * ```
+ */
+export const WorkflowExecutionPhaseBadge = memo(function WorkflowExecutionPhaseBadge({
+  phase,
+  className,
+}: WorkflowExecutionPhaseBadgeProps) {
+  const config = PHASE_CONFIG.get(phase);
+  if (!config) return null;
+
+  const Icon = config.icon;
+
+  return (
+    <span
+      role="status"
+      aria-label={config.label}
+      className={cn(
+        "inline-flex items-center gap-1.5 text-xs font-medium",
+        config.colorClass,
+        className,
+      )}
+    >
+      <span aria-hidden="true">
+        <Icon />
+      </span>
+      {config.label}
+    </span>
+  );
+});
+
+function PulseDotIcon() {
+  return (
+    <span className="relative flex h-2 w-2">
+      <span className="absolute inline-flex h-full w-full animate-ping rounded-full bg-current opacity-75" />
+      <span className="relative inline-flex h-2 w-2 rounded-full bg-current" />
+    </span>
+  );
+}
+
+function CheckIcon() {
+  return (
+    <svg
+      width="12"
+      height="12"
+      viewBox="0 0 12 12"
+      fill="none"
+      stroke="currentColor"
+      strokeWidth="2"
+      strokeLinecap="round"
+      strokeLinejoin="round"
+    >
+      <path d="M2.5 6L5 8.5L9.5 3.5" />
+    </svg>
+  );
+}
+
+function XIcon() {
+  return (
+    <svg
+      width="12"
+      height="12"
+      viewBox="0 0 12 12"
+      fill="none"
+      stroke="currentColor"
+      strokeWidth="2"
+      strokeLinecap="round"
+      strokeLinejoin="round"
+    >
+      <path d="M3 3L9 9M9 3L3 9" />
+    </svg>
+  );
+}
+
+function StopIcon() {
+  return (
+    <svg
+      width="12"
+      height="12"
+      viewBox="0 0 12 12"
+      fill="currentColor"
+    >
+      <rect x="2" y="2" width="8" height="8" rx="1" />
+    </svg>
+  );
+}
+
+function PauseIcon() {
+  return (
+    <svg
+      width="12"
+      height="12"
+      viewBox="0 0 12 12"
+      fill="currentColor"
+    >
+      <rect x="2.5" y="2" width="2.5" height="8" rx="0.5" />
+      <rect x="7" y="2" width="2.5" height="8" rx="0.5" />
+    </svg>
+  );
+}