feat: Stream UI improvements — mic indicator, mic test meter, and stream control fixes

[Meganugger]

Summary

Improves the streaming UI with a mic status indicator in StreamView, fixes mic indicator overlap/centering with stream controls, and adds a manual start/stop mic test meter in settings. Also includes keyboard layout translation commits that were subsequently reverted (net effect: mic indicator + mic test meter only).

Added

• Mic active/muted indicator overlay in StreamView
• Manual start/stop mic test meter in SettingsPage for resource-efficient mic testing
• Mic test meter styles with level visualization

Updated

• StreamView.tsx — mic indicator rendering with position and state awareness
• SettingsPage.tsx — mic test meter with manual start/stop controls
• styles.css — mic indicator positioning, test meter visualization, overlap fixes

Fixed

• Mic indicator no longer overlaps with stream control buttons
• Mic indicator correctly centered in stream view
• Mic test meter now only runs when manually started (reduces resource usage)

Validation Notes

Recommended smoke checks:

• Start a stream with mic enabled and verify the mic indicator appears in StreamView
• Toggle mic during stream and verify indicator updates (active/muted states)
• Open Settings → Microphone and test the manual start/stop mic meter
• Verify mic indicator does not overlap with stream control buttons at various window sizes

[capy-ai]

Added 3 comments

[capy-ai]

[🟡 Medium]

The gain slider onChange handler attempts to interact with the running AudioContext but the code is a no-op. It reads micTestContextRef.current.destination into nodes then immediately discards it with void nodes. The actual GainNode created in startMicTest is a local variable and is never stored in a ref, so there is no way to update the gain on the live audio pipeline. Changing the gain slider while the mic test is running has no effect on the meter reading until the user stops and restarts the test.

// opennow-stable/src/renderer/src/components/SettingsPage.tsx
onChange={(e) => {
  const v = parseInt(e.target.value, 10) / 100;
  handleChange("micGain", v);
  if (micTestContextRef.current) {
    const nodes = micTestContextRef.current.destination;
    void nodes; // dead code — gain node is not accessible
  }
}}

Store the GainNode in a ref (e.g. micTestGainRef) inside startMicTest, then update micTestGainRef.current.gain.value in the slider handler.

[capy-ai]

[🟠 High]

The App.tsx diff adds imports from ./gfn/micAudioService, ./flight/FlightHidService, and ./gfn/hdrCapability, but none of these modules exist in the repository or in the PR's changed file list. These appear to be from the keyboard layout / HDR commits that the PR description states were reverted. If these imports survive in the final branch state, the build will fail with module-not-found errors. The MicAudioService class is instantiated and used extensively (.configure(), .dispose(), .onStateChange(), .getState()), so this is not just a stale import — it's load-bearing code that depends on a missing module.

// opennow-stable/src/renderer/src/App.tsx
import { MicAudioService } from "./gfn/micAudioService";
import type { MicAudioState } from "./gfn/micAudioService";
import { getFlightHidService } from "./flight/FlightHidService";
import { probeHdrCapability, shouldEnableHdr, buildInitialHdrState } from "./gfn/hdrCapability";

Either add these modules to the PR, or clean up the revert so these imports are removed.

[capy-ai]

[🟡 Medium]

In the styles.css diff, all new .mic-* CSS rules (.mic-device-select:focus, .mic-refresh-btn, .mic-test-meter-wrap, .mic-level-meter, .mic-level-meter-fill) are inserted between the last property (transform: translateY(-1px);) and the closing } of the .settings-export-logs-btn:hover rule. This places them inside the hover block. In standard CSS, nested selectors are either ignored or handled via the CSS nesting spec (limited browser support in Electron's Chromium). If unintentional, these rules will not apply as top-level selectors and the mic test meter will have no styling. Verify the mic test meter renders correctly, or move these rules outside the hover block.

/* styles.css — new rules inserted before the closing } of :hover */
  transform: translateY(-1px);

.mic-device-select:focus { ... }
.mic-level-meter { ... }
} /* ← this } closes .settings-export-logs-btn:hover */