From 5d10afb7a67749f6dce383bb408b9b7bdb1158a2 Mon Sep 17 00:00:00 2001
From: Jared Vititoe <jjvititoe1@gmail.com>
Date: Sun, 24 May 2026 00:30:12 -0400
Subject: [PATCH] ui: voice recorder pulse + TDS styling, wire mic denied error
 to input bar

- VoiceMessageRecorder recording dot now pulses (reuses pttLivePulse keyframe)
- Added data-voice-recorder / data-voice-rec-dot / data-voice-waveform attributes
  for TDS targeting: green pulsing dot, cyan waveform bars, subtle border in TDS dark
- Wire VoiceMessageRecorder onError to the same input-bar error display used by
  location errors (mic denied, media error surfaces to user instead of silent fail)

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
---
 src/app/components/VoiceMessageRecorder.tsx |  4 +++
 src/app/features/room/RoomInput.tsx         |  8 +++++-
 src/lotus-terminal.css.ts                   | 29 +++++++++++++++++++++
 3 files changed, 40 insertions(+), 1 deletion(-)

diff --git a/src/app/components/VoiceMessageRecorder.tsx b/src/app/components/VoiceMessageRecorder.tsx
index 18253304e..c8de02d1e 100644
--- a/src/app/components/VoiceMessageRecorder.tsx
+++ b/src/app/components/VoiceMessageRecorder.tsx
@@ -185,6 +185,7 @@ export function VoiceMessageRecorder({ onSend, onError }: VoiceRecorderProps) {
   if (state === 'recording') {
     return (
       <Box
+        data-voice-recorder="recording"
         alignItems="Center"
         gap="200"
         style={{
@@ -194,18 +195,21 @@ export function VoiceMessageRecorder({ onSend, onError }: VoiceRecorderProps) {
         }}
       >
         <Box
+          data-voice-rec-dot
           style={{
             width: toRem(8),
             height: toRem(8),
             borderRadius: '50%',
             background: 'var(--tc-danger-normal)',
             flexShrink: 0,
+            animation: 'pttLivePulse 900ms ease-in-out infinite',
           }}
         />
         <Text size="T200" style={{ minWidth: toRem(32), fontVariantNumeric: 'tabular-nums' }}>
           {formatDuration(durationMs)}
         </Text>
         <Box
+          data-voice-waveform
           alignItems="Center"
           gap="100"
           style={{ height: toRem(20), overflow: 'hidden', flexShrink: 0 }}
diff --git a/src/app/features/room/RoomInput.tsx b/src/app/features/room/RoomInput.tsx
index 690a2b5c3..72362a832 100644
--- a/src/app/features/room/RoomInput.tsx
+++ b/src/app/features/room/RoomInput.tsx
@@ -902,7 +902,13 @@ export const RoomInput = forwardRef<HTMLDivElement, RoomInputProps>(
                   <Icon src={Icons.SpaceGlobe} size="100" />
                 )}
               </IconButton>
-              <VoiceMessageRecorder onSend={handleVoiceSend} />
+              <VoiceMessageRecorder
+                onSend={handleVoiceSend}
+                onError={(err) => {
+                  setLocationError(err);
+                  setTimeout(() => setLocationError(null), 4000);
+                }}
+              />
               <IconButton
                 onClick={submit}
                 variant="SurfaceVariant"
diff --git a/src/lotus-terminal.css.ts b/src/lotus-terminal.css.ts
index e696cbe6c..acc5cd4a7 100644
--- a/src/lotus-terminal.css.ts
+++ b/src/lotus-terminal.css.ts
@@ -921,6 +921,35 @@ globalStyle(
   },
 );
 
+// ── Voice recorder TDS ───────────────────────────────────────────────────────
+globalStyle(`body.${lotusTerminalBodyClass} [data-voice-recorder="recording"]`, {
+  background: 'rgba(0,212,255,0.05) !important' as any,
+  border: '1px solid rgba(0,212,255,0.22) !important' as any,
+  borderRadius: '6px',
+});
+globalStyle(`body.${lotusTerminalBodyClass} [data-voice-rec-dot]`, {
+  background: '#00FF88 !important' as any,
+  boxShadow: '0 0 6px rgba(0,255,136,0.55)',
+});
+globalStyle(`body.${lotusTerminalBodyClass} [data-voice-waveform] > div`, {
+  background: '#00D4FF !important' as any,
+});
+// light TDS
+globalStyle(
+  `html[data-theme="light"] body.${lotusTerminalBodyClass} [data-voice-recorder="recording"]`,
+  {
+    background: 'rgba(0,98,184,0.05) !important' as any,
+    border: '1px solid rgba(0,98,184,0.22) !important' as any,
+  },
+);
+globalStyle(`html[data-theme="light"] body.${lotusTerminalBodyClass} [data-voice-rec-dot]`, {
+  background: '#006d35 !important' as any,
+  boxShadow: 'none',
+});
+globalStyle(`html[data-theme="light"] body.${lotusTerminalBodyClass} [data-voice-waveform] > div`, {
+  background: '#0062b8 !important' as any,
+});
+
 // ── Caption input TDS focus ring ──────────────────────────────────────────────
 globalStyle(`body.${lotusTerminalBodyClass} [data-caption-input]:focus-visible`, {
   borderColor: 'rgba(255,107,0,0.65) !important' as any,