{% extends "base.html" %}
{% block title %}{{ scenario.name }} | Silisocs Studio{% endblock %}
{% block crumb %}<a href="/scenarios">Scenarios</a><span>/</span>{{ scenario.name }}{% endblock %}
{% block content %}
<section class="object-heading"><div class="object-title"><span class="object-glyph"><svg><use href="#icon-scenarios"/></svg></span><div><span class="badge neutral">scenario</span><span class="badge source-badge">{{ scenario.source_label }}</span><h1>{{ scenario.name }}</h1><p>{{ scenario.path }}</p><small id="save-state" class="save-state">Saved</small></div></div><div class="composer-actions"><button id="scenario-undo" class="icon-button" type="button" title="Undo document edit" aria-label="Undo document edit" onclick="restoreScenarioHistory(-1)" disabled><svg><use href="#icon-undo"/></svg></button><button id="scenario-redo" class="icon-button" type="button" title="Redo document edit" aria-label="Redo document edit" onclick="restoreScenarioHistory(1)" disabled><svg><use href="#icon-redo"/></svg></button><button class="button quiet" type="button" onclick="preflight()"><svg><use href="#icon-check"/></svg>Preflight</button><button class="button quiet" type="button" onclick="saveScenario()"><svg><use href="#icon-save"/></svg>Save</button><label class="launch-mode"><span class="sr-only">Launch mode</span><select id="launch-mode" aria-label="Launch mode"><option value="interactive">Interactive</option><option value="continuous">Continuous</option></select></label><button class="button primary" type="button" onclick="launchScenario()"><svg><use href="#icon-runs"/></svg>Launch</button></div></section>
<details class="behind-curtain"><summary>Show CLI</summary><code>uv run silisocs --config-path scenarios/{{ scenario.name }}/conf</code></details>
<nav class="tabs workspace-tabs" aria-label="Scenario workspace"><a class="active" data-workspace-tab="design" href="#design">Design</a><a data-workspace-tab="preflight" href="#preflight">Preflight</a><a data-workspace-tab="views" href="#views">Views</a><a data-workspace-tab="history" href="#history">History</a></nav>
<div id="design" data-workspace-panel="design" class="composer">
  <form id="schema-form" class="composer-form">
  <div class="editor-intro"><span class="editor-signal"><i></i><i></i><i></i></span><div><strong>World controls</strong><small>Changes compose into the YAML source as you work.</small></div></div>
  <label class="advanced-toggle"><input type="checkbox" onchange="document.getElementById('schema-form').classList.toggle('show-advanced',this.checked)"> Advanced configuration</label>
  {% for group in schema.fields|groupby('group') %}
    <fieldset class="form-group {{ 'advanced' if group.list[0].advanced }}"><legend>{{ group.grouper }}</legend>
    {% for field in group.list %}<label class="form-field"{% if field.visible_when %} data-visible='{{ field.visible_when|tojson }}'{% endif %}><span>{{ field.label }}</span>
      {% set value = values[field.key] %}
      {% if field.widget.startswith('class_path:') %}{{ field.html|safe }}
      {% elif field.widget == 'number' %}<input data-field="{{ field.key }}" type="number" value="{{ value if value is not none else '' }}">
      {% elif field.widget == 'toggle' %}<input data-field="{{ field.key }}" type="checkbox" {{ 'checked' if value }}>
      {% elif field.widget == 'slider' %}<input data-field="{{ field.key }}" type="range" min="{{ field.widget_params.min|default(0) }}" max="{{ field.widget_params.max|default(100) }}" step="{{ field.widget_params.step|default(1) }}" value="{{ value if value is not none else field.widget_params.min|default(0) }}">
      {% elif field.widget == 'agent_classes' %}<div class="agent-class-editor" data-field="{{ field.key }}" data-agent-classes data-choices-from="{{ field.choices_from }}"><datalist id="agent-class-options" data-agent-class-options>{% for choice in field.choice_items %}<option value="{{ choice.value }}" label="{{ choice.label }}"></option>{% endfor %}</datalist><div data-agent-rows>{% for item_key, item_value in (value or {}).items() %}<article class="agent-class-row" data-agent-row><header><label><span>Class id</span><input data-agent-key value="{{ item_key }}"></label><button type="button" class="icon-button" title="Remove class" aria-label="Remove class" onclick="removeAgentClass(this)">×</button></header><div class="agent-class-grid"><label><span>Implementation</span><input data-agent-prop="class_path" list="agent-class-options" value="{{ item_value.class_path or '' }}"></label><label><span>Count</span><input data-agent-prop="count" type="number" min="0" value="{{ item_value.count if item_value.count is not none else '' }}"></label><label><span>Simulation role</span><input data-agent-prop="sim_role_name" value="{{ item_value.sim_role_name or '' }}"></label><label><span>Flow</span><input data-agent-prop="flow_tag" value="{{ item_value.flow_tag or '' }}"></label><label><span>Data source</span><input data-agent-data-source value="{{ item_value.get('data', {}).get('source', '') }}"></label></div><details><summary>Full class configuration</summary><textarea data-agent-config rows="8">{{ item_value|tojson }}</textarea></details></article>{% endfor %}</div><button type="button" class="button mapping-add" onclick="addAgentClass(this)"><svg><use href="#icon-plus"/></svg>Add class</button></div>
      {% elif field.widget == 'mapping' %}<div class="mapping-editor" data-field="{{ field.key }}" data-mapping="true" data-preview="{{ field.preview_from or '' }}"><div data-mapping-rows>{% for item_key, item_value in (value or {}).items() %}<div class="mapping-row"><input data-map-key value="{{ item_key }}" aria-label="Entry name"><textarea data-map-value rows="5" aria-label="Entry configuration">{{ item_value|tojson }}</textarea>{% if field.preview_from %}<button type="button" class="icon-button" title="Preview records" aria-label="Preview records" onclick="previewMappingRow(this)">⌕</button>{% endif %}<button type="button" class="icon-button" title="Remove entry" aria-label="Remove entry" onclick="removeMappingRow(this)">×</button><pre class="mapping-preview" hidden></pre></div>{% endfor %}</div><button type="button" class="button mapping-add" onclick="addMappingRow(this)">Add entry</button></div>
      {% elif field.widget == 'select' %}<select data-field="{{ field.key }}"{% if field.choices_deferred %} data-choices-from="{{ field.choices_from }}" data-choices-dependencies='{{ field.choices_depend_on|tojson }}'{% endif %}><option value="">Default</option>{% for choice in field.choice_items %}<option value="{{ choice.value }}" {{ 'selected' if choice.value == value }}>{{ choice.label }}</option>{% endfor %}{% if value and value not in field.choices %}<option selected value="{{ value }}">{{ value }}</option>{% endif %}</select>
      {% elif field.widget == 'combobox' %}<input data-field="{{ field.key }}" type="text" list="choices-{{ loop.index0 }}-{{ field.key|replace('.','-') }}" value="{{ value if value is not none else '' }}"{% if field.choices_deferred %} data-choices-from="{{ field.choices_from }}" data-choices-dependencies='{{ field.choices_depend_on|tojson }}'{% endif %}><datalist id="choices-{{ loop.index0 }}-{{ field.key|replace('.','-') }}">{% for choice in field.choice_items %}<option value="{{ choice.value }}" label="{{ choice.label }}"></option>{% endfor %}</datalist>
      {% elif field.widget.startswith('list') %}<textarea data-field="{{ field.key }}" rows="4">{{ value|join('\n') if value is iterable and value is not string else (value or '') }}</textarea>
      {% elif field.widget == 'chips' %}<select data-field="{{ field.key }}" data-chips="true"{% if field.choices_deferred %} data-choices-from="{{ field.choices_from }}" data-choices-dependencies='{{ field.choices_depend_on|tojson }}'{% endif %} multiple size="{{ [field.choices|length, 7]|min }}">{% for choice in field.choice_items %}<option value="{{ choice.value }}" {{ 'selected' if value and choice.value in value }}>{{ choice.label }}</option>{% endfor %}</select>
      {% elif field.widget == 'yaml' %}<textarea data-field="{{ field.key }}" data-yaml="true" rows="5">{{ value|tojson if value is not none else '' }}</textarea>
      {% else %}<input data-field="{{ field.key }}" type="text" value="{{ value if value is not none else '' }}">{% endif %}
      {% if field.help %}<small>{{ field.help }}</small>{% endif %}
    </label>{% endfor %}</fieldset>
  {% endfor %}
  </form>
  <section class="yaml-mirror"><div class="yaml-tabs">{% for name in scenario.files %}<button type="button" class="{{ 'active' if loop.first }}" onclick="showYaml('{{ loop.index0 }}',this)">{{ name }}</button>{% endfor %}</div>{% for name, file in scenario.files.items() %}<label class="yaml-document {{ '' if loop.first else 'hidden' }}" data-yaml-panel="{{ loop.index0 }}"><span>{{ name }}</span><textarea data-file="{{ name }}" spellcheck="false">{{ file.text }}</textarea></label>{% endfor %}</section>
