@stigmer/react 1.0.3 → 2.0.0

package/src/workflow/WorkflowVersionBadge.tsx

@@ -0,0 +1,87 @@
+"use client";
+
+import { memo, useCallback, useState } from "react";
+import { cn } from "@stigmer/theme";
+
+/** Props for {@link WorkflowVersionBadge}. */
+export interface WorkflowVersionBadgeProps {
+  /** The SHA-256 hash to display (truncated to first 8 chars). */
+  readonly versionHash: string;
+  /** Optional tag to show as a colored chip (e.g. "stable", "v1.0"). */
+  readonly tag?: string;
+  /** Shows a "current" indicator dot when true. */
+  readonly isCurrent?: boolean;
+  /** Additional CSS classes for the root container. */
+  readonly className?: string;
+}
+
+/**
+ * Compact badge showing a truncated version hash with optional tag
+ * and "current" indicator.
+ *
+ * Designed for inline use in timelines, cards, and headers. Click-to-copy
+ * copies the full hash to the clipboard and shows brief visual feedback.
+ *
+ * All visual properties flow through `--stgm-*` design tokens.
+ * Zero Console dependencies — safe for platform builder embedding.
+ *
+ * @example
+ * ```tsx
+ * <WorkflowVersionBadge
+ *   versionHash="a1b2c3d4e5f67890abcdef1234567890"
+ *   tag="stable"
+ *   isCurrent
+ * />
+ * ```
+ */
+export const WorkflowVersionBadge = memo(function WorkflowVersionBadge({
+  versionHash,
+  tag,
+  isCurrent,
+  className,
+}: WorkflowVersionBadgeProps) {
+  const [copied, setCopied] = useState(false);
+  const truncated = versionHash.slice(0, 8);
+
+  const handleCopy = useCallback(async () => {
+    try {
+      await navigator.clipboard.writeText(versionHash);
+      setCopied(true);
+      setTimeout(() => setCopied(false), 1500);
+    } catch {
+      // Clipboard API may be unavailable in some contexts
+    }
+  }, [versionHash]);
+
+  return (
+    <span className={cn("inline-flex items-center gap-1.5", className)}>
+      {isCurrent && (
+        <span
+          className="size-2 shrink-0 rounded-full bg-status-ready"
+          aria-label="Current version"
+          title="Current version"
+        />
+      )}
+
+      <button
+        type="button"
+        onClick={handleCopy}
+        title={copied ? "Copied!" : `Copy full hash: ${versionHash}`}
+        className={cn(
+          "shrink-0 rounded bg-muted px-1.5 py-0.5 font-mono text-[11px] font-medium text-foreground transition-colors",
+          "hover:bg-accent-hover",
+          "focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring",
+          copied && "bg-status-ready-subtle text-status-ready",
+        )}
+      >
+        {copied ? "copied" : truncated}
+      </button>
+
+      {tag && (
+        <span className="shrink-0 rounded-full bg-primary-subtle px-1.5 py-0.5 text-[10px] font-medium text-primary">
+          {tag}
+        </span>
+      )}
+    </span>
+  );
+});

package/src/workflow/WorkflowVersionDiffViewer.tsx

