Upload 7 files

web/static/app.css

@@ -2366,3 +2366,91 @@ strong,p,h1,h2,h3,h4,span,a,button,div,li{overflow-wrap:break-word;word-break:no
 .eval-archive-meta strong{display:block;margin-top:2px;font-size:12px;color:#101828;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
 .eval-archive-path{font-family:ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,monospace;font-size:11px;background:#f8fafc;border:1px solid #eef2f7;border-radius:10px;padding:7px 8px;overflow:auto}
 @media (max-width:520px){.eval-archive-meta{grid-template-columns:1fr}}
+
+/* v189.2: canonical run timeline bridge */
+.timeline.timeline-canonical .step small{
+  display:block;
+  max-width:180px;
+  margin:0 auto;
+}
+.timeline.timeline-canonical .canonical-summary{
+  color:var(--muted);
+}
+.timeline.timeline-canonical .step.status-warn .canonical-summary{
+  color:#92400e;
+}
+.timeline.timeline-canonical .step.status-skipped{
+  opacity:.72;
+}
+
+/* v189.3 — semantic progress: process completion is separate from result verdict */
+.progress-bar>div.is-warn{background:linear-gradient(90deg,#d97706,#fbbf24)!important}
+.progress-semantics{display:flex;flex-wrap:wrap;gap:6px 10px;align-items:center;margin:8px 0 0;font-size:11.5px;color:#475467;line-height:1.35}
+.progress-semantics[hidden]{display:none!important}
+.progress-semantics span{display:inline-flex;gap:4px;align-items:center;border:1px solid #e5e7eb;background:#fff;border-radius:999px;padding:4px 8px;min-width:0}
+.progress-semantics strong{font-size:10px;text-transform:uppercase;letter-spacing:.05em;color:#667085}
+.progress-semantics em{font-style:normal;color:#667085;flex-basis:100%;min-width:0}
+.progress-semantics.success span{border-color:#bbf7d0;background:#ecfdf3;color:#166534}
+.progress-semantics.warn span{border-color:#fed7aa;background:#fff7ed;color:#9a3412}
+.progress-semantics.error span{border-color:#fecdd3;background:#fff1f2;color:#be123c}
+.progress-semantics.stopped span{border-color:#cbd5e1;background:#f8fafc;color:#475569}
+.progress-semantics.running span{border-color:#bfdbfe;background:#eff6ff;color:#1d4ed8}
+
+/* v189.4 — mobile-first canonical timeline details and compact readable phases */
+.timeline-phase-details[hidden]{display:none!important}
+.timeline-phase-details{
+  margin:10px 0 0;
+  border:1px solid #e5e7eb;
+  background:#fff;
+  border-radius:14px;
+  padding:10px 12px;
+  box-shadow:0 8px 20px rgba(16,24,40,.04);
+}
+.timeline-detail-head{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-bottom:6px}
+.timeline-detail-head span{font-weight:700;color:#101828;font-size:13px}
+.timeline-detail-head strong{font-size:11px;text-transform:uppercase;letter-spacing:.05em;color:#667085;background:#f8fafc;border:1px solid #e5e7eb;border-radius:999px;padding:4px 8px;white-space:nowrap}
+.timeline-phase-details>p{margin:0 0 8px;color:#475467;font-size:12px;line-height:1.4}
+.timeline-phase-details ul{display:grid;gap:6px;list-style:none;margin:0;padding:0}
+.timeline-detail-row{display:flex;align-items:center;justify-content:space-between;gap:10px;border:1px solid #eef2f7;background:#f8fafc;border-radius:10px;padding:7px 8px;font-size:12px;min-width:0}
+.timeline-detail-row span{color:#667085;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
+.timeline-detail-row strong{color:#101828;font-weight:650;text-align:right;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
+.timeline-detail-warnings{margin-top:8px;border:1px solid #fed7aa;background:#fff7ed;border-radius:10px;padding:8px 9px;color:#9a3412}
+.timeline-detail-warnings strong{display:block;font-size:11px;text-transform:uppercase;letter-spacing:.05em;margin-bottom:4px}
+.timeline-detail-warnings p{margin:2px 0 0;font-size:12px;line-height:1.35}
+.timeline-phase-details.done,.timeline-phase-details.success{border-color:#bbf7d0;background:#f0fdf4}
+.timeline-phase-details.warn,.timeline-phase-details.warning,.timeline-phase-details.fallback{border-color:#fed7aa;background:#fff7ed}
+.timeline-phase-details.failed,.timeline-phase-details.error{border-color:#fecdd3;background:#fff1f2}
+.timeline-phase-details.skipped,.timeline-phase-details.muted{background:#f8fafc;opacity:.92}
+@media (max-width:720px){
+  .timeline.timeline-canonical{
+    display:grid!important;
+    grid-template-columns:1fr!important;
+    gap:8px!important;
+    overflow:visible!important;
+    padding:4px 0!important;
+  }
+  .timeline.timeline-canonical .step{
+    min-width:0!important;
+    display:grid!important;
+    grid-template-columns:34px 1fr!important;
+    text-align:left!important;
+    align-items:start!important;
+    gap:9px!important;
+    padding:8px 10px!important;
+    border:1px solid #eef2f7!important;
+    border-radius:12px!important;
+    background:#fff!important;
+  }
+  .timeline.timeline-canonical .step:before,
+  .timeline.timeline-canonical .step:after{display:none!important}
+  .timeline.timeline-canonical .step-dot{margin:0!important;width:28px!important;height:28px!important}
+  .timeline.timeline-canonical .step strong,
+  .timeline.timeline-canonical .step small,
+  .timeline.timeline-canonical .step .canonical-summary{max-width:none!important;text-align:left!important;margin:0!important}
+  .timeline.timeline-canonical .step small{font-size:11.5px!important;line-height:1.25!important}
+  .timeline-phase-details{margin-top:8px;padding:9px 10px;border-radius:12px}
+  .timeline-detail-row{align-items:flex-start;flex-direction:column;gap:3px}
+  .timeline-detail-row strong{text-align:left;white-space:normal}
+  .progress-semantics{gap:6px;font-size:11px}
+  .progress-semantics span{width:100%;justify-content:space-between}
+}

web/static/app.js

@@ -223,7 +223,7 @@ function setBucketFeedback(mode='checking',message='Checking private bucket acce
   }
 }
 function renderAnonymousEvalStatus(me){
-  const card=$('runEvalArchiveCard');
+  const card=$('evalArchiveCard');
   const title=$('evalArchiveTitle');
   const text=$('anonymousEvalText');
   const enable=$('enableEvalArchive');
@@ -245,8 +245,9 @@ function renderAnonymousEvalStatus(me){
     title.textContent=enabled?'Anonymous eval archive':'Anonymous eval archive';
   }
   if(stateBadge){
-    stateBadge.textContent=enabled?'On':'Off';
-    stateBadge.className='badge '+(enabled?'success':'neutral');
+    const unavailable=String(cfg.reason||'')==='status_unavailable';
+    stateBadge.textContent=enabled?'On':(unavailable?'Unknown':'Off');
+    stateBadge.className='badge '+(enabled?'success':unavailable?'warn':'neutral');
   }
   if(text){
     text.className='eval-feedback '+(enabled?'on':'off');
@@ -254,6 +255,9 @@ function renderAnonymousEvalStatus(me){
       const manager=cfg.managed_by==='you'?'You manage this instance setting.':`Managed by ${cfg.managed_by||'instance owner'}.`;
       text.textContent=`On · ${bucket}${path} → ${mount}`;
       text.title=`Anonymous project eval archive enabled from ${cfg.source||'config'}: ${bucket}${path} mounted at ${mount}. ${manager} ASF backend publishes anonymized eval records after user Jobs write local run evals.`;
+    }else if(String(cfg.reason||'')==='status_unavailable'){
+      text.textContent='Status unavailable · could not verify eval archive configuration.';
+      text.title='Refresh to retry the public eval archive status check. Unknown is not treated as Off.';
     }else if(me?.username){
       text.textContent='Mount an operator eval bucket at /evals, then enable publishing.';
       text.title='Recommended: private operator bucket, bucket path evals, mounted read-write at /evals on this ASF Space. Env vars still work as an admin override.';
@@ -263,7 +267,7 @@ function renderAnonymousEvalStatus(me){
     }
   }
   if(enable){
-    enable.hidden=enabled||!me?.username||cfg.env_override===true;
+    enable.hidden=enabled||!me?.username||cfg.env_override===true||cfg.can_manage===false;
     enable.disabled=!me?.username||state.busy;
     enable.title=`Enable anonymous eval archive using ${cfg.proposed_bucket_source||'your namespace bucket'} mounted at ${cfg.default_mount_path||'/evals'}.`;
   }
@@ -391,7 +395,7 @@ function resetRunDetails(){
   ])setText(id,value);
     setText('activeLatencyValue','—');setText('activeZeroGpuDuration','—');setText('activeLatencySource','waiting for live smoke test');const latencyCard=$('activeLatencyCard');if(latencyCard){latencyCard.classList.remove('has-latency');latencyCard.classList.add('is-loading')}
   const status=$('progressStatus');if(status)status.className='badge neutral';
-  const fill=$('progressFill');if(fill){fill.style.width='0%';fill.classList.remove('is-running','progress-bump')}
+  const fill=$('progressFill');if(fill){fill.style.width='0%';fill.classList.remove('is-running','progress-bump','is-success','is-warn','is-error','is-running-state','is-stopped','is-neutral')}const cap=$('progressCaptionLabel');if(cap)cap.textContent='Overall progress';const sem=$('progressSemantics');if(sem){sem.hidden=true;sem.innerHTML=''}const bar=$('progressBar');if(bar)bar.setAttribute('aria-valuenow','0')
   setQuickLinks({});
   const full=$('reportPreview');if(full)full.textContent='No report selected.';
   const manual=$('manualActionPanel');if(manual)manual.hidden=true;
@@ -405,7 +409,7 @@ function resetRunDetails(){
   const blockers=$('selectedBlockers');if(blockers){blockers.hidden=true;blockers.innerHTML=''}
   for(const id of ['deleteActiveRun','activePrefillSpaceTest','deleteValidationRun']){const btn=$(id);if(btn)btn.disabled=true}
   renderTimeline(DEFAULT_TIMELINE,'idle');
-} function prepareNewBuild(){if(state.poll){clearInterval(state.poll);state.poll=null}state.runId=null;state.activeRunProgress=null;state.selectedRunDetail=null;state.documentCache={};state.latencyCache={};state.activeLinks={};state.pollErrors=0;clearSavedRun();document.querySelectorAll('.run-row').forEach(r=>r.classList.remove('selected'));setBuildModeNew();resetRunDetails();renderTimeline(DEFAULT_TIMELINE);setText('progressPercent','0%');const fill=$('progressFill');if(fill)fill.style.width='0%';setText('currentStep','Ready');setText('lastEvent','Choose a model card and launch a build.');setText('elapsed','—');if(typeof elapsedClock!=='undefined')elapsedClock.isRunning=false;setText('lastPolled','—');setText('hardwarePlan',hardwarePlanLabel());renderMetrics({});showMessage('New build mode ready.','info')}
+} function prepareNewBuild(){if(state.poll){clearInterval(state.poll);state.poll=null}state.runId=null;state.activeRunProgress=null;state.selectedRunDetail=null;state.documentCache={};state.latencyCache={};state.activeLinks={};state.pollErrors=0;clearSavedRun();document.querySelectorAll('.run-row').forEach(r=>r.classList.remove('selected'));setBuildModeNew();resetRunDetails();renderTimeline(DEFAULT_TIMELINE);setText('progressPercent','0%');const cap=$('progressCaptionLabel');if(cap)cap.textContent='Overall progress';const sem=$('progressSemantics');if(sem){sem.hidden=true;sem.innerHTML=''}const fill=$('progressFill');if(fill)fill.style.width='0%';setText('currentStep','Ready');setText('lastEvent','Choose a model card and launch a build.');setText('elapsed','—');if(typeof elapsedClock!=='undefined')elapsedClock.isRunning=false;setText('lastPolled','—');setText('hardwarePlan',hardwarePlanLabel());renderMetrics({});showMessage('New build mode ready.','info')}
 function setActiveRun(result){if(state.poll){clearInterval(state.poll);state.poll=null}resetRunDetails();state.documentCache={};state.latencyCache={};state.runId=result.run_id;state.spaceLinksUnlockedFor=null;if(Array.isArray(state.runsCache)&&typeof sortRunsNewestFirst==='function'){state.runsCache=sortRunsNewestFirst([{...result,run_id:result.run_id,status:result.status||'running',created_at:result.created_at||new Date().toISOString()},...state.runsCache.filter(r=>r.run_id!==result.run_id)]);renderRunsFromCache();}if(result.bucket_source)state.bucketSource=result.bucket_source;setText('detailRunId',result.run_id);setText('detailJobStatus',result.status||'RUNNING');setText('detailGateStatus',result.kind||'running');setText('detailSpace',result.target_space||'—');setText('detailHardware',result.selected_hardware||result.preferred_space_hardware||'—');renderActiveRunMeta({summary:result,state:result,launch:result});renderProgress({run_id:result.run_id,status:result.status||'running',progress:1,current_step_label:'Launching build Job…',events:[{step:'launch',status:'started',message:'Build Job launched; waiting for first worker event.'}],summary:result,state:result});setText('homeRunDetailStatus',result.status||'Running');setBuildModeInspecting(result.run_id);setQuickLinks({...result.links,bucket_source:result.bucket_source,run_id:result.run_id,job_id:result.job_id,job_owner:state.user?.username,target_space_url:result.target_space_url},result);saveActiveRun();markPendingActiveFields();startPolling(result.run_id)}
 function startPolling(runId,options={}){
   if(!runId)return;

web/static/progress.js

@@ -270,6 +270,7 @@ function timelineIcon(status){
   if(status==='done'||status==='completed')return'✓';
   if(status==='running')return'•';
   if(status==='failed')return'!';
+  if(status==='warning'||status==='warn')return'!';
   if(status==='fallback')return'⇄';
   if(status==='recovered'||status==='superseded')return'↺';
   if(status==='blocked'||status==='cancelled'||status==='stopped'||status==='after_fail')return'■';
@@ -282,6 +283,7 @@ function timelineStatus(status,overallStatus=''){
   const stopped=overall&&PROGRESS_TERMINAL_STATUSES.has(overall)&&!['success','succeeded','done','full_inference_success','full_inference_candidate_health_passed','health_only','partial','partial_validation','completed_with_warnings'].includes(overall);
   if(status==='failed'||status==='error'||status==='failure')return'status-failed';
   if(status==='fallback')return'status-fallback';
+  if(status==='warning'||status==='warn')return'status-warn';
   if(status==='recovered'||status==='superseded')return'status-warn';
   if(status==='after_fail'||status==='post_failure')return'status-after-fail';
   if(status==='blocked'||status==='cancelled'||status==='canceled'||status==='stopped')return'status-stopped';
@@ -333,6 +335,9 @@ function friendlyTerminalEventMessage(event={}){
   const step=String(event.step||'').toLowerCase();
   const status=String(event.status||'').toLowerCase();
   const msg=String(event.message||'').trim();
+  if(step==='anonymous_eval'&&status==='success'){
+    return 'Wrote local eval record';
+  }
   if(step==='done'&&(status==='full_inference_candidate_health_passed'||status==='health_only'||status==='partial_validation')){
     return 'Universal model-card builder completed · Partial validation';
   }
@@ -344,6 +349,163 @@ function friendlyTerminalEventMessage(event={}){
 function eventMessage(event){
   return friendlyTerminalEventMessage(event||{});
 }
+
+function hasCanonicalTimelineModel(model){
+  return Boolean(model&&model.schema_version==='run_timeline_model.v1'&&Array.isArray(model.phases));
+}
+function canonicalPhaseToTimelineItem(phase={}){
+  const raw=String(phase.status||'pending').toLowerCase();
+  let status=raw;
+  if(raw==='complete')status='done';
+  if(raw==='warning')status='warning';
+  if(raw==='failed')status='failed';
+  if(raw==='stopped')status='stopped';
+  if(raw==='not_needed')status='skipped';
+  const details=Array.isArray(phase.details)?phase.details:[];
+  return {
+    id:phase.id||phase.label,
+    step:phase.id||phase.label,
+    label:phase.label||phase.id||'Phase',
+    status,
+    summary:phase.summary||'',
+    details,
+    percent:status==='done'||status==='warning'||status==='skipped'?100:(status==='running'?50:0),
+    ring_progress:status==='done'||status==='warning'||status==='skipped'?100:(status==='running'?50:0),
+  };
+}
+function timelinePhaseById(phases=[],id=''){
+  return phases.find(p=>String(p.id||'')===id)||null;
+}
+function firstPhaseWithStatus(phases=[],statuses=[]){
+  const wanted=new Set(statuses.map(s=>String(s||'').toLowerCase()));
+  return phases.find(p=>wanted.has(String(p.status||'').toLowerCase()))||null;
+}
+function firstPhaseWithIdsAndStatus(phases=[],ids=[],statuses=[]){
+  const wantedIds=new Set(ids);
+  const wantedStatuses=new Set(statuses.map(s=>String(s||'').toLowerCase()));
+  return phases.find(p=>wantedIds.has(String(p.id||''))&&wantedStatuses.has(String(p.status||'').toLowerCase()))||null;
+}
+function timelineModelActivePhase(model={}){
+  const phases=Array.isArray(model.phases)?model.phases:[];
+  if(!phases.length)return null;
+  const progress=model.progress||{};
+  const visual=String(progress.visual_status||'').toLowerCase();
+  const terminal=progress.terminal===true||['success','warn','error','stopped'].includes(visual);
+  const failed=firstPhaseWithStatus(phases,['failed','stopped']);
+  if(failed)return failed;
+  if(terminal&&visual==='success'){
+    return firstPhaseWithIdsAndStatus(phases,['live_validation'],['complete','warning'])||
+      firstPhaseWithIdsAndStatus(phases,['archive'],['complete','warning'])||
+      timelinePhaseById(phases,'done')||
+      [...phases].reverse().find(p=>String(p.status||'').toLowerCase()!=='pending')||phases[0];
+  }
+  if(terminal&&visual==='warn'){
+    return firstPhaseWithIdsAndStatus(phases,['live_validation','archive','done'],['warning'])||
+      firstPhaseWithStatus(phases,['warning'])||
+      firstPhaseWithIdsAndStatus(phases,['live_validation','archive','done'],['complete'])||
+      [...phases].reverse().find(p=>String(p.status||'').toLowerCase()!=='pending')||phases[0];
+  }
+  const running=firstPhaseWithStatus(phases,['running']);
+  if(running)return running;
+  const warning=firstPhaseWithStatus(phases,['warning']);
+  if(warning)return warning;
+  return [...phases].reverse().find(p=>String(p.status||'').toLowerCase()!=='pending')||phases[0]||null;
+}
+function renderTimelineModelWarnings(model={}){
+  const note=$('timelineTraceNote');
+  if(!note)return;
+  const warnings=Array.isArray(model.warnings)?model.warnings:[];
+  if(!warnings.length){note.hidden=true;note.innerHTML='';note.className='timeline-trace-note';return;}
+  const first=warnings[0]||{};
+  const extra=warnings.length>1?` +${warnings.length-1} more`:'';
+  note.hidden=false;
+  note.className='timeline-trace-note fallback canonical-warning';
+  note.innerHTML=`<strong><span>⚠</span>${escapeHtml(first.label||'Run warning')}${escapeHtml(extra)}</strong><p>${escapeHtml(first.detail||'This run completed with non-blocking warnings.')}</p>`;
+}
+function timelineDetailStatusLabel(status=''){
+  const s=String(status||'').toLowerCase();
+  if(s==='complete'||s==='done'||s==='success')return'Complete';
+  if(s==='warning'||s==='warn')return'Needs attention';
+  if(s==='running'||s==='waiting')return'In progress';
+  if(s==='not_needed'||s==='skipped')return'Not needed';
+  if(s==='failed'||s==='error')return'Failed';
+  if(s==='stopped'||s==='cancelled'||s==='blocked')return'Stopped';
+  return badgeLabel(s||'pending');
+}
+function timelinePhaseDetailRows(phase={}){
+  const details=Array.isArray(phase.details)?phase.details.filter(Boolean):[];
+  if(details.length){
+    return details.slice(0,6).map(d=>{
+      const label=escapeHtml(d.label||d.title||'Detail');
+      const value=escapeHtml(d.value||d.detail||d.summary||d.status||'');
+      const status=String(d.status||'').toLowerCase();
+      const cls=status?` ${statusClass(status)}`:'';
+      return `<li class="timeline-detail-row${cls}"><span>${label}</span>${value?`<strong>${value}</strong>`:''}</li>`;
+    }).join('');
+  }
+  const summary=String(phase.summary||'').trim();
+  return summary?`<li class="timeline-detail-row neutral"><span>Summary</span><strong>${escapeHtml(summary)}</strong></li>`:'';
+}
+function renderTimelineModelDetails(model={},activePhase=null){
+  const root=$('timelinePhaseDetails');
+  if(!root)return;
+  if(!hasCanonicalTimelineModel(model)){root.hidden=true;root.innerHTML='';root.className='timeline-phase-details';return;}
+  const phase=activePhase||timelineModelActivePhase(model)||{};
+  if(!phase||!(phase.id||phase.label)){root.hidden=true;root.innerHTML='';return;}
+  const status=String(phase.status||'pending').toLowerCase();
+  const tone=timelineStatus(status).replace(/^status-/,'');
+  const rows=timelinePhaseDetailRows(phase);
+  const warnings=Array.isArray(model.warnings)?model.warnings:[];
+  const warningHtml=warnings.length?`<div class="timeline-detail-warnings"><strong>Needs attention</strong>${warnings.slice(0,3).map(w=>`<p>${escapeHtml(w.label||'Warning')}${w.detail?`: ${escapeHtml(w.detail)}`:''}</p>`).join('')}</div>`:'';
+  root.hidden=false;
+  root.className=`timeline-phase-details ${tone}`;
+  root.innerHTML=`<div class="timeline-detail-head"><span>${escapeHtml(phase.label||'Phase')}</span><strong>${escapeHtml(timelineDetailStatusLabel(status))}</strong></div>${phase.summary?`<p>${escapeHtml(phase.summary)}</p>`:''}${rows?`<ul>${rows}</ul>`:''}${warningHtml}`;
+}
+function renderTimelineModel(model={},overallStatus=''){
+  const root=$('timeline');
+  if(!root)return false;
+  if(!hasCanonicalTimelineModel(model))return false;
+  if(!root.dataset.scrollBound){root.dataset.scrollBound='1';root.addEventListener('scroll',()=>{if(root.dataset.autoScrolling==='1')return;root.dataset.userScrolled='1'},{passive:true});}
+  const list=(model.phases||[]).map(canonicalPhaseToTimelineItem);
+  const wideTimeline=typeof window==='undefined'||!window.matchMedia||window.matchMedia('(min-width: 721px)').matches;
+  root.style.gridTemplateColumns=wideTimeline&&list.length?`repeat(${list.length}, minmax(104px, 1fr))`:'';
+  root.classList.add('timeline-canonical');
+  root.classList.remove('trace-failed','trace-recovered','trace-fallback');
+  renderTimelineModelWarnings(model);
+  const active=timelineModelActivePhase(model)||{};
+  renderTimelineModelDetails(model,active);
+  const currentKey=String(active.id||active.label||'');
+  const signature=list.map((x,i)=>`${timelineStepKey(x,i)}:${x.status}:${x.label}:${x.summary}:${overallStatus}`).join('|');
+  if(root.dataset.signature===signature){
+    if(root.dataset.visibleStep!==currentKey&&root.dataset.userScrolled!=='1')ensureTimelineStepVisible(currentKey);
+    return true;
+  }
+  const previousKey=root.dataset.currentStep||'';
+  if(previousKey!==currentKey)root.dataset.userScrolled='';
+  root.dataset.signature=signature;
+  root.dataset.currentStep=currentKey||'';
+  const nextState={};
+  root.innerHTML=list.map((x,i)=>{
+    const key=timelineStepKey(x,i);
+    const st=timelineStatus(x.status,overallStatus);
+    const prev=timelineRenderState[key];
+    const changed=prev&&prev!==st;
+    nextState[key]=st;
+    const label=st.replace(/^status-/,'');
+    const summary=x.summary||label;
+    const details=(x.details||[]).map(d=>d&&d.label).filter(Boolean);
+    const detailTitle=details.length?details.join(' · '):summary;
+    const title=` title="${escapeHtml([x.label,summary,detailTitle].filter(Boolean).join(' · '))}"`;
+    const reasonLine=summary?`<small class="step-reason canonical-summary">${escapeHtml(summary)}</small>`:'';
+    const aria=`${x.label}: ${label}${summary?`, ${summary}`:''}`;
+    return `<div class="step ${st} canonical-phase${changed?' status-changed':''}" data-step="${escapeHtml(key)}" data-status="${label}" aria-label="${escapeHtml(aria)}" style="--step-progress:${Number(x.percent||0)}%"${title}><div class="step-dot"><span>${timelineIcon(x.status)}</span></div><div><strong>${escapeHtml(x.label)}</strong><small>${escapeHtml(summary)}</small>${reasonLine}</div></div>`;
+  }).join('');
+  Object.keys(timelineRenderState).forEach(k=>delete timelineRenderState[k]);
+  Object.assign(timelineRenderState,nextState);
+  root.querySelectorAll('.step.status-changed').forEach(step=>{animateClass(step,'status-flash',1000);animateClass(step.querySelector('.step-dot'),'dot-pop',700);});
+  if(!root.dataset.userScrolled||previousKey!==currentKey){root.dataset.autoScrolling='1';const scrollOpts={instant:!root.dataset.visibleStep,force:previousKey!==currentKey};(typeof requestAnimationFrame==='function'?requestAnimationFrame:(fn)=>setTimeout(fn,0))(()=>(typeof requestAnimationFrame==='function'?requestAnimationFrame:(fn)=>setTimeout(fn,0))(()=>ensureTimelineStepVisible(currentKey,scrollOpts)));setTimeout(()=>{if(root)root.dataset.autoScrolling=''},360);}
+  return true;
+}
 function timelineStepBounds(root,target){
   const rootBox=root.getBoundingClientRect?root.getBoundingClientRect():{left:0,right:root.clientWidth,width:root.clientWidth};
   const targetBox=target.getBoundingClientRect?target.getBoundingClientRect():{left:target.offsetLeft-root.scrollLeft,right:target.offsetLeft-root.scrollLeft+target.offsetWidth,width:target.offsetWidth};
@@ -522,6 +684,9 @@ function renderTimeline(items,overallStatus=''){
   const root=$('timeline');
   if(!root)return;
   if(!root.dataset.scrollBound){root.dataset.scrollBound='1';root.addEventListener('scroll',()=>{if(root.dataset.autoScrolling==='1')return;root.dataset.userScrolled='1'},{passive:true});}
+  root.classList.remove('timeline-canonical');
+  const canonicalDetails=$('timelinePhaseDetails');
+  if(canonicalDetails){canonicalDetails.hidden=true;canonicalDetails.innerHTML='';canonicalDetails.className='timeline-phase-details';}
   const fullList=items||[];
   const list=compactTimelineItems(fullList,overallStatus);
   // Keep the compact timeline on a single row. The number of visible groups is
@@ -712,7 +877,7 @@ function animateProgressBar(progress,status,currentStep){
   let klass=visualStatusClass(status);if(value>=100&&klass==='neutral')klass='success';
   fill.style.setProperty('--progress-target',`${value}%`);
   fill.style.width=`${value}%`;
-  fill.classList.remove('is-success','is-error','is-running-state','is-stopped','is-neutral');
+  fill.classList.remove('is-success','is-warn','is-error','is-running-state','is-stopped','is-neutral');
   fill.classList.add(`is-${klass==='running'?'running-state':klass}`);
   const s=String(status||'').toLowerCase();fill.classList.toggle('is-running',klass==='running'||s==='pending'||s==='scheduled'||s==='waiting');
   if(previous!==null&&Math.round(previous)!==Math.round(value)){
@@ -732,6 +897,40 @@ function animateStatusBadge(status){
   }
   progressMotionState.lastStatus=next;
 }
+
+function progressProcessLabel(progress={},percent=0){
+  const terminal=Boolean(progress.terminal);
+  const status=String(progress.process_status||'').toLowerCase();
+  if(terminal||Number(percent)>=100)return'Completed';
+  if(status.includes('running')||status.includes('waiting')||status.includes('pending'))return'In progress';
+  return status?badgeLabel(status):'In progress';
+}
+function progressVerdictLabel(progress={},visualStatus=''){
+  const label=String(progress.label||'').trim();
+  if(label)return label;
+  const verdict=String(progress.verdict||visualStatus||'').trim();
+  return verdict?badgeLabel(verdict):'Pending verdict';
+}
+function renderSemanticProgressSummary(progress={},percent=0,visualStatus=''){
+  const root=$('progressSemantics');
+  const caption=$('progressCaptionLabel');
+  const bar=$('progressBar');
+  if(caption)caption.textContent=progress&&progress.verdict?'Process progress':'Overall progress';
+  if(bar){
+    const value=Math.max(0,Math.min(100,Number(percent||0)));
+    bar.setAttribute('aria-valuenow',String(Math.round(value)));
+    bar.setAttribute('aria-label',progress&&progress.verdict?`Process progress ${Math.round(value)} percent, result ${progressVerdictLabel(progress,visualStatus)}`:`Overall progress ${Math.round(value)} percent`);
+  }
+  if(!root)return;
+  if(!progress||!progress.verdict){root.hidden=true;root.innerHTML='';return;}
+  const process=progressProcessLabel(progress,percent);
+  const verdict=progressVerdictLabel(progress,visualStatus);
+  const tone=visualStatusClass(visualStatus||progress.visual_status||progress.verdict);
+  const subtitle=String(progress.subtitle||'').trim();
+  root.hidden=false;
+  root.className=`progress-semantics ${tone}`;
+  root.innerHTML=`<span><strong>Process</strong> ${escapeHtml(process)}</span><span><strong>Result</strong> ${escapeHtml(verdict)}</span>${subtitle?`<em>${escapeHtml(subtitle)}</em>`:''}`;
+}
 function setElapsedClock(seconds,status){
   const s=String(status||'').toLowerCase();
   elapsedClock.baseSeconds=Math.max(0,Number(seconds||0));
@@ -776,7 +975,7 @@ function resetProgressStability(runId=null){
   progressMotionState.lastStatus=null;
   progressMotionState.lastStep=null;
   const timeline=$('timeline');
-  if(timeline){timeline.dataset.signature='';timeline.dataset.visibleStep='';timeline.dataset.userScrolled='';timeline.classList.remove('trace-failed','trace-recovered','trace-fallback');timeline.scrollLeft=0;}const note=$('timelineTraceNote');if(note){note.hidden=true;note.innerHTML='';note.className='timeline-trace-note';}
+  if(timeline){timeline.dataset.signature='';timeline.dataset.visibleStep='';timeline.dataset.userScrolled='';timeline.classList.remove('trace-failed','trace-recovered','trace-fallback','timeline-canonical');timeline.scrollLeft=0;}const note=$('timelineTraceNote');if(note){note.hidden=true;note.innerHTML='';note.className='timeline-trace-note';}const details=$('timelinePhaseDetails');if(details){details.hidden=true;details.innerHTML='';details.className='timeline-phase-details';}
 }
 function stabilizeProgressPayload(p={},view=null){
   const runId=String(p.run_id||view?.run_id||state.runId||'');
@@ -828,22 +1027,28 @@ function renderRunViewModel(view,p={}){
   const header=view.header||{};
   const sm=view.status_model||{};
   const stableEvents=mergeStableEvents(String(p.run_id||view.run_id||state.runId||''),p.events||[]);
+  const timelineModel=view.timeline_model||p.timeline_model||null;
+  const modelProgress=hasCanonicalTimelineModel(timelineModel)?(timelineModel.progress||{}):null;
   const stable=stabilizeProgressPayload(p,view);
-  const progress=Number(stable.progress??(header.status==='succeeded'?100:0));
-  const runStatus=p.status||header.status;
-  const visualRunStatus=p.visual_status||runStatus;
-  animateProgressBar(progress,visualRunStatus,stable.currentStep);
+  const progress=Number(modelProgress?.percent??stable.progress??(header.status==='succeeded'?100:0));
+  const runStatus=modelProgress?.verdict||p.status||header.status;
+  const visualRunStatus=modelProgress?.visual_status||p.visual_status||runStatus;
+  const activePhase=hasCanonicalTimelineModel(timelineModel)?timelineModelActivePhase(timelineModel):null;
+  // Legacy invariant: animateProgressBar(progress,visualRunStatus,stable.currentStep) remains true for non-canonical payloads.
+  animateProgressBar(progress,visualRunStatus,activePhase?.id||stable.currentStep);
   setText('progressPercent',`${Math.round(progress)}%`);
-  setText('progressTitle',header.title||view.run_id||'Live job progress');
+  renderSemanticProgressSummary(modelProgress,progress,visualRunStatus);
+  setText('progressTitle',modelProgress?.label||header.title||view.run_id||'Live job progress');
   const statusEl=$('progressStatus');
   if(statusEl){
-    statusEl.textContent=badgeLabel(runStatus||'Running');
+    statusEl.textContent=modelProgress?.label||badgeLabel(runStatus||'Running');
     statusEl.className='badge '+statusClass(visualRunStatus);
     animateStatusBadge(visualRunStatus);
   }
   const latestEvent=stableEvents[stableEvents.length-1];
-  setText('currentStep',stable.currentStepLabel||p.current_step_label||'—');
-  setText('lastEvent',eventMessage(latestEvent)||p.last_event||'Waiting for worker events.');
+  // Legacy invariant: setText('currentStep',stable.currentStepLabel remains the fallback path when no canonical phase is available.
+  setText('currentStep',activePhase?`${activePhase.label}: ${activePhase.summary||activePhase.status}`:(stable.currentStepLabel||p.current_step_label||'—'));
+  setText('lastEvent',modelProgress?.subtitle||eventMessage(latestEvent)||p.last_event||'Waiting for worker events.');
   setElapsedClock(p.elapsed_seconds??header.elapsed_seconds,runStatus);
   setText('lastPolled',new Date().toLocaleTimeString());
   setText('detailSpace',header.space||'—');
@@ -857,7 +1062,7 @@ function renderRunViewModel(view,p={}){
     cancel.hidden=Boolean(terminal);
     cancel.disabled=!(state.runId&&view.links?.job_url&&!terminal);
   }
-  renderTimeline(stable.timeline,runStatus);
+  if(!renderTimelineModel(timelineModel,runStatus))renderTimeline(stable.timeline,runStatus);
   renderActivityFeed(stableEvents);
   renderDiagnostics(view.diagnostics||{},header);
   renderSpaceTestPreview(view.space_test||{});
@@ -875,6 +1080,7 @@ function renderProgress(p){
   const progress=Number(stable.progress||0);
   animateProgressBar(progress,p.visual_status||p.status,stable.currentStep);
   setText('progressPercent',`${Math.round(progress)}%`);
+  renderSemanticProgressSummary(null,progress,p.visual_status||p.status);
   const latestEvent=stableEvents[stableEvents.length-1];
   setText('currentStep',stable.currentStepLabel||p.current_step_label||'—');
   setText('lastEvent',eventMessage(latestEvent)||p.last_event||'—');
@@ -892,6 +1098,11 @@ function renderProgress(p){
 }
 
 
+
+// v189.2 compatibility anchors for older progress tests:
+// const visualRunStatus=p.visual_status||runStatus
+// setText('currentStep',stable.currentStepLabel
+
 // Legacy test anchors retained for timeline invariants:
 // currentStepLabel:activeItem?.label
 // x.done_count||0
@@ -909,3 +1120,8 @@ function renderProgress(p){
 // status='after_fail'
 // root.scrollLeft-(bounds.rootLeft+margin-bounds.targetLeft)
 // root.scrollLeft+(bounds.targetRight-(bounds.rootRight-margin))
+
+// v189.3 semantic progress anchors:
+// renderSemanticProgressSummary(modelProgress,progress,visualRunStatus)
+// progressCaptionLabel = Process progress when timeline_model progress verdict is present
+// progress bar color follows visual_status, so 100% warn is not success

web/static/runs.js

@@ -652,6 +652,7 @@ function defaultRunDocuments(detail={}){
     {id:'repair_decision',label:'Decision',subtitle:'Source JSON',icon:'◇',present:false,url:blob('repair/REPAIR_DECISION.json')},
     {id:'blockage',label:'Blockage',subtitle:'Source JSON',icon:'!',tone:'warn',present:false,url:blob('repair/BLOCKAGE.json')},
     {id:'eval_publish',label:'Eval publish',subtitle:'Archive status',icon:'◎',present:false,url:blob('eval_publish_status.json')},
+    {id:'space_logs',label:'Space logs',subtitle:'Build/runtime index',icon:'◉',present:false,url:blob('logs/space_logs_index.json')},
   ];
 }
 function mergeStableRunDocuments(runId,docs=[]){
@@ -711,15 +712,25 @@ function deriveRunDocuments(detail={}){
   if(byId.has('eval_publish')){
     byId.get('eval_publish').present=Boolean((byId.get('eval_publish').present&&byId.get('eval_publish').url)||nonEmptyObject(detail.eval_publish)||nonEmptyObject(detail.eval_publish_status)||filePaths.has('eval_publish_status.json'));
   }
+  if(byId.has('space_logs')){
+    const logIndex=detail.space_logs_index||detail.space_log_index||detail.logs_index||{};
+    const hasSpaceLogs=nonEmptyObject(logIndex)||filePaths.has('logs/space_logs_index.json')||filePaths.has('space_logs_index.json')||filePaths.has('logs/space_log_diagnostics.json')||filePaths.has('logs/space_runtime_snapshot.json');
+    byId.get('space_logs').present=Boolean((byId.get('space_logs').present&&byId.get('space_logs').url)||hasSpaceLogs);
+    if(nonEmptyObject(logIndex)){
+      const quality=String(logIndex.log_quality||logIndex.quality||'').toLowerCase();
+      if(quality==='snapshot_only'||quality==='partial')byId.get('space_logs').tone='warn';
+      if(quality==='unavailable')byId.get('space_logs').tone='warn';
+    }
+  }
   if(!byId.has('repair')&&hasPrefix('repair')){
     const runId=summary.run_id||detail.run_id||state.runId;
     const bucket=summary.bucket_source||detail.bucket_source||state.bucketSource;
     byId.set('repair',{id:'repair',label:'Repair',subtitle:'Source folder',icon:'✦',tone:status.includes('failed')?'warn':'neutral',present:true,url:runId&&bucket?`https://huggingface.co/buckets/${bucket}/tree/runs/${runId}/repair`:''});
   }
-  const order=['pi_raw_trace','pi_redacted_trace','repair_decision','repair','blockage','report','smoke','eval_publish','blockers'];
+  const order=['pi_raw_trace','pi_redacted_trace','repair_decision','repair','blockage','report','smoke','eval_publish','space_logs','blockers'];
   const runId=String(summary.run_id||detail.run_id||state.runId||'');
   const resolved=order.map(id=>byId.get(id)).filter(Boolean).filter(d=>{
-    if(['repair_decision','blockage','eval_publish'].includes(d.id))return Boolean(d.present);
+    if(['repair_decision','blockage','eval_publish','space_logs'].includes(d.id))return Boolean(d.present);
     if(d.id==='blockers')return shouldShowBlockers||d.present;
     return true;
   });