</div>
<section id="preflight" data-workspace-panel="preflight" class="preflight-result" hidden><div class="empty compact"><b>Ready to validate</b><p>Run preflight to inspect configuration findings and estimated work.</p></div></section>
<section id="views" data-workspace-panel="views" class="view-editor" hidden>
  <div class="section-head"><div><p class="eyebrow">Analysis contract</p><h2>Scenario view</h2></div><button class="button" type="button" onclick="createView()">Add view</button></div>
  <div class="view-editor-grid"><label class="form-field"><span>Name</span><input id="view-name" value="scenario_overview"></label><label class="form-field"><span>Layout</span><select id="view-layout"><option>grid</option><option>rows</option><option>tabs</option></select></label><fieldset><legend>Panels</legend><div class="choice-grid" data-choice-grid data-choice-name="view-panel" data-choices-from="panel.catalog" data-choices-dependencies='["env.gm.backend.type", "env.gm.backend.class_path"]'>{% for panel in panel_catalog %}<label><input type="checkbox" name="view-panel" value="{{ panel }}"> {{ panel|replace('_',' ')|title }}</label>{% endfor %}</div><small>Only panels this scenario's backend can populate are listed.</small></fieldset></div>
</section>
<section id="history" data-workspace-panel="history" class="view-editor" hidden><div class="section-head"><div><p class="eyebrow">Artifacts</p><h2>Run history</h2></div></div><div data-scenario-history class="empty compact skeleton loading" aria-busy="true"><b>Loading run history</b><p>Checking this scenario's artifacts.</p></div></section>
<script>
const scenarioName={{ scenario.name|tojson }};
const scenarioSource={{ scenario.source|tojson }};
const fileEditors=()=>Object.fromEntries([...document.querySelectorAll('[data-file]')].map(el=>[el.dataset.file,el.value]));
let scenarioHistory=[JSON.stringify(fileEditors())],scenarioHistoryIndex=0;
function updateScenarioHistoryButtons(){document.getElementById('scenario-undo').disabled=scenarioHistoryIndex===0;document.getElementById('scenario-redo').disabled=scenarioHistoryIndex===scenarioHistory.length-1}
function recordScenarioHistory(){const snapshot=JSON.stringify(fileEditors());if(snapshot===scenarioHistory[scenarioHistoryIndex])return;scenarioHistory=scenarioHistory.slice(0,scenarioHistoryIndex+1);scenarioHistory.push(snapshot);if(scenarioHistory.length>40)scenarioHistory.shift();scenarioHistoryIndex=scenarioHistory.length-1;updateScenarioHistoryButtons()}
function ensureScenarioFile(name){let editor=document.querySelector(`[data-file="${CSS.escape(name)}"]`);if(editor)return editor;const index=String(document.querySelectorAll('[data-yaml-panel]').length),button=document.createElement('button'),label=document.createElement('label'),span=document.createElement('span');button.type='button';button.textContent=name;button.dataset.dynamicFileTab=name;button.onclick=()=>showYaml(index,button);label.className='yaml-document hidden';label.dataset.yamlPanel=index;label.dataset.dynamicFile=name;span.textContent=name;editor=document.createElement('textarea');editor.dataset.file=name;editor.spellcheck=false;editor.addEventListener('change',async()=>{if(await compose({}, {yaml:false,form:true}))await loadDeferredChoices()});label.append(span,editor);document.querySelector('.yaml-tabs').append(button);document.querySelector('.yaml-mirror').append(label);return editor}
async function restoreScenarioHistory(direction){const next=scenarioHistoryIndex+direction;if(next<0||next>=scenarioHistory.length)return;scenarioHistoryIndex=next;const files=JSON.parse(scenarioHistory[next]);document.querySelectorAll('[data-dynamic-file]').forEach(panel=>{if(!(panel.dataset.dynamicFile in files)){document.querySelector(`[data-dynamic-file-tab="${CSS.escape(panel.dataset.dynamicFile)}"]`)?.remove();panel.remove()}});Object.entries(files).forEach(([name,text])=>{ensureScenarioFile(name).value=text});await compose({}, {yaml:false,form:true,history:false});markDirty();updateScenarioHistoryButtons()}
function showYaml(index,button){document.querySelectorAll('[data-yaml-panel]').forEach(el=>el.classList.toggle('hidden',el.dataset.yamlPanel!==index));document.querySelectorAll('.yaml-tabs button').forEach(el=>el.classList.remove('active'));button.classList.add('active')}
function mappingButton(label,title,handler){const button=document.createElement('button');button.type='button';button.className='icon-button';button.title=title;button.ariaLabel=title;button.textContent=label;button.onclick=()=>handler(button);return button}
function agentClassRow(key='',config={}){const row=document.createElement('article');row.className='agent-class-row';row.dataset.agentRow='';const header=document.createElement('header'),keyLabel=document.createElement('label'),keyTitle=document.createElement('span'),keyInput=document.createElement('input');keyTitle.textContent='Class id';keyInput.dataset.agentKey='';keyInput.value=key;keyLabel.append(keyTitle,keyInput);header.append(keyLabel,mappingButton('×','Remove class',removeAgentClass));const grid=document.createElement('div');grid.className='agent-class-grid';for(const [property,label,type] of [['class_path','Implementation','text'],['count','Count','number'],['sim_role_name','Simulation role','text'],['flow_tag','Flow','text']]){const field=document.createElement('label'),title=document.createElement('span'),input=document.createElement('input');title.textContent=label;input.dataset.agentProp=property;input.type=type;input.value=config[property]??'';if(property==='class_path')input.setAttribute('list','agent-class-options');field.append(title,input);grid.append(field)}const sourceField=document.createElement('label'),sourceTitle=document.createElement('span'),sourceInput=document.createElement('input');sourceTitle.textContent='Data source';sourceInput.dataset.agentDataSource='';sourceInput.value=config.data?.source??'';sourceField.append(sourceTitle,sourceInput);grid.append(sourceField);const details=document.createElement('details'),summary=document.createElement('summary'),raw=document.createElement('textarea');summary.textContent='Full class configuration';raw.dataset.agentConfig='';raw.rows=8;raw.value=JSON.stringify(config??{},null,2);details.append(summary,raw);row.append(header,grid,details);return row}
function addAgentClass(button){const editor=button.closest('[data-agent-classes]'),rows=editor.querySelector('[data-agent-rows]');rows.append(agentClassRow('',{}));rows.lastElementChild.querySelector('[data-agent-key]').focus()}
function removeAgentClass(button){const editor=button.closest('[data-agent-classes]');button.closest('[data-agent-row]').remove();editor.dispatchEvent(new Event('change',{bubbles:true}))}
function mappingRow(key='',value={},preview=false){const row=document.createElement('div');row.className='mapping-row';const name=document.createElement('input');name.dataset.mapKey='';name.value=key;name.ariaLabel='Entry name';const body=document.createElement('textarea');body.dataset.mapValue='';body.rows=5;body.value=JSON.stringify(value??{},null,2);body.ariaLabel='Entry configuration';const output=document.createElement('pre');output.className='mapping-preview';output.hidden=true;row.append(name,body);if(preview)row.append(mappingButton('⌕','Preview records',previewMappingRow));row.append(mappingButton('×','Remove entry',removeMappingRow),output);return row}
function addMappingRow(button){const editor=button.closest('[data-mapping]');editor.querySelector('[data-mapping-rows]').append(mappingRow('',{},Boolean(editor.dataset.preview)));editor.querySelector('.mapping-row:last-child [data-map-key]').focus()}
function removeMappingRow(button){const editor=button.closest('[data-mapping]');button.closest('.mapping-row').remove();editor.dispatchEvent(new Event('change',{bubbles:true}))}
async function previewMappingRow(button){const editor=button.closest('[data-mapping]'),row=button.closest('.mapping-row'),output=row.querySelector('.mapping-preview'),itemKey=row.querySelector('[data-map-key]').value.trim();if(!itemKey)return;await compose({[editor.dataset.field]:fieldValue(editor)},{yaml:true,form:false});const response=await fetch('/api/form-preview',{method:'POST',headers:{'content-type':'application/json'},body:JSON.stringify({provider:editor.dataset.preview,item_key:itemKey,files:fileEditors(),source:scenarioSource})});output.hidden=false;output.textContent=response.ok?JSON.stringify(await response.json(),null,2):await response.text()}
function fieldValue(input){if(input.dataset.agentClasses!==undefined){const value={};for(const row of input.querySelectorAll('[data-agent-row]')){const key=row.querySelector('[data-agent-key]').value.trim();if(!key)continue;let config={};try{config=JSON.parse(row.querySelector('[data-agent-config]').value||'{}')}catch{notify(`${key} has invalid full configuration JSON.`,'danger');throw new Error('invalid agent class')}for(const field of row.querySelectorAll('[data-agent-prop]')){const property=field.dataset.agentProp,raw=field.value.trim();if(raw==='')delete config[property];else config[property]=field.type==='number'?Number(raw):raw}const source=row.querySelector('[data-agent-data-source]').value.trim();if(source)config.data={...(config.data||{}),source};else if(config.data)delete config.data.source;value[key]=config}return value}if(input.dataset.mapping){const value={};for(const row of input.querySelectorAll('.mapping-row')){const key=row.querySelector('[data-map-key]').value.trim(),text=row.querySelector('[data-map-value]').value.trim();if(!key)continue;try{value[key]=JSON.parse(text||'{}')}catch{notify(`${key} must contain valid JSON; use the YAML mirror for YAML syntax.`,'danger');throw new Error('invalid mapping value')}}return value}if(input.dataset.chips)return [...input.selectedOptions].map(option=>option.value);if(input.dataset.yaml){if(!input.value.trim())return null;try{return JSON.parse(input.value)}catch{return input.value}}if(input.type==='checkbox')return input.checked;if(input.type==='number'||input.type==='range')return input.value===''?null:Number(input.value);if(input.tagName==='TEXTAREA'&&input.dataset.field.includes('background'))return input.value.split('\n').filter(Boolean);return input.value}
function displayField(input,value){if(input.dataset.agentClasses!==undefined){input.querySelector('[data-agent-rows]').replaceChildren(...Object.entries(value||{}).map(([key,item])=>agentClassRow(key,item)));return}if(input.dataset.mapping){const rows=input.querySelector('[data-mapping-rows]');rows.replaceChildren(...Object.entries(value||{}).map(([key,item])=>mappingRow(key,item,Boolean(input.dataset.preview))));return}if(input.dataset.chips){[...input.options].forEach(option=>option.selected=Array.isArray(value)&&value.includes(option.value));return}if(input.dataset.yaml){input.value=value==null?'':JSON.stringify(value,null,2);return}if(input.type==='checkbox'){input.checked=Boolean(value);return}if(input.tagName==='TEXTAREA'&&input.dataset.field.includes('background')){input.value=Array.isArray(value)?value.join('\n'):(value??'');return}input.value=value??''}
function currentValues(){return Object.fromEntries([...document.querySelectorAll('[data-field]')].map(input=>[input.dataset.field,fieldValue(input)]))}
// A rule value may be one accepted value or a list of them, so a field can
// declare "only for these backends" in one line.
function updateVisibility(values=currentValues()){document.querySelectorAll('[data-visible]').forEach(el=>{const rules=JSON.parse(el.dataset.visible);el.hidden=!Object.entries(rules).every(([key,wanted])=>Array.isArray(wanted)?wanted.includes(values[key]):values[key]===wanted)})}
function normalizedChoiceItems(items){return (items||[]).map(item=>typeof item==='string'?{value:item,label:item}:item)}
function applyComposition(data,{yaml=true,form=true}={}){if(yaml)Object.entries(data.files||{}).forEach(([name,text])=>{const editor=document.querySelector(`[data-file="${CSS.escape(name)}"]`);if(editor)editor.value=text});if(form)Object.entries(data.values||{}).forEach(([key,value])=>{const input=document.querySelector(`[data-field="${CSS.escape(key)}"]`);if(input)displayField(input,value)});for(const field of data.schema?.fields||[]){const items=normalizedChoiceItems(field.choice_items);if(!items.length)continue;const input=document.querySelector(`[data-field="${CSS.escape(field.key)}"]`);if(!input)continue;const selected=new Set(Array.isArray(data.values?.[field.key])?data.values[field.key]:[data.values?.[field.key]]),options=items.map(item=>new Option(item.label,item.value,false,selected.has(item.value)));if(!input.dataset.chips)options.unshift(new Option('Default','',false,selected.has('')));input.replaceChildren(...options)}updateVisibility(data.values)}
async function compose(updates={},options={}){const response=await fetch('/api/compose',{method:'POST',headers:{'content-type':'application/json'},body:JSON.stringify({files:fileEditors(),updates,source:scenarioSource})});if(!response.ok){notify(await response.text(),'danger');return false}applyComposition(await response.json(),options);markDirty();if(options.history!==false)recordScenarioHistory();return true}
// Rebuild a checkbox grid in place, keeping whatever is still on offer ticked.
function renderChoiceGrid(container,rawItems){const items=normalizedChoiceItems(rawItems),selected=new Set([...container.querySelectorAll('input:checked')].map(input=>input.value));container.replaceChildren(...items.map(item=>{const label=document.createElement('label'),box=document.createElement('input'),text=item.label===item.value?item.label.replace(/_/g,' ').replace(/\b\w/g,c=>c.toUpperCase()):item.label;box.type='checkbox';box.name=container.dataset.choiceName;box.value=item.value;box.checked=selected.has(item.value);label.append(box,document.createTextNode(' '+text));return label}))}
async function loadDeferredChoices(changedKey=null){for(const input of document.querySelectorAll('[data-choices-from]')){const dependencies=JSON.parse(input.dataset.choicesDependencies||'[]');if(changedKey&&dependencies.length&&!dependencies.includes(changedKey))continue;input.disabled=true;const response=await fetch('/api/form-choices',{method:'POST',headers:{'content-type':'application/json'},body:JSON.stringify({provider:input.dataset.choicesFrom,files:fileEditors(),source:scenarioSource})});input.disabled=false;if(!response.ok){notify(await response.text(),'danger');continue}const data=await response.json(),items=normalizedChoiceItems(data.items||data.choices);if(input.dataset.choiceGrid!==undefined){renderChoiceGrid(input,items);continue}if(input.dataset.agentClasses!==undefined){let list=input.querySelector('[data-agent-class-options]');list.id='agent-class-options';list.replaceChildren(...items.map(item=>new Option(item.label,item.value)));input.querySelectorAll('[data-agent-prop="class_path"]').forEach(field=>field.setAttribute('list',list.id));continue}if(input.tagName==='INPUT'&&input.list){input.list.replaceChildren(...items.map(item=>new Option(item.label,item.value)));continue}const selected=new Set(input.dataset.chips?[...input.selectedOptions].map(option=>option.value):[input.value]),options=items.map(item=>new Option(item.label,item.value,false,selected.has(item.value)));if(!input.dataset.chips)options.unshift(new Option('Default','',false,selected.has('')));input.replaceChildren(...options);if(input.dataset.chips)input.size=Math.min(Math.max(items.length,2),7)}}
document.getElementById('schema-form').addEventListener('change',async event=>{const input=event.target.closest('[data-field]');if(input&&await compose({[input.dataset.field]:fieldValue(input)},{yaml:true,form:false}))await loadDeferredChoices(input.dataset.field)});
document.querySelectorAll('[data-file]').forEach(editor=>editor.addEventListener('change',async()=>{if(await compose({}, {yaml:false,form:true}))await loadDeferredChoices()}));
updateVisibility({{ values|tojson }});
loadDeferredChoices();
let scenarioDirty=false;function markDirty(){scenarioDirty=true;const state=document.getElementById('save-state');if(state){state.textContent='Unsaved changes';state.classList.add('dirty')}}function markSaved(){scenarioDirty=false;const state=document.getElementById('save-state');if(state){state.textContent='Saved';state.classList.remove('dirty')}}window.addEventListener('beforeunload',event=>{if(scenarioDirty){event.preventDefault();event.returnValue=''}});async function saveScenario(){const response=await fetch('/api/scenarios',{method:'POST',headers:{'content-type':'application/json'},body:JSON.stringify({name:scenarioName,files:fileEditors(),source:scenarioSource})});if(response.ok)markSaved();notify(response.ok?'Saved':await response.text(),response.ok?'success':'danger');return response.ok}
const escapeHtml=value=>String(value).replace(/[&<>'"]/g,char=>({'&':'&amp;','<':'&lt;','>':'&gt;',"'":'&#39;','"':'&quot;'}[char]));
async function preflight(){const response=await fetch('/api/preflight',{method:'POST',headers:{'content-type':'application/json'},body:JSON.stringify({files:fileEditors(),source:scenarioSource})});if(!response.ok){notify(await response.text(),'danger');return false}const data=await response.json();const el=document.getElementById('preflight');el.innerHTML=`<div class="section-head"><div><p class="eyebrow">Configuration health</p><h2>Preflight</h2></div></div><div class="stats-band"><div><small>Agent steps</small><strong>${data.estimate.agent_steps}</strong></div><div><small>LLM calls</small><strong>${data.estimate.llm_calls}</strong></div><div><small>Tokens</small><strong>${data.estimate.prompt_tokens+data.estimate.completion_tokens}</strong></div></div>${data.findings.map(x=>`<p class="finding ${x.severity}"><b>${escapeHtml(x.path)}</b> ${escapeHtml(x.message)}</p>`).join('')}`;showWorkspaceTab('preflight');return data.ok}
async function launchScenario(){if(!await preflight()||!await saveScenario())return;const interactive=document.getElementById('launch-mode').value==='interactive',body=scenarioSource==='workspace'?{scenario:scenarioName,source:scenarioSource,interactive,start_paused:interactive}:{name:scenarioName,config_yaml:{files:fileEditors()},source:scenarioSource,interactive,start_paused:interactive};const response=await fetch('/api/launch',{method:'POST',headers:{'content-type':'application/json'},body:JSON.stringify(body)});if(!response.ok){notify(await response.text(),'danger');return}const job=await response.json();location.href=interactive?`/live?job=${job.id}`:`/live?job=${job.id}&autowatch=1`}
function createView(){const name=document.getElementById('view-name').value.trim();const panels=[...document.querySelectorAll('[name="view-panel"]:checked')].map(input=>({built_in:input.value}));if(!/^[A-Za-z0-9_-]+$/.test(name)||!panels.length){notify('Choose a safe view name and at least one panel.','danger');return}const relative=`views/${name}.yaml`,spec={view:{name,title:name.replaceAll('_',' '),scope:'run',layout:document.getElementById('view-layout').value,panels}},editor=ensureScenarioFile(relative);editor.value=JSON.stringify(spec,null,2);markDirty();recordScenarioHistory();notify('View added to the YAML mirror. Save the scenario to publish it.','success')}
async function loadScenarioHistory(){const root=document.querySelector('[data-scenario-history]');if(!root)return;try{const response=await fetch(`/api/scenarios/${encodeURIComponent(scenarioName)}/runs?source=${encodeURIComponent(scenarioSource)}`);if(!response.ok)throw new Error(await response.text());const items=(await response.json()).items||[];if(!items.length){root.className='empty';root.removeAttribute('aria-busy');root.innerHTML='<b>No runs yet</b><p>Launch this scenario to populate its artifact history.</p>';return}const wrap=document.createElement('div'),table=document.createElement('table'),head=table.createTHead().insertRow(),body=table.createTBody();wrap.className='table-scroll';for(const label of ['Run','Status','Seed','']){const th=document.createElement('th');th.textContent=label;head.append(th)}for(const item of items){const row=body.insertRow();row.insertCell().textContent=item.id;row.insertCell().textContent=item.status||'unknown';row.insertCell().textContent=item.seed??'—';const link=document.createElement('a');link.className='row-link';link.href='/runs/'+item.id.split('/').map(encodeURIComponent).join('/');link.textContent='Open';row.insertCell().append(link)}wrap.append(table);root.replaceWith(wrap)}catch(error){root.className='empty compact';root.removeAttribute('aria-busy');root.innerHTML='<b>Run history unavailable</b><p>The editor is ready; artifact history could not be loaded.</p>'}}
function showWorkspaceTab(name){document.querySelectorAll('[data-workspace-panel]').forEach(panel=>panel.hidden=panel.dataset.workspacePanel!==name);document.querySelectorAll('[data-workspace-tab]').forEach(tab=>tab.classList.toggle('active',tab.dataset.workspaceTab===name));history.replaceState(null,'',`#${name}`)}document.querySelectorAll('[data-workspace-tab]').forEach(tab=>tab.addEventListener('click',event=>{event.preventDefault();showWorkspaceTab(tab.dataset.workspaceTab)}));showWorkspaceTab(['design','preflight','views','history'].includes(location.hash.slice(1))?location.hash.slice(1):'design');
loadScenarioHistory();
registerPaletteCommand({label:'Launch scenario',keywords:'run start preflight',action:launchScenario});registerPaletteCommand({label:'Save scenario',keywords:'yaml write',action:saveScenario});registerPaletteCommand({label:'Scenario: Preflight',href:'#preflight',keywords:'validate cost'});registerPaletteCommand({label:'Scenario: Views',href:'#views',keywords:'analysis panels'});registerPaletteCommand({label:'Scenario: History',href:'#history',keywords:'runs'});
</script>
{% endblock %}