@@ -0,0 +1,211 @@
+"use client";
+
+import { cn } from "@stigmer/theme";
+import { useWorkflowVersionDiff } from "./useWorkflowVersionDiff";
+import type { DiffLine } from "./workflow-yaml-diff";
+
+/** Props for {@link WorkflowVersionDiffViewer}. */
+export interface WorkflowVersionDiffViewerProps {
+  /** Workflow resource ID. */
+  readonly workflowId: string;
+  /** "Before" version hash. */
+  readonly hashA: string;
+  /** "After" version hash. */
+  readonly hashB: string;
+  /** Additional CSS classes for the root container. */
+  readonly className?: string;
+}
+
+/**
+ * Shows a unified diff between two workflow versions' YAML.
+ *
+ * Internally uses `useWorkflowVersionDiff(workflowId, hashA, hashB)` to
+ * fetch and compute the diff. Renders a header identifying each version
+ * and a scrollable unified diff with green/red line highlighting.
+ *
+ * All visual properties flow through `--stgm-*` / `--stgm-diff-*` design
+ * tokens. Zero Console dependencies — safe for platform builder embedding.
+ *
+ * @example
+ * ```tsx
+ * <WorkflowVersionDiffViewer
+ *   workflowId="wf_123"
+ *   hashA="a1b2c3d4..."
+ *   hashB="e5f6g7h8..."
+ * />
+ * ```
+ */
+export function WorkflowVersionDiffViewer({
+  workflowId,
+  hashA,
+  hashB,
+  className,
+}: WorkflowVersionDiffViewerProps) {
+  const { diff, isLoading, error } = useWorkflowVersionDiff(workflowId, hashA, hashB);
+
+  if (isLoading) {
+    return <DiffSkeleton className={className} />;
+  }
+
+  if (error) {
+    return (
+      <div
+        role="alert"
+        className={cn(
+          "rounded-lg border border-destructive/30 bg-destructive/5 px-4 py-3 text-sm text-destructive",
+          className,
+        )}
+      >
+        Failed to load diff: {error.message}
+      </div>
+    );
+  }
+
+  if (!diff || diff.length === 0) {
+    return (
+      <div
+        role="status"
+        className={cn(
+          "flex items-center justify-center rounded-lg border border-border py-8 text-sm text-muted-foreground",
+          className,
+        )}
+      >
+        No changes between these versions
+      </div>
+    );
+  }
+
+  return (
+    <div
+      className={cn(
+        "overflow-auto rounded-lg border border-border font-mono text-[13px] leading-[1.6]",
+        className,
+      )}
+    >
+      {/* Header */}
+      <div className="sticky top-0 z-10 flex items-center gap-2 border-b border-border bg-muted px-3 py-1.5 text-xs font-medium text-muted-foreground">
+        <code className="rounded bg-diff-removed-bg px-1 py-0.5">{hashA.slice(0, 8)}</code>
+        <ArrowIcon className="size-3 shrink-0" />
+        <code className="rounded bg-diff-added-bg px-1 py-0.5">{hashB.slice(0, 8)}</code>
+      </div>
+
+      {/* Diff content */}
+      <table className="w-full border-collapse" role="table">
+        <thead className="sr-only">
+          <tr>
+            <th scope="col">Line</th>
+            <th scope="col">Change</th>
+            <th scope="col">Content</th>
+          </tr>
+        </thead>
+        <tbody>
+          {diff.map((line, idx) => (
+            <DiffLineRow key={idx} line={line} lineNumber={idx + 1} />
+          ))}
+        </tbody>
+      </table>
+    </div>
+  );
+}
+
+// ---------------------------------------------------------------------------
+// Diff line rendering
+// ---------------------------------------------------------------------------
+
+const LINE_NUM_CLASSES =
+  "w-[1px] min-w-8 select-none whitespace-nowrap px-2 text-right text-[11px] text-muted-foreground-faint";
+const MARKER_CLASSES = "w-[1px] select-none px-1 text-center";
+
+function DiffLineRow({
+  line,
+  lineNumber,
+}: {
+  readonly line: DiffLine;
+  readonly lineNumber: number;
+}) {
+  const marker = line.type === "added" ? "+" : line.type === "removed" ? "-" : " ";
+
+  const rowClass =
+    line.type === "added"
+      ? "bg-diff-added-bg"
+      : line.type === "removed"
+        ? "bg-diff-removed-bg"
+        : "";
+
+  const markerColor =
+    line.type === "added"
+      ? "text-diff-added-fg"
+      : line.type === "removed"
+        ? "text-diff-removed-fg"
+        : "text-muted-foreground-faint";
+
+  const ariaLabel =
+    line.type === "added"
+      ? `Added: ${line.content}`
+      : line.type === "removed"
+        ? `Removed: ${line.content}`
+        : undefined;
+
+  return (
+    <tr className={rowClass} aria-label={ariaLabel}>
+      <td className={LINE_NUM_CLASSES}>{lineNumber}</td>
+      <td className={cn(MARKER_CLASSES, markerColor)} aria-hidden="true">
+        {marker}
+      </td>
+      <td className="whitespace-pre-wrap break-all px-2">{line.content}</td>
+    </tr>
+  );
+}
+
+// ---------------------------------------------------------------------------
+// Non-happy states
+// ---------------------------------------------------------------------------
+
+function DiffSkeleton({ className }: { readonly className?: string }) {
+  return (
+    <div
+      className={cn(
+        "overflow-hidden rounded-lg border border-border",
+        className,
+      )}
+      aria-busy="true"
+      aria-label="Loading diff"
+    >
+      <div className="border-b border-border bg-muted px-3 py-2">
+        <div className="h-4 w-48 animate-pulse rounded bg-muted-foreground/20" />
+      </div>
+      <div className="space-y-1 p-3">
+        {[1, 2, 3, 4, 5, 6].map((i) => (
+          <div key={i} className="flex gap-2">
+            <div className="h-4 w-6 animate-pulse rounded bg-muted" />
+            <div
+              className="h-4 animate-pulse rounded bg-muted"
+              style={{ width: `${40 + (i % 3) * 20}%` }}
+            />
+          </div>
+        ))}
+      </div>
+    </div>
+  );
+}
+
+// ---------------------------------------------------------------------------
+// Icons
+// ---------------------------------------------------------------------------
+
+function ArrowIcon({ className }: { readonly className?: string }) {
+  return (
+    <svg
+      className={className}
+      viewBox="0 0 12 12"
+      fill="none"
+      stroke="currentColor"
+      strokeWidth="1.5"
+      strokeLinecap="round"
+      strokeLinejoin="round"
+      aria-hidden="true"
+    >
+      <path d="M2 6h8M7 3l3 3-3 3" />
+    </svg>
+  );
+}

