fix: restore frontend-backend compatibility with dual response keys

- server/app.py: return both 'state' and 'observation' for broad frontend support
- frontend/src/app/page.tsx: clean rewrite with robust boot logic and multi-field support
- Verified local connectivity and dual-key compliance

frontend/src/app/page.tsx

@@ -2,7 +2,11 @@
 
 import { useState, useEffect } from 'react';
 
-const API_URL = typeof window !== 'undefined' ? (window.location.origin.includes('localhost') ? 'http://127.0.0.1:7860' : window.location.origin) : "http://127.0.0.1:7860";
+const API_URL = typeof window !== 'undefined' 
+  ? (window.location.origin.includes('localhost') || window.location.origin.includes('127.0.0.1') 
+    ? 'http://127.0.0.1:7860' 
+    : window.location.origin) 
+  : "http://127.0.0.1:7860";
 
 export default function Home() {
   const [state, setState] = useState<any>(null);
@@ -28,8 +32,8 @@ export default function Home() {
       const res = await fetch(`${API_URL}/state`);
       if (res.ok) {
         const data = await res.json();
-        const obs = data.observation || data;
-        if (obs && obs.ticket_text) {
+        const obs = data.observation || data.state || data;
+        if (obs && obs.status !== "session_complete") {
           setState(obs);
           setBooting(false);
           return true;
@@ -47,7 +51,7 @@ export default function Home() {
     try {
       const res = await fetch(`${API_URL}/reset`, { method: 'POST' });
       const data = await res.json();
-      const obs = data.observation || data;
+      const obs = data.observation || data.state || data;
       setState(obs);
       setLogs([{ role: 'system', message: 'Environment Reset Successfully' }]);
       showStatus("Enterprise session initialized.", "success");
@@ -68,15 +72,15 @@ export default function Home() {
         const res = await fetch(`${API_URL}/reset`, { method: 'POST' });
         if (res.ok) {
           const data = await res.json();
-          const obs = data.observation || data;
+          const obs = data.observation || data.state || data;
           setState(obs);
           setBooting(false);
           addLog('Backend connected — session started', 'system');
         } else {
-          setTimeout(boot, 1500);
+          setTimeout(boot, 2000);
         }
       } catch {
-        setTimeout(boot, 1500);
+        setTimeout(boot, 2000);
       }
     }
   };
@@ -88,7 +92,7 @@ export default function Home() {
       try {
         actionObj = JSON.parse(actionInput.trim());
       } catch (e) {
-        throw new Error("Invalid JSON: Fix brackets or commas.");
+        throw new Error("Invalid JSON format.");
       }
 
       const res = await fetch(`${API_URL}/step`, {
@@ -97,24 +101,20 @@ export default function Home() {
         body: JSON.stringify(actionObj)
       });
 
-      if (!res.ok) {
-        const errorData = await res.json().catch(() => ({ detail: "Server error" }));
-        throw new Error(errorData.detail || "Step failed.");
-      }
-
       const data = await res.json();
-      const obs = data.observation;
-      
+      if (!res.ok) throw new Error(data.detail || "Step failed.");
+
+      const obs = data.observation || data.state;
+      setState(obs);
+
       if (obs.status === "session_complete") {
         addLog('🎉 Session Complete!', 'system');
-        setState(obs);
-        showStatus("Session finished successfully!", "success");
+        showStatus("Session finished!", "success");
       } else {
-        setState(obs);
         const reward = data.reward ?? 0;
         const msg = data.info?.message || "Action processed";
         addLog(`Action: ${actionObj.action_type}`, 'agent', `${msg} | Reward: ${reward.toFixed(3)}`, reward >= 0 ? "success" : "failed");
-        showStatus(`Action executed: ${reward >= 0 ? 'SUCCESS' : 'DEDUCTION'}`, reward >= 0 ? "success" : "error");
+        showStatus(`Action: ${reward >= 0 ? 'SUCCESS' : 'DEDUCTION'}`, reward >= 0 ? "success" : "error");
       }
     } catch (e: any) {
       showStatus(e.message || "Network Error.", "error");
@@ -127,13 +127,12 @@ export default function Home() {
     setScore(null);
     try {
       const res = await fetch(`${API_URL}/grader?task_id=task_hard_1`);
-      if (!res.ok) throw new Error("Evaluation engine unreachable.");
       const data = await res.json();
       setScore(data.score ?? 0);
-      addLog(`Evaluation: ${(data.score * 100).toFixed(0)}%`, 'system');
-      showStatus("Model evaluation complete.", "success");
+      addLog(`Evaluation Score: ${(data.score * 100).toFixed(0)}%`, 'system');
+      showStatus("Evaluation complete.", "success");
     } catch (e: any) {
-      showStatus(e.message || "Grader connection failed.", "error");
+      showStatus("Grader unavailable.", "error");
     }
     setLoading(false);
   };
@@ -152,221 +151,109 @@ export default function Home() {
           <p style={{ color: 'var(--muted)', fontSize: '1.1rem', margin: '0.25rem 0 0 0' }}>AI Decision Monitoring System</p>
         </div>
         <div style={{ textAlign: 'right' }}>
-           <button className="btn btn-outline" onClick={resetEnv} disabled={loading}>
+           <button className="btn btn-outline" onClick={resetEnv} disabled={loading || booting}>
             {loading ? 'Processing...' : 'New Session'}
           </button>
         </div>
       </header>
 
       {statusMsg && (
-        <div className={`animate-slide`} style={{ 
-          position: 'fixed', 
-          top: '20px', 
-          right: '20px', 
-          zIndex: 1000, 
-          padding: '1rem 2rem', 
-          borderRadius: '12px', 
+        <div style={{ 
+          position: 'fixed', top: '20px', right: '20px', zIndex: 1000, 
+          padding: '1rem 2rem', borderRadius: '12px', 
           background: statusMsg.type === 'success' ? '#10b981' : '#ef4444', 
-          color: 'white', 
-          fontWeight: 700, 
-          boxShadow: '0 20px 25px -5px rgba(0,0,0,0.1)',
-          display: 'flex',
-          alignItems: 'center',
-          gap: '10px'
+          color: 'white', fontWeight: 700, boxShadow: '0 20px 25px -5px rgba(0,0,0,0.1)',
+          display: 'flex', alignItems: 'center', gap: '10px'
         }}>
           {statusMsg.type === 'success' ? '✅' : '❌'} {statusMsg.text}
         </div>
       )}
 
-      <div className="layout-grid" style={{ gridTemplateColumns: 'minmax(0, 1fr) 350px', gap: '2rem' }}>
+      <div className="layout-grid">
         <section style={{ display: 'flex', flexDirection: 'column', gap: '2rem' }}>
-          
           <div className="glass-card">
             {booting ? (
               <div style={{ textAlign: 'center', padding: '5rem' }}>
                 <div style={{ fontSize: '3rem', marginBottom: '1.5rem', animation: 'spin 2s linear infinite', display: 'inline-block' }}>⚙️</div>
-                <h2 style={{ fontSize: '1.5rem', fontWeight: 800, marginBottom: '0.5rem' }}>Starting Engine</h2>
+                <h2 style={{ fontSize: '1.5rem', fontWeight: 800 }}>Starting Engine</h2>
                 <p style={{ color: 'var(--muted)' }}>Connecting to backend... Attempt {bootAttempt}</p>
-                <div style={{ marginTop: '1rem', fontSize: '0.8rem', opacity: 0.6 }}>Waiting for high-performance simulation environment</div>
               </div>
             ) : state && state.status !== "session_complete" ? (
               <div style={{ display: 'grid', gap: '1.5rem' }}>
-                <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'flex-start' }}>
+                <div style={{ display: 'flex', justifyContent: 'space-between' }}>
                    <div style={{ flex: 1 }}>
-                    <span style={{ fontSize: '0.7rem', fontWeight: 800, color: 'var(--primary)', textTransform: 'uppercase', letterSpacing: '0.05em' }}>Current Instruction</span>
-                    <p style={{ marginTop: '0.5rem', fontSize: '1.5rem', fontWeight: 600, lineHeight: 1.4 }}>"{state.ticket_text}"</p>
+                    <span style={{ fontSize: '0.7rem', fontWeight: 800, color: 'var(--primary)', textTransform: 'uppercase' }}>Current Ticket</span>
+                    <p style={{ marginTop: '0.5rem', fontSize: '1.4rem', fontWeight: 600 }}>"{state.ticket_text}"</p>
                   </div>
-                  <div style={{ marginLeft: '2rem', textAlign: 'right', minWidth: '100px' }}>
-                     <div style={{ fontSize: '0.7rem', fontWeight: 800, color: state.sla_warning ? 'var(--error)' : 'var(--muted)', textTransform: 'uppercase' }}>SLA Health</div>
-                     <div style={{ fontSize: '1.5rem', fontWeight: 800, color: state.sla_warning ? 'var(--error)' : 'var(--foreground)' }}>
-                       {state.steps_taken || 0} / {state.sla_limit || 10}
-                     </div>
+                  <div style={{ textAlign: 'right', minWidth: '100px' }}>
+                     <div style={{ fontSize: '0.7rem', fontWeight: 800, color: 'var(--muted)' }}>SLA</div>
+                     <div style={{ fontSize: '1.5rem', fontWeight: 800 }}>{state.steps_taken || 0} / {state.sla_limit || 10}</div>
                   </div>
                 </div>
                 
                 <div style={{ display: 'grid', gridTemplateColumns: 'repeat(4, 1fr)', gap: '1rem' }}>
-                  <div className="glass-card" style={{ padding: '0.75rem' }}>
-                    <div style={{ fontSize: '0.65rem', fontWeight: 700, color: 'var(--muted)', marginBottom: '0.25rem', textTransform: 'uppercase' }}>Sentiment</div>
-                    <div className={`badge badge-${state.sentiment}`} style={{ fontSize: '0.75rem', width: '100%', textAlign: 'center' }}>{state.sentiment || 'neutral'}</div>
-                  </div>
-                  <div className="glass-card" style={{ padding: '0.75rem' }}>
-                    <div style={{ fontSize: '0.65rem', fontWeight: 700, color: 'var(--muted)', marginBottom: '0.25rem', textTransform: 'uppercase' }}>Priority</div>
-                    <div className={`badge ${state.priority ? `badge-${state.priority}` : 'badge-unassigned'}`} style={{ fontSize: '0.75rem', width: '100%', textAlign: 'center' }}>{state.priority || 'PENDING'}</div>
-                  </div>
-                  <div className="glass-card" style={{ padding: '0.75rem' }}>
-                    <div style={{ fontSize: '0.65rem', fontWeight: 700, color: 'var(--muted)', marginBottom: '0.25rem', textTransform: 'uppercase' }}>Status</div>
-                    <div className={`badge badge-${state.status}`} style={{ fontSize: '0.75rem', width: '100%', textAlign: 'center' }}>{state.status}</div>
-                  </div>
-                   <div className="glass-card" style={{ padding: '0.75rem' }}>
-                    <div style={{ fontSize: '0.65rem', fontWeight: 700, color: 'var(--muted)', marginBottom: '0.25rem', textTransform: 'uppercase' }}>Reward</div>
-                    <div style={{ fontSize: '0.8rem', fontWeight: 900, textAlign: 'center', color: 'var(--primary)' }}>+{(state.total_reward || 0).toFixed(2)}</div>
+                  {['sentiment', 'priority', 'status'].map(key => (
+                    <div key={key} className="glass-card" style={{ padding: '0.75rem', textAlign: 'center' }}>
+                      <div style={{ fontSize: '0.6rem', fontWeight: 700, color: 'var(--muted)', textTransform: 'uppercase' }}>{key}</div>
+                      <div className={`badge badge-${state[key] || 'neutral'}`} style={{ fontSize: '0.7rem', marginTop: '0.25rem' }}>{state[key] || 'OPEN'}</div>
+                    </div>
+                  ))}
+                  <div className="glass-card" style={{ padding: '0.75rem', textAlign: 'center' }}>
+                    <div style={{ fontSize: '0.6rem', fontWeight: 700, color: 'var(--muted)', textTransform: 'uppercase' }}>Reward</div>
+                    <div style={{ fontSize: '0.8rem', fontWeight: 900, color: 'var(--primary)' }}>+{(state.total_reward || 0).toFixed(2)}</div>
                   </div>
                 </div>
               </div>
             ) : state?.status === "session_complete" ? (
               <div style={{ textAlign: 'center', padding: '4rem' }}>
-                <div style={{ fontSize: '4rem', marginBottom: '1rem' }}>🎉</div>
-                <h2 style={{ fontSize: '2rem', fontWeight: 800 }}>Evaluation Finished</h2>
+                <div style={{ fontSize: '4rem' }}>🎉</div>
+                <h2 style={{ fontSize: '2rem', fontWeight: 800 }}>Queue Completed</h2>
                 <div style={{ display: 'flex', justifyContent: 'center', gap: '3rem', marginTop: '2rem' }}>
-                   <div>
-                     <div style={{ color: 'var(--muted)', fontSize: '0.8rem', fontWeight: 700 }}>RESOLVED</div>
-                     <div style={{ fontSize: '2rem', fontWeight: 900 }}>{state.resolved}</div>
-                   </div>
-                   <div>
-                     <div style={{ color: 'var(--muted)', fontSize: '0.8rem', fontWeight: 700 }}>TOTAL REWARD</div>
-                     <div style={{ fontSize: '2rem', fontWeight: 900, color: 'var(--primary)' }}>{state.total_reward?.toFixed(2) || '0.00'}</div>
-                   </div>
+                   <div><div style={{ color: 'var(--muted)', fontWeight: 700 }}>RESOLVED</div><div style={{ fontSize: '2rem', fontWeight: 900 }}>{state.resolved}</div></div>
+                   <div><div style={{ color: 'var(--muted)', fontWeight: 700 }}>TOTAL REWARD</div><div style={{ fontSize: '2rem', fontWeight: 900, color: 'var(--primary)' }}>{state.total_reward?.toFixed(2)}</div></div>
                 </div>
                 <button className="btn" style={{ marginTop: '2rem' }} onClick={resetEnv}>Start New Session</button>
               </div>
             ) : (
-              <div style={{ textAlign: 'center', padding: '5rem', color: 'var(--muted)' }}>
-                Waiting for engine state...
-              </div>
+              <div style={{ textAlign: 'center', padding: '5rem', color: 'var(--muted)' }}>Initializing Enterprise Service...</div>
             )}
           </div>
 
           <div className="glass-card">
-            <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', marginBottom: '1.5rem' }}>
-              <h2 style={{ fontSize: '1.25rem', fontWeight: 700, margin: 0, color: 'var(--foreground)' }}>Control Center</h2>
-              <div style={{ display: 'flex', gap: '0.5rem' }}>
-                <button className="btn btn-outline" style={{ fontSize: '0.7rem', padding: '0.25rem 0.5rem' }} onClick={() => setActionInput('{\n  "action_type": "classify_ticket",\n  "payload": { "classification": "refund" }\n}')}>🏷️ Classify</button>
-                <button className="btn btn-outline" style={{ fontSize: '0.7rem', padding: '0.25rem 0.5rem' }} onClick={() => setActionInput('{\n  "action_type": "assign_priority",\n  "payload": { "priority": "high" }\n}')}>⚡ Priority</button>
-                <button className="btn btn-outline" style={{ fontSize: '0.7rem', padding: '0.25rem 0.5rem' }} onClick={() => setActionInput('{\n  "action_type": "generate_response",\n  "payload": { "response": "I apologize for the delay, we are fixing this now." }\n}')}>✍️ Reply</button>
-                <button className="btn btn-outline" style={{ fontSize: '0.7rem', padding: '0.25rem 0.5rem' }} onClick={() => setActionInput('{\n  "action_type": "resolve",\n  "payload": {}\n}')}>✅ Resolve</button>
-              </div>
-            </div>
-            
-            <div style={{ marginBottom: '1.5rem' }}>
-               <textarea 
-                value={actionInput}
-                onChange={(e) => setActionInput(e.target.value)}
-                rows={5}
-                style={{ fontSize: '0.9rem', fontFamily: 'monospace', padding: '1rem', background: '#f8fafc', borderRadius: '12px' }}
-                placeholder="Enter AI Action JSON..."
-              />
-            </div>
+            <h2 style={{ fontSize: '1.2rem', fontWeight: 700, marginBottom: '1rem' }}>Control Center</h2>
+            <textarea 
+              value={actionInput} onChange={(e) => setActionInput(e.target.value)}
+              rows={5} style={{ fontSize: '0.9rem', fontFamily: 'monospace', marginBottom: '1.5rem' }}
+            />
             <div style={{ display: 'flex', gap: '1rem' }}>
-              <button className="btn" onClick={sendAction} disabled={loading || booting || !state || state.status === 'session_complete'} style={{ flex: 2 }}>
+              <button className="btn" onClick={sendAction} disabled={loading || booting || !state} style={{ flex: 2 }}>
                 {loading ? 'Executing...' : 'Execute Action'}
               </button>
-              <button className="btn btn-outline" onClick={runHardGrader} disabled={loading || booting || !state} style={{ flex: 1 }}>
-                Grade Model
-              </button>
+              <button className="btn btn-outline" onClick={runHardGrader} disabled={loading || booting || !state} style={{ flex: 1 }}>Grade</button>
             </div>
           </div>
-
-          {score !== null && (
-            <div className="glass-card animate-slide" style={{ border: '2px solid #10b981', background: '#ecfdf5' }}>
-              <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center' }}>
-                <div>
-                  <h3 style={{ margin: 0, fontSize: '0.9rem', color: '#065f46', fontWeight: 800, textTransform: 'uppercase' }}>Benchmark Result</h3>
-                  <p style={{ margin: '0.25rem 0 0 0', color: '#047857', fontSize: '0.8rem' }}>Hard Task Evaluation Suite</p>
-                </div>
-                <div style={{ fontSize: '3rem', fontWeight: 950, color: '#059669', letterSpacing: '-0.05em' }}>
-                  {(score * 100).toFixed(0)}%
-                </div>
-              </div>
-            </div>
-          )}
-
         </section>
 
         <section style={{ display: 'flex', flexDirection: 'column', gap: '2rem' }}>
-           <div className="glass-card" style={{ flex: 1, maxHeight: '450px', display: 'flex', flexDirection: 'column' }}>
-              <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', marginBottom: '1rem' }}>
-                <h2 style={{ fontSize: '1.1rem', fontWeight: 700, margin: 0 }}>Queue Management</h2>
-                <span className="badge" style={{ background: 'var(--primary)', color: 'white', padding: '2px 10px' }}>{state?.info?.queue?.length || 0} Pending</span>
-              </div>
-
-              {/* Progress Tracker */}
-              <div style={{ marginBottom: '1.5rem' }}>
-                <div style={{ display: 'flex', justifyContent: 'space-between', fontSize: '0.7rem', fontWeight: 700, marginBottom: '0.4rem', color: 'var(--muted)' }}>
-                  <span>SESSION PROGRESS</span>
-                  <span>{((state?.info?.resolved || 0) / 3 * 100).toFixed(0)}%</span>
-                </div>
-                <div style={{ width: '100%', height: '6px', background: '#f1f5f9', borderRadius: '10px', overflow: 'hidden' }}>
-                  <div style={{ 
-                    width: `${((state?.info?.resolved || 0) / 3 * 100)}%`, 
-                    height: '100%', 
-                    background: 'var(--primary)', 
-                    transition: 'width 0.5s ease-out' 
-                  }}></div>
-                </div>
-              </div>
-
-              <div style={{ flex: 1, overflowY: 'auto', display: 'flex', flexDirection: 'column', gap: '0.75rem' }}>
-                 {state?.info?.queue && state.info.queue.length > 0 ? state.info.queue.map((q: string, i: number) => {
-                   const isFirst = i === 0;
-                   const difficulty = q.length > 25 ? "HARD" : q.length > 20 ? "MEDIUM" : "EASY";
-                   return (
-                     <div key={i} className="glass-card" style={{ 
-                       padding: '0.75rem', 
-                       fontSize: '0.85rem', 
-                       background: isFirst ? '#f0f9ff' : 'white', 
-                       borderLeft: isFirst ? '4px solid var(--primary)' : '1px solid var(--card-border)',
-                       position: 'relative',
-                       opacity: isFirst ? 1 : 0.8,
-                       animation: isFirst ? 'pulse 2s infinite' : 'none'
-                     }}>
-                        <div style={{ display: 'flex', justifyContent: 'space-between', marginBottom: '0.4rem' }}>
-                          <span style={{ fontSize: '0.6rem', fontWeight: 800, color: isFirst ? 'var(--primary)' : 'var(--muted)' }}>
-                            {isFirst ? '● ACTIVE NOW' : `UPCOMING #${i + 1}`}
-                          </span>
-                          <span style={{ fontSize: '0.55rem', fontWeight: 900, color: difficulty === 'HARD' ? 'var(--error)' : 'var(--muted)' }}>
-                            {difficulty}
-                          </span>
-                        </div>
-                        <div style={{ fontWeight: 600, color: 'var(--foreground)' }}>{q}</div>
-                        <div style={{ marginTop: '0.5rem', fontSize: '0.65rem', color: 'var(--muted)', display: 'flex', gap: '10px' }}>
-                          <span>⏱️ {isFirst ? 'Est. 2m' : `${(i+1)*3}m wait`}</span>
-                          <span>🏢 Tier 1</span>
-                        </div>
-                     </div>
-                   );
-                 }) : (
-                   <div style={{ textAlign: 'center', padding: '2rem', color: 'var(--muted)' }}>
-                      <div style={{ fontSize: '2rem', marginBottom: '0.5rem' }}>🎯</div>
-                      <p style={{ fontSize: '0.8rem' }}>Queue Cleared</p>
+           <div className="glass-card" style={{ flex: 1, maxHeight: '400px', display: 'flex', flexDirection: 'column' }}>
+              <h2 style={{ fontSize: '1rem', fontWeight: 700, marginBottom: '1rem' }}>Support Queue</h2>
+              <div style={{ flex: 1, overflowY: 'auto' }}>
+                 {state?.info?.queue?.map((q: string, i: number) => (
+                   <div key={i} style={{ padding: '0.75rem', borderBottom: '1px solid var(--card-border)', fontSize: '0.85rem', opacity: i === 0 ? 1 : 0.6 }}>
+                      #{i+1}: {q}
                    </div>
-                 )}
+                 )) || <div style={{ color: 'var(--muted)' }}>Queue is empty</div>}
               </div>
            </div>
 
            <div className="glass-card" style={{ height: '350px', display: 'flex', flexDirection: 'column' }}>
-            <h2 style={{ fontSize: '1.1rem', fontWeight: 700, marginBottom: '1rem' }}>Activity Logs</h2>
-            <div style={{ flex: 1, overflowY: 'auto', display: 'flex', flexDirection: 'column-reverse', gap: '0.75rem' }}>
+            <h2 style={{ fontSize: '1rem', fontWeight: 700, marginBottom: '1rem' }}>Activity Logs</h2>
+            <div style={{ flex: 1, overflowY: 'auto', display: 'flex', flexDirection: 'column-reverse', gap: '0.5rem' }}>
               {logs.map((log, i) => (
-                <div key={i} className={`log-entry ${log.role === 'agent' ? 'log-agent' : 'log-customer'}`} style={{ 
-                  padding: '0.75rem',
-                  borderLeft: log.status === 'success' ? '4px solid #10b981' : log.status === 'failed' ? '4px solid #ef4444' : 'none'
-                }}>
-                  <div style={{ fontSize: '0.65rem', fontWeight: 900, textTransform: 'uppercase', marginBottom: '0.25rem', opacity: 0.6, display: 'flex', justifyContent: 'space-between' }}>
-                    <span>{log.role}</span>
-                    {log.status && <span style={{ color: log.status === 'success' ? '#10b981' : '#ef4444' }}>{log.status.toUpperCase()}</span>}
-                  </div>
-                  <div style={{ fontSize: '0.9rem', fontWeight: 600 }}>{log.message}</div>
-                  {log.info && <div style={{ fontSize: '0.7rem', color: 'var(--primary)', marginTop: '0.25rem', fontWeight: 700 }}>{log.info}</div>}
+                <div key={i} className={`log-entry ${log.role === 'agent' ? 'log-agent' : 'log-customer'}`}>
+                  <div style={{ fontSize: '0.6rem', fontWeight: 900, opacity: 0.5 }}>{log.role.toUpperCase()}</div>
+                  <div style={{ fontSize: '0.85rem', fontWeight: 600 }}>{log.message}</div>
+                  {log.info && <div style={{ fontSize: '0.7rem', color: 'var(--primary)' }}>{log.info}</div>}
                 </div>
               ))}
             </div>

server/app.py

@@ -112,8 +112,10 @@ def get_schema():
 def reset_env():
     """Reset the environment and yield the initial observation (GET or POST)."""
     obs = env_instance.reset()
+    state = obs.state
     return {
-        "observation": obs.state,
+        "observation": state,
+        "state": state,  # Legacy compatibility
         "reward": 0.0,
         "done": False
     }
@@ -127,8 +129,10 @@ def step_env(action: Action):
         env_instance.reset()
 
     obs, reward, done, info = env_instance.step(action)
+    state = obs.state
     return {
-        "observation": obs.state,
+        "observation": state,
+        "state": state,  # Legacy compatibility
         "reward": float(reward.value),
         "done": bool(done),
         "info": info
@@ -144,7 +148,10 @@ def get_state():
     if state.get("status") == "session_complete":
         obs = env_instance.reset()
         state = obs.state
-    return {"observation": state}
+    return {
+        "observation": state,
+        "state": state  # Legacy compatibility
+    }
 
 
 # ───────────────────────────────────────────────────────────────────────────────