feat: implement blob caching for cutout images

[oliveirara]

• add blob caching to avoid re-fetching images
• add utility function to revoke blob URLs
• clean up blob URLs when components unmount or data changes
• fallback to direct URL if fetch fails
• bypass zrok interstitial by adding headers

Summary by CodeRabbit

• New Features

  • Faster image loading via caching of cutout images.
  • Automatic bypass for ngrok/zrok interstitials to improve reliability.

• Bug Fixes

  • Prevented memory leaks by revoking image blob URLs during updates and on unmount.
  • More robust image loading with graceful fallbacks when fetches fail.
  • Avoids unnecessary retries for blob-based image sources.

[coderabbitai]

Caution

Review failed

The pull request is closed.

Walkthrough

Adds blob URL caching for cutout images in the API, exposes a revoke function, and integrates cleanup in CutoutGrid and Gallery to revoke blob URLs on change/unmount. Extends error handling for ngrok/zrok bypass. Development proxy behavior remains unchanged.

Changes

Cohort / File(s)	Summary
API: Blob URL cache and revoke dashboard/src/api.ts	Implements a Map-based blob URL cache, production-only fetch-to-blob flow with cache lookup, fallback to direct URL on failure, debug logs via VITE_DEBUG_CUTOUTS, and exports revokeBlobUrl(url: string). DEV path unchanged.
CutoutGrid: Cleanup + error handling dashboard/src/components/CutoutGrid.tsx	Adds useEffect cleanup to revoke blob URLs via revokeBlobUrl. Adjusts error handler to skip retries for blob URLs and to append skip_zrok_interstitial=true for ngrok/zrok. Keeps extension-fallback logic.
Gallery: Cleanup on reload/unmount dashboard/src/components/Gallery.tsx	Imports and uses revokeBlobUrl to revoke existing image URLs before reloading and on unmount. Core loading logic unchanged; adds preventive memory cleanup.

Sequence Diagram(s)

sequenceDiagram
  autonumber
  actor U as UI Component (CutoutGrid/Gallery)
  participant A as API.getCutoutObject
  participant C as Blob Cache (Map)
  participant B as Browser

  U->>A: request cutout URL
  A->>C: check cache by key
  alt cache hit
    C-->>A: blob: URL
    A-->>U: blob: URL
  else cache miss
    A->>B: fetch(image URL with bypass headers)
    alt fetch ok
      B-->>A: Response
      A->>B: createObjectURL(blob)
      B-->>A: blob: URL
      A->>C: cache(key, blob: URL)
      A-->>U: blob: URL
    else fetch fails
      A-->>U: direct image URL (fallback)
    end
  end

  note over U,B: On unmount or data change
  U->>A: revokeBlobUrl(blob: URL)
  A->>C: remove cache entry for URL
  A->>B: URL.revokeObjectURL(blob: URL)

Loading

Estimated code review effort

🎯 3 (Moderate) | ⏱️ ~25 minutes

Poem

A bunny caches blobs with care,
Nibbles leaks right through the air.
Fetch, convert—then hop to store,
Revoke the URL, memory no more.
Grid and Gallery thump in sync—
Clean trails left where images blink. 🥕🐇

Tip

👮 Agentic pre-merge checks are now available in preview!

Pro plan users can now enable pre-merge checks in their settings to enforce checklists before merging PRs.

  - Custom agentic checks – Define your own rules using CodeRabbit’s advanced agentic capabilities to enforce organization-specific policies and workflows. For example, you can instruct CodeRabbit’s agent to verify that API documentation is updated whenever API schema files are modified in a PR. Note: Upto 5 custom checks are currently allowed during the preview period. Pricing for this feature will be announced in a few weeks.
  - Built-in checks – Quickly apply ready-made checks to enforce title conventions, require pull request descriptions that follow templates, validate linked issues for compliance, and more.

---

📜 Recent review details

Configuration used: CodeRabbit UI

Review profile: CHILL

Plan: Pro

📥 Commits

Reviewing files that changed from the base of the PR and between 1b4e52a and aa1f85f.

📒 Files selected for processing (3)

• dashboard/src/api.ts (1 hunks)
• dashboard/src/components/CutoutGrid.tsx (3 hunks)
• dashboard/src/components/Gallery.tsx (3 hunks)

✨ Finishing Touches

• 📝 Generate Docstrings

🧪 Generate unit tests

• Create PR with unit tests
• Post copyable unit tests in a comment
• Commit unit tests in branch feat/fix-zrok-issue

---

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.}