> ## Documentation Index
> Fetch the complete documentation index at: https://docs.woopilot.xyz/llms.txt
> Use this file to discover all available pages before exploring further.

# Visual Diff Staging Table

> Review before/after store modifications with strikethrough comparison badges and execute 1-click batch changes

# Visual Diff Staging Table 🧭

When you instruct WooPilot AI to perform mutations across your WooCommerce catalog (e.g. price adjustments, stock updates, category reorganizations, or order status changes), it never applies them blindly to your live store.

Instead, WooPilot AI opens the **Visual Diff Staging Screen** in the Telegram Mini App.

```text theme={null}
┌─────────────────────────────────────────────────────────────────────────────┐
│ 🧭 STAGING AREA: PRICE UPDATE (3 ITEMS)                                     │
├──────┬──────────────┬────────────────────────┬──────────────────────────────┤
│ #    │ ID / SKU     │ Product Name           │ Price Diff (Before ➔ After)  │
├──────┼──────────────┼────────────────────────┼──────────────────────────────┤
│ 1    │ #1042 / SH01 │ Air Pro Running Shoes  │ ~~$120.00~~ ➔ $102.00 (-15%) │
│ 2    │ #1045 / SH02 │ Leather City Sneakers  │ ~~$85.00~~  ➔ $72.25 (-15%)  │
│ 3    │ #1049 / SH03 │ Trail Running Boots    │ ~~$150.00~~ ➔ $127.50 (-15%) │
├──────┴──────────────┴────────────────────────┴──────────────────────────────┤
│ [ 🚀 Apply Changes to WooCommerce (3 items) ]                               │
└─────────────────────────────────────────────────────────────────────────────┘
```

***

## 🔍 Visual Hierarchy & Safety Standards

1. **Deterministic Column Structure:**
   * **Left side (Locked Context):** Product ID, SKU, title, and current category remain stable.
   * **Right side (Diff Badges):** Modified attributes are rendered as high-contrast comparison badges with strikethrough styling: `~~Old Value~~ ➔ New Value`.
2. **Chunked Execution Pipeline (50 items / 100ms):**
   * Tapping **Apply Changes** triggers sequential processing in batches of 50 items with 100ms pauses to prevent server memory limits or gateway timeouts.
3. **Live Telegram Chat Button Synchronization:**
   * The instant the batch update finishes, the Telegram chat message button automatically updates its appearance:
     `[ 👁️ Review & Apply (3 items) ]` $\to$ `[ ✅ Completed (3 items) ]`.
4. **Stepper Multi-Step Sequences:**
   * When an operation involves multiple stages (e.g. Step 1: Set discount $\to$ Step 2: Move to Sale category), the top banner displays `[ 📑 Step 1 of 2: Apply 15% Discount ]`.
   * Completing Step 1 automatically posts Step 2 into your Telegram chat.


## Related topics

- [Quickstart Guide](/quickstart.md)
- [Bulk Store Actions & Visual Diff Staging](/capabilities/bulk-actions-staging.md)
- [System Architecture](/architecture.md)
- [Team Access & Multi-Store Management](/tma/team-access.md)
- [Introduction](/introduction.md)