feat(apollo-react): add IterationNavigatorPill component and Execution Count story

Extracts the Option B iteration navigator from the V2 story proposals into a
standalone reusable component. IterationNavigatorPill is a unified segmented
pill with an All aggregate toggle, per-iteration status dots, click-to-type
jump, and a crosshair shortcut to the first failed iteration. Adapts
responsively across three size tiers (full ≥400px, compact 260-399px,
minimal <260px) derived from props.width.

Adds LoopIterationPillState to LoopNode.types and exports the component
from the LoopNode module index. Adds an Execution Count doc-layout story
to Components/LoopNode showing all three tiers in a live canvas preview
with anatomy cards, breakpoint spec table, and usage code block.

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>

Author: 1980computer

packages/apollo-react/src/canvas/components/LoopNode/IterationNavigatorPill.tsx

@@ -0,0 +1,316 @@
+import { cn } from '@uipath/apollo-wind';
+import { useRef, useState } from 'react';
+import type { ElementStatusValues } from '../../types/execution';
+import { CanvasIcon } from '../../utils/icon-registry';
+import type { LoopIterationPillState } from './LoopNode.types';
+
+function stopEvent(e: React.SyntheticEvent) {
+  e.stopPropagation();
+}
+
+export function getIterationStatusColor(status: string | undefined): string {
+  switch (status) {
+    case 'Completed':
+      return '#22c55e';
+    case 'Failed':
+      return '#ef4444';
+    case 'InProgress':
+      return '#f59e0b';
+    case 'Paused':
+      return '#a855f7';
+    case 'Cancelled':
+      return '#94a3b8';
+    default:
+      return 'currentColor';
+  }
+}
+
+export function IterationNavigatorPill({
+  state,
+  size = 'full',
+}: {
+  state: LoopIterationPillState;
+  size?: 'full' | 'compact' | 'minimal';
+}) {
+  const {
+    activeIndex,
+    total,
+    onActiveIndexChange,
+    disabled,
+    isAll,
+    onAllChange,
+    iterationStatuses,
+    overallStatus,
+  } = state;
+
+  const [isEditing, setIsEditing] = useState(false);
+  const [inputValue, setInputValue] = useState('');
+  const inputRef = useRef<HTMLInputElement>(null);
+
+  const canInteract = !disabled && typeof onActiveIndexChange === 'function';
+  const visibleIndex = activeIndex + 1;
+  const clampToRange = (v: number) => Math.max(1, Math.min(total, v));
+
+  const currentStatus = iterationStatuses?.get(activeIndex);
+  const firstFailedIndex = iterationStatuses
+    ? [...iterationStatuses.entries()].find(([, s]) => s === 'Failed')?.[0]
+    : undefined;
+  const completedCount = iterationStatuses
+    ? [...iterationStatuses.values()].filter((s) => s === 'Completed').length
+    : undefined;
+  const failedCount = iterationStatuses
+    ? [...iterationStatuses.values()].filter((s) => s === 'Failed').length
+    : 0;
+
+  const handlePrev = (e: React.MouseEvent) => {
+    e.stopPropagation();
+    if (canInteract && !isAll && activeIndex > 0) onActiveIndexChange?.(activeIndex - 1);
+  };
+
+  const handleNext = (e: React.MouseEvent) => {
+    e.stopPropagation();
+    if (canInteract && !isAll && activeIndex < total - 1) onActiveIndexChange?.(activeIndex + 1);
+  };
+
+  const toggleAll = (e: React.MouseEvent) => {
+    e.stopPropagation();
+    onAllChange(!isAll);
+  };
+
+  const handleJumpToFailed = (e: React.MouseEvent) => {
+    e.stopPropagation();
+    if (firstFailedIndex !== undefined) onActiveIndexChange?.(firstFailedIndex);
+  };
+
+  const startEdit = (e: React.MouseEvent) => {
+    e.stopPropagation();
+    if (!canInteract || isAll || isEditing) return;
+    setInputValue(String(visibleIndex));
+    setIsEditing(true);
+    requestAnimationFrame(() => inputRef.current?.select());
+  };
+
+  const commitEdit = () => {
+    const parsed = parseInt(inputValue, 10);
+    if (!Number.isNaN(parsed)) onActiveIndexChange?.(clampToRange(parsed) - 1);
+    setIsEditing(false);
+  };
+
+  const handleInputKeyDown = (e: React.KeyboardEvent<HTMLInputElement>) => {
+    e.stopPropagation();
+    if (e.key === 'Enter') commitEdit();
+    if (e.key === 'Escape') setIsEditing(false);
+  };
+
+  const canGoPrev = canInteract && !isAll && activeIndex > 0;
+  const canGoNext = canInteract && !isAll && activeIndex < total - 1;
+
+  // Minimal tier — read-only count chip
+  if (size === 'minimal') {
+    return (
+      <div
+        className="nodrag nopan pointer-events-auto flex items-center"
+        onPointerDown={stopEvent}
+        onMouseDown={stopEvent}
+      >
+        <div className="flex h-6 items-center gap-0.5 rounded-full border border-border bg-surface px-2 text-[11px] font-semibold leading-none shadow-sm">
+          {isAll ? (
+            completedCount !== undefined ? (
+              <>
+                <span style={{ color: getIterationStatusColor('Completed') }}>
+                  ✓{completedCount}
+                </span>
+                {failedCount > 0 && (
+                  <span style={{ color: getIterationStatusColor('Failed') }}> ✗{failedCount}</span>
+                )}
+              </>
+            ) : (
+              <>
+                <span className="opacity-60">Σ</span>
+                <span className="ml-0.5">{total}</span>
+              </>
+            )
+          ) : (
+            <>
+              {currentStatus && (
+                <span
+                  className="h-1.5 w-1.5 shrink-0 rounded-full"
+                  style={{ backgroundColor: getIterationStatusColor(currentStatus) }}
+                />
+              )}
+              <span>{visibleIndex}</span>
+              <span className="px-0.5 opacity-60">/</span>
+              <span>{total}</span>
+            </>
+          )}
+        </div>
+      </div>
+    );
+  }
+
+  // Full and compact tiers — unified segmented pill
+  return (
+    <div
+      className="nodrag nopan pointer-events-auto flex items-center gap-1.5"
+      onPointerDown={stopEvent}
+      onMouseDown={stopEvent}
+      onDoubleClick={stopEvent}
+    >
+      {/* Single unified pill */}
+      <div className="nodrag nopan flex h-6 items-stretch overflow-hidden rounded-full border border-border bg-surface shadow-sm">
+        {/* Left segment — All toggle */}
+        <button
+          type="button"
+          onClick={toggleAll}
+          onPointerDown={stopEvent}
+          onMouseDown={stopEvent}
+          aria-pressed={isAll}
+          aria-label="Show aggregate across all iterations"
+          className={cn(
+            'nodrag nopan select-none px-2.5 text-[11px] font-semibold leading-none transition-colors',
+            isAll
+              ? 'bg-foreground-accent/15 text-foreground-accent'
+              : 'text-foreground hover:bg-surface-overlay'
+          )}
+        >
+          All
+        </button>
+
+        {/* Divider */}
+        <div className="w-px shrink-0 bg-border" />
+
+        {/* Right segment — aggregate or navigation */}
+        {isAll ? (
+          <button
+            type="button"
+            onClick={toggleAll}
+            onPointerDown={stopEvent}
+            onMouseDown={stopEvent}
+            className="nodrag nopan flex items-center gap-1.5 px-2.5 text-[11px] font-semibold leading-none transition-colors hover:bg-surface-overlay"
+            aria-label="Return to individual iteration view"
+            title="Click to return to individual iteration view"
+          >
+            {completedCount !== undefined ? (
+              <>
+                <span style={{ color: getIterationStatusColor('Completed') }}>
+                  ✓ {completedCount}
+                </span>
+                {failedCount > 0 && (
+                  <span style={{ color: getIterationStatusColor('Failed') }}>✗ {failedCount}</span>
+                )}
+              </>
+            ) : (
+              <>
+                <span aria-hidden className="opacity-60">
+                  Σ
+                </span>
+                <span>{total}</span>
+              </>
+            )}
+          </button>
+        ) : (
+          <div className="flex items-stretch">
+            {/* Prev — hidden in compact */}
+            {size === 'full' && (
+              <button
+                type="button"
+                className={cn(
+                  'nodrag nopan flex w-5 items-center justify-center text-foreground transition-opacity',
+                  !canGoPrev
+                    ? 'cursor-not-allowed opacity-40'
+                    : 'cursor-pointer hover:bg-surface-overlay'
+                )}
+                disabled={!canGoPrev}
+                aria-label="Previous iteration"
+                onClick={handlePrev}
+                onPointerDown={stopEvent}
+                onMouseDown={stopEvent}
+              >
+                <CanvasIcon icon="chevron-left" size={12} />
+              </button>
+            )}
+
+            {/* Editable fraction with status dot */}
+            <span
+              className={cn(
+                'flex min-w-10 select-none items-center justify-center gap-0.5 px-1 text-[11px] font-semibold leading-none',
+                canInteract && !isEditing && 'cursor-pointer hover:text-foreground-accent'
+              )}
+              onClick={startEdit}
+              title={canInteract ? 'Click to jump to a specific iteration' : undefined}
+            >
+              {isEditing ? (
+                <>
+                  <input
+                    ref={inputRef}
+                    type="number"
+                    min={1}
+                    max={total}
+                    value={inputValue}
+                    onChange={(e) => setInputValue(e.target.value)}
+                    onBlur={commitEdit}
+                    onKeyDown={handleInputKeyDown}
+                    onPointerDown={stopEvent}
+                    className="w-7 appearance-none bg-transparent text-center text-[11px] font-semibold leading-none outline-none [&::-webkit-inner-spin-button]:appearance-none [&::-webkit-outer-spin-button]:appearance-none border-b border-foreground-accent"
+                  />
+                  <span className="px-0.5 opacity-60">/</span>
+                  <span>{total}</span>
+                </>
+              ) : (
+                <>
+                  {currentStatus && (
+                    <span
+                      className="h-1.5 w-1.5 shrink-0 rounded-full"
+                      style={{ backgroundColor: getIterationStatusColor(currentStatus) }}
+                    />
+                  )}
+                  <span>{visibleIndex}</span>
+                  <span className="px-0.5 opacity-60">/</span>
+                  <span>{total}</span>
+                </>
+              )}
+            </span>
+
+            {/* Next — hidden in compact */}
+            {size === 'full' && (
+              <button
+                type="button"
+                className={cn(
+                  'nodrag nopan flex w-5 items-center justify-center text-foreground transition-opacity',
+                  !canGoNext
+                    ? 'cursor-not-allowed opacity-40'
+                    : 'cursor-pointer hover:bg-surface-overlay'
+                )}
+                disabled={!canGoNext}
+                aria-label="Next iteration"
+                onClick={handleNext}
+                onPointerDown={stopEvent}
+                onMouseDown={stopEvent}
+              >
+                <CanvasIcon icon="chevron-right" size={12} />
+              </button>
+            )}
+          </div>
+        )}
+      </div>
+
+      {/* Jump-to-failed shortcut — hidden when loop is globally Failed */}
+      {firstFailedIndex !== undefined &&
+        !isAll &&
+        canInteract &&
+        overallStatus !== ('Failed' as ElementStatusValues) && (
+          <button
+            type="button"
+            className="nodrag nopan inline-flex h-6 w-6 items-center justify-center rounded-full border border-border bg-surface shadow-sm transition-colors hover:border-red-400"
+            onClick={handleJumpToFailed}
+            onPointerDown={stopEvent}
+            onMouseDown={stopEvent}
+            aria-label="Jump to first failed iteration"
+            title={`Jump to iteration ${firstFailedIndex + 1} (failed)`}
+          >
+            <CanvasIcon icon="crosshair" size={12} color={getIterationStatusColor('Failed')} />
+          </button>
+        )}
+    </div>
+  );
+}