mzp
/
VLCode-Lite


			
				
					
						
						
							12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455565758596061626364656667686970717273747576777879808182838485868788899091929394959697989910010110210310410510610710810911011111211311411511611711811912012112212312412512612712812913013113213313413513613713813914014114214314414514614714814915015115215315415515615715815916016116216316416516616716816917017117217317417517617717817918018118218318418518618718818919019119219319419519619719819920020120220320420520620720820921021121221321421521621721821922022122222322422522622722822923023123223323423523623723823924024124224324424524624724824925025125225325425525625725825926026126226326426526626726826927027127227327427527627727827928028128228328428528628728828929029129229329429529629729829930030130230330430530630730830931031131231331431531631731831932032132232332432532632732832933033133233333433533633733833934034134234334434534634734834935035135235335435535635735835936036136236336436536636736836937037137237337437537637737837938038138238338438538638738838939039139239339439539639739839940040140240340440540640740840941041141241341441541641741841942042142242342442542642742842943043143243343443543643743843944044144244344444544644744844945045145245345445545645745845946046146246346446546646746846947047147247347447547647747847948048148248348448548648748848949049149249349449549649749849950050150250350450550650750850951051151251351451551651751851952052152252352452552652752852953053153253353453553653753853954054154254354454554654754854955055155255355455555655755855956056156256356456556656756856957057157257357457557657757857958058158258358458558658758858959059159259359459559659759859960060160260360460560660760860961061161261361461561661761861962062162262362462562662762862963063163263363463563663763863964064164264364464564664764864965065165265365465565665765865966066166266366466566666766866967067167267367467567667767867968068168268368468568668768868969069169269369469569669769869970070170270370470570670770870971071171271371471571671771871972072172272372472572672772872973073173273373473573673773873974074174274374474574674774874975075175275375475575675775875976076176276376476576676776876977077177277377477577677777877978078178278378478578678778878979079179279379479579679779879980080180280380480580680780880981081181281381481581681781881982082182282382482582682782882983083183283383483583683783883984084184284384484584684784884985085185285385485585685785885986086186286386486586686786886987087187287387487587687787887988088188288388488588688788888989089189289389489589689789889990090190290390490590690790890991091191291391491591691791891992092192292392492592692792892993093193293393493593693793893994094194294394494594694794894995095195295395495595695795895996096196296396496596696796896997097197297397497597697797897998098198298398498598698798898999099199299399499599699799899910001001100210031004100510061007100810091010101110121013101410151016101710181019102010211022102310241025102610271028102910301031103210331034103510361037103810391040104110421043104410451046104710481049105010511052105310541055105610571058105910601061106210631064106510661067106810691070107110721073107410751076107710781079108010811082108310841085108610871088108910901091109210931094109510961097109810991100110111021103110411051106110711081109111011111112111311141115111611171118111911201121112211231124112511261127112811291130113111321133113411351136113711381139114011411142114311441145114611471148114911501151115211531154115511561157115811591160116111621163116411651166116711681169117011711172117311741175117611771178117911801181118211831184118511861187118811891190119111921193119411951196119711981199120012011202120312041205120612071208120912101211121212131214121512161217121812191220122112221223122412251226122712281229123012311232123312341235123612371238123912401241124212431244124512461247124812491250125112521253125412551256125712581259126012611262126312641265126612671268126912701271127212731274127512761277127812791280128112821283128412851286128712881289129012911292129312941295129612971298129913001301130213031304130513061307130813091310131113121313131413151316131713181319132013211322132313241325132613271328132913301331133213331334133513361337133813391340134113421343134413451346134713481349135013511352135313541355135613571358135913601361136213631364136513661367136813691370137113721373137413751376137713781379138013811382138313841385138613871388138913901391139213931394139513961397139813991400140114021403140414051406140714081409141014111412141314141415141614171418141914201421142214231424142514261427142814291430143114321433143414351436143714381439144014411442144314441445144614471448144914501451145214531454145514561457145814591460146114621463146414651466146714681469147014711472147314741475147614771478147914801481148214831484148514861487148814891490149114921493149414951496149714981499150015011502150315041505150615071508150915101511151215131514151515161517151815191520152115221523152415251526152715281529153015311532153315341535153615371538153915401541154215431544154515461547154815491550155115521553155415551556155715581559156015611562156315641565156615671568156915701571157215731574157515761577157815791580158115821583158415851586158715881589159015911592159315941595159615971598159916001601160216031604160516061607160816091610161116121613161416151616161716181619162016211622162316241625162616271628162916301631163216331634163516361637163816391640164116421643164416451646164716481649165016511652165316541655165616571658165916601661166216631664166516661667166816691670167116721673167416751676167716781679168016811682168316841685168616871688168916901691169216931694169516961697169816991700170117021703170417051706170717081709171017111712171317141715171617171718171917201721172217231724172517261727172817291730173117321733173417351736173717381739174017411742174317441745174617471748174917501751175217531754175517561757175817591760176117621763176417651766176717681769177017711772177317741775177617771778177917801781178217831784178517861787178817891790179117921793179417951796179717981799180018011802180318041805180618071808180918101811181218131814181518161817181818191820182118221823182418251826182718281829183018311832183318341835183618371838183918401841184218431844184518461847184818491850185118521853185418551856185718581859186018611862186318641865186618671868186918701871187218731874187518761877187818791880188118821883188418851886188718881889189018911892189318941895189618971898189919001901190219031904190519061907190819091910191119121913191419151916191719181919192019211922192319241925192619271928192919301931193219331934193519361937193819391940194119421943194419451946194719481949195019511952195319541955195619571958195919601961196219631964196519661967196819691970197119721973197419751976197719781979198019811982198319841985198619871988198919901991199219931994199519961997199819992000200120022003200420052006200720082009201020112012201320142015201620172018201920202021202220232024202520262027202820292030203120322033203420352036203720382039204020412042204320442045204620472048204920502051205220532054205520562057205820592060206120622063206420652066206720682069207020712072207320742075207620772078207920802081208220832084208520862087208820892090209120922093209420952096209720982099210021012102210321042105210621072108210921102111211221132114211521162117211821192120212121222123212421252126212721282129213021312132213321342135213621372138213921402141214221432144214521462147214821492150215121522153215421552156215721582159216021612162216321642165216621672168216921702171217221732174217521762177217821792180218121822183218421852186218721882189219021912192219321942195219621972198219922002201220222032204220522062207220822092210221122122213221422152216221722182219222022212222222322242225222622272228222922302231223222332234223522362237223822392240224122422243224422452246224722482249225022512252225322542255225622572258225922602261226222632264226522662267226822692270227122722273227422752276227722782279228022812282228322842285228622872288228922902291229222932294229522962297229822992300230123022303230423052306230723082309231023112312231323142315231623172318231923202321232223232324232523262327232823292330233123322333233423352336233723382339234023412342234323442345234623472348234923502351235223532354235523562357235823592360236123622363236423652366236723682369237023712372237323742375237623772378237923802381238223832384238523862387238823892390239123922393239423952396239723982399240024012402240324042405240624072408240924102411241224132414241524162417241824192420242124222423242424252426242724282429243024312432243324342435243624372438243924402441244224432444244524462447244824492450245124522453245424552456245724582459246024612462246324642465246624672468246924702471247224732474247524762477247824792480248124822483248424852486248724882489249024912492249324942495249624972498249925002501250225032504250525062507250825092510251125122513251425152516251725182519252025212522252325242525252625272528252925302531253225332534253525362537253825392540254125422543254425452546254725482549255025512552255325542555255625572558255925602561256225632564256525662567256825692570257125722573257425752576257725782579258025812582258325842585258625872588258925902591259225932594259525962597259825992600260126022603260426052606260726082609261026112612261326142615261626172618261926202621262226232624262526262627262826292630263126322633263426352636263726382639264026412642264326442645264626472648264926502651265226532654265526562657265826592660266126622663266426652666266726682669267026712672267326742675267626772678267926802681268226832684268526862687268826892690269126922693269426952696269726982699270027012702270327042705270627072708270927102711271227132714271527162717271827192720272127222723272427252726272727282729273027312732273327342735273627372738273927402741274227432744274527462747274827492750275127522753275427552756275727582759276027612762276327642765276627672768276927702771277227732774277527762777277827792780278127822783278427852786278727882789279027912792279327942795279627972798279928002801280228032804280528062807280828092810281128122813281428152816281728182819282028212822282328242825282628272828282928302831283228332834283528362837283828392840284128422843284428452846284728482849285028512852285328542855285628572858285928602861286228632864286528662867286828692870287128722873287428752876287728782879288028812882288328842885288628872888288928902891289228932894289528962897289828992900290129022903290429052906290729082909291029112912291329142915291629172918291929202921292229232924292529262927292829292930293129322933293429352936293729382939294029412942294329442945294629472948294929502951295229532954295529562957295829592960296129622963296429652966296729682969297029712972297329742975297629772978297929802981298229832984298529862987298829892990299129922993299429952996299729982999300030013002300330043005300630073008300930103011301230133014301530163017301830193020302130223023302430253026302730283029303030313032303330343035303630373038303930403041304230433044304530463047304830493050305130523053305430553056305730583059306030613062306330643065306630673068306930703071307230733074307530763077307830793080308130823083308430853086308730883089309030913092309330943095309630973098309931003101310231033104310531063107310831093110311131123113311431153116311731183119312031213122312331243125312631273128312931303131313231333134313531363137313831393140314131423143314431453146314731483149315031513152315331543155315631573158315931603161316231633164316531663167316831693170317131723173317431753176317731783179318031813182318331843185318631873188318931903191319231933194319531963197319831993200320132023203320432053206320732083209321032113212321332143215321632173218321932203221322232233224322532263227322832293230323132323233323432353236323732383239324032413242324332443245324632473248324932503251325232533254325532563257325832593260326132623263326432653266326732683269327032713272327332743275327632773278327932803281328232833284328532863287328832893290329132923293329432953296329732983299330033013302330333043305330633073308330933103311331233133314331533163317331833193320332133223323332433253326332733283329333033313332333333343335333633373338333933403341334233433344334533463347334833493350335133523353335433553356335733583359336033613362336333643365336633673368336933703371337233733374337533763377337833793380338133823383338433853386338733883389339033913392339333943395339633973398339934003401340234033404340534063407340834093410341134123413341434153416341734183419342034213422342334243425342634273428342934303431343234333434343534363437343834393440344134423443344434453446344734483449345034513452345334543455345634573458345934603461346234633464346534663467346834693470347134723473347434753476
							<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>VL Workflow DAG</title>
<style>
:root {
  --bg: #0a0d12; --bg2: #12161c; --bg3: #1a1f27; --border: #2a3140;
  --text: #e6edf3; --text2: #8b949e; --blue: #58a6ff; --purple: #a371f7;
  --orange: #d29922; --green: #3fb950; --red: #f85149; --cyan: #39c5cf;
  --violet: #8b5cf6; --emerald: #10b981;
  --pink: #db61a2; --teal: #2dd4bf;
}
* { margin:0; padding:0; box-sizing:border-box; }
body { background:var(--bg); color:var(--text); font-family:'SF Mono','Fira Code',monospace; font-size:12px; overflow:hidden; height:100vh; display:flex; flex-direction:column; }

/* ===== Toolbar ===== */
.toolbar {
  background:var(--bg2); border-bottom:1px solid var(--border);
  display:flex; align-items:center; gap:6px; padding:4px 12px; height:36px; flex-shrink:0;
}
.toolbar .title { font-size:11px; font-weight:600; color:var(--text); margin-right:8px; }
.toolbar .sep { width:1px; height:18px; background:var(--border); }
.runbar {
  background:var(--bg2); border-bottom:1px solid var(--border);
  display:flex; align-items:center; gap:10px; padding:6px 12px; min-height:40px; flex-shrink:0;
}
.runbar-label { font-size:10px; color:var(--text2); text-transform:uppercase; letter-spacing:0.5px; }
.run-strip { display:flex; align-items:center; gap:6px; flex:1; overflow-x:auto; scrollbar-width:thin; }
.run-empty { font-size:10px; color:var(--text2); opacity:0.8; }
.run-chip {
  border:1px solid var(--border); background:var(--bg3); color:var(--text2);
  border-radius:999px; padding:4px 8px; cursor:pointer; font-size:10px;
  font-family:inherit; display:flex; align-items:center; gap:6px; white-space:nowrap;
}
.run-chip:hover { border-color:var(--blue); color:var(--text); }
.run-chip.active { border-color:var(--blue); color:var(--text); background:rgba(88,166,255,0.12); }
.run-chip-dot { width:7px; height:7px; border-radius:50%; background:var(--text2); flex-shrink:0; }
.run-chip-dot.running { background:var(--orange); box-shadow:0 0 8px rgba(210,153,34,0.5); }
.run-chip-dot.waiting { background:var(--cyan); box-shadow:0 0 8px rgba(57,197,207,0.5); }
.run-chip-dot.paused { background:var(--violet); box-shadow:0 0 8px rgba(139,92,246,0.5); }
.run-chip-dot.done { background:var(--green); }
.run-chip-dot.error { background:var(--red); }
.run-chip-dot.skipped { background:var(--text2); opacity:0.7; }
.run-chip-dot.idle { background:var(--text2); opacity:0.6; }
.run-chip-id { color:var(--text2); opacity:0.85; }
.run-meta {
  max-width:340px; font-size:10px; color:var(--text2);
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}
.eventbar {
  background:var(--bg2); border-bottom:1px solid var(--border);
  display:flex; flex-direction:column; min-height:120px; max-height:160px; flex-shrink:0;
}
.eventbar-head {
  display:flex; align-items:center; gap:8px; padding:6px 12px; border-bottom:1px solid rgba(255,255,255,0.05);
}
.eventbar-label { font-size:10px; color:var(--text2); text-transform:uppercase; letter-spacing:0.5px; }
.eventbar-spacer { flex:1; }
.event-list {
  flex:1; overflow:auto; padding:6px 12px; display:flex; flex-direction:column; gap:4px; scrollbar-width:thin;
}
.event-empty { font-size:10px; color:var(--text2); opacity:0.8; padding:4px 0; }
.event-item {
  display:grid; grid-template-columns:54px minmax(0, 1fr); gap:8px;
  padding:4px 0; border-bottom:1px dashed rgba(255,255,255,0.05);
}
.event-item:last-child { border-bottom:none; }
.event-time { font-size:9px; color:var(--text2); padding-top:1px; }
.event-body { min-width:0; }
.event-line {
  font-size:10px; color:var(--text); white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}
