Spaces:

anonymousDevil
/

cognitive-load-manager

Sleeping

App Files Files Community

AE-Shree commited on Apr 26

Commit

7186ef8

1 Parent(s): 0b1db59

Final Change

Browse files

Files changed (3) hide show

frontend/dist/index.html +1 -1
frontend/src/App.jsx +49 -26
frontend/src/components/Dashboard.jsx +19 -19

frontend/dist/index.html CHANGED Viewed

@@ -4,7 +4,7 @@
     <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-DPHOn9DW.js"></script>
     <link rel="stylesheet" crossorigin href="/assets/index-DHB-7DK0.css">
   </head>
   <body style="margin:0;background:#f1f5f9">

     <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-CPBwWvcP.js"></script>
     <link rel="stylesheet" crossorigin href="/assets/index-DHB-7DK0.css">
   </head>
   <body style="margin:0;background:#f1f5f9">

frontend/src/App.jsx CHANGED Viewed

@@ -18,7 +18,7 @@ class ErrorBoundary extends React.Component {
         <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,
@@ -28,7 +28,7 @@ class ErrorBoundary extends React.Component {
           <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>
       )
@@ -38,51 +38,74 @@ class ErrorBoundary extends React.Component {
 }
 export default function App() {
   return (
-    <div style={{ minHeight: '100vh', background: '#f1f5f9', fontFamily: 'system-ui,sans-serif' }}>
-      {/* ── Header ── */}
       <header style={{
-        background: '#0f172a', position: 'sticky', top: 0, zIndex: 20,
         display: 'flex', alignItems: 'center', gap: 32, padding: '0 24px',
-        boxShadow: '0 1px 3px rgba(0,0,0,.4)',
       }}>
-        <div style={{ padding: '14px 0', whiteSpace: 'nowrap' }}>
-          <span style={{ fontSize: 19, fontWeight: 800, color: '#fff', letterSpacing: '-0.5px' }}>
-            🧠 CLM
           </span>
-          <span style={{ fontSize: 12, color: '#64748b', marginLeft: 10 }}>
-            Cognitive Load Manager · OpenEnv
           </span>
         </div>
-        <div style={{ flex: 1, display: 'flex', alignItems: 'center' }}>
-          <span style={{ fontSize: 13, color: '#6366f1', fontWeight: 700,
-            background: '#1e293b', borderRadius: 8, padding: '8px 16px' }}>
-            🎮 Live Episode
-          </span>
-        </div>
         <a href="/docs" target="_blank" rel="noreferrer"
-          style={{ fontSize: 12, color: '#475569', textDecoration: 'none',
-            padding: '6px 12px', border: '1px solid #334155', borderRadius: 6,
             whiteSpace: 'nowrap' }}>
-          API Docs ↗
         </a>
       </header>
-      {/* ── Banner ── */}
       <div style={{
-        background: 'linear-gradient(135deg,#4f46e5 0%,#0ea5e9 100%)',
         padding: '10px 24px', textAlign: 'center', fontSize: 13, color: '#fff',
       }}>
-        🤖 AI agent plays live — press <b>▶ Play Episode</b> to start streaming.
-        Switch to <b>🎮 Manual</b> to control the agent yourself.
       </div>
-      {/* ── Content ── */}
       <main style={{ maxWidth: 1400, margin: '0 auto', padding: 24 }}>
         <ErrorBoundary>
-          <Dashboard />
         </ErrorBoundary>
       </main>
     </div>

         <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,
           <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>
       )
 }
 export default function App() {
+  const [theme, setTheme] = React.useState(() => {
+    if (typeof window === 'undefined') return 'light'
+    return localStorage.getItem('clm-theme') || 'light'
+  })
+  React.useEffect(() => {
+    try { localStorage.setItem('clm-theme', theme) } catch {}
+  }, [theme])
+  const isDark = theme === 'dark'
+  const palette = isDark
+    ? { bg: '#0b1220', headerBg: '#0f172a', headerBorder: '#1e293b',
+        text: '#e2e8f0', subText: '#94a3b8', border: '#334155',
+        bannerFrom: '#1e3a8a', bannerTo: '#0c4a6e' }
+    : { bg: '#f1f5f9', headerBg: '#ffffff', headerBorder: '#e2e8f0',
+        text: '#0f172a', subText: '#64748b', border: '#cbd5e1',
+        bannerFrom: '#4f46e5', bannerTo: '#0ea5e9' }
   return (
+    <div style={{ minHeight: '100vh', background: palette.bg,
+      fontFamily: 'system-ui,sans-serif', color: palette.text,
+      transition: 'background .25s ease, color .25s ease' }}>
+      {/* Header */}
       <header style={{
+        background: palette.headerBg, position: 'sticky', top: 0, zIndex: 20,
         display: 'flex', alignItems: 'center', gap: 32, padding: '0 24px',
+        borderBottom: `1px solid ${palette.headerBorder}`,
+        boxShadow: isDark ? '0 1px 3px rgba(0,0,0,.5)' : '0 1px 3px rgba(15,23,42,.06)',
       }}>
+        <div style={{ padding: '14px 0', whiteSpace: 'nowrap', flex: 1 }}>
+          <span style={{ fontSize: 18, fontWeight: 800, color: palette.text,
+            letterSpacing: '-0.4px' }}>
+            Cognitive Load Manager
           </span>
+          <span style={{ fontSize: 12, color: palette.subText, marginLeft: 10 }}>
+            OpenEnv
           </span>
         </div>
+        <button onClick={() => setTheme(isDark ? 'light' : 'dark')}
+          style={{ fontSize: 12, color: palette.text, background: 'transparent',
+            padding: '6px 14px', border: `1px solid ${palette.border}`,
+            borderRadius: 6, cursor: 'pointer', fontWeight: 600,
+            whiteSpace: 'nowrap' }}>
+          {isDark ? 'Light' : 'Dark'} mode
+        </button>
         <a href="/docs" target="_blank" rel="noreferrer"
+          style={{ fontSize: 12, color: palette.subText, textDecoration: 'none',
+            padding: '6px 12px', border: `1px solid ${palette.border}`, borderRadius: 6,
             whiteSpace: 'nowrap' }}>
+          API Docs
         </a>
       </header>
+      {/* Banner */}
       <div style={{
+        background: `linear-gradient(135deg,${palette.bannerFrom} 0%,${palette.bannerTo} 100%)`,
         padding: '10px 24px', textAlign: 'center', fontSize: 13, color: '#fff',
       }}>
+        AI agent plays live — press <b>Play Episode</b> to start streaming.
+        Switch to <b>Manual</b> to control the agent yourself.
       </div>
+      {/* Content */}
       <main style={{ maxWidth: 1400, margin: '0 auto', padding: 24 }}>
         <ErrorBoundary>
+          <Dashboard isDark={isDark} />
         </ErrorBoundary>
       </main>
     </div>

frontend/src/components/Dashboard.jsx CHANGED Viewed

@@ -122,7 +122,7 @@ function ScoringFormulaCard() {
       <div style={{ marginBottom:16 }}>
         <div style={{ fontSize:14, fontWeight:800, color:'#0f172a', marginBottom:4 }}>
-          🏆 Reward Scoring Formula
         </div>
         <div style={{ fontSize:11, color:'#64748b' }}>
           Each action is scored on 5 dimensions. Weights reflect cognitive-load research priorities.
@@ -318,7 +318,7 @@ export default function Dashboard() {
       // When the server closes the stream after a clean episode end, the browser
       // fires onerror. Ignore it — only show an error for genuine disconnects.
       if (episodeDone.current) return
-      setError('Stream disconnected. Check backend is running, then press ▶ Play again.')
       setStreaming(false)
       es.close(); esRef.current = null
     }
@@ -347,7 +347,7 @@ export default function Dashboard() {
       if (!r.ok) throw new Error(`HTTP ${r.status}`)
       const d = await r.json()
       setSession(d.session_id); setObs(d.observation)
-      setManLogs([{ type: 'system', msg: `▶ Episode started (${difficulty})` }])
     } catch (err) {
       setError(err.message)
     } finally { setLoading(false) }
@@ -373,7 +373,7 @@ export default function Dashboard() {
       if (d.done) {
         setManLogs(prev => [...prev, {
           type: 'system',
-          msg: `✅ Done. Final score: ${d.info?.final_score?.toFixed(4) ?? 'N/A'}`,
         }])
         setSession(null)
         setManDone(true)
@@ -410,7 +410,7 @@ export default function Dashboard() {
         marginBottom: 16, flexWrap: 'wrap' }}>
         {/* Mode toggle */}
         <div style={{ display: 'flex', background: '#e2e8f0', borderRadius: 10, padding: 3 }}>
-          {[['stream', '🤖 Auto-Play'], ['manual', '🎮 Manual']].map(([id, lbl]) => (
             <button key={id} onClick={() => setMode(id)}
               style={{ padding: '7px 14px', borderRadius: 8, border: 'none',
                 background: mode === id ? '#fff' : 'transparent',
@@ -437,13 +437,13 @@ export default function Dashboard() {
             ? <button onClick={stopStream}
                 style={{ background: '#ef4444', color: '#fff', border: 'none',
                   borderRadius: 8, padding: '8px 20px', fontWeight: 700,
-                  fontSize: 13, cursor: 'pointer' }}>⏹ Stop</button>
             : !streamDone && (
                 <button onClick={() => startStream()}
                   style={{ background: '#6366f1', color: '#fff', border: 'none',
                     borderRadius: 8, padding: '8px 20px', fontWeight: 700,
                     fontSize: 13, cursor: 'pointer' }}>
-                  ▶ Play Episode
                 </button>
               )
         ) : (
@@ -452,7 +452,7 @@ export default function Dashboard() {
               style={{ background: loading ? '#94a3b8' : '#6366f1', color: '#fff',
                 border: 'none', borderRadius: 8, padding: '8px 20px', fontWeight: 700,
                 fontSize: 13, cursor: loading ? 'not-allowed' : 'pointer' }}>
-              {loading ? 'Loading…' : sessionId ? '↺ Reset' : '▶ Start'}
             </button>
           )
         )}
@@ -469,7 +469,7 @@ export default function Dashboard() {
           <span style={{ fontSize: 13, fontWeight: 700, color: '#16a34a',
             background: '#f0fdf4', border: '1px solid #bbf7d0', borderRadius: 8,
             padding: '6px 14px' }}>
-            ✅ Episode #{episodeCount} Complete
             {typeof finalScore === 'number' ? ` · Score: ${finalScore.toFixed(4)}` : ''}
           </span>
         )}
@@ -480,10 +480,10 @@ export default function Dashboard() {
         <div style={{ background: '#fef2f2', border: '1px solid #fca5a5',
           borderRadius: 10, padding: '10px 14px', marginBottom: 14,
           fontSize: 13, color: '#dc2626' }}>
-          ⚠️ {error}&ensp;
           <button onClick={() => setError(null)}
             style={{ background: 'none', border: 'none', cursor: 'pointer',
-              color: '#dc2626', fontWeight: 700 }}>✕</button>
         </div>
       )}
@@ -492,7 +492,7 @@ export default function Dashboard() {
         <div key={i} style={{ background: '#fffbeb', border: '1px solid #fcd34d',
           borderRadius: 10, padding: '10px 14px', marginBottom: 10,
           fontSize: 13, color: '#92400e', fontWeight: 600 }}>
-          ⚡ Schema Drift @ step {d.step}: {d.message}
         </div>
       ))}
@@ -509,7 +509,7 @@ export default function Dashboard() {
             }}>
               <div>
                 <div style={{ fontSize: 18, fontWeight: 900, color: '#fff', letterSpacing: '-0.3px' }}>
-                  ✅ Episode #{episodeCount} Complete
                 </div>
                 <div style={{ fontSize: 12, color: '#d1fae5', marginTop: 2 }}>
                   Final results frozen below — all charts and task data preserved
@@ -557,7 +557,7 @@ export default function Dashboard() {
             <div style={card()}>
               <div style={section}>Reward / Step</div>
               <LineChart data={rewardTrace} color="#6366f1" height={130}
-                label="Press ▶ Play Episode to start" />
               {rewardTrace.length > 0 && (
                 <div style={{ display: 'flex', justifyContent: 'space-between',
                   fontSize: 11, color: '#64748b', marginTop: 6 }}>
@@ -619,7 +619,7 @@ export default function Dashboard() {
                     <div style={{ fontSize: 10, color: '#94a3b8', marginTop: 2 }}>
                       {(t.progress * 100).toFixed(0)}%
                       {t.deadline ? ` · deadline: step ${t.deadline}` : ''}
-                      {t.is_interrupted ? ' ⚡' : ''}
                     </div>
                   </div>
                 )
@@ -680,7 +680,7 @@ export default function Dashboard() {
               display: 'flex', alignItems: 'center', gap: 16, flexWrap: 'wrap',
             }}>
               <div style={{ fontSize: 18, fontWeight: 900, color: '#fff' }}>
-                ✅ Manual Episode Complete
               </div>
               <div style={{ fontSize: 12, color: '#c7d2fe' }}>
                 All results frozen — task log and reward chart preserved below
@@ -715,7 +715,7 @@ export default function Dashboard() {
               <div style={section}>Task Queue</div>
               {manTasks.length === 0 && (
                 <div style={{ color: '#cbd5e1', fontSize: 13, textAlign: 'center', padding: 24 }}>
-                  Press ▶ Start to begin
                 </div>
               )}
               {manTasks.map(task => {
@@ -761,12 +761,12 @@ export default function Dashboard() {
                     style={{ flex: 1, padding: 9, borderRadius: 8,
                       border: '1px solid #e2e8f0', background: '#f0fdf4',
                       color: '#16a34a', fontWeight: 700, cursor: 'pointer', fontSize: 13 }}>
-                    ☕ Break</button>
                   <button onClick={() => handleAction('delay')}
                     style={{ flex: 1, padding: 9, borderRadius: 8,
                       border: '1px solid #e2e8f0', background: '#f8fafc',
                       color: '#64748b', fontWeight: 700, cursor: 'pointer', fontSize: 13 }}>
-                    ⏸ Delay</button>
                 </div>
               )}
             </div>

       <div style={{ marginBottom:16 }}>
         <div style={{ fontSize:14, fontWeight:800, color:'#0f172a', marginBottom:4 }}>
+          Reward Scoring Formula
         </div>
         <div style={{ fontSize:11, color:'#64748b' }}>
           Each action is scored on 5 dimensions. Weights reflect cognitive-load research priorities.
       // When the server closes the stream after a clean episode end, the browser
       // fires onerror. Ignore it — only show an error for genuine disconnects.
       if (episodeDone.current) return
+      setError('Stream disconnected. Check backend is running, then press Play again.')
       setStreaming(false)
       es.close(); esRef.current = null
     }
       if (!r.ok) throw new Error(`HTTP ${r.status}`)
       const d = await r.json()
       setSession(d.session_id); setObs(d.observation)
+      setManLogs([{ type: 'system', msg: `Episode started (${difficulty})` }])
     } catch (err) {
       setError(err.message)
     } finally { setLoading(false) }
       if (d.done) {
         setManLogs(prev => [...prev, {
           type: 'system',
+          msg: `Done. Final score: ${d.info?.final_score?.toFixed(4) ?? 'N/A'}`,
         }])
         setSession(null)
         setManDone(true)
         marginBottom: 16, flexWrap: 'wrap' }}>
         {/* Mode toggle */}
         <div style={{ display: 'flex', background: '#e2e8f0', borderRadius: 10, padding: 3 }}>
+          {[['stream', 'Auto-Play'], ['manual', 'Manual']].map(([id, lbl]) => (
             <button key={id} onClick={() => setMode(id)}
               style={{ padding: '7px 14px', borderRadius: 8, border: 'none',
                 background: mode === id ? '#fff' : 'transparent',
             ? <button onClick={stopStream}
                 style={{ background: '#ef4444', color: '#fff', border: 'none',
                   borderRadius: 8, padding: '8px 20px', fontWeight: 700,
+                  fontSize: 13, cursor: 'pointer' }}>Stop</button>
             : !streamDone && (
                 <button onClick={() => startStream()}
                   style={{ background: '#6366f1', color: '#fff', border: 'none',
                     borderRadius: 8, padding: '8px 20px', fontWeight: 700,
                     fontSize: 13, cursor: 'pointer' }}>
+                  Play Episode
                 </button>
               )
         ) : (
               style={{ background: loading ? '#94a3b8' : '#6366f1', color: '#fff',
                 border: 'none', borderRadius: 8, padding: '8px 20px', fontWeight: 700,
                 fontSize: 13, cursor: loading ? 'not-allowed' : 'pointer' }}>
+              {loading ? 'Loading…' : sessionId ? 'Reset' : 'Start'}
             </button>
           )
         )}
           <span style={{ fontSize: 13, fontWeight: 700, color: '#16a34a',
             background: '#f0fdf4', border: '1px solid #bbf7d0', borderRadius: 8,
             padding: '6px 14px' }}>
+            Episode #{episodeCount} Complete
             {typeof finalScore === 'number' ? ` · Score: ${finalScore.toFixed(4)}` : ''}
           </span>
         )}
         <div style={{ background: '#fef2f2', border: '1px solid #fca5a5',
           borderRadius: 10, padding: '10px 14px', marginBottom: 14,
           fontSize: 13, color: '#dc2626' }}>
+          {error}&ensp;
           <button onClick={() => setError(null)}
             style={{ background: 'none', border: 'none', cursor: 'pointer',
+              color: '#dc2626', fontWeight: 700 }}>x</button>
         </div>
       )}
         <div key={i} style={{ background: '#fffbeb', border: '1px solid #fcd34d',
           borderRadius: 10, padding: '10px 14px', marginBottom: 10,
           fontSize: 13, color: '#92400e', fontWeight: 600 }}>
+          Schema Drift @ step {d.step}: {d.message}
         </div>
       ))}
             }}>
               <div>
                 <div style={{ fontSize: 18, fontWeight: 900, color: '#fff', letterSpacing: '-0.3px' }}>
