@magmamath/students-features 1.7.9 → 1.7.10-rc.2

package/src/features/voice/playing/model/TranscriptionsDownloader.model.ts

@@ -1,13 +1,7 @@
 import { createEffect } from 'effector'
 import { TranscriptionsCollection } from './TranscriptionsCollection'
-import { TranscriptionStatus, VoicePlayerApi } from '../../types'
-import {
-  NO_AUDIO_BE_MESSAGE,
-  TRANSCRIPT_MAX_RETRIES,
-  TRANSCRIPT_RETRY_INTERVAL_MS,
-} from '../../constants'
-
-type TranscriptResult = { text: string; language?: string }
+import { VoicePlayerApi } from '../../types'
+import { fetchTranscriptWithRetry, TranscriptResult } from '../../transcript.helpers'
 
 export class TranscriptionsDownloaderModel {
   private readonly collection: TranscriptionsCollection
@@ -20,14 +14,17 @@ export class TranscriptionsDownloaderModel {
     this.api = api
   }
 
-  private async fetchTranscriptWithRetry(audioFileId: string): Promise<TranscriptResult> {
+  private async fetchTranscript(audioFileId: string): Promise<TranscriptResult> {
     const cached = this.transcriptCache.get(audioFileId)
     if (cached) return cached
 
     const existing = this.inflightFetches.get(audioFileId)
     if (existing) return existing
 
-    const promise = this.runFetchWithRetry(audioFileId)
+    const promise = fetchTranscriptWithRetry(
+      (id) => this.api.getAudioFileTranscript(id),
+      audioFileId,
+    )
       .then((result) => {
         this.transcriptCache.set(audioFileId, result)
         return result
@@ -39,25 +36,6 @@ export class TranscriptionsDownloaderModel {
     return promise
   }
 
-  private async runFetchWithRetry(audioFileId: string): Promise<TranscriptResult> {
-    for (let attempt = 0; attempt < TRANSCRIPT_MAX_RETRIES; attempt++) {
-      const response = await this.api.getAudioFileTranscript(audioFileId)
-
-      if (response.status === TranscriptionStatus.COMPLETED) {
-        return { text: response.text, language: response.language }
-      }
-
-      if (response.status === TranscriptionStatus.FAILED) {
-        return { text: NO_AUDIO_BE_MESSAGE }
-      }
-
-      if (attempt < TRANSCRIPT_MAX_RETRIES - 1) {
-        await new Promise((resolve) => setTimeout(resolve, TRANSCRIPT_RETRY_INTERVAL_MS))
-      }
-    }
-    return { text: NO_AUDIO_BE_MESSAGE }
-  }
-
   public readonly loadTranscriptForAttempt = createEffect(async (attemptNumber: number) => {
     const item = this.collection.get(attemptNumber)
     if (!item?.audioFileId) return
@@ -66,7 +44,7 @@ export class TranscriptionsDownloaderModel {
     this.collection.update(attemptNumber, { transcriptLoading: true })
 
     try {
-      const { text, language } = await this.fetchTranscriptWithRetry(item.audioFileId)
+      const { text, language } = await this.fetchTranscript(item.audioFileId)
 
       this.collection.update(attemptNumber, {
         transcript: text,

package/src/features/voice/recording/components/VoiceRecordWithTranscript.tsx

@@ -0,0 +1,52 @@
+import React from 'react'
+import { StyleProp, StyleSheet, View, ViewStyle } from 'react-native'
+
+import { SPACING } from '@magmamath/react-native-ui'
+import { useUnit } from 'effector-react'
+
+import { RecordButtonVariant } from '../../types'
+import { VoiceRecordWithTranscriptModel } from '../model/VoiceRecordWithTranscript.model'
+import { VoiceRecord } from './VoiceRecord'
+import { VoiceTranscriptPanel } from './VoiceTranscriptPanel'
+
+type VoiceRecordWithTranscriptProps = {
+  model: VoiceRecordWithTranscriptModel
+  buttonVariant: RecordButtonVariant
+  style?: StyleProp<ViewStyle>
+  panelStyle?: StyleProp<ViewStyle>
+}
+
+// Drop-in replacement for VoiceRecord that opens the waveform/transcript panel
+// to the right of the record control (per the "Voice on Drawboard" design).
+export const VoiceRecordWithTranscript = ({
+  model,
+  buttonVariant,
+  style,
+  panelStyle,
+}: VoiceRecordWithTranscriptProps) => {
+  const metering = useUnit(model.record.recorderModel.$metering)
+
+  return (
+    <View style={[styles.container, style]}>
+      <VoiceRecord model={model.record} buttonVariant={buttonVariant} />
+      <VoiceTranscriptPanel
+        model={model.panel}
+        metering={metering}
+        style={[styles.panel, panelStyle]}
+      />
+    </View>
+  )
+}
+
+const styles = StyleSheet.create({
+  // Hug the record control so the panel's `left: 100%` lands right next to it
+  container: {
+    alignSelf: 'flex-start',
+  },
+  panel: {
+    position: 'absolute',
+    left: '100%',
+    top: 0,
+    marginLeft: SPACING[200],
+  },
+})

package/src/features/voice/recording/components/VoiceTranscriptPanel.tsx

@@ -0,0 +1,293 @@
+import React, { useEffect, useState } from 'react'
+import {
+  LayoutChangeEvent,
+  StyleProp,
+  StyleSheet,
+  TouchableOpacity,
+  View,
+  ViewStyle,
+} from 'react-native'
+
+import {
+  BORDER_RADIUS,
+  CaretDownIcon,
+  COLORS,
+  Loader,
+  LoaderColor,
+  LoaderSize,
+  ScrollableListScrollView,
+  SHADOWS,
+  SPACING,
+  Typography,
+} from '@magmamath/react-native-ui'
+import { useUnit } from 'effector-react'
+import Animated, {
+  Easing,
+  FadeIn,
+  FadeOut,
+  useAnimatedStyle,
+  useSharedValue,
+  withRepeat,
+  withTiming,
+} from 'react-native-reanimated'
+
+import { useText } from '../../../../i18n/i18n'
+import { VOICE_TRANSCRIPT_PANEL } from '../../constants'
+import { VoiceTranscriptContent } from '../../playing/components/VoiceTranscriptContent'
+import { useTranscriptPanelAnimation } from '../hooks/useTranscriptPanelAnimation'
+import { useVoiceWaveform } from '../hooks/useVoiceWaveform'
+import { VoiceTranscriptPanelModel } from '../model/VoiceTranscriptPanel.model'
+import { VoiceWaveform } from './VoiceWaveform'
+
+const AnimatedTouchableOpacity = Animated.createAnimatedComponent(TouchableOpacity)
+
+const RECORDING_DOT_SIZE = 8
+const BLINK_DURATION_MS = 700
+const RECORDING_DOT_MIN_OPACITY = 0.2
+const CARET_SIZE = 22
+const DIMMED_OPACITY = VOICE_TRANSCRIPT_PANEL.DIMMED_OPACITY
+
+const PREVIEW_LINE_COUNT = 3
+// Cosmetic only (fade overlay height) — roughly the Typography h8 line height
+const PREVIEW_LINE_HEIGHT = 19.6
+const PREVIEW_FADE_WIDTH = 72
+const PREVIEW_FADE_STRIPES_COUNT = 12
+// Rounding slack when comparing the two measured text heights
+const PREVIEW_HEIGHT_TOLERANCE = 2
+
+const WAVEFORM_WIDTH =
+  VOICE_TRANSCRIPT_PANEL.WIDTH - SPACING[200] * 2 - RECORDING_DOT_SIZE - SPACING[200]
+
+const RecordingDot = () => {
+  const opacity = useSharedValue(1)
+
+  useEffect(() => {
+    opacity.value = withRepeat(
+      withTiming(RECORDING_DOT_MIN_OPACITY, {
+        duration: BLINK_DURATION_MS,
+        easing: Easing.inOut(Easing.ease),
+      }),
+      -1,
+      true,
+    )
+  }, [opacity])
+
+  // Explicit deps: consumers compile this library without the Reanimated Babel plugin
+  const animatedStyle = useAnimatedStyle(() => ({ opacity: opacity.value }), [opacity])
+
+  return <Animated.View style={[styles.recordingDot, animatedStyle]} />
+}
+
+// Stripes of the panel background with rising opacity imitate the text
+// dissolving at the end of the last preview line (no gradient dependency)
+const PreviewLineFade = () => (
+  <View style={styles.previewFade} pointerEvents="none">
+    {Array.from({ length: PREVIEW_FADE_STRIPES_COUNT }, (_, index) => (
+      <View
+        key={index}
+        style={[styles.previewFadeStripe, { opacity: (index + 1) / PREVIEW_FADE_STRIPES_COUNT }]}
+      />
+    ))}
+  </View>
+)
+
+type VoiceTranscriptPanelProps = {
+  model: VoiceTranscriptPanelModel
+  metering: number | null
+  style?: StyleProp<ViewStyle>
+}
+
+export const VoiceTranscriptPanel = ({ model, metering, style }: VoiceTranscriptPanelProps) => {
+  const t = useText()
+  const { flags, transcript, hasError, isExpanded, isDimmed } = useUnit({
+    flags: model.$flags,
+    transcript: model.$transcript,
+    hasError: model.$hasError,
+    isExpanded: model.dropdown.$isExpanded,
+    isDimmed: model.$isDimmed,
+  })
+
+  const [fullTextHeight, setFullTextHeight] = useState(0)
+  const [previewHeight, setPreviewHeight] = useState(0)
+
+  const levels = useVoiceWaveform({ metering, isActive: flags.isRecording })
+  const panelAnimation = useTranscriptPanelAnimation(isExpanded)
+
+  if (!flags.isOpen) return null
+
+  const transcriptText = hasError ? t('voice.transcriptNotAvailable') : transcript
+
+  // Both heights are measured, so the comparison stays correct regardless of
+  // the text's font metrics or paddings
+  const isTruncated =
+    fullTextHeight > 0 &&
+    previewHeight > 0 &&
+    fullTextHeight > previewHeight + PREVIEW_HEIGHT_TOLERANCE
+
+  const measureFullText = (event: LayoutChangeEvent) => {
+    const { height } = event.nativeEvent.layout
+    if (height > 0) setFullTextHeight(height)
+  }
+
+  const measurePreview = (event: LayoutChangeEvent) => {
+    const { height } = event.nativeEvent.layout
+    // Expanded shows the full text — only the collapsed (3-line) layout counts
+    if (height > 0 && !isExpanded) setPreviewHeight(height)
+  }
+
+  return (
+    <Animated.View
+      entering={FadeIn}
+      exiting={FadeOut}
+      style={[styles.container, panelAnimation.containerAnimatedStyle, style]}
+    >
+      {flags.isRecording && (
+        <View style={styles.recordingRow}>
+          <RecordingDot />
+          <VoiceWaveform levels={levels} width={WAVEFORM_WIDTH} />
+        </View>
+      )}
+
+      {flags.isProcessing && (
+        <View style={styles.processing}>
+          <Loader size={LoaderSize.SMALL} color={LoaderColor.BLUE} />
+          <Typography variant="h8" style={styles.processingText}>
+            {`${t('voice.preparingTranscript')}...`}
+          </Typography>
+        </View>
+      )}
+
+      {flags.isDone && (
+        <View>
+          {/* Invisible twin at the preview width measures the untruncated
+              text height — onTextLayout is not implemented on web */}
+          <View
+            style={[styles.contentCollapsed, styles.fullTextMeasure]}
+            pointerEvents="none"
+            onLayout={measureFullText}
+          >
+            <VoiceTranscriptContent text={transcriptText} isLoading={false} />
+          </View>
+          <Typography variant="h5" style={[styles.title, isDimmed && styles.dimmed]}>
+            {t('voice.transcriptions')}
+          </Typography>
+          {/* The text stays mounted across toggles and snaps to its final
+              fixed width; the panel frame catches up with explicit
+              width/height animations, clipping via overflow: hidden. */}
+          <Animated.View style={[styles.transcriptBody, panelAnimation.bodyAnimatedStyle]}>
+            <View
+              style={[
+                styles.transcriptBodyInner,
+                isExpanded ? styles.contentExpanded : styles.contentCollapsed,
+              ]}
+              onLayout={panelAnimation.onContentLayout}
+            >
+              <ScrollableListScrollView
+                style={styles.transcriptScroll}
+                scrollbarWidth={VOICE_TRANSCRIPT_PANEL.SCROLLBAR_WIDTH}
+                scrollEnabled={isExpanded}
+                hideShadow
+              >
+                <View onLayout={measurePreview}>
+                  <VoiceTranscriptContent
+                    text={transcriptText}
+                    isLoading={false}
+                    numberOfLines={isExpanded ? undefined : PREVIEW_LINE_COUNT}
+                    dimmed={isDimmed}
+                  />
+                </View>
+              </ScrollableListScrollView>
+              {!isExpanded && isTruncated && <PreviewLineFade />}
+            </View>
+          </Animated.View>
+          {isTruncated && (
+            <AnimatedTouchableOpacity
+              style={[styles.expandButton, panelAnimation.caretAnimatedStyle]}
+              onPress={() => model.dropdown.toggleExpand()}
+            >
+              <CaretDownIcon size={CARET_SIZE} />
+            </AnimatedTouchableOpacity>
+          )}
+        </View>
+      )}
+    </Animated.View>
+  )
+}
+
+const styles = StyleSheet.create({
+  container: {
+    padding: SPACING[200],
+    borderRadius: BORDER_RADIUS[300],
+    backgroundColor: COLORS.NEUTRAL_1,
+    overflow: 'hidden',
+    ...SHADOWS['4'],
+  },
+  recordingRow: {
+    flexDirection: 'row',
+    alignItems: 'center',
+    gap: SPACING[200],
+  },
+  recordingDot: {
+    width: RECORDING_DOT_SIZE,
+    height: RECORDING_DOT_SIZE,
+    borderRadius: RECORDING_DOT_SIZE / 2,
+    backgroundColor: COLORS.PRIMARY_RED,
+  },
+  title: {
+    color: COLORS.NEUTRAL_10,
+    marginLeft: SPACING[100],
+  },
+  dimmed: {
+    opacity: DIMMED_OPACITY,
+  },
+  transcriptBody: {
+    overflow: 'hidden',
+  },
+  // Absolute so its measured height stays the content's natural height,
+  // independent of the animated wrapper height around it
+  transcriptBodyInner: {
+    position: 'absolute',
+    top: 0,
+    left: 0,
+  },
+  // Fixed per-state widths: the text snaps to its final layout once while the
+  // panel frame animates around it
+  contentCollapsed: {
+    width: VOICE_TRANSCRIPT_PANEL.WIDTH - SPACING[200] * 2,
+  },
+  fullTextMeasure: {
+    position: 'absolute',
+    opacity: 0,
+  },
+  contentExpanded: {
+    width: VOICE_TRANSCRIPT_PANEL.WIDTH_DONE - SPACING[200] * 2,
+  },
+  transcriptScroll: {
+    maxHeight: VOICE_TRANSCRIPT_PANEL.TRANSCRIPT_MAX_HEIGHT,
+  },
+  previewFade: {
+    position: 'absolute',
+    right: SPACING[200],
+    bottom: SPACING[100],
+    width: PREVIEW_FADE_WIDTH,
+    height: PREVIEW_LINE_HEIGHT,
+    flexDirection: 'row',
+  },
+  previewFadeStripe: {
+    flex: 1,
+    backgroundColor: COLORS.NEUTRAL_1,
+  },
+  expandButton: {
+    justifyContent: 'center',
+    alignItems: 'center',
+  },
+  processing: {
+    alignItems: 'center',
+    justifyContent: 'center',
+    gap: SPACING[200],
+    paddingVertical: SPACING[200],
+  },
+  processingText: {
+    color: COLORS.NEUTRAL_7,
+  },
+})

package/src/features/voice/recording/components/VoiceWaveform.tsx

@@ -0,0 +1,102 @@
+import React, { useEffect } from 'react'
+import { StyleSheet, View } from 'react-native'
+
+import { COLORS } from '@magmamath/react-native-ui'
+import Animated, {
+  Easing,
+  useAnimatedStyle,
+  useSharedValue,
+  withTiming,
+} from 'react-native-reanimated'
+
+import { VOICE_WAVEFORM } from '../../constants'
+
+type VoiceWaveformProps = {
+  levels: number[]
+  width: number
+}
+
+const BAR_STEP = VOICE_WAVEFORM.BAR_WIDTH + VOICE_WAVEFORM.BAR_GAP
+// One extra bar is rendered off-screen on the right and slides in as the row
+// shifts — that is what makes the scroll continuous instead of stepping
+const OFFSCREEN_BARS = 1
+
+const getVisibleBarsCount = (width: number) => {
+  const barsForWidth = Math.floor(width / BAR_STEP)
+  return Math.max(VOICE_WAVEFORM.MIN_BARS, barsForWidth)
+}
+
+const getBarHeight = (level: number) =>
+  Math.max(
+    VOICE_WAVEFORM.MIN_BAR_HEIGHT,
+    Math.round(level * (VOICE_WAVEFORM.HEIGHT - VOICE_WAVEFORM.AMPLITUDE_PADDING)),
+  )
+
+// Older bars (toward the left) fade out, mirroring the dotted lead-in in the
+// design. Opacity ramps from 0 up to full across the first FADE_RATIO of bars.
+const getBarOpacity = (index: number, count: number) => {
+  const fadeBars = count * VOICE_WAVEFORM.FADE_RATIO
+  return Math.min(1, index / fadeBars)
+}
+
+export const VoiceWaveform = ({ levels, width }: VoiceWaveformProps) => {
+  const count = getVisibleBarsCount(width)
+  const visibleLevels = levels.slice(-(count + OFFSCREEN_BARS))
+
+  // Conveyor-belt motion: each new sample shifts the buffer one slot left and
+  // snaps the row back, then the row glides left by one step until the next
+  // sample lands — the two cancel out into continuous movement.
+  const shift = useSharedValue(0)
+
+  useEffect(() => {
+    shift.value = 0
+    shift.value = withTiming(-BAR_STEP, {
+      duration: VOICE_WAVEFORM.SAMPLE_INTERVAL_MS,
+      easing: Easing.linear,
+    })
+  }, [levels, shift])
+
+  // Explicit deps: consumers compile this library without the Reanimated Babel plugin
+  const rowAnimatedStyle = useAnimatedStyle(
+    () => ({ transform: [{ translateX: shift.value }] }),
+    [shift],
+  )
+
+  return (
+    <View style={[styles.container, { width }]}>
+      <Animated.View style={[styles.row, rowAnimatedStyle]}>
+        {visibleLevels.map((level, index) => (
+          <View
+            key={index}
+            style={[
+              styles.bar,
+              { height: getBarHeight(level), opacity: getBarOpacity(index, visibleLevels.length) },
+            ]}
+          />
+        ))}
+      </Animated.View>
+    </View>
+  )
+}
+
+const styles = StyleSheet.create({
+  container: {
+    height: VOICE_WAVEFORM.HEIGHT,
+    overflow: 'hidden',
+  },
+  // Hangs one step past the right edge so the newest bar starts hidden
+  row: {
+    position: 'absolute',
+    top: 0,
+    bottom: 0,
+    right: -BAR_STEP,
+    flexDirection: 'row',
+    alignItems: 'center',
+    gap: VOICE_WAVEFORM.BAR_GAP,
+  },
+  bar: {
+    width: VOICE_WAVEFORM.BAR_WIDTH,
+    borderRadius: VOICE_WAVEFORM.BAR_WIDTH / 2,
+    backgroundColor: COLORS.NEUTRAL_7,
+  },
+})

package/src/features/voice/recording/hooks/useTranscriptPanelAnimation.ts

@@ -0,0 +1,49 @@
+import { LayoutChangeEvent } from 'react-native'
+
+import {
+  useAnimatedStyle,
+  useSharedValue,
+  withTiming,
+} from 'react-native-reanimated'
+
+import { VOICE_TRANSCRIPT_PANEL } from '../../constants'
+
+const TIMING = { duration: 170 } as const
+
+// Width and height are animated as explicit numbers instead of reanimated
+// layout transitions: on web those run as FLIP animations that scale the
+// subtree, visibly stretching the text while the panel resizes.
+export const useTranscriptPanelAnimation = (isExpanded: boolean) => {
+  const contentHeight = useSharedValue(0)
+
+  const onContentLayout = (event: LayoutChangeEvent) => {
+    const height = event.nativeEvent.layout.height
+    if (height <= 0) return
+    contentHeight.value =
+      contentHeight.value === 0 ? height : withTiming(height, TIMING)
+  }
+
+  const containerAnimatedStyle = useAnimatedStyle(
+    () => ({
+      width: withTiming(
+        isExpanded ? VOICE_TRANSCRIPT_PANEL.WIDTH_DONE : VOICE_TRANSCRIPT_PANEL.WIDTH,
+        TIMING,
+      ),
+    }),
+    [isExpanded],
+  )
+
+  const bodyAnimatedStyle = useAnimatedStyle(
+    () => (contentHeight.value === 0 ? {} : { height: contentHeight.value }),
+    [contentHeight],
+  )
+
+  const caretAnimatedStyle = useAnimatedStyle(
+    () => ({
+      transform: [{ rotate: withTiming(isExpanded ? '180deg' : '0deg', TIMING) }],
+    }),
+    [isExpanded],
+  )
+
+  return { onContentLayout, containerAnimatedStyle, bodyAnimatedStyle, caretAnimatedStyle }
+}

package/src/features/voice/recording/hooks/useVoiceRecorder.ts

@@ -3,11 +3,34 @@ import { VoiceRecordModel } from '../model/VoiceRecord.model'
 import { useEffect } from 'react'
 import { IS_WEB } from '@magmamath/react-native-ui'
 import { VOICE_RECORDER_MAX_DURATION_MS, VoiceRecorderState } from '../../constants'
-import { addAudioInputsListenerWeb, getAvailableInputs } from '../../helpers'
+import {
+  addAudioInputsListenerWeb,
+  createWebMeteringMonitor,
+  getAvailableInputs,
+} from '../../helpers'
+import { METERING_UPDATE_INTERVAL_MS } from '../../constants'
+
+// Metering powers the live recording waveform (recorderState.metering).
+// Only native respects it — on web the level is measured by
+// createWebMeteringMonitor instead.
+const RECORDING_OPTIONS = {
+  ...RecordingPresets.LOW_QUALITY,
+  isMeteringEnabled: true,
+}
 
 export const useVoiceRecorder = (model: VoiceRecordModel) => {
-  const recorder = useAudioRecorder(RecordingPresets.LOW_QUALITY, model.recordingStatusUpdate)
-  const recorderState = useAudioRecorderState(recorder)
+  const recorder = useAudioRecorder(RECORDING_OPTIONS, model.recordingStatusUpdate)
+  const recorderState = useAudioRecorderState(recorder, METERING_UPDATE_INTERVAL_MS)
+
+  useEffect(() => {
+    if (IS_WEB) return
+    model.recorderModel.setMetering(recorderState.metering ?? null)
+  }, [recorderState.metering, model.recorderModel])
+
+  useEffect(() => {
+    if (!IS_WEB || !recorderState.isRecording) return
+    return createWebMeteringMonitor(recorder, model.recorderModel.setMetering)
+  }, [recorderState.isRecording, recorder, model.recorderModel])
 
   useEffect(() => {
     if (

package/src/features/voice/recording/hooks/useVoiceWaveform.ts

@@ -0,0 +1,46 @@
+import { useEffect, useRef, useState } from 'react'
+
+import { VOICE_WAVEFORM } from '../../constants'
+import { normalizeMetering } from '../../helpers'
+
+type UseVoiceWaveformParams = {
+  metering: number | null
+  isActive: boolean
+}
+
+const createSilentBuffer = () =>
+  new Array<number>(VOICE_WAVEFORM.BUFFER_SIZE).fill(VOICE_WAVEFORM.MIN_LEVEL)
+
+// Keeps a rolling buffer of normalized levels that scrolls right-to-left while
+// recording. We sample on a fixed interval (rather than on every metering
+// update) so the scroll speed stays constant regardless of the recorder's
+// status cadence. The latest metering value is read from a ref to avoid
+// resubscribing the interval on each change. Levels are low-pass filtered so
+// neighboring bars flow into each other instead of jumping.
+export const useVoiceWaveform = ({ metering, isActive }: UseVoiceWaveformParams) => {
+  const meteringRef = useRef(metering)
+  meteringRef.current = metering
+
+  const smoothedLevelRef = useRef(VOICE_WAVEFORM.MIN_LEVEL)
+  const [levels, setLevels] = useState<number[]>(createSilentBuffer)
+
+  useEffect(() => {
+    if (!isActive) {
+      smoothedLevelRef.current = VOICE_WAVEFORM.MIN_LEVEL
+      setLevels(createSilentBuffer())
+      return
+    }
+
+    const intervalId = setInterval(() => {
+      const target = normalizeMetering(meteringRef.current)
+      smoothedLevelRef.current +=
+        (target - smoothedLevelRef.current) * VOICE_WAVEFORM.LEVEL_SMOOTHING
+      const level = Math.max(VOICE_WAVEFORM.MIN_LEVEL, smoothedLevelRef.current)
+      setLevels((prev) => [...prev.slice(1), level])
+    }, VOICE_WAVEFORM.SAMPLE_INTERVAL_MS)
+
+    return () => clearInterval(intervalId)
+  }, [isActive])
+
+  return levels
+}

package/src/features/voice/recording/model/Recorder.model.ts

@@ -18,6 +18,7 @@ export class RecorderModel<T = unknown> {
   public readonly setVoiceRecordState = createEvent<VoiceRecorderState>()
   public readonly setAvailableInputs = createEvent<AvailableAudioInputs>()
   public readonly setLastKnownDurationMs = createEvent<number>()
+  public readonly setMetering = createEvent<number | null>()
 
   public readonly $voiceRecordState = restore(
     this.setVoiceRecordState,
@@ -25,6 +26,8 @@ export class RecorderModel<T = unknown> {
   ).reset(this.reset)
   public readonly $availableInputs = restore(this.setAvailableInputs, [])
   public readonly $lastKnownDurationMs = restore(this.setLastKnownDurationMs, 0).reset(this.reset)
+  // Live input level in dBFS while recording (powers the waveform)
+  public readonly $metering = restore(this.setMetering, null).reset(this.reset)
 
   public readonly start = createEffect(async () => {
     try {