Spaces:

anonymousDevil
/

cognitive-load-manager

Sleeping

App Files Files Community

AE-Shree commited on Apr 26

Commit

ae81ce5

1 Parent(s): 99f9af4

Final Change

Browse files

Files changed (3) hide show

frontend/dist/index.html +13 -13
frontend/src/App.jsx +39 -1
frontend/src/components/Dashboard.jsx +34 -26

frontend/dist/index.html CHANGED Viewed

@@ -1,13 +1,13 @@
-<!doctype html>
-<html lang="en">
-  <head>
-    <meta charset="UTF-8" />
-    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-    <title>CLM Dashboard</title>
-    <script type="module" crossorigin src="/assets/index-txBpMzf1.js"></script>
-    <link rel="stylesheet" crossorigin href="/assets/index-BvMzkwTv.css">
-  </head>
-  <body class="bg-slate-900 text-slate-100 font-sans">
-    <div id="root"></div>
-  </body>
-</html>

+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>CLM Dashboard</title>
+    <script type="module" crossorigin src="/assets/index-D8328XGk.js"></script>
+    <link rel="stylesheet" crossorigin href="/assets/index-DHB-7DK0.css">
+  </head>
+  <body style="margin:0;background:#f1f5f9">
+    <div id="root"></div>
+  </body>
+</html>

frontend/src/App.jsx CHANGED Viewed