+                  Episode #{episodeCount} Complete
                 </div>
                 <div style={{ fontSize: 12, color: '#d1fae5', marginTop: 2 }}>
                   Final results frozen below — all charts and task data preserved
             <div style={card()}>
               <div style={section}>Reward / Step</div>
               <LineChart data={rewardTrace} color="#6366f1" height={130}
+                label="Press Play Episode to start" />
               {rewardTrace.length > 0 && (
                 <div style={{ display: 'flex', justifyContent: 'space-between',
                   fontSize: 11, color: '#64748b', marginTop: 6 }}>
                     <div style={{ fontSize: 10, color: '#94a3b8', marginTop: 2 }}>
                       {(t.progress * 100).toFixed(0)}%
                       {t.deadline ? ` · deadline: step ${t.deadline}` : ''}
+                      {t.is_interrupted ? ' (interrupted)' : ''}
                     </div>
                   </div>
                 )
               display: 'flex', alignItems: 'center', gap: 16, flexWrap: 'wrap',
             }}>
               <div style={{ fontSize: 18, fontWeight: 900, color: '#fff' }}>
+                Manual Episode Complete
               </div>
               <div style={{ fontSize: 12, color: '#c7d2fe' }}>
                 All results frozen — task log and reward chart preserved below
               <div style={section}>Task Queue</div>
               {manTasks.length === 0 && (
                 <div style={{ color: '#cbd5e1', fontSize: 13, textAlign: 'center', padding: 24 }}>
+                  Press Start to begin
                 </div>
               )}
               {manTasks.map(task => {
                     style={{ flex: 1, padding: 9, borderRadius: 8,
                       border: '1px solid #e2e8f0', background: '#f0fdf4',
                       color: '#16a34a', fontWeight: 700, cursor: 'pointer', fontSize: 13 }}>
+                    Break</button>
                   <button onClick={() => handleAction('delay')}
                     style={{ flex: 1, padding: 9, borderRadius: 8,
                       border: '1px solid #e2e8f0', background: '#f8fafc',
                       color: '#64748b', fontWeight: 700, cursor: 'pointer', fontSize: 13 }}>
+                    Delay</button>
                 </div>
               )}
             </div>