Upload 6 files

web/static/app.css

@@ -193,7 +193,7 @@ strong,p,h1,h2,h3,h4,span,a,button,div,li{overflow-wrap:break-word;word-break:no
 @media (max-width: 720px){
   .app-shell{padding:12px}
   .topbar,.workspace-grid,.space-test-grid,.editor-grid,.test-top-row,.two-cols,.active-meta,.selected-grid,.validation-grid,.bucket-actions{grid-template-columns:1fr}
-  .top-actions,.quick-links,.inline-actions{display:grid;grid-template-columns:1fr;align-items:stretch}
+  .top-actions,.quick-links,.inline-actions,.active-run-actions{display:grid;grid-template-columns:1fr;align-items:stretch}
   .primary,.secondary,.link-btn,.bucket-pill,.user-chip,.logout-link,.filter{width:100%;white-space:normal}
   .timeline{grid-template-columns:1fr}
   .step{grid-template-columns:32px minmax(0,1fr);text-align:left;align-items:center;padding:8px;border:1px solid var(--line);border-radius:12px;background:#fff}
@@ -213,3 +213,107 @@ strong,p,h1,h2,h3,h4,span,a,button,div,li{overflow-wrap:break-word;word-break:no
 @media (min-width:721px){
   .timeline{grid-template-columns:repeat(26,minmax(72px,1fr))}
 }
+
+.active-run-actions{display:flex;gap:8px;flex-wrap:wrap;align-items:center}
+.active-run-actions .link-btn{padding:8px 10px;font-size:12px}
+.active-run-actions #cancelRun{margin-left:auto}
+
+
+/* v56 feedback motion */
+.progress-bar{position:relative}
+.progress-bar>div{
+  transition:width .75s cubic-bezier(.22,1,.36,1), background-color .25s ease, filter .25s ease;
+  will-change:width,transform,filter;
+  position:relative;
+  overflow:hidden;
+}
+.progress-bar>div.is-running::after{
+  content:"";
+  position:absolute;
+  inset:0;
+  background:linear-gradient(90deg,transparent,rgba(255,255,255,.45),transparent);
+  transform:translateX(-100%);
+  animation:progress-shimmer 1.4s linear infinite;
+}
+.progress-bar>div.progress-bump{
+  animation:progress-bump .55s ease-out;
+}
+.value-bump{
+  animation:value-bump .55s ease-out;
+}
+.badge.status-bump{
+  animation:status-bump .7s ease-out;
+}
+.step{
+  transition:background-color .25s ease,border-color .25s ease,transform .25s ease,opacity .25s ease;
+}
+.step:before{
+  transition:background .55s ease;
+}
+.step-dot{
+  transition:background-color .35s ease,border-color .35s ease,color .35s ease,box-shadow .35s ease,transform .35s ease;
+}
+.step.running .step-dot{
+  animation:step-running-pulse 1.25s ease-in-out infinite;
+}
+.step.status-flash{
+  animation:step-status-flash .9s ease-out;
+}
+.step-dot.dot-pop{
+  animation:dot-pop .55s cubic-bezier(.34,1.56,.64,1);
+}
+.activity-row{
+  animation:activity-enter .28s ease-out;
+}
+@keyframes progress-shimmer{
+  to{transform:translateX(100%)}
+}
+@keyframes progress-bump{
+  0%{filter:brightness(1);transform:scaleY(1)}
+  40%{filter:brightness(1.18);transform:scaleY(1.35)}
+  100%{filter:brightness(1);transform:scaleY(1)}
+}
+@keyframes value-bump{
+  0%{transform:translateY(0);color:inherit}
+  40%{transform:translateY(-2px);color:var(--blue)}
+  100%{transform:translateY(0);color:inherit}
+}
+@keyframes status-bump{
+  0%{transform:scale(1)}
+  35%{transform:scale(1.06)}
+  100%{transform:scale(1)}
+}
+@keyframes step-running-pulse{
+  0%,100%{box-shadow:0 0 0 4px #eff6ff}
+  50%{box-shadow:0 0 0 8px rgba(37,99,235,.16)}
+}
+@keyframes step-status-flash{
+  0%{background:rgba(37,99,235,.12);transform:translateY(-1px)}
+  100%{background:transparent;transform:translateY(0)}
+}
+@keyframes dot-pop{
+  0%{transform:scale(.72)}
+  55%{transform:scale(1.2)}
+  100%{transform:scale(1)}
+}
+@keyframes activity-enter{
+  from{opacity:.2;transform:translateY(-4px)}
+  to{opacity:1;transform:translateY(0)}
+}
+@media (prefers-reduced-motion: reduce){
+  .progress-bar>div,
+  .progress-bar>div::after,
+  .step,
+  .step:before,
+  .step-dot,
+  .activity-row,
+  .badge,
+  .value-bump{
+    transition:none!important;
+    animation:none!important;
+  }
+}
+
+.pi-trace-panel summary{cursor:pointer;font-weight:800;font-size:13px}
+.pi-trace-output{background:#0b1220;color:#dbeafe;min-height:180px}
+.pi-trace-output::selection{background:#1d4ed8;color:#fff}

web/static/app.js

@@ -18,7 +18,7 @@ function validateBuildForm(){if(!state.bucketReady)return'Create or check your p
 function validateValidationForm(){if(!formValue('validateSpace'))return'Enter the target Space ID to validate.';try{JSON.parse(formValue('testArgs')||'[]');JSON.parse(formValue('testKwargs')||'{}')}catch(e){return`Invalid JSON payload: ${e.message}`}return''}
 function setBuildModeNew(){const panel=$('buildModePanel');if(panel){panel.classList.remove('inspecting');panel.innerHTML='<strong>Preparing a new build</strong><p>This form launches new builds. Existing runs can be inspected in the Runs Explorer on the right.</p>'}const launch=$('launchResultPanel');if(launch)launch.hidden=true;const status=$('progressStatus');if(status){status.textContent='Idle';status.className='badge neutral'}setText('progressTitle','No run selected')}
 function setBuildModeInspecting(runId){const panel=$('buildModePanel');if(panel){panel.classList.add('inspecting');panel.innerHTML=`<strong>Inspecting selected run</strong><p>You are viewing run <code>${escapeHtml(runId||'')}</code>. The build form is unchanged and the active run panel is now tracking it.</p>`}}
-function resetRunDetails(){for(const [id,value] of [['detailRunId','—'],['detailJobStatus','—'],['detailGateStatus','—'],['detailSpace','—'],['detailHardware','—'],['detailTraces','—'],['homeRunDetailStatus','No run'],['selectedRunId','—'],['selectedModelId','—'],['selectedTargetSpace','—'],['selectedHardware','—'],['runDetailStatus','—']])setText(id,value);setQuickLinks({});const report=$('homeReportPreview');if(report)report.innerHTML='<strong>No run selected</strong><p>Select a run to preview its report and actions.</p>';const full=$('reportPreview');if(full)full.textContent='No report selected.';const manual=$('manualActionPanel');if(manual)manual.hidden=true;const activity=$('activityFeed');if(activity)activity.innerHTML='<div class="empty">No activity yet.</div>'}
+function resetRunDetails(){const cancel=$('cancelRun');if(cancel)cancel.disabled=true;for(const [id,value] of [['detailRunId','—'],['detailJobStatus','—'],['detailGateStatus','—'],['detailSpace','—'],['detailHardware','—'],['detailTraces','—'],['homeRunDetailStatus','No run'],['selectedRunId','—'],['selectedModelId','—'],['selectedTargetSpace','—'],['selectedHardware','—'],['runDetailStatus','—']])setText(id,value);setQuickLinks({});const report=$('homeReportPreview');if(report)report.innerHTML='<strong>No run selected</strong><p>Select a run to preview its report and actions.</p>';const full=$('reportPreview');if(full)full.textContent='No report selected.';const manual=$('manualActionPanel');if(manual)manual.hidden=true;const activity=$('activityFeed');if(activity)activity.innerHTML='<div class="empty">No activity yet.</div>'}
 function prepareNewBuild(){if(state.poll){clearInterval(state.poll);state.poll=null}state.runId=null;state.selectedRunDetail=null;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','—');setText('lastPolled','—');setText('hardwarePlan',hardwarePlanLabel());renderMetrics({});showMessage('New build mode ready.','info')}
 function renderLaunchResult(result={}){const panel=$('launchResultPanel');if(panel)panel.hidden=false;setText('launchRunId',result.run_id||'—');setText('launchStatus',result.status||'running');setText('launchSpace',result.target_space||'—');setText('launchHardware',result.selected_hardware||result.preferred_space_hardware||'—');const links=normalizeLinks({...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});setLink('launchOpenJob',links.job_url);setLink('launchOpenSpace',links.target_space_url);setLink('launchOpenSettings',links.target_space_settings_url||links.target_space_url&&links.target_space_url+'/settings');setLink('launchOpenArtifacts',links.artifacts_url)}function setActiveRun(result){state.runId=result.run_id;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||'—');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});renderLaunchResult(result);saveActiveRun();startPolling(result.run_id)}
 function startPolling(runId){state.runId=runId;state.pollErrors=0;const warn=$('pollWarning');if(warn)warn.hidden=true;if(state.poll)clearInterval(state.poll);saveActiveRun();refreshProgress();state.poll=setInterval(refreshProgress,2500)}

web/static/progress.js

@@ -1,8 +1,183 @@
-function timelineIcon(status){status=String(status||'pending');if(status==='done'||status==='completed')return'✓';if(status==='running')return'•';if(status==='failed'||status==='blocked')return'!';if(status==='skipped')return'↷';return'○'}
-function timelineStatus(status){status=String(status||'pending');if(status==='done'||status==='completed')return'completed';if(status==='running')return'running';if(status==='failed')return'failed';if(status==='blocked')return'blocked';return'pending'}
-function renderTimeline(items){const root=$('timeline');if(!root)return;root.innerHTML=(items||[]).map((x,i)=>{const st=timelineStatus(x.status);return `<div class="step ${st}" data-status="${st}"><div class="step-dot">${timelineIcon(x.status)}</div><div><strong>${escapeHtml(x.label||`Step ${i+1}`)}</strong><small>${st}</small></div></div>`}).join('')}
-function renderActivityFeed(items){const root=$('activityFeed');if(!root)return;if(!items.length){root.innerHTML='<div class="empty">No activity yet. Waiting for the first worker event.</div>';return}root.innerHTML=items.slice(-8).reverse().map(item=>`<div class="activity-row ${statusClass(item.severity||item.status)}"><time>${escapeHtml(formatTime(item.ts))}</time><span class="activity-dot"></span><div><strong>${escapeHtml(item.message||'Event received')}</strong><p>${escapeHtml(item.step||'event')} · ${escapeHtml(item.status||'')}</p></div><em>${escapeHtml(item.agent||'Factory Agent')}</em></div>`).join('')}
-function renderDiagnostics(d={},header={}){setText('diagBuildStatus',badgeLabel(d.build_status||'pending'));setText('diagBuildStep',header.current_phase_label||'Waiting for run data');const chips=$('statusChips');if(chips){const data=[['Build',d.build_status],['API',d.api_status],['Tests',d.tests_status],['Verdict',d.verdict_status]];chips.innerHTML=data.map(([k,v])=>`<span class="status-chip ${statusClass(v)}"><strong>${escapeHtml(k)}</strong><em>${escapeHtml(badgeLabel(v||'pending'))}</em></span>`).join('')}const issue=$('issueCard');if(issue){const has=Boolean(d.issue&&d.issue.title);issue.hidden=!has;if(has){issue.className='issue-card '+statusClass(d.issue.status||d.issue.title);setText('issueTitle',d.issue.title);setText('issueDetail',d.issue.detail||d.issue.status||'Review logs.')}}const rules=$('zeroGpuChecklist');if(rules)rules.innerHTML=(d.zerogpu_rules||[]).map(r=>`<li class="${statusClass(r.status)}"><span>${escapeHtml(r.label)}</span><strong>${escapeHtml(r.status||'pending')}</strong></li>`).join('')}
-function renderSpaceTestPreview(s={}){const st=$('spaceTestStatus');if(st){st.textContent=badgeLabel(s.status||'Pending');st.className='badge '+statusClass(s.status)}setText('spaceTestVerdict',badgeLabel(s.verdict||'pending'));setText('spaceTestOutput',s.output_artifact?'Output artifact ready':'Waiting for API test')}
-function renderRunViewModel(view,p={}){const header=view.header||{};const sm=view.status_model||{};const progress=Number(sm.global_status==='succeeded'?100:(p.progress||0));const fill=$('progressFill');if(fill)fill.style.width=`${Math.max(0,Math.min(100,progress))}%`;setText('progressPercent',`${Math.round(progress)}%`);setText('progressTitle',header.title||view.run_id||'Live job progress');const statusEl=$('progressStatus');if(statusEl){statusEl.textContent=header.status_label||badgeLabel(header.status||'Running');statusEl.className='badge '+statusClass(header.status)}setText('currentStep',header.current_phase_label||'—');setText('lastEvent',(view.activity||[]).slice(-1)[0]?.message||p.last_event||'Waiting for worker events.');setText('elapsed',fmtSeconds(header.elapsed_seconds||p.elapsed_seconds));setText('lastPolled',new Date().toLocaleTimeString());setText('detailSpace',header.space||'—');setText('detailJobStatus',header.raw_status||header.status||'—');setText('detailGateStatus',sm.verdict||'—');setText('detailTraces',Array.isArray(p.events)?`${p.events.length} events`:'—');setLink('openJob',view.links?.job_url);setLink('openSpace',view.links?.target_space_url);setLink('openSettings',view.links?.target_space_settings_url);setLink('openArtifacts',view.links?.artifacts_url);renderTimeline(p.timeline||view.pipeline||[]);renderActivityFeed(view.activity||[]);renderDiagnostics(view.diagnostics||{},header);renderSpaceTestPreview(view.space_test||{});renderManualAction({view,...p})}
-function renderProgress(p){if(p.view){renderRunViewModel(p.view,p);return}const progress=Number(p.progress||0);const fill=$('progressFill');if(fill)fill.style.width=`${Math.max(0,Math.min(100,progress))}%`;setText('progressPercent',`${progress}%`);setText('currentStep',p.current_step_label||'—');setText('lastEvent',p.last_event||'—');setText('elapsed',fmtSeconds(p.elapsed_seconds));setText('progressTitle',p.current_step_label||'Live job progress');const statusEl=$('progressStatus');if(statusEl){statusEl.textContent=p.status||'running';statusEl.className='badge '+statusClass(p.status)}setText('lastPolled',new Date().toLocaleTimeString());renderTimeline(p.timeline||[])}
+const timelineRenderState={};
+const progressMotionState={lastProgress:null,lastStatus:null,lastStep:null};
+
+function timelineIcon(status){
+  status=String(status||'pending');
+  if(status==='done'||status==='completed')return'✓';
+  if(status==='running')return'•';
+  if(status==='failed'||status==='blocked')return'!';
+  if(status==='skipped')return'↷';
+  return'○';
+}
+function timelineStatus(status){
+  status=String(status||'pending');
+  if(status==='done'||status==='completed')return'completed';
+  if(status==='running')return'running';
+  if(status==='failed')return'failed';
+  if(status==='blocked')return'blocked';
+  return'pending';
+}
+function timelineStepKey(x,i){
+  return String(x.step||x.id||x.label||`step-${i}`);
+}
+function animateClass(el,klass,duration=900){
+  if(!el)return;
+  el.classList.remove(klass);
+  void el.offsetWidth;
+  el.classList.add(klass);
+  window.setTimeout(()=>el.classList.remove(klass),duration);
+}
+function renderTimeline(items){
+  const root=$('timeline');
+  if(!root)return;
+  const list=items||[];
+  const nextState={};
+  root.innerHTML=list.map((x,i)=>{
+    const key=timelineStepKey(x,i);
+    const st=timelineStatus(x.status);
+    const prev=timelineRenderState[key];
+    const changed=prev&&prev!==st;
+    nextState[key]=st;
+    return `<div class="step ${st}${changed?' status-changed':''}" data-step="${escapeHtml(key)}" data-status="${st}"><div class="step-dot">${timelineIcon(x.status)}</div><div><strong>${escapeHtml(x.label||`Step ${i+1}`)}</strong><small>${st}</small></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);
+    const dot=step.querySelector('.step-dot');
+    animateClass(dot,'dot-pop',700);
+  });
+}
+function renderActivityFeed(items){
+  const root=$('activityFeed');
+  if(!root)return;
+  if(!items.length){
+    root.innerHTML='<div class="empty">No activity yet. Waiting for the first worker event.</div>';
+    return;
+  }
+  root.innerHTML=items.slice(-8).reverse().map(item=>`<div class="activity-row ${statusClass(item.severity||item.status)}"><time>${escapeHtml(formatTime(item.ts))}</time><span class="activity-dot"></span><div><strong>${escapeHtml(item.message||'Event received')}</strong><p>${escapeHtml(item.step||'event')} · ${escapeHtml(item.status||'')}</p></div><em>${escapeHtml(item.agent||'Factory Agent')}</em></div>`).join('');
+}
+function renderDiagnostics(d={},header={}){
+  setText('diagBuildStatus',badgeLabel(d.build_status||'pending'));
+  setText('diagBuildStep',header.current_phase_label||'Waiting for run data');
+  const chips=$('statusChips');
+  if(chips){
+    const data=[['Build',d.build_status],['API',d.api_status],['Tests',d.tests_status],['Verdict',d.verdict_status]];
+    chips.innerHTML=data.map(([k,v])=>`<span class="status-chip ${statusClass(v)}"><strong>${escapeHtml(k)}</strong><em>${escapeHtml(badgeLabel(v||'pending'))}</em></span>`).join('');
+  }
+  const issue=$('issueCard');
+  if(issue){
+    const has=Boolean(d.issue&&d.issue.title);
+    issue.hidden=!has;
+    if(has){
+      issue.className='issue-card '+statusClass(d.issue.status||d.issue.title);
+      setText('issueTitle',d.issue.title);
+      setText('issueDetail',d.issue.detail||d.issue.status||'Review logs.');
+    }
+  }
+  const rules=$('zeroGpuChecklist');
+  if(rules)rules.innerHTML=(d.zerogpu_rules||[]).map(r=>`<li class="${statusClass(r.status)}"><span>${escapeHtml(r.label)}</span><strong>${escapeHtml(r.status||'pending')}</strong></li>`).join('');
+}
+function renderSpaceTestPreview(s={}){
+  const st=$('spaceTestStatus');
+  if(st){
+    st.textContent=badgeLabel(s.status||'pending');
+    st.className='badge '+statusClass(s.status);
+  }
+  setText('spaceTestOutput',s.output_artifact||s.endpoint||'Waiting for API test');
+  setText('spaceTestVerdict',s.verdict||'pending');
+}
+function animateProgressBar(progress,status,currentStep){
+  const fill=$('progressFill');
+  if(!fill)return;
+  const value=Math.max(0,Math.min(100,Number(progress||0)));
+  const previous=progressMotionState.lastProgress;
+  fill.style.setProperty('--progress-target',`${value}%`);
+  fill.style.width=`${value}%`;
+  fill.classList.toggle('is-running',String(status||'').toLowerCase()==='running');
+  if(previous!==null&&Math.round(previous)!==Math.round(value)){
+    animateClass(fill,'progress-bump',650);
+    const pct=$('progressPercent');
+    animateClass(pct,'value-bump',650);
+  }
+  progressMotionState.lastProgress=value;
+  progressMotionState.lastStep=currentStep||progressMotionState.lastStep;
+}
+function animateStatusBadge(status){
+  const el=$('progressStatus');
+  if(!el)return;
+  const next=String(status||'').toLowerCase();
+  if(progressMotionState.lastStatus&&progressMotionState.lastStatus!==next){
+    animateClass(el,'status-bump',800);
+  }
+  progressMotionState.lastStatus=next;
+}
+function renderPiLiveTrace(text){
+  const root=$('piTracePanel');
+  if(!root)return;
+  const value=String(text||'').trim();
+  if(!value){
+    root.textContent='No Pi trace yet. It will appear while Qwen Coder is working through Pi.';
+    return;
+  }
+  root.textContent=value;
+  root.scrollTop=root.scrollHeight;
+}
+function renderRunViewModel(view,p={}){
+  const header=view.header||{};
+  const sm=view.status_model||{};
+  const progress=Number(p.progress??(header.status==='succeeded'?100:0));
+  animateProgressBar(progress,header.status||p.status,header.current_phase);
+  setText('progressPercent',`${Math.round(progress)}%`);
+  setText('progressTitle',header.title||view.run_id||'Live job progress');
+  const statusEl=$('progressStatus');
+  if(statusEl){
+    statusEl.textContent=header.status_label||badgeLabel(header.status||'Running');
+    statusEl.className='badge '+statusClass(header.status);
+    animateStatusBadge(header.status);
+  }
+  setText('currentStep',header.current_phase_label||'—');
+  setText('lastEvent',(view.activity||[]).slice(-1)[0]?.message||p.last_event||'Waiting for worker events.');
+  setText('elapsed',fmtSeconds(p.elapsed_seconds??header.elapsed_seconds));
+  setText('lastPolled',new Date().toLocaleTimeString());
+  setText('detailSpace',header.space||'—');
+  setText('detailJobStatus',header.raw_status||header.status||'—');
+  setText('detailGateStatus',sm.verdict||'—');
+  setText('detailTraces',Array.isArray(p.events)?`${p.events.length} events`:'—');
+  setLink('openJob',view.links?.job_url);
+  setLink('openSpace',view.links?.target_space_url);
+  setLink('openSettings',view.links?.target_space_settings_url);
+  setLink('openArtifacts',view.links?.artifacts_url);
+  const cancel=$('cancelRun');
+  if(cancel){
+    const s=String(header.status||p.status||'').toLowerCase();
+    cancel.disabled=!(state.runId&&view.links?.job_url&&!TERMINAL_STATUSES.has(s));
+  }
+  renderTimeline(p.timeline||view.pipeline||[]);
+  renderActivityFeed(view.activity||[]);
+  renderDiagnostics(view.diagnostics||{},header);
+  renderSpaceTestPreview(view.space_test||{});
+  renderManualAction({view,...p});
+  renderPiLiveTrace(p.pi_live_log||'');
+}
+function renderProgress(p){
+  if(p.view){
+    renderRunViewModel(p.view,p);
+    return;
+  }
+  const progress=Number(p.progress||0);
+  animateProgressBar(progress,p.status,p.current_step);
+  setText('progressPercent',`${Math.round(progress)}%`);
+  setText('currentStep',p.current_step_label||'—');
+  setText('lastEvent',p.last_event||'—');
+  setText('elapsed',fmtSeconds(p.elapsed_seconds));
+  setText('progressTitle',p.current_step_label||'Live job progress');
+  const statusEl=$('progressStatus');
+  if(statusEl){
+    statusEl.textContent=p.status||'running';
+    statusEl.className='badge '+statusClass(p.status);
+    animateStatusBadge(p.status);
+  }
+  setText('lastPolled',new Date().toLocaleTimeString());
+  renderTimeline(p.timeline||[]);
+}