modifying error handling to include name and stack trace if available. css support multiple lines

exo/tinychat/index.css

@@ -191,20 +191,27 @@ main {
 }
 
 .toast {
-    width: 100%; /* Take up the full width of the page */
-    background-color: #fc2a2a; /* Dark background color */
-    color: #fff; /* White text color */
-    text-align: center; /* Centered text */
-    border-radius: 2px; /* Rounded borders */
-    padding: 16px; /* Padding */
-    position: fixed; /* Sit on top of the screen content */
-    z-index: 9999; /* Add a z-index if needed */
-    top: 0; /* Position at the top of the page */
-    left: 0; /* Extend from the left edge */
-    right: 0; /* Extend to the right edge */
+    width: 100%;
+    background-color: #fc2a2a;
+    color: #fff;
+    text-align: left;
+    border-radius: 2px;
+    padding: 16px;
+    position: fixed;
+    z-index: 9999;
+    top: 0;
+    left: 0;
+    right: 0;
     display: flex;
     justify-content: space-between;
-    align-items: center;
+    align-items: flex-start;
+    white-space: pre-wrap;
+    font-family: monospace;
+}
+
+.toast span {
+    flex: 1;
+    margin-right: 16px;
 }
 
 .toast-close-button {

exo/tinychat/index.js

@@ -116,9 +116,15 @@ document.addEventListener("alpine:init", () => {
         localStorage.setItem("pendingMessage", value);
         this.processMessage(value);
       } catch (error) {
-        console.error('error', error)
-        this.lastErrorMessage = error.message || 'Unknown error on handleSend';
-        this.errorMessage = error.message || 'Unknown error on handleSend';
+        console.error('error', error);
+        const errorDetails = {
+            message: error.message || 'Unknown error on handleSend',
+            stack: error.stack,
+            name: error.name || 'Error'
+        };
+        
+        this.lastErrorMessage = errorDetails;
+        this.errorMessage = `${errorDetails.name}: ${errorDetails.message}\n\nStack Trace:\n${errorDetails.stack}`;
         this.generating = false;
       }
     },
@@ -235,9 +241,15 @@ document.addEventListener("alpine:init", () => {
           console.error("Failed to save histories to localStorage:", error);
         }
       } catch (error) {
-        console.error('error', error)
-        this.lastErrorMessage = error;
-        this.errorMessage = error;
+        console.error('error', error);
+        const errorDetails = {
+            message: error.message || 'Unknown error on processMessage',
+            stack: error.stack,
+            name: error.name || 'Error'
+        };
+        
+        this.lastErrorMessage = errorDetails;
+        this.errorMessage = `${errorDetails.name}: ${errorDetails.message}\n\nStack Trace:\n${errorDetails.stack}`;
       } finally {
         this.generating = false;
       }