feat(apollo-react): add task breakpoints to case-management StageNode [MST-12196]

[alfredo-mruiz]

Description

Enables task-level breakpoints on the case-management StageNode (ticket MST-12196).

Each task in a stage (sequential, ad hoc, and event-driven) gains a breakpoint marker: a red dot at the top-left corner of the task card. It is solid when a breakpoint is set, pulses when the debug run is paused on that task, and appears as a translucent ghost on hover/focus to add one. Breakpoints are toggled by clicking the corner dot or via a right-click Add / Remove breakpoint menu (parity with the BPMN canvas). An optional canBreakpoint predicate lets consumers restrict which tasks can host a breakpoint.

The dot is driven entirely by execution state, so no new "armed" concept and no "debug" canvas mode are introduced (this matches how the BPMN implementation in PO.frontend-case models breakpoints):

• active (solid dot) comes from taskStatus[id].breakpoint
• paused (pulse) comes from taskStatus[id].status === 'Paused'

API (all additive / optional, so existing StageNode consumers are unchanged):

• StageTaskExecution.breakpoint?: boolean
• StageNodeBaseProps.onToggleTaskBreakpoint?(taskId) — enables the click affordance
• StageNodeBaseProps.canBreakpoint?(task) — gates which tasks can host a breakpoint
• New component TaskBreakpointDot; new util resolveTaskBreakpointToggle

Breakpoint dot lifecycle

stateDiagram-v2
    [*] --> Idle
    Idle --> Ghost: hover or focus
    Ghost --> Idle: unhover or blur
    Idle --> Set: right-click Add
    Ghost --> Set: click Add
    Set --> Paused: run pauses here
    Paused --> Set: run continues
    Set --> Idle: click or menu Remove
    Paused --> Idle: click or menu Remove

Loading

Visuals: Idle = nothing · Ghost = translucent dot + "Add breakpoint" tooltip · Set = solid red dot · Paused = solid red dot + pulsing halo, plus the card's amber Paused border and pause icon.

How it is wired

flowchart TD
    S["execution.taskStatus[id]<br/>breakpoint, status"] --> G["StageNode task groups<br/>sequential / ad hoc / event-driven"]
    OT["onToggleTaskBreakpoint"] --> R{"resolveTaskBreakpointToggle"}
    CB["canBreakpoint(task)"] --> R
    G --> R
    R -->|allowed| D["TaskBreakpointDot<br/>active = breakpoint<br/>paused = status is Paused"]
    R -->|placeholder or rejected| N["display-only / hidden<br/>no toggle affordance"]
    G --> M["right-click menu<br/>Add / Remove breakpoint"]

Loading

Demo

apollo-ui-cm-breakpoint.mov

Storybook: Components/Nodes/StageNode → three breakpoint stories:

• Interactive (click or right-click) — full lifecycle in one stage (a passed+solid task, a paused+pulsing task, and idle tasks to hover/add/remove).
• Across task types — sequential, ad hoc, and event-driven.
• Restricted (canBreakpoint predicate) — only allowed tasks show the affordance/menu.

Risks of rolling out

• Low. All new props are optional and default to off; a stage that passes no breakpoint data renders identically to before.
• No feature flags added or removed; no API removed; backwards compatible.
• Only visible surface change for existing consumers: StageTask now carries a Tailwind group marker class (no descendant utilities rely on it) and a TaskBreakpointDot that returns null when no breakpoint is set and no toggle handler is provided.

Feature flag

N/A

Tests

• I validated theme and locale
• I added unit tests
• I added component tests
• I added Playwright E2E tests
• I manually tested my changes or added other kinds of tests (Please add details below)

Details:

• Unit: TaskBreakpointDot.test.tsx (idle/set/paused rendering, pulse gated on active && paused, click toggles, mouse-click blurs so the focus-revealed ghost doesn't linger) and resolveTaskBreakpointToggle (no handler, allowed, placeholder, canBreakpoint accept/reject).
• Component: StageNode.test.tsx renders the breakpoint marker on armed ad hoc and event-driven tasks (and its absence when unarmed).
• Manual: exercised all three Storybook stories.

[github-actions]

The latest updates on your projects. Learn more about Vercel for GitHub.

Project	Deployment	Review	Updated (PT)
apollo-design	🟢 Ready	Preview, Logs	Jul 17, 2026, 12:08:32 AM
apollo-docs	🟢 Ready	Preview, Logs	Jul 17, 2026, 12:08:32 AM
apollo-landing	🟢 Ready	Preview, Logs	Jul 17, 2026, 12:08:32 AM
apollo-vertex	🟢 Ready	Preview, Logs	Jul 17, 2026, 12:08:32 AM

[github-actions]

Dependency License Review

• ✅ 1950 package(s) scanned
• ✅ No license issues found
• ⚠️ 2 package(s) excluded (see details below)

License distribution

License	Packages
MIT	1720
ISC	89
Apache-2.0	55
BSD-3-Clause	27
BSD-2-Clause	23
BlueOak-1.0.0	8
MPL-2.0	4
MIT-0	3
CC0-1.0	3
MIT OR Apache-2.0	2
(MIT OR Apache-2.0)	2
Unlicense	2
LGPL-3.0-or-later	1
Python-2.0	1
CC-BY-4.0	1
(MPL-2.0 OR Apache-2.0)	1
Unknown	1
Artistic-2.0	1
(WTFPL OR MIT)	1
(BSD-2-Clause OR MIT OR Apache-2.0)	1
CC-BY-3.0	1
0BSD	1
(MIT OR CC0-1.0)	1
MIT AND ISC	1

Excluded packages

Package	Version	License	Reason
@img/sharp-libvips-linux-x64	1.2.4	LGPL-3.0-or-later	LGPL pre-built binary, not linked
khroma	2.1.0	Unknown	MIT per GitHub repo, missing license field in package.json

[Copilot]

Pull request overview

Adds task-level breakpoint visualization and interaction to the case-management StageNode in apollo-react, enabling consumers to show/toggle per-task breakpoints (click + optional right-click menu wiring) across sequential, ad hoc, and event-driven tasks.

Changes:

• Introduces TaskBreakpointDot (ghost/set/paused-pulse states) and wires it into all StageNode task renderers.
• Adds additive API surface: StageTaskExecution.breakpoint?: boolean, StageNodeBaseProps.onToggleTaskBreakpoint?, and StageNodeBaseProps.canBreakpoint?, plus resolveTaskBreakpointToggle helper.
• Adds unit/component tests and Storybook stories covering breakpoint rendering and interaction.

Reviewed changes

Copilot reviewed 14 out of 14 changed files in this pull request and generated 1 comment.

Show a summary per file

File	Description
packages/apollo-react/src/canvas/components/StageNode/TaskBreakpointDot.tsx	New breakpoint marker component (display-only + interactive modes) with hover/focus ghost, active dot, and paused pulse.
packages/apollo-react/src/canvas/components/StageNode/TaskBreakpointDot.test.tsx	Unit tests for marker rendering, labeling, click toggling, blur behavior, and pulse gating.
packages/apollo-react/src/canvas/components/StageNode/StageNodeTaskUtilities.ts	Adds resolveTaskBreakpointToggle helper to centralize per-task eligibility logic (handler present, not placeholder, passes predicate).
packages/apollo-react/src/canvas/components/StageNode/StageNodeSequentialTaskGroups.tsx	Passes resolved breakpoint toggle handler into sequential task rendering.
packages/apollo-react/src/canvas/components/StageNode/StageNodeEventDrivenTaskGroups.tsx	Passes resolved breakpoint toggle handler into event-driven task rendering.
packages/apollo-react/src/canvas/components/StageNode/StageNodeAdhocTaskGroups.tsx	Passes resolved breakpoint toggle handler into ad hoc task rendering.
packages/apollo-react/src/canvas/components/StageNode/StageNode.utils.test.ts	Adds unit coverage for resolveTaskBreakpointToggle.
packages/apollo-react/src/canvas/components/StageNode/StageNode.types.ts	Extends public types with breakpoint execution flag and optional breakpoint toggle/predicate props.
packages/apollo-react/src/canvas/components/StageNode/StageNode.test.tsx	Component tests ensuring breakpoint marker presence for ad hoc + event-driven tasks when armed, and absence when unarmed.
packages/apollo-react/src/canvas/components/StageNode/StageNode.stories.tsx	Adds interactive breakpoint stories/playground demonstrating lifecycle and task-type coverage.
packages/apollo-react/src/canvas/components/StageNode/EventDrivenTask.tsx	Renders TaskBreakpointDot within event-driven task cards and adds group class for hover/focus styling.
packages/apollo-react/src/canvas/components/StageNode/DraggableTask.types.ts	Adds onToggleBreakpoint prop to support interactive breakpoint toggling in draggable tasks.
packages/apollo-react/src/canvas/components/StageNode/DraggableTask.tsx	Renders TaskBreakpointDot within draggable task cards and adds group class for hover/focus styling.
packages/apollo-react/src/canvas/components/StageNode/AdhocTask.tsx	Renders TaskBreakpointDot within ad hoc task cards and adds group class for hover/focus styling.

[github-actions]

📊 Coverage + size by package

Per-package coverage and bundle size on this PR. New-line coverage = of the source lines this PR adds or changes, the % hit by tests.

Package	Coverage	New-line coverage	Packed (gzip)	Unpacked	vs main
@uipath/apollo-core	9.0%	—	43.82 MB	57.31 MB	±0
@uipath/apollo-react	36.9%	8.5% (4/47)	7.38 MB	28.11 MB	+1.0 KB
@uipath/apollo-wind	40.3%	—	395.1 KB	2.57 MB	−6 B
@uipath/ap-chat	85.8%	—	43.43 MB	55.91 MB	±0

_{"Coverage" is each package's own coverage.include scope (e.g. apollo-core instruments only scripts/). "Packed"/"Unpacked" come from npm pack --dry-run and only cover built packages — "—" means not measured this run (package not affected / not built). "vs main" is the packed (gzipped) delta against the last successful main build (the package-sizes artifact from the Release workflow); "—" there means no main baseline was available this run. The baseline is main's latest build, not this PR's exact merge-base, so it includes any drift since the branch diverged. Packages with no vitest config are omitted.}

[github-actions]

📦 Dev Packages

Package	Status	Updated (PT)
@uipath/apollo-react@4.64.0-pr917.dd862cc	🟢 Published	Jul 17, 2026, 12:07:13 AM

[Copilot]

Pull request overview

Copilot reviewed 14 out of 14 changed files in this pull request and generated no new comments.

[Copilot]

Copilot encountered an error and was unable to review this pull request. You can try again by re-requesting a review.

[Copilot]

Pull request overview

Copilot reviewed 9 out of 9 changed files in this pull request and generated 2 comments.

[Copilot]

Pull request overview

Copilot reviewed 10 out of 10 changed files in this pull request and generated 1 comment.