{% extends "base.html" %}
{% import "_output.html" as out %}
{% import "_controls.html" as pc %}
{% block title %}{{ study.name }} | Silisocs Studio{% endblock %}
{% block crumb %}<a href="/studies">Studies</a><span>/</span>{{ study.name }}{% endblock %}
{% block content %}
<section class="object-heading">
  <div class="object-title"><span class="object-glyph study"><svg><use href="#icon-studies"/></svg></span><div><span class="badge neutral">study</span><h1>{{ study.name }}</h1><p>{{ study.question }}</p>{% if tab == 'definition' %}<small id="study-save-state" class="save-state">Saved</small>{% endif %}</div></div>
  <div class="composer-actions"><a class="button primary" href="/explore/study/{{ study.id }}" title="Interactive cross-condition comparison workspace. The Compare tab shows the same comparison inline."><svg><use href="#icon-spark"/></svg>Explore</a>{% if notebook_exists %}<a class="button quiet" href="/api/studies/{{ study.id }}/notebook" target="_blank"><svg><use href="#icon-export"/></svg>Notebook</a>{% endif %}<button class="button quiet" type="button" onclick="saveStudy()"><svg><use href="#icon-save"/></svg>Save</button><button class="button primary" type="button" onclick="launchStudy()"><svg><use href="#icon-runs"/></svg>Launch</button></div>