@@ -1,6 +1,42 @@
 import React from 'react'
 import Dashboard from './components/Dashboard'
 export default function App() {
   return (
     <div style={{ minHeight: '100vh', background: '#f1f5f9', fontFamily: 'system-ui,sans-serif' }}>
@@ -45,7 +81,9 @@ export default function App() {
       {/* ── Content ── */}
       <main style={{ maxWidth: 1400, margin: '0 auto', padding: 24 }}>
-        <Dashboard />
       </main>
     </div>
   )

 import React from 'react'
 import Dashboard from './components/Dashboard'
+class ErrorBoundary extends React.Component {
+  constructor(props) {
+    super(props)
+    this.state = { error: null }
+  }
+  static getDerivedStateFromError(error) {
+    return { error }
+  }
+  componentDidCatch(error, info) {
+    console.error('Dashboard crashed:', error, info)
+  }
+  render() {
+    if (this.state.error) {
+      return (
+        <div style={{ background: '#fef2f2', border: '1px solid #fca5a5',
+          borderRadius: 12, padding: 24, margin: 24, fontFamily: 'system-ui,sans-serif' }}>
+          <div style={{ fontSize: 18, fontWeight: 800, color: '#dc2626', marginBottom: 8 }}>
+            ⚠️ The dashboard hit a render error
+          </div>
+          <div style={{ fontSize: 13, color: '#7f1d1d', marginBottom: 12,
+            fontFamily: 'monospace', background: '#fff', padding: 12, borderRadius: 8,
+            border: '1px solid #fecaca', whiteSpace: 'pre-wrap' }}>
+            {String(this.state.error?.message || this.state.error)}
+          </div>
+          <button onClick={() => this.setState({ error: null })}
+            style={{ background: '#dc2626', color: '#fff', border: 'none',
+              borderRadius: 8, padding: '10px 18px', fontWeight: 700, cursor: 'pointer' }}>
+            ↻ Reset Dashboard
+          </button>
+        </div>
+      )
+    }
+    return this.props.children
+  }
+}
 export default function App() {
   return (
     <div style={{ minHeight: '100vh', background: '#f1f5f9', fontFamily: 'system-ui,sans-serif' }}>
       {/* ── Content ── */}
       <main style={{ maxWidth: 1400, margin: '0 auto', padding: 24 }}>
+        <ErrorBoundary>
+          <Dashboard />
+        </ErrorBoundary>
       </main>
     </div>
   )

frontend/src/components/Dashboard.jsx CHANGED Viewed

@@ -272,31 +272,35 @@ export default function Dashboard() {
     esRef.current = es
     es.onmessage = (ev) => {
-      const msg = JSON.parse(ev.data)
       if (msg.type === 'reset') {
-        setTasks(msg.tasks || [])
-        setEnTrace([msg.energy])
-        setStTrace([msg.stress])
       }
       if (msg.type === 'step') {
-        setCurrentStep(msg.step)
-        setAction(msg.action)
-        setTasks(msg.tasks || [])
-        setRwTrace(prev => [...prev, msg.reward])
-        setEnTrace(prev => [...prev, msg.energy])
-        setStTrace(prev => [...prev, msg.stress])
         if (msg.schema_drift) setDrift(prev => [...prev, msg.schema_drift])
         if (msg.done) {
           episodeDone.current = true
-          const score = msg.final_score
           setFinal(score)
           setStreamDone(true)
           setStreaming(false)
           setHistory(prev => [
-            { ep: prev.length + 1, score, difficulty: d, steps: msg.step },
             ...prev.slice(0, 9),
           ])
           es.close(); esRef.current = null
@@ -304,7 +308,7 @@ export default function Dashboard() {
       }
       if (msg.type === 'error') {
-        setError(msg.message)
         setStreaming(false)
         es.close(); esRef.current = null
       }
@@ -466,7 +470,7 @@ export default function Dashboard() {
             background: '#f0fdf4', border: '1px solid #bbf7d0', borderRadius: 8,
             padding: '6px 14px' }}>
             ✅ Episode #{episodeCount} Complete
-            {finalScore != null ? ` · Score: ${finalScore.toFixed(4)}` : ''}
           </span>
         )}
       </div>
@@ -511,7 +515,7 @@ export default function Dashboard() {
                   Final results frozen below — all charts and task data preserved
                 </div>
               </div>
-              {finalScore != null && (
                 <div style={{ background: 'rgba(255,255,255,0.2)', borderRadius: 12,
                   padding: '10px 20px', textAlign: 'center' }}>
                   <div style={{ fontSize: 11, color: '#d1fae5', fontWeight: 700,
@@ -640,17 +644,21 @@ export default function Dashboard() {
                 <div style={{ ...card({ marginBottom: 0 }), minWidth: 220 }}>
                   <div style={section}>Episode History</div>
                   <div style={{ fontFamily: 'monospace', fontSize: 11 }}>
-                    {history.map(h => (
-                      <div key={h.ep} style={{ display: 'flex', gap: 8,
-                        padding: '3px 0', borderBottom: '1px solid #f8fafc',
-                        color: h.score >= 0.5 ? '#16a34a' : h.score >= 0.3 ? '#f59e0b' : '#ef4444' }}>
-                        <span style={{ color: '#94a3b8', minWidth: 24 }}>#{h.ep}</span>
-                        <span style={{ textTransform: 'capitalize', minWidth: 52,
-                          color: '#475569' }}>{h.difficulty}</span>
-                        <span style={{ fontWeight: 700 }}>{h.score.toFixed(4)}</span>
-                        <span style={{ color: '#94a3b8' }}>{h.steps}s</span>
-                      </div>
-                    ))}
                   </div>
                 </div>
               )}

     esRef.current = es
     es.onmessage = (ev) => {
+      let msg
+      try { msg = JSON.parse(ev.data) } catch { return }
+      if (!msg || typeof msg !== 'object') return
+      const num = (v, fallback = 0) => (typeof v === 'number' && !isNaN(v) ? v : fallback)
       if (msg.type === 'reset') {
+        setTasks(Array.isArray(msg.tasks) ? msg.tasks : [])
+        setEnTrace([num(msg.energy, 1)])
+        setStTrace([num(msg.stress, 0)])
       }
       if (msg.type === 'step') {
+        setCurrentStep(num(msg.step, 0))
+        setAction(msg.action || null)
+        setTasks(Array.isArray(msg.tasks) ? msg.tasks : [])
+        setRwTrace(prev => [...prev, num(msg.reward)])
+        setEnTrace(prev => [...prev, num(msg.energy, 1)])
+        setStTrace(prev => [...prev, num(msg.stress, 0)])
         if (msg.schema_drift) setDrift(prev => [...prev, msg.schema_drift])
         if (msg.done) {
           episodeDone.current = true
+          const score = typeof msg.final_score === 'number' ? msg.final_score : null
           setFinal(score)
           setStreamDone(true)
           setStreaming(false)
           setHistory(prev => [
+            { ep: prev.length + 1, score, difficulty: d, steps: num(msg.step, 0) },
             ...prev.slice(0, 9),
           ])
           es.close(); esRef.current = null
       }
       if (msg.type === 'error') {
+        setError(msg.message || 'Unknown error')
         setStreaming(false)
         es.close(); esRef.current = null
       }
             background: '#f0fdf4', border: '1px solid #bbf7d0', borderRadius: 8,
             padding: '6px 14px' }}>
             ✅ Episode #{episodeCount} Complete
+            {typeof finalScore === 'number' ? ` · Score: ${finalScore.toFixed(4)}` : ''}
           </span>
         )}
       </div>
                   Final results frozen below — all charts and task data preserved
                 </div>
               </div>
+              {typeof finalScore === 'number' && (
                 <div style={{ background: 'rgba(255,255,255,0.2)', borderRadius: 12,
                   padding: '10px 20px', textAlign: 'center' }}>
                   <div style={{ fontSize: 11, color: '#d1fae5', fontWeight: 700,
                 <div style={{ ...card({ marginBottom: 0 }), minWidth: 220 }}>
                   <div style={section}>Episode History</div>
                   <div style={{ fontFamily: 'monospace', fontSize: 11 }}>
+                    {history.map(h => {
+                      const sc = typeof h.score === 'number' ? h.score : null
+                      const col = sc == null ? '#64748b'
+                        : sc >= 0.5 ? '#16a34a' : sc >= 0.3 ? '#f59e0b' : '#ef4444'
+                      return (
+                        <div key={h.ep} style={{ display: 'flex', gap: 8,
+                          padding: '3px 0', borderBottom: '1px solid #f8fafc', color: col }}>
+                          <span style={{ color: '#94a3b8', minWidth: 24 }}>#{h.ep}</span>
+                          <span style={{ textTransform: 'capitalize', minWidth: 52,
+                            color: '#475569' }}>{h.difficulty}</span>
+                          <span style={{ fontWeight: 700 }}>{sc != null ? sc.toFixed(4) : '—'}</span>
+                          <span style={{ color: '#94a3b8' }}>{h.steps ?? 0}s</span>
+                        </div>
+                      )
+                    })}
                   </div>
                 </div>
               )}