package/src/workflow/WorkflowVersionTimeline.tsx

@@ -0,0 +1,298 @@
+"use client";
+
+import { useCallback, useState } from "react";
+import { cn } from "@stigmer/theme";
+import { useWorkflowVersions } from "./useWorkflowVersions";
+import { WorkflowVersionBadge } from "./WorkflowVersionBadge";
+import type { VersionEntry } from "../version-history/types";
+
+/** Props for {@link WorkflowVersionTimeline}. */
+export interface WorkflowVersionTimelineProps {
+  /** Workflow resource ID (used for keying, not fetching). */
+  readonly workflowId: string;
+  /** Organization slug for fetching versions. */
+  readonly org: string;
+  /** Workflow slug for fetching versions. */
+  readonly slug: string;
+  /** Called when the user selects a version entry. */
+  readonly onSelectVersion?: (hash: string) => void;
+  /** Currently selected version hash (controlled selection). */
+  readonly selectedHash?: string;
+  /** Additional CSS classes for the root container. */
+  readonly className?: string;
+}
+
+const PAGE_SIZE = 20;
+
+/**
+ * Vertical timeline showing version history for a workflow.
+ *
+ * Internally fetches versions via `useWorkflowVersions(org, slug)` and
+ * renders each entry with a `WorkflowVersionBadge`, actor name, relative
+ * timestamp, and commit message. Supports selection highlighting and
+ * client-side pagination via "Load more".
+ *
+ * All visual properties flow through `--stgm-*` design tokens.
+ * Zero Console dependencies — safe for platform builder embedding.
+ *
+ * @example
+ * ```tsx
+ * <WorkflowVersionTimeline
+ *   workflowId="wf_123"
+ *   org="acme"
+ *   slug="deploy-pipeline"
+ *   onSelectVersion={(hash) => setSelected(hash)}
+ *   selectedHash={selected}
+ * />
+ * ```
+ */
+export function WorkflowVersionTimeline({
+  workflowId: _workflowId,
+  org,
+  slug,
+  onSelectVersion,
+  selectedHash,
+  className,
+}: WorkflowVersionTimelineProps) {
+  const { versions, isLoading, isEmpty } = useWorkflowVersions(org, slug);
+  const [visibleCount, setVisibleCount] = useState(PAGE_SIZE);
+
+  const handleLoadMore = useCallback(() => {
+    setVisibleCount((c) => c + PAGE_SIZE);
+  }, []);
+
+  if (isLoading) {
+    return <TimelineSkeleton className={className} />;
+  }
+
+  if (isEmpty) {
+    return <EmptyState className={className} />;
+  }
+
+  const visibleVersions = versions.slice(0, visibleCount);
+  const hasMore = versions.length > visibleCount;
+
+  return (
+    <div className={cn("flex flex-col pt-2", className)}>
+      <div role="list" aria-label="Workflow version history">
+        {visibleVersions.map((entry, index) => (
+          <VersionTimelineRow
+            key={entry.id}
+            entry={entry}
+            isSelected={entry.id === selectedHash}
+            isLast={index === visibleVersions.length - 1 && !hasMore}
+            onSelect={() => onSelectVersion?.(entry.id)}
+          />
+        ))}
+      </div>
+
+      {hasMore && (
+        <button
+          type="button"
+          onClick={handleLoadMore}
+          className={cn(
+            "mt-2 self-center rounded-md px-3 py-1.5 text-xs font-medium text-primary transition-colors",
+            "hover:bg-primary-subtle",
+            "focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring",
+          )}
+        >
+          Load more ({versions.length - visibleCount} remaining)
+        </button>
+      )}
+    </div>
+  );
+}
+
+// ---------------------------------------------------------------------------
+// Timeline row
+// ---------------------------------------------------------------------------
+
+function VersionTimelineRow({
+  entry,
+  isSelected,
+  isLast,
+  onSelect,
+}: {
+  readonly entry: VersionEntry;
+  readonly isSelected: boolean;
+  readonly isLast: boolean;
+  readonly onSelect: () => void;
+}) {
+  const handleKeyDown = (e: React.KeyboardEvent) => {
+    if (e.key === "Enter" || e.key === " ") {
+      e.preventDefault();
+      onSelect();
+    }
+  };
+
+  return (
+    <div role="listitem" className="relative flex gap-3">
+      {/* Timeline connector */}
+      <div className="flex flex-col items-center pt-1">
+        <div
+          className={cn(
+            "size-2.5 shrink-0 rounded-full border-2",
+            entry.isCurrent
+              ? "border-primary bg-primary"
+              : isSelected
+                ? "border-primary bg-background"
+                : "border-border bg-background",
+          )}
+          aria-hidden="true"
+        />
+        {!isLast && (
+          <div className="mt-1 w-px flex-1 bg-border" aria-hidden="true" />
+        )}
+      </div>
+
+      {/* Entry content */}
+      <button
+        type="button"
+        onClick={onSelect}
+        onKeyDown={handleKeyDown}
+        tabIndex={0}
+        aria-selected={isSelected}
+        className={cn(
+          "mb-4 flex min-w-0 flex-1 flex-col gap-1 rounded-md px-2.5 py-2 text-left transition-colors",
+          "focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring",
+          isSelected ? "bg-accent-hover" : "hover:bg-accent-hover",
+        )}
+      >
+        {/* Top line: version badge */}
+        <div className="flex items-center gap-2">
+          <WorkflowVersionBadge
+            versionHash={entry.id}
+            tag={entry.tag}
+            isCurrent={entry.isCurrent}
+          />
+        </div>
+
+        {/* Second line: timestamp + actor */}
+        <div className="flex items-center gap-2 text-xs text-muted-foreground">
+          <time
+            dateTime={entry.timestamp.toISOString()}
+            title={entry.timestamp.toLocaleString()}
+          >
+            {formatRelativeTime(entry.timestamp)}
+          </time>
+
+          {entry.actor && (
+            <>
+              <span aria-hidden="true">&middot;</span>
+              <span className="flex items-center gap-1">
+                {entry.actor.avatar && (
+                  <img
+                    src={entry.actor.avatar}
+                    alt=""
+                    className="size-3.5 rounded-full"
+                  />
+                )}
+                <span>{entry.actor.displayName || entry.actor.id}</span>
+              </span>
+            </>
+          )}
+        </div>
+
+        {/* Commit message */}
+        {entry.sublabel && (
+          <p className="text-xs text-muted-foreground">{entry.sublabel}</p>
+        )}
+      </button>
+    </div>
+  );
+}
+
+// ---------------------------------------------------------------------------
+// Non-happy states
+// ---------------------------------------------------------------------------
+
+function TimelineSkeleton({ className }: { readonly className?: string }) {
+  return (
+    <div
+      className={cn("flex flex-col gap-4 pt-2", className)}
+      aria-busy="true"
+      aria-label="Loading workflow version history"
+    >
+      {[1, 2, 3].map((i) => (
+        <div key={i} className="flex gap-3">
+          <div className="flex flex-col items-center">
+            <div className="size-2.5 animate-pulse rounded-full bg-muted" />
+            {i < 3 && <div className="mt-1 w-px flex-1 bg-border" />}
+          </div>
+          <div className="mb-4 flex-1 space-y-2 px-2.5 py-2">
+            <div className="flex gap-2">
+              <div className="h-4 w-16 animate-pulse rounded bg-muted" />
+              <div className="h-4 w-10 animate-pulse rounded-full bg-muted" />
+            </div>
+            <div className="h-3 w-28 animate-pulse rounded bg-muted" />
+          </div>
+        </div>
+      ))}
+    </div>
+  );
+}
+
+function EmptyState({ className }: { readonly className?: string }) {
+  return (
+    <div
+      role="status"
+      className={cn(
+        "flex flex-col items-center gap-2 py-8 text-center",
+        className,
+      )}
+    >
+      <HistoryIcon className="size-8 text-muted-foreground-faint" />
+      <p className="text-sm text-muted-foreground">
+        No version history available
+      </p>
+    </div>
+  );
+}
+
+// ---------------------------------------------------------------------------
+// Utilities
+// ---------------------------------------------------------------------------
+
+function formatRelativeTime(date: Date): string {
+  const now = Date.now();
+  const diffMs = now - date.getTime();
+  const diffSec = Math.floor(diffMs / 1000);
+  const diffMin = Math.floor(diffSec / 60);
+  const diffHr = Math.floor(diffMin / 60);
+  const diffDays = Math.floor(diffHr / 24);
+
+  if (diffSec < 60) return "just now";
+  if (diffMin < 60) return `${diffMin}m ago`;
+  if (diffHr < 24) return `${diffHr}h ago`;
+  if (diffDays < 7) return `${diffDays}d ago`;
+  if (diffDays < 30) return `${Math.floor(diffDays / 7)}w ago`;
+
+  return date.toLocaleDateString(undefined, {
+    month: "short",
+    day: "numeric",
+    year: date.getFullYear() !== new Date().getFullYear() ? "numeric" : undefined,
+  });
+}
+
+// ---------------------------------------------------------------------------
+// Icons
+// ---------------------------------------------------------------------------
+
+function HistoryIcon({ className }: { readonly className?: string }) {
+  return (
+    <svg
+      className={className}
+      viewBox="0 0 16 16"
+      fill="none"
+      stroke="currentColor"
+      strokeWidth="1.5"
+      strokeLinecap="round"
+      strokeLinejoin="round"
+      aria-hidden="true"
+    >
+      <path d="M8 4v4l2.5 1.5" />
+      <circle cx="8" cy="8" r="6" />
+      <path d="M2 8a6 6 0 0 1 6-6" />
+    </svg>
+  );
+}

