@@ -188,19 +188,45 @@ function AppContent() {
188188 { activeTab === 'chat' && < ChatPanel state = { gameState } /> }
189189
190190 { activeTab === 'log' && (
191- < div className = "flex-1 overflow-y-auto p-4 font-mono text-xs" role = "log" aria-label = "Event log" aria-live = "polite" style = { { background : 'var(--bg-panel)' , color : 'var(--text-3)' } } >
192- < h2 className = "mb-2 font-semibold" style = { { color : 'var(--text-1)' , fontSize : '14px' } } > Event Log</ h2 >
193- { effectiveEvents . length === 0 && < div > No events yet.</ div > }
194- { effectiveEvents . map ( ( e , i ) => (
195- < div key = { i } className = "py-0.5" >
196- < span style = { { color : 'var(--amber)' } } > [{ e . type } ]</ span > { ' ' }
197- < span style = { { color : 'var(--text-2)' } } > { e . leader } </ span > { ' ' }
198- { e . data ?. turn != null && < span > T{ String ( e . data . turn ) } </ span > }
199- { e . data ?. title != null && < span > { String ( e . data . title ) } </ span > }
200- { e . data ?. department != null && < span > { String ( e . data . department ) } </ span > }
201- { e . data ?. outcome != null && < span > → { String ( e . data . outcome ) } </ span > }
202- </ div >
203- ) ) }
191+ < div className = "flex-1 overflow-y-auto p-4 font-mono text-xs" role = "log" aria-label = "Event log" aria-live = "polite" style = { { background : 'var(--bg-deep)' , color : 'var(--text-3)' } } >
192+ < div style = { { display : 'flex' , justifyContent : 'space-between' , alignItems : 'center' , marginBottom : '8px' } } >
193+ < h2 style = { { color : 'var(--text-1)' , fontSize : '14px' , fontWeight : 700 } } > Event Log ({ effectiveEvents . length } events)</ h2 >
194+ </ div >
195+ { effectiveEvents . length === 0 && < div style = { { color : 'var(--text-3)' , padding : '20px 0' } } > No events yet. Run a simulation to see the raw SSE event stream.</ div > }
196+ { effectiveEvents . map ( ( e , i ) => {
197+ const typeColors : Record < string , string > = {
198+ status : 'var(--teal)' , turn_start : 'var(--rust)' , turn_done : 'var(--rust)' ,
199+ dept_start : 'var(--text-3)' , dept_done : 'var(--green)' ,
200+ commander_deciding : 'var(--amber)' , commander_decided : 'var(--amber)' ,
201+ outcome : '#e8b44a' , drift : 'var(--teal)' , agent_reactions : '#6aad48' ,
202+ bulletin : 'var(--text-2)' , promotion : 'var(--teal)' ,
203+ } ;
204+ const color = typeColors [ e . type ] || 'var(--text-3)' ;
205+ const hasData = e . data && Object . keys ( e . data ) . length > 0 ;
206+ return (
207+ < details key = { i } style = { { borderBottom : '1px solid var(--border)' , padding : '2px 0' } } >
208+ < summary style = { { cursor : 'pointer' , padding : '4px 0' , display : 'flex' , gap : '8px' , alignItems : 'baseline' } } >
209+ < span style = { { color : 'var(--text-3)' , minWidth : '28px' , textAlign : 'right' , opacity : 0.5 } } > { i } </ span >
210+ < span style = { { color, fontWeight : 700 , minWidth : '120px' } } > { e . type } </ span >
211+ < span style = { { color : 'var(--text-2)' , flex : 1 , overflow : 'hidden' , textOverflow : 'ellipsis' , whiteSpace : 'nowrap' } } > { e . leader } </ span >
212+ { e . data ?. turn != null && < span style = { { color : 'var(--text-3)' } } > T{ String ( e . data . turn ) } </ span > }
213+ { e . data ?. title && < span style = { { color : 'var(--text-2)' } } > { String ( e . data . title ) } </ span > }
214+ { e . data ?. department && < span style = { { color : 'var(--teal)' } } > { String ( e . data . department ) } </ span > }
215+ { e . data ?. outcome && < span style = { { color : 'var(--amber)' , fontWeight : 700 } } > { String ( e . data . outcome ) } </ span > }
216+ </ summary >
217+ { hasData && (
218+ < pre style = { {
219+ padding : '8px 12px 8px 44px' , margin : '0 0 4px' ,
220+ background : 'var(--bg-card)' , borderRadius : '4px' , border : '1px solid var(--border)' ,
221+ overflow : 'auto' , maxHeight : '400px' , fontSize : '11px' , lineHeight : 1.5 ,
222+ color : 'var(--text-2)' , whiteSpace : 'pre-wrap' , wordBreak : 'break-word' ,
223+ } } >
224+ { JSON . stringify ( e . data , null , 2 ) }
225+ </ pre >
226+ ) }
227+ </ details >
228+ ) ;
229+ } ) }
204230 </ div >
205231 ) }
206232
0 commit comments