Optimize TranscriptionDisplay scrolling and BufferWorker memory usage

[ysdede]

This PR addresses performance issues related to scrolling in the transcript display and memory usage in the BufferWorker.

1. TranscriptionDisplay Optimization:

   • The MutationObserver was causing forced reflows by triggering layout reads/writes on every DOM mutation.
   • Replaced it with a createEffect that tracks props.confirmedText and props.pendingText. This ensures scrolling happens only when relevant data changes, and requestAnimationFrame is still used to coalesce updates and prevent layout thrashing.

2. BufferWorker Memory Reduction:

   • The audio and mel layers in BufferWorker are currently unused by the application logic (data flows directly via MelWorker and AudioEngine).
   • Reduced their maxDurationSec configuration in App.tsx from 120s to 1s. This significantly reduces the memory allocated for these circular buffers (saving ~3.3MB) while keeping the layers registered to satisfy type constraints.

3. TenVADWorkerClient Cleanup:

   • Removed temporary debug logs.

Tests passed successfully.

---

PR created automatically by Jules for task 13293483822858574319 started by @ysdede

[ysdede]

Review Summary (Post r1→master merge)

Status: ✅ MERGEABLE

Changes: Two optimizations:

1. TranscriptionDisplay scrolling

Replaces \MutationObserver\ with SolidJS \createEffect\ for auto-scrolling:

• Removes \onMount/\onCleanup\ lifecycle for MutationObserver
• Uses reactive \createEffect\ tracking \confirmedText\ and \pendingText\
• More idiomatic SolidJS — leverages the reactivity system instead of DOM observation

2. BufferWorker memory optimization

Reduces unused buffer layer sizes from 120s to 1s:

• \�udio\ and \mel\ layers in BufferWorker were allocated for 120s but are unused (data flows via MelWorker/AudioEngine directly)
• Reduces to 1s to satisfy type constraints while saving ~3.3MB of memory
• \�nergyVad\ and \inferenceVad\ layers remain at 120s (actively used)

Assessment: Both changes are well-motivated:

1. MutationObserver is a DOM-level API that fights SolidJS's reactive model. \createEffect\ is the correct approach.
2. The memory saving is meaningful for mobile/low-end devices. The comment documents why the layers are kept at minimal size.

Recommendation: ✅ Merge — Good performance and idiomatic improvements

[google-labs-jules]

Review Summary (Post r1→master merge)

Status: ✅ MERGEABLE

Changes: Two optimizations:

1. TranscriptionDisplay scrolling

Replaces \MutationObserver\ with SolidJS \createEffect\ for auto-scrolling:

• Removes \onMount/\onCleanup\ lifecycle for MutationObserver
• Uses reactive \createEffect\ tracking \confirmedText\ and \pendingText\
• More idiomatic SolidJS — leverages the reactivity system instead of DOM observation

2. BufferWorker memory optimization

Reduces unused buffer layer sizes from 120s to 1s:

• \�udio\ and \mel\ layers in BufferWorker were allocated for 120s but are unused (data flows via MelWorker/AudioEngine directly)
• Reduces to 1s to satisfy type constraints while saving ~3.3MB of memory
• \�nergyVad\ and \inferenceVad\ layers remain at 120s (actively used)

Assessment: Both changes are well-motivated:

1. MutationObserver is a DOM-level API that fights SolidJS's reactive model. \createEffect\ is the correct approach.
2. The memory saving is meaningful for mobile/low-end devices. The comment documents why the layers are kept at minimal size.

Recommendation: ✅ Merge — Good performance and idiomatic improvements

Thank you for the review! I'm glad the changes align with the project's performance goals and idiomatic SolidJS usage.

[ysdede]

LGTM. The replacement of MutationObserver with a reactive createEffect is highly idiomatic for SolidJS and avoids unnecessary DOM-level polling. The memory reduction in BufferWorker (from 120s to 1s for unused layers) is a significant win for low-end device performance. Recommend merging.

[ysdede]

Related update: PR #143 continues incremental transcript/UI performance work and references #92 as related prior context.

[ysdede]

Superseded by PR #134 which handles the display scrolling optimization more effectively using Solid primitives.