frontend: update browser tab title with conversation title (#7694)

Co-authored-by: openhands <[email protected]>

Author: xingyaoww

frontend/src/context/conversation-context.tsx

@@ -24,7 +24,11 @@ export function ConversationProvider({
 
   const value = useMemo(() => ({ conversationId }), [conversationId]);
 
-  return <ConversationContext value={value}>{children}</ConversationContext>;
+  return (
+    <ConversationContext.Provider value={value}>
+      {children}
+    </ConversationContext.Provider>
+  );
 }
 
 export function useConversation() {

frontend/src/hooks/use-document-title-from-state.ts

@@ -18,7 +18,7 @@ export function useDocumentTitleFromState(suffix = "OpenHands") {
   useEffect(() => {
     if (conversation?.title) {
       lastValidTitleRef.current = conversation.title;
-      document.title = `${conversation.title} - ${suffix}`;
+      document.title = `${conversation.title} | ${suffix}`;
     } else {
       document.title = suffix;
     }

frontend/src/routes/_oh.app/route.tsx

@@ -36,6 +36,7 @@ import { useSettings } from "#/hooks/query/use-settings";
 import { clearFiles, clearInitialPrompt } from "#/state/initial-query-slice";
 import { RootState } from "#/store";
 import { displayErrorToast } from "#/utils/custom-toast-handlers";
+import { useDocumentTitleFromState } from "#/hooks/use-document-title-from-state";
 
 function AppContent() {
   useConversationConfig();
@@ -51,6 +52,9 @@ function AppContent() {
   const dispatch = useDispatch();
   const endSession = useEndSession();
 
+  // Set the document title to the conversation title when available
+  useDocumentTitleFromState();
+
   const [width, setWidth] = React.useState(window.innerWidth);
 
   const secrets = React.useMemo(