Upload 6 files

web/static/app.css

@@ -11,3 +11,59 @@
 .runs-layout{display:grid;grid-template-columns:300px minmax(0,1fr);gap:16px}.run-list-card{border:1px solid var(--line);border-radius:16px;padding:12px;background:#fbfdff;min-width:0}.search-wrap{position:relative;margin-bottom:10px}.search-wrap input{padding-right:36px;margin:0}.search-wrap span{position:absolute;right:12px;top:50%;transform:translateY(-50%);color:#667085}.run-filters{display:flex;gap:6px;flex-wrap:wrap;margin-bottom:10px}.filter{border:1px solid var(--line);background:#fff;color:#344054;border-radius:999px;padding:7px 10px;font-weight:800;font-size:12px;cursor:pointer}.filter.active{background:#eaf2ff;border-color:#93c5fd;color:#1d4ed8}.runs-table{border:1px solid var(--line);border-radius:14px;padding:0;overflow:hidden;background:#fff;color:var(--muted)}.run-explorer.is-refreshing .runs-table{opacity:.65}.run-row{width:100%;border:0;border-bottom:1px solid var(--line);background:#fff;text-align:left;padding:12px;display:grid;grid-template-columns:12px minmax(0,1fr) auto;gap:8px;align-items:start;color:var(--ink);font:inherit;cursor:pointer}.run-row:last-child{border-bottom:0}.run-row:hover{background:#f8fafc}.run-row.selected{background:#eef4ff;box-shadow:inset 3px 0 0 var(--blue)}.run-row .run-id{font-size:13px;overflow-wrap:anywhere}.run-row span:nth-child(3),.run-row span:nth-child(4),.run-row span:nth-child(5),.run-row span:nth-child(6){grid-column:2;color:var(--muted);font-size:12px}.dot{width:9px;height:9px;border-radius:999px;background:#98a2b3;margin-top:5px}.dot.success{background:var(--green)}.dot.running{background:var(--blue)}.dot.warn{background:var(--amber)}.dot.error{background:var(--red)}.pill{font-style:normal;font-size:10px;border-radius:999px;padding:4px 7px;background:#f2f4f7;color:#475467;font-weight:850;white-space:nowrap}.run-detail-card{border:1px solid var(--line);border-radius:16px;background:#fff;padding:16px;min-width:0}.run-summary-card{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,1fr) auto;gap:14px;align-items:start}.summary-meta{display:grid;grid-template-columns:1fr 1fr;gap:10px}.summary-meta div,.detail-grid>div,.diagnostic-list>div{border:1px solid var(--line);border-radius:11px;padding:9px;background:#fbfdff;min-width:0}.summary-meta span,.detail-grid span,.diagnostic-list span{display:block;color:var(--muted);font-size:11px;margin-bottom:4px}.summary-meta strong,.detail-grid strong,.diagnostic-list strong{font-size:13px;overflow-wrap:anywhere}.quick-links{display:flex;gap:8px;flex-wrap:wrap;justify-content:flex-end}.progress-bar{height:9px;background:#e5e7eb;border-radius:999px;overflow:hidden;margin:16px 0 7px}.progress-bar div{height:100%;background:linear-gradient(90deg,var(--blue),var(--purple));border-radius:999px}.progress-percent{display:flex;justify-content:space-between;gap:14px;color:var(--muted);font-size:13px;margin-bottom:14px}.progress-percent strong{color:var(--blue)}.timeline{display:grid;grid-template-columns:repeat(8,minmax(86px,1fr));gap:8px;margin:12px 0 16px}.step{position:relative;display:grid;place-items:center;text-align:center;gap:6px;color:#475467;font-size:12px;min-height:70px}.step:not(:last-child):after{content:"";position:absolute;height:2px;background:#d0d5dd;left:63%;right:-42%;top:18px}.step.completed:not(:last-child):after,.step.done:not(:last-child):after{background:#22c55e}.step.running:not(:last-child):after{background:linear-gradient(90deg,#22c55e,#93c5fd)}.step-dot{width:30px;height:30px;border-radius:999px;display:grid;place-items:center;background:#fff;border:2px solid #d0d5dd;color:#667085;font-weight:900;z-index:1}.step.completed .step-dot,.step.done .step-dot{background:#22c55e;border-color:#22c55e;color:#fff}.step.running .step-dot{background:#fff;border-color:var(--blue);color:var(--blue);box-shadow:0 0 0 4px #dbeafe}.step.failed .step-dot,.step.blocked .step-dot{background:#fff;border-color:var(--red);color:var(--red)}.step small{display:block;color:var(--muted);font-size:10px;margin-top:2px}.manual-action{margin:12px 0;border:1px solid #f59e0b;background:var(--amber-soft);border-radius:14px;padding:13px;display:flex;justify-content:space-between;gap:12px;align-items:center}.manual-action p{margin:4px 0 0;color:#92400e;font-size:13px}.manual-action strong{color:#92400e}.poll-warning{margin:12px 0;border:1px solid #f59e0b;background:var(--amber-soft);color:#92400e;border-radius:12px;padding:10px 12px;font-size:13px}.detail-grid{display:grid;gap:10px}.detail-grid.three{grid-template-columns:1.2fr .9fr 1fr;margin-top:14px}.detail-grid.four{grid-template-columns:repeat(4,minmax(0,1fr));margin-bottom:12px}.mini-panel{border:1px solid var(--line);border-radius:15px;background:#fbfdff;padding:13px;min-width:0}.activity-feed{display:grid;gap:8px}.activity-row{display:grid;grid-template-columns:62px 10px minmax(0,1fr) auto;gap:8px;align-items:start;padding:7px 0;border-bottom:1px solid var(--line)}.activity-row:last-child{border-bottom:0}.activity-row time{font-size:11px;color:var(--muted)}.activity-row .activity-dot{width:8px;height:8px;border-radius:999px;background:#98a2b3;margin-top:5px}.activity-row.success .activity-dot{background:var(--green)}.activity-row.running .activity-dot{background:var(--blue)}.activity-row.warning .activity-dot{background:var(--amber)}.activity-row.error .activity-dot{background:var(--red)}.activity-row strong{font-size:12px}.activity-row p{margin:2px 0 0;color:var(--muted);font-size:11px}.activity-row em{font-style:normal;font-size:10px;border:1px solid var(--line);border-radius:999px;padding:3px 6px;background:#fff;color:#667085;white-space:nowrap}.status-chips{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-top:10px}.status-chip{border-radius:12px;padding:8px;background:#f2f4f7;display:flex;justify-content:space-between;gap:8px;font-size:11px}.status-chip em{font-style:normal}.issue-card{border-radius:12px;padding:10px;margin-top:10px;background:var(--amber-soft);border:1px solid #fde68a}.issue-card.error{background:var(--red-soft);border-color:#fecaca}.issue-card p{font-size:12px;color:#667085;margin:4px 0 0}.report-home p{font-size:12px;color:var(--muted);line-height:1.45}.empty{padding:13px;color:var(--muted);font-size:13px}.full-runs-grid{display:grid;grid-template-columns:360px minmax(0,1fr);gap:16px}.run-detail-card.expanded{min-height:540px}.extra-links{justify-content:flex-start;margin:10px 0}.split-panels{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin:12px 0}.metric-list{list-style:none;margin:0;padding:0}.metric-list li{display:flex;justify-content:space-between;gap:12px;border-bottom:1px solid var(--line);padding:9px 0;font-size:13px}.metric-list li:last-child{border-bottom:0}.metric-ok{color:var(--green)}.metric-warn{color:var(--amber)}.artifact-list{display:grid;gap:6px;font-size:13px}.artifact-list a{display:flex;justify-content:space-between;gap:8px;color:var(--blue);text-decoration:none;border-bottom:1px solid var(--line);padding:6px 0}.artifact-list em{font-style:normal;color:var(--muted)}.report-preview,.events{font-family:ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,"Liberation Mono",monospace;background:#101828;color:#d0d5dd;border:1px solid #1d2939;border-radius:12px;min-height:190px;max-height:380px;overflow:auto;padding:12px;white-space:pre-wrap;font-size:12px;line-height:1.5}.validate-grid{display:grid;grid-template-columns:330px minmax(0,1fr) 280px;gap:16px}.result-card{border:1px solid var(--line);border-radius:15px;background:#fbfdff;padding:14px}.about-panel{max-width:980px;margin:0 auto}.about-grid{display:grid;grid-template-columns:1fr 1fr;gap:16px}.about-grid div{border:1px solid var(--line);border-radius:15px;background:#fbfdff;padding:14px}.blockers{border:1px solid #f59e0b;background:var(--amber-soft);border-radius:12px;padding:12px;margin:12px 0}.blockers strong{display:block;color:#92400e;font-size:13px}.blockers p{margin:4px 0 10px;color:#92400e;font-size:12px}.hidden-run-inspector{display:none!important}[hidden]{display:none!important}
 @media(max-width:1320px){.topbar{grid-template-columns:1fr}.top-tabs{width:max-content}.top-actions{justify-content:flex-start}.build-workspace{grid-template-columns:1fr}.runs-layout{grid-template-columns:320px minmax(0,1fr)}.timeline{grid-template-columns:repeat(4,1fr)}.detail-grid.three,.validate-grid{grid-template-columns:1fr}.full-runs-grid{grid-template-columns:1fr}.run-summary-card{grid-template-columns:1fr}.quick-links{justify-content:flex-start}}
 @media(max-width:820px){.app-shell{padding:12px}.brand p{display:none}.top-tabs{overflow:auto;width:100%}.nav-item{flex:1}.form-grid,.summary-meta,.detail-grid.four,.split-panels,.about-grid,.runs-layout{grid-template-columns:1fr}.timeline{grid-template-columns:1fr 1fr}.step:not(:last-child):after{display:none}.run-storage-card{grid-template-columns:1fr}.manual-action{display:block}.manual-action .inline-actions{margin-top:10px}.activity-row{grid-template-columns:56px 10px 1fr}.activity-row em{grid-column:3}}
+
+/* Pass 46: mobile framing and run-selection polish. Keep text readable instead of collapsing words letter-by-letter. */
+*, *::before, *::after { min-width: 0; }
+button, a, input, select, textarea { max-width: 100%; }
+.nav-item, .primary, .secondary, .link-btn, .filter, .badge, .pill { white-space: nowrap; }
+.brand h1, .section-head h2, .run-summary-card h3, .mini-panel h4 { overflow-wrap: break-word; word-break: normal; hyphens: none; }
+.summary-meta strong,
+.detail-grid strong,
+.diagnostic-list strong,
+.run-row .run-id,
+.report-home,
+.activity-row,
+.step,
+.step div,
+.step span {
+  overflow-wrap: break-word;
+  word-break: normal;
+  hyphens: none;
+}
+.run-row .run-id,
+.detail-grid strong,
+.summary-meta strong,
+.diagnostic-list strong {
+  line-height: 1.25;
+}
+@media(max-width:820px){
+  .topbar{display:flex;flex-direction:column;align-items:stretch;gap:12px}
+  .top-tabs{display:flex;width:100%;overflow-x:auto;gap:6px;padding-bottom:2px;scrollbar-width:thin}
+  .nav-item{flex:0 0 auto;min-width:max-content;padding:10px 12px}
+  .top-actions{display:grid;grid-template-columns:1fr;gap:8px;width:100%}
+  .bucket-pill,.user-chip,.logout-link{width:100%;justify-content:flex-start;overflow:hidden;text-overflow:ellipsis}
+  .build-workspace,.runs-layout,.full-runs-grid,.validate-grid{grid-template-columns:1fr!important}
+  .runs-column,.build-column,.run-detail-card,.panel{width:100%;min-width:0}
+  .run-list-card{width:100%;min-width:0}
+  .run-row{grid-template-columns:12px minmax(0,1fr) auto;align-items:start}
+  .run-row span:nth-child(3),.run-row span:nth-child(4),.run-row span:nth-child(5),.run-row span:nth-child(6){grid-column:2 / -1}
+  .timeline{grid-template-columns:1fr!important;gap:6px}
+  .step{display:grid;grid-template-columns:34px minmax(0,1fr);place-items:initial;text-align:left;align-items:center;min-height:48px;padding:8px;border:1px solid var(--line);border-radius:12px;background:#fff}
+  .step-dot{grid-column:1;grid-row:1 / span 2}
+  .step small{grid-column:2;margin-top:0}
+  .summary-meta,.detail-grid.three,.detail-grid.four,.split-panels,.about-grid,.form-grid{grid-template-columns:1fr!important}
+  .quick-links,.inline-actions{align-items:stretch}
+  .quick-links .link-btn,.inline-actions .secondary,.inline-actions .link-btn{flex:1 1 auto;min-width:max-content}
+  .activity-row{grid-template-columns:54px 10px minmax(0,1fr)}
+  .activity-row em{grid-column:3;justify-self:start;white-space:normal}
+}
+@media(max-width:430px){
+  .app-shell{padding:10px}
+  .panel,.build-card,.runs-panel,.run-detail-card,.mini-panel{padding:12px}
+  .brand{gap:9px}.brand-mark{width:34px;height:34px}.brand h1{font-size:18px}
+  .section-head{align-items:flex-start}
+  .run-row{grid-template-columns:10px minmax(0,1fr)}
+  .run-row .pill{grid-column:2;justify-self:start;margin-top:4px}
+  .quick-links .link-btn,.inline-actions .secondary,.inline-actions .link-btn{width:100%;min-width:0;white-space:normal;text-align:center}
+  .filter{white-space:normal}
+}

web/static/runs.js

@@ -6,7 +6,7 @@ function renderRunStats(){const counts={all:state.runsCache.length,running:0,ful
 function renderRunRows(runs,compact=false){return (runs||[]).map(r=>`<button class="run-row" data-run="${escapeHtml(r.run_id)}"><span class="dot ${statusClass(r.status)}"></span><strong class="run-id" title="${escapeHtml(r.run_id)}">${shortText(r.run_id,compact?24:30)}</strong><em class="pill ${statusClass(r.status)}">${escapeHtml(badgeLabel(r.status||'unknown'))}</em><span title="${escapeHtml(r.model_id||'')}">${shortText(r.model_id,compact?28:34)}</span><span title="${escapeHtml(r.target_space||'')}">${shortText(r.target_space,compact?28:34)}</span><span>${escapeHtml(r.selected_hardware||'—')}</span></button>`).join('')}
 function renderRunsFromCache(){const runs=filteredRuns();for(const [id,compact] of [['runsTableHome',true],['runsTable',false]]){const root=$(id);if(root)root.innerHTML=renderRunRows(runs,compact)||'<div class="empty">No runs match this filter.</div>'}renderRunStats();document.querySelectorAll('.run-row[data-run]').forEach(row=>row.addEventListener('click',()=>selectRun(row.dataset.run)));if(state.runId)document.querySelectorAll('.run-row').forEach(row=>row.classList.toggle('selected',row.dataset.run===state.runId))}
 async function loadRuns(forceNetwork=false){const stale=Date.now()-(state.runsLastLoaded||0)>45000;const shouldFetch=forceNetwork||!state.runsCache.length||stale;try{if(shouldFetch){document.querySelectorAll('.runs-panel,.full-runs-panel').forEach(x=>x.classList.add('is-refreshing'));const data=await apiGet(`/api/runs?limit=100&bucket_name=${encodeURIComponent(state.bucketName)}`);state.runsCache=data.runs||[];state.runsLastLoaded=Date.now();if(data.bucket_source)state.bucketSource=data.bucket_source}renderRunsFromCache()}catch(e){for(const id of ['runsTable','runsTableHome']){const root=$(id);if(root)root.textContent='Could not load runs: '+e.message}if(forceNetwork)console.warn(e)}finally{document.querySelectorAll('.runs-panel,.full-runs-panel').forEach(x=>x.classList.remove('is-refreshing'))}}
-async function selectRun(runId){if(!runId)return;document.querySelectorAll('.run-row').forEach(row=>row.classList.toggle('selected',row.dataset.run===runId));setBuildModeInspecting(runId);try{const detail=await apiGet(`/api/runs/${encodeURIComponent(runId)}?bucket_name=${encodeURIComponent(state.bucketName)}`);if(detail.bucket_source)state.bucketSource=detail.bucket_source;renderRunDetail(detail);startPolling(runId);switchView(state.currentView==='runs'?'runs':'build')}catch(e){const report=$('reportPreview');if(report)report.textContent='Could not load run details: '+e.message;const home=$('homeReportPreview');if(home)home.innerHTML=`<strong>Could not load run details</strong><p>${escapeHtml(e.message)}</p>`}}
+async function selectRun(runId){if(!runId)return;document.querySelectorAll('.run-row').forEach(row=>row.classList.toggle('selected',row.dataset.run===runId));setBuildModeInspecting(runId);try{const detail=await apiGet(`/api/runs/${encodeURIComponent(runId)}?bucket_name=${encodeURIComponent(state.bucketName)}`);if(detail.bucket_source)state.bucketSource=detail.bucket_source;renderRunDetail(detail);startPolling(runId);/* Keep the user on the current tab: selecting a run updates the side/detail panels without forcing navigation. */}catch(e){const report=$('reportPreview');if(report)report.textContent='Could not load run details: '+e.message;const home=$('homeReportPreview');if(home)home.innerHTML=`<strong>Could not load run details</strong><p>${escapeHtml(e.message)}</p>`}}
 function renderSelectedLinks(summary={},detail={}){const runId=summary.run_id||detail.run_id;const bucket=summary.bucket_source||detail.bucket_source||state.bucketSource;const artifacts=summary.artifacts_url||(typeof artifactUrl==='function'?artifactUrl(runId,bucket):'');const jobUrl=inferredJobUrl(summary,detail);setLink('selectedOpenJob',jobUrl);setLink('selectedOpenSpace',summary.target_space_url);setLink('selectedOpenSettings',summary.target_space_url?summary.target_space_url+'/settings':'');setLink('selectedOpenArtifacts',artifacts);const btn=$('selectedValidateBtn');if(btn){btn.disabled=!summary.target_space;btn.onclick=prepareValidationFromActiveRun}}
 function renderBlockers(detail={}){const root=$('selectedBlockers');if(!root)return;const summary=detail.summary||{};const blockers=detail.technical_blockers||{};const manual=summary.manual_hardware_required||String(summary.status||'').includes('manual_hardware_required');const blockerItems=Array.isArray(blockers.blockers)?blockers.blockers:[];if(!manual&&!blockerItems.length){root.hidden=true;root.innerHTML='';return}root.hidden=false;const parts=[];if(manual)parts.push('<strong>Manual hardware required</strong><p>Open Space settings, choose the recommended GPU, then run validation.</p>');for(const b of blockerItems.slice(0,4)){parts.push(`<strong>${escapeHtml(shortText(b.type||b.name||'Technical blocker',32))}</strong><p>${escapeHtml(shortText(b.claim||b.reason||b.message||'',120))}</p>`)}root.innerHTML=parts.join('')}
 function renderRunDetail(detail){state.selectedRunDetail=detail;const summary=detail.summary||{};const smoke=detail.generation_smoke||{};const files=detail.files||[];const view=detail.view||{};const header=view.header||{};setText('selectedRunId',detail.run_id||summary.run_id||'—');setText('selectedModelId',summary.model_id||'—');setText('selectedTargetSpace',summary.target_space||'—');setText('selectedHardware',summary.selected_hardware||summary.hardware||'—');setText('runDetailStatus',header.status||summary.status||'unknown');setText('homeRunDetailStatus',header.status_label||summary.status||'unknown');setText('detailRunId',summary.run_id||detail.run_id);setText('detailJobStatus',summary.status||'—');setText('detailGateStatus',(detail.inference_gate||{}).status||summary.status||'—');setText('detailSpace',summary.target_space||'—');setText('detailHardware',summary.selected_hardware||summary.hardware||'—');setText('detailTraces',Array.isArray(detail.events)?String(detail.events.length)+' events':summary.traces_count||'—');const validation=$('selectedValidation');if(validation){validation.innerHTML=`<li><span>Health</span><strong>${summary.health_passed?'passed':'—'}</strong></li><li><span>Smoke test</span><strong>${summary.smoke_test_passed?'passed':(smoke.status||'—')}</strong></li><li><span>Latency</span><strong>${summary.latency_seconds?fmtSeconds(Math.round(summary.latency_seconds)):'—'}</strong></li>`}const artifactRoot=$('artifactList');if(artifactRoot){const interesting=files.filter(f=>!/traces\//.test(f.path||'')).slice(0,18);artifactRoot.innerHTML=interesting.length?interesting.map(f=>`<a href="${escapeHtml(f.url)}" target="_blank"><span>${escapeHtml(f.path)}</span><em>${f.size?Math.round(Number(f.size)/1024)+' KB':''}</em></a>`).join(''):'No artifacts indexed yet.'}const reportText=(detail.report||'No report available.').slice(0,8000);const report=$('reportPreview');if(report)report.textContent=reportText;const homeReport=$('homeReportPreview');if(homeReport){const firstLine=reportText.split('\n').find(Boolean)||'No report available yet.';homeReport.innerHTML=`<strong>${escapeHtml(header.status_label||summary.status||'Run selected')}</strong><p>${escapeHtml(shortText(firstLine,180))}</p>`}setQuickLinks({job_url:inferredJobUrl(summary,detail),target_space_url:summary.target_space_url,target_space_settings_url:summary.target_space_url?summary.target_space_url+'/settings':'',artifacts_url:summary.artifacts_url,bucket_source:detail.bucket_source,run_id:summary.run_id||detail.run_id});renderSelectedLinks({...summary,bucket_source:detail.bucket_source},detail);renderBlockers(detail);renderMetrics({...detail,summary});if(view.schema_version)renderRunViewModel(view,{...detail,progress:detail.progress||0,events:detail.events||[]});const homeBtn=$('homeValidateBtn');if(homeBtn){homeBtn.disabled=!summary.target_space;homeBtn.onclick=prepareValidationFromActiveRun}}