package/src/workflow/WorkflowVersionsTab.tsx

@@ -0,0 +1,92 @@
+"use client";
+
+import { useState } from "react";
+import { cn } from "@stigmer/theme";
+import type { Workflow } from "@stigmer/protos/ai/stigmer/agentic/workflow/v1/api_pb";
+import { WorkflowVersionTimeline } from "./WorkflowVersionTimeline";
+import { WorkflowVersionDiffViewer } from "./WorkflowVersionDiffViewer";
+import { useWorkflowVersions } from "./useWorkflowVersions";
+
+/** Props for {@link WorkflowVersionsTab}. */
+export interface WorkflowVersionsTabProps {
+  /** The current workflow resource. */
+  readonly workflow: Workflow;
+  /** Additional CSS classes for the root container. */
+  readonly className?: string;
+}
+
+/**
+ * Tab content for the "Versions" panel in the workflow detail page.
+ *
+ * Renders a split layout: version timeline on the left, and a diff
+ * viewer on the right when a version is selected (comparing that
+ * version against the current version).
+ *
+ * All visual properties flow through `--stgm-*` design tokens.
+ * Zero Console dependencies — safe for platform builder embedding.
+ *
+ * @example
+ * ```tsx
+ * <WorkflowVersionsTab workflow={workflow} />
+ * ```
+ */
+export function WorkflowVersionsTab({
+  workflow,
+  className,
+}: WorkflowVersionsTabProps) {
+  const [selectedVersionHash, setSelectedVersionHash] = useState<string | null>(
+    null,
+  );
+
+  const org = workflow.metadata?.org ?? "";
+  const slug = workflow.metadata?.slug ?? "";
+  const workflowId = workflow.metadata?.id ?? "";
+
+  const { versions } = useWorkflowVersions(org, slug);
+  const currentVersionHash =
+    versions.find((v) => v.isCurrent)?.id ?? versions[0]?.id ?? "";
+
+  const showDiff =
+    selectedVersionHash !== null && selectedVersionHash !== currentVersionHash;
+
+  return (
+    <div className={cn("flex min-h-[24rem] gap-4", className)}>
+      {/* Timeline panel */}
+      <div
+        className={cn(
+          "flex shrink-0 flex-col overflow-y-auto",
+          showDiff ? "w-[280px]" : "w-full max-w-md",
+        )}
+      >
+        <WorkflowVersionTimeline
+          workflowId={workflowId}
+          org={org}
+          slug={slug}
+          onSelectVersion={setSelectedVersionHash}
+          selectedHash={selectedVersionHash ?? undefined}
+        />
+      </div>
+
+      {/* Diff panel */}
+      {showDiff && (
+        <div className="flex min-w-0 flex-1 flex-col">
+          <div className="mb-2 flex items-center gap-2 text-xs text-muted-foreground">
+            <span>
+              Comparing{" "}
+              <code className="rounded bg-muted px-1 py-0.5 font-mono text-[11px]">
+                {selectedVersionHash.slice(0, 8)}
+              </code>{" "}
+              with current
+            </span>
+          </div>
+          <WorkflowVersionDiffViewer
+            workflowId={workflowId}
+            hashA={selectedVersionHash}
+            hashB={currentVersionHash}
+            className="flex-1"
+          />
+        </div>
+      )}
+    </div>
+  );
+}