@stigmer/react 1.0.3 → 2.0.0

package/src/workflow/CanvasTransitionEdge.tsx

@@ -1,12 +1,72 @@
 "use client";
 
-import { memo, useCallback, useContext, useRef, useState } from "react";
+import { memo, useCallback, useContext, useMemo, useRef, useState } from "react";
 import { BaseEdge, EdgeLabelRenderer, getSmoothStepPath } from "@xyflow/react";
 import type { EdgeProps } from "@xyflow/react";
 import { cn } from "@stigmer/theme";
 import type { CanvasTransitionEdgeData } from "./workflow-graph-conversions";
+import type { EdgeExecutionState } from "./execution";
+import type { EdgeDiffStatus } from "./diff/types";
 import { CanvasActionsContext } from "./CanvasActionsContext";
 import { TaskPickerPopover } from "./TaskPickerPopover";
+import { useWorkflowGraphMode } from "./WorkflowGraphModeContext";
+
+// ---------------------------------------------------------------------------
+// Execution-state visual mapping (DD-T06-005)
+// ---------------------------------------------------------------------------
+
+interface EdgeVisualStyle {
+  readonly strokeClass: string;
+  readonly opacity: number;
+  readonly dashArray?: string;
+  readonly animate?: boolean;
+  readonly labelDimmed: boolean;
+}
+
+const EDGE_EXECUTION_STYLES: Record<EdgeExecutionState, EdgeVisualStyle> = {
+  taken: {
+    strokeClass: "!stroke-[var(--stgm-success,#22c55e)]",
+    opacity: 1,
+    labelDimmed: false,
+  },
+  not_taken: {
+    strokeClass: "!stroke-[var(--stgm-muted-foreground,#737373)]",
+    opacity: 0.3,
+    dashArray: "5 5",
+    labelDimmed: true,
+  },
+  active: {
+    strokeClass: "!stroke-[var(--stgm-primary,#6366f1)]",
+    opacity: 1,
+    dashArray: "8 4",
+    animate: true,
+    labelDimmed: false,
+  },
+  not_reached: {
+    strokeClass: "!stroke-[var(--stgm-muted-foreground,#737373)]",
+    opacity: 0.25,
+    labelDimmed: true,
+  },
+};
+
+const EDGE_DIFF_STYLES: Record<EdgeDiffStatus, EdgeVisualStyle> = {
+  added: {
+    strokeClass: "!stroke-[var(--stgm-success,#22c55e)]",
+    opacity: 1,
+    labelDimmed: false,
+  },
+  removed: {
+    strokeClass: "!stroke-[var(--stgm-destructive,#ef4444)]",
+    opacity: 0.3,
+    dashArray: "5 5",
+    labelDimmed: true,
+  },
+  unchanged: {
+    strokeClass: "!stroke-[var(--stgm-muted-foreground,#737373)]",
+    opacity: 0.6,
+    labelDimmed: false,
+  },
+};
 
 /**
  * Custom React Flow edge rendering a directed transition between tasks.
@@ -15,13 +75,18 @@ import { TaskPickerPopover } from "./TaskPickerPopover";
  * Optionally renders a label pill for named branches (switch_case cases,
  * human_input outcomes).
  *
- * Shows a "+" button at the midpoint on hover. Clicking the button inserts
- * a new task node between the source and target, splitting this edge.
+ * In execution mode, applies per-edge visual treatment based on
+ * `data.executionState` (T06): taken/not_taken/active/not_reached.
+ *
+ * Shows a "+" button at the midpoint on hover in design mode. Clicking
+ * the button inserts a new task node between the source and target.
  *
- * @since T15 (Visual Canvas Editor)
+ * @since T15 (Visual Canvas Editor), T06 (Branch Highlighting)
  */
 export const CanvasTransitionEdge = memo(function CanvasTransitionEdge({
   id,
+  source,
+  target,
   sourceX,
   sourceY,
   targetX,
@@ -32,6 +97,7 @@ export const CanvasTransitionEdge = memo(function CanvasTransitionEdge({
   selected,
   markerEnd,
 }: EdgeProps & { data?: CanvasTransitionEdgeData }) {
+  const mode = useWorkflowGraphMode();
   const [edgePath, labelX, labelY] = getSmoothStepPath({
     sourceX,
     sourceY,
@@ -43,10 +109,15 @@ export const CanvasTransitionEdge = memo(function CanvasTransitionEdge({
   });
 
   const label = data?.label;
+  const execState = data?.executionState;
+  const diffState = (data as CanvasTransitionEdgeData & { diffState?: EdgeDiffStatus })?.diffState;
   const actions = useContext(CanvasActionsContext);
   const [hovered, setHovered] = useState(false);
   const [pickerOpen, setPickerOpen] = useState(false);
   const insertBtnRef = useRef<HTMLButtonElement>(null);
+  const isDesignMode = mode === "design";
+  const isExecutionMode = mode === "execution";
+  const isDiffMode = mode === "diff";
 
   const handleOpenPicker = useCallback(() => {
     setPickerOpen(true);
@@ -63,6 +134,28 @@ export const CanvasTransitionEdge = memo(function CanvasTransitionEdge({
     [actions, id],
   );
 
+  const insertionContext = useMemo(() => {
+    const graph = actions?.getGraphModel();
+    if (!graph) return null;
+    const sourceNode = graph.nodes.find((n) => n.id === source);
+    const targetNode = graph.nodes.find((n) => n.id === target);
+    return {
+      mode: "edge-splice" as const,
+      edgeId: id,
+      sourceNodeId: source,
+      sourceDisplayName: sourceNode?.taskName ?? source,
+      targetNodeId: target,
+      targetDisplayName: targetNode?.taskName ?? target,
+    };
+  }, [actions, id, source, target]);
+
+  // Resolve visual style: diff mode → diff styles, execution mode → execution styles, else defaults.
+  const execVisual = isDiffMode && diffState
+    ? EDGE_DIFF_STYLES[diffState]
+    : isExecutionMode && execState
+      ? EDGE_EXECUTION_STYLES[execState]
+      : null;
+
   return (
     <>
       <BaseEdge
@@ -70,12 +163,19 @@ export const CanvasTransitionEdge = memo(function CanvasTransitionEdge({
         path={edgePath}
         markerEnd={markerEnd}
         className={cn(
-          "!stroke-[var(--stgm-border-prominent,#a3a3a3)]",
+          execVisual
+            ? execVisual.strokeClass
+            : "!stroke-[var(--stgm-border-prominent,#a3a3a3)]",
           selected && "!stroke-[var(--stgm-ring,#3b82f6)]",
+          !isDesignMode && !execVisual && "!opacity-60",
+          execVisual?.animate && "stgm-edge-active",
         )}
         style={{
           strokeWidth: selected ? 2.5 : 2,
+          ...(execVisual && { opacity: execVisual.opacity }),
+          ...(execVisual?.dashArray && { strokeDasharray: execVisual.dashArray }),
         }}
+        data-edge-execution-state={execState}
       />
       <EdgeLabelRenderer>
         <div
@@ -83,38 +183,56 @@ export const CanvasTransitionEdge = memo(function CanvasTransitionEdge({
           style={{
             transform: `translate(-50%, -50%) translate(${labelX}px, ${labelY}px)`,
           }}
-          onMouseEnter={() => setHovered(true)}
-          onMouseLeave={() => setHovered(false)}
+          onMouseEnter={isDesignMode ? () => setHovered(true) : undefined}
+          onMouseLeave={isDesignMode ? () => setHovered(false) : undefined}
         >
           {label && (
-            <div className="stgm mb-1 rounded-full border border-[var(--stgm-border-prominent,#d4d4d8)] bg-[var(--stgm-card,var(--stgm-background,#fff))] px-2 py-0.5 text-center text-[10px] font-medium text-[var(--stgm-foreground,#1a1a2e)] shadow-sm">
+            <div
+              className={cn(
+                "stgm mb-1 rounded-full border border-[var(--stgm-border-prominent,#d4d4d8)] bg-[var(--stgm-card,var(--stgm-background,#fff))] px-2 py-0.5 text-center text-[10px] font-medium text-[var(--stgm-foreground,#1a1a2e)] shadow-sm",
+                execVisual?.labelDimmed && "opacity-30",
+              )}
+              aria-label={
+                execState
+                  ? `Branch ${label}, ${execState.replace(/_/g, " ")}`
+                  : `Branch ${label}`
+              }
+            >
               {label}
             </div>
           )}
-          <button
-            ref={insertBtnRef}
-            type="button"
-            onClick={handleOpenPicker}
-            className={cn(
-              "flex h-5 w-5 items-center justify-center rounded-full border border-[var(--stgm-border-prominent,#d4d4d8)] bg-[var(--stgm-card,var(--stgm-background,#fff))] text-[var(--stgm-muted-foreground,#737373)] shadow-sm transition-all",
-              "hover:border-[var(--stgm-primary,#6366f1)] hover:bg-[var(--stgm-primary,#6366f1)] hover:text-[var(--stgm-primary-foreground,#fff)]",
-              hovered || selected || pickerOpen ? "scale-100 opacity-100" : "scale-75 opacity-0",
-            )}
-            aria-label="Insert task here"
-            title="Insert task"
-          >
-            <svg width="10" height="10" viewBox="0 0 10 10" fill="none" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round" aria-hidden="true">
-              <path d="M5 2v6M2 5h6" />
-            </svg>
-          </button>
 
-          <TaskPickerPopover
-            open={pickerOpen}
-            onOpenChange={handlePickerOpenChange}
-            onSelectKind={handleKindSelected}
-            anchorRef={insertBtnRef}
-            side="bottom"
-          />
+          {/* Insert button and picker — design mode only */}
+          {isDesignMode && (
+            <>
+              <button
+                ref={insertBtnRef}
+                type="button"
+                onClick={handleOpenPicker}
+                className={cn(
+                  "flex h-5 w-5 items-center justify-center rounded-full border border-[var(--stgm-border-prominent,#d4d4d8)] bg-[var(--stgm-card,var(--stgm-background,#fff))] text-[var(--stgm-muted-foreground,#737373)] shadow-sm transition-all",
+                  "hover:border-[var(--stgm-primary,#6366f1)] hover:bg-[var(--stgm-primary,#6366f1)] hover:text-[var(--stgm-primary-foreground,#fff)]",
+                  hovered || selected || pickerOpen ? "scale-100 opacity-100" : "scale-75 opacity-0",
+                )}
+                aria-label="Insert task here"
+                title="Insert task"
+              >
+                <svg width="10" height="10" viewBox="0 0 10 10" fill="none" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round" aria-hidden="true">
+                  <path d="M5 2v6M2 5h6" />
+                </svg>
+              </button>
+
+              <TaskPickerPopover
+                open={pickerOpen}
+                onOpenChange={handlePickerOpenChange}
+                onSelectKind={handleKindSelected}
+                anchorRef={insertBtnRef}
+                insertionContext={insertionContext}
+                graph={actions?.getGraphModel() ?? null}
+                side="bottom"
+              />
+            </>
+          )}
         </div>
       </EdgeLabelRenderer>
     </>

package/src/workflow/ExecutionActiveTaskIndicator.tsx

@@ -0,0 +1,158 @@
+"use client";
+
+import { memo, useEffect, useRef, useState } from "react";
+import { cn } from "@stigmer/theme";
+import type { ActiveTaskInfo } from "./useActiveTaskName";
+import { formatDuration } from "./format-utils";
+
+/** Props for {@link ExecutionActiveTaskIndicator}. */
+export interface ExecutionActiveTaskIndicatorProps {
+  /** Current active task information. */
+  readonly activeTask: ActiveTaskInfo;
+  /** Whether follow-execution is currently active. */
+  readonly isFollowing: boolean;
+  /** Toggle follow on/off. */
+  readonly onFollowToggle: () => void;
+  /** Jump viewport to the active task. */
+  readonly onJumpToTask: () => void;
+  /** Additional CSS class names. */
+  readonly className?: string;
+}
+
+/**
+ * Compact overlay rendered above the execution graph showing the currently
+ * active task. Provides ambient status visibility at any zoom level without
+ * requiring the user to zoom into the graph to identify what's running.
+ *
+ * Features:
+ * - Task name (full, never truncated — this is the primary readability point)
+ * - Live elapsed time counter
+ * - Follow toggle (crosshair icon)
+ * - Aria-live announcements for screen readers
+ * - Handles waiting_approval state (amber styling + action label)
+ * - Handles concurrent tasks in fork (shows count)
+ *
+ * Designed as an SDK component (DD-001, DD-004) — works identically
+ * in the Console and embedded in third-party dashboards.
+ */
+export const ExecutionActiveTaskIndicator = memo(function ExecutionActiveTaskIndicator({
+  activeTask,
+  isFollowing,
+  onFollowToggle,
+  onJumpToTask,
+  className,
+}: ExecutionActiveTaskIndicatorProps) {
+  const isApproval = activeTask.status === "waiting_approval";
+  const hasConcurrent = activeTask.concurrentCount > 1;
+
+  // Live elapsed time counter
+  const [elapsedMs, setElapsedMs] = useState(activeTask.durationMs);
+  const intervalRef = useRef<ReturnType<typeof setInterval> | null>(null);
+
+  useEffect(() => {
+    setElapsedMs(activeTask.durationMs);
+
+    if (activeTask.status === "running") {
+      intervalRef.current = setInterval(() => {
+        setElapsedMs((prev) => prev + 1000);
+      }, 1000);
+    }
+
+    return () => {
+      if (intervalRef.current) {
+        clearInterval(intervalRef.current);
+        intervalRef.current = null;
+      }
+    };
+  }, [activeTask.taskName, activeTask.durationMs, activeTask.status]);
+
+  const statusLabel = isApproval
+    ? `Awaiting approval: ${activeTask.currentToolName || activeTask.taskName}`
+    : hasConcurrent
+      ? `Running: ${activeTask.taskName} (+${activeTask.concurrentCount - 1} parallel)`
+      : `Running: ${activeTask.taskName}`;
+
+  const announcementText = isApproval
+    ? `Approval required for ${activeTask.currentToolName || activeTask.taskName}`
+    : `Now running: ${activeTask.taskName}`;
+
+  return (
+    <div className={cn("absolute left-3 top-3 z-50 flex items-center gap-2", className)}>
+      {/* Main indicator pill */}
+      <button
+        type="button"
+        onClick={onJumpToTask}
+        className={cn(
+          "flex items-center gap-2 rounded-md border px-2.5 py-1.5 text-xs font-medium shadow-sm backdrop-blur-sm transition-colors",
+          isApproval
+            ? "border-[var(--stgm-warning,#f59e0b)]/40 bg-[var(--stgm-warning,#f59e0b)]/10 text-[var(--stgm-foreground,#1a1a2e)] hover:bg-[var(--stgm-warning,#f59e0b)]/20"
+            : "border-[var(--stgm-primary,#6366f1)]/30 bg-[var(--stgm-card,#fff)]/90 text-[var(--stgm-foreground,#1a1a2e)] hover:bg-[var(--stgm-primary,#6366f1)]/10",
+        )}
+        title="Click to center on active task"
+      >
+        {/* Pulsing status dot */}
+        <span
+          className={cn(
+            "inline-block h-2 w-2 rounded-full motion-safe:animate-pulse",
+            isApproval
+              ? "bg-[var(--stgm-warning,#f59e0b)]"
+              : "bg-[var(--stgm-primary,#6366f1)]",
+          )}
+          aria-hidden="true"
+        />
+
+        <span>{statusLabel}</span>
+
+        {elapsedMs > 0 && (
+          <>
+            <span className="text-[var(--stgm-muted-foreground,#737373)]" aria-hidden="true">·</span>
+            <span className="tabular-nums text-[var(--stgm-muted-foreground,#737373)]">
+              {formatDuration(elapsedMs)}
+            </span>
+          </>
+        )}
+      </button>
+
+      {/* Follow toggle */}
+      <button
+        type="button"
+        onClick={onFollowToggle}
+        className={cn(
+          "flex h-7 w-7 items-center justify-center rounded-md border shadow-sm backdrop-blur-sm transition-colors",
+          isFollowing
+            ? "border-[var(--stgm-primary,#6366f1)]/40 bg-[var(--stgm-primary,#6366f1)]/10 text-[var(--stgm-primary,#6366f1)]"
+            : "border-[var(--stgm-border,#e5e5e5)] bg-[var(--stgm-card,#fff)]/90 text-[var(--stgm-muted-foreground,#737373)] hover:text-[var(--stgm-foreground,#1a1a2e)]",
+        )}
+        title={isFollowing ? "Following active task (click to stop)" : "Follow active task"}
+        aria-label={isFollowing ? "Stop following active task" : "Follow active task"}
+        aria-pressed={isFollowing}
+      >
+        <svg width="14" height="14" viewBox="0 0 14 14" fill="none" aria-hidden="true">
+          {isFollowing ? (
+            // Crosshair icon (following)
+            <>
+              <circle cx="7" cy="7" r="3" stroke="currentColor" strokeWidth="1.5" />
+              <path d="M7 1v2M7 11v2M1 7h2M11 7h2" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round" />
+            </>
+          ) : (
+            // Eye icon (not following)
+            <>
+              <path d="M1.5 7s2.2-3.5 5.5-3.5S12.5 7 12.5 7s-2.2 3.5-5.5 3.5S1.5 7 1.5 7z" stroke="currentColor" strokeWidth="1.5" strokeLinejoin="round" />
+              <circle cx="7" cy="7" r="1.5" stroke="currentColor" strokeWidth="1.5" />
+            </>
+          )}
+        </svg>
+      </button>
+
+      {/* Screen reader live region */}
+      <span
+        role="status"
+        aria-live="polite"
+        aria-atomic="true"
+        className="sr-only"
+      >
+        {announcementText}
+      </span>
+    </div>
+  );
+});

package/src/workflow/ExecutionSummaryWidget.tsx

@@ -4,6 +4,7 @@ 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";
+import { formatDurationSec } from "./format-utils";
 
 export interface ExecutionSummaryWidgetProps {
   readonly summary: ExecutionSummary | null;
@@ -55,11 +56,6 @@ const STAT_CARDS: readonly StatCardDef[] = [
   },
 ];
 
-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.
@@ -146,7 +142,7 @@ export const ExecutionSummaryWidget = memo(function ExecutionSummaryWidget({
             <span>
               Avg duration:{" "}
               <span className="font-medium text-foreground">
-                {formatDuration(avgSeconds)}
+                {formatDurationSec(avgSeconds)}
               </span>
             </span>
           )}