adding option to expand error to see stack trace and clearing timeout if message is expanded

exo/tinychat/index.css

@@ -203,30 +203,61 @@ main {
     left: 0;
     right: 0;
     display: flex;
-    justify-content: space-between;
-    align-items: flex-start;
+    flex-direction: column;
     white-space: pre-wrap;
     font-family: monospace;
 }
 
-.toast span {
-    flex: 1;
-    margin-right: 16px;
+.toast-header {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    width: 100%;
+}
+
+.toast-error-message {
+    flex-grow: 1;
+}
+
+.toast-header-buttons {
+    display: flex;
+    align-items: center;
+    gap: 16px;
+    margin-left: 24px;
+}
+
+.toast-expand-button {
+    background: none;
+    border: none;
+    color: white;
+    padding: 4px;
+    cursor: pointer;
+    font-size: 1em;
+    /* text-decoration: underline; */
 }
 
 .toast-close-button {
     background: none;
     border: none;
     color: white;
-    padding: 0 8px;
+    padding: 4px;
     cursor: pointer;
     font-size: 1.2em;
+    line-height: 1;
 }
 
+.toast-expand-button:hover,
 .toast-close-button:hover {
     opacity: 0.8;
 }
 
+.toast-content {
+    margin-top: 10px;
+    padding: 10px;
+    background-color: rgba(0, 0, 0, 0.2);
+    border-radius: 4px;
+}
+
 .hljs {
   width: 100%;
   position: relative;

exo/tinychat/index.html

@@ -27,10 +27,22 @@
 <main x-data="state" x-init="console.log(endpoint)">
      <!-- Error Toast -->
     <div x-show="errorMessage" x-transition.opacity class="toast">
-        <span x-text="errorMessage"></span>
-        <button @click="errorMessage = null" class="toast-close-button">
-            <i class="fas fa-times"></i>
-        </button>
+        <div class="toast-header">
+            <span class="toast-error-message" x-text="errorMessage.basic"></span>
+            <div class="toast-header-buttons">
+                <button @click="errorExpanded = !errorExpanded; if (errorTimeout) { clearTimeout(errorTimeout); errorTimeout = null; }" 
+                        class="toast-expand-button" 
+                        x-show="errorMessage.stack">
+                    <span x-text="errorExpanded ? 'Hide Details' : 'Show Details'"></span>
+                </button>
+                <button @click="errorMessage = null; errorExpanded = false;" class="toast-close-button">
+                    <i class="fas fa-times"></i>
+                </button>
+            </div>
+        </div>
+        <div class="toast-content" x-show="errorExpanded" x-transition>
+            <span x-text="errorMessage.stack"></span>
+        </div>
     </div>
 <div class="model-selector">
 <select @change="if (cstate) cstate.selectedModel = $event.target.value" x-model="cstate.selectedModel">

exo/tinychat/index.js

@@ -14,6 +14,8 @@ document.addEventListener("alpine:init", () => {
     generating: false,
     endpoint: `${window.location.origin}/v1`,
     errorMessage: null,
+    errorExpanded: false,
+    errorTimeout: null,
 
     // performance tracking
     time_till_first: 0,
@@ -118,16 +120,28 @@ document.addEventListener("alpine:init", () => {
       } catch (error) {
         console.error('error', error);
         const errorDetails = {
-            message: error.message || 'Unknown error on handleSend',
+            message: error.message || 'Unknown error',
             stack: error.stack,
             name: error.name || 'Error'
         };
         
-        this.lastErrorMessage = errorDetails;
-        this.errorMessage = `${errorDetails.name}: ${errorDetails.message}\n\nStack Trace:\n${errorDetails.stack}`;
-        setTimeout(() => {
-          this.errorMessage = null;
-        }, 30 * 1000)
+        this.errorMessage = {
+            basic: `${errorDetails.name}: ${errorDetails.message}`,
+            stack: errorDetails.stack
+        };
+
+        // Clear any existing timeout
+        if (this.errorTimeout) {
+            clearTimeout(this.errorTimeout);
+        }
+
+        // Only set the timeout if the error details aren't expanded
+        if (!this.errorExpanded) {
+            this.errorTimeout = setTimeout(() => {
+                this.errorMessage = null;
+                this.errorExpanded = false;
+            }, 30 * 1000);
+        }
         this.generating = false;
       }
     },
@@ -246,16 +260,28 @@ document.addEventListener("alpine:init", () => {
       } catch (error) {
         console.error('error', error);
         const errorDetails = {
-            message: error.message || 'Unknown error on processMessage',
+            message: error.message || 'Unknown error',
             stack: error.stack,
             name: error.name || 'Error'
         };
         
-        this.lastErrorMessage = errorDetails;
-        this.errorMessage = `${errorDetails.name}: ${errorDetails.message}\n\nStack Trace:\n${errorDetails.stack}`;
-        setTimeout(() => {
-          this.errorMessage = null;
-        }, 30 * 1000)
+        this.errorMessage = {
+            basic: `${errorDetails.name}: ${errorDetails.message}`,
+            stack: errorDetails.stack
+        };
+
+        // Clear any existing timeout
+        if (this.errorTimeout) {
+            clearTimeout(this.errorTimeout);
+        }
+
+        // Only set the timeout if the error details aren't expanded
+        if (!this.errorExpanded) {
+            this.errorTimeout = setTimeout(() => {
+                this.errorMessage = null;
+                this.errorExpanded = false;
+            }, 30 * 1000);
+        }
       } finally {
         this.generating = false;
       }