Change tutorial tooltip z-index from 1000 to 50 so it scrolls under the
app nav bar (z-index 100) along with the abacus. This prevents the coaching
text from appearing layered above the nav while the abacus it points to is
hidden beneath it.
🤖 Generated with [Claude Code](https://claude.com/claude-code)
Co-Authored-By: Claude <noreply@anthropic.com>
Add silentErrors prop to TutorialPlayer to allow suppressing "That's not
the highlighted bead" error messages. Used on homepage to provide a less
intrusive demo experience.
Changes:
- Add silentErrors prop to TutorialPlayerProps interface
- Conditionally skip error dispatch when silentErrors is true
- Pass silentErrors={true} from homepage TutorialPlayer
🤖 Generated with [Claude Code](https://claude.com/claude-code)
Co-Authored-By: Claude <noreply@anthropic.com>
- Remove references to non-existent highlight.columnIndex property
- Remove references to removed currentStep.errorMessages property
- Use placeValue directly for highlight filtering and calculations
- Add generic error message for incorrect bead clicks
All changes maintain existing functionality while fixing type safety issues.
🤖 Generated with [Claude Code](https://claude.com/claude-code)
Co-Authored-By: Claude <noreply@anthropic.com>
- Added hideTooltip prop to TutorialPlayer to optionally hide guidance panels
- Enhanced coaching bar text for dark mode (brighter yellow with glow effect)
- Applied hideTooltip to homepage tutorial for cleaner presentation
- Updated dark mode header background for better integration
These changes are specific to the homepage dark theme instance while preserving default behavior for all other uses of the tutorial system.
🤖 Generated with [Claude Code](https://claude.com/claude-code)
Co-Authored-By: Claude <noreply@anthropic.com>
Added fill property to ColumnPostStyle and ReckoningBarStyle interfaces in abacus-react to enable high-contrast colors in dark mode. Updated TutorialPlayer to set fill colors for column posts (30% white) and reckoning bar (40% white) when in dark theme mode.
This improves visibility of the abacus frame elements in dark mode on the homepage tutorial.
🤖 Generated with [Claude Code](https://claude.com/claude-code)
Co-Authored-By: Claude <noreply@anthropic.com>
Fixed the dark mode styling to use the correct AbacusReact customStyles API:
Previous (incorrect):
- Used nested `frame` object that doesn't exist in the API
- `frame.column`, `frame.reckoningBar`, `frame.border`
Corrected (per AbacusReact.tsx interface):
- `columnPosts` - Global styling for all column dividers
- `reckoningBar` - Horizontal middle bar styling
Changes:
- Column dividers: rgba(255, 255, 255, 0.2) with 2px stroke
- Reckoning bar: rgba(255, 255, 255, 0.25) with 3px stroke
These properties are at the root level of customStyles, not nested
under a `frame` object. The styling will now properly apply to the
abacus frame elements in dark mode.
🤖 Generated with [Claude Code](https://claude.com/claude-code)
Co-Authored-By: Claude <noreply@anthropic.com>
Enhanced the dark mode theme support for the tutorial player:
Coaching Bar:
- Updated instruction text color to use yellow.300 for dark mode instead of
hardcoded yellow.900
- Ensures coaching instructions are readable against dark backgrounds
Abacus Frame:
- Added custom frame styling for dark mode using customStyles prop
- Column dividers: rgba(255, 255, 255, 0.15) with 2px stroke
- Reckoning bar: rgba(255, 255, 255, 0.2) with 3px stroke
- Outer border: rgba(255, 255, 255, 0.15) with 2px stroke
- Provides subtle, elegant appearance that blends with dark theme
The frame styling is automatically applied when theme="dark" and does not
affect light mode or other tutorial instances.
🤖 Generated with [Claude Code](https://claude.com/claude-code)
Co-Authored-By: Claude <noreply@anthropic.com>
Fixed a critical bug where tooltip overlays were referencing invalid column
indices when using fewer than 5 columns. The issue occurred because column
index calculations assumed a 5-column layout (0-4), but when using
abacusColumns={2}, the valid indices should be 0-1.
Changes:
- Updated targetColumnIndex calculation to use (abacusColumns - 1) - placeValue
instead of hardcoded 4 - placeValue
- Fixed hasActiveBeadsToLeft logic to use abacusColumns for padding and
column index conversions
- All column index calculations now properly account for the actual number
of columns
This resolves the "Cannot read properties of undefined (reading 'heavenActive')"
error that occurred when using fewer than 5 columns on the homepage tutorial.
🤖 Generated with [Claude Code](https://claude.com/claude-code)
Co-Authored-By: Claude <noreply@anthropic.com>
Fix runtime error when abacusColumns < 5 by filtering all bead highlights
to only include columns that actually exist.
Changes:
- Filter highlightBeads prop to only include valid place values
- Filter stepBeadHighlights to only include valid place values
- Filter customStyles column highlights to only include valid columns
- Add abacusColumns to dependencies of relevant useMemo/useCallback
This prevents accessing undefined column states when rendering with
fewer than 5 columns (e.g., abacusColumns={2} for simple demos).
🤖 Generated with [Claude Code](https://claude.com/claude-code)
Co-Authored-By: Claude <noreply@anthropic.com>
Add `theme` and `abacusColumns` props to TutorialPlayer for better customization:
- theme: 'light' | 'dark' controls all color schemes
- abacusColumns: number controls abacus column count (default 5)
Updated homepage to use:
- abacusColumns={2} for simpler 2+3 demo
- theme="dark" for cohesive integration with dark page design
- Vertical layout with "What You'll Learn" below tutorial
Dark theme styling:
- Transparent dark backgrounds for all containers
- Muted text colors (gray.200-gray.400)
- Subtle borders and shadows
- Removed bright yellow/amber gradients
All changes maintain backward compatibility - defaults to light theme with 5 columns.
🤖 Generated with [Claude Code](https://claude.com/claude-code)
Co-Authored-By: Claude <noreply@anthropic.com>
Add `hideNavigation` prop to TutorialPlayer component that hides
the header and footer navigation controls, allowing the tutorial
content to be embedded cleanly without navigation chrome.
Perfect for single-step tutorial demos like the homepage.
Changes:
- Add hideNavigation prop to TutorialPlayerProps
- Wrap header section in conditional rendering
- Wrap navigation footer in conditional rendering
- Update homepage to use hideNavigation={true}
- Adjust minHeight when navigation is hidden
🤖 Generated with [Claude Code](https://claude.com/claude-code)
Co-Authored-By: Claude <noreply@anthropic.com>
Change <p> tag to <div> tag to fix HTML nesting violation. The
<p> tag was containing <DecompositionWithReasons> which renders
a <div>, causing a hydration error. In HTML, <p> cannot contain
block-level elements like <div>.
Fixed: apps/web/src/components/tutorial/TutorialPlayer.tsx:1386
🤖 Generated with [Claude Code](https://claude.com/claude-code)
Co-Authored-By: Claude <noreply@anthropic.com>
**Problem:**
- player-ownership.ts imported drizzle-orm and @/db at top level
- When RoomMemoryPairsProvider imported client-safe utilities, Webpack bundled ALL imports including database code
- This caused hydration error: "The 'original' argument must be of type Function"
- Node.js util.promisify was being called in browser context
**Solution:**
1. Created player-ownership.client.ts with ONLY client-safe utilities
- No database imports
- Safe to import from 'use client' components
- Contains: buildPlayerOwnershipFromRoomData(), buildPlayerMetadata(), helper functions
2. Updated player-ownership.ts to re-export client utilities and add server-only functions
- Re-exports everything from .client.ts
- Adds buildPlayerOwnershipMap() (async, database-backed)
- Safe to import from server components/API routes
3. Updated RoomMemoryPairsProvider to import from .client.ts
**Result:**
- No more hydration errors on /arcade/room
- Client bundle doesn't include database code
- Server code can still use both client and server utilities
🤖 Generated with [Claude Code](https://claude.com/claude-code)
Co-Authored-By: Claude <noreply@anthropic.com>
Run Biome formatter on all files to ensure consistent code style:
- Single quotes for JS/TS
- Double quotes for JSX
- 2-space indentation
- 100 character line width
- Semicolons as needed
- ES5 trailing commas
This is the result of running: npx @biomejs/biome format . --write
🤖 Generated with [Claude Code](https://claude.com/claude-code)
Co-Authored-By: Claude <noreply@anthropic.com>
- Remove duplicate AbacusDisplayContext in favor of centralized abacus-react provider
- Update all components to use useAbacusDisplay and useAbacusConfig hooks from @soroban/abacus-react
- Create ClientProviders component to centralize provider setup
- Simplify context management across the application
🤖 Generated with [Claude Code](https://claude.com/claude-code)
Co-Authored-By: Claude <noreply@anthropic.com>
- Restore @soroban/core and @soroban/client dependencies in apps/web
- Correct workspace configuration to include all existing packages
- Disable problematic example-server.ts to fix TypeScript build
- Update Dockerfile to copy all required package.json files
🤖 Generated with [Claude Code](https://claude.ai/code)
Co-Authored-By: Claude <noreply@anthropic.com>
Update TutorialPlayer to use enhanced column mapping for proper two-level highlighting. Group highlights use rhsPlace (target column) while individual highlights use termPlace (specific term column).
- Group highlighting: getColumnFromTermIndex(termIndex, true) for rhsPlace
- Individual highlighting: getColumnFromTermIndex(termIndex, false) for termPlace
- Blue glow for group target column where complement operation net effect lands
- Orange glow for individual term column being hovered
- Enhanced debug logging to track column mapping behavior
🤖 Generated with [Claude Code](https://claude.ai/code)
Co-Authored-By: Claude <noreply@anthropic.com>
- Replace obtrusive bead overlays with subtle backgroundGlow effect
- Remove conflicting column post highlighting to avoid double effects
- Use refined blur (4px) and opacity (0.25) for gentle visual feedback
- Maintain numeral highlighting for additional context
- Preserve full bead interactivity with non-interfering glow layer
🤖 Generated with [Claude Code](https://claude.ai/code)
Co-Authored-By: Claude <noreply@anthropic.com>
Add comprehensive provenance tracking to link mathematical terms back to their source digits in addends. This enables enhanced tooltips that clearly show students which digit expansion corresponds to which part of the original problem.
Core changes:
- Add TermProvenance interface with source digit tracking (rhs, rhsDigit, rhsPlace, etc.)
- Add EquationAnchors interface for UI digit highlighting support
- Integrate provenance data through tutorial context instead of prop drilling
- Add buildEquationAnchors() for character position mapping
- Include groupId for complement operations that share source digits
This foundational system enables pedagogical tooltips to show "Add the tens digit — 2 tens (20) from addend 25" instead of generic "Direct Add — tens".
🤖 Generated with [Claude Code](https://claude.ai/code)
Co-Authored-By: Claude <noreply@anthropic.com>
- Add DecompositionWithReasons component with interactive term groups
- Implement current step highlighting with amber glow animation
- Create compact tooltips with step-by-step breakdowns and expansion reasoning
- Remove visual noise: no default term styling, only current step and group hover
- Add unified hover targets spanning entire term groups with reasoning context
- Integrate with tutorial context for synchronized step progression
🤖 Generated with [Claude Code](https://claude.ai/code)
Co-Authored-By: Claude <noreply@anthropic.com>
Implement 3-tier fallback highlighting system:
1. Use precise termPosition when available and validated
2. Smart search for mathematical term in decomposition string
3. Number-only fallback for edge cases
This fixes guidance panel and tooltip highlighting issues where
term positions from algorithm were occasionally off by a few characters
due to complex parenthesization formatting.
🤖 Generated with [Claude Code](https://claude.ai/code)
Co-Authored-By: Claude <noreply@anthropic.com>
- Updated tooltip logic to only show celebration when step is completed AND current value equals target
- Introduced showCelebration variable to distinguish between celebration and instruction modes
- Celebration disappears immediately when user moves away from correct answer
- Prevents inappropriate "excellent work" message when user has moved to wrong value
🤖 Generated with [Claude Code](https://claude.ai/code)
Co-Authored-By: Claude <noreply@anthropic.com>
- Moved lastMovedBead ref declaration to top of component before useMemo
- Removed duplicate ref declarations later in file
- Fixed variable hoisting issue causing ReferenceError
🤖 Generated with [Claude Code](https://claude.ai/code)
Co-Authored-By: Claude <noreply@anthropic.com>
- Track last moved bead in useRef to remember user's final action
- Use last moved bead for celebration tooltip when step is completed and target value is reached
- Fall back to ones place heaven bead only when no last moved bead is available
- Reset last moved bead tracking when navigating between steps/multi-steps
🤖 Generated with [Claude Code](https://claude.ai/code)
Co-Authored-By: Claude <noreply@anthropic.com>
- Fixed undefined currentStepBeads.some() error with optional chaining
- Added fallback to false when currentStepBeads is undefined
🤖 Generated with [Claude Code](https://claude.ai/code)
Co-Authored-By: Claude <noreply@anthropic.com>
- Fixed tooltip visibility logic to show celebration tooltip when step is completed
- Added fallback bead position (ones place heaven bead) for completed steps without current step beads
- Updated useMemo dependencies to prevent stale tooltip state
🤖 Generated with [Claude Code](https://claude.ai/code)
Co-Authored-By: Claude <noreply@anthropic.com>
- Modify tooltipOverlay logic to show when isStepCompleted is true
- Add fallback to use first bead from currentStepBeads when no arrows present
- Add isStepCompleted to useMemo dependency array
- Ensures celebration tooltip appears even when step instructions disappear
- Now users will see the green "🎉 Excellent work!" transformation
🤖 Generated with [Claude Code](https://claude.ai/code)
Co-Authored-By: Claude <noreply@anthropic.com>
- Remove separate success notification components entirely
- Transform existing tooltip into celebration state when isStepCompleted
- Change background from blue to green gradient with enhanced shadow
- Replace instructional content with "🎉 Excellent work!" message
- Add celebrationPulse animation and scale(1.05) transform
- Update tooltip arrow color to match celebration theme
- Maintains same positioning rules and collision detection
- Perfect "in your face" feedback without blocking interaction
🤖 Generated with [Claude Code](https://claude.ai/code)
Co-Authored-By: Claude <noreply@anthropic.com>
- Position notification directly above abacus center where user is focused
- Use bouncy entrance animation to grab attention without being obnoxious
- Larger, more celebratory design with gradient and better typography
- Still auto-dismisses and has pointer-events:none for speed running
- "In your face" visibility while maintaining smooth user flow
🤖 Generated with [Claude Code](https://claude.ai/code)
Co-Authored-By: Claude <noreply@anthropic.com>
- Change position from 'fixed' to 'absolute' to be relative to tutorial container
- Move from top-right corner of viewport to top-right of abacus area
- Now appears where users are actually looking instead of distant app nav
- Toast notification is much more noticeable and contextually relevant
🤖 Generated with [Claude Code](https://claude.ai/code)
Co-Authored-By: Claude <noreply@anthropic.com>
- Replace large center-screen modal with small top-right toast
- Change from blocking 320px modal to non-blocking compact notification
- Auto-dismiss after 3 seconds instead of requiring click
- Use pointer-events: none to avoid interfering with user interactions
- Simple "✓ Step completed!" message instead of elaborate celebration
- Maintains user flow for speed running while still providing feedback
🤖 Generated with [Claude Code](https://claude.ai/code)
Co-Authored-By: Claude <noreply@anthropic.com>
- Import useAbacusDisplay from AbacusDisplayContext
- Use abacusConfig.colorScheme instead of hard-coded "place-value"
- Add abacusConfig.beadShape and abacusConfig.hideInactiveBeads props
- Tutorial abacus now respects universal style controls in app nav
🤖 Generated with [Claude Code](https://claude.ai/code)
Co-Authored-By: Claude <noreply@anthropic.com>
- Remove debug console logs from TutorialPlayer getCurrentStepBeads
- Remove debug logs from stepBeadHighlights useEffect
- Remove debug logs from AbacusReact getBeadStepHighlight function
- Restore normal legacy highlighting system functionality
🤖 Generated with [Claude Code](https://claude.ai/code)
Co-Authored-By: Claude <noreply@anthropic.com>
- Replace local useReducer with TutorialContext hooks for single source of truth
- Update navigation functions to use context versions (goToStep, goToNextStep, etc.)
- Migrate multi-step actions to use context functions (advanceMultiStep, previousMultiStep)
- Wrap handleValueChange to track user interaction for step advancement logic
- Remove duplicate state management and consolidate into context pattern
🤖 Generated with [Claude Code](https://claude.ai/code)
Co-Authored-By: Claude <noreply@anthropic.com>
- Check for beads against reckoning bar (heaven beads when value ≥ 5, earth beads when value % 5 > 0)
- Include beads with direction arrows in collision detection
- Ensure tooltip never covers any bead contributing to current value or with instructional arrows
🤖 Generated with [Claude Code](https://claude.ai/code)
Co-Authored-By: Claude <noreply@anthropic.com>
- Add collision detection to check for active beads in columns to the left
- Position tooltip to the left when safe, above heaven bead when collision detected
- Remove fixed left margin since tooltips can now position above when needed
- Ensure tooltip never covers beads with direction arrows or highlights
🤖 Generated with [Claude Code](https://claude.ai/code)
Co-Authored-By: Claude <noreply@anthropic.com>
- Only mark step as completed when all pedagogical multi-steps are finished
- Prevents "Excellent Work" popup from showing when users skip to final answer
- Maintains correct behavior for single-step problems
🤖 Generated with [Claude Code](https://claude.ai/code)
Co-Authored-By: Claude <noreply@anthropic.com>
- Add PedagogicalDecompositionDisplay component with tooltip and guidance variants
- Create Radix tooltip overlay system targeting specific beads with direction arrows
- Show pedagogical decomposition with current term highlighted in both tooltip and guidance pane
- Position tooltip to left of abacus with 60px left margin to prevent clipping
- Add hover opacity effects (85% default, 100% on hover) for subtle tooltip presence
- Include lightbulb emoji and action summary in tooltip for clear guidance
🤖 Generated with [Claude Code](https://claude.ai/code)
Co-Authored-By: Claude <noreply@anthropic.com>
- Hide action description for multi-step problems to avoid duplicating pedagogical decomposition
- Remove redundant bead diff summary from guidance pane (now shown only in tooltip)
🤖 Generated with [Claude Code](https://claude.ai/code)
Co-Authored-By: Claude <noreply@anthropic.com>
- Add isSuccessPopupDismissed state that resets on step changes
- Make success overlay clickable with pointer events enabled
- Add hover effects and cursor pointer for better UX
🤖 Generated with [Claude Code](https://claude.ai/code)
Co-Authored-By: Claude <noreply@anthropic.com>
Replace the inline success message that caused abacus layout shift with a
beautiful fixed-position glassmorphism overlay featuring:
- Fixed center positioning to prevent layout shift
- Glassmorphism design with backdrop blur and gradients
- Smooth animations (pulse in, bounce emoji, shimmer effect)
- Non-interactive (pointerEvents: none) to avoid UI conflicts
- Celebration design with emoji and elegant typography
This eliminates the UX problem where completing steps moved the abacus,
while providing fantastic visual feedback for user achievements.
🤖 Generated with [Claude Code](https://claude.ai/code)
Co-Authored-By: Claude <noreply@anthropic.com>
Add findTopmostBeadWithArrows helper function that filters beads to only
include those with actual direction indicators, preventing tooltips from
appearing on irrelevant beads without highlighting.
🤖 Generated with [Claude Code](https://claude.ai/code)
Co-Authored-By: Claude <noreply@anthropic.com>
Replace prop drilling with centralized state management using React Context.
TutorialPlayer now uses TutorialProvider wrapper with custom hooks for
clean access to state, actions, and computed values while preserving
all existing functionality.
🤖 Generated with [Claude Code](https://claude.ai/code)
Co-Authored-By: Claude <noreply@anthropic.com>
- Enhanced main guidance container with gradient backgrounds and glassmorphism effects
- Added layered shadows, backdrop blur, and subtle gradient overlays
- Improved typography for heading, decomposition text, and instructions
- Enhanced mathematical term highlighting with gradient backgrounds and modern shadows
- Maintained same screen footprint while creating more visually appealing interface
- Applied contemporary design principles for engaging yet non-distracting presentation
🤖 Generated with [Claude Code](https://claude.ai/code)
Co-Authored-By: Claude <noreply@anthropic.com>
- Move 💡 emoji from separate paragraph to inline with suggestion text
- Add proper spacing with margin-right
- Create cleaner, more natural hint presentation
🤖 Generated with [Claude Code](https://claude.ai/code)
Co-Authored-By: Claude <noreply@anthropic.com>
- Add single 'Guidance' heading for entire tutorial help section
- Remove redundant 'Problem Breakdown:' and 'Current Step:' sub-headings
- Replace 'Next Action:' with intuitive lightbulb emoji (💡)
- Create cohesive guidance experience with less visual noise
- Maintain all functionality while improving information hierarchy
🤖 Generated with [Claude Code](https://claude.ai/code)
Co-Authored-By: Claude <noreply@anthropic.com>
- Replace unstable render-time calculations with useState timer
- Add useEffect to manage 8-second help timer lifecycle
- Reset help state when advancing to new multi-step
- Fix issue where help only appeared momentarily during bead transitions
- Simplify logic: help shows after 8 seconds if user needs to act
- Provide stable, persistent help display until step completion
🤖 Generated with [Claude Code](https://claude.ai/code)
Co-Authored-By: Claude <noreply@anthropic.com>
- Add multiStepStartTime tracking to monitor user progress
- Hide Next Action by default to reduce interface clutter
- Show help only when user appears confused or stalled:
- After 10 seconds on current step (general confusion)
- After 5 seconds if user has wrong value (specific confusion)
- Reset timer when advancing to next multi-step
- Provides contextual assistance without overwhelming users
🤖 Generated with [Claude Code](https://claude.ai/code)
Co-Authored-By: Claude <noreply@anthropic.com>
