{% extends "base.html" %}
{% import "_run_control.html" as runctl %}
{% block title %}Live | Silisocs Studio{% endblock %}
{% block crumb %}Live{% endblock %}
{% block content %}
<section class="page-heading"><div><p class="eyebrow"><span class="eyebrow-signal"></span>Live signal</p><h1>Worlds in motion</h1><p>Follow simulation progress and process output as artifacts arrive.</p></div></section>
{% if job %}
<div class="live-ribbon"><span class="status-dot"></span><strong id="job-status">{{ job.status }}</strong><span>{{ job.kind }}</span><span>{{ job.scenario or job.id }}</span><a id="run-link" class="row-link {{ 'hidden' if not run_id }}" href="{{ '/runs/' + run_id if run_id else '#' }}">Enter live run</a><button class="button quiet" type="button" onclick="stopJob()"><svg><use href="#icon-stop"/></svg>Stop</button></div>
{% if interactive and job.status in ('queued', 'running') %}{{ runctl.bar() }}{% endif %}
<section class="panel wide"><header><h3>Live log</h3><label class="follow-toggle"><input id="live-follow" type="checkbox" checked> Follow</label></header><div id="live-log" class="live-log log-lines" role="log" aria-live="polite"><span class="muted">Waiting for process output.</span></div></section>
<script>
const jobId={{ job.id|tojson }},log=document.getElementById('live-log'),autoWatch=new URL(location).searchParams.has('autowatch'),events=new EventSource(`/api/jobs/${jobId}/stream`);function severity(line){if(/\b(error|exception|traceback|critical|fatal)\b/i.test(line))return'error';if(/\b(warn|warning)\b/i.test(line))return'warning';if(/\b(debug|trace)\b/i.test(line))return'debug';return'info'}events.addEventListener('log_line',event=>{const line=JSON.parse(event.data).line||'';log.querySelector('.muted')?.remove();const row=document.createElement('span');row.className=`log-${severity(line)}`;row.textContent=line;log.append(row);if(document.getElementById('live-follow').checked)log.scrollTop=log.scrollHeight});events.addEventListener('status_changed',event=>{document.getElementById('job-status').textContent=JSON.parse(event.data).status});async function attachRun(){const response=await fetch(`/api/jobs/${jobId}`),data=await response.json();if(data.output_dir){const runs=await (await fetch('/api/runs')).json(),run=runs.items.find(item=>item.path===data.output_dir);if(run){const href='/runs/'+run.id+'?tab=watch&view=overview',link=document.getElementById('run-link');link.href=href;link.classList.remove('hidden');if(autoWatch)location.replace(href)}}}events.addEventListener('output_discovered',attachRun);events.addEventListener('artifact_grown',attachRun);events.addEventListener('done',()=>{events.close();attachRun().then(()=>setTimeout(()=>location.reload(),700))});attachRun();async function stopJob(){await fetch(`/api/jobs/${jobId}/stop`,{method:'POST'})}
</script>
{% if interactive and job.status in ('queued', 'running') %}{{ runctl.script(job.id, 'events') }}{% endif %}
{% elif jobs %}<div class="entity-list">{% for item in jobs %}<a class="entity-row" href="/live?job={{ item.id }}"><span class="entity-glyph live-glyph"><svg><use href="#icon-live"/></svg></span><span class="entity-copy"><strong>{{ item.scenario or item.kind }}</strong><small>{{ item.kind }} · {{ item.created_at }}</small></span><span class="badge {{ 'success' if item.status == 'finished' else 'neutral' }}"><i></i>{{ item.status }}</span><span class="arrow"><svg><use href="#icon-arrow"/></svg></span></a>{% endfor %}</div>{% else %}<div class="empty"><span class="empty-mark"><svg><use href="#icon-live"/></svg></span><b>No worlds are moving</b><p>Launch a scenario and its live signal will appear here.</p><a class="button primary" href="/scenarios"><svg><use href="#icon-runs"/></svg>Launch a world</a></div>{% endif %}
{% endblock %}