</section>
<details class="behind-curtain"><summary>Show CLI</summary><code>uv run python -m silisocs.studies.run_study --study {{ study.path }}/study.yaml run --yes</code></details>
<nav class="tabs"><a class="{{ 'active' if tab == 'board' }}" href="?tab=board">Board</a><a class="{{ 'active' if tab == 'compare' }}" href="?tab=compare" title="The comparison inline. Use Explore for the interactive workspace with compare-by and baseline controls.">Compare</a><a class="{{ 'active' if tab == 'hypotheses' }}" href="?tab=hypotheses">Hypotheses</a><a class="{{ 'active' if tab == 'definition' }}" href="?tab=definition">Definition</a></nav>
{% if tab == 'definition' %}
<div class="composer study-composer">
  <form id="study-form" class="composer-form">
    <div class="editor-intro"><span class="editor-signal violet"><i></i><i></i><i></i></span><div><strong>Experiment controls</strong><small>Define the question, conditions, and evidence contract.</small></div></div>
    <fieldset class="form-group"><legend>Research question</legend>
      <label class="form-field"><span>Question</span><textarea data-study-field="study.question" rows="4">{{ study.definition.study.question or '' }}</textarea></label>
      <div class="form-field"><span>Scenarios</span><div class="study-scenario-picker" data-study-field="study.scenarios" data-study-scenarios>{% for scenario in scenario_choices %}<label><input type="checkbox" value="{{ scenario.name }}" data-scenario-source="{{ scenario.source }}" data-config-pattern="{{ scenario.config_pattern }}" data-project-root="{{ scenario.source_path }}" {{ 'checked' if scenario.name in study.definition.study.scenarios }}> <span>{{ scenario.name }}</span><small>{{ scenario.source_label }}</small></label>{% endfor %}</div><label><span>Additional scenario names</span><textarea data-study-custom-scenarios rows="2">{% for name in study.definition.study.scenarios if name not in scenario_choices|map(attribute='name')|list %}{{ name }}{% if not loop.last %}{{ '\n' }}{% endif %}{% endfor %}</textarea></label><small>One study launch uses one project repository; conditions and seeds may span any scenarios within it.</small></div>
    </fieldset>
    <fieldset class="form-group"><legend>Replicates</legend>
      <label class="form-field"><span>First seed</span><input data-study-field="study.run_defaults.seed_start" type="number" value="{{ study.definition.study.run_defaults.seed_start or 1 }}"></label>
      <label class="form-field"><span>Seed repeats</span><input data-study-field="study.run_defaults.seed_repeats" type="number" min="1" value="{{ study.definition.study.run_defaults.seed_repeats or 1 }}"></label>
      <label class="form-field"><span>Shared override diff</span><textarea data-study-field="study.run_defaults.overrides" data-yaml="true" rows="5">{{ study.definition.study.run_defaults.overrides|tojson }}</textarea></label>
    </fieldset>
    <fieldset class="form-group"><legend>Evaluations</legend>
      <label class="form-field"><span>Preset</span><select id="evaluation-preset"><option value="">Choose a preset</option>{% for preset in evaluation_presets %}<option value="{{ preset }}">{{ preset }}</option>{% endfor %}</select></label>
      <button class="button" type="button" onclick="addEvaluation()">Add evaluator</button>
      <div class="choice-grid">{% for evaluation in study.definition.evaluations or [] %}<span class="badge neutral">{{ evaluation.preset or evaluation.id or 'custom' }}</span>{% else %}<small>No evaluators selected.</small>{% endfor %}</div>
    </fieldset>
    <div class="section-head"><div><p class="eyebrow">Claims</p><h2>Hypotheses</h2></div><button class="button" type="button" onclick="openStudyEntityDialog('Hypothesis')">Add hypothesis</button></div>
    {% for hypothesis_id, hypothesis in study.definition.hypotheses.items() %}
    <fieldset class="form-group hypothesis-editor"><legend>{{ hypothesis_id }}</legend>
      <label class="form-field"><span>Statement</span><textarea data-study-field="hypotheses.{{ hypothesis_id }}.statement" rows="3">{{ hypothesis.statement or '' }}</textarea></label>
      <label class="form-field"><span>Independent variable</span><input data-study-field="hypotheses.{{ hypothesis_id }}.independent_variable" value="{{ hypothesis.independent_variable or '' }}"></label>
      <label class="form-field"><span>Prediction</span><textarea data-study-field="hypotheses.{{ hypothesis_id }}.prediction" rows="3">{{ hypothesis.prediction or '' }}</textarea></label>
      <label class="form-field"><span>Follows from</span><input data-study-field="hypotheses.{{ hypothesis_id }}.follows_from" value="{{ hypothesis.follows_from or '' }}"></label>
      <div class="section-head"><h3>Condition override diffs</h3><button class="button" type="button" onclick='openStudyEntityDialog("Condition",{{ hypothesis_id|tojson }})'>Add condition</button></div>
      {% for condition_id, condition in hypothesis.conditions.items() %}
      <label class="form-field"><span>{{ condition_id }}</span><textarea data-study-field="hypotheses.{{ hypothesis_id }}.conditions.{{ condition_id }}.overrides" data-yaml="true" rows="5">{{ condition.overrides|default({})|tojson }}</textarea></label>
      <label class="form-field"><span>Execution</span><select data-study-field="hypotheses.{{ hypothesis_id }}.conditions.{{ condition_id }}.execution.mode"><option value="run" {{ 'selected' if condition.get('execution', {}).get('mode', 'run') == 'run' }}>Run</option><option value="reuse_existing" {{ 'selected' if condition.get('execution', {}).get('mode') == 'reuse_existing' }}>Reuse existing</option></select></label>
      <div class="reuse-picker"><select data-reuse-hypothesis="{{ hypothesis_id }}" data-reuse-condition="{{ condition_id }}"><option value="">Choose an existing run</option>{% for run in run_choices %}<option value="{{ loop.index0 }}">{{ run.scenario }} · seed {{ run.seed if run.seed is not none else '—' }} · {{ run.id }}</option>{% endfor %}</select><button class="button" type="button" onclick='addExistingRun({{ hypothesis_id|tojson }},{{ condition_id|tojson }})'>Add existing run</button></div>
      {% if condition.get('reuse', {}).get('runs') %}<small>{{ condition.reuse.runs|length }} existing run artifact(s) selected</small>{% endif %}
      {% endfor %}
    </fieldset>
    {% endfor %}
  </form>
  <section class="yaml-mirror"><label class="yaml-document"><span>study.yaml</span><textarea id="study-yaml" spellcheck="false">{{ study.yaml }}</textarea></label></section>
