fix: improve realtime controls layout and add agent status bar

- Change realtime controls to horizontal layout with fixed height (88px)
- Add orientation prop to VolumeMeter for horizontal/vertical modes
- Create AgentStatusBar component showing mode badge and agent status
- Add agent persistence system for managing agent state across restarts
- Fix bottom sheet dismiss handling to clear state properly
- Remove debug timer from realtime controls

🤖 Generated with [Claude Code](https://claude.com/claude-code)

Co-Authored-By: Claude <noreply@anthropic.com>
This commit is contained in:
Mohamed Boudra
2025-10-24 11:17:05 +02:00
co-authored by Claude
parent d24bf65fe9
commit 3483bd9afd
13 changed files with 1016 additions and 31 deletions
+7 -5
View File
@@ -16,15 +16,16 @@ interface VolumeMeterProps {
isMuted?: boolean;
isDetecting?: boolean;
isSpeaking?: boolean;
orientation?: "vertical" | "horizontal";
}
export function VolumeMeter({ volume, isMuted = false, isDetecting = false, isSpeaking = false }: VolumeMeterProps) {
export function VolumeMeter({ volume, isMuted = false, isDetecting = false, isSpeaking = false, orientation = "vertical" }: VolumeMeterProps) {
const { theme } = useUnistyles();
// Base dimensions
const LINE_SPACING = 8;
const MAX_HEIGHT = 50;
const MIN_HEIGHT = 20;
const MAX_HEIGHT = orientation === "horizontal" ? 30 : 50;
const MIN_HEIGHT = orientation === "horizontal" ? 12 : 20;
// Shared values for each line's height
const line1Height = useSharedValue(MIN_HEIGHT);
@@ -162,8 +163,10 @@ export function VolumeMeter({ volume, isMuted = false, isDetecting = false, isSp
const lineColor = "#FFFFFF";
const lineWidth = 8;
const containerHeight = orientation === "horizontal" ? 60 : 100;
return (
<View style={styles.container}>
<View style={[styles.container, { height: containerHeight }]}>
<ReanimatedAnimated.View
style={[
styles.line,
@@ -205,7 +208,6 @@ const styles = StyleSheet.create((theme) => ({
flexDirection: "row",
alignItems: "center",
justifyContent: "center",
height: 100,
},
line: {
borderRadius: theme.borderRadius.full,