Enhanced the logic to hide "Next Action" in more cases:
- Check if currentValue matches stepTargetValue (existing)
- Check if summary contains "No changes needed" (new)
- Only show when there are actual meaningful changes to display
This should reduce redundant information while maintaining helpful guidance
when users genuinely need specific bead movement instructions.
🤖 Generated with [Claude Code](https://claude.ai/code)
Co-Authored-By: Claude <noreply@anthropic.com>
Only display the bead diff summary ("Next Action") when the current abacus
value differs from the target value for the current step. This eliminates
redundant information and provides a cleaner user experience.
Logic:
- Compare currentValue with expectedSteps[currentMultiStep].targetValue
- Show "Next Action" only when values don't match
- Automatically hides when user completes the step action
- Maintains pedagogical term display regardless of completion state
This creates a more intelligent UI that shows guidance only when needed.
🤖 Generated with [Claude Code](https://claude.ai/code)
Co-Authored-By: Claude <noreply@anthropic.com>
Move the "Next Action" bead movement feedback from the bottom of the step list
to appear directly underneath the current active step. This creates better
visual grouping and clearer association between the step and its required actions.
Changes:
- Wrapped each step in a div to allow inline content
- Positioned bead diff summary with proper left margin alignment
- Removed duplicate "Next Action" section at bottom
- Maintains all existing styling and functionality
🤖 Generated with [Claude Code](https://claude.ai/code)
Co-Authored-By: Claude <noreply@anthropic.com>
Show mathematical terms (e.g., "10", "(5 - 1)", "-6") as badges next to the current
step in the Step-by-Step Instructions list. This provides clear context about the
mathematical reasoning behind each step.
Features:
- Added ExpectedStep interface with mathematicalTerm field
- Blue-styled badge appears only for the current active step
- Integrates pedagogical decomposition directly into the UI
- Properly typed with TypeScript for maintainability
🤖 Generated with [Claude Code](https://claude.ai/code)
Co-Authored-By: Claude <noreply@anthropic.com>
Surface the bead diff summary as "Next Action" hints in the Step-by-Step Instructions panel.
Provides real-time pedagogical feedback like "remove heaven bead in tens column, then add 4 earth beads in ones column"
to help users understand exactly what bead movements are needed for each step.
Features:
- Dynamic bead diff summary calculation for current step
- Styled feedback panel with blue color scheme
- Only shows when there are actual bead movements needed
- Updates in real-time as user progresses through multi-step sequences
🤖 Generated with [Claude Code](https://claude.ai/code)
Co-Authored-By: Claude <noreply@anthropic.com>
The bead diff calculation was hardcoding stepIndex to 0, but AbacusReact's
getBeadStepHighlight function only shows arrows when stepIndex matches currentStep.
This caused arrows to only appear for the first multi-step instruction.
Fixed by setting stepIndex to currentMultiStep to match the AbacusReact filtering logic.
Also removed debugging console logs used to isolate this issue.
🤖 Generated with [Claude Code](https://claude.ai/code)
Co-Authored-By: Claude <noreply@anthropic.com>
Replaces the static getCurrentStepBeads() function with the new dynamic
bead diff algorithm. Now calculates arrows and highlights in real-time
based on current abacus state and target values.
Key improvements:
- Dynamic arrow calculation using calculateBeadDiffFromValues()
- Real-time state transition highlighting
- Comprehensive debug logging for bead diff calculations
- Consistent arrow display across all multi-step instructions
Fixes issue where only the first multi-step instruction showed arrows.
🤖 Generated with [Claude Code](https://claude.ai/code)
Co-Authored-By: Claude <noreply@anthropic.com>
Updates TutorialPlayer to use the same auto-generation algorithm as Storybook stories,
removing hard-coded special cases and ensuring consistent pedagogical ordering.
Enhances Storybook stories with expected states calculation demonstration to showcase
the corrected step-by-step progression that matches tutorial editor functionality.
🤖 Generated with [Claude Code](https://claude.ai/code)
Co-Authored-By: Claude <noreply@anthropic.com>
TutorialPlayer:
- Add currentMultiStep state tracking for step progression
- Implement static expected steps generation with proper milestones
- Add step advancement logic with value change detection
- Support dynamic arrow generation toward current expected step target
- Add comprehensive debugging and state management
TutorialEditor:
- Add automatic instruction generation integration
- Implement generateInstructionsForStep function
- Add manual instruction editing UI with multi-step support
- Support for tooltips, error messages, and action descriptions
- Add UI controls for multi-step instruction management
Tutorial Types:
- Extend interfaces to support multi-step instruction workflows
- Add support for step bead highlights and progression tracking
🤖 Generated with [Claude Code](https://claude.ai/code)
Co-Authored-By: Claude <noreply@anthropic.com>
Fixed bug where tutorial highlighting appeared in wrong column:
- placeValue 0 (ones place) now correctly maps to columnIndex 4 (rightmost)
- placeValue 1 (tens place) now correctly maps to columnIndex 3
- Added comprehensive test suite to catch highlighting regressions
Tutorial steps now highlight beads in the correct columns.
🤖 Generated with [Claude Code](https://claude.ai/code)
Co-Authored-By: Claude <noreply@anthropic.com>
- Fix highlighting logic bug where multiple beads in same column would overwrite each other
- Migrate TutorialStep interface from columnIndex to placeValue system
- Update tutorial data to use place values (0=ones, 1=tens, etc.)
- Fix bead validation logic to use place values instead of legacy columnIndex
- Enable proper multi-step tutorial highlighting for complement operations
Tutorial steps like "3 + 4 = 5 - 1" now correctly highlight both the heaven bead
(add 5) and earth bead (remove 1) simultaneously.
🤖 Generated with [Claude Code](https://claude.ai/code)
Co-Authored-By: Claude <noreply@anthropic.com>
- Implement 150ms debounced value change handler to prevent tutorial
system bottlenecks during rapid bead dragging
- Allow abacus to render smoothly by deferring expensive tutorial
operations (validation, state updates, event logging) until
gestures settle
- Add proper cleanup and ref synchronization for debounced values
- This should eliminate UI lag when dragging beads up and down rapidly
🤖 Generated with [Claude Code](https://claude.ai/code)
Co-Authored-By: Claude <noreply@anthropic.com>
- Memoize custom styles calculation using useMemo to prevent expensive
recalculation on every render
- Move complex highlightBeads.reduce() operation out of inline prop
- Only recalculate when currentStep.highlightBeads actually changes
- This fixes sluggish gesture performance in tutorial abacus
🤖 Generated with [Claude Code](https://claude.ai/code)
Co-Authored-By: Claude <noreply@anthropic.com>
Moved navigation function declarations before useEffect hooks that reference
them to prevent 'Cannot access before initialization' error. Also updated
tutorial completion logic to use dispatch instead of logEvent.
🤖 Generated with [Claude Code](https://claude.ai/code)
Co-Authored-By: Claude <noreply@anthropic.com>
Replaced multiple useState hooks and complex useEffect dependencies with a
single useReducer that handles all state transitions deterministically.
Benefits:
- Eliminates circular dependencies between useEffects
- Centralized state management with predictable updates
- Reduced complexity and easier debugging
- Step initialization only happens through navigation, not reactive effects
- Events are managed as part of the single state tree
This architecture prevents infinite loops by design rather than working
around them with timing or flags.
🤖 Generated with [Claude Code](https://claude.ai/code)
Co-Authored-By: Claude <noreply@anthropic.com>
Replaced the 50ms setTimeout hack with a proper isProgrammaticChange ref
that synchronously tracks when value changes are initiated programmatically
vs by user interaction. This eliminates timing dependencies and race
conditions while maintaining the same functional behavior.
🤖 Generated with [Claude Code](https://claude.ai/code)
Co-Authored-By: Claude <noreply@anthropic.com>
Added isInitializing flag to prevent onValueChange callback feedback loop
during step transitions. When a new step initializes, AbacusReact would
call onValueChange with the startValue, causing TutorialPlayer to set the
same value again, creating an infinite loop.
Also removed problematic auto-click play function from EditingMode story
that was interfering with component state.
🤖 Generated with [Claude Code](https://claude.ai/code)
Co-Authored-By: Claude <noreply@anthropic.com>
