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
@@ -23,6 +23,7 @@ export const OrchestratorMessagesView = forwardRef<ScrollView, OrchestratorMessa
const { theme } = useUnistyles();
const bottomSheetRef = useRef<BottomSheetModal | null>(null);
const [selectedToolCall, setSelectedToolCall] = useState<SelectedToolCall | null>(null);
const [isBottomSheetVisible, setIsBottomSheetVisible] = useState(false);
function handleOpenToolCallDetails(toolCall: {
toolName: string;
@@ -45,7 +46,16 @@ export const OrchestratorMessagesView = forwardRef<ScrollView, OrchestratorMessa
},
},
});
bottomSheetRef.current?.present();
setIsBottomSheetVisible(true);
// Delay present to next frame to ensure component is mounted
setTimeout(() => {
bottomSheetRef.current?.present();
}, 0);
}
function handleBottomSheetDismiss() {
setIsBottomSheetVisible(false);
setSelectedToolCall(null);
}
return (
@@ -139,10 +149,13 @@ export const OrchestratorMessagesView = forwardRef<ScrollView, OrchestratorMessa
)}
</ScrollView>
<ToolCallBottomSheet
bottomSheetRef={bottomSheetRef}
selectedToolCall={selectedToolCall}
/>
{isBottomSheetVisible && (
<ToolCallBottomSheet
bottomSheetRef={bottomSheetRef}
selectedToolCall={selectedToolCall}
onDismiss={handleBottomSheetDismiss}
/>
)}
</>
);
}