.event-line.level-warn { color:var(--orange); }
.event-line.level-error { color:var(--red); }
.event-line.level-success { color:var(--green); }
.event-type {
  display:inline-block; min-width:76px; color:var(--cyan); text-transform:uppercase;
  letter-spacing:0.4px; font-size:9px;
}
.event-detail {
  margin-top:2px; font-size:9px; color:var(--text2); white-space:pre-wrap;
  word-break:break-word; line-height:1.4; max-height:42px; overflow:hidden;
}
.tb-btn {
  background:var(--bg3); border:1px solid var(--border); color:var(--text2);
  padding:3px 10px; border-radius:4px; cursor:pointer; font-family:inherit; font-size:10px;
}
.tb-btn:hover { background:var(--border); color:var(--text); }
.tb-btn.primary { background:var(--green); color:#000; border-color:var(--green); font-weight:600; }
.tb-btn.primary:hover { opacity:0.9; }
.tb-btn.danger { border-color:var(--red); color:var(--red); }
.tb-btn.danger:hover { background:var(--red); color:#fff; }
.tb-btn:disabled { opacity:0.45; cursor:not-allowed; }
.tb-btn:disabled:hover { background:var(--bg3); color:var(--text2); }
body.compact-ui .toolbar { height:32px; padding:3px 10px; gap:5px; }
body.compact-ui .runbar { min-height:32px; padding:4px 10px; }
body.compact-ui .run-chip { padding:3px 7px; font-size:9px; }
body.compact-ui .run-meta, body.compact-ui #wfBreadcrumb, body.compact-ui #statusLabel { font-size:9px; }

/* ===== Canvas container ===== */
.editor-shell { flex:1; min-height:0; display:flex; }
.sidebar {
  width:230px; flex-shrink:0; background:var(--bg2); border-right:1px solid var(--border);
  display:flex; flex-direction:column; min-height:0;
}
body.compact-ui .sidebar { width:188px; }
body.types-collapsed .sidebar { display:none; }
.sidebar-head {
  padding:10px 12px 8px; border-bottom:1px solid rgba(255,255,255,0.05);
  display:flex; align-items:center; justify-content:space-between; gap:8px;
}
body.compact-ui .sidebar-head { padding:8px 10px 6px; }
.sidebar-title {
  font-size:10px; color:var(--text2); text-transform:uppercase; letter-spacing:0.55px;
}
.sidebar-summary {
  padding:10px 12px; display:grid; grid-template-columns:repeat(2, minmax(0, 1fr)); gap:6px;
  border-bottom:1px solid rgba(255,255,255,0.05);
}
.sidebar-stat {
  background:rgba(255,255,255,0.04); border:1px solid rgba(255,255,255,0.06);
  border-radius:6px; padding:6px 8px;
}
.sidebar-stat-label { font-size:8px; color:var(--text2); text-transform:uppercase; letter-spacing:0.45px; }
.sidebar-stat-value { margin-top:3px; font-size:12px; color:var(--text); font-weight:600; }
.type-list {
  flex:1; overflow:auto; padding:8px 10px 12px; display:flex; flex-direction:column; gap:6px;
  scrollbar-width:thin;
}
.type-row {
  width:100%; background:rgba(255,255,255,0.03); border:1px solid rgba(255,255,255,0.06);
  color:var(--text); border-radius:8px; padding:7px 8px; display:flex; align-items:center; gap:8px;
  text-align:left; font-family:inherit; cursor:pointer;
}
.type-row:hover { border-color:rgba(88,166,255,0.35); background:rgba(88,166,255,0.08); }
.type-row.empty { opacity:0.55; }
.type-icon {
  width:22px; height:22px; border-radius:6px; display:flex; align-items:center; justify-content:center;
  font-size:9px; font-weight:700; color:#fff; flex-shrink:0;
}
.type-meta { min-width:0; flex:1; }
.type-name { font-size:10px; color:var(--text); }
.type-caption { margin-top:2px; font-size:8px; color:var(--text2); text-transform:uppercase; letter-spacing:0.4px; }
.type-count {
  min-width:24px; text-align:center; padding:2px 6px; border-radius:999px;
  background:rgba(255,255,255,0.05); color:var(--text2); font-size:9px;
}
.canvas-wrap { flex:1; overflow:auto; position:relative; min-width:0; }
body.compact-ui .canvas-wrap { background:rgba(0,0,0,0.08); }
.canvas {
  position:relative; min-width:1800px; min-height:1200px;
  background-image:radial-gradient(circle, var(--border) 1px, transparent 1px);
  background-size:20px 20px;
}
body.compact-ui .canvas { min-width:1200px; min-height:900px; background-size:18px 18px; }

.empty-msg {
  position:absolute; top:50%; left:50%; transform:translate(-50%,-50%);
  color:var(--text2); font-size:14px; text-align:center;
}

/* ===== Nodes ===== */
.node {
  position:absolute; width:240px; background:var(--bg3); border:1px solid var(--border);
  border-radius:8px; cursor:grab; transition:border-color 0.2s, box-shadow 0.2s;
  z-index:2; user-select:none;
}
body.compact-ui .node { width:196px; }
body.compact-ui .node.minified { width:154px; }
.node:hover { border-color:var(--blue); box-shadow:0 0 12px rgba(88,166,255,0.15); }
.node.selected { border-color:var(--blue); box-shadow:0 0 20px rgba(88,166,255,0.25); z-index:8; }
body.compact-ui .node.selected { width:336px; }
.node.dragging { cursor:grabbing; z-index:10; opacity:0.92; box-shadow:0 0 24px rgba(88,166,255,0.3); }
.node-dismiss {
  position:absolute; top:6px; right:6px; width:18px; height:18px; border-radius:999px;
  border:1px solid rgba(255,255,255,0.12); background:rgba(10,13,18,0.85); color:var(--text2);
  display:flex; align-items:center; justify-content:center; font-size:11px; cursor:pointer; z-index:9;
}
.node-dismiss:hover { border-color:var(--blue); color:var(--text); background:rgba(88,166,255,0.16); }
body.compact-ui .node-dismiss { top:5px; right:5px; }

.node-header { display:flex; align-items:center; gap:8px; padding:8px 10px; border-bottom:1px solid var(--border); }
body.compact-ui .node-header { padding:6px 8px; gap:6px; }
body.compact-ui .node.minified .node-header { border-bottom:none; }
.node-icon { width:24px; height:24px; border-radius:5px; display:flex; align-items:center; justify-content:center; font-size:9px; font-weight:700; color:#fff; flex-shrink:0; }
body.compact-ui .node-icon { width:22px; height:22px; font-size:8px; }
.node-title { font-size:11px; font-weight:600; color:var(--text); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
body.compact-ui .node-title { font-size:10px; }
.node-meta-row { display:flex; align-items:center; gap:4px; flex-wrap:wrap; margin-top:2px; }
.node-type { font-size:9px; color:var(--text2); }
.node-type-pill, .node-subkind-pill, .node-state-pill {
  display:inline-flex; align-items:center; gap:4px; padding:1px 6px; border-radius:999px;
  font-size:8px; text-transform:uppercase; letter-spacing:0.4px; border:1px solid transparent;
}
body.compact-ui .node-type-pill, body.compact-ui .node-subkind-pill, body.compact-ui .node-state-pill { font-size:7px; padding:1px 5px; }
.node-type-pill { background:rgba(255,255,255,0.05); color:var(--text); border-color:rgba(255,255,255,0.08); }
.node-subkind-pill { background:rgba(88,166,255,0.12); color:var(--blue); border-color:rgba(88,166,255,0.18); }
.node-state-pill.status-running { background:rgba(210,153,34,0.15); color:var(--orange); border-color:rgba(210,153,34,0.25); }
.node-state-pill.status-waiting { background:rgba(57,197,207,0.15); color:var(--cyan); border-color:rgba(57,197,207,0.25); }
.node-state-pill.status-paused { background:rgba(139,92,246,0.15); color:var(--violet); border-color:rgba(139,92,246,0.25); }
.node-state-pill.status-done { background:rgba(63,185,80,0.15); color:var(--green); border-color:rgba(63,185,80,0.25); }
.node-state-pill.status-error { background:rgba(248,81,73,0.15); color:var(--red); border-color:rgba(248,81,73,0.25); }
.node-state-pill.status-skipped { background:rgba(139,148,158,0.14); color:var(--text2); border-color:rgba(139,148,158,0.2); }
.node-state-pill.status-idle { background:rgba(255,255,255,0.05); color:var(--text2); border-color:rgba(255,255,255,0.08); }
.node-desc { font-size:9px; color:var(--cyan); margin-top:1px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; max-width:170px; }
body.compact-ui .node-desc { display:none; }

.node-body { padding:6px 10px; font-size:10px; color:var(--text2); overflow:hidden; }
.node-body .field { white-space:nowrap; overflow:hidden; text-overflow:ellipsis; margin-bottom:1px; }
body.compact-ui .node-body { padding:4px 8px; font-size:9px; max-height:70px; }
body.compact-ui .node:not(.selected) .node-body { max-height:48px; }
body.compact-ui .node.selected .node-body { max-height:none; overflow:visible; }
body.compact-ui .node.minified .node-body,
body.compact-ui .node.minified .node-io,
body.compact-ui .node.minified .node-footer,
body.compact-ui .node.minified .port-in,
body.compact-ui .node.minified .port-out { display:none; }

/* Rich body styles */
.node-section { margin-bottom:5px; }
.node-section:last-child { margin-bottom:0; }
.node-section-title {
  font-size:8px; color:var(--text2); text-transform:uppercase;
  letter-spacing:0.5px; margin-bottom:2px; padding-bottom:2px;
  border-bottom:1px dashed var(--border);
}
.node-field { display:flex; align-items:flex-start; gap:4px; margin-bottom:2px; line-height:1.3; }
.node-field:last-child { margin-bottom:0; }
.node-label { color:var(--text2); min-width:36px; flex-shrink:0; font-size:9px; }
.node-value {
  color:var(--text); font-family:'SF Mono','Fira Code',monospace;
  font-size:9px; background:rgba(255,255,255,0.05); padding:1px 4px;
  border-radius:2px; word-break:break-all; max-width:160px;
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
}
.node.selected .node-title,
.node.selected .node-desc,
.node.selected .node-value,
.node.selected .node-doc-tag,
.node.selected .node-io-key,
.node.selected .node-io-value,
.node.selected .field {
  max-width:none;
  white-space:pre-wrap;
  overflow:visible;
  text-overflow:clip;
  word-break:break-word;
}
.node-value.var { color:var(--cyan); }
.node-value.ref { color:var(--purple); }
.node-value.file { color:var(--orange); }
.node-io-list { display:flex; flex-direction:column; gap:2px; }
.node-io-item {
  display:flex; align-items:center; gap:4px; font-size:9px;
  background:rgba(255,255,255,0.04); padding:2px 4px; border-radius:2px;
}
.node.selected .node-io-item,
.node.selected .node-field { align-items:flex-start; }
.node-io-key { color:var(--text); font-family:'SF Mono','Fira Code',monospace; min-width:44px; }
.node-io-key.is-var { color:var(--cyan); }
.node-io-key.is-file { color:var(--orange); }
.node-io-arrow { color:var(--text2); }
.node-io-value { color:var(--cyan); font-family:'SF Mono','Fira Code',monospace; }
.node-docs-list { display:flex; flex-wrap:wrap; gap:3px; }
.node-doc-tag {
  background:rgba(210,153,34,0.2); color:var(--orange);
  padding:1px 4px; border-radius:2px; font-size:8px;
  font-family:'SF Mono','Fira Code',monospace;
  max-width:140px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
}
.node-condition {
  background:rgba(163,113,247,0.15); color:var(--purple);
  padding:2px 6px; border-radius:2px; font-size:9px;
  font-family:'SF Mono','Fira Code',monospace; margin-top:4px;
}
.node-footer {
  padding:4px 8px; border-top:1px dashed var(--border);
  font-size:9px; color:var(--purple);
}
body.compact-ui .node:not(.selected) .node-io,
body.compact-ui .node:not(.selected) .node-footer { display:none; }

/* I/O audit badges */
.node-io { display:flex; gap:3px; flex-wrap:wrap; padding:4px 10px 6px; border-top:1px solid var(--border); }
.io-badge { font-size:8px; padding:1px 5px; border-radius:3px; font-family:inherit; }
.io-badge.var-in { background:rgba(88,166,255,0.15); color:var(--blue); }
.io-badge.var-out { background:rgba(63,185,80,0.15); color:var(--green); }
.io-badge.doc { background:rgba(210,153,34,0.15); color:var(--orange); }
.io-badge.file { background:rgba(163,113,247,0.15); color:var(--purple); }

/* Node type colors — original 11 */
.type-LLM .node-icon { background:linear-gradient(135deg, #6366f1, #8b5cf6); }
.type-Service .node-icon { background:linear-gradient(135deg, var(--green), #2ea043); }
.type-API .node-icon { background:linear-gradient(135deg, var(--cyan), #1a7f8a); }
.type-Write .node-icon { background:linear-gradient(135deg, var(--orange), #b87f12); }
.type-Set .node-icon { background:linear-gradient(135deg, var(--blue), #1f6feb); }
.type-Branch .node-icon { background:linear-gradient(135deg, var(--purple), #8957e5); }
.type-Loop .node-icon { background:linear-gradient(135deg, #db61a2, #bf4b8a); }
.type-Stop .node-icon { background:linear-gradient(135deg, var(--red), #da3633); }
.type-Component .node-icon { background:linear-gradient(135deg, #2dd4bf, #14b8a6); }
.type-Pause .node-icon { background:linear-gradient(135deg, var(--violet), #7c3aed); }
.type-Fork .node-icon { background:linear-gradient(135deg, var(--emerald), #059669); }
.type-Subflow .node-icon { background:linear-gradient(135deg, #14b8a6, #2563eb); }
/* New in Spec 3.16 */
.type-Download .node-icon { background:linear-gradient(135deg, #38bdf8, #0284c7); }
.type-Unzip .node-icon { background:linear-gradient(135deg, #facc15, #ca8a04); }

/* Type accent bar */
.node::before {
  content:''; position:absolute; left:0; top:8px; bottom:8px; width:3px;
  border-radius:0 2px 2px 0;
}
.type-LLM::before { background:#6366f1; }
.type-Service::before { background:var(--green); }
.type-API::before { background:var(--cyan); }
.type-Write::before { background:var(--orange); }
.type-Set::before { background:var(--blue); }
.type-Branch::before { background:var(--purple); }
.type-Loop::before { background:#db61a2; }
.type-Stop::before { background:var(--red); }
.type-Component::before { background:#2dd4bf; }
.type-Pause::before { background:var(--violet); }
.type-Fork::before { background:var(--emerald); }
.type-Subflow::before { background:var(--cyan); }
/* New in Spec 3.16 */
.type-Download::before { background:#38bdf8; }
.type-Unzip::before { background:#facc15; }
.node[data-custom-type="true"] .node-icon { background:linear-gradient(135deg, var(--cyan), var(--teal)); }
.node[data-custom-type="true"]::before { background:var(--cyan); }

/* Status overlays */
.node.status-running { border-color:var(--orange); animation:pulse-border 1.5s ease-in-out infinite; }
.node.status-waiting { border-color:var(--cyan); animation:pulse-border-cyan 1.5s ease-in-out infinite; }
.node.status-done { border-color:var(--green); }
.node.status-error { border-color:var(--red); }
.node.status-paused { border-color:var(--violet); animation:pulse-border-purple 1.5s ease-in-out infinite; }
.node.status-skipped { border-color:var(--text2); opacity:0.5; }

.status-badge { position:absolute; top:-6px; right:-6px; width:16px; height:16px; border-radius:50%; font-size:9px; display:flex; align-items:center; justify-content:center; z-index:5; }
.status-badge.running { background:var(--orange); animation:spin 1s linear infinite; }
.status-badge.waiting { background:var(--cyan); animation:pulse-badge-cyan 1.2s ease-in-out infinite; }
.status-badge.done { background:var(--green); }
.status-badge.error { background:var(--red); }
.status-badge.paused { background:var(--violet); animation:pulse-badge-purple 2s ease-in-out infinite; }
.status-badge.skipped { background:var(--text2); opacity:0.5; }

@keyframes pulse-border { 0%,100% { box-shadow:0 0 8px rgba(210,153,34,0.3); } 50% { box-shadow:0 0 20px rgba(210,153,34,0.6); } }
@keyframes pulse-border-cyan { 0%,100% { box-shadow:0 0 8px rgba(57,197,207,0.3); } 50% { box-shadow:0 0 20px rgba(57,197,207,0.6); } }
@keyframes pulse-border-purple { 0%,100% { box-shadow:0 0 8px rgba(139,92,246,0.3); } 50% { box-shadow:0 0 20px rgba(139,92,246,0.6); } }
@keyframes pulse-badge-cyan { 0%,100% { opacity:1; transform:scale(1); } 50% { opacity:0.55; transform:scale(1.08); } }
@keyframes pulse-badge-purple { 0%,100% { opacity:1; } 50% { opacity:0.4; } }
@keyframes spin { to { transform:rotate(360deg); } }

/* ===== Ports ===== */
.port { position:absolute; width:8px; height:8px; border-radius:50%; background:var(--border); border:1px solid var(--text2); z-index:3; }
.port-in { top:-4px; left:50%; transform:translateX(-50%); }
.port-out { bottom:-4px; left:50%; transform:translateX(-50%); }

/* ===== Connections (SVG) ===== */
.connections { position:absolute; top:0; left:0; width:100%; height:100%; pointer-events:none; z-index:1; }
.conn-path { fill:none; stroke-width:2; }
.conn-path.serial { stroke:var(--blue); }
.conn-path.parallel { stroke:var(--purple); stroke-dasharray:6 3; }
.conn-path.branch-case { stroke:var(--orange); stroke-dasharray:4 2 1 2; }
.conn-label { fill:var(--text2); font-size:9px; font-family:inherit; }
svg defs marker path { fill:var(--blue); }

/* ===== Legend ===== */
.legend {
  position:fixed; bottom:12px; left:246px; background:var(--bg2); border:1px solid var(--border);
  border-radius:6px; padding:8px 12px; font-size:9px; color:var(--text2); display:flex; gap:12px; z-index:10;
}
body.compact-ui .legend { padding:6px 10px; font-size:8px; }
body.types-collapsed .legend { left:12px; }
body.map-hidden .legend,
body.map-hidden .minimap { display:none !important; }
.legend-item { display:flex; align-items:center; gap:4px; }
.legend-line { width:20px; height:2px; }
.legend-line.serial { background:var(--blue); }
.legend-line.parallel { background:var(--purple); background:repeating-linear-gradient(90deg, var(--purple) 0 6px, transparent 6px 9px); }
.legend-line.branch { background:var(--orange); }

/* ===== Minimap ===== */
.minimap {
  position:fixed; bottom:12px; right:12px; width:180px; height:100px;
  background:var(--bg2); border:1px solid var(--border); border-radius:6px;
  overflow:hidden; z-index:10; cursor:crosshair;
}
.minimap canvas { width:100%; height:100%; }

/* ===== Toast ===== */
.toast {
  position:fixed; top:48px; left:50%; transform:translateX(-50%);
  background:var(--bg3); border:1px solid var(--border); border-radius:6px;
  padding:6px 16px; font-size:11px; color:var(--text); z-index:100;
  opacity:0; transition:opacity 0.3s;
}
.toast.show { opacity:1; }

/* ===== Context Menu ===== */
.ctx-menu {
  position:fixed; background:var(--bg2); border:1px solid var(--border);
  border-radius:6px; padding:4px 0; z-index:200; min-width:180px;
  box-shadow:0 4px 16px rgba(0,0,0,0.5); display:none;
}
.ctx-menu.show { display:block; }
.ctx-item {
  padding:6px 14px; font-size:11px; color:var(--text); cursor:pointer;
  display:flex; align-items:center; gap:8px; font-family:inherit;
}
.ctx-item:hover { background:var(--bg3); }
.ctx-item.disabled { color:var(--text2); cursor:default; opacity:0.5; }
.ctx-item.disabled:hover { background:transparent; }
.ctx-sep { height:1px; background:var(--border); margin:4px 0; }
.ctx-item .ctx-icon { font-size:12px; width:16px; text-align:center; }
.ctx-item .ctx-label { flex:1; }
.ctx-item .ctx-hint { font-size:9px; color:var(--text2); }

/* ===== Node Editor Modal ===== */
.modal-overlay {
  position:fixed; top:0; left:0; width:100%; height:100%;
  background:rgba(0,0,0,0.6); z-index:300; display:none;
  align-items:center; justify-content:center;
}
.modal-overlay.show { display:flex; }
.modal {
  background:var(--bg2); border:1px solid var(--border); border-radius:10px;
  width:520px; max-height:80vh; display:flex; flex-direction:column;
  box-shadow:0 8px 32px rgba(0,0,0,0.5);
}
.modal-header {
  padding:12px 16px; border-bottom:1px solid var(--border);
  display:flex; align-items:center; gap:8px;
}
.modal-header .modal-title { font-size:12px; font-weight:600; color:var(--text); flex:1; }
.modal-header .modal-close {
  background:none; border:none; color:var(--text2); font-size:16px;
  cursor:pointer; padding:2px 6px; border-radius:4px;
}
.modal-header .modal-close:hover { background:var(--bg3); color:var(--text); }
.modal-body { padding:12px 16px; overflow-y:auto; flex:1; }
.modal-footer {
  padding:10px 16px; border-top:1px solid var(--border);
  display:flex; justify-content:flex-end; gap:8px;
}
.modal-footer .tb-btn { padding:5px 14px; font-size:11px; }

/* Editor fields */
.editor-field { margin-bottom:10px; }
.editor-field:last-child { margin-bottom:0; }
.editor-label { font-size:9px; color:var(--text2); text-transform:uppercase; letter-spacing:0.5px; margin-bottom:4px; }
.editor-input {
  width:100%; background:var(--bg); border:1px solid var(--border);
  color:var(--text); font-family:'SF Mono','Fira Code',monospace; font-size:11px;
  padding:6px 8px; border-radius:4px; resize:vertical;
}
.editor-input:focus { outline:none; border-color:var(--blue); }
.editor-json {
  width:100%; background:var(--bg); border:1px solid var(--border);
  color:var(--text); font-family:'SF Mono','Fira Code',monospace; font-size:10px;
  padding:8px; border-radius:4px; resize:vertical; min-height:120px;
  line-height:1.5;
}
.editor-json:focus { outline:none; border-color:var(--blue); }
.editor-hint { font-size:9px; color:var(--text2); margin-top:3px; }
.editor-error { font-size:9px; color:var(--red); margin-top:3px; display:none; }

/* Node status info in editor */
.editor-status {
  display:flex; align-items:center; gap:6px; padding:6px 8px;
  background:rgba(255,255,255,0.03); border-radius:4px; margin-bottom:10px;
}
.editor-status-dot { width:8px; height:8px; border-radius:50%; }
.editor-status-dot.done { background:var(--green); }
.editor-status-dot.running { background:var(--orange); }
.editor-status-dot.waiting { background:var(--cyan); }
.editor-status-dot.error { background:var(--red); }
.editor-status-dot.paused { background:var(--violet); }
.editor-status-dot.skipped { background:var(--text2); }
.editor-status-dot.pending { background:var(--border); }
.editor-status-text { font-size:10px; color:var(--text2); }

/* Pause button (amber) */
.tb-btn.warn { border-color:var(--orange); color:var(--orange); }
.tb-btn.warn:hover { background:var(--orange); color:#000; }
body.events-collapsed .eventbar { display:none; }
body.compact-ui .eventbar { min-height:88px; max-height:112px; }
body.compact-ui .eventbar-head { padding:5px 10px; }
body.compact-ui .event-list { padding:5px 10px; }

@media (max-width: 980px) {
  .sidebar { width:180px; }
  .legend { left:196px; }
}
</style>
</head>
<body>

<!-- Toolbar -->
<div class="toolbar">
  <button class="tb-btn" onclick="navigateBack()" title="Return to parent workflow" id="backBtn" style="display:none;">&larr; Back</button>
  <button class="tb-btn" onclick="openSelectedSubflow()" title="Open selected subflow workflow" id="openChildBtn" style="display:none;">&#10550; Open Child</button>
  <div class="sep" id="navSep" style="display:none;"></div>
  <span class="title" id="wfTitle">VL Workflow DAG</span>
  <span id="wfBreadcrumb" style="font-size:10px;color:var(--text2);max-width:360px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;"></span>
  <div class="sep"></div>
  <button class="tb-btn" onclick="autoLayout();render();" title="Re-arrange nodes">&#8634; Layout</button>
  <button class="tb-btn" onclick="downloadPNG()" title="Export as PNG image">&#128247; PNG</button>
  <div class="sep"></div>
  <button class="tb-btn" onclick="exportJSON()" title="Export workflow JSON">&#8615; Export</button>
  <button class="tb-btn" onclick="importJSON()" title="Import workflow JSON">&#8613; Import</button>
  <button class="tb-btn" onclick="toggleCompactMode()" title="Toggle compact embedded mode" id="compactBtn">Compact</button>
  <button class="tb-btn" onclick="toggleSimplifyGraph()" title="Compress layout without hiding logic nodes" id="coreBtn">Dense</button>
  <button class="tb-btn" onclick="toggleTypePanel()" title="Show or hide node types" id="typesBtn">Types</button>
  <button class="tb-btn" onclick="toggleEventPanel()" title="Show or hide run events" id="eventsBtn">Events</button>
  <button class="tb-btn" onclick="toggleMapPanel()" title="Show or hide minimap and legend" id="mapBtn">Map</button>
  <div class="sep"></div>
  <button class="tb-btn primary" onclick="runWorkflow()" title="Execute this workflow" id="runBtn">&#9654; Run</button>
  <button class="tb-btn warn" onclick="pauseExecution()" title="Pause execution" id="pauseBtn" style="display:none;">&#9208; Pause</button>
  <button class="tb-btn" onclick="resumeExecution()" title="Resume execution" id="resumeBtn" style="display:none;">&#9654; Resume</button>
  <button class="tb-btn danger" onclick="stopExecution()" title="Stop execution" id="stopBtn" style="display:none;">&#9632; Stop</button>
  <div style="flex:1;"></div>
  <span id="statusLabel" style="font-size:10px;color:var(--text2);"></span>
</div>
<div class="runbar">
  <span class="runbar-label">Runs</span>
  <div class="run-strip" id="runStrip"><span class="run-empty">No runs yet</span></div>
  <div class="run-meta" id="runMeta">Selected run: none</div>
</div>
<div class="eventbar">
  <div class="eventbar-head">
    <span class="eventbar-label">Selected Run Events</span>
    <div class="eventbar-spacer"></div>
    <button class="tb-btn" onclick="toggleEventPanel()" title="Collapse this panel">Hide</button>
    <button class="tb-btn" onclick="clearSelectedRunEvents()" title="Clear selected run event log">Clear</button>
  </div>
  <div class="event-list" id="eventList"><div class="event-empty">Start or select a run to inspect its event stream.</div></div>
</div>

<!-- Canvas -->
<div class="editor-shell">
  <aside class="sidebar">
    <div class="sidebar-head">
      <span class="sidebar-title" id="typePanelTitle">Node Types</span>
      <div style="display:flex;align-items:center;gap:6px;">
        <button class="tb-btn" onclick="toggleTypeFilter()" title="Switch between used and all node types" id="typeFilterBtn">Used</button>
        <button class="tb-btn" onclick="toggleTypePanel()" title="Collapse this panel">Hide</button>
        <span style="font-size:9px;color:var(--text2);" id="typePanelBadge">0 types</span>
      </div>
    </div>
    <div class="sidebar-summary" id="typeSummary">
      <div class="sidebar-stat"><div class="sidebar-stat-label">Supported</div><div class="sidebar-stat-value">0</div></div>
      <div class="sidebar-stat"><div class="sidebar-stat-label">Used</div><div class="sidebar-stat-value">0</div></div>
      <div class="sidebar-stat"><div class="sidebar-stat-label">Shown</div><div class="sidebar-stat-value">0</div></div>
      <div class="sidebar-stat"><div class="sidebar-stat-label">Nodes</div><div class="sidebar-stat-value">0</div></div>
    </div>
    <div class="type-list" id="typeList"></div>
  </aside>
  <div class="canvas-wrap" id="canvasWrap">
    <div class="empty-msg" id="emptyMsg">No workflow loaded.<br>Select a workflow to visualize.</div>
    <div class="canvas" id="canvas" style="display:none;">
      <svg class="connections" id="connSvg">
        <defs>
          <marker id="arrowSerial" markerWidth="8" markerHeight="6" refX="7" refY="3" orient="auto">
            <path d="M 0 0 L 8 3 L 0 6 Z" fill="var(--blue)"/>
          </marker>
          <marker id="arrowParallel" markerWidth="8" markerHeight="6" refX="7" refY="3" orient="auto">
            <path d="M 0 0 L 8 3 L 0 6 Z" fill="var(--purple)"/>
          </marker>
          <marker id="arrowBranch" markerWidth="8" markerHeight="6" refX="7" refY="3" orient="auto">
            <path d="M 0 0 L 8 3 L 0 6 Z" fill="var(--orange)"/>
          </marker>
        </defs>
      </svg>
      <div class="nodes-layer" id="nodesLayer"></div>
    </div>
  </div>
</div>

<!-- Legend -->
<div class="legend" id="legend" style="display:none;">
  <div class="legend-item"><div class="legend-line serial"></div>Serial (next)</div>
  <div class="legend-item"><div class="legend-line parallel"></div>Parallel (children)</div>
  <div class="legend-item"><div class="legend-line branch"></div>Branch (case)</div>
</div>

<!-- Minimap -->
<div class="minimap" id="minimap" style="display:none;">
  <canvas id="minimapCanvas"></canvas>
</div>

<!-- Toast -->
<div class="toast" id="toast"></div>

<!-- Context Menu -->
<div class="ctx-menu" id="ctxMenu">
  <div class="ctx-item" id="ctxOpenChild" onclick="ctxOpenChildWorkflow()">
    <span class="ctx-icon">&#10550;</span><span class="ctx-label">Open child workflow</span>
  </div>
  <div class="ctx-sep" id="ctxOpenChildSep"></div>
  <div class="ctx-item" id="ctxRerun" onclick="ctxRerunFromHere()">
    <span class="ctx-icon">&#9654;</span><span class="ctx-label">Re-run from here</span>
  </div>
  <div class="ctx-item" id="ctxEditRerun" onclick="ctxEditAndRerun()">
    <span class="ctx-icon">&#9998;</span><span class="ctx-label">Edit inputs &amp; re-run</span>
  </div>
  <div class="ctx-sep"></div>
  <div class="ctx-item" onclick="ctxViewDetails()">
    <span class="ctx-icon">&#128269;</span><span class="ctx-label">View details</span>
  </div>
  <div class="ctx-item" onclick="ctxCopyId()">
    <span class="ctx-icon">&#128203;</span><span class="ctx-label">Copy node ID</span><span class="ctx-hint" id="ctxNodeIdHint"></span>
  </div>
</div>

<!-- Node Editor Modal -->
<div class="modal-overlay" id="editorOverlay">
  <div class="modal">
    <div class="modal-header">
      <span class="modal-title" id="editorTitle">Edit Node Inputs</span>
      <button class="modal-close" onclick="closeEditor()">&times;</button>
    </div>
    <div class="modal-body" id="editorBody"></div>
    <div class="modal-footer">
      <button class="tb-btn" onclick="closeEditor()">Cancel</button>
      <button class="tb-btn primary" onclick="editorRerun()" id="editorRerunBtn">&#9654; Re-run from here</button>
    </div>
  </div>
</div>

<!-- Hidden file input for import -->
<input type="file" id="importInput" accept=".json" style="display:none">

<script>
// ===== VL Workflow Editor v2.0 (Spec 3.16) =====
// Canonical source: vl-workflow-engine/ui/workflow-editor.html
// Consumed by: VL-Code, VLCode-Lite, VLClaw

const RESERVED_NEXT = new Set(['RETURN', 'BREAK']);

const NODE_ICONS = {
  LLM:'AI', Service:'SV', API:'AP', Component:'CP',
  Set:'=', Write:'WR', Branch:'BR', Loop:'LP', Stop:'ST',
  Pause:'\u23F8', Fork:'FK', Tool:'TL', Subflow:'SF',
  Download:'DL', Unzip:'UZ'
};
const TYPE_COLORS = {
  LLM:'#6366f1', Service:'#3fb950', API:'#39c5cf', Write:'#d29922',
  Set:'#58a6ff', Branch:'#a371f7', Loop:'#db61a2', Stop:'#f85149',
  Component:'#2dd4bf', Pause:'#8b5cf6', Fork:'#10b981', Tool:'#f97316', Subflow:'#39c5cf',
  Download:'#38bdf8', Unzip:'#facc15'
};

const KNOWN_TYPES = ['LLM','Service','API','Component','Set','Write','Branch','Loop','Stop','Pause','Fork','Tool','Subflow','Download','Unzip'];
const UI_PREFS_KEY = 'workflow_editor_ui_v2';
const MINIFY_TYPES = new Set();
const HIDEABLE_TYPES = new Set();

let state = { nodes: [], connections: [], selectedNodeId: null, registry: {}, dragging: null };
let _currentWorkflowJson = null;
let _workflowRef = null;
let _eventSource = null;
let _lastCheckpoint = null;   // latest checkpoint from engine
let _currentRunID = null;     // active run ID
let _ctxTargetNode = null;    // node targeted by context menu
let _editorNode = null;       // node being edited in modal
let _runSessions = new Map();
let _selectedRunID = null;
let _runSeq = 0;
let _runTokenSeq = 0;
let _activeRunControllers = new Map();
let _workflowNavStack = [];
let _uiState = {
  compact: true,
  simplifyGraph: true,
  showTypes: true,
  showEvents: false,
  showAllTypes: false,
  showMap: false,
};

// ===== Utilities =====
function $(id) { return document.getElementById(id); }
function esc(s) { return s ? String(s).replace(/&/g,'&amp;').replace(/</g,'&lt;').replace(/>/g,'&gt;') : ''; }
function trunc(s, n) { return s && s.length > n ? s.substring(0, n) + '\u2026' : (s || ''); }
function nodeText(value, n = 24, expanded = false) {
  if (value == null) return '';
  let text = '';
  if (typeof value === 'string') {
    text = value;
  } else {
    try {
      text = JSON.stringify(value, expanded ? null : 0, expanded ? 2 : 0);
    } catch {
      text = String(value);
    }
  }
  return expanded ? text : trunc(text, n);
}
function resolveDocName(docId) { return state.registry?.docs?.[docId] || `Doc #${docId}`; }
function normalizeType(type) { return String(type || '').replace(/_+$/, ''); }
function getTypeIcon(type) { return NODE_ICONS[type] || String(type || '?').substring(0, 2).toUpperCase(); }
function getTypeColor(type) { return TYPE_COLORS[type] || '#2dd4bf'; }
function resolveToolStepName(step = {}) {
  const direct = step.tool || step.toolName || step.name || '';
  if (direct) return String(direct);
  const parts = String(step.id || '').split('_');
  if (parts[0] === 'Tool') parts.shift();
  if (parts.length > 1 && /^\d+$/.test(parts[0])) parts.shift();
  return parts.join('_') || '';
}
function isWorkflowRunToolName(name) {
  return String(name || '').trim().toLowerCase() === 'workflowrun';
}
function isSubflowStep(step = {}) {
  const explicit = normalizeType(step.type || '');
  if (explicit === 'Subflow') return true;
  const prefix = normalizeType(String(step.id || '').split('_')[0]);
  if (prefix === 'Subflow') return true;
  return prefix === 'Tool' && isWorkflowRunToolName(resolveToolStepName(step));
}
function getNodeStateLabel(status) {
  switch (status) {
    case 'running': return 'Running';
    case 'waiting': return 'Waiting';
    case 'paused': return 'Paused';
    case 'done': return 'Done';
    case 'error': return 'Error';
    case 'skipped': return 'Skipped';
    default: return 'Idle';
  }
}
function getNodeKindLabel(type, data = {}) {
  if (type === 'Subflow') {
    const mode = data.mode || data.executionMode || 'sync';
    return `mode:${mode}`;
  }
  if (type === 'Tool') {
    const toolName = resolveToolStepName(data);
    return toolName ? `tool:${toolName}` : '';
  }
  return '';
}
function normalizeCheckpoint(cp) {
  if (!cp || typeof cp !== 'object') return null;
  if (cp.checkpoint && typeof cp.checkpoint === 'object') return normalizeCheckpoint(cp.checkpoint);
  return cp.currentStepID || cp.variables || cp.completedSteps ? cp : null;
}
function cloneJSON(value) {
  if (value == null) return value;
  if (typeof structuredClone === 'function') return structuredClone(value);
  return JSON.parse(JSON.stringify(value));
}
function normalizeWorkflowRef(raw) {
  const value = String(raw || '').trim();
  if (!value) return '';
  return value.replace(/\.json$/i, '');
}
function summarizePathLabel(value) {
  const text = String(value || '').trim();
  if (!text) return '';
  const clean = text.replace(/\\/g, '/').replace(/\.json$/i, '');
  const parts = clean.split('/').filter(Boolean);
  return parts.length ? parts[parts.length - 1] : clean;
}
function isDynamicExpression(value) {
  const text = String(value || '').trim();
  if (!text) return false;
  return text.startsWith('=') || text.includes('$');
}
function resolveSubflowTarget(step = {}) {
  const workflowRef = step.workflow_path || step.workflowPath || step.path || step.workflow || '';
  const workDir = step.work_dir || step.workDir || step.base_dir || step.baseDir || step.subspace || '';
  if (!workflowRef) return { ok: false, reason: 'Subflow node has no workflow_path' };
  if (isDynamicExpression(workflowRef)) {
    return { ok: false, reason: 'Dynamic workflow_path cannot be opened statically' };
  }
  return {
    ok: true,
    ref: String(workflowRef).trim(),
    label: summarizePathLabel(workflowRef),
    workDir: isDynamicExpression(workDir) ? '' : String(workDir || '').trim(),
  };
}

function saveUIPreferences() {
  try { localStorage.setItem(UI_PREFS_KEY, JSON.stringify(_uiState)); } catch {}
}

function loadUIPreferences() {
  try {
    const raw = localStorage.getItem(UI_PREFS_KEY);
    if (!raw) return;
    const parsed = JSON.parse(raw);
    if (parsed && typeof parsed === 'object') {
      _uiState = {
        ..._uiState,
        ...parsed,
      };
    }
  } catch {}
}

function applyUIState() {
  document.body.classList.toggle('compact-ui', !!_uiState.compact);
  document.body.classList.toggle('types-collapsed', !_uiState.showTypes);
  document.body.classList.toggle('events-collapsed', !_uiState.showEvents);
  document.body.classList.toggle('map-hidden', !_uiState.showMap);

  const compactBtn = $('compactBtn');
  const coreBtn = $('coreBtn');
  const typesBtn = $('typesBtn');
  const eventsBtn = $('eventsBtn');
  const mapBtn = $('mapBtn');
  const typeFilterBtn = $('typeFilterBtn');
  if (compactBtn) compactBtn.textContent = _uiState.compact ? 'Compact On' : 'Compact';
  if (coreBtn) coreBtn.textContent = _uiState.simplifyGraph ? 'Dense On' : 'Dense';
  if (typesBtn) typesBtn.textContent = _uiState.showTypes ? 'Types On' : 'Types';
  if (eventsBtn) eventsBtn.textContent = _uiState.showEvents ? 'Events On' : 'Events';
  if (mapBtn) mapBtn.textContent = _uiState.showMap ? 'Map On' : 'Map';
  if (typeFilterBtn) typeFilterBtn.textContent = _uiState.showAllTypes ? 'All' : 'Used';
}

function toggleCompactMode() {
  _uiState.compact = !_uiState.compact;
  saveUIPreferences();
  applyUIState();
  autoLayout();
  render();
}

function toggleSimplifyGraph() {
  _uiState.simplifyGraph = !_uiState.simplifyGraph;
  saveUIPreferences();
  applyUIState();
  autoLayout();
  render();
}

function toggleTypePanel() {
  _uiState.showTypes = !_uiState.showTypes;
  saveUIPreferences();
  applyUIState();
  render();
}

function toggleEventPanel() {
  _uiState.showEvents = !_uiState.showEvents;
  saveUIPreferences();
  applyUIState();
}

function toggleMapPanel() {
  _uiState.showMap = !_uiState.showMap;
  saveUIPreferences();
  applyUIState();
}

function toggleTypeFilter() {
  _uiState.showAllTypes = !_uiState.showAllTypes;
  saveUIPreferences();
  applyUIState();
  renderTypeSidebar();
}

function toast(msg) {
  const t = $('toast');
  t.textContent = msg;
  t.classList.add('show');
  setTimeout(() => t.classList.remove('show'), 2500);
}

function listRunSessions() {
  return Array.from(_runSessions.values()).sort((a, b) => (b.updatedAt || 0) - (a.updatedAt || 0));
}

function getSelectedRunSession() {
  return _selectedRunID ? _runSessions.get(_selectedRunID) || null : null;
}

function isPendingRunID(runID) {
  return String(runID || '').startsWith('pending:');
}

function isClientRunToken(runID) {
  return String(runID || '').startsWith('client:');
}

function isTransientRunRef(runID) {
  return isPendingRunID(runID) || isClientRunToken(runID);
}

function makeClientRunToken() {
  _runTokenSeq += 1;
  return `client:${Date.now()}:${_runTokenSeq}`;
}

function shortRunID(runID) {
  const text = String(runID || '');
  if (!text) return 'unknown';
  if (isPendingRunID(text)) return 'pending';
  if (isClientRunToken(text)) return text.split(':').pop() || 'client';
  return text.length > 12 ? text.slice(-8) : text;
}

function formatEventTime(ts) {
  const date = ts ? new Date(ts) : new Date();
  if (Number.isNaN(date.getTime())) return '--:--:--';
  return date.toLocaleTimeString([], { hour12: false });
}

function previewValue(value, maxLen = 720) {
  if (value == null || value === '') return '';
  let text = '';
  if (typeof value === 'string') {
    text = value;
  } else {
    try {
      text = JSON.stringify(value, null, 2);
    } catch {
      text = String(value);
    }
  }
  return text.length > maxLen ? text.slice(0, maxLen) + '\u2026' : text;
}

function summarizeRunEvent(evt) {
  const payload = evt?.payload && typeof evt.payload === 'object' ? evt.payload : null;
  const data = payload ? { ...payload, ...evt } : (evt || {});
  const evtType = data.type || 'event';
  const nodeRef = data.nodeId || data.stepID || data.currentStepID || '';
  const toolRef = data.name || data.tool || data.stepId || nodeRef || 'tool';
  const info = { level: 'info', summary: evtType, detail: '' };

  switch (evtType) {
    case 'workflow_start':
      info.summary = `Workflow started${data.name ? `: ${data.name}` : ''}`;
      info.detail = previewValue(data.params || data.resumedFrom || data.payload || '');
      break;
    case 'workflow_done':
    case 'done':
      info.level = 'success';
      info.summary = `Workflow completed${data.stop_id ? ` @ ${data.stop_id}` : ''}`;
      info.detail = previewValue(data.filesWritten || data.payload || '');
      break;
    case 'workflow_failed':
    case 'error':
      info.level = 'error';
      info.summary = `Workflow failed${nodeRef ? ` @ ${nodeRef}` : ''}`;
      info.detail = previewValue(data.error || data.payload || '');
      break;
    case 'checkpoint':
      info.summary = `Checkpoint${data.checkpoint?.currentStepID ? ` @ ${data.checkpoint.currentStepID}` : data.currentStepID ? ` @ ${data.currentStepID}` : ''}`;
      info.detail = previewValue(data.checkpoint || data);
      break;
    case 'node_start':
    case 'step_start':
      info.summary = `Step start${nodeRef ? `: ${nodeRef}` : ''}`;
      info.detail = previewValue(data.input || data.resolvedInputs || '');
      break;
    case 'node_done':
    case 'step_done':
      info.level = 'success';
      info.summary = `Step done${nodeRef ? `: ${nodeRef}` : ''}`;
      info.detail = previewValue(data.output || data.outputs || data.selected || '');
      break;
    case 'node_error':
    case 'step_error':
      info.level = 'error';
      info.summary = `Step error${nodeRef ? `: ${nodeRef}` : ''}`;
      info.detail = previewValue(data.error || data.detail || '');
      break;
    case 'node_skipped':
    case 'step_skipped':
      info.summary = `Step skipped${nodeRef ? `: ${nodeRef}` : ''}`;
      info.detail = previewValue(data.condition || '');
      break;
    case 'pause':
    case 'pause_start':
      info.level = 'warn';
      info.summary = `Paused${nodeRef ? ` @ ${nodeRef}` : ''}`;
      info.detail = previewValue(data.reason || data.message || '');
      break;
    case 'resumed':
    case 'pause_resumed':
      info.level = 'success';
      info.summary = `Resumed${nodeRef ? ` @ ${nodeRef}` : ''}`;
      info.detail = previewValue(data.requestId || data.payload || '');
      break;
    case 'tool_start':
      info.summary = `Tool start: ${toolRef}`;
      info.detail = previewValue(data.inputSummary || data.input || '');
      break;
    case 'tool_done':
      info.level = 'success';
      info.summary = `Tool done: ${toolRef}`;
      info.detail = previewValue(data.outputSummary || data.output || data.toolResult || '');
      break;
    case 'tool_error':
      info.level = data.allowError ? 'warn' : 'error';
      info.summary = `Tool error: ${toolRef}${data.allowError ? ' (continued)' : ''}`;
      info.detail = previewValue(data.error || data.output || data.toolResult || '');
      break;
    case 'tool_message':
      info.level = data.level === 'error' ? 'error' : data.level === 'warn' ? 'warn' : 'info';
      info.summary = `${toolRef}: ${data.message || 'message'}`;
      info.detail = previewValue(data.data || '');
      break;
    case 'llm_tool_use':
      info.summary = `LLM tool use: ${toolRef}`;
      info.detail = previewValue(data.input || '');
      break;
    case 'llm_tool_result':
      info.level = data.is_error ? 'error' : 'success';
      info.summary = `LLM tool result: ${toolRef}`;
      info.detail = previewValue(data.content || '');
      break;
    case 'llm_done':
      info.level = 'success';
      info.summary = `LLM completed${nodeRef ? `: ${nodeRef}` : ''}`;
      info.detail = previewValue(data.usage || data.model || '');
      break;
    case 'llm_error':
      info.level = 'error';
      info.summary = `LLM error${nodeRef ? `: ${nodeRef}` : ''}`;
      info.detail = previewValue(data.error || '');
      break;
    default:
      info.summary = `${evtType}${nodeRef ? `: ${nodeRef}` : ''}`;
      info.detail = previewValue(data.message || data.error || data.output || data.input || data.payload || '');
      break;
  }

  return info;
}

function shouldRecordRunEvent(evtType) {
  return !['token', 'llm_token', 'llm_thinking'].includes(evtType);
}

function recordRunEvent(session, evt) {
  if (!session || !evt || !shouldRecordRunEvent(evt.type)) return;
  const summary = summarizeRunEvent(evt);
  if (!session.events) session.events = [];
  session.events.push({
    ts: evt.ts || new Date().toISOString(),
    type: evt.type || 'event',
    level: summary.level || 'info',
    summary: summary.summary || String(evt.type || 'event'),
    detail: summary.detail || '',
  });
  if (session.events.length > 120) session.events.splice(0, session.events.length - 120);
}

function renderEventLog() {
  const list = $('eventList');
  if (!list) return;
  const session = getSelectedRunSession();
  if (!session) {
    list.innerHTML = '<div class="event-empty">Start or select a run to inspect its event stream.</div>';
    return;
  }
  const events = Array.isArray(session.events) ? session.events : [];
  if (!events.length) {
    list.innerHTML = `<div class="event-empty">${esc(session.label)} has no captured events yet.</div>`;
    return;
  }
  list.innerHTML = events.slice().reverse().map((event) => {
    const detail = event.detail ? `<div class="event-detail">${esc(event.detail)}</div>` : '';
    return `<div class="event-item">
      <div class="event-time">${esc(formatEventTime(event.ts))}</div>
      <div class="event-body">
        <div class="event-line level-${esc(event.level || 'info')}"><span class="event-type">${esc(event.type || 'event')}</span>${esc(event.summary || '')}</div>
        ${detail}
      </div>
    </div>`;
  }).join('');
}

function clearSelectedRunEvents() {
  const session = getSelectedRunSession();
  if (!session) return;
  session.events = [];
  session.updatedAt = Date.now();
  renderEventLog();
  saveCheckpointToStorage();
}

function completedCount(session) {
  if (!session) return 0;
  return session.checkpoint?.completedSteps?.length
    || Object.values(session.nodeStatuses || {}).filter((status) => status === 'done').length;
}

function findRunSessionIDByRunID(runID) {
  if (!runID) return null;
  for (const [sessionID, session] of _runSessions) {
    if (session.runID === runID) return sessionID;
  }
  return null;
}

function resolveRunSessionID({ sessionID = null, clientRunToken = null, runID = null, runHint = null } = {}) {
  for (const candidate of [sessionID, clientRunToken, runHint]) {
    if (candidate && _runSessions.has(candidate)) return candidate;
  }
  return findRunSessionIDByRunID(runID) || sessionID || clientRunToken || runHint || runID || null;
}

function getSessionRunRef(session) {
  return session?.runID || session?.clientRunToken || session?.sessionID || '';
}

function setRunController(sessionID, controller) {
  if (sessionID && controller) _activeRunControllers.set(sessionID, controller);
}

function getRunController(sessionID) {
  return sessionID ? _activeRunControllers.get(sessionID) || null : null;
}

function clearRunController(sessionID, controller = null) {
  if (!sessionID) return;
  const active = _activeRunControllers.get(sessionID);
  if (!active) return;
  if (!controller || active === controller) _activeRunControllers.delete(sessionID);
}

function abortRunController(sessionID) {
  const controller = getRunController(sessionID);
  if (!controller) return false;
  controller.abort();
  clearRunController(sessionID, controller);
  return true;
}

function isRunStreaming(sessionID) {
  return !!getRunController(sessionID);
}

function ensureRunSession(sessionID, seed = {}) {
  if (!sessionID) return null;
  let session = _runSessions.get(sessionID);
  if (!session) {
    const seq = seed.seq || (++_runSeq);
    const actualRunID = seed.runID || null;
    session = {
      sessionID,
      clientRunToken: seed.clientRunToken || (isTransientRunRef(sessionID) ? sessionID : null),
      runID: actualRunID,
      seq,
      label: seed.label || `Run ${seq}`,
      workflowName: seed.workflowName || _currentWorkflowJson?.name || '',
      status: seed.status || 'idle',
      nodeStatuses: seed.nodeStatuses ? { ...seed.nodeStatuses } : {},
      checkpoint: seed.checkpoint || null,
      filesWritten: Array.isArray(seed.filesWritten) ? [...seed.filesWritten] : [],
      currentStepID: seed.currentStepID || null,
      events: Array.isArray(seed.events) ? [...seed.events] : [],
      updatedAt: seed.updatedAt || Date.now(),
      pending: seed.pending ?? (!actualRunID && isTransientRunRef(sessionID)),
    };
    _runSessions.set(sessionID, session);
  } else {
    if (seed.clientRunToken) session.clientRunToken = seed.clientRunToken;
    if (seed.runID) session.runID = seed.runID;
    if (seed.workflowName) session.workflowName = seed.workflowName;
    if (seed.status) session.status = seed.status;
    if (seed.checkpoint) session.checkpoint = seed.checkpoint;
    if (seed.currentStepID) session.currentStepID = seed.currentStepID;
    if (Array.isArray(seed.filesWritten)) session.filesWritten = [...seed.filesWritten];
    if (seed.nodeStatuses) session.nodeStatuses = { ...seed.nodeStatuses };
    if (Array.isArray(seed.events)) session.events = [...seed.events];
    if (seed.label) session.label = seed.label;
    if (seed.seq) session.seq = seed.seq;
    if (seed.pending != null) session.pending = seed.pending;
    session.updatedAt = seed.updatedAt || Date.now();
  }
  if (session.runID) session.pending = false;
  if (session.seq > _runSeq) _runSeq = session.seq;
  return session;
}

function renderRunSessions() {
  const strip = $('runStrip');
  const meta = $('runMeta');
  if (!strip || !meta) return;
  const sessions = listRunSessions();
  if (!sessions.length) {
    strip.innerHTML = '<span class="run-empty">No runs yet</span>';
    meta.textContent = 'Selected run: none';
    return;
  }
  strip.innerHTML = sessions.map((session) => {
    const encoded = encodeURIComponent(session.sessionID);
    const active = session.sessionID === _selectedRunID ? ' active' : '';
    return `<button class="run-chip${active}" onclick="selectRunSession(decodeURIComponent('${encoded}'))">
      <span class="run-chip-dot ${esc(session.status || 'idle')}"></span>
      <span>${esc(session.label)}</span>
      <span class="run-chip-id">${esc(shortRunID(getSessionRunRef(session)))}</span>
    </button>`;
  }).join('');

  const selected = getSelectedRunSession();
  if (!selected) {
    meta.textContent = 'Selected run: none';
    return;
  }
  const stepText = selected.currentStepID ? ` @ ${selected.currentStepID}` : '';
  const fileText = selected.filesWritten?.length ? `, ${selected.filesWritten.length} files` : '';
  const eventText = selected.events?.length ? `, ${selected.events.length} events` : '';
  meta.textContent = `${selected.label} · ${selected.status || 'idle'}${stepText} · ${completedCount(selected)} done${fileText}${eventText}`;
}

function applySelectedRunToNodes() {
  const session = getSelectedRunSession();
  for (const node of state.nodes) {
    node.status = session?.nodeStatuses?.[node.id] || null;
  }
  _lastCheckpoint = session?.checkpoint || null;
  _currentRunID = session?.runID || null;
}

function updateExecutionControls() {
  const session = getSelectedRunSession();
  const running = !!(session && (session.status === 'running' || session.status === 'waiting' || isRunStreaming(session.sessionID)));
  const resumable = !!(session && session.status === 'paused' && session.runID);
  const stoppable = !!session && (running || session.status === 'paused');
  $('runBtn').style.display = _currentWorkflowJson ? '' : 'none';
  $('pauseBtn').style.display = running ? '' : 'none';
  $('resumeBtn').style.display = resumable ? '' : 'none';
  $('stopBtn').style.display = stoppable ? '' : 'none';
}

function updateStatusFromSelectedRun() {
  const session = getSelectedRunSession();
  if (!session) {
    $('statusLabel').textContent = _currentWorkflowJson ? 'Ready' : '';
  } else if (session.status === 'running') {
    $('statusLabel').textContent = `Running ${session.label}${session.currentStepID ? ': ' + session.currentStepID : ''}`;
  } else if (session.status === 'waiting') {
    $('statusLabel').textContent = `Waiting ${session.label}${session.currentStepID ? ': ' + session.currentStepID : ''}`;
  } else if (session.status === 'paused') {
    $('statusLabel').textContent = `Paused ${session.label}${session.currentStepID ? ' @ ' + session.currentStepID : ''}`;
  } else if (session.status === 'done') {
    $('statusLabel').textContent = `Complete ${session.label}! ${session.filesWritten?.length || 0} files written`;
  } else if (session.status === 'error') {
    $('statusLabel').textContent = `Error in ${session.label}`;
  } else {
    $('statusLabel').textContent = `${session.label} ready`;
  }
}

function syncSelectedRun(render = true) {
  applySelectedRunToNodes();
  updateExecutionControls();
  updateStatusFromSelectedRun();
  renderRunSessions();
  renderEventLog();
  if (render) {
    renderNodes();
    renderConnections();
    updateMinimap();
  }
}

function selectRunSession(runID) {
  if (!runID || !_runSessions.has(runID)) return;
  _selectedRunID = runID;
  syncSelectedRun();
}

function clearRunSessions() {
  for (const controller of _activeRunControllers.values()) {
    try { controller.abort(); } catch {}
  }
  _runSessions = new Map();
  _selectedRunID = null;
  _currentRunID = null;
  _lastCheckpoint = null;
  _runTokenSeq = 0;
  _activeRunControllers = new Map();
  for (const node of state.nodes) node.status = null;
  renderRunSessions();
  renderEventLog();
  updateExecutionControls();
  updateStatusFromSelectedRun();
}

function getOrderedNodeTypes() {
  const known = [...KNOWN_TYPES];
  const extras = Array.from(new Set(state.nodes.map((node) => node.type).filter((type) => type && !KNOWN_TYPES.includes(type)))).sort();
  return [...known, ...extras];
}

function isHideableUtilityNode(node) {
  return !!node && HIDEABLE_TYPES.has(node.type);
}

function shouldHideNode(node) {
  if (!_uiState.simplifyGraph || !node) return false;
  if (node.id === state.selectedNodeId) return false;
  if (['running', 'waiting', 'paused', 'error'].includes(node.status || '')) return false;
  return isHideableUtilityNode(node);
}

function getRenderNodes() {
  const filtered = state.nodes.filter((node) => !shouldHideNode(node));
  return filtered.length ? filtered : [...state.nodes];
}

function getConnectionIndex() {
  const outgoing = new Map();
  for (const conn of state.connections) {
    if (!outgoing.has(conn.from)) outgoing.set(conn.from, []);
    outgoing.get(conn.from).push(conn);
  }
  return outgoing;
}

function resolveVisibleTargets(nodeId, visibleIds, outgoing, visited = new Set(), hiddenCount = 0) {
  if (!nodeId) return [];
  if (visibleIds.has(nodeId)) return [{ to: nodeId, hiddenCount }];
  if (visited.has(nodeId)) return [];
  visited.add(nodeId);
  const nextEdges = outgoing.get(nodeId) || [];
  if (!nextEdges.length) return [];
  const results = [];
  for (const edge of nextEdges) {
    results.push(...resolveVisibleTargets(edge.to, visibleIds, outgoing, new Set(visited), hiddenCount + 1));
  }
  return results;
}

function getRenderConnections(renderNodes = getRenderNodes()) {
  const visibleIds = new Set(renderNodes.map((node) => node.id));
  if (!_uiState.simplifyGraph) {
    return state.connections.filter((conn) => visibleIds.has(conn.from) && visibleIds.has(conn.to));
  }

  const outgoing = getConnectionIndex();
  const dedup = new Set();
  const compacted = [];

  for (const conn of state.connections) {
    if (!visibleIds.has(conn.from)) continue;
    const targets = resolveVisibleTargets(conn.to, visibleIds, outgoing);
    for (const target of targets) {
      if (!target?.to || target.to === conn.from) continue;
      const key = [conn.from, target.to, conn.type, conn.label || ''].join('::');
      if (dedup.has(key)) continue;
      dedup.add(key);
      compacted.push({
        ...conn,
        to: target.to,
        hiddenCount: target.hiddenCount || 0,
      });
    }
  }

  return compacted;
}

function shouldMinifyNode(node) {
  if (!_uiState.compact || !node) return false;
  if (node.id === state.selectedNodeId) return false;
  if (['running', 'waiting', 'paused', 'error'].includes(node.status || '')) return false;
  return MINIFY_TYPES.has(node.type);
}

function getLayoutMetrics() {
  const nodeCount = getRenderNodes().length;
  if (_uiState.compact) {
    const dense = !!_uiState.simplifyGraph;
    return {
      layerGap: dense ? (nodeCount > 18 ? 178 : 194) : (nodeCount > 18 ? 214 : 238),
      nodeGap: dense ? (nodeCount > 18 ? 96 : 112) : (nodeCount > 18 ? 122 : 142),
      startX: 52,
      startY: 44,
    };
  }
  return {
    layerGap: 300,
    nodeGap: 180,
    startX: 80,
    startY: 60,
  };
}

function focusNodeType(type) {
  const node = state.nodes.find((entry) => entry.type === type);
  if (!node) return;
  state.selectedNodeId = node.id;
  renderNodes();
  renderConnections();
  const el = $(`node-${node.id}`);
  if (el) el.scrollIntoView({ behavior: 'smooth', block: 'center', inline: 'center' });
  updateNavigationChrome();
}

function renderTypeSidebar() {
  const summary = $('typeSummary');
  const list = $('typeList');
  const badge = $('typePanelBadge');
  const panelTitle = $('typePanelTitle');
  if (!summary || !list || !badge) return;

  const counts = new Map();
  for (const node of state.nodes) {
    counts.set(node.type, (counts.get(node.type) || 0) + 1);
  }
  const usedTypeCount = counts.size;
  const shownNodeCount = getRenderNodes().length;
  const orderedTypes = getOrderedNodeTypes().filter((type) => _uiState.showAllTypes || (counts.get(type) || 0) > 0);

  badge.textContent = `${orderedTypes.length} shown`;
  if (panelTitle) panelTitle.textContent = 'Node Types';
  summary.innerHTML = `
    <div class="sidebar-stat"><div class="sidebar-stat-label">Supported</div><div class="sidebar-stat-value">${KNOWN_TYPES.length}</div></div>
    <div class="sidebar-stat"><div class="sidebar-stat-label">Used</div><div class="sidebar-stat-value">${usedTypeCount}</div></div>
    <div class="sidebar-stat"><div class="sidebar-stat-label">Shown</div><div class="sidebar-stat-value">${shownNodeCount}</div></div>
    <div class="sidebar-stat"><div class="sidebar-stat-label">Nodes</div><div class="sidebar-stat-value">${state.nodes.length}</div></div>
  `;

  list.innerHTML = orderedTypes.map((type) => {
    const count = counts.get(type) || 0;
    const caption = KNOWN_TYPES.includes(type) ? 'built-in' : 'custom';
    const encodedType = encodeURIComponent(type);
    return `<button class="type-row${count === 0 ? ' empty' : ''}" onclick="focusNodeType(decodeURIComponent('${encodedType}'))" title="${esc(type)}">
      <span class="type-icon" style="background:${esc(getTypeColor(type))};">${esc(getTypeIcon(type))}</span>
      <span class="type-meta">
        <div class="type-name">${esc(type)}</div>
        <div class="type-caption">${caption}</div>
      </span>
      <span class="type-count">${count}</span>
    </button>`;
  }).join('');
}

function buildWorkflowBreadcrumb() {
  const parts = _workflowNavStack.map((entry) => entry.label || summarizePathLabel(entry.workflowRef) || entry.workflow?.name || 'workflow');
  parts.push(_currentWorkflowJson?.name || summarizePathLabel(_workflowRef) || 'workflow');
  return parts.join(' / ');
}

function updateNavigationChrome() {
  const backBtn = $('backBtn');
  const openBtn = $('openChildBtn');
  const navSep = $('navSep');
  const crumb = $('wfBreadcrumb');
  const selectedNode = state.nodes.find((node) => node.id === state.selectedNodeId) || null;
  const subflowTarget = selectedNode?.type === 'Subflow' ? resolveSubflowTarget(selectedNode.data || {}) : null;

  if (backBtn) backBtn.style.display = _workflowNavStack.length ? '' : 'none';
  if (navSep) navSep.style.display = (_workflowNavStack.length || selectedNode?.type === 'Subflow') ? '' : 'none';
  if (openBtn) {
    openBtn.style.display = selectedNode?.type === 'Subflow' ? '' : 'none';
    openBtn.disabled = !(subflowTarget && subflowTarget.ok);
    openBtn.title = subflowTarget?.ok
      ? `Open child workflow: ${subflowTarget.label || subflowTarget.ref}`
      : (subflowTarget?.reason || 'Select a Subflow node');
  }
  if (crumb) crumb.textContent = buildWorkflowBreadcrumb();
}

function deselectSelectedNode(render = true) {
  if (!state.selectedNodeId) return;
  state.selectedNodeId = null;
  if (render) {
    renderNodes();
    renderConnections();
    updateNavigationChrome();
  }
}

// ===== Parse workflow JSON into internal state =====
function parseWorkflow(json, workflowRef = null, options = {}) {
  if (!options.preserveNav) _workflowNavStack = [];
  _currentWorkflowJson = json;
  _workflowRef = workflowRef || null;
  state.nodes = [];
  state.connections = [];
  state.registry = json.registry || {};

  if (!json?.steps?.length) return;

  const steps = json.steps;
  $('wfTitle').textContent = options.title || json.name || summarizePathLabel(workflowRef) || 'VL Workflow DAG';
  clearRunSessions();

  // Create nodes
  for (const step of steps) {
    const type = getStepType(step);
    state.nodes.push({
      id: step.id,
      type,
      x: step._x || 0,
      y: step._y || 0,
      data: step,
      status: null
    });
  }

  // Create connections
  let connId = 0;
  for (const step of steps) {
    // FIX #1: exclude both RETURN and BREAK (reserved keywords, not real nodes)
    if (step.next && !RESERVED_NEXT.has(step.next)) {
      state.connections.push({ id: 'c' + (connId++), from: step.id, to: step.next, type: 'serial' });
    }
    if (step.children?.length) {
      for (const childId of step.children) {
        state.connections.push({ id: 'c' + (connId++), from: step.id, to: childId, type: 'parallel' });
      }
    }
    // Branch cases — support both array [[expr, target]] and object {expr: target}
    if (step.branches) {
      if (Array.isArray(step.branches)) {
        for (const [expr, targetId] of step.branches) {
          state.connections.push({ id: 'c' + (connId++), from: step.id, to: targetId, type: 'branch-case', label: expr });
        }
      } else {
        for (const [expr, targetId] of Object.entries(step.branches)) {
          state.connections.push({ id: 'c' + (connId++), from: step.id, to: targetId, type: 'branch-case', label: expr });
        }
      }
    }
    // Legacy: cases field
    if (step.cases) {
      for (const [expr, targetId] of Object.entries(step.cases)) {
        state.connections.push({ id: 'c' + (connId++), from: step.id, to: targetId, type: 'branch-case', label: expr });
      }
    }
  }

  const hasPos = state.nodes.some(n => n.x > 0 || n.y > 0);
  if (!hasPos) autoLayout();

  // Restore checkpoint state (node statuses) if available
  restoreFromStorage();
  syncSelectedRun(false);

  render();
  if (options.selectedNodeId) {
    state.selectedNodeId = options.selectedNodeId;
    renderNodes();
    renderConnections();
  }
  updateNavigationChrome();
}

function getStepType(step) {
  if (isSubflowStep(step)) return 'Subflow';
  if (step.type) return normalizeType(step.type) || 'LLM';
  const id = step.id || '';
  const prefix = normalizeType(id.split('_')[0]);
  // FIX #3: include Download and Unzip in known types
  return prefix || 'LLM';
}

// ===== Auto Layout (topological, with barycenter crossing reduction) =====
function autoLayout() {
  const metrics = getLayoutMetrics();
  const LAYER_GAP = metrics.layerGap;
  const NODE_GAP = metrics.nodeGap;
  const START_X = metrics.startX;
  const START_Y = metrics.startY;
  const renderNodes = getRenderNodes();
  if (!renderNodes.length) return;
  const renderConnections = getRenderConnections(renderNodes);
  const nodeMap = new Map(state.nodes.map(n => [n.id, n]));

  const succs = new Map(), preds = new Map();
  for (const n of renderNodes) { succs.set(n.id, []); preds.set(n.id, []); }
  for (const c of renderConnections) {
    if (succs.has(c.from) && preds.has(c.to)) {
      succs.get(c.from).push(c.to);
      preds.get(c.to).push(c.from);
    }
  }

  // Find roots
  const roots = renderNodes.filter(n => (preds.get(n.id)?.length || 0) === 0).map(n => n.id);
  if (roots.length === 0 && renderNodes.length > 0) roots.push(renderNodes[0].id);

  // Longest-path layer assignment (with cycle protection)
  const layers = new Map();
  const inStack = new Set();
  function assignLayer(id, depth) {
    if (inStack.has(id)) return;
    inStack.add(id);
    layers.set(id, Math.max(layers.get(id) || 0, depth));
    for (const s of (succs.get(id) || [])) assignLayer(s, depth + 1);
    inStack.delete(id);
  }
  for (const r of roots) assignLayer(r, 0);
  for (const n of renderNodes) { if (!layers.has(n.id)) layers.set(n.id, 0); }

  // Group by layer
  const layerGroups = new Map();
  for (const [id, layer] of layers) {
    if (!layerGroups.has(layer)) layerGroups.set(layer, []);
    layerGroups.get(layer).push(id);
  }

  // Barycenter ordering (reduce edge crossings)
  const sortedLayers = [...layerGroups.keys()].sort((a, b) => a - b);
  for (let pass = 0; pass < 4; pass++) {
    for (let li = 1; li < sortedLayers.length; li++) {
      const group = layerGroups.get(sortedLayers[li]);
      const prevGroup = layerGroups.get(sortedLayers[li - 1]);
      const prevIdx = new Map(prevGroup.map((id, i) => [id, i]));
      group.sort((a, b) => {
        const aParents = preds.get(a)?.filter(p => prevIdx.has(p)) || [];
        const bParents = preds.get(b)?.filter(p => prevIdx.has(p)) || [];
        const aAvg = aParents.length ? aParents.reduce((s, p) => s + prevIdx.get(p), 0) / aParents.length : 0;
        const bAvg = bParents.length ? bParents.reduce((s, p) => s + prevIdx.get(p), 0) / bParents.length : 0;
        return aAvg - bAvg;
      });
    }
  }

  // Position nodes
  for (const layer of sortedLayers) {
    const group = layerGroups.get(layer);
    const totalHeight = group.length * NODE_GAP;
    const startY = Math.max(START_Y, 400 - totalHeight / 2);
    for (let i = 0; i < group.length; i++) {
      const node = nodeMap.get(group[i]);
      if (node) {
        node.x = START_X + layer * LAYER_GAP;
        node.y = startY + i * NODE_GAP;
      }
    }
  }
}

// ===== Compute I/O audit for a node =====
function computeIO(step) {
  const io = { varsIn: [], varsOut: [], docs: [], files: [] };
  if (!step) return io;
  const data = step.in || step;

  // Input vars (references starting with = or $)
  const jsonStr = JSON.stringify(data);
  const varRefs = jsonStr.match(/=\$?[\w.]+|"\$[\w.]+"/g) || [];
  for (const ref of varRefs) {
    const clean = ref.replace(/[="]/g, '');
    if (clean.startsWith('$') && !io.varsIn.includes(clean)) io.varsIn.push(clean);
  }

  // Docs
  if (step.in?.docs) io.docs = step.in.docs;

  // Output vars
  if (step.out) {
    for (const [key, val] of Object.entries(step.out)) {
      if (key.startsWith('$')) io.varsOut.push(key);
      else if (key.startsWith('/')) io.files.push(key);
    }
  }

  // Source (loop / download / unzip)
  if (step.source) {
    const src = String(step.source);
    if (src.startsWith('=$') || src.startsWith('$')) io.varsIn.push(src.replace(/^=/, ''));
  }

  // FIX #4: while expression can reference variables
  if (step.while) {
    const whileStr = String(step.while);
    const whileRefs = whileStr.match(/\$[\w.]+/g) || [];
    for (const ref of whileRefs) {
      if (!io.varsIn.includes(ref)) io.varsIn.push(ref);
    }
  }

  return io;
}

// ===== Type-Specific Body Renderers =====

function renderLLMBody(data, expanded = false) {
  let html = '';
  const docs = data.in?.docs?.length ? data.in.docs : null;
  if (docs) {
    html += `<div class="node-section"><div class="node-section-title">Documents</div>
      <div class="node-docs-list">${docs.map(d =>
        `<span class="node-doc-tag" title="${esc(resolveDocName(d))}">${esc(d)}: ${esc(nodeText(resolveDocName(d), 16, expanded))}</span>`
      ).join('')}</div></div>`;
  }
  if (data.in?.model || data.model) {
    html += `<div class="node-field"><span class="node-label">model</span><span class="node-value">${esc(nodeText(data.in?.model || data.model, 20, expanded))}</span></div>`;
  }
  if (data.in?.max_tokens) {
    html += `<div class="node-field"><span class="node-label">tokens</span><span class="node-value">${data.in.max_tokens}</span></div>`;
  }
  if (data.in?.messages?.length) {
    html += `<div class="node-field"><span class="node-label">msgs</span><span class="node-value">${data.in.messages.length} messages</span></div>`;
  }
  html += renderOutSection(data.out, expanded);
  return html;
}

function renderServiceBody(data, expanded = false) {
  let html = '';
  if (data.serviceId) {
    html += `<div class="node-field"><span class="node-label">service</span><span class="node-value ref">${esc(nodeText(data.serviceId, 20, expanded))}</span></div>`;
  }
  html += renderInputSection(data.in, expanded);
  html += renderOutSection(data.out, expanded);
  return html;
}

function renderAPIBody(data, expanded = false) {
  let html = '';
  const apiId = data.apiId || '';
  const apis = state.registry?.apis || [];
  const apiDef = apis.find(a => a.id === apiId || a === apiId);
  if (apiDef && typeof apiDef === 'object') {
    html += `<div class="node-field"><span class="node-label">${esc(apiDef.method || 'POST')}</span><span class="node-value ref" title="${esc(apiDef.url || '')}">${esc(nodeText(apiDef.desc || apiDef.url || apiId, 20, expanded))}</span></div>`;
  } else {
    html += `<div class="node-field"><span class="node-label">api</span><span class="node-value ref">${esc(nodeText(apiId || data.id || '', 20, expanded))}</span></div>`;
  }
  html += renderInputSection(data.in, expanded);
  html += renderOutSection(data.out, expanded);
  return html;
}

function renderComponentBody(data, expanded = false) {
  let html = '';
  if (data.componentId) {
    html += `<div class="node-field"><span class="node-label">comp</span><span class="node-value ref">${esc(nodeText(data.componentId, 20, expanded))}</span></div>`;
  }
  html += renderInputSection(data.in, expanded);
  html += renderOutSection(data.out, expanded);
  return html;
}

function renderSetBody(data, expanded = false) {
  return `<div class="node-section"><div class="node-section-title">Assignment</div>
    <div class="node-io-item"><span class="node-io-key is-var">${esc(data.target || '$var')}</span>
    <span class="node-io-arrow">\u2190</span>
    <span class="node-io-value">${esc(nodeText(data.value || '', 18, expanded))}</span></div></div>`;
}

function renderWriteBody(data, expanded = false) {
  const modeStr = data.mode ? ` [${esc(data.mode)}]` : '';
  return `<div class="node-section"><div class="node-section-title">Write Artifact${modeStr}</div>
    <div class="node-field"><span class="node-label">target</span><span class="node-value file">${esc(nodeText(data.target || '', 20, expanded))}</span></div>
    <div class="node-field"><span class="node-label">value</span><span class="node-value var">${esc(nodeText(data.value || '', 18, expanded))}</span></div></div>`;
}

function renderBranchBody(data, expanded = false) {
  const cases = Array.isArray(data.branches) ? data.branches
    : data.branches && typeof data.branches === 'object' ? Object.entries(data.branches)
    : data.cases ? Object.entries(data.cases) : [];
  if (cases.length === 0) return '';
  let html = '<div class="node-section"><div class="node-section-title">Cases</div>';
  const visibleCases = expanded ? cases : cases.slice(0, 4);
  visibleCases.forEach(([cond, target]) => {
    html += `<div class="node-io-item"><span class="node-io-key">${esc(nodeText(cond, 14, expanded))}</span>
      <span class="node-io-arrow">\u2192</span>
      <span class="node-io-value">${esc(nodeText(target || '?', 12, expanded))}</span></div>`;
  });
  if (!expanded && cases.length > 4) html += `<div class="node-io-item" style="color:var(--text2)">... +${cases.length - 4} more</div>`;
  html += '</div>';
  return html;
}

// FIX #2: Loop body now handles both source mode and while mode (Spec 3.16)
function renderLoopBody(data, expanded = false) {
  const isWhile = !!data.while;
  let html = '<div class="node-section"><div class="node-section-title">Loop Config</div>';

  if (isWhile) {
    // While mode (3.16)
    html += `<div class="node-field"><span class="node-label">while</span><span class="node-value var">${esc(nodeText(data.while, 20, expanded))}</span></div>`;
    if (data.maxIterations != null) {
      html += `<div class="node-field"><span class="node-label">max</span><span class="node-value">${data.maxIterations}</span></div>`;
    }
  } else {
    // Source mode (original)
    html += `<div class="node-field"><span class="node-label">source</span><span class="node-value var">${esc(nodeText(data.source || '', 16, expanded))}</span></div>`;
    if (data.maxIterations != null) {
      html += `<div class="node-field"><span class="node-label">max</span><span class="node-value">${data.maxIterations}</span></div>`;
    }
  }

  html += `<div class="node-field"><span class="node-label">mode</span><span class="node-value">${esc(data.mode || 'parallel')}</span></div>`;
  html += '</div>';
  return html;
}

function renderStopBody() {
  return '<div class="node-section"><div class="node-field"><span class="node-value" style="color:var(--red);">Workflow terminates here</span></div></div>';
}

function renderPauseBody(data, expanded = false) {
  const msg = data.in?.message || data.message || data.reason || '';
  const displayKeys = data.in?.display ? Object.keys(data.in.display) : [];
  let html = '<div class="node-section"><div class="node-section-title">\u23F8 Pause \u2014 Waiting for Approval</div>';
  if (msg) html += `<div class="node-field"><span class="node-label">msg</span><span class="node-value">${esc(nodeText(msg, 24, expanded))}</span></div>`;
  if (displayKeys.length > 0) html += `<div class="node-field"><span class="node-label">show</span><span class="node-value">${esc(nodeText(displayKeys.join(', '), 24, expanded))}</span></div>`;
  html += '</div>';
  html += renderOutSection(data.out, expanded);
  return html;
}

function renderForkBody(data, expanded = false) {
  const children = data.children || [];
  return `<div class="node-section"><div class="node-section-title">Fork Config</div>
    ${data.source ? `<div class="node-field"><span class="node-label">source</span><span class="node-value var">${esc(nodeText(data.source, 16, expanded))}</span></div>` : ''}
    <div class="node-field"><span class="node-label">branches</span><span class="node-value">${children.length} parallel</span></div></div>`;
}

function renderToolBody(data, expanded = false) {
  let html = '<div class="node-section"><div class="node-section-title">Tool Call</div>';
  const toolName = resolveToolStepName(data);
  if (toolName) {
    html += `<div class="node-field"><span class="node-label">tool</span><span class="node-value ref">${esc(nodeText(toolName, 20, expanded))}</span></div>`;
  }
  if (data.timeout != null) {
    html += `<div class="node-field"><span class="node-label">timeout</span><span class="node-value">${esc(String(data.timeout))}</span></div>`;
  }
  if (data.allowError === true || data.continueOnError === true) {
    html += `<div class="node-field"><span class="node-label">errors</span><span class="node-value">continue</span></div>`;
  }
  html += renderInputSection(data.input || data.in, expanded);
  html += renderOutSection(data.out, expanded);
  html += '</div>';
  return html;
}

function renderSubflowBody(data, expanded = false) {
  let html = '<div class="node-section"><div class="node-section-title">Subflow Call</div>';
  const workflowPath = data.workflow_path || data.workflowPath || data.path || data.workflow || '';
  const mode = data.mode || data.executionMode || 'sync';
  const workDir = data.work_dir || data.workDir || data.base_dir || data.baseDir || data.subspace || '';
  if (workflowPath) {
    html += `<div class="node-field"><span class="node-label">workflow</span><span class="node-value ref">${esc(nodeText(String(workflowPath), 20, expanded))}</span></div>`;
  }
  html += `<div class="node-field"><span class="node-label">mode</span><span class="node-value">${esc(String(mode))}</span></div>`;
  if (workDir) {
    html += `<div class="node-field"><span class="node-label">workDir</span><span class="node-value file">${esc(nodeText(String(workDir), 18, expanded))}</span></div>`;
  }
  if (data.emit_events === false || data.emitEvents === false) {
    html += `<div class="node-field"><span class="node-label">events</span><span class="node-value">minimal</span></div>`;
  }
  html += '</div>';
  html += renderInputSection(data.params || data.input || data.in, expanded);
  html += renderOutSection(data.out, expanded);
  return html;
}

// FIX #3: New renderers for Download and Unzip (Spec 3.16)
function renderDownloadBody(data, expanded = false) {
  let html = '<div class="node-section"><div class="node-section-title">Download</div>';
  const src = data.source || '';
  const srcStr = typeof src === 'object' ? src : String(src);
  html += `<div class="node-field"><span class="node-label">source</span><span class="node-value ref">${esc(nodeText(srcStr, 20, expanded))}</span></div>`;
  if (data.target) {
    html += `<div class="node-field"><span class="node-label">target</span><span class="node-value file">${esc(nodeText(data.target, 20, expanded))}</span></div>`;
  }
  if (data.routeByExt) {
    const extCount = typeof data.routeByExt === 'object' ? Object.keys(data.routeByExt).length : '?';
    html += `<div class="node-field"><span class="node-label">route</span><span class="node-value">${extCount} ext rules</span></div>`;
  }
  if (data.defaultDir) {
    html += `<div class="node-field"><span class="node-label">default</span><span class="node-value file">${esc(nodeText(data.defaultDir, 18, expanded))}</span></div>`;
  }
  html += '</div>';
  html += renderOutSection(data.out, expanded);
  return html;
}

function renderUnzipBody(data, expanded = false) {
  let html = '<div class="node-section"><div class="node-section-title">Unzip</div>';
  if (data.source) {
    html += `<div class="node-field"><span class="node-label">source</span><span class="node-value file">${esc(nodeText(String(data.source), 20, expanded))}</span></div>`;
  }
  if (data.routeByExt) {
    const extCount = typeof data.routeByExt === 'object' ? Object.keys(data.routeByExt).length : '?';
    html += `<div class="node-field"><span class="node-label">route</span><span class="node-value">${extCount} ext rules</span></div>`;
  }
  if (data.defaultDir) {
    html += `<div class="node-field"><span class="node-label">default</span><span class="node-value file">${esc(nodeText(data.defaultDir, 18, expanded))}</span></div>`;
  }
  if (data.overwrite != null) {
    html += `<div class="node-field"><span class="node-label">overwrite</span><span class="node-value">${data.overwrite}</span></div>`;
  }
  html += '</div>';
  html += renderOutSection(data.out, expanded);
  return html;
}

// --- Shared sub-renderers ---

function renderInputSection(inData, expanded = false) {
  if (!inData || typeof inData !== 'object') return '';
  const skip = new Set(['model', 'stream', 'messages', 'docs', 'max_tokens', 'output_config']);
  const entries = Object.entries(inData).filter(([k]) => !skip.has(k));
  if (entries.length === 0) return '';
  let html = '<div class="node-section"><div class="node-section-title">Input</div><div class="node-io-list">';
  const visibleEntries = expanded ? entries : entries.slice(0, 4);
  visibleEntries.forEach(([key, val]) => {
    html += `<div class="node-io-item"><span class="node-io-key">${esc(nodeText(key, 10, expanded))}</span>
      <span class="node-io-arrow">\u2190</span>
      <span class="node-io-value">${esc(nodeText(val, 14, expanded))}</span></div>`;
  });
  if (!expanded && entries.length > 4) html += `<div class="node-io-item" style="color:var(--text2)">... +${entries.length - 4} more</div>`;
  html += '</div></div>';
  return html;
}

function renderOutSection(out, expanded = false) {
  if (!out || typeof out !== 'object' || Array.isArray(out) || Object.keys(out).length === 0) return '';
  let html = '<div class="node-section"><div class="node-section-title">Output</div><div class="node-io-list">';
  const entries = Object.entries(out);
  const visibleEntries = expanded ? entries : entries.slice(0, 4);
  visibleEntries.forEach(([key, val]) => {
    const isVar = key.startsWith('$');
    const isFile = key.startsWith('/') || key.startsWith('{');
    const keyClass = isVar ? 'is-var' : isFile ? 'is-file' : '';
    html += `<div class="node-io-item"><span class="node-io-key ${keyClass}">${esc(nodeText(key, 16, expanded))}</span>
      <span class="node-io-arrow">\u2190</span>
      <span class="node-io-value">${esc(nodeText(val, 14, expanded))}</span></div>`;
  });
  if (!expanded && entries.length > 4) html += `<div class="node-io-item" style="color:var(--text2)">... +${entries.length - 4} more</div>`;
  html += '</div></div>';
  return html;
}

// ===== Render =====
function render() {
  applyUIState();
  $('emptyMsg').style.display = 'none';
  $('canvas').style.display = 'block';
  $('legend').style.display = 'flex';
  $('minimap').style.display = 'block';
  renderTypeSidebar();
  renderNodes();
  updateCanvasFootprint();
  renderConnections();
  updateNavigationChrome();
  setTimeout(updateMinimap, 100);
}

function renderNodes() {
  const layer = $('nodesLayer');
  layer.innerHTML = '';

  for (const node of getRenderNodes()) {
    const div = document.createElement('div');
    const type = node.type || 'LLM';
    const isSelected = node.id === state.selectedNodeId;
    div.className = `node type-${type}`
      + (isSelected ? ' selected' : '')
      + (node.status ? ` status-${node.status}` : '')
      + (shouldMinifyNode(node) ? ' minified' : '');
    if (!KNOWN_TYPES.includes(type)) div.dataset.customType = 'true';
    div.id = `node-${node.id}`;
    div.style.left = node.x + 'px';
    div.style.top = node.y + 'px';

    const icon = getTypeIcon(type);
    const title = node.data?.meta?.title || node.id;
    const desc = node.data?.meta?.description || '';
    const data = node.data || {};

    // Body: type-specific rendering
    let bodyHtml = '';
    switch (type) {
      case 'LLM':       bodyHtml = renderLLMBody(data, isSelected); break;
      case 'Service':   bodyHtml = renderServiceBody(data, isSelected); break;
      case 'API':       bodyHtml = renderAPIBody(data, isSelected); break;
      case 'Component': bodyHtml = renderComponentBody(data, isSelected); break;
      case 'Set':       bodyHtml = renderSetBody(data, isSelected); break;
      case 'Write':     bodyHtml = renderWriteBody(data, isSelected); break;
      case 'Branch':    bodyHtml = renderBranchBody(data, isSelected); break;
      case 'Loop':      bodyHtml = renderLoopBody(data, isSelected); break;
      case 'Stop':      bodyHtml = renderStopBody(); break;
      case 'Pause':     bodyHtml = renderPauseBody(data, isSelected); break;
      case 'Fork':      bodyHtml = renderForkBody(data, isSelected); break;
      case 'Tool':      bodyHtml = renderToolBody(data, isSelected); break;
      case 'Subflow':   bodyHtml = renderSubflowBody(data, isSelected); break;
      case 'Download':  bodyHtml = renderDownloadBody(data, isSelected); break;
      case 'Unzip':     bodyHtml = renderUnzipBody(data, isSelected); break;
      default:
        if (data.in) {
          const keys = Object.keys(data.in);
          const visibleKeys = isSelected ? keys : keys.slice(0, 3);
          bodyHtml = visibleKeys.map(k => `<div class="field">${esc(k)}: ${esc(nodeText(data.in[k], 35, isSelected))}</div>`).join('');
        }
    }

    // Condition badge
    const conditionHtml = data.if ? `<div class="node-condition">if: ${esc(nodeText(data.if, 28, isSelected))}</div>` : '';

    // BREAK indicator for nodes inside Loop children
    const breakHtml = data.next === 'BREAK' ? `<div class="node-condition" style="background:rgba(248,81,73,0.15);color:var(--red);">next: BREAK</div>` : '';

    // I/O audit badges
    const io = computeIO(data);
    let ioHtml = '';
    const badges = [];
    for (const v of io.varsIn.slice(0, 3)) badges.push(`<span class="io-badge var-in">\u2193${esc(v)}</span>`);
    for (const v of io.varsOut.slice(0, 3)) badges.push(`<span class="io-badge var-out">\u2191${esc(v)}</span>`);
    for (const d of io.docs.slice(0, 2)) badges.push(`<span class="io-badge doc">\u{1F4C4}${esc(d)}</span>`);
    for (const f of io.files.slice(0, 2)) badges.push(`<span class="io-badge file">\u{1F4C1}${esc(f.substring(0, 20))}</span>`);
    if (badges.length) ioHtml = `<div class="node-io">${badges.join('')}</div>`;

    // Status badge
    let badgeHtml = '';
    if (node.status === 'running') badgeHtml = '<div class="status-badge running">&#9881;</div>';
    else if (node.status === 'waiting') badgeHtml = '<div class="status-badge waiting">&#8987;</div>';
    else if (node.status === 'done') badgeHtml = '<div class="status-badge done">&#10003;</div>';
    else if (node.status === 'error') badgeHtml = '<div class="status-badge error">&#10007;</div>';
    else if (node.status === 'paused') badgeHtml = '<div class="status-badge paused">&#9208;</div>';
    else if (node.status === 'skipped') badgeHtml = '<div class="status-badge skipped">&#8213;</div>';

    const kindLabel = getNodeKindLabel(type, data);
    const stateLabel = getNodeStateLabel(node.status);

    // Footer
    const footerHtml = data.children?.length ? `<div class="node-footer">\u2935 ${data.children.length} parallel children</div>` : '';

    div.innerHTML = `
      ${badgeHtml}
      ${isSelected ? '<button class="node-dismiss" title="Collapse details">&times;</button>' : ''}
      <div class="port port-in"></div>
      <div class="node-header">
        <div class="node-icon">${icon}</div>
        <div style="overflow:hidden;">
          <div class="node-title">${esc(title)}</div>
          <div class="node-meta-row">
            <span class="node-type-pill">${esc(type)}</span>
            ${kindLabel ? `<span class="node-subkind-pill">${esc(kindLabel)}</span>` : ''}
            <span class="node-state-pill status-${esc(node.status || 'idle')}">${esc(stateLabel)}</span>
          </div>
          ${desc ? `<div class="node-desc">${esc(desc)}</div>` : ''}
        </div>
      </div>
      ${bodyHtml ? `<div class="node-body">${bodyHtml}${conditionHtml}${breakHtml}</div>` : ''}
      ${ioHtml}
      ${footerHtml}
      <div class="port port-out"></div>
    `;

    // Drag + click handler (mousedown starts drag, stopDrag distinguishes click vs drag)
    div.addEventListener('mousedown', (e) => {
      if (e.button !== 0) return;
      startDrag(e, node);
    });

    div.addEventListener('click', (e) => {
      if (e.target?.closest?.('.node-dismiss')) {
        e.preventDefault();
        e.stopPropagation();
        deselectSelectedNode();
      }
    });

    // Right-click → context menu
    div.addEventListener('contextmenu', (e) => {
      showContextMenu(e, node);
    });

    if (type === 'Subflow') {
      div.addEventListener('dblclick', async (e) => {
        e.preventDefault();
        e.stopPropagation();
        state.selectedNodeId = node.id;
        renderNodes();
        renderConnections();
        updateNavigationChrome();
        await openSubflowNode(node);
      });
    }

    layer.appendChild(div);
  }
}

function renderConnections() {
  const svg = $('connSvg');
  svg.querySelectorAll('.conn-group').forEach(g => g.remove());

  for (const conn of getRenderConnections()) {
    const fromEl = $(`node-${conn.from}`);
    const toEl = $(`node-${conn.to}`);
    if (!fromEl || !toEl) continue;

    const x1 = fromEl.offsetLeft + fromEl.offsetWidth / 2;
    const y1 = fromEl.offsetTop + fromEl.offsetHeight + 4;
    const x2 = toEl.offsetLeft + toEl.offsetWidth / 2;
    const y2 = toEl.offsetTop - 4;

    // Use straight lines for horizontal, bezier for vertical
    const dx = Math.abs(x2 - x1);
    const dy = y2 - y1;
    let d;
    if (dy > 0) {
      const cp = Math.max(40, Math.abs(dy) * 0.4);
      d = `M ${x1} ${y1} C ${x1} ${y1 + cp}, ${x2} ${y2 - cp}, ${x2} ${y2}`;
    } else {
      // Back-edge or same level: use wider bezier
      const cpX = Math.max(80, dx * 0.3);
      d = `M ${x1} ${y1} C ${x1 + cpX} ${y1 + 80}, ${x2 - cpX} ${y2 - 80}, ${x2} ${y2}`;
    }

    const markerMap = { serial: 'arrowSerial', parallel: 'arrowParallel', 'branch-case': 'arrowBranch' };
    const marker = markerMap[conn.type] || 'arrowSerial';

    const g = document.createElementNS('http://www.w3.org/2000/svg', 'g');
    g.setAttribute('class', 'conn-group');

    const path = document.createElementNS('http://www.w3.org/2000/svg', 'path');
    path.setAttribute('class', `conn-path ${conn.type}`);
    path.setAttribute('d', d);
    path.setAttribute('marker-end', `url(#${marker})`);
    if (conn.hiddenCount) {
      path.setAttribute('stroke-width', '2.5');
      path.setAttribute('opacity', '0.95');
    }
    g.appendChild(path);

    if (conn.label || conn.hiddenCount) {
      const text = document.createElementNS('http://www.w3.org/2000/svg', 'text');
      text.setAttribute('class', 'conn-label');
      text.setAttribute('x', (x1 + x2) / 2);
      text.setAttribute('y', Math.min(y1, y2) + Math.abs(dy) / 2 - 5);
      text.setAttribute('text-anchor', 'middle');
      const rawLabel = conn.label && conn.hiddenCount
        ? `${conn.label} · +${conn.hiddenCount}`
        : (conn.label || (conn.hiddenCount ? `+${conn.hiddenCount} hidden` : ''));
      text.textContent = rawLabel.length > 30 ? rawLabel.substring(0, 30) + '...' : rawLabel;
      g.appendChild(text);
    }

    svg.appendChild(g);
  }
}

function updateCanvasFootprint() {
  const canvas = $('canvas');
  const wrap = $('canvasWrap');
  const renderNodes = getRenderNodes();
  if (!canvas || !wrap || !renderNodes.length) return;

  let maxX = 0;
  let maxY = 0;
  for (const node of renderNodes) {
    const el = $(`node-${node.id}`);
    const width = el?.offsetWidth || (_uiState.compact ? (shouldMinifyNode(node) ? 154 : 196) : 240);
    const height = el?.offsetHeight || (_uiState.compact ? (shouldMinifyNode(node) ? 56 : 112) : 128);
    maxX = Math.max(maxX, node.x + width);
    maxY = Math.max(maxY, node.y + height);
  }

  const minWidth = Math.max(wrap.clientWidth + 120, _uiState.compact ? 1200 : 1800);
  const minHeight = Math.max(wrap.clientHeight + 120, _uiState.compact ? 900 : 1200);
  canvas.style.width = `${Math.max(minWidth, maxX + 180)}px`;
  canvas.style.height = `${Math.max(minHeight, maxY + 180)}px`;
}

// ===== Node Drag =====
function initDrag() {
  const canvas = $('canvas');
  canvas.addEventListener('mousemove', onDrag);
  canvas.addEventListener('mouseup', stopDrag);
  canvas.addEventListener('mouseleave', stopDrag);
}

function startDrag(e, node) {
  e.preventDefault();
  state.dragging = { node, startX: e.clientX, startY: e.clientY, origX: node.x, origY: node.y };
  const el = $(`node-${node.id}`);
  if (el) el.classList.add('dragging');
}

function onDrag(e) {
  if (!state.dragging) return;
  const { node, startX, startY, origX, origY } = state.dragging;
  node.x = Math.max(0, origX + (e.clientX - startX));
  node.y = Math.max(0, origY + (e.clientY - startY));
  const el = $(`node-${node.id}`);
  if (el) {
    el.style.left = node.x + 'px';
    el.style.top = node.y + 'px';
  }
  if (!state._dragRAF) {
    state._dragRAF = requestAnimationFrame(() => {
      renderConnections();
      state._dragRAF = null;
    });
  }
}

function stopDrag() {
  if (!state.dragging) return;
  const { node, origX, origY } = state.dragging;
  const dx = Math.abs(node.x - origX);
  const dy = Math.abs(node.y - origY);
  const el = $(`node-${node.id}`);
  if (el) el.classList.remove('dragging');

  if (dx < 3 && dy < 3) {
    // Treat as click — select node
    state.selectedNodeId = node.id;
    renderNodes();
    renderConnections();
    updateNavigationChrome();
    window.parent.postMessage({ type: 'nodeClick', nodeId: node.id, nodeType: node.type, nodeData: node.data }, '*');
  } else {
    // Dragged — update minimap
    updateMinimap();
  }
  state.dragging = null;
}

// ===== Minimap =====
function updateMinimap() {
  const mc = $('minimapCanvas');
  const renderNodes = getRenderNodes();
  const renderConnections = getRenderConnections(renderNodes);
  if (!mc || renderNodes.length === 0) return;
  const ctx = mc.getContext('2d');
  const W = mc.width = mc.offsetWidth * 2;
  const H = mc.height = mc.offsetHeight * 2;
  ctx.clearRect(0, 0, W, H);

  // Find bounds
  let minX = Infinity, minY = Infinity, maxX = 0, maxY = 0;
  for (const n of renderNodes) {
    minX = Math.min(minX, n.x);
    minY = Math.min(minY, n.y);
    maxX = Math.max(maxX, n.x + 240);
    maxY = Math.max(maxY, n.y + 120);
  }
  const pad = 40;
  const scaleX = W / (maxX - minX + pad * 2);
  const scaleY = H / (maxY - minY + pad * 2);
  const scale = Math.min(scaleX, scaleY);

  // Draw connections
  ctx.strokeStyle = '#2a3140';
  ctx.lineWidth = 1;
  for (const c of renderConnections) {
    const from = renderNodes.find(n => n.id === c.from);
    const to = renderNodes.find(n => n.id === c.to);
    if (!from || !to) continue;
    ctx.beginPath();
    ctx.moveTo((from.x + 120 - minX + pad) * scale, (from.y + 60 - minY + pad) * scale);
    ctx.lineTo((to.x + 120 - minX + pad) * scale, (to.y + 30 - minY + pad) * scale);
    ctx.stroke();
  }

  // Draw nodes
  for (const n of renderNodes) {
    const x = (n.x - minX + pad) * scale;
    const y = (n.y - minY + pad) * scale;
    const w = 240 * scale;
    const h = 60 * scale;
    ctx.fillStyle = n.status === 'done' ? '#3fb950' : n.status === 'running' ? '#d29922' : n.status === 'error' ? '#f85149' : getTypeColor(n.type);
    ctx.globalAlpha = n.status ? 0.9 : 0.6;
    ctx.fillRect(x, y, Math.max(w, 3), Math.max(h, 2));
  }
  ctx.globalAlpha = 1;

  // Draw viewport rectangle
  const wrap = $('canvasWrap');
  const vx = (wrap.scrollLeft - minX + pad) * scale;
  const vy = (wrap.scrollTop - minY + pad) * scale;
  const vw = wrap.clientWidth * scale;
  const vh = wrap.clientHeight * scale;
  ctx.strokeStyle = '#58a6ff';
  ctx.lineWidth = 2;
  ctx.strokeRect(vx, vy, vw, vh);
}

// ===== PNG Export =====
function downloadPNG() {
  const renderNodes = getRenderNodes();
  const renderConnections = getRenderConnections(renderNodes);
  if (renderNodes.length === 0) return toast('No workflow to export');
  const SCALE = 2;
  const PAD = 60;

  let minX = Infinity, minY = Infinity, maxX = 0, maxY = 0;
  for (const n of renderNodes) {
    minX = Math.min(minX, n.x);
    minY = Math.min(minY, n.y);
    maxX = Math.max(maxX, n.x + 240);
    maxY = Math.max(maxY, n.y + 140);
  }

  const cw = (maxX - minX + PAD * 2) * SCALE;
  const ch = (maxY - minY + PAD * 2) * SCALE;
  const canvas = document.createElement('canvas');
  canvas.width = cw;
  canvas.height = ch;
  const ctx = canvas.getContext('2d');
  ctx.scale(SCALE, SCALE);
  const ox = -minX + PAD;
  const oy = -minY + PAD;

  // Background
  ctx.fillStyle = '#0a0d12';
  ctx.fillRect(0, 0, cw / SCALE, ch / SCALE);

  // Grid dots
  ctx.fillStyle = '#2a3140';
  for (let gx = 0; gx < cw / SCALE; gx += 20) {
    for (let gy = 0; gy < ch / SCALE; gy += 20) {
      ctx.fillRect(gx, gy, 1, 1);
    }
  }

  // Connections
  for (const conn of renderConnections) {
    const from = renderNodes.find(n => n.id === conn.from);
    const to = renderNodes.find(n => n.id === conn.to);
    if (!from || !to) continue;
    const x1 = from.x + 120 + ox, y1 = from.y + 100 + oy;
    const x2 = to.x + 120 + ox, y2 = to.y + oy;
    ctx.strokeStyle = conn.type === 'parallel' ? '#a371f7' : conn.type === 'branch-case' ? '#d29922' : '#58a6ff';
    ctx.lineWidth = 2;
    if (conn.type === 'parallel') ctx.setLineDash([6, 3]);
    else if (conn.type === 'branch-case') ctx.setLineDash([4, 2, 1, 2]);
    else ctx.setLineDash([]);
    const cp = Math.max(40, Math.abs(y2 - y1) * 0.4);
    ctx.beginPath();
    ctx.moveTo(x1, y1);
    ctx.bezierCurveTo(x1, y1 + cp, x2, y2 - cp, x2, y2);
    ctx.stroke();
    ctx.setLineDash([]);
    // Arrow
    ctx.fillStyle = ctx.strokeStyle;
    ctx.beginPath();
    ctx.moveTo(x2 - 4, y2 - 8);
    ctx.lineTo(x2, y2);
    ctx.lineTo(x2 + 4, y2 - 8);
    ctx.fill();
  }

  // Nodes
  for (const node of renderNodes) {
    const nx = node.x + ox, ny = node.y + oy;
    // Card
    ctx.fillStyle = '#1a1f27';
    ctx.strokeStyle = '#2a3140';
    ctx.lineWidth = 1;
    roundRect(ctx, nx, ny, 240, 80, 8);
    ctx.fill();
    ctx.stroke();
    // Type accent bar
    ctx.fillStyle = getTypeColor(node.type);
    ctx.fillRect(nx, ny + 8, 3, 64);
    // Icon
    ctx.fillStyle = getTypeColor(node.type);
    roundRect(ctx, nx + 10, ny + 10, 24, 24, 5);
    ctx.fill();
    ctx.fillStyle = '#fff';
    ctx.font = 'bold 9px monospace';
    ctx.textAlign = 'center';
    ctx.fillText(getTypeIcon(node.type), nx + 22, ny + 26);
    // Title
    ctx.fillStyle = '#e6edf3';
    ctx.font = 'bold 11px monospace';
    ctx.textAlign = 'left';
    ctx.fillText((node.data?.meta?.title || node.id).substring(0, 28), nx + 42, ny + 24);
    // Type
    ctx.fillStyle = '#8b949e';
    ctx.font = '9px monospace';
    ctx.fillText(node.type, nx + 42, ny + 36);
    // Status
    if (node.status) {
      const sc = { done:'#3fb950', running:'#d29922', error:'#f85149', paused:'#8b5cf6', skipped:'#8b949e' };
      ctx.fillStyle = sc[node.status] || '#8b949e';
      ctx.beginPath();
      ctx.arc(nx + 230, ny + 4, 6, 0, Math.PI * 2);
      ctx.fill();
    }
  }

  // Title
  ctx.fillStyle = '#e6edf3';
  ctx.font = 'bold 14px monospace';
  ctx.textAlign = 'left';
  ctx.fillText(_currentWorkflowJson?.name || 'VL Workflow', PAD, 20);
  ctx.fillStyle = '#8b949e';
  ctx.font = '10px monospace';
  const nodeLabel = renderNodes.length === state.nodes.length
    ? `${renderNodes.length} nodes`
    : `${renderNodes.length}/${state.nodes.length} nodes`;
  ctx.fillText(`${nodeLabel} \u00b7 VL Workflow Spec ${_currentWorkflowJson?.version || '3.16'}`, PAD, 35);

  // Download
  const link = document.createElement('a');
  link.download = `workflow-${(_currentWorkflowJson?.name || 'dag').replace(/\s+/g, '-')}-${Date.now()}.png`;
  link.href = canvas.toDataURL('image/png');
  link.click();
  toast('PNG exported');
}

function roundRect(ctx, x, y, w, h, r) {
  ctx.beginPath();
  ctx.moveTo(x + r, y);
  ctx.lineTo(x + w - r, y);
  ctx.quadraticCurveTo(x + w, y, x + w, y + r);
  ctx.lineTo(x + w, y + h - r);
  ctx.quadraticCurveTo(x + w, y + h, x + w - r, y + h);
  ctx.lineTo(x + r, y + h);
  ctx.quadraticCurveTo(x, y + h, x, y + h - r);
  ctx.lineTo(x, y + r);
  ctx.quadraticCurveTo(x, y, x + r, y);
  ctx.closePath();
}

// ===== JSON Export / Import =====
function exportJSON() {
  if (!_currentWorkflowJson) return toast('No workflow to export');
  const blob = new Blob([JSON.stringify(_currentWorkflowJson, null, 2)], { type: 'application/json' });
  const link = document.createElement('a');
  link.download = `${(_currentWorkflowJson.name || 'workflow').replace(/\s+/g, '-')}-${Date.now()}.json`;
  link.href = URL.createObjectURL(blob);
  link.click();
  toast('JSON exported');
}

function importJSON() {
  $('importInput').click();
}
$('importInput')?.addEventListener('change', async (e) => {
  const file = e.target.files[0];
  if (!file) return;
  try {
    const text = await file.text();
    const json = JSON.parse(text);
    if (!json.steps?.length) throw new Error('Invalid workflow: missing steps');
    parseWorkflow(json);
    toast(`Loaded: ${json.name || file.name}`);
    window.parent.postMessage({ type: 'workflowImported', workflow: json }, '*');
  } catch (err) {
    toast('Import failed: ' + err.message);
  }
  e.target.value = '';
});

// ===== Run Workflow (SSE) =====
async function runWorkflow() {
  if (!_currentWorkflowJson) return;
  const workflowRef = await ensureWorkflowRef();
  if (!workflowRef) return toast('Workflow is not saved and could not be staged for execution');
  const clientRunToken = makeClientRunToken();
  ensureRunSession(clientRunToken, {
    clientRunToken,
    status: 'running',
    workflowName: workflowRef,
    nodeStatuses: {},
    pending: true,
  });
  _selectedRunID = clientRunToken;
  syncSelectedRun();

  const controller = new AbortController();
  setRunController(clientRunToken, controller);
  try {
    const res = await fetch('/api/workflow/execute', {
      method: 'POST',
      headers: { 'Content-Type': 'application/json' },
      body: JSON.stringify({ workflowName: workflowRef, params: {}, clientRunToken }),
      signal: controller.signal,
    });
    await streamSSE(res, clientRunToken, controller);
  } catch (err) {
    const session = _runSessions.get(clientRunToken);
    if (err.name !== 'AbortError') {
      if (session) {
        session.status = 'error';
        session.updatedAt = Date.now();
      }
      toast('Execution error: ' + err.message);
    }
  } finally {
    clearRunController(clientRunToken, controller);
  }

  syncSelectedRun();
  // Try to fetch final checkpoint
  const session = _runSessions.get(clientRunToken);
  if (session?.runID) fetchCheckpoint(session.runID);
}

function handleExecEvent(evt, runHint = null) {
  // Map engine event types to UI (support both legacy and v0.3+ naming)
  const nodeId = evt.nodeId || evt.stepID || evt.stepId;
  const evtType = evt.type;
  const actualRunID = evt.runID || evt.payload?.runID || null;
  const clientRunToken = evt.clientRunToken || evt.payload?.clientRunToken || (isClientRunToken(runHint) ? runHint : null);
  let session = null;

  const resolvedSessionID = resolveRunSessionID({
    sessionID: clientRunToken || runHint || null,
    clientRunToken,
    runID: actualRunID,
    runHint,
  }) || _selectedRunID || _currentRunID;
  if (resolvedSessionID) {
    session = ensureRunSession(resolvedSessionID, {
      clientRunToken,
      runID: actualRunID,
      workflowName: evt.name || evt.workflowName || _currentWorkflowJson?.name || '',
      pending: actualRunID ? false : undefined,
    });
  }

  if (evtType === 'workflow_start') {
    if (session) session.status = 'running';
  } else if (evtType === 'node_start' || evtType === 'step_start') {
    if (session) {
      session.status = 'running';
      session.currentStepID = nodeId;
      session.nodeStatuses[nodeId] = 'running';
    }
  } else if (evtType === 'node_done' || evtType === 'step_done') {
    if (session) {
      session.status = 'running';
      session.currentStepID = nodeId;
      session.nodeStatuses[nodeId] = 'done';
    }
  } else if (evtType === 'node_error' || evtType === 'step_error') {
    if (session) {
      session.status = 'error';
      session.currentStepID = nodeId;
      session.nodeStatuses[nodeId] = 'error';
    }
  } else if (evtType === 'node_skipped' || evtType === 'step_skipped') {
    if (session) {
      session.currentStepID = nodeId;
      session.nodeStatuses[nodeId] = 'skipped';
    }
  } else if (evtType === 'pause' || evtType === 'pause_start') {
    if (session) {
      session.status = 'paused';
      session.currentStepID = nodeId;
      session.nodeStatuses[nodeId] = 'paused';
    }
  } else if (evtType === 'resumed' || evtType === 'pause_resumed') {
    if (session) {
      session.status = 'running';
      session.currentStepID = nodeId;
      session.nodeStatuses[nodeId] = 'running';
    }
  } else if (evtType === 'tool_start') {
    if (session) {
      session.status = 'waiting';
      session.currentStepID = nodeId || session.currentStepID;
      if (nodeId) session.nodeStatuses[nodeId] = 'waiting';
    }
  } else if (evtType === 'tool_done') {
    if (session) {
      session.status = 'running';
      session.currentStepID = nodeId || session.currentStepID;
      if (nodeId && session.nodeStatuses[nodeId] === 'waiting') session.nodeStatuses[nodeId] = 'running';
    }
  } else if (evtType === 'tool_error') {
    if (session) {
      session.status = evt.allowError ? 'running' : 'error';
      session.currentStepID = nodeId || session.currentStepID;
      if (nodeId && !evt.allowError) session.nodeStatuses[nodeId] = 'error';
    }
  } else if (evtType === 'workflow_paused') {
    if (session) {
      session.status = 'paused';
      session.currentStepID = evt.payload?.pausedAt || session.currentStepID || nodeId;
    }
    fetchCheckpoint(actualRunID || session?.runID || null);
  } else if (evtType === 'done' || evtType === 'workflow_done') {
    if (session) {
      session.status = 'done';
      session.filesWritten = evt.filesWritten || evt.payload?.filesWritten || session.filesWritten || [];
    }
  } else if (evtType === 'error' || evtType === 'workflow_failed') {
    if (session) {
      session.status = 'error';
    }
  }

  // Capture checkpoint if provided
  const checkpoint = normalizeCheckpoint(evt.checkpoint || (evtType === 'checkpoint' ? evt : null));
  if (session && checkpoint) {
    session.checkpoint = checkpoint;
    session.currentStepID = checkpoint.currentStepID || session.currentStepID;
    if (checkpoint.workflowID && !session.runID) session.runID = checkpoint.workflowID;
    if (checkpoint.status === 'completed') session.status = 'done';
    else if (checkpoint.status === 'failed') session.status = 'error';
  }
  if (session) {
    if (actualRunID) session.runID = actualRunID;
    if (clientRunToken) session.clientRunToken = clientRunToken;
    if (session.runID) session.pending = false;
    recordRunEvent(session, evt);
    session.updatedAt = Date.now();
  }

  if (!_selectedRunID && session) {
    _selectedRunID = session.sessionID;
  }
  const selectedSession = getSelectedRunSession();
  const selectedMatchesRunID = !!(selectedSession && actualRunID && selectedSession.runID === actualRunID);
  if (session && (_selectedRunID === session.sessionID || _selectedRunID === runHint || _selectedRunID === clientRunToken || selectedMatchesRunID || !_selectedRunID)) {
    _selectedRunID = session.sessionID;
    syncSelectedRun();
  } else {
    renderRunSessions();
  }
  if (_selectedRunID && _runSessions.has(_selectedRunID)) {
    saveCheckpointToStorage();
  }
}

function setNodeStatus(nodeId, status) {
  const node = state.nodes.find(n => n.id === nodeId);
  if (node) {
    node.status = status;
    // Avoid full re-render during drag
    if (state.dragging) return;
    renderNodes();
    renderConnections();
    updateMinimap();
    // Scroll to node
    const el = $(`node-${nodeId}`);
    if (el) el.scrollIntoView({ behavior: 'smooth', block: 'center', inline: 'center' });
  }
}

function stopExecution() {
  if (_eventSource) { _eventSource.close(); _eventSource = null; }
  const session = getSelectedRunSession();
  if (!session) return;
  abortRunController(session.sessionID);
  if (session.runID) {
    fetch(`/api/workflow/${session.runID}/abort`, { method: 'POST' }).catch(() => {});
  }
  session.status = 'idle';
  session.updatedAt = Date.now();
  syncSelectedRun();
  $('statusLabel').textContent = 'Stopped';
  if (session.runID) fetchCheckpoint(session.runID);
}

async function pauseExecution() {
  const session = getSelectedRunSession();
  if (!session) return toast('No run selected');
  $('statusLabel').textContent = 'Pausing...';
  try {
    if (session.runID) {
      await fetch(`/api/workflow/${session.runID}/pause`, { method: 'POST' });
    } else if (!abortRunController(session.sessionID)) {
      throw new Error('No active run');
    }
    session.status = 'paused';
    session.updatedAt = Date.now();
  } catch (err) {
    // Fallback: try cancel endpoint
    try {
      if (session.runID) {
        await fetch(`/api/workflow/${session.runID}/cancel`, { method: 'POST' });
        session.status = 'paused';
        session.updatedAt = Date.now();
      } else {
        throw err;
      }
    } catch { toast('Pause failed'); }
  }
  syncSelectedRun();
  if (session.runID) fetchCheckpoint(session.runID);
}

async function resumeExecution() {
  const session = getSelectedRunSession();
  if (!session?.runID) return toast('Selected run cannot be resumed yet');
  $('statusLabel').textContent = `Resuming ${session.label}...`;
  try {
    const res = await fetch('/api/workflow/resume', {
      method: 'POST',
      headers: { 'Content-Type': 'application/json' },
      body: JSON.stringify({
        runID: session.runID,
        nodeId: session.currentStepID || null,
      }),
    });
    const body = await res.json().catch(() => ({}));
    if (!res.ok || body?.ok === false) {
      throw new Error(body?.error || `HTTP ${res.status}`);
    }
    session.status = 'running';
    session.updatedAt = Date.now();
    syncSelectedRun();
  } catch (err) {
    toast('Resume failed: ' + err.message);
    syncSelectedRun();
  }
}

// ===== Checkpoint Persistence =====
function saveCheckpointToStorage() {
  if (!_currentWorkflowJson?.name) return;
  try {
    const key = `wf_cp_${_currentWorkflowJson.name}`;
    const selected = getSelectedRunSession();
    const data = {
      checkpoint: selected?.checkpoint || _lastCheckpoint,
      nodeStatuses: state.nodes.map(n => ({ id: n.id, status: n.status })),
      runID: _currentRunID,
      selectedRunID: _selectedRunID,
      sessions: listRunSessions().map((session) => ({
        sessionID: session.sessionID,
        clientRunToken: session.clientRunToken,
        runID: session.runID,
        seq: session.seq,
        label: session.label,
        workflowName: session.workflowName,
        status: session.status,
        nodeStatuses: session.nodeStatuses,
        checkpoint: session.checkpoint,
        filesWritten: session.filesWritten,
        currentStepID: session.currentStepID,
        events: session.events,
        updatedAt: session.updatedAt,
        pending: !!session.pending,
      })),
      ts: Date.now()
    };
    localStorage.setItem(key, JSON.stringify(data));
  } catch {}
}

function restoreFromStorage() {
  if (!_currentWorkflowJson?.name) return false;
  try {
    const key = `wf_cp_${_currentWorkflowJson.name}`;
    const raw = localStorage.getItem(key);
    if (!raw) return false;
    const data = JSON.parse(raw);
    // Only restore if less than 24h old
    if (Date.now() - data.ts > 86400000) { localStorage.removeItem(key); return false; }
    if (Array.isArray(data.sessions) && data.sessions.length) {
      _runSessions = new Map();
      _runSeq = 0;
      _runTokenSeq = 0;
      for (const item of data.sessions) {
        const sessionID = item.sessionID || item.clientRunToken || item.runID;
        if (!sessionID) continue;
        ensureRunSession(sessionID, {
          clientRunToken: item.clientRunToken,
          runID: item.runID,
          seq: item.seq,
          label: item.label,
          workflowName: item.workflowName,
          status: item.status,
          nodeStatuses: item.nodeStatuses,
          checkpoint: normalizeCheckpoint(item.checkpoint),
          filesWritten: item.filesWritten,
          currentStepID: item.currentStepID,
          events: item.events,
          updatedAt: item.updatedAt,
          pending: item.pending,
        });
      }
      _selectedRunID = data.selectedRunID && _runSessions.has(data.selectedRunID)
        ? data.selectedRunID
        : listRunSessions()[0]?.sessionID || null;
      applySelectedRunToNodes();
      return true;
    }

    _runSessions = new Map();
    _runSeq = 0;
    _runTokenSeq = 0;
    const legacyRunID = data.runID || `restored:${Date.now()}`;
    const nodeStatuses = {};
    for (const ns of data.nodeStatuses || []) {
      if (ns?.id && ns?.status) nodeStatuses[ns.id] = ns.status;
    }
    ensureRunSession(legacyRunID, {
      status: 'paused',
      nodeStatuses,
      checkpoint: normalizeCheckpoint(data.checkpoint),
      updatedAt: data.ts,
      pending: isPendingRunID(legacyRunID),
    });
    _selectedRunID = legacyRunID;
    applySelectedRunToNodes();
    return true;
  } catch { return false; }
}

async function fetchCheckpoint(runID = _currentRunID) {
  if (!runID || isPendingRunID(runID)) return;
  try {
    const res = await fetch(`/api/workflow/${runID}/checkpoint`);
    if (res.ok) {
      const checkpoint = normalizeCheckpoint(await res.json());
      if (checkpoint) {
        const sessionID = findRunSessionIDByRunID(runID) || runID;
        const session = ensureRunSession(sessionID, { runID });
        if (session) {
          session.checkpoint = checkpoint;
          session.currentStepID = checkpoint.currentStepID || session.currentStepID;
          session.updatedAt = Date.now();
        }
        const selectedSession = getSelectedRunSession();
        if (selectedSession?.runID === runID || _selectedRunID === sessionID) _lastCheckpoint = checkpoint;
        saveCheckpointToStorage();
        if (selectedSession?.runID === runID || _selectedRunID === sessionID) syncSelectedRun();
      }
    }
  } catch {}
}

// ===== Re-run from Step =====
async function rerunFromStep(stepId, overrides = {}) {
  if (!_currentWorkflowJson) return toast('No workflow loaded');
  const workflowRef = await ensureWorkflowRef();
  if (!workflowRef) return toast('Workflow is not saved and could not be staged for re-run');
  if (!_lastCheckpoint && _currentRunID) {
    await fetchCheckpoint();
  }

  // Build checkpoint: use last checkpoint or create minimal one
  const baseCheckpoint = normalizeCheckpoint(_lastCheckpoint);
  const checkpoint = baseCheckpoint ? { ...baseCheckpoint, currentStepID: stepId }
    : { currentStepID: stepId, params: {}, variables: {} };

  // Apply overrides
  if (Object.keys(overrides).length > 0 && checkpoint.variables) {
    Object.assign(checkpoint.variables, overrides);
  }

  // Clear statuses for this node and all subsequent
  const stepIdx = state.nodes.findIndex(n => n.id === stepId);
  if (stepIdx >= 0) {
    // Clear this node and downstream
    const toClear = new Set();
    function markDownstream(id) {
      if (toClear.has(id)) return;
      toClear.add(id);
      for (const c of state.connections) {
        if (c.from === id) markDownstream(c.to);
      }
    }
    markDownstream(stepId);
    for (const n of state.nodes) {
      if (toClear.has(n.id)) n.status = null;
    }
    renderNodes();
    renderConnections();
  }

  const clientRunToken = makeClientRunToken();
  ensureRunSession(clientRunToken, {
    clientRunToken,
    status: 'running',
    workflowName: workflowRef,
    runID: null,
    checkpoint,
    currentStepID: stepId,
    nodeStatuses: {},
    pending: true,
  });
  _selectedRunID = clientRunToken;
  syncSelectedRun();
  $('statusLabel').textContent = `Re-running from ${stepId}...`;

  const controller = new AbortController();
  setRunController(clientRunToken, controller);
  try {
    const res = await fetch('/api/workflow/rerun', {
      method: 'POST',
      headers: { 'Content-Type': 'application/json' },
      signal: controller.signal,
      body: JSON.stringify({
        workflowName: workflowRef,
        checkpoint,
        stepID: stepId,
        overrides,
        clientRunToken
      })
    });

    if (!res.ok) {
      // Fallback: try execute with fromStep
      const res2 = await fetch('/api/workflow/execute', {
        method: 'POST',
        headers: { 'Content-Type': 'application/json' },
        signal: controller.signal,
        body: JSON.stringify({
          workflowName: workflowRef,
          params: {},
          fromStep: stepId,
          checkpoint,
          overrides,
          clientRunToken
        })
      });
      if (!res2.ok) throw new Error('Rerun failed');
      await streamSSE(res2, clientRunToken, controller);
    } else {
      await streamSSE(res, clientRunToken, controller);
    }
  } catch (err) {
    const session = _runSessions.get(clientRunToken);
    if (err.name !== 'AbortError') {
      if (session) {
        session.status = 'error';
        session.updatedAt = Date.now();
      }
      toast('Re-run error: ' + err.message);
    }
  } finally {
    clearRunController(clientRunToken, controller);
  }

  syncSelectedRun();
  const session = _runSessions.get(clientRunToken);
  if (session?.runID) fetchCheckpoint(session.runID);
}

async function streamSSE(res, runHint = null, controller = null) {
  const reader = res.body.getReader();
  const decoder = new TextDecoder();
  let buf = '';
  try {
    while (true) {
      const { done, value } = await reader.read();
      if (done) break;
      buf += decoder.decode(value, { stream: true });
      const frames = buf.split('\n\n');
      buf = frames.pop();
      for (const frame of frames) {
        let eventType = '';
        const dataLines = [];
        for (const rawLine of frame.split('\n')) {
          const line = rawLine.trimEnd();
          if (!line || line.startsWith(':')) continue;
          if (line.startsWith('event:')) {
            eventType = line.slice(6).trim();
          } else if (line.startsWith('data:')) {
            dataLines.push(line.slice(5).trimStart());
          }
        }
        if (!dataLines.length) continue;
        try {
          const payload = JSON.parse(dataLines.join('\n'));
          if (eventType && payload && typeof payload === 'object' && payload.type == null) {
            payload.type = eventType;
          }
          handleExecEvent(payload, runHint);
        } catch {}
      }
    }
  } finally {
    clearRunController(runHint, controller);
    updateExecutionControls();
    renderRunSessions();
    const session = runHint ? _runSessions.get(runHint) : null;
    if (_selectedRunID === runHint || (_selectedRunID && session && _selectedRunID === session.sessionID)) {
      syncSelectedRun(false);
    }
  }
}

async function fetchWorkflowContent(ref, workDir = '') {
  const qs = new URLSearchParams();
  qs.set('ref', ref);
  if (workDir) qs.set('work_dir', workDir);
  const res = await fetch(`/api/workflow-content?${qs.toString()}`);
  const data = await res.json().catch(() => ({}));
  if (!res.ok) throw new Error(data?.error || `HTTP ${res.status}`);
  return data;
}

async function openSubflowNode(node = null) {
  const targetNode = node || state.nodes.find((entry) => entry.id === state.selectedNodeId) || null;
  if (!targetNode || targetNode.type !== 'Subflow') {
    toast('Select a Subflow node first');
    return;
  }
  const target = resolveSubflowTarget(targetNode.data || {});
  if (!target.ok) {
    toast(target.reason || 'Child workflow cannot be opened');
    return;
  }

  const parentSnapshot = {
    workflow: cloneJSON(_currentWorkflowJson),
    workflowRef: _workflowRef,
    label: _currentWorkflowJson?.name || summarizePathLabel(_workflowRef) || 'workflow',
    selectedNodeId: targetNode.id,
  };

  try {
    const payload = await fetchWorkflowContent(target.ref, target.workDir);
    _workflowNavStack.push(parentSnapshot);
    parseWorkflow(payload.workflow || payload, payload.workflowRef || normalizeWorkflowRef(target.ref), {
      preserveNav: true,
      title: payload.title || payload.workflow?.name || target.label || 'Subflow',
    });
    toast(`Opened subflow: ${payload.title || target.label || target.ref}`);
  } catch (err) {
    toast(`Open child failed: ${err.message}`);
  }
}

function openSelectedSubflow() {
  openSubflowNode();
}

function navigateBack() {
  const previous = _workflowNavStack.pop();
  if (!previous?.workflow) return;
  parseWorkflow(previous.workflow, previous.workflowRef || null, {
    preserveNav: true,
    selectedNodeId: previous.selectedNodeId || null,
    title: previous.workflow?.name || summarizePathLabel(previous.workflowRef) || 'VL Workflow DAG',
  });
  if (previous.selectedNodeId) {
    const el = $(`node-${previous.selectedNodeId}`);
    if (el) el.scrollIntoView({ behavior: 'smooth', block: 'center', inline: 'center' });
  }
}

async function loadWorkflowFromLocation() {
  const search = window.location?.search || '';
  if (!search) return false;
  const params = new URLSearchParams(search);
  const workflowRef = params.get('workflow') || params.get('ref');
  if (!workflowRef) return false;
  const workDir = params.get('work_dir') || '';
  try {
    const payload = await fetchWorkflowContent(workflowRef, workDir);
    parseWorkflow(payload.workflow || payload, payload.workflowRef || normalizeWorkflowRef(workflowRef), {
      title: payload.title || payload.workflow?.name || summarizePathLabel(workflowRef) || 'VL Workflow DAG',
    });
    toast(`Loaded workflow: ${payload.title || summarizePathLabel(workflowRef) || workflowRef}`);
    return true;
  } catch (err) {
    toast(`Load failed: ${err.message}`);
    return false;
  }
}

// ===== Context Menu =====
function showContextMenu(e, node) {
  e.preventDefault();
  _ctxTargetNode = node;
  const menu = $('ctxMenu');
  $('ctxNodeIdHint').textContent = node.id;

  // Enable/disable based on state
  const hasCheckpoint = !!_lastCheckpoint;
  const rerunItem = $('ctxRerun');
  const editItem = $('ctxEditRerun');
  const openChildItem = $('ctxOpenChild');
  const openChildSep = $('ctxOpenChildSep');
  const childTarget = node.type === 'Subflow' ? resolveSubflowTarget(node.data || {}) : null;
  if (hasCheckpoint || _currentWorkflowJson) {
    rerunItem.classList.remove('disabled');
    editItem.classList.remove('disabled');
  } else {
    rerunItem.classList.add('disabled');
    editItem.classList.add('disabled');
  }
  if (node.type === 'Subflow') {
    openChildItem.style.display = '';
    openChildSep.style.display = '';
    if (childTarget?.ok) openChildItem.classList.remove('disabled');
    else openChildItem.classList.add('disabled');
  } else {
    openChildItem.style.display = 'none';
    openChildSep.style.display = 'none';
  }

  // Position
  menu.style.left = Math.min(e.clientX, window.innerWidth - 200) + 'px';
  menu.style.top = Math.min(e.clientY, window.innerHeight - 160) + 'px';
  menu.classList.add('show');
}

function hideContextMenu() {
  $('ctxMenu').classList.remove('show');
  _ctxTargetNode = null;
}

function ctxRerunFromHere() {
  hideContextMenu();
  if (!_ctxTargetNode) return;
  rerunFromStep(_ctxTargetNode.id);
}

function ctxEditAndRerun() {
  hideContextMenu();
  if (!_ctxTargetNode) return;
  openEditor(_ctxTargetNode);
}

function ctxOpenChildWorkflow() {
  const target = _ctxTargetNode;
  hideContextMenu();
  if (!target) return;
  openSubflowNode(target);
}

function ctxViewDetails() {
  hideContextMenu();
  if (!_ctxTargetNode) return;
  window.parent.postMessage({
    type: 'nodeClick',
    nodeId: _ctxTargetNode.id,
    nodeType: _ctxTargetNode.type,
    nodeData: _ctxTargetNode.data
  }, '*');
}

function ctxCopyId() {
  hideContextMenu();
  if (!_ctxTargetNode) return;
  navigator.clipboard?.writeText(_ctxTargetNode.id);
  toast('Copied: ' + _ctxTargetNode.id);
}

// Close context menu on click elsewhere
document.addEventListener('click', (e) => {
  if (!e.target.closest('.ctx-menu')) hideContextMenu();
});

// ===== Node Editor Modal =====
function openEditor(node) {
  _editorNode = node;
  const data = node.data || {};
  const type = node.type;

  $('editorTitle').textContent = `Edit: ${data.meta?.title || node.id} (${type})`;

  let html = '';

  // Status indicator
  const statusText = node.status || 'pending';
  html += `<div class="editor-status">
    <div class="editor-status-dot ${statusText}"></div>
    <span class="editor-status-text">Status: ${statusText} | Node: ${esc(node.id)}</span>
  </div>`;

  // Type-specific editor fields
  if (type === 'LLM') {
    const model = data.in?.model || data.model || '';
    const msgs = data.in?.messages ? JSON.stringify(data.in.messages, null, 2) : '[]';
    const maxTokens = data.in?.max_tokens || '';
    html += `<div class="editor-field"><div class="editor-label">Model</div>
      <input class="editor-input" id="edit_model" value="${esc(model)}" placeholder="e.g. anthropic/claude-opus-4-6"></div>`;
    html += `<div class="editor-field"><div class="editor-label">Max Tokens</div>
      <input class="editor-input" id="edit_max_tokens" value="${esc(String(maxTokens))}" type="number" placeholder="4096"></div>`;
    html += `<div class="editor-field"><div class="editor-label">Messages (JSON)</div>
      <textarea class="editor-json" id="edit_messages">${esc(msgs)}</textarea>
      <div class="editor-error" id="edit_messages_err"></div></div>`;
  } else if (type === 'Service' || type === 'API' || type === 'Component') {
    const inData = data.in ? JSON.stringify(data.in, null, 2) : '{}';
    html += `<div class="editor-field"><div class="editor-label">Input Parameters (JSON)</div>
      <textarea class="editor-json" id="edit_in">${esc(inData)}</textarea>
      <div class="editor-error" id="edit_in_err"></div></div>`;
  } else if (type === 'Tool') {
    const toolName = data.tool || data.toolName || data.name || '';
    const inData = (data.input || data.in) ? JSON.stringify(data.input || data.in, null, 2) : '{}';
    html += `<div class="editor-field"><div class="editor-label">Tool Name</div>
      <input class="editor-input" id="edit_tool_name" value="${esc(toolName)}" placeholder="e.g. ReadFile"></div>`;
    html += `<div class="editor-field"><div class="editor-label">Tool Input (JSON)</div>
      <textarea class="editor-json" id="edit_tool_input">${esc(inData)}</textarea>
      <div class="editor-error" id="edit_tool_input_err"></div></div>`;
    html += `<div class="editor-field"><div class="editor-label">Timeout (ms)</div>
      <input class="editor-input" id="edit_timeout" value="${esc(String(data.timeout || ''))}" type="number" placeholder="30000"></div>`;
    html += `<div class="editor-field"><label class="editor-label" style="display:flex;gap:8px;align-items:center;">
      <input type="checkbox" id="edit_allow_error" ${data.allowError || data.continueOnError ? 'checked' : ''}>
      Continue on tool error
    </label></div>`;
  } else if (type === 'Subflow') {
    const workflowPath = data.workflow_path || data.workflowPath || data.path || data.workflow || '';
    const paramsJson = JSON.stringify(data.params || data.input || data.in || {}, null, 2);
    const mode = data.mode || data.executionMode || 'sync';
    const workDir = data.work_dir || data.workDir || data.base_dir || data.baseDir || data.subspace || '';
    const emitEvents = data.emit_events !== false && data.emitEvents !== false;
    html += `<div class="editor-field"><div class="editor-label">Child Workflow</div>
      <input class="editor-input" id="edit_subflow_path" value="${esc(String(workflowPath))}" placeholder="e.g. examples/workflows/child.json"></div>`;
    html += `<div class="editor-field"><div class="editor-label">Mode</div>
      <input class="editor-input" id="edit_subflow_mode" value="${esc(String(mode))}" placeholder="sync"></div>`;
    html += `<div class="editor-field"><div class="editor-label">Child Work Dir</div>
      <input class="editor-input" id="edit_subflow_workdir" value="${esc(String(workDir))}" placeholder="optional subspace dir"></div>`;
    html += `<div class="editor-field"><div class="editor-label">Child Params (JSON)</div>
      <textarea class="editor-json" id="edit_subflow_params">${esc(paramsJson)}</textarea>
      <div class="editor-error" id="edit_subflow_params_err"></div></div>`;
    html += `<div class="editor-field"><label class="editor-label" style="display:flex;gap:8px;align-items:center;">
      <input type="checkbox" id="edit_subflow_events" ${emitEvents ? 'checked' : ''}>
      Forward child events
    </label></div>`;
  } else if (type === 'Set') {
    html += `<div class="editor-field"><div class="editor-label">Target Variable</div>
      <input class="editor-input" id="edit_target" value="${esc(data.target || '')}"></div>`;
    html += `<div class="editor-field"><div class="editor-label">Value (expression)</div>
      <input class="editor-input" id="edit_value" value="${esc(String(data.value || ''))}"></div>`;
  } else if (type === 'Write') {
    html += `<div class="editor-field"><div class="editor-label">Target Path</div>
      <input class="editor-input" id="edit_target" value="${esc(data.target || '')}"></div>`;
    html += `<div class="editor-field"><div class="editor-label">Value (expression)</div>
      <input class="editor-input" id="edit_value" value="${esc(String(data.value || ''))}"></div>`;
  } else if (type === 'Download') {
    const src = typeof data.source === 'object' ? JSON.stringify(data.source, null, 2) : String(data.source || '');
    html += `<div class="editor-field"><div class="editor-label">Source URL / Config</div>
      <textarea class="editor-json" id="edit_source">${esc(src)}</textarea></div>`;
    if (data.target != null) {
      html += `<div class="editor-field"><div class="editor-label">Target Path</div>
        <input class="editor-input" id="edit_target" value="${esc(data.target || '')}"></div>`;
    }
  } else if (type === 'Loop') {
    if (data.while) {
      html += `<div class="editor-field"><div class="editor-label">While Expression</div>
        <input class="editor-input" id="edit_while" value="${esc(data.while)}"></div>`;
      html += `<div class="editor-field"><div class="editor-label">Max Iterations</div>
        <input class="editor-input" id="edit_maxIterations" value="${esc(String(data.maxIterations || ''))}" type="number"></div>`;
    } else {
      html += `<div class="editor-field"><div class="editor-label">Source Expression</div>
        <input class="editor-input" id="edit_source" value="${esc(data.source || '')}"></div>`;
    }
  } else {
    // Generic: show full step JSON
    const stepJson = JSON.stringify(data, null, 2);
    html += `<div class="editor-field"><div class="editor-label">Step Data (JSON)</div>
      <textarea class="editor-json" id="edit_raw" style="min-height:200px">${esc(stepJson)}</textarea>
      <div class="editor-error" id="edit_raw_err"></div></div>`;
  }

  // Variable overrides section
  html += `<div class="editor-field" style="margin-top:12px; border-top:1px solid var(--border); padding-top:10px;">
    <div class="editor-label">Variable Overrides (optional)</div>
    <textarea class="editor-json" id="edit_overrides" placeholder='{ "$varName": "newValue" }'>{}</textarea>
    <div class="editor-hint">Override pipeline variables before re-running. Use $varName keys.</div>
    <div class="editor-error" id="edit_overrides_err"></div>
  </div>`;

  $('editorBody').innerHTML = html;
  $('editorOverlay').classList.add('show');
}

function closeEditor() {
  $('editorOverlay').classList.remove('show');
  _editorNode = null;
}

function editorRerun() {
  if (!_editorNode) return;

  // Collect overrides
  let overrides = {};
  const overridesEl = $('edit_overrides');
  if (overridesEl) {
    try {
      overrides = JSON.parse(overridesEl.value || '{}');
      const errEl = $('edit_overrides_err');
      if (errEl) errEl.style.display = 'none';
    } catch (e) {
      const errEl = $('edit_overrides_err');
      if (errEl) { errEl.textContent = 'Invalid JSON: ' + e.message; errEl.style.display = 'block'; }
      return;
    }
  }

  // Collect edited step data and merge into overrides
  const type = _editorNode.type;
  const data = _editorNode.data || {};

  if (type === 'LLM') {
    const model = $('edit_model')?.value;
    const maxTokens = $('edit_max_tokens')?.value;
    const msgsEl = $('edit_messages');
    if (msgsEl) {
      try { JSON.parse(msgsEl.value); } catch (e) {
        const err = $('edit_messages_err');
        if (err) { err.textContent = 'Invalid JSON: ' + e.message; err.style.display = 'block'; }
        return;
      }
    }
    // Update step data in memory for visual accuracy
    if (model && data.in) data.in.model = model;
    if (data.model !== undefined && model) data.model = model;
    if (maxTokens && data.in) data.in.max_tokens = parseInt(maxTokens);
    if (msgsEl && data.in) { try { data.in.messages = JSON.parse(msgsEl.value); } catch {} }
  } else if ((type === 'Service' || type === 'API' || type === 'Component') && $('edit_in')) {
    try {
      const newIn = JSON.parse($('edit_in').value);
      data.in = newIn;
    } catch (e) {
      const err = $('edit_in_err');
      if (err) { err.textContent = 'Invalid JSON: ' + e.message; err.style.display = 'block'; }
      return;
    }
  } else if (type === 'Tool' && $('edit_tool_input')) {
    const toolName = $('edit_tool_name')?.value?.trim();
    if (toolName) data.tool = toolName;
    else delete data.tool;
    try {
      const newIn = JSON.parse($('edit_tool_input').value || '{}');
      data.input = newIn;
      delete data.in;
    } catch (e) {
      const err = $('edit_tool_input_err');
      if (err) { err.textContent = 'Invalid JSON: ' + e.message; err.style.display = 'block'; }
      return;
    }
    const timeoutValue = $('edit_timeout')?.value?.trim();
    if (timeoutValue) data.timeout = parseInt(timeoutValue, 10);
    else delete data.timeout;
    data.allowError = !!$('edit_allow_error')?.checked;
    if (!data.allowError) delete data.allowError;
  } else if (type === 'Subflow' && $('edit_subflow_params')) {
    const workflowPath = $('edit_subflow_path')?.value?.trim();
    const mode = $('edit_subflow_mode')?.value?.trim();
    const workDir = $('edit_subflow_workdir')?.value?.trim();
    if (workflowPath) data.workflow_path = workflowPath;
    else delete data.workflow_path;
    if (mode) data.mode = mode;
    else delete data.mode;
    if (workDir) data.work_dir = workDir;
    else delete data.work_dir;
    try {
      data.params = JSON.parse($('edit_subflow_params').value || '{}');
      delete data.input;
      delete data.in;
    } catch (e) {
      const err = $('edit_subflow_params_err');
      if (err) { err.textContent = 'Invalid JSON: ' + e.message; err.style.display = 'block'; }
      return;
    }
    if ($('edit_subflow_events')?.checked) data.emit_events = true;
    else data.emit_events = false;
  } else if ((type === 'Set' || type === 'Write') && $('edit_target')) {
    data.target = $('edit_target').value;
    data.value = $('edit_value')?.value || data.value;
  } else if (type === 'Download' && $('edit_source')) {
    try {
      data.source = JSON.parse($('edit_source').value);
    } catch { data.source = $('edit_source').value; }
    if ($('edit_target')) data.target = $('edit_target').value;
  } else if (type === 'Loop') {
    if ($('edit_while')) data.while = $('edit_while').value;
    if ($('edit_maxIterations')) data.maxIterations = parseInt($('edit_maxIterations').value);
    if ($('edit_source')) data.source = $('edit_source').value;
  } else if ($('edit_raw')) {
    try {
      const raw = JSON.parse($('edit_raw').value);
      Object.assign(data, raw);
    } catch (e) {
      const err = $('edit_raw_err');
      if (err) { err.textContent = 'Invalid JSON: ' + e.message; err.style.display = 'block'; }
      return;
    }
  }

  // Notify parent of edits
  window.parent.postMessage({
    type: 'nodeEdited',
    nodeId: _editorNode.id,
    nodeData: data,
    overrides
  }, '*');

  // Re-run
  const rerunNodeId = _editorNode.id;
  closeEditor();
  rerunFromStep(rerunNodeId, overrides);
}

// ===== PostMessage API =====
window.addEventListener('message', (e) => {
  if (!e.data?.type) return;
  switch (e.data.type) {
    case 'loadWorkflow':
      parseWorkflow(e.data.data, e.data.workflowName || e.data.name || null);
      break;
    case 'highlightNode':
      state.selectedNodeId = e.data.nodeId;
      renderNodes();
      renderConnections();
      updateNavigationChrome();
      const el = $(`node-${e.data.nodeId}`);
      if (el) el.scrollIntoView({ behavior: 'smooth', block: 'center', inline: 'center' });
      break;
    case 'updateNodeStatus': {
      const typeMap = {
        running: 'node_start',
        done: 'node_done',
        error: 'node_error',
        skipped: 'node_skipped',
        paused: 'pause',
      };
      handleExecEvent({
        type: typeMap[e.data.status] || 'node_start',
        nodeId: e.data.nodeId,
        runID: e.data.runID || null,
        clientRunToken: e.data.clientRunToken || null,
      }, e.data.clientRunToken || e.data.runID || null);
      break;
    }
    case 'workflowEvent':
      handleExecEvent(e.data.event || {}, e.data.event?.clientRunToken || e.data.event?.runID || null);
      break;
    case 'clearStatus':
      clearRunSessions();
      renderNodes();
      renderConnections();
      updateMinimap();
      break;
    case 'setCheckpoint':
      handleExecEvent({ type: 'checkpoint', checkpoint: e.data.checkpoint, runID: e.data.runID || null, clientRunToken: e.data.clientRunToken || null }, e.data.clientRunToken || e.data.runID || null);
      break;
    case 'rerunFromStep':
      rerunFromStep(e.data.stepId || e.data.nodeId, e.data.overrides || {});
      break;
    case 'editNode': {
      const node = state.nodes.find(n => n.id === (e.data.nodeId || e.data.stepId));
      if (node) openEditor(node);
      break;
    }
  }
});

// ===== Init =====
loadUIPreferences();
applyUIState();
initDrag();
window.parent.postMessage({ type: 'ready' }, '*');
loadWorkflowFromLocation();

// Scroll events update minimap
$('canvasWrap')?.addEventListener('scroll', () => { renderConnections(); updateMinimap(); });
$('canvasWrap')?.addEventListener('click', (e) => {
  const target = e.target;
  if (target?.closest?.('.node')) return;
  if (target?.closest?.('.ctx-menu, .modal, .toolbar, .runbar, .eventbar, .sidebar, .minimap')) return;
  deselectSelectedNode();
});
window.addEventListener('resize', () => { renderConnections(); updateMinimap(); });

async function ensureWorkflowRef() {
  if (_workflowRef) return _workflowRef;
  if (!_currentWorkflowJson) return null;

  try {
    const res = await fetch('/api/workflow/ephemeral', {
      method: 'POST',
      headers: { 'Content-Type': 'application/json' },
      body: JSON.stringify(_currentWorkflowJson),
    });
    const data = await res.json();
    if (data?.ok && data.name) {
      _workflowRef = data.name;
      return _workflowRef;
    }
  } catch {}

  return _currentWorkflowJson?.name || null;
}
</script>
</body>
</html>