Appearance
Feature: Flow Fast-Forward ("Content-Aware First")
Related: JumpTo Operator -- shares infrastructure (emitProgression, target palette) GitHub: #1853 Implementation plan:
Application-Frontend/docs/superpowers/plans/2026-04-17-jumpto-and-flow-fastforward.md
Overview
A new mode alongside the existing "first" (startingComponent). Currently, setting "first" on an operator skips everything before it -- including CSS changes, JS operations, ShowHide states, and all accumulated state. The new mode fast-forwards through the flow instantly, applying all state changes without showing them.
The user's words: "I want it to acknowledge that it happened, I just don't want to see it happen."
Problem
When "first" is set later in a flow, elements that depend on prior CSS/JS/ShowHide operations are in the wrong state:
- A background element animated into frame via CSS early in the flow is still out-of-frame
- ShowHide states haven't been toggled
- ChangeText/ChangeImage overrides haven't been applied
- Variable assignments haven't run
Desired Behavior
Two distinct modes when "first" is set:
| Mode | Behavior |
|---|---|
| Fresh Start (current) | Jump to operator, ignore everything before. Clean slate. |
| Content-Aware (new) | Fast-forward from step 1 to the "first" operator. Execute all functional operators (CSS, JS, ShowHide, Change*, SetVariable) instantly. Skip delays. Auto-resolve choices. Land on the "first" operator with all prior state accumulated. |
How It Works
1. Pathfinding
The flow is a directed graph with branching at Choice operators. To fast-forward, we need to find a path from step 1 to the target step. BFS (breadth-first search) finds the shortest path. When a Choice operator is on the path, the fast-forward engine auto-selects the answer that leads toward the target.
2. State Accumulation
Along the path, each operator is handled:
| Operator Type | Fast-Forward Behavior |
|---|---|
| CSS | Execute normally (inject styles) |
| JS/Tag | Execute normally |
| ShowHide | Execute normally (toggle visibility) |
| Change* (Text, Image, Video, Url) | Execute normally (apply overrides) |
| SetVariable | Execute normally |
| Delay | Skip entirely (duration = 0) |
| Restart | Skip (would cause loop) |
| JumpTo | Skip (would cause loop) |
| Visual (Message, Choice, Image, etc.) | Skip (don't render to liveFlow) |
3. Landing
After fast-forward completes, the flow begins normal execution from the target operator. All state is in place as if the user had clicked through the flow manually.
4. Performance
Fast-forward is synchronous for most operators (CSS, ShowHide, Change* are already sync). The only potential latency is if a JS/Tag operator does async work (e.g., fetch), but this is rare. In practice, fast-forward should be near-instant for most flows.
For complex flows with many operators, a brief loading indicator may be shown.
Key Files
Engine (Creative-Engine)
- Create:
src/logic-system/processors/flowFastForward.ts-- pathfinding + operator replay - Modify:
src/logic-system/processors/conversationFlow.ts-- integrate fast-forward on startflow - Modify:
src/services/dataStore.ts-- addfastForwardTargetreactive ref
Frontend (Application-Frontend)
- Modify:
src/pages/Chatbots/components/CavaiFlow/CavaiFlow.vue-- UI toggle for first mode - Modify:
src/pages/Chatbots/components/CavaiFlow/DataHelper.ts-- include all operators in step mapping when content-aware
Composer (Creative-Composer)
- Modify:
src/remapper/computeComponents.ts-- pass fastForwardTarget metadata
Naming (Undecided)
The toggle appears when an operator is marked as "first". Options:
- "Content-Aware" / "Fresh Start"
- "With History" / "Clean Start"
- "Resume State" / "Skip"
- A checkbox: "Apply prior state"
Open Questions
- Choice resolution strategy: When multiple paths exist through choices, take shortest (BFS default)? Always take position 1? Let user specify?
- OnEvent compatibility: When OnEvent operators are implemented, fast-forward will need to register their listeners. Not blocking for v1.
- Fallback: If pathfinding fails (disconnected graph), fall back to fresh start silently or warn the user?
Origin
Feature request from Cecilie (2026-04-17). Not high priority but very annoying when relevant (lots of CSS changes before "first").