Skip to content

Recorder HUD + AI Models redesign#99

Merged
karansinghgit merged 20 commits into
mainfrom
feat/recorder-models-redesign
Jul 3, 2026
Merged

Recorder HUD + AI Models redesign#99
karansinghgit merged 20 commits into
mainfrom
feat/recorder-models-redesign

Conversation

@karansinghgit

Copy link
Copy Markdown
Owner

Summary

Redesigns the recorder overlay and the AI Models experience from first principles.

Recorder HUD

  • Always-present floating pill that smoothly morphs between idle → warming → recording → processing.
  • Live waveform driven by the real mic input.
  • Waveform noise gate tuning: the auto-gain floor was normalizing faint residual up, so a fan / room tone bloomed into visible bars while real speech didn't reliably fill. Retuned the linear-peak mapping with three clear knobs — a gate that kills ambient noise, a speech-level reference floor so faint residual can't reach full height, and a contrast curve that crushes what's left. Fan reads flat; speaking fills the bars.
  • Still idle rest: removed the idle "breathing" animation so the resting pill sits perfectly still — the same quiet look at first launch and after a recording.

AI Models

  • Chip / RAM / use-case aware model recommendation.
  • Hero redesign.

Testing

  • Built and ran via make run-dev.
  • Verified: fan/room tone no longer produces faint bars; speaking fills the waveform; idle pill is static from launch.

- Add DeviceCapability: detects chip family + Apple Silicon generation,
  performance-core count, Neural Engine, and RAM via sysctl, and derives a
  0-1 performance tier.
- Replace the naive RAM-only recommendation with a scoring engine that
  weighs speed vs accuracy by use case (Dictation/Balanced/Transcription),
  scales perceived speed by the device tier, rewards RAM headroom, and
  penalizes the largest models on Neural-Engine-less Intel Macs.
- Redesign the AI Models header to show the detected machine, and add a
  recommendation hero card with a live use-case segmented picker that
  re-scores the pick, an explanation, and a Use/Download action.

Old recommendedModel(forDeviceRAMGB:) kept as a compatibility wrapper.
…x cramping

- The input-device menu's mic.fill was rendered black: an SF Symbol inside
  a .borderlessButton Menu takes the control's content color, ignoring the
  per-image foregroundColor (the custom-drawn chevrons were unaffected).
  Fixed by tinting the menus white.
- Replace the 'English' language label with a compact globe icon; the full
  language name is still in the menu + tooltip.
- The mic chip added earlier pushed the toolbar past the fixed 260pt pill,
  causing the cramped padding. Widen the pill to 300pt so everything fits.
- Layered pill background: frosted blur + top-to-bottom depth gradient +
  a glass highlight along the top edge + a hairline gradient border that is
  brighter up top, for a lit-from-above glassy feel.
- Refined stop button: vertical red gradient, subtle white edge stroke,
  softer glow, and a clean white stop square instead of a murky dark one.
- Cleaner control row: a hairline divider separates the waveform from the
  controls; globe/mic drop their chip backgrounds for bare icons with a
  subtle chevron; consistent 13pt sizing. Waveform untouched.
Recorder: calm by default (stop, live waveform, elapsed timer, compact
language tag). Mic + recording-mode reveal inline on hover as clearly
labeled chips (icon + word + chevron) instead of three cryptic icons.
Wider pill so the waveform stays prominent.

AI Models: editorial hero — big serif name of the model we picked for
this Mac, plain-language reason, device context, one primary CTA, and an
'optimize for' selector. Model list grouped into Parakeet (fastest) vs
Whisper (most accurate) with gamified segmented speed/accuracy meters,
qualitative tiers, engine + recommended badges, hover/active states.
Turn the recorder into a persistent, premium floating pill that lives at
the bottom-center of the screen and morphs into the recording HUD.

- Always on screen: a small resting pill (white breathing waveform) that
  expands into the recording HUD (recording dot + live waveform + timer)
  and settles back afterwards instead of hiding.
- Fixed, non-resizing window with the pill centered inside so it is always
  screen-centered and the expand/collapse animation is smooth with no
  window-resize boundary jitter.
- Premium look: flat near-black pill (dropped the graying blur), white
  waveform, softer shadow; recording indicator dot replaces the stop
  square; timer driven from a local start time so it ticks reliably.
- Never keeps the mic warm while idle (no stray mic indicator); the
  capture session only runs during actual recording.
- Waveform noise gate raised so ambient/fan noise stays flat when silent.
- Skip the synthetic F19 emoji-picker suppression unless the Globe key is
  actually set to Show Emoji, avoiding the macOS alert beep on start/stop.
- Accessibility permission alert suppressed in debug and shown at most
  once in release.
Waveform: the auto-gain floor was normalizing faint residual up, so a
fan/room tone bloomed into visible bars while real speech didn't reliably
fill. Retune the linear-peak mapping: a gate that kills ambient noise, a
speech-level reference floor so faint residual can't reach full height,
and a contrast curve that crushes what's left below the gate — fan reads
flat, speaking fills the bars.

