fix(web): avoid blocking image preparation conversions

[Bil0000]

What Changed

Keep image encodings as Blobs until the caller needs a data URL or File. Use asynchronous canvas blob encoding and FileReader in place of synchronous toDataURL and JavaScript base64 conversion. Check size budgets from blob bytes before reading the output. This PR contains only the image-preparation change split from #13261.

Why

Preparing a large pasted image could block the web UI during canvas conversion and base64 work. The new path removes those synchronous conversions and avoids reading oversized source bytes before compression. Small images keep their original bytes.

Verification

• The dedicated branch changes only ChatView.logic.ts, imageCompression.ts, and its focused test file.
• An isolated fake-data smoke check passed for the exact data URL boundary, untouched small bytes, oversized source compression without reading original bytes, and output file type and size.
• The normal local test, lint, and typecheck could not run with the available older checkout dependencies; CI on this PR is the verification gate. No browser timing claim or media is included because the change has no visible UI state and the local browser test setup was unavailable.

Checklist

• This PR is small and focused
• I explained what changed and why
• Screenshots and video are not applicable to this invisible preparation path

Model: GPT-6. Harness: Codex.

Summary by CodeRabbit

• Bug Fixes
  • Improved image compression and encoding to respect the format actually produced, helping ensure images are handled correctly when WebP isn’t available.
  • Improved handling of unreadable images during stash compression, so failures are reported instead of disrupting the process.
  • Reduced unnecessary data-URL conversion during image processing while preserving it where needed.

[macroscopeapp]

Approvability

Verdict: Approved at 4a6750c

Macroscope's review found this PR approvable — This is a focused image-preparation bug fix that replaces blocking canvas/base64 work with asynchronous Blob-based processing while preserving existing attachment and stash interfaces. Its production impact is confined to the existing image utility, with targeted coverage for browser canvas modes, size boundaries, and pass-through behavior.

^{You can add or adjust custom eligibility rules. Learn more.}

[coderabbitai]

Navigate logical layers of code changes, visualize relationships, and explore their blast radius.

No actionable comments were generated in the recent review. 🎉

ℹ️ Recent review info

⚙️ Run configuration

Configuration used: Repository: pingdotgg/t3code/.coderabbit.yaml

Review profile: CHILL

Plan: Advanced

Run ID: f9d47cd3-1863-4df1-b242-329db89fed5f

📥 Commits

Reviewing files that changed from the base of the PR and between 894d334 and 4a6750c.

📒 Files selected for processing (3)

• apps/web/src/components/ChatView.logic.ts
• apps/web/src/lib/imageCompression.test.ts
• apps/web/src/lib/imageCompression.ts

Included review availability: Your plan provides up to 10 included reviews per hour; 5 remain after this review.

---

📝 Walkthrough

Walkthrough

Image encoding now produces blobs and estimates data-URL length from blob metadata. Thumbnail and stash paths convert blobs to data URLs where needed. Byte-limited compression creates files directly from encoded blobs. Tests cover canvas encoding and stash compression outcomes.

Changes

Image Encoding and Compression

Layer / File(s)	Summary
Blob encoding and budget calculations apps/web/src/lib/imageCompression.ts	Canvas encoding and compression loops now pass blobs. Budget checks use estimated data-URL lengths.
Stash results and image consumers apps/web/src/lib/imageCompression.ts, apps/web/src/components/ChatView.logic.ts, apps/web/src/lib/imageCompression.test.ts	Stash compression reads the selected blob as a data URL and maps read or encoding exceptions to "unreadable". Thumbnails use the shared data-URL helper, and byte-limited compression creates a file from the encoded blob. ChatView.logic.ts re-exports the helper. Tests cover canvas encoding, budget boundaries, unreadable input, and oversized sources.

Priority: ➖ Normal

Estimated code review effort: 3 (Moderate) | ~20 minutes

Change: Bug fix

Suggested reviewers: t3dotgg

Merge Risk: ⚪ Minimal · up to 4a675

The reviewed image-preparation changes have no established merge-blocking issue; proceed with normal checks.

🚥 Pre-merge checks | ✅ 4 | ❌ 1

❌ Failed checks (1 warning)

Check name	Status	Explanation	Resolution
Docstring Coverage	⚠️ Warning	Docstring coverage is 66.67% which is insufficient. The required threshold is 80.00%. Docstring coverage is scoped to functions touched by this diff. Analyzed 12 functions across 3 files.	Write docstrings for the functions missing them to satisfy the coverage threshold.

✅ Passed checks (4 passed)

Check name	Status	Explanation
Title check	✅ Passed	The title clearly and concisely describes the main change: preventing blocking image-preparation conversions in the web application.
Description check	✅ Passed	The description explains what changed, why it changed, verification performed, scope, and checklist status. It correctly states that UI screenshots and video are not applicable because the change has …
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.

• Fix all pre-merge checks with AI

✨ Finishing Touches

🧪 Generate unit tests (beta)

• Create a new PR

---

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