diff --git a/examples/order-fulfillment-compensation/README.md b/examples/order-fulfillment-compensation/README.md
new file mode 100644
index 000000000..1ea1cdf13
--- /dev/null
+++ b/examples/order-fulfillment-compensation/README.md
@@ -0,0 +1,286 @@
+# Order Fulfillment with Compensation (Quarkus Flow + Saga Pattern)
+
+A complete example demonstrating the **Compensation/Saga Pattern** for distributed transactions using:
+
+- **Quarkus** (hot-reload dev mode)
+- **[Quarkus Flow](https://docs.quarkiverse.io/quarkus-flow/dev/)** (function-first fluent DSL for Serverless Workflow)
+- **Try-Catch Error Handling** with automatic compensation/rollback
+- **WebSocket** for real-time UI updates
+- A **Single Page Application (SPA)** UI with live workflow visualization
+
+> Run locally with hot reload and _no manual infra setup_. Perfect for learning how to handle failures and rollbacks in distributed workflows.
+
+---
+
+## 🚀 Quick Start
+
+### Prerequisites
+
+- Java 17+ and Maven
+
+### 1) Run the app
+
+```bash
+# from this example directory
+mvn quarkus:dev
+```
+
+Open: **http://localhost:8080**
+
+> Quarkus dev mode gives you live reload for Java, resources, and the static UI.
+
+---
+
+## 🧭 What you'll see
+
+The UI is a clean, responsive Single Page Application that visualizes the order fulfillment workflow in real-time. You can:
+
+1. **Submit Orders**: Enter one of four test order IDs to see different failure scenarios
+2. **Watch Live Progress**: See each step execute in real-time via WebSocket updates
+3. **Observe Compensation**: When a step fails, watch the automatic rollback of previous operations
+
+### Test Scenarios
+
+The example includes three pre-configured test orders that demonstrate different failure points:
+
+- **ORDER#001**: Fails at **Stock Reservation** (out of stock)
+  - Compensation: Cancels stock reservation
+  
+- **ORDER#002**: Fails at **Payment Processing** (service unavailable)
+  - Compensation: Cancels payment → Cancels stock reservation
+  
+- **ORDER#003**: Fails at **Shipping** (carrier unavailable)
+  - Compensation: Cancels shipping → Cancels payment → Cancels stock reservation
+
+- **ORDER#004**: Succeeds through all steps with no failures
+
+Any other order ID will complete successfully through all three steps.
+
+---
+
+## 🧩 Architecture: The Saga Pattern
+
+This example implements the **Saga Pattern** for managing distributed transactions. When a step fails, compensation functions automatically rollback all previously completed operations, ensuring data consistency.
+
+```text
+┌─────────────────────────────────────────────────────────────────┐
+│                    Order Fulfillment Workflow                    │
+│                                                                   │
+│  ┌──────────────┐      ┌──────────────┐      ┌──────────────┐  │
+│  │   Reserve    │─────▶│   Process    │─────▶│   Schedule   │  │
+│  │    Stock     │      │   Payment    │      │   Shipping   │  │
+│  └──────┬───────┘      └──────┬───────┘      └──────┬───────┘  │
+│         │                     │                     │           │
+│         │ ✗ Fails             │ ✗ Fails             │ ✗ Fails   │
+│         ▼                     ▼                     ▼           │
+│  ┌──────────────┐      ┌──────────────┐      ┌──────────────┐  │
+│  │   Cancel     │      │   Cancel     │      │   Cancel     │  │
+│  │ Reservation  │      │   Payment    │      │   Shipping   │  │
+│  └──────────────┘      └──────┬───────┘      └──────┬───────┘  │
+│                               │                     │           │
+│                               ▼                     ▼           │
+│                        ┌──────────────┐      ┌──────────────┐  │
+│                        │   Cancel     │      │   Cancel     │  │
+│                        │ Reservation  │      │   Payment    │  │
+│                        └──────────────┘      └──────┬───────┘  │
+│                                                     ▼           │
+│                                              ┌──────────────┐  │
+│                                              │   Cancel     │  │
+│                                              │ Reservation  │  │
+│                                              └──────────────┘  │
+└─────────────────────────────────────────────────────────────────┘
+```
+
+### Key Concepts
+
+1. **Forward Flow**: Each step (stock → payment → shipping) executes sequentially
+2. **Compensation Flow**: On failure, compensation functions execute in reverse order
+3. **Atomic Operations**: Each step is either fully completed or fully compensated
+4. **Error Propagation**: Errors trigger immediate compensation and workflow termination
+
+---
+
+## 🔧 The Workflow Definition
+
+The workflow uses Quarkus Flow's fluent DSL with nested `tryCatch` blocks. Each business operation has a corresponding compensation function:
+
+```java
+public Workflow descriptor() {
+    return FuncWorkflowBuilder.workflow("order-fulfillment", "examples")
+        .tasks(
+            // Step 1: Try to reserve stock
+            tryCatch("tryStockReservation",
+                t -> t.tryCatch(function("stockReservation", this::reserveStock))
+                      .catchError(
+                          err -> err.type(STOCK_ORDER_ERROR),
+                          function("cancelStockReservation", this::cancelReservation)
+                              .then(FlowDirectiveEnum.END)
+                      )),
+            
+            // Step 2: Try to process payment
+            tryCatch("tryPaymentProcessing",
+                t -> t.tryCatch(function("paymentProcessing", this::processPayment))
+                      .catchWhen(
+                          "${ .status == 503 }",
+                          function("cancelPayment", this::cancelPayment)
+                              .then(FlowDirectiveEnum.END))),
+            
+            // Step 3: Try to schedule shipping
+            tryCatch("tryShipping",
+                t -> t.tryCatch(function("scheduleShipping", this::scheduleShipping))
+                      .catchType(
+                          SHIPPING_ERROR,
+                          function("cancelShipping", this::cancelShipping)
+                              .then(FlowDirectiveEnum.END))),
+            
+            // Final step: Mark workflow complete
+            function("endFlow", this::endFlow)
+        )
+        .build();
+}
+```
+
+### Error Handling Strategies
+
+The example demonstrates three different error-catching approaches:
+
+1. **`catchError`**: Match by error type (e.g., `STOCK_ORDER_ERROR`)
+2. **`catchWhen`**: Match by condition expression (e.g., `${ .status == 503 }`)
+3. **`catchType`**: Match by error type constant (e.g., `SHIPPING_ERROR`)
+
+---
+
+## 🎯 Business Logic
+
+Each operation is implemented as a simple Java method that can succeed or fail:
+
+```java
+private OrderStep reserveStock(String order) {
+    log.info("Reserving stock for order: {}", order);
+    broadcastStep(order, "stockReservation", "processing", "Reserving stock...");
+    
+    if (order.equals(ORDER_001)) {
+        broadcastStep(order, "stockReservation", "failed", "Out of stock");
+        throw new WorkflowException(WorkflowError.error(STOCK_ORDER_ERROR, 409).build());
+    }
+    
+    broadcastStep(order, "stockReservation", "completed", "Stock reserved");
+    return new OrderStep(order, "reserved");
+}
+
+private OrderStep cancelReservation(String order) {
+    log.info("Cancelling reservation for order: {}", order);
+    broadcastStep(order, "compensation", "processing", "Cancelling stock reservation...");
+    broadcastStep(order, "compensation", "completed", "Stock reservation cancelled");
+    return new OrderStep(order, "error");
+}
+```
+
+### Compensation Chain
+
+When a later step fails, its compensation function calls the compensation of previous steps:
+
+```java
+private OrderStep cancelShipping(OrderStep order) {
+    log.info("Cancel shipping for order: {}", order);
+    broadcastStep(order.orderId(), "compensation", "processing", 
+                  "Cancelling shipping and previous operations...");
+    
+    // Cascade: Cancel shipping → Cancel payment → Cancel stock
+    cancelPayment(order);
+    
+    broadcastStep(order.orderId(), "compensation", "completed", 
+                  "All operations cancelled");
+    return new OrderStep(order.orderId(), "error");
+}
+```
+
+---
+
+## 🌐 REST API
+
+### Start Order Processing
+
+```bash
+curl -X POST http://localhost:8080/api/orders \
+  -H "Content-Type: application/json" \
+  -d '{"orderId": "ORDER#001"}'
+```
+
+**Response:**
+```
+HTTP/1.1 202 Accepted
+Location: /orders/ORDER#001
+```
+
+The workflow executes asynchronously. Use the WebSocket UI or check logs to monitor progress.
+
+---
+
+## 📡 Real-Time Updates
+
+The example uses WebSocket to push workflow state changes to the browser in real-time:
+
+```java
+private void broadcastStep(String orderId, String step, String status, String message) {
+    String json = String.format(
+        "{\"orderId\":\"%s\",\"step\":\"%s\",\"status\":\"%s\",\"message\":\"%s\"}",
+        orderId, step, status, message
+    );
+    webSocket.broadcast(json);
+}
+```
+
+The UI connects to `ws://localhost:8080/ws/orders` and displays each step as it executes.
+
+---
+
+## 🛠 Troubleshooting
+
+- **WebSocket not connecting**: Check browser console for errors. Ensure you're accessing via `http://localhost:8080` (not a different host/port).
+
+- **Workflow not starting**: Check Quarkus logs for exceptions. Verify the order ID is being sent correctly in the POST request.
+
+- **No compensation on failure**: Ensure you're using one of the test order IDs (ORDER#001, ORDER#002, ORDER#003). Other IDs will succeed.
+
+- **Port already in use**: Change the port in `application.properties`: `quarkus.http.port=8081`
+
+---
+
+## 📚 Learn More
+
+This example demonstrates core concepts for building resilient distributed systems:
+
+- **Saga Pattern**: Coordinating distributed transactions without 2PC
+- **Compensation Logic**: Undoing completed operations when later steps fail
+- **Error Handling**: Different strategies for catching and handling errors
+- **Real-Time Monitoring**: Using WebSocket for live workflow visualization
+
+### Key Takeaways
+
+1. **Explicit Compensation**: Each forward operation has a corresponding compensation function
+2. **Cascading Rollback**: Later compensations call earlier ones to maintain consistency
+3. **Type-Safe Workflows**: Pure Java records and enums ensure compile-time safety
+4. **Declarative Error Handling**: Try-catch blocks in the workflow DSL, not scattered in business logic
+
+---
+
+## 🎓 Extend This Example
+
+Ideas for learning and experimentation:
+
+- Add a fourth step (e.g., "Send Confirmation Email") with its own compensation
+- Implement retry logic before compensation (e.g., retry payment 3 times)
+- Add a database to persist order state across restarts
+- Create a dashboard showing all orders and their current status
+- Implement partial compensation (e.g., partial refund instead of full cancellation)
+
+---
+
+## 📖 Documentation
+
+- **Quarkus Flow**: [https://docs.quarkiverse.io/quarkus-flow/dev/](https://docs.quarkiverse.io/quarkus-flow/dev/)
+- **CNCF Serverless Workflow**: [https://serverlessworkflow.io/](https://serverlessworkflow.io/)
+- **Saga Pattern**: [https://microservices.io/patterns/data/saga.html](https://microservices.io/patterns/data/saga.html)
+
+Have fun building resilient workflows with Quarkus Flow! 🎉
\ No newline at end of file
diff --git a/examples/order-fulfillment-compensation/pom.xml b/examples/order-fulfillment-compensation/pom.xml
new file mode 100644
index 000000000..05f7bfef3
--- /dev/null
+++ b/examples/order-fulfillment-compensation/pom.xml
@@ -0,0 +1,153 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<project xmlns="http://maven.apache.org/POM/4.0.0" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:schemaLocation="http://maven.apache.org/POM/4.0.0 https://maven.apache.org/xsd/maven-4.0.0.xsd">
+    <modelVersion>4.0.0</modelVersion>
+    <groupId>org.acme</groupId>
+    <artifactId>order-fulfillment-compensation</artifactId>
+    <version>1.0.0-SNAPSHOT</version>
+    <name>Quarkus Flow :: Examples :: Order Fulfillment Compensation</name>
+
+    <properties>
+        <compiler-plugin.version>3.15.0</compiler-plugin.version>
+        <maven.compiler.release>17</maven.compiler.release>
+        <project.build.sourceEncoding>UTF-8</project.build.sourceEncoding>
+        <project.reporting.outputEncoding>UTF-8</project.reporting.outputEncoding>
+        <quarkus.platform.artifact-id>quarkus-bom</quarkus.platform.artifact-id>
+        <quarkus.platform.group-id>io.quarkus.platform</quarkus.platform.group-id>
+        <quarkus.platform.version>3.34.6</quarkus.platform.version>
+        <skipITs>true</skipITs>
+        <surefire-plugin.version>3.5.5</surefire-plugin.version>
+        <quarkus.flow.version>1.0.0-SNAPSHOT</quarkus.flow.version>
+    </properties>
+
+    <dependencyManagement>
+        <dependencies>
+            <dependency>
+                <groupId>${quarkus.platform.group-id}</groupId>
+                <artifactId>${quarkus.platform.artifact-id}</artifactId>
+                <version>${quarkus.platform.version}</version>
+                <type>pom</type>
+                <scope>import</scope>
+            </dependency>
+        </dependencies>
+    </dependencyManagement>
+
+    <dependencies>
+        <dependency>
+            <groupId>io.quarkus</groupId>
+            <artifactId>quarkus-arc</artifactId>
+        </dependency>
+        <dependency>
+            <groupId>io.quarkus</groupId>
+            <artifactId>quarkus-rest-jackson</artifactId>
+        </dependency>
+        <dependency>
+            <groupId>io.quarkus</groupId>
+            <artifactId>quarkus-junit</artifactId>
+            <scope>test</scope>
+        </dependency>
+        <dependency>
+            <groupId>io.rest-assured</groupId>
+            <artifactId>rest-assured</artifactId>
+            <scope>test</scope>
+        </dependency>
+        <dependency>
+            <groupId>io.quarkiverse.flow</groupId>
+            <artifactId>quarkus-flow</artifactId>
+            <version>${quarkus.flow.version}</version>
+        </dependency>
+        <dependency>
+            <groupId>io.quarkus</groupId>
+            <artifactId>quarkus-websockets</artifactId>
+        </dependency>
+
+        <!-- Can be ignored / Used to run Quarkus Flow project in parallel -->
+        <!-- On real use cases this can be safely removed -->
+        <dependency>
+            <groupId>io.quarkiverse.flow</groupId>
+            <artifactId>quarkus-flow-deployment</artifactId>
+            <version>${quarkus.flow.version}</version>
+            <scope>test</scope>
+        </dependency>
+        <dependency>
+            <groupId>io.quarkiverse.flow</groupId>
+            <artifactId>quarkus-flow-mvstore-deployment</artifactId>
+            <version>${quarkus.flow.version}</version>
+            <scope>test</scope>
+        </dependency>
+    </dependencies>
+
+    <build>
+        <plugins>
+            <plugin>
+                <groupId>${quarkus.platform.group-id}</groupId>
+                <artifactId>quarkus-maven-plugin</artifactId>
+                <version>${quarkus.platform.version}</version>
+                <extensions>true</extensions>
+                <executions>
+                    <execution>
+                        <goals>
+                            <goal>build</goal>
+                            <goal>generate-code</goal>
+                            <goal>generate-code-tests</goal>
+                            <goal>native-image-agent</goal>
+                        </goals>
+                    </execution>
+                </executions>
+            </plugin>
+            <plugin>
+                <artifactId>maven-compiler-plugin</artifactId>
+                <version>${compiler-plugin.version}</version>
+                <configuration>
+                    <parameters>true</parameters>
+                </configuration>
+            </plugin>
+            <plugin>
+                <artifactId>maven-surefire-plugin</artifactId>
+                <version>${surefire-plugin.version}</version>
+                <configuration>
+                    <argLine>--add-opens java.base/java.lang=ALL-UNNAMED</argLine>
+                    <systemPropertyVariables>
+                        <java.util.logging.manager>org.jboss.logmanager.LogManager</java.util.logging.manager>
+                        <maven.home>${maven.home}</maven.home>
+                    </systemPropertyVariables>
+                </configuration>
+            </plugin>
+            <plugin>
+                <artifactId>maven-failsafe-plugin</artifactId>
+                <version>${surefire-plugin.version}</version>
+                <executions>
+                    <execution>
+                        <goals>
+                            <goal>integration-test</goal>
+                            <goal>verify</goal>
+                        </goals>
+                    </execution>
+                </executions>
+                <configuration>
+                    <argLine>--add-opens java.base/java.lang=ALL-UNNAMED</argLine>
+                    <systemPropertyVariables>
+                        <native.image.path>${project.build.directory}/${project.build.finalName}-runner</native.image.path>
+                        <java.util.logging.manager>org.jboss.logmanager.LogManager</java.util.logging.manager>
+                        <maven.home>${maven.home}</maven.home>
+                    </systemPropertyVariables>
+                </configuration>
+            </plugin>
+        </plugins>
+    </build>
+
+    <profiles>
+        <profile>
+            <id>native</id>
+            <activation>
+                <property>
+                    <name>native</name>
+                </property>
+            </activation>
+            <properties>
+                <quarkus.package.jar.enabled>false</quarkus.package.jar.enabled>
+                <skipITs>false</skipITs>
+                <quarkus.native.enabled>true</quarkus.native.enabled>
+            </properties>
+        </profile>
+    </profiles>
+</project>
diff --git a/examples/order-fulfillment-compensation/src/main/java/org/acme/flow/OrderFulfillmentWorkflow.java b/examples/order-fulfillment-compensation/src/main/java/org/acme/flow/OrderFulfillmentWorkflow.java
new file mode 100644
index 000000000..8ebe7c814
--- /dev/null
+++ b/examples/order-fulfillment-compensation/src/main/java/org/acme/flow/OrderFulfillmentWorkflow.java
@@ -0,0 +1,151 @@
+package org.acme.flow;
+
+import io.quarkiverse.flow.Flow;
+import io.quarkus.runtime.annotations.RegisterForReflection;
+import io.serverlessworkflow.api.types.FlowDirectiveEnum;
+import io.serverlessworkflow.api.types.Workflow;
+import io.serverlessworkflow.fluent.func.FuncWorkflowBuilder;
+import io.serverlessworkflow.fluent.func.dsl.FuncCallStep;
+import io.serverlessworkflow.impl.WorkflowError;
+import io.serverlessworkflow.impl.WorkflowException;
+import jakarta.enterprise.context.ApplicationScoped;
+import jakarta.inject.Inject;
+import org.slf4j.Logger;
+import org.slf4j.LoggerFactory;
+
+import static io.serverlessworkflow.fluent.func.dsl.FuncDSL.function;
+import static io.serverlessworkflow.fluent.func.dsl.FuncDSL.tasks;
+import static io.serverlessworkflow.fluent.func.dsl.FuncDSL.tryCatch;
+
+@ApplicationScoped
+public class OrderFulfillmentWorkflow extends Flow {
+
+    private static final Logger log = LoggerFactory.getLogger(OrderFulfillmentWorkflow.class.getName());
+
+    private static final String STOCK_ORDER_ERROR = "ERR_001";
+    private static final String PAYMENT_PROCESSING_ERROR = "ERR_002";
+    private static final String SHIPPING_ERROR = "ERR_003";
+
+    private static final String ORDER_001 = "ORDER#001";
+    private static final String ORDER_002 = "ORDER#002";
+    private static final String ORDER_003 = "ORDER#003";
+    private static final String END_FLOW = "endFlow";
+
+    @Inject
+    WorkflowWebSocket webSocket;
+
+    @Override
+    public Workflow descriptor() {
+
+        FuncCallStep<OrderStep, WorkflowOutput> cancelStock = function("cancelStock",
+                (OrderStep o) -> cancelReservation(o.orderId()));
+        FuncCallStep<OrderStep, OrderStep> cancelPayment = function("cancelPayment",
+                (OrderStep o) -> cancelPayment(o.orderId()));
+
+        return FuncWorkflowBuilder.workflow("order-fulfillment", "examples")
+                .tasks(
+                        tryCatch(
+                                "tryStockReservation",
+                                t -> t.tryCatch(function("stockReservation", this::reserveStock))
+                                        .catchError(
+                                                err -> err.type(STOCK_ORDER_ERROR),
+                                                function("notifyStockFailure", this::notifyStockFailure)
+                                                        .then(FlowDirectiveEnum.END))),
+                        tryCatch(
+                                "tryPaymentProcessing",
+                                t -> t.tryCatch(function("paymentProcessing", this::processPayment))
+                                        .catchWhen(
+                                                "${ .status == 503 }",
+                                                cancelStock.then(FlowDirectiveEnum.END))),
+                        tryCatch(
+                                "tryShipping",
+                                t -> t.tryCatch(function("scheduleShipping", this::scheduleShipping))
+                                        .catchType(
+                                                SHIPPING_ERROR,
+                                                tasks(
+                                                        cancelPayment,
+                                                        cancelStock))))
+                .build();
+    }
+
+    private OrderStep reserveStock(String order) {
+        log.info("Reserving stock for order: {}", order);
+        broadcastStep(order, "stockReservation", "processing", "Reserving stock...");
+        waitMs(500);
+        if (order.equals(ORDER_001)) {
+            broadcastStep(order, "stockReservation", "failed", "Stock reservation failed - Out of stock");
+            throw new WorkflowException(WorkflowError.error(STOCK_ORDER_ERROR, 409).build());
+        }
+        broadcastStep(order, "stockReservation", "completed", "Stock reserved successfully");
+        return new OrderStep(order, "reserved");
+    }
+
+    private OrderStep processPayment(OrderStep order) {
+        log.info("Processing payment for order: {}", order);
+        broadcastStep(order.orderId(), "paymentProcessing", "processing", "Processing payment...");
+        waitMs(800);
+        if (ORDER_002.equals(order.orderId())) {
+            broadcastStep(order.orderId(), "paymentProcessing", "failed", "Payment processing failed - Service unavailable");
+            throw new WorkflowException(WorkflowError.error(PAYMENT_PROCESSING_ERROR, 503).build());
+        }
+        broadcastStep(order.orderId(), "paymentProcessing", "completed", "Payment processed successfully");
+        return new OrderStep(order.orderId(), "paid");
+    }
+
+    private OrderStep scheduleShipping(OrderStep order) {
+        log.info("Scheduling shipping for order: {}", order);
+        broadcastStep(order.orderId(), "shipping", "processing", "Scheduling shipping...");
+        waitMs(800);
+        if (ORDER_003.equals(order.orderId())) {
+            broadcastStep(order.orderId(), "shipping", "failed", "Shipping failed - Carrier unavailable");
+            throw new WorkflowException(WorkflowError.error(SHIPPING_ERROR, 500).build());
+        }
+        broadcastStep(order.orderId(), "shipping", "completed", "Shipping scheduled successfully");
+        return new OrderStep(order.orderId(), "shipping");
+    }
+
+    private WorkflowOutput notifyStockFailure(String order) {
+        log.info("Stock reservation failed for order: {}, there is nothing to compensate", order);
+        broadcastStep(order, "compensation", "failed", "Stock unavailable — no reservation to cancel");
+        return new WorkflowOutput("error");
+    }
+
+    private WorkflowOutput cancelReservation(String order) {
+        log.info("Cancelling stock reservation for order: {}", order);
+        broadcastStep(order, "compensation", "processing", "Cancelling stock reservation...");
+        waitMs(400);
+        broadcastStep(order, "compensation", "completed", "Stock reservation cancelled");
+        return new WorkflowOutput("error");
+    }
+
+    private OrderStep cancelPayment(String order) {
+        log.info("Cancel payment for order: {}", order);
+        broadcastStep(order, "compensation", "processing", "Cancelling payment...");
+        waitMs(400);
+        broadcastStep(order, "compensation", "completed", "Payment cancelled");
+        return new OrderStep(order, "error");
+    }
+
+    private void broadcastStep(String orderId, String step, String status, String message) {
+        String json = String.format(
+                "{\"orderId\":\"%s\",\"step\":\"%s\",\"status\":\"%s\",\"message\":\"%s\"}",
+                orderId, step, status, message);
+        webSocket.broadcast(json);
+    }
+
+    private static void waitMs(int ms) {
+        try {
+            Thread.sleep(ms);
+        } catch (InterruptedException e) {
+            Thread.currentThread().interrupt();
+        }
+    }
+
+    @RegisterForReflection
+    public record OrderStep(String orderId, String status) {
+    }
+
+    @RegisterForReflection
+    public record WorkflowOutput(String status) {
+    }
+}
diff --git a/examples/order-fulfillment-compensation/src/main/java/org/acme/flow/OrderResource.java b/examples/order-fulfillment-compensation/src/main/java/org/acme/flow/OrderResource.java
new file mode 100644
index 000000000..37d30636b
--- /dev/null
+++ b/examples/order-fulfillment-compensation/src/main/java/org/acme/flow/OrderResource.java
@@ -0,0 +1,78 @@
+package org.acme.flow;
+
+import io.serverlessworkflow.impl.WorkflowInstance;
+import io.serverlessworkflow.impl.WorkflowModel;
+import jakarta.enterprise.context.ApplicationScoped;
+import jakarta.inject.Inject;
+import jakarta.ws.rs.POST;
+import jakarta.ws.rs.Path;
+import jakarta.ws.rs.core.Response;
+import org.slf4j.Logger;
+import org.slf4j.LoggerFactory;
+
+import java.util.concurrent.CompletableFuture;
+
+@Path("/api")
+@ApplicationScoped
+public class OrderResource {
+
+    private static final Logger log = LoggerFactory.getLogger(OrderResource.class);
+
+    @Inject
+    OrderFulfillmentWorkflow workflow;
+
+    @Inject
+    WorkflowWebSocket webSocket;
+
+    @POST
+    @Path("/orders")
+    public Response order(OrderRequest request) {
+
+        String orderId = request.orderId();
+
+        // Broadcast order started
+        broadcast("{\"orderId\":\"%s\",\"status\":\"started\",\"message\":\"Order processing started\"}", orderId);
+
+        try {
+            WorkflowInstance instance = workflow.instance(orderId);
+
+            CompletableFuture<WorkflowModel> future = instance.start();
+
+            future.thenAccept(model -> {
+                var output = model.as(OrderFulfillmentWorkflow.WorkflowOutput.class).orElseThrow();
+                if ("error".equals(output.status())) {
+                    broadcast(
+                            "{\"orderId\":\"%s\",\"status\":\"failed\",\"message\":\"Compensation completed: Order cancelled\"}",
+                            orderId);
+                } else {
+                    broadcast("{\"orderId\":\"%s\",\"status\":\"completed\",\"message\":\"Order fulfilled successfully\"}",
+                            orderId);
+                }
+
+            }).exceptionally(throwable -> {
+                log.error("Order failed: {}", orderId, throwable);
+                broadcast("{\"orderId\":\"%s\",\"status\":\"failed\",\"message\":\"Compensation completed: Order cancelled\"}",
+                        orderId);
+                return null;
+            });
+
+            return Response.accepted()
+                    .header("Location", "/orders/" + orderId)
+                    .build();
+        } catch (Exception e) {
+            log.error("Failed to start workflow for order: {}", orderId, e);
+            broadcast("{\"orderId\":\"%s\",\"status\":\"failed\",\"message\":\"Failed to start order processing\"}", orderId);
+            return Response.serverError().build();
+        }
+    }
+
+    private void broadcast(String format, String orderId) {
+        webSocket.broadcast(String.format(
+                format,
+                orderId));
+    }
+
+    public record OrderRequest(String orderId) {
+    }
+
+}
\ No newline at end of file
diff --git a/examples/order-fulfillment-compensation/src/main/java/org/acme/flow/WorkflowWebSocket.java b/examples/order-fulfillment-compensation/src/main/java/org/acme/flow/WorkflowWebSocket.java
new file mode 100644
index 000000000..c827badf8
--- /dev/null
+++ b/examples/order-fulfillment-compensation/src/main/java/org/acme/flow/WorkflowWebSocket.java
@@ -0,0 +1,46 @@
+package org.acme.flow;
+
+import io.quarkus.logging.Log;
+import jakarta.inject.Singleton;
+import jakarta.websocket.OnClose;
+import jakarta.websocket.OnError;
+import jakarta.websocket.OnOpen;
+import jakarta.websocket.Session;
+import jakarta.websocket.server.ServerEndpoint;
+import java.util.Map;
+import java.util.concurrent.ConcurrentHashMap;
+
+@ServerEndpoint("/order-events")
+@Singleton
+public class WorkflowWebSocket {
+
+    private final Map<String, Session> sessions = new ConcurrentHashMap<>();
+
+    @OnOpen
+    public void onOpen(Session session) {
+        sessions.put(session.getId(), session);
+        Log.info("WebSocket connection opened: " + session.getId());
+    }
+
+    @OnClose
+    public void onClose(Session session) {
+        sessions.remove(session.getId());
+        Log.info("WebSocket connection closed: " + session.getId());
+    }
+
+    @OnError
+    public void onError(Session session, Throwable throwable) {
+        Log.error("WebSocket error for session " + session.getId(), throwable);
+        sessions.remove(session.getId());
+    }
+
+    public void broadcast(String message) {
+        sessions.values().forEach(session -> {
+            session.getAsyncRemote().sendText(message, result -> {
+                if (result.getException() != null) {
+                    Log.error("Unable to send message to session " + session.getId(), result.getException());
+                }
+            });
+        });
+    }
+}
diff --git a/examples/order-fulfillment-compensation/src/main/resources/META-INF/resources/index.html b/examples/order-fulfillment-compensation/src/main/resources/META-INF/resources/index.html
new file mode 100644
index 000000000..81c8b1b7b
--- /dev/null
+++ b/examples/order-fulfillment-compensation/src/main/resources/META-INF/resources/index.html
@@ -0,0 +1,681 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Order Fulfillment Workflow - Quarkus Flow</title>
+    <script src="https://cdn.tailwindcss.com"></script>
+    <script>
+        tailwind.config = {
+            theme: {
+                extend: {
+                    colors: {
+                        'quarkus-blue': '#4695EB',
+                        'quarkus-dark-blue': '#0d1b2a',
+                        'quarkus-red': '#FF004A',
+                        'quarkus-dark-red': '#c20030',
+                    }
+                }
+            }
+        }
+    </script>
+    <style>
+        .order-card {
+            transition: all 0.3s ease;
+        }
+
+        .order-card:hover {
+            transform: translateY(-4px);
+            box-shadow: 0 10px 25px rgba(70, 149, 235, 0.2);
+        }
+
+        .loading {
+            animation: spin 1s linear infinite;
+        }
+
+        @keyframes spin {
+            from {
+                transform: rotate(0deg);
+            }
+            to {
+                transform: rotate(360deg);
+            }
+        }
+
+        .status-started {
+            background-color: #f59e0b;
+        }
+
+        .status-completed {
+            background-color: #10b981;
+        }
+
+        .status-failed {
+            background-color: #ef4444;
+        }
+
+        .status-idle {
+            background-color: #6b7280;
+        }
+
+        @keyframes pulse-glow {
+            0%, 100% {
+                box-shadow: 0 0 20px rgba(70, 149, 235, 0.4);
+            }
+            50% {
+                box-shadow: 0 0 40px rgba(70, 149, 235, 0.8);
+            }
+        }
+
+        .processing {
+            animation: pulse-glow 2s ease-in-out infinite;
+        }
+
+        .step-idle {
+            background-color: #374151;
+            border-color: #4b5563;
+        }
+
+        .step-processing {
+            background-color: #92400e;
+            border-color: #f59e0b;
+            animation: pulse 1.5s ease-in-out infinite;
+        }
+
+        .step-completed {
+            background-color: #065f46;
+            border-color: #10b981;
+        }
+
+        .step-failed {
+            background-color: #7f1d1d;
+            border-color: #ef4444;
+        }
+
+        @keyframes pulse {
+            0%, 100% {
+                opacity: 1;
+            }
+            50% {
+                opacity: 0.7;
+            }
+        }
+
+        .progress-line {
+            height: 2px;
+            background-color: #4b5563;
+            position: relative;
+            overflow: hidden;
+        }
+
+        .progress-line::after {
+            content: '';
+            position: absolute;
+            top: 0;
+            left: 0;
+            height: 100%;
+            width: 0;
+            background-color: #10b981;
+            transition: width 0.5s ease;
+        }
+
+        .progress-line.active::after {
+            width: 100%;
+        }
+    </style>
+</head>
+<body class="bg-gradient-to-br from-quarkus-dark-blue via-gray-900 to-black min-h-screen text-white">
+<div class="container mx-auto px-4 py-8">
+    <!-- Header -->
+    <header class="text-center mb-12">
+        <h1 class="text-5xl font-bold mb-4 bg-gradient-to-r from-quarkus-blue to-quarkus-red bg-clip-text text-transparent">
+            Order Fulfillment Workflow
+        </h1>
+        <p class="text-xl text-gray-300">Compensation Pattern Demo - Live Workflow Visualization</p>
+        <p class="text-sm text-gray-400 mt-2">Watch each step execute in real-time with automatic compensation on failures</p>
+    </header>
+
+    <!-- Info Banner -->
+    <div class="mb-8 p-6 rounded-xl bg-gradient-to-r from-blue-900/50 to-indigo-900/50 border-2 border-blue-500">
+        <div class="flex items-start space-x-4">
+            <div class="flex-shrink-0">
+                <svg class="w-8 h-8 text-blue-400" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
+                          d="M13 16h-1v-4h-1m1-4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z"></path>
+                </svg>
+            </div>
+            <div class="flex-1">
+                <div class="flex items-center justify-between mb-2">
+                    <h3 class="text-xl font-bold text-white">How It Works</h3>
+                    <a href="workflow-diagram.html" target="_blank" 
+                       class="px-4 py-2 bg-blue-600 hover:bg-blue-700 text-white text-sm font-semibold rounded-lg transition duration-200 flex items-center space-x-2">
+                        <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" 
+                                  d="M9 19v-6a2 2 0 00-2-2H5a2 2 0 00-2 2v6a2 2 0 002 2h2a2 2 0 002-2zm0 0V9a2 2 0 012-2h2a2 2 0 012 2v10m-6 0a2 2 0 002 2h2a2 2 0 002-2m0 0V5a2 2 0 012-2h2a2 2 0 012 2v14a2 2 0 01-2 2h-2a2 2 0 01-2-2z"></path>
+                        </svg>
+                        <span>View Workflow Diagram</span>
+                    </a>
+                </div>
+                <ul class="text-sm text-gray-300 space-y-1">
+                    <li>• <strong>ORDER#001</strong> - Fails at stock reservation (triggers compensation)</li>
+                    <li>• <strong>ORDER#002</strong> - Fails at payment processing (triggers compensation)</li>
+                    <li>• <strong>ORDER#003</strong> - Fails at shipping (triggers compensation)</li>
+                    <li>• <strong>ORDER#004</strong> - Completes successfully (no errors)</li>
+                </ul>
+            </div>
+        </div>
+    </div>
+
+    <!-- Order Cards Grid -->
+    <div class="grid grid-cols-1 md:grid-cols-4 gap-6 mb-8">
+        <!-- Order 1 -->
+        <div id="order-card-1" class="order-card bg-gray-800 rounded-xl p-6 border border-gray-700">
+            <div class="flex items-center justify-between mb-4">
+                <h3 class="text-xl font-semibold text-quarkus-blue">ORDER#001</h3>
+                <div id="status-indicator-1" class="w-3 h-3 rounded-full status-idle"></div>
+            </div>
+            <p class="text-gray-400 text-sm mb-4">Stock Reservation Failure</p>
+            
+            <!-- Live Workflow Progress -->
+            <div id="workflow-progress-1" class="mb-4 space-y-2 hidden">
+                <div class="flex items-center space-x-2">
+                    <div id="step-stock-1" class="step-idle w-8 h-8 rounded-full border-2 flex items-center justify-center text-xs font-bold">1</div>
+                    <div class="flex-1">
+                        <div class="text-xs font-semibold text-gray-300">Stock Reservation</div>
+                        <div id="step-stock-msg-1" class="text-xs text-gray-500">Waiting...</div>
+                    </div>
+                </div>
+                <div class="progress-line ml-4" id="progress-1-2"></div>
+                
+                <div class="flex items-center space-x-2">
+                    <div id="step-payment-1" class="step-idle w-8 h-8 rounded-full border-2 flex items-center justify-center text-xs font-bold">2</div>
+                    <div class="flex-1">
+                        <div class="text-xs font-semibold text-gray-300">Payment Processing</div>
+                        <div id="step-payment-msg-1" class="text-xs text-gray-500">Waiting...</div>
+                    </div>
+                </div>
+                <div class="progress-line ml-4" id="progress-1-3"></div>
+                
+                <div class="flex items-center space-x-2">
+                    <div id="step-shipping-1" class="step-idle w-8 h-8 rounded-full border-2 flex items-center justify-center text-xs font-bold">3</div>
+                    <div class="flex-1">
+                        <div class="text-xs font-semibold text-gray-300">Shipping</div>
+                        <div id="step-shipping-msg-1" class="text-xs text-gray-500">Waiting...</div>
+                    </div>
+                </div>
+                
+                <div id="compensation-section-1" class="mt-3 p-2 bg-yellow-900/20 border border-yellow-600 rounded hidden">
+                    <div class="flex items-start space-x-2">
+                        <svg class="w-4 h-4 text-yellow-400 mt-0.5 flex-shrink-0" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 9v2m0 4h.01m-6.938 4h13.856c1.54 0 2.502-1.667 1.732-3L13.732 4c-.77-1.333-2.694-1.333-3.464 0L3.34 16c-.77 1.333.192 3 1.732 3z"></path>
+                        </svg>
+                        <div class="flex-1">
+                            <div class="text-xs font-semibold text-yellow-400 mb-1">Compensation</div>
+                            <div id="compensation-log-1" class="space-y-0.5"></div>
+                        </div>
+                    </div>
+                </div>
+            </div>
+            
+            <div id="status-message-1" class="mb-4 p-3 rounded-lg bg-gray-900 text-sm text-gray-300 min-h-[60px]">
+                <span class="text-gray-500">Ready to process...</span>
+            </div>
+            <button onclick="submitOrder('ORDER#001', 1)" id="btn-1"
+                    class="w-full bg-quarkus-blue hover:bg-blue-600 text-white font-semibold py-3 px-4 rounded-lg transition duration-200 flex items-center justify-center">
+                <span class="button-text">Submit Order</span>
+                <svg class="loading w-5 h-5 ml-2 hidden" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
+                          d="M4 4v5h.582m15.356 2A8.001 8.001 0 004.582 9m0 0H9m11 11v-5h-.581m0 0a8.003 8.003 0 01-15.357-2m15.357 2H15"></path>
+                </svg>
+            </button>
+        </div>
+
+        <!-- Order 2 -->
+        <div id="order-card-2" class="order-card bg-gray-800 rounded-xl p-6 border border-gray-700">
+            <div class="flex items-center justify-between mb-4">
+                <h3 class="text-xl font-semibold text-yellow-400">ORDER#002</h3>
+                <div id="status-indicator-2" class="w-3 h-3 rounded-full status-idle"></div>
+            </div>
+            <p class="text-gray-400 text-sm mb-4">Payment Processing Failure</p>
+            
+            <!-- Live Workflow Progress -->
+            <div id="workflow-progress-2" class="mb-4 space-y-2 hidden">
+                <div class="flex items-center space-x-2">
+                    <div id="step-stock-2" class="step-idle w-8 h-8 rounded-full border-2 flex items-center justify-center text-xs font-bold">1</div>
+                    <div class="flex-1">
+                        <div class="text-xs font-semibold text-gray-300">Stock Reservation</div>
+                        <div id="step-stock-msg-2" class="text-xs text-gray-500">Waiting...</div>
+                    </div>
+                </div>
+                <div class="progress-line ml-4" id="progress-2-2"></div>
+                
+                <div class="flex items-center space-x-2">
+                    <div id="step-payment-2" class="step-idle w-8 h-8 rounded-full border-2 flex items-center justify-center text-xs font-bold">2</div>
+                    <div class="flex-1">
+                        <div class="text-xs font-semibold text-gray-300">Payment Processing</div>
+                        <div id="step-payment-msg-2" class="text-xs text-gray-500">Waiting...</div>
+                    </div>
+                </div>
+                <div class="progress-line ml-4" id="progress-2-3"></div>
+                
+                <div class="flex items-center space-x-2">
+                    <div id="step-shipping-2" class="step-idle w-8 h-8 rounded-full border-2 flex items-center justify-center text-xs font-bold">3</div>
+                    <div class="flex-1">
+                        <div class="text-xs font-semibold text-gray-300">Shipping</div>
+                        <div id="step-shipping-msg-2" class="text-xs text-gray-500">Waiting...</div>
+                    </div>
+                </div>
+                
+                <div id="compensation-section-2" class="mt-3 p-2 bg-yellow-900/20 border border-yellow-600 rounded hidden">
+                    <div class="flex items-start space-x-2">
+                        <svg class="w-4 h-4 text-yellow-400 mt-0.5 flex-shrink-0" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 9v2m0 4h.01m-6.938 4h13.856c1.54 0 2.502-1.667 1.732-3L13.732 4c-.77-1.333-2.694-1.333-3.464 0L3.34 16c-.77 1.333.192 3 1.732 3z"></path>
+                        </svg>
+                        <div class="flex-1">
+                            <div class="text-xs font-semibold text-yellow-400 mb-1">Compensation</div>
+                            <div id="compensation-log-2" class="space-y-0.5"></div>
+                        </div>
+                    </div>
+                </div>
+            </div>
+            
+            <div id="status-message-2" class="mb-4 p-3 rounded-lg bg-gray-900 text-sm text-gray-300 min-h-[60px]">
+                <span class="text-gray-500">Ready to process...</span>
+            </div>
+            <button onclick="submitOrder('ORDER#002', 2)" id="btn-2"
+                    class="w-full bg-yellow-500 hover:bg-yellow-600 text-white font-semibold py-3 px-4 rounded-lg transition duration-200 flex items-center justify-center">
+                <span class="button-text">Submit Order</span>
+                <svg class="loading w-5 h-5 ml-2 hidden" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
+                          d="M4 4v5h.582m15.356 2A8.001 8.001 0 004.582 9m0 0H9m11 11v-5h-.581m0 0a8.003 8.003 0 01-15.357-2m15.357 2H15"></path>
+                </svg>
+            </button>
+        </div>
+
+        <!-- Order 3 -->
+        <div id="order-card-3" class="order-card bg-gray-800 rounded-xl p-6 border border-gray-700">
+            <div class="flex items-center justify-between mb-4">
+                <h3 class="text-xl font-semibold text-quarkus-red">ORDER#003</h3>
+                <div id="status-indicator-3" class="w-3 h-3 rounded-full status-idle"></div>
+            </div>
+            <p class="text-gray-400 text-sm mb-4">Shipping Failure</p>
+            
+            <!-- Live Workflow Progress -->
+            <div id="workflow-progress-3" class="mb-4 space-y-2 hidden">
+                <div class="flex items-center space-x-2">
+                    <div id="step-stock-3" class="step-idle w-8 h-8 rounded-full border-2 flex items-center justify-center text-xs font-bold">1</div>
+                    <div class="flex-1">
+                        <div class="text-xs font-semibold text-gray-300">Stock Reservation</div>
+                        <div id="step-stock-msg-3" class="text-xs text-gray-500">Waiting...</div>
+                    </div>
+                </div>
+                <div class="progress-line ml-4" id="progress-3-2"></div>
+                
+                <div class="flex items-center space-x-2">
+                    <div id="step-payment-3" class="step-idle w-8 h-8 rounded-full border-2 flex items-center justify-center text-xs font-bold">2</div>
+                    <div class="flex-1">
+                        <div class="text-xs font-semibold text-gray-300">Payment Processing</div>
+                        <div id="step-payment-msg-3" class="text-xs text-gray-500">Waiting...</div>
+                    </div>
+                </div>
+                <div class="progress-line ml-4" id="progress-3-3"></div>
+                
+                <div class="flex items-center space-x-2">
+                    <div id="step-shipping-3" class="step-idle w-8 h-8 rounded-full border-2 flex items-center justify-center text-xs font-bold">3</div>
+                    <div class="flex-1">
+                        <div class="text-xs font-semibold text-gray-300">Shipping</div>
+                        <div id="step-shipping-msg-3" class="text-xs text-gray-500">Waiting...</div>
+                    </div>
+                </div>
+                
+                <div id="compensation-section-3" class="mt-3 p-2 bg-yellow-900/20 border border-yellow-600 rounded hidden">
+                    <div class="flex items-start space-x-2">
+                        <svg class="w-4 h-4 text-yellow-400 mt-0.5 flex-shrink-0" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 9v2m0 4h.01m-6.938 4h13.856c1.54 0 2.502-1.667 1.732-3L13.732 4c-.77-1.333-2.694-1.333-3.464 0L3.34 16c-.77 1.333.192 3 1.732 3z"></path>
+                        </svg>
+                        <div class="flex-1">
+                            <div class="text-xs font-semibold text-yellow-400 mb-1">Compensation</div>
+                            <div id="compensation-log-3" class="space-y-0.5"></div>
+                        </div>
+                    </div>
+                </div>
+            </div>
+            
+            <div id="status-message-3" class="mb-4 p-3 rounded-lg bg-gray-900 text-sm text-gray-300 min-h-[60px]">
+                <span class="text-gray-500">Ready to process...</span>
+            </div>
+            <button onclick="submitOrder('ORDER#003', 3)" id="btn-3"
+                    class="w-full bg-quarkus-red hover:bg-quarkus-dark-red text-white font-semibold py-3 px-4 rounded-lg transition duration-200 flex items-center justify-center">
+                <span class="button-text">Submit Order</span>
+                <svg class="loading w-5 h-5 ml-2 hidden" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
+                          d="M4 4v5h.582m15.356 2A8.001 8.001 0 004.582 9m0 0H9m11 11v-5h-.581m0 0a8.003 8.003 0 01-15.357-2m15.357 2H15"></path>
+                </svg>
+            </button>
+        </div>
+
+        <!-- Order 4 -->
+        <div id="order-card-4" class="order-card bg-gray-800 rounded-xl p-6 border border-gray-700">
+            <div class="flex items-center justify-between mb-4">
+                <h3 class="text-xl font-semibold text-green-400">ORDER#004</h3>
+                <div id="status-indicator-4" class="w-3 h-3 rounded-full status-idle"></div>
+            </div>
+            <p class="text-gray-400 text-sm mb-4">Successful Order Completion</p>
+
+            <!-- Live Workflow Progress -->
+            <div id="workflow-progress-4" class="mb-4 space-y-2 hidden">
+                <div class="flex items-center space-x-2">
+                    <div id="step-stock-4" class="step-idle w-8 h-8 rounded-full border-2 flex items-center justify-center text-xs font-bold">1</div>
+                    <div class="flex-1">
+                        <div class="text-xs font-semibold text-gray-300">Stock Reservation</div>
+                        <div id="step-stock-msg-4" class="text-xs text-gray-500">Waiting...</div>
+                    </div>
+                </div>
+                <div class="progress-line ml-4" id="progress-4-2"></div>
+
+                <div class="flex items-center space-x-2">
+                    <div id="step-payment-4" class="step-idle w-8 h-8 rounded-full border-2 flex items-center justify-center text-xs font-bold">2</div>
+                    <div class="flex-1">
+                        <div class="text-xs font-semibold text-gray-300">Payment Processing</div>
+                        <div id="step-payment-msg-4" class="text-xs text-gray-500">Waiting...</div>
+                    </div>
+                </div>
+                <div class="progress-line ml-4" id="progress-4-3"></div>
+
+                <div class="flex items-center space-x-2">
+                    <div id="step-shipping-4" class="step-idle w-8 h-8 rounded-full border-2 flex items-center justify-center text-xs font-bold">3</div>
+                    <div class="flex-1">
+                        <div class="text-xs font-semibold text-gray-300">Shipping</div>
+                        <div id="step-shipping-msg-4" class="text-xs text-gray-500">Waiting...</div>
+                    </div>
+                </div>
+            </div>
+
+            <div id="status-message-4" class="mb-4 p-3 rounded-lg bg-gray-900 text-sm text-gray-300 min-h-[60px]">
+                <span class="text-gray-500">Ready to process...</span>
+            </div>
+            <button onclick="submitOrder('ORDER#004', 4)" id="btn-4"
+                    class="w-full bg-green-500 hover:bg-green-600 text-white font-semibold py-3 px-4 rounded-lg transition duration-200 flex items-center justify-center">
+                <span class="button-text">Submit Order</span>
+                <svg class="loading w-5 h-5 ml-2 hidden" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
+                          d="M4 4v5h.582m15.356 2A8.001 8.001 0 004.582 9m0 0H9m11 11v-5h-.581m0 0a8.003 8.003 0 01-15.357-2m15.357 2H15"></path>
+                </svg>
+            </button>
+        </div>
+    </div>
+
+    <!-- WebSocket Status Indicator -->
+    <div class="fixed bottom-4 right-4 flex items-center space-x-2 bg-gray-800 px-4 py-2 rounded-lg border border-gray-700">
+        <div id="wsIndicator" class="w-2 h-2 rounded-full bg-gray-500"></div>
+        <span id="wsStatus" class="text-xs text-gray-400">Connecting...</span>
+    </div>
+
+    <!-- Footer -->
+    <footer class="mt-12 text-center text-gray-500 text-sm">
+        <p>Powered by <span class="text-quarkus-blue font-semibold">Quarkus</span> and <span
+                class="text-quarkus-blue font-semibold">Quarkus Flow</span></p>
+    </footer>
+</div>
+
+<script>
+    // WebSocket connection
+    let ws = null;
+    let reconnectInterval = null;
+
+    function connectWebSocket() {
+        const protocol = window.location.protocol === 'https:' ? 'wss:' : 'ws:';
+        const wsUrl = `${protocol}//${window.location.host}/order-events`;
+
+        ws = new WebSocket(wsUrl);
+
+        ws.onopen = () => {
+            console.log('WebSocket connected');
+            updateWebSocketStatus(true);
+            if (reconnectInterval) {
+                clearInterval(reconnectInterval);
+                reconnectInterval = null;
+            }
+        };
+
+        ws.onmessage = (event) => {
+            try {
+                const data = JSON.parse(event.data);
+                handleOrderEvent(data);
+            } catch (error) {
+                console.error('Error parsing WebSocket message:', error);
+            }
+        };
+
+        ws.onerror = (error) => {
+            console.error('WebSocket error:', error);
+        };
+
+        ws.onclose = () => {
+            console.log('WebSocket disconnected, attempting to reconnect...');
+            updateWebSocketStatus(false);
+            if (!reconnectInterval) {
+                reconnectInterval = setInterval(() => {
+                    if (ws.readyState === WebSocket.CLOSED) {
+                        connectWebSocket();
+                    }
+                }, 3000);
+            }
+        };
+    }
+
+    function updateWebSocketStatus(connected) {
+        const indicator = document.getElementById('wsIndicator');
+        const status = document.getElementById('wsStatus');
+
+        if (connected) {
+            indicator.className = 'w-2 h-2 rounded-full bg-green-500';
+            status.textContent = 'Connected';
+            status.className = 'text-xs text-green-400';
+        } else {
+            indicator.className = 'w-2 h-2 rounded-full bg-red-500';
+            status.textContent = 'Disconnected';
+            status.className = 'text-xs text-red-400';
+        }
+    }
+
+    function handleOrderEvent(data) {
+        const orderId = data.orderId;
+        const orderNum = orderId.replace('ORDER#00', '');
+        
+        // Handle step-by-step updates
+        if (data.step) {
+            updateWorkflowStep(orderNum, data.step, data.status, data.message);
+            return;
+        }
+        
+        // Handle overall status updates
+        const status = data.status;
+        const message = data.message;
+        
+        const indicator = document.getElementById(`status-indicator-${orderNum}`);
+        const statusMessage = document.getElementById(`status-message-${orderNum}`);
+        const card = document.getElementById(`order-card-${orderNum}`);
+        const button = document.getElementById(`btn-${orderNum}`);
+
+        indicator.className = `w-3 h-3 rounded-full status-${status}`;
+
+        let icon = '';
+        let textColor = '';
+        
+        if (status === 'started') {
+            icon = '⏳';
+            textColor = 'text-yellow-400';
+            card.classList.add('processing');
+            // Show workflow progress
+            document.getElementById(`workflow-progress-${orderNum}`).classList.remove('hidden');
+        } else if (status === 'completed') {
+            icon = '✅';
+            textColor = 'text-green-400';
+            card.classList.remove('processing');
+            playNotificationSound();
+        } else if (status === 'failed') {
+            icon = '❌';
+            textColor = 'text-red-400';
+            card.classList.remove('processing');
+            playNotificationSound();
+        }
+
+        statusMessage.innerHTML = `<span class="${textColor}">${icon} ${message}</span>`;
+
+        if (status === 'completed' || status === 'failed') {
+            const buttonText = button.querySelector('.button-text');
+            const loadingIcon = button.querySelector('.loading');
+            button.disabled = false;
+            buttonText.textContent = 'Submit Order';
+            loadingIcon.classList.add('hidden');
+        }
+    }
+
+    function updateWorkflowStep(orderNum, step, status, message) {
+        let stepElement, msgElement, progressElement;
+        
+        if (step === 'stockReservation') {
+            stepElement = document.getElementById(`step-stock-${orderNum}`);
+            msgElement = document.getElementById(`step-stock-msg-${orderNum}`);
+            progressElement = document.getElementById(`progress-${orderNum}-2`);
+        } else if (step === 'paymentProcessing') {
+            stepElement = document.getElementById(`step-payment-${orderNum}`);
+            msgElement = document.getElementById(`step-payment-msg-${orderNum}`);
+            progressElement = document.getElementById(`progress-${orderNum}-3`);
+        } else if (step === 'shipping') {
+            stepElement = document.getElementById(`step-shipping-${orderNum}`);
+            msgElement = document.getElementById(`step-shipping-msg-${orderNum}`);
+        } else if (step === 'compensation') {
+            const compensationSection = document.getElementById(`compensation-section-${orderNum}`);
+            const logContainer = document.getElementById(`compensation-log-${orderNum}`);
+            compensationSection.classList.remove('hidden');
+
+            const entry = document.createElement('div');
+            entry.className = 'text-xs flex items-center space-x-1 py-0.5';
+
+            if (status === 'processing') {
+                entry.innerHTML = `<span class="text-yellow-400 inline-block" style="animation:spin 1s linear infinite">⟳</span><span class="text-yellow-300">${message}</span>`;
+            } else if (status === 'completed') {
+                entry.innerHTML = `<span class="text-green-400 font-bold">✓</span><span class="text-green-400">${message}</span>`;
+            } else if (status === 'failed') {
+                entry.innerHTML = `<span class="text-red-400 font-bold">✗</span><span class="text-red-400">${message}</span>`;
+            }
+
+            logContainer.appendChild(entry);
+            return;
+        }
+        
+        if (stepElement && msgElement) {
+            stepElement.className = `step-${status} w-8 h-8 rounded-full border-2 flex items-center justify-center text-xs font-bold`;
+            msgElement.textContent = message;
+            msgElement.className = `text-xs ${status === 'completed' ? 'text-green-400' : status === 'failed' ? 'text-red-400' : status === 'processing' ? 'text-yellow-400' : 'text-gray-500'}`;
+            
+            if (status === 'completed' && progressElement) {
+                progressElement.classList.add('active');
+            }
+        }
+    }
+
+    async function submitOrder(orderId, orderNum) {
+        const button = document.getElementById(`btn-${orderNum}`);
+        const buttonText = button.querySelector('.button-text');
+        const loadingIcon = button.querySelector('.loading');
+
+        // Reset workflow progress
+        resetWorkflowProgress(orderNum);
+
+        button.disabled = true;
+        buttonText.textContent = 'Processing...';
+        loadingIcon.classList.remove('hidden');
+
+        try {
+            const response = await fetch('/api/orders', {
+                method: 'POST',
+                headers: {
+                    'Content-Type': 'application/json'
+                },
+                body: JSON.stringify({ orderId: orderId })
+            });
+
+            if (!response.ok) {
+                throw new Error(`HTTP error! status: ${response.status}`);
+            }
+        } catch (error) {
+            console.error('Error submitting order:', error);
+            
+            const indicator = document.getElementById(`status-indicator-${orderNum}`);
+            const statusMessage = document.getElementById(`status-message-${orderNum}`);
+            const card = document.getElementById(`order-card-${orderNum}`);
+            
+            indicator.className = 'w-3 h-3 rounded-full status-failed';
+            statusMessage.innerHTML = `<span class="text-red-400">❌ Failed to submit order: ${error.message}</span>`;
+            card.classList.remove('processing');
+            
+            button.disabled = false;
+            buttonText.textContent = 'Submit Order';
+            loadingIcon.classList.add('hidden');
+        }
+    }
+
+    function resetWorkflowProgress(orderNum) {
+        // Reset all steps to idle
+        ['stock', 'payment', 'shipping'].forEach(step => {
+            const stepElement = document.getElementById(`step-${step}-${orderNum}`);
+            const msgElement = document.getElementById(`step-${step}-msg-${orderNum}`);
+            if (stepElement) {
+                stepElement.className = 'step-idle w-8 h-8 rounded-full border-2 flex items-center justify-center text-xs font-bold';
+            }
+            if (msgElement) {
+                msgElement.textContent = 'Waiting...';
+                msgElement.className = 'text-xs text-gray-500';
+            }
+        });
+        
+        // Reset progress lines
+        ['2', '3'].forEach(num => {
+            const progressElement = document.getElementById(`progress-${orderNum}-${num}`);
+            if (progressElement) {
+                progressElement.classList.remove('active');
+            }
+        });
+        
+        // Hide compensation section and clear log
+        const compensationSection = document.getElementById(`compensation-section-${orderNum}`);
+        if (compensationSection) {
+            compensationSection.classList.add('hidden');
+        }
+        const compensationLog = document.getElementById(`compensation-log-${orderNum}`);
+        if (compensationLog) {
+            compensationLog.innerHTML = '';
+        }
+    }
+
+    function playNotificationSound() {
+        // Create a simple beep sound using Web Audio API
+        try {
+            const audioContext = new (window.AudioContext || window.webkitAudioContext)();
+            const oscillator = audioContext.createOscillator();
+            const gainNode = audioContext.createGain();
+            
+            oscillator.connect(gainNode);
+            gainNode.connect(audioContext.destination);
+            
+            oscillator.frequency.value = 800;
+            oscillator.type = 'sine';
+            
+            gainNode.gain.setValueAtTime(0.3, audioContext.currentTime);
+            gainNode.gain.exponentialRampToValueAtTime(0.01, audioContext.currentTime + 0.5);
+            
+            oscillator.start(audioContext.currentTime);
+            oscillator.stop(audioContext.currentTime + 0.5);
+        } catch (error) {
+            console.log('Audio notification not supported:', error);
+        }
+    }
+
+    // Initialize WebSocket connection on page load
+    connectWebSocket();
+</script>
+</body>
+</html>
\ No newline at end of file
diff --git a/examples/order-fulfillment-compensation/src/main/resources/META-INF/resources/workflow-diagram.html b/examples/order-fulfillment-compensation/src/main/resources/META-INF/resources/workflow-diagram.html
new file mode 100644
index 000000000..120ab7fee
--- /dev/null
+++ b/examples/order-fulfillment-compensation/src/main/resources/META-INF/resources/workflow-diagram.html
@@ -0,0 +1,266 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Workflow Diagram - Order Fulfillment</title>
+    <script src="https://cdn.tailwindcss.com"></script>
+    <script>
+        tailwind.config = {
+            theme: {
+                extend: {
+                    colors: {
+                        'quarkus-blue': '#4695EB',
+                        'quarkus-dark-blue': '#0d1b2a',
+                        'quarkus-red': '#FF004A',
+                    }
+                }
+            }
+        }
+    </script>
+    <style>
+        .flow-arrow {
+            stroke: #4695EB;
+            stroke-width: 2;
+            fill: none;
+            marker-end: url(#arrowhead);
+        }
+        .flow-arrow-error {
+            stroke: #FF004A;
+            stroke-width: 2;
+            fill: none;
+            stroke-dasharray: 5,5;
+            marker-end: url(#arrowhead-error);
+        }
+        .flow-arrow-compensation {
+            stroke: #f59e0b;
+            stroke-width: 2;
+            fill: none;
+            stroke-dasharray: 3,3;
+            marker-end: url(#arrowhead-compensation);
+        }
+    </style>
+</head>
+<body class="bg-gradient-to-br from-quarkus-dark-blue via-gray-900 to-black min-h-screen text-white p-8">
+    <div class="container mx-auto">
+        <!-- Header -->
+        <div class="text-center mb-8">
+            <h1 class="text-4xl font-bold mb-2 bg-gradient-to-r from-quarkus-blue to-quarkus-red bg-clip-text text-transparent">
+                Order Fulfillment Workflow
+            </h1>
+            <p class="text-gray-400">Behind the Scenes - Compensation Pattern</p>
+            <a href="index.html" class="inline-block mt-4 px-4 py-2 bg-quarkus-blue hover:bg-blue-600 rounded-lg text-sm">
+                ← Back to Demo
+            </a>
+        </div>
+
+        <!-- Legend -->
+        <div class="mb-8 p-6 bg-gray-800 rounded-xl border border-gray-700">
+            <h3 class="text-xl font-bold mb-4">Legend</h3>
+            <div class="grid grid-cols-1 md:grid-cols-3 gap-4">
+                <div class="flex items-center space-x-2">
+                    <svg width="40" height="20">
+                        <line x1="0" y1="10" x2="40" y2="10" class="flow-arrow"/>
+                    </svg>
+                    <span class="text-sm">Normal Flow</span>
+                </div>
+                <div class="flex items-center space-x-2">
+                    <svg width="40" height="20">
+                        <line x1="0" y1="10" x2="40" y2="10" class="flow-arrow-error"/>
+                    </svg>
+                    <span class="text-sm">Error Path</span>
+                </div>
+                <div class="flex items-center space-x-2">
+                    <svg width="40" height="20">
+                        <line x1="0" y1="10" x2="40" y2="10" class="flow-arrow-compensation"/>
+                    </svg>
+                    <span class="text-sm">Compensation</span>
+                </div>
+            </div>
+        </div>
+
+        <!-- Main Workflow Diagram -->
+        <div class="mb-8 p-6 bg-gray-800 rounded-xl border border-gray-700">
+            <h3 class="text-xl font-bold mb-6">Main Workflow Flow</h3>
+            
+            <svg viewBox="0 0 1000 400" class="w-full">
+                <!-- Arrow markers -->
+                <defs>
+                    <marker id="arrowhead" markerWidth="10" markerHeight="10" refX="9" refY="3" orient="auto">
+                        <polygon points="0 0, 10 3, 0 6" fill="#4695EB"/>
+                    </marker>
+                    <marker id="arrowhead-error" markerWidth="10" markerHeight="10" refX="9" refY="3" orient="auto">
+                        <polygon points="0 0, 10 3, 0 6" fill="#FF004A"/>
+                    </marker>
+                    <marker id="arrowhead-compensation" markerWidth="10" markerHeight="10" refX="9" refY="3" orient="auto">
+                        <polygon points="0 0, 10 3, 0 6" fill="#f59e0b"/>
+                    </marker>
+                </defs>
+
+                <!-- Start -->
+                <circle cx="50" cy="200" r="30" fill="#10b981" stroke="#059669" stroke-width="2"/>
+                <text x="50" y="205" text-anchor="middle" fill="white" font-size="12" font-weight="bold">START</text>
+
+                <!-- Stock Reservation -->
+                <rect x="150" y="170" width="140" height="60" rx="8" fill="#1e40af" stroke="#3b82f6" stroke-width="2"/>
+                <text x="220" y="195" text-anchor="middle" fill="white" font-size="13" font-weight="bold">Stock</text>
+                <text x="220" y="212" text-anchor="middle" fill="white" font-size="13" font-weight="bold">Reservation</text>
+                <line x1="80" y1="200" x2="150" y2="200" class="flow-arrow"/>
+
+                <!-- Payment Processing -->
+                <rect x="360" y="170" width="140" height="60" rx="8" fill="#1e40af" stroke="#3b82f6" stroke-width="2"/>
+                <text x="430" y="195" text-anchor="middle" fill="white" font-size="13" font-weight="bold">Payment</text>
+                <text x="430" y="212" text-anchor="middle" fill="white" font-size="13" font-weight="bold">Processing</text>
+                <line x1="290" y1="200" x2="360" y2="200" class="flow-arrow"/>
+
+                <!-- Shipping -->
+                <rect x="570" y="170" width="140" height="60" rx="8" fill="#1e40af" stroke="#3b82f6" stroke-width="2"/>
+                <text x="640" y="195" text-anchor="middle" fill="white" font-size="13" font-weight="bold">Schedule</text>
+                <text x="640" y="212" text-anchor="middle" fill="white" font-size="13" font-weight="bold">Shipping</text>
+                <line x1="500" y1="200" x2="570" y2="200" class="flow-arrow"/>
+
+                <!-- End -->
+                <circle cx="780" cy="200" r="30" fill="#10b981" stroke="#059669" stroke-width="2"/>
+                <text x="780" y="205" text-anchor="middle" fill="white" font-size="12" font-weight="bold">END</text>
+                <line x1="710" y1="200" x2="750" y2="200" class="flow-arrow"/>
+
+                <!-- Compensation boxes -->
+                <rect x="150" y="280" width="140" height="50" rx="8" fill="#92400e" stroke="#f59e0b" stroke-width="2" stroke-dasharray="4,4"/>
+                <text x="220" y="310" text-anchor="middle" fill="#fbbf24" font-size="12" font-weight="bold">Cancel Stock</text>
+
+                <rect x="360" y="280" width="140" height="50" rx="8" fill="#92400e" stroke="#f59e0b" stroke-width="2" stroke-dasharray="4,4"/>
+                <text x="430" y="310" text-anchor="middle" fill="#fbbf24" font-size="12" font-weight="bold">Cancel Payment</text>
+
+                <rect x="570" y="280" width="140" height="50" rx="8" fill="#92400e" stroke="#f59e0b" stroke-width="2" stroke-dasharray="4,4"/>
+                <text x="640" y="310" text-anchor="middle" fill="#fbbf24" font-size="12" font-weight="bold">Cancel Shipping</text>
+
+                <!-- Error paths -->
+                <line x1="220" y1="230" x2="220" y2="280" class="flow-arrow-error"/>
+                <line x1="430" y1="230" x2="430" y2="280" class="flow-arrow-error"/>
+                <line x1="640" y1="230" x2="640" y2="280" class="flow-arrow-error"/>
+
+                <!-- Compensation chain arrows -->
+                <!-- cancelShipping -> cancelPayment -->
+                <line x1="570" y1="305" x2="500" y2="305" class="flow-arrow-compensation"/>
+                <!-- cancelPayment -> cancelStock -->
+                <line x1="360" y1="305" x2="290" y2="305" class="flow-arrow-compensation"/>
+
+                <!-- Labels -->
+                <text x="220" y="260" text-anchor="middle" fill="#FF004A" font-size="11">ORDER#001</text>
+                <text x="430" y="260" text-anchor="middle" fill="#FF004A" font-size="11">ORDER#002</text>
+                <text x="640" y="260" text-anchor="middle" fill="#FF004A" font-size="11">ORDER#003</text>
+            </svg>
+        </div>
+
+        <!-- Order Scenarios -->
+        <div class="grid grid-cols-1 md:grid-cols-3 gap-6 mb-8">
+            <!-- ORDER#001 -->
+            <div class="bg-gray-800 rounded-xl p-6 border-2 border-blue-500">
+                <h3 class="text-xl font-bold text-blue-400 mb-4">ORDER#001 Scenario</h3>
+                <div class="space-y-3 text-sm">
+                    <div class="flex items-start space-x-2">
+                        <span class="text-green-400">1.</span>
+                        <span>Workflow starts</span>
+                    </div>
+                    <div class="flex items-start space-x-2">
+                        <span class="text-red-400">2.</span>
+                        <span><strong>Stock Reservation FAILS</strong> (ERR_001, status 409)</span>
+                    </div>
+                </div>
+                <div class="mt-4 p-3 bg-gray-900 rounded text-xs">
+                    <code class="text-blue-300">throw WorkflowException(ERR_001, 409)</code>
+                </div>
+            </div>
+
+            <!-- ORDER#002 -->
+            <div class="bg-gray-800 rounded-xl p-6 border-2 border-yellow-500">
+                <h3 class="text-xl font-bold text-yellow-400 mb-4">ORDER#002 Scenario</h3>
+                <div class="space-y-3 text-sm">
+                    <div class="flex items-start space-x-2">
+                        <span class="text-green-400">1.</span>
+                        <span>Workflow starts</span>
+                    </div>
+                    <div class="flex items-start space-x-2">
+                        <span class="text-green-400">2.</span>
+                        <span>Stock Reservation succeeds</span>
+                    </div>
+                    <div class="flex items-start space-x-2">
+                        <span class="text-red-400">3.</span>
+                        <span><strong>Payment Processing FAILS</strong> (ERR_002, status 503)</span>
+                    </div>
+                    <div class="flex items-start space-x-2">
+                        <span class="text-yellow-400">4.</span>
+                        <span>Compensation: Cancel Stock</span>
+                    </div>
+                    <div class="flex items-start space-x-2">
+                        <span class="text-gray-400">5.</span>
+                        <span>Workflow ends (compensated)</span>
+                    </div>
+                </div>
+                <div class="mt-4 p-3 bg-gray-900 rounded text-xs">
+                    <code class="text-yellow-300">throw WorkflowException(ERR_002, 503)</code>
+                </div>
+            </div>
+
+            <!-- ORDER#003 -->
+            <div class="bg-gray-800 rounded-xl p-6 border-2 border-red-500">
+                <h3 class="text-xl font-bold text-red-400 mb-4">ORDER#003 Scenario</h3>
+                <div class="space-y-3 text-sm">
+                    <div class="flex items-start space-x-2">
+                        <span class="text-green-400">1.</span>
+                        <span>Workflow starts</span>
+                    </div>
+                    <div class="flex items-start space-x-2">
+                        <span class="text-green-400">2.</span>
+                        <span>Stock Reservation succeeds</span>
+                    </div>
+                    <div class="flex items-start space-x-2">
+                        <span class="text-green-400">3.</span>
+                        <span>Payment Processing succeeds</span>
+                    </div>
+                    <div class="flex items-start space-x-2">
+                        <span class="text-red-400">4.</span>
+                        <span><strong>Shipping FAILS</strong> (ERR_003, status 500)</span>
+                    </div>
+                    <div class="flex items-start space-x-2">
+                        <span class="text-yellow-400">5.</span>
+                        <span>Compensation: Cancel Payment → Cancel Stock</span>
+                    </div>
+                    <div class="flex items-start space-x-2">
+                        <span class="text-gray-400">6.</span>
+                        <span>Workflow ends (compensated)</span>
+                    </div>
+                </div>
+                <div class="mt-4 p-3 bg-gray-900 rounded text-xs">
+                    <code class="text-red-300">throw WorkflowException(ERR_003, 500)</code>
+                </div>
+            </div>
+        </div>
+
+        <!-- Technical Details -->
+        <div class="bg-gray-800 rounded-xl p-6 border border-gray-700">
+            <h3 class="text-xl font-bold mb-4">Technical Implementation</h3>
+            <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
+                <div>
+                    <h4 class="text-lg font-semibold text-quarkus-blue mb-3">Workflow Pattern</h4>
+                    <ul class="space-y-2 text-sm text-gray-300">
+                        <li>• <strong>Try-Catch Blocks:</strong> Each step wrapped in error handling</li>
+                        <li>• <strong>Compensation Logic:</strong> Automatic rollback on failures</li>
+                        <li>• <strong>Error Types:</strong> Specific error codes (ERR_001, ERR_002, ERR_003)</li>
+                        <li>• <strong>Status Codes:</strong> HTTP-like status codes (409, 503, 500)</li>
+                    </ul>
+                </div>
+                <div>
+                    <h4 class="text-lg font-semibold text-quarkus-blue mb-3">Real-time Updates</h4>
+                    <ul class="space-y-2 text-sm text-gray-300">
+                        <li>• <strong>WebSocket:</strong> Bidirectional communication</li>
+                        <li>• <strong>Events:</strong> started, completed, failed</li>
+                        <li>• <strong>Broadcasting:</strong> All connected clients notified</li>
+                        <li>• <strong>Auto-reconnect:</strong> Resilient connection handling</li>
+                    </ul>
+                </div>
+            </div>
+        </div>
+    </div>
+</body>
+</html>
diff --git a/examples/order-fulfillment-compensation/src/main/resources/application.properties b/examples/order-fulfillment-compensation/src/main/resources/application.properties
new file mode 100644
index 000000000..e69de29bb
diff --git a/examples/pom.xml b/examples/pom.xml
index 3ffb04bec..165e5631e 100644
--- a/examples/pom.xml
+++ b/examples/pom.xml
@@ -24,6 +24,7 @@
         <module>micrometer-prometheus</module>
         <module>durable-workflows-k8s</module>
         <module>suspend-resume-abort</module>
+        <module>order-fulfillment-compensation</module>
         <module>resilient-task-orchestrator</module>
     </modules>