Idle: remove the breathing animation so the resting pill sits perfectly
still — the same quiet look at first launch and after a recording.
Waveform: the previous retune over-corrected — bars only moved when
shouting. Go back to auto-gain (your voice always fills the bars, whatever
the mic level) and gate the fan with a gentle 'presence' fade that reaches
full quickly, so speech is never dimmed and only near-silence collapses.

Type: bundle Satoshi (Regular/Medium/Bold) and register app fonts at launch
so Font.custom resolves them without a system install. Route the floating
pill's label and timer through Satoshi for a cleaner, more premium feel.
Resting state now renders as dark glass — an ultraThinMaterial blur of the
backdrop under a translucent black tint — so you can sense what's behind it
without it reading as a solid black slab. Active phases keep the opaque
near-black for text legibility.
SwiftUI's Material only blurs content within the window, so over the
transparent recorder window it rendered as a flat gray blob. Use the
existing VisualEffectBlur (NSVisualEffectView, .hudWindow / .behindWindow)
so the resting pill actually samples the desktop behind it, under a light
black tint for a premium dark-glass look.
Apply the actual glassmorphism recipe instead of a flat dark fill: keep the
behind-window backdrop blur, drop the heavy tint to a whisper so the blurred
backdrop shows through, force .vibrantDark for premium dark glass, and add a
bright top-edge rim highlight (the sheen that reads as the edge of a glass
pane).
Use SwiftUI's built-in .glassEffect (macOS 26 Liquid Glass) for the resting
pill instead of faking frosted glass with a tinted NSVisualEffectView — real
backdrop refraction and light response. Falls back to the behind-window blur
on macOS 14–15 where the API isn't available.
Glass: clearer through the center, denser frosted rim at the edges (soft
inner frost + crisp highlight) so it reads like real glass thickening at
its edge instead of a uniform panel.

Idle bars: drop the fixed white fill for a softened difference blend, so
the waveform reads subtly dark over light backdrops and light over dark
ones — never washing out into the glass.
Pill: in dark mode the glass read washed-out gray, so tint it toward black
and tone down the edge frost/rim highlight; light mode is untouched.

AI Models: rebuild the screen around a two-font system (Clash Display for
names/titles, Satoshi for body) and one cohesive indigo accent with calm
violet/teal metric bars — replacing the loud amber/green LED meters.
- Kill the hero/list duplication: the recommended model lives only in the
  hero; the list ('More models') excludes it.
- Drop the redundant PARAKEET/WHISPER per-card chips (group headers cover it).
- Replace false-precision 9.x pip meters with continuous tier bars.
- One consistent ActionButton treatment across hero and cards.
- Label device context as 'Your Mac ·' so it doesn't read as a requirement.
The pill still read gray in dark mode: the tint was too light and the pill
follows system appearance, which can disagree with the in-app theme. Resolve
dark from appTheme first, deepen the glass tint (black 0.7) and lay a
translucent black fill over it, and drop the edge white further.
The blurred white inner-edge stroke read as a gray inward glow in dark mode.
Split dark/light entirely: dark now has no inner frost, a heavy black fill
(0.62) over a black-tinted glass, and only a whisper of top-edge sheen —
genuinely near-black. Light mode's frosted look is unchanged.
The glowing edge was Liquid Glass's own luminous rim, not our overlay — no
tint removes it. In dark mode, render a behind-window dark blur + heavy black
fill + faint top-only sheen instead: a real near-black pill, no rim glow.
Light mode keeps native Liquid Glass.
Address the outstanding UX gaps:
- Hero dead space: split into two columns — pitch on the left, OPTIMIZE FOR
  control + a metrics panel on the right, so it's no longer half-empty.
- Selected vs recommended: a persistent 'Currently using' strip up top surfaces
  the active model (no longer buried), and notes when a better pick is below.
- Wide empty band: cap content at 940pt, centered, so name and action stop
  sitting at opposite ends of the window.
- Differentiate models: a prominent MULTILINGUAL/ENGLISH badge by each name
  (the real decision factor), replacing the redundant language meta chip.
- Merge heading levels: drop the 'More models' super-heading; engine names are
  the section titles.
Purple was cool-toned against the warm cream background — a mild clash and a
generic 'tech' hue. Replace the indigo + violet/teal trio with one warm
terracotta accent used everywhere (recommended/selected, buttons, both metric
bars, the multilingual badge), so the screen reads as one cohesive palette
that harmonizes with the cream rather than fighting it.
- Remove the segmented OPTIMIZE FOR selector; the hero right column is now
  just the performance panel. Recommendation uses the default (dictation).
- The terracotta was too heavy/orange: primary buttons go to neutral adaptive
  ink (no more bold orange blocks), metric bars soften to 70%, the base hue is
  muted lighter, and the selected-card border lightens. Terracotta now reads as
  a light warm whisper rather than the loudest thing on screen.
@karansinghgit karansinghgit merged commit c71a20a into main Jul 3, 2026
1 of 2 checks passed
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

1 participant