feat(web): tune carrot dwell + cap max zoom

[naorsabag]

Summary

Two small UX tuning knobs on the canvas:

• More dwell at the destination. STEP_DURATION_BASE 2500 → 2900 in useFlowAnimation.ts. The pixel-active phase (carrot travelling along the edge) stays at 1800 ms; only the gap between steps grows — from 700 ms to 1100 ms. The destination node has more breathing room after a carrot delivery before the next step lights up.
• Less max zoom. maxZoom 6 → 5 in FlowCanvas.tsx. 6× was so close that the pixel-art sprites started feeling over-pixelated past the canvas's intended fidelity.

Test plan

• Play any flow — the gap between steps feels a touch longer; carrot travel speed unchanged.
• Pause / resume mid-step still picks up where it left off (gap-phase pause math reads from the same STEP_DURATION_BASE).
• Cmd/Ctrl-scroll past prior max — wheel now caps at 5×; visual quality stays acceptable.

🤖 Generated with Claude Code

Summary by CodeRabbit

New Features

• Added live-tunable maximum zoom control for camera movement during playback auto-focus sequences. Zoom levels can now be dynamically adjusted in real-time to suit viewing preferences, providing enhanced visual control without interrupting ongoing playback.

Chores

• Optimized autoplay step duration timing to improve overall playback pacing and transition smoothness between steps.

[coderabbitai]

Warning

Rate limit exceeded

@naorsabag has exceeded the limit for the number of commits that can be reviewed per hour. Please wait 36 minutes and 46 seconds before requesting another review.

You’ve run out of usage credits. Purchase more in the billing tab.

⌛ How to resolve this issue?

After the wait time has elapsed, a review can be triggered using the @coderabbitai review command as a PR comment. Alternatively, push new commits to this PR.

We recommend that you space out your commits to avoid hitting the rate limit.

🚦 How do rate limits work?

CodeRabbit enforces hourly rate limits for each developer per organization.

Our paid plans have higher rate limits than the trial, open-source and free plans. In all cases, we re-allow further reviews after a brief timeout.

Please see our FAQ for further information.

ℹ️ Review info

⚙️ Run configuration

Configuration used: Path: .coderabbit.yaml

Review profile: CHILL

Plan: Pro Plus

Run ID: 4f0916af-f1bf-4824-97e1-70339131068d

📥 Commits

Reviewing files that changed from the base of the PR and between 7d72f3d and 738abde.

📒 Files selected for processing (1)

• packages/web/src/components/FlowCanvas.tsx

Walkthrough

This PR adds runtime-tunable auto-zoom maximum value for playback camera movement, increases the base autoplay step duration for timing adjustments, and declares the console debug hook in types.

Changes

Canvas Zoom Tuning and Autoplay Timing

Layer / File(s)	Summary
Type Declarations for Debug Hook packages/web/src/globals.d.ts	Declares the optional window.__setMaxZoom function in the Window global interface to support the console debug hook.
Autoplay Step Duration packages/web/src/hooks/useFlowAnimation.ts	Increases STEP_DURATION_BASE from 2500 to 2900 milliseconds, adjusting the base per-step duration used in autoplay phase transition timing calculations.
Auto-Zoom Cap State and Console Tuning packages/web/src/components/FlowCanvas.tsx	Introduces autoZoomMax state in FlowCanvasInner and installs window.__setMaxZoom(n) hook to update the cap at runtime. Clears the focus guard (lastFocusKeyRef) on cap changes so the active-step focus effect re-applies immediately. The auto-zoom moveTo call now uses autoZoomMax as the zoom cap instead of a hardcoded value, with autoZoomMax added to the effect dependency array.

Estimated code review effort

🎯 2 (Simple) | ⏱️ ~8 minutes

Possibly related PRs

• naorsabag/openhop#112: Both PRs modify FlowCanvas playback auto-zoom camera behavior; the previous PR adds a capped per-step auto-zoom with UI, while this PR makes the max-zoom value live-tunable via console hook.
• naorsabag/openhop#113: Both PRs modify FlowCanvas.tsx auto-zoom/focus logic and the focus guard lastFocusKeyRef state handling.
• naorsabag/openhop#96: Both PRs modify useFlowAnimation.ts; this PR adjusts STEP_DURATION_BASE timing while the retrieved PR changes playback/resume logic in the same hook.

🚥 Pre-merge checks | ✅ 4 | ❌ 1

❌ Failed checks (1 warning)

Check name	Status	Explanation	Resolution
Docstring Coverage	⚠️ Warning	Docstring coverage is 50.00% which is insufficient. The required threshold is 80.00%.	Write docstrings for the functions missing them to satisfy the coverage threshold.

✅ Passed checks (4 passed)

Check name	Status	Explanation
Description Check	✅ Passed	Check skipped - CodeRabbit’s high-level summary is enabled.
Title check	✅ Passed	The title accurately summarizes the two main changes: tuning carrot dwell time (STEP_DURATION_BASE increase) and capping max zoom (autoZoomMax state).
Linked Issues check	✅ Passed	Check skipped because no linked issues were found for this pull request.
Out of Scope Changes check	✅ Passed	Check skipped because no linked issues were found for this pull request.

_{✏️ Tip: You can configure your own custom pre-merge checks in the settings.}

✨ Finishing Touches

🧪 Generate unit tests (beta)

• Create PR with unit tests
• Commit unit tests in branch feat/web-anim-pacing

---

Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out.

❤️ Share

• X
• Mastodon
• Reddit
• LinkedIn

_{Comment @coderabbitai help to get the list of available commands and usage tips.}