</div>
{% else %}
<div class="panel-grid {{ view.layout }}" data-study-id="{{ study.id }}">
{% for panel in view.panels %}<section class="panel wide" data-panel="{{ panel.name }}"><header><div><h3>{{ panel.title }}</h3></div><div class="panel-controls">{{ pc.render_controls(panel, none) }}</div></header><div class="panel-body">{{ out.render_output(panel.output, grid_class='hypothesis-grid') }}</div></section>{% endfor %}
</div>
{% endif %}
<dialog id="study-entity-dialog" class="command-palette compact-dialog"><form class="form-group" onsubmit="createStudyEntity(event)"><p class="eyebrow">Experiment structure</p><h2 id="study-entity-title">Add item</h2><label class="form-field"><span>Identifier</span><input id="study-entity-id" required pattern="[A-Za-z0-9_-]+"></label><div class="composer-actions"><button class="button quiet" type="button" onclick="document.getElementById('study-entity-dialog').close()">Cancel</button><button class="button primary" type="submit"><svg><use href="#icon-plus"/></svg>Add</button></div></form></dialog>
<script>
const studyId={{ study.id|tojson }};
const runChoices={{ run_choices|default([])|tojson }};
let studyDefinition={{ study.definition|tojson }};
let studyDirty=false;function markStudyDirty(){studyDirty=true;const state=document.getElementById('study-save-state');if(state){state.textContent='Unsaved changes';state.classList.add('dirty')}}function markStudySaved(){studyDirty=false;const state=document.getElementById('study-save-state');if(state){state.textContent='Saved';state.classList.remove('dirty')}}window.addEventListener('beforeunload',event=>{if(studyDirty){event.preventDefault();event.returnValue=''}});
const yamlEditor=document.getElementById('study-yaml');
function studyFieldValue(input){if(input.dataset.studyScenarios!==undefined){const detected=[...input.querySelectorAll('input:checked')].map(item=>item.value),custom=input.parentElement.querySelector('[data-study-custom-scenarios]').value.split('\n').map(value=>value.trim()).filter(Boolean);return [...new Set([...detected,...custom])]}if(input.dataset.list)return input.value.split('\n').map(value=>value.trim()).filter(Boolean);if(input.dataset.yaml){try{return JSON.parse(input.value||'{}')}catch{notify('Override diff must be valid JSON or edited in the YAML mirror.','danger');throw new Error('invalid value')}}if(input.type==='number')return Number(input.value);return input.value}
function studyValueAt(definition,path){return path.split('.').reduce((value,key)=>value&&typeof value==='object'?value[key]:undefined,definition)}
function displayStudyField(input,value){if(input.dataset.studyScenarios!==undefined){const selected=new Set(value||[]);input.querySelectorAll('input').forEach(item=>item.checked=selected.has(item.value));return}if(input.dataset.list){input.value=Array.isArray(value)?value.join('\n'):'';return}if(input.dataset.yaml){input.value=JSON.stringify(value??{},null,2);return}input.value=value??''}
function hydrateStudy(definition){studyDefinition=definition;document.querySelectorAll('[data-study-field]').forEach(input=>displayStudyField(input,studyValueAt(definition,input.dataset.studyField)))}
async function composeStudy(updates={}){const response=await fetch(`/api/studies/${studyId}/compose`,{method:'POST',headers:{'content-type':'application/json'},body:JSON.stringify({yaml:yamlEditor.value,updates})});if(!response.ok){notify(await response.text(),'danger');return false}const data=await response.json();yamlEditor.value=data.yaml;hydrateStudy(data.definition);markStudyDirty();return data}
document.getElementById('study-form')?.addEventListener('change',async event=>{const input=event.target.closest('[data-study-field]');if(!input)return;const updates={[input.dataset.studyField]:studyFieldValue(input)};if(input.dataset.studyScenarios!==undefined&&event.target.matches('input[type="checkbox"]')&&event.target.checked){input.querySelectorAll('input[type="checkbox"]').forEach(box=>{if(box!==event.target&&box.dataset.scenarioSource!==event.target.dataset.scenarioSource)box.checked=false});updates[input.dataset.studyField]=studyFieldValue(input);updates['study.run_defaults.config_path']=event.target.dataset.configPattern;updates['study.run_defaults.working_directory']=event.target.dataset.projectRoot}await composeStudy(updates)});
document.querySelector('[data-study-custom-scenarios]')?.addEventListener('change',async event=>{const input=event.target.closest('.form-field').querySelector('[data-study-scenarios]');await composeStudy({[input.dataset.studyField]:studyFieldValue(input)})});
yamlEditor?.addEventListener('change',()=>composeStudy({}));
let pendingStudyEntity={kind:'Hypothesis',hypothesis:null};function openStudyEntityDialog(kind,hypothesis=null){pendingStudyEntity={kind,hypothesis};document.getElementById('study-entity-title').textContent=`Add ${kind.toLowerCase()}`;const input=document.getElementById('study-entity-id');input.value='';document.getElementById('study-entity-dialog').showModal();input.focus()}
async function createStudyEntity(event){event.preventDefault();const id=document.getElementById('study-entity-id').value.trim();if(!/^[A-Za-z0-9_-]+$/.test(id))return;const updates=pendingStudyEntity.kind==='Hypothesis'?{[`hypotheses.${id}`]:{statement:'',independent_variable:'',prediction:'',status:'planning',conditions:{baseline:{overrides:{}}}}}:{[`hypotheses.${pendingStudyEntity.hypothesis}.conditions.${id}`]:{overrides:{}}};const data=await composeStudy(updates);if(data){document.getElementById('study-entity-dialog').close();await saveStudy();location.reload()}}
async function addEvaluation(){const preset=document.getElementById('evaluation-preset').value;if(!preset)return;const evaluations=Array.isArray(studyDefinition.evaluations)?[...studyDefinition.evaluations]:[];if(evaluations.some(item=>item?.preset===preset)){notify('That evaluator is already selected.','danger');return}evaluations.push({id:preset.split('.').pop(),preset});if(await composeStudy({evaluations})){await saveStudy();location.reload()}}
async function addExistingRun(hypothesis,condition){const picker=[...document.querySelectorAll('[data-reuse-hypothesis]')].find(el=>el.dataset.reuseHypothesis===hypothesis&&el.dataset.reuseCondition===condition),run=runChoices[Number(picker?.value)];if(!run)return;const path=`hypotheses.${hypothesis}.conditions.${condition}`,existing=studyValueAt(studyDefinition,`${path}.reuse.runs`),runs=Array.isArray(existing)?[...existing]:[];if(!runs.some(item=>item.source===run.path))runs.push({scenario:run.scenario,seed:run.seed,source:run.path});const data=await composeStudy({[`${path}.execution.mode`]:'reuse_existing',[`${path}.reuse.runs`]:runs});if(data){await saveStudy();location.reload()}}
async function launchStudy(){if(yamlEditor&&!await saveStudy())return;const response=await fetch(`/api/studies/${studyId}/launch`,{method:'POST',headers:{'content-type':'application/json'},body:'{}'});if(response.ok){const job=await response.json();location.href='/live?job='+job.id}else notify(await response.text(),'danger')}
async function saveStudy(){if(!yamlEditor)return true;const response=await fetch(`/api/studies/${studyId}`,{method:'POST',headers:{'content-type':'application/json'},body:JSON.stringify({yaml:yamlEditor.value})});if(response.ok)markStudySaved();notify(response.ok?'Saved':await response.text(),response.ok?'success':'danger');return response.ok}
registerPaletteCommand({label:'Launch study',keywords:'queue compare run',action:launchStudy});registerPaletteCommand({label:'Save study',keywords:'yaml definition',action:saveStudy});registerPaletteCommand({label:'Study: Board',href:'?tab=board',keywords:'progress watch'});registerPaletteCommand({label:'Study: Compare',href:'?tab=compare',keywords:'results confidence interval'});registerPaletteCommand({label:'Study: Hypotheses',href:'?tab=hypotheses',keywords:'claims findings'});registerPaletteCommand({label:'Study: Definition',href:'?tab=definition',keywords:'yaml composer'});
{% if tab == 'board' and job and job.status in ('queued','running') %}
// Every board panel refreshes through the shared refreshPanel (base.html),
// which resolves the generic study-panel endpoint from data-study-id — no
// panel name, column list, or bespoke fetch path is wired here.
async function refreshStudyBoard(){for(const section of document.querySelectorAll('.panel-grid [data-panel]'))await refreshPanel(section)}
const studyEvents=new EventSource('/api/jobs/{{ job.id }}/stream');studyEvents.addEventListener('artifact_grown',refreshStudyBoard);studyEvents.addEventListener('status_changed',refreshStudyBoard);studyEvents.addEventListener('done',()=>{refreshStudyBoard();studyEvents.close()});
{% endif %}
</script>
{% endblock %}