fix: width of bubbles and logging errors

ui/desktop/src/App.tsx

@@ -9,7 +9,7 @@
   const isLauncher = searchParams.get('window') === 'launcher';
 
   useEffect(() => {
     const handleFatalError = (_: any, errorMessage: string) => {
       setFatalError(errorMessage);
     };
 
@@ -25,9 +25,5 @@
     return <ErrorScreen error={fatalError} onReload={() => window.electron.reloadApp()} />;
   }
 
-  if (isLauncher) {
-    return <LauncherWindow />;
-  } else {
-    return <ChatWindow />;
-  }
+  return isLauncher ? <LauncherWindow /> : <ChatWindow />;
 }

ui/desktop/src/ChatWindow.tsx

@@ -39,7 +39,7 @@
   chats,
   setChats,
   selectedChatId,
   setSelectedChatId,
   initialQuery,
   setProgressMessage,
   setWorking,
@@ -81,7 +81,7 @@
         setWorking(Working.Working);
       }
     },
     onFinish: async (message, options) => {
       setProgressMessage('Task finished. Click here to expand.');
       setWorking(Working.Idle);
 
@@ -104,7 +104,7 @@
       c.id === selectedChatId ? { ...c, messages } : c
     );
     setChats(updatedChats);
   }, [messages, selectedChatId]);
 
   const initialQueryAppended = useRef(false);
   useEffect(() => {
@@ -112,7 +112,7 @@
       append({ role: 'user', content: initialQuery });
       initialQueryAppended.current = true;
     }
   }, [initialQuery]);
 
   useEffect(() => {
     if (messages.length > 0) {
@@ -190,8 +190,8 @@
   };
 
   return (
-    <div className="chat-content flex flex-col w-screen h-screen items-center justify-center p-[10px]">
-      <div className="relative block h-[20px] w-screen">
+    <div className="chat-content flex flex-col w-full h-screen items-center justify-center p-[10px]">
+      <div className="relative block h-[20px] w-full">
         <MoreMenu />
       </div>
       <Card className="flex flex-col flex-1 h-[calc(100vh-95px)] w-full bg-card-gradient dark:bg-dark-card-gradient mt-0 border-none rounded-2xl relative">

ui/desktop/src/components/UserMessage.tsx

@@ -8,8 +8,8 @@ export default function UserMessage({ message }) {
   const urls = extractUrls(message.content, []);
 
   return (
-    <div className="flex justify-end mb-[16px]">
-      <div className="flex-col max-w-[90%]">
+    <div className="flex justify-end mb-[16px] w-full">
+      <div className="flex-col max-w-[85%]">
         <div className="flex bg-user-bubble dark:bg-user-bubble-dark text-goose-text-light dark:text-goose-text-light-dark rounded-2xl p-4">
           <MarkdownContent
             content={message.content}

ui/desktop/src/renderer.tsx

@@ -3,10 +3,79 @@ import ReactDOM from 'react-dom/client'
 import { BrowserRouter as Router } from 'react-router-dom'
 import App from './App'
 
+// Error Boundary Component
+class ErrorBoundary extends React.Component<
+  { children: React.ReactNode },
+  { hasError: boolean }
+> {
+  constructor(props: { children: React.ReactNode }) {
+    super(props)
+    this.state = { hasError: false }
+  }
+
+  static getDerivedStateFromError(_: Error) {
+    return { hasError: true }
+  }
+
+  componentDidCatch(error: Error, errorInfo: React.ErrorInfo) {
+    // Send error to main process
+    window.electron.logInfo(`[ERROR] ${error.toString()}\n${errorInfo.componentStack}`)
+  }
+
+  render() {
+    if (this.state.hasError) {
+      return <h1>Something went wrong.</h1>
+    }
+
+    return this.props.children
+  }
+}
+
+// Set up console interceptors
+const originalConsole = {
+  log: console.log,
+  error: console.error,
+  warn: console.warn,
+  info: console.info,
+}
+
+// Intercept console methods
+console.log = (...args) => {
+  window.electron.logInfo(`[LOG] ${args.join(' ')}`)
+  originalConsole.log(...args)
+}
+
+console.error = (...args) => {
+  window.electron.logInfo(`[ERROR] ${args.join(' ')}`)
+  originalConsole.error(...args)
+}
+
+console.warn = (...args) => {
+  window.electron.logInfo(`[WARN] ${args.join(' ')}`)
+  originalConsole.warn(...args)
+}
+
+console.info = (...args) => {
+  window.electron.logInfo(`[INFO] ${args.join(' ')}`)
+  originalConsole.info(...args)
+}
+
+// Capture unhandled promise rejections
+window.addEventListener('unhandledrejection', (event) => {
+  window.electron.logInfo(`[UNHANDLED REJECTION] ${event.reason}`)
+})
+
+// Capture global errors
+window.addEventListener('error', (event) => {
+  window.electron.logInfo(`[GLOBAL ERROR] ${event.message} at ${event.filename}:${event.lineno}:${event.colno}`)
+})
+
 ReactDOM.createRoot(document.getElementById('root')!).render(
   <React.StrictMode>
-    <Router>
-      <App />
-    </Router>
+    <ErrorBoundary>
+      <Router>
+        <App />
+      </Router>
+    </ErrorBoundary>
   </React.StrictMode>,
 )