Главная Обзор Помощь
Вход
lisihan
/
video-image-production-build
1
0
Ответвить 0
Файлы Задачи 0 Запросы на слияние 0 Вики
Ветка: main
Ветки Метки
video-image-...
/
visualization
/
web
/
index.html

index.html 246 KB
Постоянная ссылка История Исходник

1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556575859606162636465666768697071727374757677787980818283848586878889909192939495969798991001011021031041051061071081091101111121131141151161171181191201211221231241251261271281291301311321331341351361371381391401411421431441451461471481491501511521531541551561571581591601611621631641651661671681691701711721731741751761771781791801811821831841851861871881891901911921931941951961971981992002012022032042052062072082092102112122132142152162172182192202212222232242252262272282292302312322332342352362372382392402412422432442452462472482492502512522532542552562572582592602612622632642652662672682692702712722732742752762772782792802812822832842852862872882892902912922932942952962972982993003013023033043053063073083093103113123133143153163173183193203213223233243253263273283293303313323333343353363373383393403413423433443453463473483493503513523533543553563573583593603613623633643653663673683693703713723733743753763773783793803813823833843853863873883893903913923933943953963973983994004014024034044054064074084094104114124134144154164174184194204214224234244254264274284294304314324334344354364374384394404414424434444454464474484494504514524534544554564574584594604614624634644654664674684694704714724734744754764774784794804814824834844854864874884894904914924934944954964974984995005015025035045055065075085095105115125135145155165175185195205215225235245255265275285295305315325335345355365375385395405415425435445455465475485495505515525535545555565575585595605615625635645655665675685695705715725735745755765775785795805815825835845855865875885895905915925935945955965975985996006016026036046056066076086096106116126136146156166176186196206216226236246256266276286296306316326336346356366376386396406416426436446456466476486496506516526536546556566576586596606616626636646656666676686696706716726736746756766776786796806816826836846856866876886896906916926936946956966976986997007017027037047057067077087097107117127137147157167177187197207217227237247257267277287297307317327337347357367377387397407417427437447457467477487497507517527537547557567577587597607617627637647657667677687697707717727737747757767777787797807817827837847857867877887897907917927937947957967977987998008018028038048058068078088098108118128138148158168178188198208218228238248258268278288298308318328338348358368378388398408418428438448458468478488498508518528538548558568578588598608618628638648658668678688698708718728738748758768778788798808818828838848858868878888898908918928938948958968978988999009019029039049059069079089099109119129139149159169179189199209219229239249259269279289299309319329339349359369379389399409419429439449459469479489499509519529539549559569579589599609619629639649659669679689699709719729739749759769779789799809819829839849859869879889899909919929939949959969979989991000100110021003100410051006100710081009101010111012101310141015101610171018101910201021102210231024102510261027102810291030103110321033103410351036103710381039104010411042104310441045104610471048104910501051105210531054105510561057105810591060106110621063106410651066106710681069107010711072107310741075107610771078107910801081108210831084108510861087108810891090109110921093109410951096109710981099110011011102110311041105110611071108110911101111111211131114111511161117111811191120112111221123112411251126112711281129113011311132113311341135113611371138113911401141114211431144114511461147114811491150115111521153115411551156115711581159116011611162116311641165116611671168116911701171117211731174117511761177117811791180118111821183118411851186118711881189119011911192119311941195119611971198119912001201120212031204120512061207120812091210121112121213121412151216121712181219122012211222122312241225122612271228122912301231123212331234123512361237123812391240124112421243124412451246124712481249125012511252125312541255125612571258125912601261126212631264126512661267126812691270127112721273127412751276127712781279128012811282128312841285128612871288128912901291129212931294129512961297129812991300130113021303130413051306130713081309131013111312131313141315131613171318131913201321132213231324132513261327132813291330133113321333133413351336133713381339134013411342134313441345134613471348134913501351135213531354135513561357135813591360136113621363136413651366136713681369137013711372137313741375137613771378137913801381138213831384138513861387138813891390139113921393139413951396139713981399140014011402140314041405140614071408140914101411141214131414141514161417141814191420142114221423142414251426142714281429143014311432143314341435143614371438143914401441144214431444144514461447144814491450145114521453145414551456145714581459146014611462146314641465146614671468146914701471147214731474147514761477147814791480148114821483148414851486148714881489149014911492149314941495149614971498149915001501150215031504150515061507150815091510151115121513151415151516151715181519152015211522152315241525152615271528152915301531153215331534153515361537153815391540154115421543154415451546154715481549155015511552155315541555155615571558155915601561156215631564156515661567156815691570157115721573157415751576157715781579158015811582158315841585158615871588158915901591159215931594159515961597159815991600160116021603160416051606160716081609161016111612161316141615161616171618161916201621162216231624162516261627162816291630163116321633163416351636163716381639164016411642164316441645164616471648164916501651165216531654165516561657165816591660166116621663166416651666166716681669167016711672167316741675167616771678167916801681168216831684168516861687168816891690169116921693169416951696169716981699170017011702170317041705170617071708170917101711171217131714171517161717171817191720172117221723172417251726172717281729173017311732173317341735173617371738173917401741174217431744174517461747174817491750175117521753175417551756175717581759176017611762176317641765176617671768176917701771177217731774177517761777177817791780178117821783178417851786178717881789179017911792179317941795179617971798179918001801180218031804180518061807180818091810181118121813181418151816181718181819182018211822182318241825182618271828182918301831183218331834183518361837183818391840184118421843184418451846184718481849185018511852185318541855185618571858185918601861186218631864186518661867186818691870187118721873187418751876187718781879188018811882188318841885188618871888188918901891189218931894189518961897189818991900190119021903190419051906190719081909191019111912191319141915191619171918191919201921192219231924192519261927192819291930193119321933193419351936193719381939194019411942194319441945194619471948194919501951195219531954195519561957195819591960196119621963196419651966196719681969197019711972197319741975197619771978197919801981198219831984198519861987198819891990199119921993199419951996199719981999200020012002200320042005200620072008200920102011201220132014201520162017201820192020202120222023202420252026202720282029203020312032203320342035203620372038203920402041204220432044204520462047204820492050205120522053205420552056205720582059206020612062206320642065206620672068206920702071207220732074207520762077207820792080208120822083208420852086208720882089209020912092209320942095209620972098209921002101210221032104210521062107210821092110211121122113211421152116211721182119212021212122212321242125212621272128212921302131213221332134213521362137213821392140214121422143214421452146214721482149215021512152215321542155215621572158215921602161216221632164216521662167216821692170217121722173217421752176217721782179218021812182218321842185218621872188218921902191219221932194219521962197219821992200220122022203220422052206220722082209221022112212221322142215221622172218221922202221222222232224222522262227222822292230223122322233223422352236223722382239224022412242224322442245224622472248224922502251225222532254225522562257225822592260226122622263226422652266226722682269227022712272227322742275227622772278227922802281228222832284228522862287228822892290229122922293229422952296229722982299230023012302230323042305230623072308230923102311231223132314231523162317231823192320232123222323232423252326232723282329233023312332233323342335233623372338233923402341234223432344234523462347234823492350235123522353235423552356235723582359236023612362236323642365236623672368236923702371237223732374237523762377237823792380238123822383238423852386238723882389239023912392239323942395239623972398239924002401240224032404240524062407240824092410241124122413241424152416241724182419242024212422242324242425242624272428242924302431243224332434243524362437243824392440244124422443244424452446244724482449245024512452245324542455245624572458245924602461246224632464246524662467246824692470247124722473247424752476247724782479248024812482248324842485248624872488248924902491249224932494249524962497249824992500250125022503250425052506250725082509251025112512251325142515251625172518251925202521252225232524252525262527252825292530253125322533253425352536253725382539254025412542254325442545254625472548254925502551255225532554255525562557255825592560256125622563256425652566256725682569257025712572257325742575257625772578257925802581258225832584258525862587258825892590259125922593259425952596259725982599260026012602260326042605260626072608260926102611261226132614261526162617261826192620262126222623262426252626262726282629263026312632263326342635263626372638263926402641264226432644264526462647264826492650265126522653265426552656265726582659266026612662266326642665266626672668266926702671267226732674267526762677267826792680268126822683268426852686268726882689269026912692269326942695269626972698269927002701270227032704270527062707270827092710271127122713271427152716271727182719272027212722272327242725272627272728272927302731273227332734273527362737273827392740274127422743274427452746274727482749275027512752275327542755275627572758275927602761276227632764276527662767276827692770277127722773277427752776277727782779278027812782278327842785278627872788278927902791279227932794279527962797279827992800280128022803280428052806280728082809281028112812281328142815281628172818281928202821282228232824282528262827282828292830283128322833283428352836283728382839284028412842284328442845284628472848284928502851285228532854285528562857285828592860286128622863286428652866286728682869287028712872287328742875287628772878287928802881288228832884288528862887288828892890289128922893289428952896289728982899290029012902290329042905290629072908290929102911291229132914291529162917291829192920292129222923292429252926292729282929293029312932293329342935293629372938293929402941294229432944294529462947294829492950295129522953295429552956295729582959296029612962296329642965296629672968296929702971297229732974297529762977297829792980298129822983298429852986298729882989299029912992299329942995299629972998299930003001300230033004300530063007300830093010301130123013301430153016301730183019302030213022302330243025302630273028302930303031303230333034303530363037303830393040304130423043304430453046304730483049305030513052305330543055305630573058305930603061306230633064306530663067306830693070307130723073307430753076307730783079308030813082308330843085308630873088308930903091309230933094309530963097309830993100310131023103310431053106310731083109311031113112311331143115311631173118311931203121312231233124312531263127312831293130313131323133313431353136313731383139314031413142314331443145314631473148314931503151315231533154315531563157315831593160316131623163316431653166316731683169317031713172317331743175317631773178317931803181318231833184318531863187318831893190319131923193319431953196319731983199320032013202320332043205320632073208320932103211321232133214321532163217321832193220322132223223322432253226322732283229323032313232323332343235323632373238323932403241324232433244324532463247324832493250325132523253325432553256325732583259326032613262326332643265326632673268326932703271327232733274327532763277327832793280328132823283328432853286328732883289329032913292329332943295329632973298329933003301330233033304330533063307330833093310331133123313331433153316331733183319332033213322332333243325332633273328332933303331333233333334333533363337333833393340334133423343334433453346334733483349335033513352335333543355335633573358335933603361336233633364336533663367336833693370337133723373337433753376337733783379338033813382338333843385338633873388338933903391339233933394339533963397339833993400340134023403340434053406340734083409341034113412341334143415341634173418341934203421342234233424342534263427342834293430343134323433343434353436343734383439344034413442344334443445344634473448344934503451345234533454345534563457345834593460346134623463346434653466346734683469347034713472347334743475347634773478347934803481348234833484348534863487348834893490349134923493349434953496349734983499350035013502350335043505350635073508350935103511351235133514351535163517351835193520352135223523352435253526352735283529353035313532353335343535353635373538353935403541354235433544354535463547354835493550355135523553355435553556355735583559356035613562356335643565356635673568356935703571357235733574357535763577357835793580358135823583358435853586358735883589359035913592359335943595359635973598359936003601360236033604360536063607360836093610361136123613361436153616361736183619362036213622362336243625362636273628362936303631363236333634363536363637363836393640364136423643364436453646364736483649365036513652365336543655365636573658365936603661366236633664366536663667366836693670367136723673367436753676367736783679368036813682368336843685368636873688368936903691369236933694369536963697369836993700370137023703370437053706370737083709371037113712371337143715371637173718371937203721372237233724372537263727372837293730373137323733373437353736373737383739374037413742374337443745374637473748374937503751375237533754 
  1. <!DOCTYPE html>
    2. 

  2. <html lang="zh-CN">
    3. 

  3. <head>
    4. 

  4. <meta charset="UTF-8" />
    5. 

  5. <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    6. 

  6. <!-- 不发送 Referer：绕过小红书等 CDN 防盗链，使外链参考图/成品图能正常加载 -->
    7. 

  7. <meta name="referrer" content="no-referrer" />
    8. 

  8. <title>Production Build · 运行视图</title>
    9. 

  9. <link rel="preconnect" href="https://fonts.googleapis.com">
    10. 

  10. <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
    11. 

  11. <link href="https://fonts.googleapis.com/css2?family=Fraunces:ital,opsz,wght@0,9..144,400;0,9..144,600;1,9..144,500&family=JetBrains+Mono:wght@400;500;700&display=swap" rel="stylesheet">
    12. 

  12. <style>
    13. 

  13.   :root {
    14. 

  14.     --bg: #0a0c0f; --bg2: #0e1116; --panel: #13171d; --panel2: #191f27;
    15. 

  15.     --border: #232a33; --border2: #333c48;
    16. 

  16.     --text: #e8ecf2; --muted: #838d9c; --faint: #5a6472;
    17. 

  17.     --accent: #8b9dff;                 /* iris — 交互/选中 */
    18. 

  18.     --plan: #a78bfa;                   /* plan 规划一侧 */
    19. 

  19.     --exec: #38bdf8;                   /* execute 执行一侧 */
    20. 

  20.     --kind: #f5b544;                   /* step kind 标签（amber） */
    21. 

  21.     --ok: #34d399; --fail: #f87171; --run: #fbbf24; --idle: #8b95a3;
    22. 

  22.     --mono: "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    23. 

  23.     --sans: -apple-system, BlinkMacSystemFont, "PingFang SC", "Microsoft YaHei", "Segoe UI", sans-serif;
    24. 

  24.     --serif: "Fraunces", Georgia, "Songti SC", serif;
    25. 

  25.   }
    26. 

  26.   * { box-sizing: border-box; }
    27. 

  27.   html, body { margin: 0; height: 100%; }
    28. 

  28.   body {
    29. 

  29.     font-family: var(--sans); background: var(--bg); color: var(--text);
    30. 

  30.     height: 100vh; overflow: hidden; -webkit-font-smoothing: antialiased;
    31. 

  31.     background-image:
    32. 

  32.       radial-gradient(880px 520px at 82% -8%, rgba(139,157,255,.10), transparent 60%),
    33. 

  33.       radial-gradient(760px 560px at 4% 108%, rgba(167,139,250,.09), transparent 62%);
    34. 

  34.   }
    35. 

  35.   ::selection { background: rgba(139,157,255,.30); }
    36. 

  36.   ::-webkit-scrollbar { width: 10px; height: 10px; }
    37. 

  37.   ::-webkit-scrollbar-thumb { background: #222933; border-radius: 8px; border: 2px solid transparent; background-clip: padding-box; }
    38. 

  38.   ::-webkit-scrollbar-thumb:hover { background: #2f3843; background-clip: padding-box; }
    39. 

  39. 

  40.   .app { display: grid; grid-template-columns: 366px 1fr; height: 100vh; }
    41. 

  41. 

  42.   /* ───────────── sidebar ───────────── */
    43. 

  43.   .sidebar { background: linear-gradient(180deg, var(--bg2), var(--bg)); border-right: 1px solid var(--border);
    44. 

  44.              display: flex; flex-direction: column; min-height: 0; }
    45. 

  45.   .brand { padding: 20px 22px 14px; border-bottom: 1px solid var(--border); }
    46. 

  46.   .brand-top { display: flex; align-items: baseline; gap: 10px; }
    47. 

  47.   .logo { font-family: var(--serif); font-style: italic; font-weight: 600; font-size: 25px; letter-spacing: .2px;
    48. 

  48.           background: linear-gradient(96deg, #eaeefc, #9db0ff 62%, #b79dff); -webkit-background-clip: text;
    49. 

  49.           background-clip: text; color: transparent; line-height: 1; }
    50. 

  50.   .logo-sub { font-family: var(--mono); font-size: 10px; letter-spacing: 2.5px; color: var(--faint);
    51. 

  51.               text-transform: uppercase; margin-left: auto; padding-bottom: 2px; }
    52. 

  52.   .brand-desc { margin-top: 9px; font-size: 11.5px; color: var(--muted); letter-spacing: .2px; line-height: 1.5; }
    53. 

  53.   .loop-glyph { font-family: var(--mono); color: var(--plan); font-weight: 700; }
    54. 

  54.   .loop-glyph b { color: var(--exec); font-weight: 700; }
    55. 

  55. 

  56.   .controls { padding: 12px 16px; border-bottom: 1px solid var(--border); display: flex; flex-direction: column; gap: 10px; }
    57. 

  57.   .seg { display: flex; gap: 2px; background: var(--panel); border: 1px solid var(--border); border-radius: 10px; padding: 3px; }
    58. 

  58.   .seg button { flex: 1; background: transparent; border: none; color: var(--muted); font-family: var(--mono);
    59. 

  59.                 font-size: 11px; padding: 6px 4px; border-radius: 7px; cursor: pointer; letter-spacing: .3px;
    60. 

  60.                 transition: background .15s, color .15s; }
    61. 

  61.   .seg button:hover { color: var(--text); }
    62. 

  62.   .seg button.active { background: var(--panel2); color: var(--text); box-shadow: inset 0 0 0 1px var(--border2); }
    63. 

  63.   .seg button.active[data-s="success"] { color: var(--ok); }
    64. 

  64.   .seg button.active[data-s="running"] { color: var(--run); }
    65. 

  65.   .seg button.active[data-s="failed"] { color: var(--fail); }
    66. 

  66.   .ctl-row { display: flex; align-items: center; gap: 10px; }
    67. 

  67.   .ctl-row .count { font-family: var(--mono); font-size: 11px; color: var(--faint); }
    68. 

  68.   .icon-btn { margin-left: auto; width: 30px; height: 30px; display: inline-flex; align-items: center; justify-content: center;
    69. 

  69.               background: var(--panel); border: 1px solid var(--border); border-radius: 9px; color: var(--muted);
    70. 

  70.               cursor: pointer; font-size: 15px; transition: transform .4s, color .15s, border-color .15s; }
    71. 

  71.   .icon-btn:hover { color: var(--accent); border-color: var(--border2); }
    72. 

  72.   .icon-btn.spin { transform: rotate(360deg); }
    73. 

  73. 

  74.   .runlist { overflow-y: auto; flex: 1; min-height: 0; padding: 10px 12px; display: flex; flex-direction: column; gap: 9px; }
    75. 

  75.   .runlist .hint { color: var(--faint); font-size: 12px; text-align: center; margin-top: 40px; }
    76. 

  76. 

  77.   .runcard { position: relative; border: 1px solid var(--border); border-radius: 12px; padding: 12px 13px 11px 15px;
    78. 

  78.              background: linear-gradient(180deg, var(--panel), var(--bg2)); cursor: pointer; flex: 0 0 auto;
    79. 

  79.              transition: border-color .15s, transform .12s, box-shadow .15s; overflow: hidden; }
    80. 

  80.   .runcard::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 3px; background: var(--idle); opacity: .8; }
    81. 

  81.   .runcard[data-s="success"]::before { background: var(--ok); }
    82. 

  82.   .runcard[data-s="running"]::before { background: var(--run); }
    83. 

  83.   .runcard[data-s="failed"]::before { background: var(--fail); }
    84. 

  84.   .runcard[data-s="interrupted"]::before { background: var(--idle); }
    85. 

  85.   .runcard:hover { border-color: var(--border2); transform: translateY(-1px); }
    86. 

  86.   .runcard.active { border-color: var(--accent); box-shadow: 0 0 0 1px var(--accent), 0 10px 30px -14px rgba(139,157,255,.6); }
    87. 

  87.   .rc-top { display: flex; align-items: center; gap: 8px; }
    88. 

  88.   .rc-id { font-family: var(--mono); font-size: 12px; font-weight: 700; color: var(--accent); }
    89. 

  89.   .rc-agent { font-family: var(--mono); font-size: 10.5px; color: var(--faint); letter-spacing: .3px; }
    90. 

  90.   .rc-obj { margin-top: 7px; font-size: 12.5px; line-height: 1.5; color: var(--text); display: -webkit-box;
    91. 

  91.             -webkit-line-clamp: 1; -webkit-box-orient: vertical; overflow: hidden; }
    92. 

  92.   .rc-meta { margin-top: 9px; display: flex; flex-wrap: wrap; gap: 4px 12px; font-family: var(--mono);
    93. 

  93.              font-size: 10.5px; color: var(--faint); }
    94. 

  94.   .rc-meta b { color: var(--muted); font-weight: 500; }
    95. 

  95. 

  96.   .badge { font-family: var(--mono); font-size: 9.5px; font-weight: 700; letter-spacing: .6px; text-transform: uppercase;
    97. 

  97.            padding: 2px 8px; border-radius: 20px; border: 1px solid transparent; white-space: nowrap; }
    98. 

  98.   .badge.success { color: var(--ok); background: rgba(52,211,153,.11); border-color: rgba(52,211,153,.34); }
    99. 

  99.   .badge.running { color: var(--run); background: rgba(251,191,36,.11); border-color: rgba(251,191,36,.34); }
    100. 

  100.   .badge.failed { color: var(--fail); background: rgba(248,113,113,.11); border-color: rgba(248,113,113,.34); }
    101. 

  101.   .badge.interrupted { color: var(--idle); background: rgba(139,149,163,.12); border-color: rgba(139,149,163,.32); }
    102. 

  102.   .badge.dot::before { content: "●"; font-size: 7px; margin-right: 5px; vertical-align: middle; }
    103. 

  103.   .badge.running.dot::before { animation: pulse 1.4s ease-in-out infinite; }
    104. 

  104.   @keyframes pulse { 0%,100% { opacity: 1; } 50% { opacity: .25; } }
    105. 

  105. 

  106.   .pager { display: flex; align-items: center; justify-content: center; gap: 14px; padding: 9px;
    107. 

  107.            border-top: 1px solid var(--border); flex-shrink: 0; }
    108. 

  108.   .pager:empty { display: none; }
    109. 

  109.   .pager button { font-family: var(--mono); padding: 4px 12px; border: 1px solid var(--border); border-radius: 8px;
    110. 

  110.                   background: var(--panel); color: var(--muted); cursor: pointer; font-size: 12px; }
    111. 

  111.   .pager button:hover:not(:disabled) { border-color: var(--accent); color: var(--accent); }
    112. 

  112.   .pager button:disabled { opacity: .35; cursor: default; }
    113. 

  113.   .pager .pi { font-family: var(--mono); font-size: 11px; color: var(--faint); }
    114. 

  114. 

  115.   /* ───────────── main ───────────── */
    116. 

  116.   .main { overflow-y: auto; min-height: 0; position: relative; }
    117. 

  117.   .empty { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center;
    118. 

  118.            gap: 18px; color: var(--faint); }
    119. 

  119.   .empty .big { font-family: var(--serif); font-style: italic; font-size: 34px; color: var(--border2); }
    120. 

  120.   .empty .lp { font-family: var(--mono); font-size: 12px; letter-spacing: 1px; }
    121. 

  121.   .empty .lp b { color: var(--plan); } .empty .lp i { color: var(--exec); font-style: normal; }
    122. 

  122. 

  123.   .topbar { position: sticky; top: 0; z-index: 20; background: rgba(10,12,15,.82); backdrop-filter: blur(12px);
    124. 

  124.             border-bottom: 1px solid var(--border); padding: 13px 30px; display: flex; align-items: center; gap: 14px; }
    125. 

  125.   .tb-id { font-family: var(--mono); font-size: 13px; font-weight: 700; color: var(--accent); flex: 0 0 auto; }
    126. 

  126.   .tb-obj { font-size: 13px; color: var(--muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
    127. 

  127.   .tb-right { margin-left: auto; display: flex; align-items: center; gap: 10px; flex: 0 0 auto; }
    128. 

  128. 

  129.   .detailbody { padding: 24px 30px 90px; max-width: 1120px; }
    130. 

  130.   .loading { display: flex; align-items: center; gap: 12px; color: var(--muted); font-family: var(--mono);
    131. 

  131.              font-size: 13px; padding: 60px 30px; }
    132. 

  132.   .loading .dots span { animation: blink 1.2s infinite; } .loading .dots span:nth-child(2){animation-delay:.2s}
    133. 

  133.   .loading .dots span:nth-child(3){animation-delay:.4s}
    134. 

  134.   @keyframes blink { 0%,100%{opacity:.2} 50%{opacity:1} }
    135. 

  135. 

  136.   /* ───────────── hero：目标 + 循环机制概览 ───────────── */
    137. 

  137.   .hero { border: 1px solid var(--border); border-radius: 16px; padding: 22px 24px;
    138. 

  138.           background: linear-gradient(180deg, var(--panel), var(--bg2)); position: relative; overflow: hidden; }
    139. 

  139.   .hero::after { content: ""; position: absolute; right: -60px; top: -60px; width: 220px; height: 220px;
    140. 

  140.                  background: radial-gradient(circle, rgba(139,157,255,.14), transparent 70%); pointer-events: none; }
    141. 

  141.   .hero-obj { font-family: var(--serif); font-size: 20px; line-height: 1.5; font-weight: 400; color: #f2f4f9; letter-spacing: .1px; }
    142. 

  142.   .hero-model { font-family: var(--mono); font-size: 11px; color: var(--faint); margin-top: 10px; }
    143. 

  143. 

  144.   /* loop 机制章：PLAN ⇄ EXECUTE 环 + 计数 */
    145. 

  145.   .loopwrap { display: flex; align-items: center; gap: 22px; flex-wrap: wrap; margin-top: 20px; padding-top: 18px;
    146. 

  146.               border-top: 1px solid var(--border); }
    147. 

  147.   .loopdiagram { display: flex; align-items: center; gap: 12px; flex: 0 0 auto; }
    148. 

  148.   .lp-node { display: flex; flex-direction: column; align-items: center; gap: 5px; padding: 11px 16px; border-radius: 12px;
    149. 

  149.              border: 1px solid var(--border2); min-width: 86px; }
    150. 

  150.   .lp-node.plan { background: rgba(167,139,250,.09); border-color: rgba(167,139,250,.34); }
    151. 

  151.   .lp-node.exec { background: rgba(56,189,248,.09); border-color: rgba(56,189,248,.34); }
    152. 

  152.   .lp-node .lp-t { font-family: var(--mono); font-size: 11px; font-weight: 700; letter-spacing: 1.5px; }
    153. 

  153.   .lp-node.plan .lp-t { color: var(--plan); } .lp-node.exec .lp-t { color: var(--exec); }
    154. 

  154.   .lp-node .lp-c { font-family: var(--mono); font-size: 18px; font-weight: 700; color: var(--text); }
    155. 

  155.   .lp-node .lp-c small { font-size: 10px; color: var(--faint); font-weight: 400; }
    156. 

  156.   .lp-arrows { display: flex; flex-direction: column; align-items: center; gap: 3px; color: var(--faint); font-family: var(--mono); }
    157. 

  157.   .lp-arrows .a1 { color: var(--plan); animation: slideR 2.4s ease-in-out infinite; }
    158. 

  158.   .lp-arrows .a2 { color: var(--exec); animation: slideL 2.4s ease-in-out infinite; }
    159. 

  159.   @keyframes slideR { 0%,100%{opacity:.35;transform:translateX(-2px)} 50%{opacity:1;transform:translateX(2px)} }
    160. 

  160.   @keyframes slideL { 0%,100%{opacity:.35;transform:translateX(2px)} 50%{opacity:1;transform:translateX(-2px)} }
    161. 

  161.   .lp-arrows .lbl { font-size: 8.5px; letter-spacing: 1px; color: var(--faint); text-transform: uppercase; }
    162. 

  162. 

  163.   .loopstats { display: flex; flex-wrap: wrap; gap: 8px; flex: 1; min-width: 260px; }
    164. 

  164.   .lstat { border: 1px solid var(--border); border-radius: 10px; padding: 8px 13px; background: var(--bg2); min-width: 78px; }
    165. 

  165.   .lstat .k { font-family: var(--mono); font-size: 9.5px; letter-spacing: .8px; text-transform: uppercase; color: var(--faint); }
    166. 

  166.   .lstat .v { font-family: var(--mono); font-size: 16px; color: var(--text); margin-top: 3px; font-weight: 600; }
    167. 

  167.   .lstat .v small { font-size: 10px; color: var(--muted); font-weight: 400; }
    168. 

  168.   .lstat .v.pass { color: var(--ok); } .lstat .v.fail { color: var(--fail); }
    169. 

  169.   .lstat .v.retry { color: var(--run); } .lstat .v.plan { color: var(--plan); }
    170. 

  170. 

  171.   .err-box { margin-top: 16px; border: 1px solid rgba(248,113,113,.4); background: rgba(248,113,113,.07);
    172. 

  172.              border-radius: 10px; padding: 12px 15px; color: #ffb4b4; font-family: var(--mono); font-size: 12px;
    173. 

  173.              white-space: pre-wrap; word-break: break-word; }
    174. 

  174. 

  175.   /* section titles */
    176. 

  176.   .sec-title { display: flex; align-items: center; gap: 10px; margin: 32px 0 16px; }
    177. 

  177.   .sec-title .t { font-family: var(--mono); font-size: 11px; letter-spacing: 2px; text-transform: uppercase; color: var(--muted); }
    178. 

  178.   .sec-title .line { flex: 1; height: 1px; background: linear-gradient(90deg, var(--border), transparent); }
    179. 

  179.   .sec-title .n { font-family: var(--mono); font-size: 11px; color: var(--faint); }
    180. 

  180. 

  181.   /* final delivery */
    182. 

  182.   .delivery { border: 1px solid var(--border); border-radius: 14px; overflow: hidden; background: var(--panel); }
    183. 

  183.   .delivery-h { display: flex; align-items: center; gap: 9px; padding: 12px 16px; border-bottom: 1px solid var(--border);
    184. 

  184.                 font-family: var(--mono); font-size: 12px; color: var(--ok); background: rgba(52,211,153,.05); }
    185. 

  185.   .delivery-b { padding: 16px; font-size: 13.5px; line-height: 1.75; color: var(--text);
    186. 

  186.                 white-space: pre-wrap; word-break: break-word; }
    187. 

  187.   .gallery { display: flex; flex-wrap: wrap; gap: 12px; padding: 4px 16px 18px; }
    188. 

  188.   .gcard { border: 1px solid var(--border); border-radius: 10px; overflow: hidden; background: var(--bg2); width: 150px; }
    189. 

  189.   .gcard img { width: 150px; height: 190px; object-fit: cover; display: block; cursor: zoom-in; background: var(--bg); }
    190. 

  190.   .gcard .cap { padding: 6px 8px; font-family: var(--mono); font-size: 10px; color: var(--muted); display: flex;
    191. 

  191.                 align-items: center; gap: 5px; border-top: 1px solid var(--border); }
    192. 

  192.   .gcard .cap .sid { color: var(--kind); font-weight: 700; }
    193. 

  193. 

  194.   /* ───────────── 抽屉复用：元信息 / 字段 / 产物图 / verdict / pending ───────────── */
    195. 

  195.   .tc-meta { display: flex; flex-wrap: wrap; gap: 5px 8px; margin: 2px 0 4px; }
    196. 

  196.   .metachip { font-family: var(--mono); font-size: 10px; color: var(--muted); background: var(--bg2);
    197. 

  197.               border: 1px solid var(--border); border-radius: 6px; padding: 2px 8px; }
    198. 

  198. 

  199.   .field { margin-top: 13px; }
    200. 

  200.   .field > .lbl { font-family: var(--mono); font-size: 10px; letter-spacing: 1px; text-transform: uppercase;
    201. 

  201.                   color: var(--faint); margin-bottom: 6px; display: flex; align-items: center; gap: 7px; }
    202. 

  202.   .field .val { font-size: 13px; line-height: 1.65; color: var(--text); white-space: pre-wrap; word-break: break-word; }
    203. 

  203. 

  204.   .imgs { display: flex; flex-wrap: wrap; gap: 9px; }
    205. 

  205.   .imgs img.thumb { width: 122px; height: 152px; object-fit: cover; border: 1px solid var(--border); border-radius: 9px;
    206. 

  206.                     background: var(--bg); cursor: zoom-in; transition: border-color .15s, transform .12s; }
    207. 

  207.   .imgs img.thumb:hover { border-color: var(--accent); transform: scale(1.02); }
    208. 

  208.   .imgs img.thumb.ref { border-style: dashed; opacity: .92; }
    209. 

  209.   .imgs .imgfail { width: 122px; height: 152px; display: flex; align-items: center; justify-content: center; text-align: center;
    210. 

  210.                    border: 1px dashed var(--fail); border-radius: 9px; color: var(--fail); font-family: var(--mono);
    211. 

  211.                    font-size: 10px; background: rgba(248,113,113,.05); padding: 8px; cursor: pointer; text-decoration: none; }
    212. 

  212.   .a-verdict-box { margin-top: 10px; border-radius: 9px; padding: 9px 12px; border: 1px solid var(--border); }
    213. 

  213.   .a-verdict-box.pass { border-color: rgba(52,211,153,.32); background: rgba(52,211,153,.05); }
    214. 

  214.   .a-verdict-box.fail { border-color: rgba(248,113,113,.32); background: rgba(248,113,113,.05); }
    215. 

  215.   .vd-dims { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; }
    216. 

  216.   .vd-dim { font-family: var(--mono); font-size: 10.5px; color: var(--fail); background: rgba(248,113,113,.1);
    217. 

  217.             border: 1px solid rgba(248,113,113,.3); border-radius: 6px; padding: 2px 8px; }
    218. 

  218.   .vd-note { margin-top: 8px; font-size: 12px; line-height: 1.6; color: var(--muted); white-space: pre-wrap; word-break: break-word; }
    219. 

  219. 

  220.   /* pending 任务（尚未执行/等待重试） */
    221. 

  221.   .pending-note { margin-top: 12px; font-family: var(--mono); font-size: 11.5px; color: var(--run);
    222. 

  222.                   display: flex; align-items: center; gap: 8px; }
    223. 

  223. 

  224.   /* 详情抽屉 */
    225. 

  225.   .drawer-scrim { position: fixed; inset: 0; background: rgba(5,6,8,.4); z-index: 340; opacity: 0; pointer-events: none;
    226. 

  226.                   transition: opacity .2s; }
    227. 

  227.   .drawer-scrim.open { opacity: 1; pointer-events: auto; }
    228. 

  228.   /* 抽屉里放的是 system prompt 全文、逐字段入参、带表格的长文档 —— 660px 一行塞不下几个字，
    229. 

  229.      表格更是每格都要折。放宽到视口的一半上下（大屏 1080px 封顶，小屏按 vw 收）。 */
    230. 

  230.   .drawer { position: fixed; top: 0; right: 0; bottom: 0; width: min(1080px, 62vw); min-width: 620px;
    231. 

  231.     max-width: 96vw; z-index: 341;
    232. 

  232.             background: linear-gradient(180deg, var(--panel), var(--bg2)); border-left: 1px solid var(--border2);
    233. 

  233.             box-shadow: -20px 0 50px -20px rgba(0,0,0,.7); transform: translateX(102%); transition: transform .24s cubic-bezier(.4,0,.2,1);
    234. 

  234.             display: flex; flex-direction: column; }
    235. 

  235.   .drawer.open { transform: none; }
    236. 

  236.   .drawer-h { display: flex; align-items: center; gap: 10px; padding: 15px 18px; border-bottom: 1px solid var(--border); flex: 0 0 auto; }
    237. 

  237.   .drawer-tag { font-family: var(--mono); font-size: 10px; font-weight: 700; letter-spacing: 1px; text-transform: uppercase;
    238. 

  238.                 padding: 3px 10px; border-radius: 7px; }
    239. 

  239.   .drawer-tag.plan { color: var(--plan); background: rgba(167,139,250,.12); }
    240. 

  240.   .drawer-tag.execute { color: var(--exec); background: rgba(56,189,248,.12); }
    241. 

  241.   .drawer-title { font-size: 14px; font-weight: 600; color: var(--text); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
    242. 

  242.   .drawer-x { margin-left: auto; width: 30px; height: 30px; border-radius: 8px; cursor: pointer; flex: 0 0 auto;
    243. 

  243.               display: flex; align-items: center; justify-content: center; color: var(--muted); background: var(--panel2);
    244. 

  244.               border: 1px solid var(--border); font-size: 15px; }
    245. 

  245.   .drawer-x:hover { color: var(--text); }
    246. 

  246.   .drawer-refresh + .drawer-x { margin-left: 0; }        /* 刷新按钮吃掉 auto 边距，✕ 紧随其后 */
    247. 

  247.   @keyframes rot360 { to { transform: rotate(360deg); } }
    248. 

  248.   .spinning { animation: rot360 .5s linear; }
    249. 

  249.   .drawer-b { overflow-y: auto; padding: 16px 18px 40px; flex: 1; min-height: 0; }
    250. 

  250. 

  251.   /* lightbox */
    252. 

  252.   .lb { position: fixed; inset: 0; background: rgba(5,6,8,.92); display: none; align-items: center; justify-content: center;
    253. 

  253.         z-index: 360; padding: 30px; }
    254. 

  254.   .lb.open { display: flex; }
    255. 

  255.   .lb img { max-width: 92vw; max-height: 86vh; object-fit: contain; border-radius: 10px; box-shadow: 0 20px 60px rgba(0,0,0,.7); }
    256. 

  256.   .lb-counter { position: fixed; bottom: 24px; left: 50%; transform: translateX(-50%); font-family: var(--mono); font-size: 12px;
    257. 

  257.                 color: var(--muted); background: rgba(0,0,0,.5); border: 1px solid var(--border); padding: 5px 14px; border-radius: 20px; }
    258. 

  258.   .lb-nav { position: fixed; top: 50%; transform: translateY(-50%); width: 46px; height: 70px; font-size: 30px; cursor: pointer;
    259. 

  259.             color: #fff; background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.16); border-radius: 12px;
    260. 

  260.             display: flex; align-items: center; justify-content: center; }
    261. 

  261.   .lb-nav:hover { background: rgba(255,255,255,.16); }
    262. 

  262.   .lb-nav.prev { left: 22px; } .lb-nav.next { right: 22px; }
    263. 

  263.   .lb-close { position: fixed; top: 22px; right: 26px; width: 38px; height: 38px; border-radius: 10px; cursor: pointer;
    264. 

  264.               color: var(--muted); background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.16); font-size: 18px;
    265. 

  265.               display: flex; align-items: center; justify-content: center; }
    266. 

  266.   .lb-close:hover { color: #fff; }
    267. 

  267. 

  268.   /* ───────────── 快照步进器（Loop 1 → 2 → … → 收尾） ───────────── */
    269. 

  269.   .snap-empty { border: 1px dashed var(--border2); border-radius: 14px; padding: 40px 24px; text-align: center;
    270. 

  270.                 color: var(--faint); font-family: var(--mono); font-size: 13px; margin-top: 20px; }
    271. 

  271.   .snap-stepper { display: flex; align-items: center; gap: 8px; padding: 14px 0 18px; flex-wrap: wrap; }
    272. 

  272.   .snap-arrow { width: 30px; height: 30px; flex: 0 0 auto; display: inline-flex; align-items: center; justify-content: center;
    273. 

  273.                 background: var(--panel); border: 1px solid var(--border); border-radius: 9px; color: var(--muted);
    274. 

  274.                 cursor: pointer; font-size: 15px; transition: color .15s, border-color .15s; }
    275. 

  275.   .snap-arrow:hover:not(:disabled) { color: var(--accent); border-color: var(--border2); }
    276. 

  276.   .snap-arrow:disabled { opacity: .3; cursor: default; }
    277. 

  277.   .snap-track { display: flex; align-items: center; gap: 0; flex-wrap: wrap; }
    278. 

  278.   .snap-pill { position: relative; display: flex; align-items: center; gap: 6px; font-family: var(--mono);
    279. 

  279.                font-size: 11px; color: var(--muted); background: var(--panel); border: 1px solid var(--border);
    280. 

  280.                border-radius: 8px; padding: 5px 12px; cursor: pointer; transition: all .15s; white-space: nowrap; }
    281. 

  281.   .snap-pill:hover { border-color: var(--border2); color: var(--text); }
    282. 

  282.   .snap-pill.cur { background: rgba(139,157,255,.12); border-color: var(--accent); color: var(--accent); }
    283. 

  283.   .snap-pill.final { color: var(--ok); }
    284. 

  284.   .snap-pill.final.cur { background: rgba(52,211,153,.12); border-color: var(--ok); }
    285. 

  285.   .snap-sep { width: 20px; height: 1px; background: var(--border2); flex: 0 0 auto; }
    286. 

  286. 

  287.   .mm-card { position: relative; width: 256px; flex: 0 0 auto; border: 1px solid var(--border2); border-radius: 13px;
    288. 

  288.              background: var(--panel); padding: 11px 13px 12px; cursor: pointer;
    289. 

  289.              transition: transform .12s, box-shadow .15s, border-color .15s; }
    290. 

  290.   .mm-card:hover { transform: translateY(-2px); box-shadow: 0 12px 26px -14px rgba(0,0,0,.7); border-color: var(--accent); }
    291. 

  291.   .mm-card.st-passed { border-left: 3px solid var(--ok); }
    292. 

  292.   .mm-card.st-failed { border-left: 3px solid var(--fail); }
    293. 

  293.   .mm-card.st-pending { border-left: 3px solid var(--idle); border-style: dashed; opacity: .92; }
    294. 

  294.   .mm-card.st-decomposed { border-left: 3px solid var(--plan); background: linear-gradient(180deg, rgba(167,139,250,.06), var(--panel)); }
    295. 

  295.   .mm-card.mm-modified { box-shadow: 0 0 0 1.5px var(--run); }
    296. 

  296. 

  297.   .mmc-top { display: flex; align-items: center; gap: 6px; margin-bottom: 6px; }
    298. 

  298.   .mmc-sid { font-family: var(--mono); font-size: 10px; color: var(--muted); background: var(--panel2);
    299. 

  299.              border: 1px solid var(--border); border-radius: 5px; padding: 0 6px; flex: 0 0 auto; }
    300. 

  300.   .mmc-badge { font-family: var(--mono); font-size: 9px; font-weight: 700; letter-spacing: .5px; text-transform: uppercase;
    301. 

  301.                padding: 1px 7px; border-radius: 20px; border: 1px solid transparent; flex: 0 0 auto; }
    302. 

  302.   .mmc-badge.passed { color: var(--ok); background: rgba(52,211,153,.11); border-color: rgba(52,211,153,.34); }
    303. 

  303.   .mmc-badge.failed { color: var(--fail); background: rgba(248,113,113,.11); border-color: rgba(248,113,113,.34); }
    304. 

  304.   .mmc-badge.pending { color: var(--idle); background: rgba(139,149,163,.12); border-color: rgba(139,149,163,.32); }
    305. 

  305.   .mmc-badge.decomposed { color: var(--plan); background: rgba(167,139,250,.11); border-color: rgba(167,139,250,.34); }
    306. 

  306.   .mmc-name { font-size: 12.5px; font-weight: 600; color: var(--text); line-height: 1.4;
    307. 

  307.               display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
    308. 

  308.   .mmc-goal { margin-top: 5px; font-size: 11px; line-height: 1.5; color: var(--muted);
    309. 

  309.               display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
    310. 

  310. 

  311.   .mmc-result { margin-top: 9px; padding-top: 9px; border-top: 1px solid var(--border); display: flex; gap: 9px; }
    312. 

  312.   .mmc-thumb { width: 46px; height: 58px; border-radius: 7px; object-fit: cover; flex: 0 0 auto; cursor: zoom-in;
    313. 

  313.                border: 1px solid var(--border); background: var(--bg); }
    314. 

  314.   .mmc-sum { font-size: 10.5px; line-height: 1.5; color: var(--muted); min-width: 0;
    315. 

  315.              display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
    316. 

  316.   .mmc-fail { margin-top: 7px; font-size: 10.5px; line-height: 1.5; color: #ffb4b4; }
    317. 

  317.   .mmc-tag { font-family: var(--mono); font-size: 9px; color: var(--faint); }
    318. 

  318.   .mmc-tag.retry { color: var(--run); }
    319. 

  319.   .mmc-kidsum { margin-top: 9px; padding-top: 9px; border-top: 1px solid var(--border); font-family: var(--mono);
    320. 

  320.                 font-size: 10px; color: var(--muted); display: flex; align-items: center; gap: 8px; }
    321. 

  321. 

  322.   /* 规划变化 diff：逐字段「旧 → 新」，name/goal 走行内字符级 diff（删除红删除线 / 新增绿底） */
    323. 

  323.   .chg-list { display: flex; flex-direction: column; gap: 9px; }
    324. 

  324.   .chg-row { display: flex; gap: 9px; align-items: baseline; }
    325. 

  325.   .chg-k { flex: 0 0 auto; font-family: var(--mono); font-size: 10px; font-weight: 700; color: var(--faint);
    326. 

  326.            background: var(--bg2); border: 1px solid var(--border); border-radius: 6px; padding: 2px 8px; }
    327. 

  327.   .chg-v { flex: 1 1 auto; min-width: 0; font-size: 12.5px; line-height: 1.7; color: var(--text); word-break: break-word; }
    328. 

  328.   .df-del { color: var(--fail); background: rgba(248,113,113,.13); text-decoration: line-through; text-decoration-color: rgba(248,113,113,.65); border-radius: 3px; }
    329. 

  329.   .df-ins { color: var(--ok); background: rgba(52,211,153,.15); border-radius: 3px; }
    330. 

  330.   .lesson { padding: 8px 14px; border-top: 1px solid var(--border); font-size: 11.5px; line-height: 1.55; color: var(--muted); }
    331. 

  331.   .lesson:first-of-type { border-top: none; }
    332. 

  332.   .lesson .l-src { font-family: var(--mono); font-size: 9px; font-weight: 700; text-transform: uppercase; letter-spacing: .5px;
    333. 

  333.                    padding: 1px 6px; border-radius: 5px; margin-right: 6px; }
    334. 

  334.   .lesson .l-src.verdict { color: var(--fail); background: rgba(248,113,113,.1); }
    335. 

  335.   .lesson .l-src.planner { color: var(--plan); background: rgba(167,139,250,.1); }
    336. 

  336. 

  337.   /* 阶段 / 生成类型(操作) chips —— planner 赋予的制作属性 */
    338. 

  338.   .mmc-attrs { display: flex; flex-wrap: wrap; gap: 5px; margin-top: 7px; }
    339. 

  339.   .attr-chip { font-family: var(--mono); font-size: 9px; font-weight: 600; border-radius: 5px; padding: 1px 7px; }
    340. 

  340.   .attr-chip .k { opacity: .55; margin-right: 4px; font-weight: 700; }
    341. 

  341.   .attr-chip.stage { color: var(--plan); background: rgba(167,139,250,.1); border: 1px solid rgba(167,139,250,.28); }
    342. 

  342.   .attr-chip.cat { color: var(--exec); background: rgba(56,189,248,.1); border: 1px solid rgba(56,189,248,.26); }
    343. 

  343. 

  344.   /* 能力 / 工具 chips */
    345. 

  345.   .mmc-tools { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 8px; }
    346. 

  346.   .kind-chip { font-family: var(--mono); font-size: 9px; font-weight: 700; color: var(--kind);
    347. 

  347.                background: rgba(245,181,68,.12); border: 1px solid rgba(245,181,68,.3); border-radius: 5px; padding: 1px 7px; }
    348. 

  348.   .tool-chip { font-family: var(--mono); font-size: 9px; color: var(--exec);
    349. 

  349.                background: rgba(56,189,248,.1); border: 1px solid rgba(56,189,248,.28); border-radius: 5px; padding: 1px 7px; }
    350. 

  350. 

  351.   /* 执行中 状态（run 仍在跑、最新快照里的下一个待执行叶） */
    352. 

  352.   .mmc-badge.running { color: var(--run); background: rgba(251,191,36,.13); border-color: rgba(251,191,36,.4); }
    353. 

  353.   .mmc-badge.running::before { content: "●"; font-size: 7px; margin-right: 4px; animation: pulse 1.4s ease-in-out infinite; }
    354. 

  354.   .mm-card.st-running { border-left: 3px solid var(--run); box-shadow: 0 0 0 1px rgba(251,191,36,.25); }
    355. 

  355. 

  356.   /* 验收标准 / 依赖参考图（节点详情复用） */
    357. 

  357.   .acc-list { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 10px; }
    358. 

  358.   .acc-list li { position: relative; padding-left: 20px; font-size: 12.5px; line-height: 1.55; color: var(--muted); }
    359. 

  359.   .acc-list li::before { content: "▪"; position: absolute; left: 4px; top: 2px; color: var(--exec); font-size: 11px; }
    360. 

  360.   /* 验收标准结构化项：标准（主）+ 说明（次）+ 参考图缩略图 */
    361. 

  361.   .acc-std { font-weight: 600; color: var(--text); }
    362. 

  362.   .acc-desc { margin-top: 3px; font-size: 12px; line-height: 1.6; color: var(--muted); }
    363. 

  363.   .acc-refs { margin-top: 7px; }
    364. 

  364.   .refchip { display: inline-flex; align-items: center; gap: 5px; font-family: var(--mono); font-size: 11px; color: var(--plan);
    365. 

  365.              background: rgba(167,139,250,.1); border: 1px solid rgba(167,139,250,.28); border-radius: 7px; padding: 3px 9px; }
    366. 

  366.   .imgs img.thumb.ref { border-style: dashed; opacity: .92; }
    367. 

  367. 

  368.   /* 循环阶段步进器：轮次编号 + 改 Task 标记 + 实时点 */
    369. 

  369.   .snap-pill .sp-n { font-family: var(--mono); font-size: 9px; color: var(--faint); background: var(--bg);
    370. 

  370.                      border: 1px solid var(--border); border-radius: 4px; padding: 0 4px; }
    371. 

  371.   .snap-pill.cur .sp-n { color: var(--accent); border-color: var(--accent); }
    372. 

  372.   .snap-pill.changed { border-color: rgba(52,211,153,.4); }
    373. 

  373.   .snap-pill .sp-mark { color: var(--ok); font-size: 10px; }
    374. 

  374.   .snap-pill .sp-live { color: var(--run); font-size: 8px; animation: pulse 1.4s ease-in-out infinite; }
    375. 

  375. 

  376.   /* plan 过程抽屉：输入消息 / 输出 */
    377. 

  377.   .pp-msg { border: 1px solid var(--border); border-radius: 9px; background: var(--bg2); margin-top: 8px; overflow: hidden; }
    378. 

  378.   .pp-role { font-family: var(--mono); font-size: 9px; letter-spacing: .8px; text-transform: uppercase; color: var(--faint);
    379. 

  379.              padding: 5px 10px; border-bottom: 1px solid var(--border); background: var(--panel); }
    380. 

  380.   .pp-content { font-family: var(--mono); font-size: 11px; line-height: 1.55; color: var(--muted); white-space: pre-wrap;
    381. 

  381.                 word-break: break-word; padding: 9px 11px; max-height: 300px; overflow: auto; }
    382. 

  382.   .pp-json { color: var(--text); }
    383. 

  383.   /* 依附在消息块内容之下的图片条（与内容之间加分隔） */
    384. 

  384.   .pp-imgs { padding: 10px 11px; border-top: 1px solid var(--border); background: var(--panel); }
    385. 

  385. 

  386.   /* 详情里的「分段单元」：一段一块，边界清晰，内容完整 */
    387. 

  387.   .sec-cell { border: 1px solid var(--border); border-radius: 12px; padding: 11px 13px 12px;
    388. 

  388.               background: rgba(139,157,255,.04); margin-top: 14px; }
    389. 

  389.   .sec-cell > .lbl { color: var(--accent); letter-spacing: .6px; text-transform: none; font-size: 11px; }
    390. 

  390.   .sec-cell .sec-meta { font-family: var(--mono); font-size: 10px; color: var(--faint); margin: 2px 0 8px; }
    391. 

  391. 

  392.   /* 详情富文本：markdown 渲染（区别于等宽 JSON） */
    393. 

  393.   .pp-md { font-size: 12.5px; line-height: 1.68; color: var(--text); word-break: break-word;
    394. 

  394.            padding: 11px 13px; max-height: 340px; overflow: auto; }
    395. 

  395.   .pp-md > :first-child { margin-top: 0; }
    396. 

  396.   .pp-md > :last-child { margin-bottom: 0; }
    397. 

  397.   .rich-p { margin: 8px 0; }
    398. 

  398.   .rich-h { font-weight: 700; line-height: 1.4; margin: 15px 0 7px; color: var(--text); }
    399. 

  399.   .rich-h1 { font-size: 16px; } .rich-h2 { font-size: 14.5px; } .rich-h3 { font-size: 13.5px; }
    400. 

  400.   .rich-h4, .rich-h5, .rich-h6 { font-size: 12.5px; color: var(--muted); letter-spacing: .3px; }
    401. 

  401.   .rich-list { margin: 8px 0; padding-left: 20px; }
    402. 

  402.   .rich-list li { margin: 3px 0; }
    403. 

  403.   .pp-md code { font-family: var(--mono); font-size: 11px; background: var(--panel2); border: 1px solid var(--border);
    404. 

  404.                 border-radius: 5px; padding: 1px 5px; color: var(--accent); }
    405. 

  405.   .rich-code { font-family: var(--mono); font-size: 11px; line-height: 1.5; color: var(--muted); white-space: pre-wrap;
    406. 

  406.                word-break: break-word; background: var(--bg2); border: 1px solid var(--border); border-radius: 8px;
    407. 

  407.                padding: 9px 11px; margin: 9px 0; overflow: auto; }
    408. 

  408.   .rich-quote { margin: 9px 0; padding: 4px 12px; border-left: 3px solid var(--border2); color: var(--muted); }
    409. 

  409.   /* 表格（GFM）：窄容器里横向可滚，不撑破抽屉；表头置顶、行间细线、悬停整行提亮 */
    410. 

  410.   .rich-table-wrap { margin: 10px 0; overflow-x: auto; border: 1px solid var(--border);
    411. 

  411.                      border-radius: 9px; background: var(--bg2); }
    412. 

  412.   .rich-table { border-collapse: collapse; width: 100%; font-size: 12px; line-height: 1.6; }
    413. 

  413.   .rich-table th, .rich-table td { padding: 7px 11px; border-bottom: 1px solid var(--border);
    414. 

  414.                                    vertical-align: top; }
    415. 

  415.   .rich-table th { background: var(--panel); color: var(--text); font-weight: 700; white-space: nowrap;
    416. 

  416.                    position: sticky; top: 0; }
    417. 

  417.   .rich-table td { color: var(--muted); }
    418. 

  418.   .rich-table tbody tr:last-child td { border-bottom: 0; }
    419. 

  419.   .rich-table tbody tr:hover td { background: rgba(139,157,255,.06); color: var(--text); }
    420. 

  420.   .rich-table code { white-space: nowrap; }
    421. 

  421.   .pp-md strong { color: var(--text); font-weight: 700; }
    422. 

  422.   .pp-md a { color: var(--accent); text-decoration: none; }
    423. 

  423.   .pp-md a:hover { text-decoration: underline; }
    424. 

  424.   /* markdown 正文里就地内联的图片：自成一行、结合上下文查看，点击放大 */
    425. 

  425.   .pp-md .md-img { display: block; max-width: 240px; max-height: 180px; width: auto; height: auto; margin: 7px 0; border-radius: 8px;
    426. 

  426.                    border: 1px solid var(--border); background: var(--bg); object-fit: contain; cursor: zoom-in; }
    427. 

  427.   .pp-md .imgfail { display: inline-block; margin: 6px 0; }
    428. 

  428.   /* 抽屉里**一律不套内嵌小滚动框**：一屏里嵌好几个各自能滚的小框，读者既不知道每块有多长、
    429. 

  429.      也没法一路读下去（见 think_and_plan 的 thought/plan/action 三段）。内容整块铺开，由抽屉整体滚动。 */
    430. 

  430.   #drawerBody .pp-md, #drawerBody .pp-content { max-height: none; overflow: visible; }
    431. 

  431. 

  432.   /* ── 详情里的「输入 / 输出」两区 ─────────────────────────────────────────────
    433. 

  433.      一区一块：左侧 3px 色轨 + 同色抬头 + 淡色底。**入青 / 出绿 / 调用紫**，与卡面上那三段
    434. 

  434.      同一套配色 —— 同一件事在哪儿看都是同一个颜色，读者不必每次重新认标签。 */
    435. 

  435.   .io-block { margin-top: 16px; border: 1px solid var(--border); border-left: 3px solid var(--io-c);
    436. 

  436.               border-radius: 12px; overflow: hidden; background: var(--panel); }
    437. 

  437.   .io-block.in   { --io-c: rgb(56,189,248);  --io-bg: rgba(56,189,248,.10); }
    438. 

  438.   .io-block.out  { --io-c: rgb(74,222,128);  --io-bg: rgba(74,222,128,.10); }
    439. 

  439.   .io-block.call { --io-c: rgb(167,139,250); --io-bg: rgba(167,139,250,.12); }
    440. 

  440.   .iob-h { display: flex; align-items: center; gap: 8px; padding: 9px 13px; background: var(--io-bg);
    441. 

  441.            border-bottom: 1px solid var(--border); font-family: var(--mono); font-size: 12px;
    442. 

  442.            font-weight: 700; letter-spacing: .8px; color: var(--io-c); }
    443. 

  443.   .iob-ic { font-size: 13px; opacity: .9; }
    444. 

  444.   .iob-meta { margin-left: auto; font-family: var(--mono); font-size: 9.5px; font-weight: 400;
    445. 

  445.               letter-spacing: .3px; color: var(--faint); }
    446. 

  446.   .iob-b { padding: 3px 13px 13px; }
    447. 

  447.   /* 字段块：键不再是灰色小字，而是**带色点的同色键名**（值有多大标在右侧），值用正文字号 */
    448. 

  448.   .iob-b .pp-msg { margin-top: 10px; border-color: var(--border2); background: var(--bg2); }
    449. 

  449.   .iob-b .pp-role { display: flex; align-items: center; gap: 7px; padding: 6px 11px;
    450. 

  450.                     background: var(--io-bg); border-bottom: 1px solid var(--border2);
    451. 

  451.                     font-size: 10.5px; font-weight: 700; letter-spacing: .4px;
    452. 

  452.                     text-transform: none; color: var(--io-c); }
    453. 

  453.   .iob-b .pp-role::before { content: ""; flex: 0 0 auto; width: 5px; height: 5px; border-radius: 50%;
    454. 

  454.                             background: var(--io-c); }
    455. 

  455.   .iob-b .pr-k { overflow: hidden; text-overflow: ellipsis; }
    456. 

  456.   .iob-b .pr-meta { margin-left: auto; font-weight: 400; font-size: 9px; color: var(--faint); }
    457. 

  457.   .iob-b .pp-md { font-size: 13px; color: var(--text); }
    458. 

  458.   .iob-b .pp-content { font-size: 11.5px; color: var(--text); }
    459. 

  459.   /* 一次调用一组：序号 + 工具名，参数在下面逐字段铺开 */
    460. 

  460.   .call-item { margin-top: 12px; }
    461. 

  461.   .call-item + .call-item { padding-top: 12px; border-top: 1px dashed var(--border2); }
    462. 

  462.   .ci-h { display: flex; align-items: center; gap: 8px; }
    463. 

  463.   .ci-i { flex: 0 0 auto; width: 17px; height: 17px; border-radius: 50%; display: grid; place-items: center;
    464. 

  464.           font-family: var(--mono); font-size: 10px; color: var(--bg); background: var(--io-c); }
    465. 

  465.   .ci-n { font-family: var(--mono); font-size: 13px; font-weight: 700; color: #c9b8ff; word-break: break-all; }
    466. 

  466.   .ci-b .pp-msg:first-child { margin-top: 8px; }
    467. 

  467. 

  468.   /* ═══════════ 视图 Tab（业务视图 / 结果视图 / 技术过程）═══════════ */
    469. 

  469.   .view-bar { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin: 28px 0 4px; }
    470. 

  470.   .view-bar .view-tabs { margin: 0; }
    471. 

  471.   .fs-enter { font-family: var(--mono); font-size: 12px; letter-spacing: .5px; color: var(--muted); background: var(--panel);
    472. 

  472.               border: 1px solid var(--border); border-radius: 10px; padding: 9px 16px; cursor: pointer;
    473. 

  473.               display: inline-flex; align-items: center; gap: 7px; transition: color .15s, border-color .15s; }
    474. 

  474.   .fs-enter:hover { color: var(--accent); border-color: var(--accent); }
    475. 

  475.   .fs-enter .vt-ic { font-size: 14px; }
    476. 

  476.   .view-tabs { display: inline-flex; gap: 3px; background: var(--panel); border: 1px solid var(--border);
    477. 

  477.                border-radius: 12px; padding: 4px; margin: 28px 0 4px; }
    478. 

  478.   .view-tab { font-family: var(--mono); font-size: 12px; letter-spacing: .5px; color: var(--muted); background: transparent;
    479. 

  479.               border: none; border-radius: 9px; padding: 8px 20px; cursor: pointer; display: inline-flex; align-items: center;
    480. 

  480.               gap: 7px; transition: background .15s, color .15s; }
    481. 

  481.   .view-tab:hover { color: var(--text); }
    482. 

  482.   .view-tab.active { background: var(--panel2); color: var(--text); box-shadow: inset 0 0 0 1px var(--border2); }
    483. 

  483.   .view-tab .vt-ic { font-size: 13px; }
    484. 

  484.   .view-pane { display: none; }
    485. 

  485.   .view-pane.active { display: block; }
    486. 

  486. 

  487.   /* ═══════════ 业务视图 · 制作轮次与判断账本 ════════════ */
    488. 

  488.   .biz-story { margin-top: 12px; }
    489. 

  489.   .biz-lede { display: grid; grid-template-columns: 1fr auto; gap: 18px; align-items: start;
    490. 

  490.               padding: 20px 22px; border: 1px solid var(--border2); border-radius: 16px;
    491. 

  491.               background: linear-gradient(135deg, rgba(139,157,255,.10), rgba(56,189,248,.04) 42%, var(--panel)); }
    492. 

  492.   .biz-eyebrow { font-family: var(--mono); font-size: 10px; letter-spacing: .12em; color: var(--accent);
    493. 

  493.                  text-transform: uppercase; }
    494. 

  494.   .biz-headline { margin-top: 7px; font-size: 18px; line-height: 1.45; font-weight: 700; color: var(--fg); }
    495. 

  495.   .biz-conclusion { margin-top: 8px; max-width: 860px; font-size: 12.5px; line-height: 1.75; color: var(--muted); }
    496. 

  496.   .biz-meta { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 6px; }
    497. 

  497.   .biz-chip { padding: 5px 8px; border: 1px solid var(--border); border-radius: 999px;
    498. 

  498.               background: rgba(10,12,15,.45); font-family: var(--mono); font-size: 10px; color: var(--muted); }
    499. 

  499.   .biz-failure { margin-top: 10px; padding: 12px 14px; border: 1px solid rgba(248,113,113,.42);
    500. 

  500.                  border-left: 3px solid var(--fail); border-radius: 10px; background: rgba(248,113,113,.08); }
    501. 

  501.   .biz-failure strong { display: block; font-family: var(--mono); font-size: 10px; letter-spacing: .08em; color: var(--fail); }
    502. 

  502.   .biz-failure span { display: block; margin-top: 5px; font-size: 12px; line-height: 1.65; color: #f4b4b4; }
    503. 

  503.   .biz-rounds { display: flex; flex-direction: column; gap: 18px; margin-top: 18px; }
    504. 

  504.   .biz-round { position: relative; border: 1px solid var(--border); border-radius: 16px; background: var(--panel); overflow: hidden; }
    505. 

  505.   .biz-round::before { content: ""; position: absolute; top: 0; bottom: 0; left: 0; width: 3px; background: var(--run); }
    506. 

  506.   .biz-round.success::before { background: var(--ok); }
    507. 

  507.   .biz-round.failed::before { background: var(--fail); }
    508. 

  508.   .biz-round-h { display: grid; grid-template-columns: auto 1fr auto; gap: 12px; align-items: start;
    509. 

  509.                  padding: 16px 18px; border-bottom: 1px solid var(--border); background: rgba(255,255,255,.015); }
    510. 

  510.   .biz-round-n { width: 31px; height: 31px; display: grid; place-items: center; border-radius: 50%;
    511. 

  511.                  background: rgba(139,157,255,.14); border: 1px solid rgba(139,157,255,.35);
    512. 

  512.                  font-family: var(--mono); font-size: 12px; font-weight: 800; color: var(--accent); }
    513. 

  513.   .biz-round-title { font-size: 14px; font-weight: 700; color: var(--fg); }
    514. 

  514.   .biz-round-summary { margin-top: 4px; font-size: 11.5px; line-height: 1.6; color: var(--muted); }
    515. 

  515.   .biz-step-list { padding: 4px 18px 18px 31px; }
    516. 

  516.   .biz-step { position: relative; margin-top: 14px; border: 1px solid var(--border); border-radius: 13px;
    517. 

  517.               background: var(--bg2); overflow: hidden; }
    518. 

  518.   .biz-step::before { content: ""; position: absolute; left: -20px; top: 25px; width: 8px; height: 8px;
    519. 

  519.                       border-radius: 50%; background: var(--run); box-shadow: 0 0 0 4px var(--panel); }
    520. 

  520.   .biz-step.success::before { background: var(--ok); }
    521. 

  521.   .biz-step.failed::before { background: var(--fail); }
    522. 

  522.   .biz-step-h { display: grid; grid-template-columns: auto 1fr auto; gap: 10px; align-items: center;
    523. 

  523.                 padding: 11px 13px; border-bottom: 1px solid var(--border); }
    524. 

  524.   .biz-stage { font-family: var(--mono); font-size: 9px; letter-spacing: .08em; color: var(--accent);
    525. 

  525.                border: 1px solid rgba(139,157,255,.3); border-radius: 5px; padding: 2px 6px; }
    526. 

  526.   .biz-step-title { font-size: 13px; font-weight: 650; color: var(--text); }
    527. 

  527.   .biz-status { font-family: var(--mono); font-size: 9px; letter-spacing: .06em; padding: 3px 7px;
    528. 

  528.                 border: 1px solid var(--border2); border-radius: 999px; color: var(--muted); }
    529. 

  529.   .biz-status.success { color: var(--ok); border-color: rgba(52,211,153,.38); background: rgba(52,211,153,.08); }
    530. 

  530.   .biz-status.failed { color: var(--fail); border-color: rgba(248,113,113,.38); background: rgba(248,113,113,.08); }
    531. 

  531.   .biz-status.running { color: var(--run); border-color: rgba(251,191,36,.38); background: rgba(251,191,36,.08); }
    532. 

  532.   .biz-rail { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); }
    533. 

  533.   .biz-cell { min-width: 0; padding: 13px; border-right: 1px solid var(--border); }
    534. 

  534.   .biz-cell:last-child { border-right: 0; }
    535. 

  535.   .biz-cell-k { display: flex; align-items: center; gap: 6px; margin-bottom: 7px;
    536. 

  536.                 font-family: var(--mono); font-size: 9px; font-weight: 750; letter-spacing: .09em; color: var(--faint); }
    537. 

  537.   .biz-cell-k::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--faint); }
    538. 

  538.   .biz-cell.action .biz-cell-k::before { background: rgb(56,189,248); }
    539. 

  539.   .biz-cell.basis .biz-cell-k::before { background: rgb(167,139,250); }
    540. 

  540.   .biz-cell.judge .biz-cell-k::before { background: var(--run); }
    541. 

  541.   .biz-cell.output .biz-cell-k::before { background: var(--ok); }
    542. 

  542.   .biz-cell-v { font-size: 11.5px; line-height: 1.65; color: var(--text); word-break: break-word; }
    543. 

  543.   .biz-reason { margin-top: 7px; padding-top: 7px; border-top: 1px dashed var(--border);
    544. 

  544.                 font-size: 10.5px; line-height: 1.55; color: var(--muted); }
    545. 

  545.   .biz-reason b { color: var(--faint); font-weight: 600; }
    546. 

  546.   .biz-verdict { display: inline-flex; margin-bottom: 6px; padding: 2px 6px; border-radius: 5px;
    547. 

  547.                  font-family: var(--mono); font-size: 9px; font-weight: 800; color: var(--run);
    548. 

  548.                  border: 1px solid rgba(251,191,36,.35); }
    549. 

  549.   .biz-verdict.pass, .biz-verdict.completed { color: var(--ok); border-color: rgba(52,211,153,.38); }
    550. 

  550.   .biz-verdict.fail, .biz-verdict.failed { color: var(--fail); border-color: rgba(248,113,113,.38); }
    551. 

  551.   .biz-items { display: flex; flex-direction: column; gap: 7px; }
    552. 

  552.   .biz-item { padding: 7px 8px; border: 1px solid var(--border); border-radius: 8px; background: var(--panel); }
    553. 

  553.   .biz-item strong { display: block; font-size: 10.5px; line-height: 1.45; color: var(--text); }
    554. 

  554.   .biz-item span { display: block; margin-top: 2px; font-size: 10px; line-height: 1.5; color: var(--muted); }
    555. 

  555.   .biz-item code { display: block; margin-top: 3px; font-family: var(--mono); font-size: 9px; color: var(--faint); word-break: break-all; }
    556. 

  556.   .biz-thumb { width: 100%; max-height: 118px; object-fit: cover; margin-top: 7px; border-radius: 7px;
    557. 

  557.                border: 1px solid var(--border); background: var(--bg); cursor: zoom-in; }
    558. 

  558.   .biz-more { margin-top: 8px; border-top: 1px dashed var(--border); }
    559. 

  559.   .biz-more summary { padding-top: 8px; cursor: pointer; font-family: var(--mono); font-size: 9.5px; color: var(--accent); }
    560. 

  560.   .biz-more-body { display: flex; flex-direction: column; gap: 6px; padding-top: 8px; }
    561. 

  561.   .biz-criterion { padding: 7px; border-left: 2px solid var(--border2); background: rgba(255,255,255,.015); }
    562. 

  562.   .biz-criterion-h { display: flex; justify-content: space-between; gap: 8px; font-size: 9.5px; color: var(--text); }
    563. 

  563.   .biz-criterion-p { margin-top: 4px; font-size: 10px; line-height: 1.55; color: var(--muted); }
    564. 

  564.   @media (max-width: 980px) {
    565. 

  565.     .biz-rail { grid-template-columns: 1fr 1fr; }
    566. 

  566.     .biz-cell:nth-child(2) { border-right: 0; }
    567. 

  567.     .biz-cell:nth-child(-n+2) { border-bottom: 1px solid var(--border); }
    568. 

  568.   }
    569. 

  569.   @media (max-width: 760px) {
    570. 

  570.     .biz-lede { grid-template-columns: 1fr; }
    571. 

  571.     .biz-meta { justify-content: flex-start; }
    572. 

  572.     .biz-rail { grid-template-columns: 1fr; }
    573. 

  573.     .biz-cell { border-right: 0; border-bottom: 1px solid var(--border); }
    574. 

  574.     .biz-cell:last-child { border-bottom: 0; }
    575. 

  575.     .biz-round-h { grid-template-columns: auto 1fr; }
    576. 

  576.     .biz-round-h > .biz-status { grid-column: 2; justify-self: start; }
    577. 

  577.   }
    578. 

  578. 

  579.   /* ═══════════ 过程视图 · 画板（可平移/缩放的白板；节点自由摆放 + SVG 连线）═══════════ */
    580. 

  580.   .board { position: relative; height: 76vh; min-height: 480px; margin-top: 8px; border: 1px solid var(--border);
    581. 

  581.            border-radius: 16px; overflow: hidden; background: var(--bg2);
    582. 

  582.            background-image: radial-gradient(rgba(120,132,150,.28) 1.1px, transparent 1.1px); background-size: 24px 24px;
    583. 

  583.            cursor: grab; touch-action: none; user-select: none; }
    584. 

  584.   .board.dragging { cursor: grabbing; }
    585. 

  585.   .board-world { position: absolute; left: 0; top: 0; transform-origin: 0 0; }
    586. 

  586.   /* 模块间的引用边画在**块之上**（z 4 > .mod-block 的 2）：块很宽且各行居中，两个模块的定义列
    587. 

  587.      可能相隔数千 px，边必然斜穿过别的块 —— 压在块下面就等于没画。细虚线，压过去也不抢视觉。 */
    588. 

  588.   .board-edges { position: absolute; left: 0; top: 0; overflow: visible; pointer-events: none; z-index: 4; }
    589. 

  589.   .board-labels { position: absolute; left: 0; top: 0; z-index: 6; pointer-events: none; }
    590. 

  590.   /* 悬停展开的那一两条实例级引用线：画在最上层（要的就是"是哪一条"一眼可辨） */
    591. 

  591.   .board-edges.hot { z-index: 5; }
    592. 

  592.   /* 悬停连线上的标签：运行层标「输入 / 输出」（与卡面同色系），结构层标「引用 · 本轮 ×N」 */
    593. 

  593.   .edge-tag { position: absolute; transform: translate(-50%, -50%); padding: 1px 7px; border-radius: 8px;
    594. 

  594.               font-family: var(--mono); font-size: 10px; font-weight: 700; color: var(--fg);
    595. 

  595.               background: var(--bg); border: 1px solid var(--border2); white-space: nowrap; }
    596. 

  596.   .edge-tag.in  { color: rgb(56,189,248);  border-color: rgba(56,189,248,.55); }
    597. 

  597.   .edge-tag.out { color: rgb(74,222,128);  border-color: rgba(74,222,128,.55); }
    598. 

  598.   .edge-tag.ref { color: var(--muted); }
    599. 

  599.   .board-ctrls { position: absolute; right: 12px; bottom: 12px; z-index: 6; display: flex; gap: 6px; }
    600. 

  600.   .board-ctrls button { width: 32px; height: 32px; border-radius: 9px; border: 1px solid var(--border2); background: var(--panel);
    601. 

  601.                         color: var(--muted); font-size: 15px; cursor: pointer; display: flex; align-items: center; justify-content: center; }
    602. 

  602.   .board-ctrls button:hover { color: var(--accent); border-color: var(--accent); }
    603. 

  603.   .board-tip { position: absolute; left: 12px; bottom: 12px; z-index: 6; font-family: var(--mono); font-size: 10px; color: var(--faint);
    604. 

  604.                background: rgba(10,12,15,.6); padding: 3px 9px; border-radius: 7px; pointer-events: none; }
    605. 

  605. 

  606.   /* 全屏 / 沉浸式：把过程视图（步进器 + 画板）提到 inset:0 覆盖层，画板吃满剩余高度 */
    607. 

  607.   #snapView.fs { position: fixed; inset: 0; z-index: 300; width: auto !important;
    608. 

  608.                  background: var(--bg); padding: 14px 16px 0; display: flex; flex-direction: column; }
    609. 

  609.   #snapView.fs .snap-stepper { flex: 0 0 auto; padding: 4px 0 12px; margin: 0; }
    610. 

  610.   #snapView.fs .board { flex: 1 1 auto; height: auto !important; min-height: 0; margin-top: 0; }
    611. 

  611. 

  612.   /* 评估 */
    613. 

  613.   .gn-sub { font-family: var(--mono); font-size: 10px; color: var(--faint); }
    614. 

  614. 

  615.   /* 给槽位连线留出走线通道 */
    616. 

  616. 

  617.   .io-col { display: flex; flex-direction: column; gap: 10px; flex: 0 0 auto; }
    618. 

  618.   /* 输入/输出卡加宽：保证一行放得下 3 张缩略图（3×52 + 2×5 = 166px + 内边距）而不换行，
    619. 

  619.      卡片变宽也让整列更矮、更易读 */
    620. 

  620.   .io-col .pcard { width: 232px; }
    621. 

  621.   .io-col .pcard .pc-thumbs { flex-wrap: nowrap; }
    622. 

  622.   .io-col .pcard.pc-empty { border-style: dashed; opacity: .5; }
    623. 

  623.   /* 字段：标签在上、值在下（左右排会把值挤成窄条，读起来费劲） */
    624. 

  624.   .kv-list { display: flex; flex-direction: column; gap: 8px; margin-top: 9px; }
    625. 

  625.   .kv { display: flex; flex-direction: column; gap: 3px; }
    626. 

  626.   .kv-k { align-self: flex-start; font-family: var(--mono); font-size: 8.5px; color: rgb(var(--tone));
    627. 

  627.           border: 1px solid rgba(var(--tone), .4); border-radius: 4px; padding: 0 5px; }
    628. 

  628.   .kv-v { font-size: 11px; line-height: 1.55; color: var(--text); word-break: break-word;
    629. 

  629.           display: -webkit-box; -webkit-line-clamp: 4; -webkit-box-orient: vertical; overflow: hidden; }
    630. 

  630. 

  631.   /* plan 的 ops：一条一块，说明 + 涉及的任务卡（操作标识已融进卡本身，见 .mm-card.mm-op；子任务缩进） */
    632. 

  632.   .ops-list { display: flex; flex-direction: column; gap: 10px; margin-top: 10px; }
    633. 

  633.   .op-h { display: flex; align-items: baseline; gap: 7px; flex-wrap: wrap; margin-bottom: 6px; }
    634. 

  634.   .op-detail { font-size: 10px; line-height: 1.5; color: var(--muted); }
    635. 

  635.   .ops-h { font-family: var(--mono); font-size: 9px; letter-spacing: .08em; color: var(--muted);
    636. 

  636.            margin-top: 12px; padding-bottom: 5px; border-bottom: 1px solid var(--border); }
    637. 

  637.   .op-tasks { display: flex; flex-direction: column; gap: 6px; }
    638. 

  638.   /* 操作态任务卡：与任务台账**同一种卡**，只是徽标位换成「本轮对它做了什么」、左侧色条按操作着色 */
    639. 

  639.   .mm-card.mm-op { border-left: 3px solid var(--border2); }
    640. 

  640.   .mm-card.mm-op.op-add { border-left-color: var(--ok); }
    641. 

  641.   .mm-card.mm-op.op-update { border-left-color: var(--run); }
    642. 

  642.   .mm-card.mm-op.op-requeue { border-left-color: var(--kind); }
    643. 

  643.   .mm-card.mm-op.op-drop { border-left-color: var(--fail); }
    644. 

  644.   .mm-card.mm-op.op-reorder, .mm-card.mm-op.op-next { border-left-color: var(--accent); }
    645. 

  645.   .mmc-badge.op-add { color: var(--ok); background: rgba(52,211,153,.11); border-color: rgba(52,211,153,.34); }
    646. 

  646.   .mmc-badge.op-update { color: var(--run); background: rgba(251,191,36,.12); border-color: rgba(251,191,36,.36); }
    647. 

  647.   .mmc-badge.op-requeue { color: var(--kind); background: rgba(245,181,68,.12); border-color: rgba(245,181,68,.36); }
    648. 

  648.   .mmc-badge.op-drop { color: var(--fail); background: rgba(248,113,113,.11); border-color: rgba(248,113,113,.34); }
    649. 

  649.   .mmc-badge.op-reorder, .mmc-badge.op-next { color: var(--accent); background: rgba(139,157,255,.12);
    650. 

  650.                                               border-color: rgba(139,157,255,.35); }
    651. 

  651.   .op-tasks .mm-card { width: auto; }
    652. 

  652.   .mm-card.mm-modified { box-shadow: 0 0 0 1.5px var(--run); }
    653. 

  653.   .mmc-chgs { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 7px; }
    654. 

  654.   .chg-f { font-family: var(--mono); font-size: 9px; color: var(--run); background: rgba(251,191,36,.12);
    655. 

  655.            border: 1px solid rgba(251,191,36,.35); border-radius: 5px; padding: 0 6px; }
    656. 

  656.   .op-child { padding-left: 16px; }
    657. 

  657. 

  658.   /* 输出的交付件网格：图与「它是什么」成对，主件高亮 */
    659. 

  659.   .out-arts { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 10px; }
    660. 

  660.   .out-art { width: 64px; }
    661. 

  661.   .out-art img { width: 64px; height: 64px; object-fit: cover; border-radius: 8px; display: block;
    662. 

  662.                  border: 1px solid var(--border); background: var(--bg); cursor: zoom-in; }
    663. 

  663.   .out-art .oa-tag { font-family: var(--mono); font-size: 8.5px; color: var(--muted); margin-top: 4px;
    664. 

  664.                      text-align: center; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
    665. 

  665.   .out-art.is-primary img { border-color: rgb(var(--tone)); box-shadow: 0 0 0 1px rgba(var(--tone), .55); }
    666. 

  666.   .out-art.is-primary .oa-tag { color: rgb(var(--tone)); font-weight: 700; }
    667. 

  667.   .out-art.no-img { width: auto; max-width: 100%; }
    668. 

  668.   .out-art.no-img .oa-text { font-size: 10px; line-height: 1.5; color: var(--muted); border: 1px dashed var(--border2);
    669. 

  669.                              border-radius: 8px; padding: 6px 8px; }
    670. 

  670.   /* 输出卡的摘要压到 3 行，别喧宾夺主 */
    671. 

  671.   .pcard.pc-final .pcard-sum { -webkit-line-clamp: 3; }
    672. 

  672.   .io-col .pcard.pc-final { border-width: 1.5px; border-color: rgb(var(--tone));
    673. 

  673.                             background: rgba(var(--tone), .12); box-shadow: 0 0 0 1px rgba(var(--tone), .22); }
    674. 

  674.   /* 任务型输入槽：卡内嵌一串**任务卡**（与任务列表同款） */
    675. 

  675.   .pcard.pc-taskslot { width: 258px; cursor: default; }
    676. 

  676.   .pcard.pc-taskslot:hover { transform: none; border-color: var(--border2); }
    677. 

  677.   .task-strip { display: flex; flex-direction: column; gap: 7px; margin-top: 8px; }
    678. 

  678.   .mm-card.mm-mini { width: auto; padding: 8px 10px 9px; }
    679. 

  679.   .mm-card.mm-mini .mmc-name { font-size: 11.5px; -webkit-line-clamp: 1; }
    680. 

  680.   .mm-card.mm-mini .mmc-goal { font-size: 10px; -webkit-line-clamp: 2; }
    681. 

  681.   .mm-card.st-planned { border-left: 3px solid var(--accent); }
    682. 

  682.   .mmc-badge.planned { color: var(--accent); background: rgba(139,157,255,.12); border-color: rgba(139,157,255,.35); }
    683. 

  683.   /* 「下一轮」节点：本轮产出回吐的落点，点击切到下一轮（那条回边落在下一轮，不属于本轮的模块图） */
    684. 

  684.   .next-round { position: absolute; z-index: 2; cursor: pointer; padding: 10px 16px; border-radius: 12px;
    685. 

  685.                 border: 1px dashed rgba(139,157,255,.55); background: rgba(139,157,255,.08);
    686. 

  686.                 transition: border-color .15s, background .15s; }
    687. 

  687.   .next-round:hover { border-color: var(--accent); background: rgba(139,157,255,.16); }
    688. 

  688.   .nr-cap { font-family: var(--mono); font-size: 10px; color: var(--faint); letter-spacing: .4px; }
    689. 

  689.   .nr-t { font-size: 12.5px; font-weight: 700; color: var(--accent); margin-top: 3px; }
    690. 

  690. 

  691.   .slot-row .slot-empty { margin-left: auto; font-size: 9px; color: var(--faint); }
    692. 

  692.   /* 工序定义：一段一块（与运行流程里的子节点逐段对应） */
    693. 

  693.   .stage-row { border: 1px solid rgba(var(--tone), .35); background: rgba(var(--tone), .08); border-radius: 8px;
    694. 

  694.                padding: 6px 9px 7px; }
    695. 

  695.   .stage-row .stage-h { display: flex; align-items: center; gap: 6px; }
    696. 

  696.   .stage-row .stage-n { font-family: var(--mono); font-size: 9px; font-weight: 700; color: #0b0e13;
    697. 

  697.                         background: rgb(var(--tone)); border-radius: 4px; padding: 0 5px; }
    698. 

  698.   .stage-row .nm { font-family: var(--mono); font-size: 10.5px; font-weight: 700; color: var(--text); }
    699. 

  699.   .stage-row .stage-io { font-size: 9.5px; line-height: 1.5; color: var(--muted); margin-top: 3px; }
    700. 

  700.   .stage-row .stage-io .io-k { font-family: var(--mono); font-size: 8.5px; color: rgb(var(--tone));
    701. 

  701.                                border: 1px solid rgba(var(--tone), .45); border-radius: 4px;
    702. 

  702.                                padding: 0 4px; margin-right: 5px; }
    703. 

  703.   .stage-row .stage-meta { font-family: var(--mono); font-size: 9px; color: var(--faint); margin-top: 3px;
    704. 

  704.                            overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
    705. 

  705.   .stage-row .stage-rules { margin-top: 5px; border-top: 1px dashed rgba(var(--tone), .3); padding-top: 5px; }
    706. 

  706.   .stage-row .rule { position: relative; padding-left: 11px; font-size: 9.5px; line-height: 1.55; color: var(--text); }
    707. 

  707.   .stage-row .rule::before { content: "▪"; position: absolute; left: 2px; color: rgb(var(--tone)); }
    708. 

  708.   .stage-arrow { text-align: center; font-size: 11px; color: rgba(var(--tone), .8); line-height: 1; margin: 1px 0; }
    709. 

  709. 

  710.   /* 结构段：叶模块=一列；组合模块=左「本模块自身结构」+ 右「子模块结构链」两列并排。
    711. 

  711.      宽度不写死——由内容在 min/max 之间自适应。 */
    712. 

  712.   .gs-own { flex: 0 0 auto; min-width: 0; display: flex; flex-direction: column; gap: 9px;
    713. 

  713.             min-width: 200px; max-width: 250px; }
    714. 

  714.   /* 槽位表：竖排一行一个槽（不再挤成 chip 云）——左侧输入盒逐行连线过来，线不打结 */
    715. 

  715.   .slot-list { display: flex; flex-direction: column; gap: 5px; margin-top: 8px; }
    716. 

  716.   .slot-row { display: flex; align-items: center; gap: 6px; font-family: var(--mono); font-size: 9.5px;
    717. 

  717.               color: var(--text); background: rgba(var(--tone), .10); border: 1px solid rgba(var(--tone), .30);
    718. 

  718.               border-radius: 6px; padding: 3px 8px; }
    719. 

  719.   .slot-row.off { color: var(--faint); border-style: dashed; background: transparent; opacity: .65; }
    720. 

  720.   .slot-row .dot { width: 5px; height: 5px; border-radius: 50%; background: rgb(var(--tone)); flex: 0 0 auto; }
    721. 

  721.   .slot-row.off .dot { background: var(--faint); }
    722. 

  722.   .slot-row .nm { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
    723. 

  723.   /* 结构里的「输入」槽位 ↔ 运行实例里的输入块：hover 任一侧，同键的两侧一起点亮（多个实例则各自那张都亮）。 */
    724. 

  724.   .slot-row.slot-hot { background: hsl(var(--mc) 60% 50% / .45); border-color: hsl(var(--mc) 70% 65%);
    725. 

  725.                        color: var(--text); opacity: 1; }
    726. 

  726.   .slot-row.slot-hot .dot { background: hsl(var(--mc) 70% 68%); }
    727. 

  727.   .pcard.slot-hot { outline: 2px solid hsl(var(--mc) 70% 62%); outline-offset: 2px;
    728. 

  728.                     background: hsl(var(--mc) 60% 50% / .26); }
    729. 

  729. 

  730.   /* 输入/输出/结构卡上的构成 chips（如「输入由哪些块拼成」） */
    731. 

  731.   .pc-chips { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 7px; }
    732. 

  732.   .pc-chip { font-family: var(--mono); font-size: 9px; color: var(--muted); background: var(--bg2);
    733. 

  733.              border: 1px solid var(--border); border-radius: 5px; padding: 1px 6px; }
    734. 

  734.   /* 槽位 chip：左侧输入盒连线的落点 */
    735. 

  735.   .pc-chip.slot-chip { color: var(--text); border-color: rgba(139,157,255,.42); background: rgba(139,157,255,.07); }
    736. 

  736.   .pc-note { font-family: var(--mono); font-size: 10px; color: var(--faint); margin-top: 7px; }
    737. 

  737. 

  738.   /* 过程条：横向列序列，列高按内容自然撑开（不强制等高），列间留白供连线穿过 */
    739. 

  739.   /* 运行链**一行到底、不折行**：一条链就是一条链，折行会把「下一步」画到左边去，读起来是断的。
    740. 

  740.      链再长也横着排（画板本就可平移缩放），步与步之间的留白留给 drawLaneEdges 画曲线箭头。 */
    741. 

  741.   /* 各步**竖向居中**对齐：链的轴线因此是一条直线，相邻两步的连线基本是平的；顶对齐时一个很高的
    742. 

  742.      输入节点会把它的中心拉到别人下方好几百 px，连线就成了一条从画面外扫上来的大弧。 */
    743. 

  743.   .lane-steps { position: relative; display: flex; flex-wrap: nowrap; align-items: center;
    744. 

  744.     gap: 52px; }
    745. 

  745.   /* 链内连线画在泳道自己的 SVG 上：泳道背景之上、卡片之下（.lane-col 有 z-index:1），线因此是清晰的 */
    746. 

  746.   .lane-wires { position: absolute; left: 0; top: 0; z-index: 0; overflow: visible; pointer-events: none; }
    747. 

  747.   /* 冗余画了输入列的流程：各列竖向居中，运行卡对齐到输入整体的中心（见 leafLaneHtml） */
    748. 

  748.   .lane-empty { font-family: var(--mono); font-size: 11.5px; color: var(--faint); padding: 16px; }
    749. 

  749.   .lane-col { position: relative; z-index: 1; display: flex; flex-direction: column; }
    750. 

  750. 

  751.   /* 并发批次列：同一 LLM 轮请求的多工具竖向并列（可见并发）；分叉/汇聚由 lane-wires 连线体现 */
    752. 

  752.   .lane-col.conc { gap: 6px; }
    753. 

  753.   /* 非 Agent 模块在流程里冗余画的「输入」列：虚线描边 + 半透明，一眼看出它不是一步「跑动」，
    754. 

  754.      而是喂进右边那一步的东西（连线由 lane-wires 照常画）。 */
    755. 

  755.   .board-none { margin: 48px auto; max-width: 520px; text-align: center;
    756. 

  756.                 font-size: 12px; color: var(--faint); }
    757. 

  757.   .pc-conc-tag { font-family: var(--mono); font-size: 9.5px; font-weight: 700; letter-spacing: .6px; color: var(--accent); }
    758. 

  758.   .pc-parallel-stack { display: flex; flex-direction: column; gap: 14px; }
    759. 

  759. 

  760.   .pcard { flex: 0 0 auto; width: 210px; border: 1px solid var(--border2); border-radius: 12px; background: var(--panel);
    761. 

  761.            padding: 10px 12px 11px; cursor: pointer; display: flex; flex-direction: column;
    762. 

  762.            transition: transform .12s, box-shadow .15s, border-color .15s; }
    763. 

  763.   .pcard:hover { transform: translateY(-2px); box-shadow: 0 12px 26px -14px rgba(0,0,0,.7); border-color: var(--accent); }
    764. 

  764.   .pc-plan { border-left: 3px solid var(--accent); } .pc-exec { border-left: 3px solid var(--ok); }
    765. 

  765.   .pc-eval { border-left: 3px solid var(--kind); border-style: dashed; }
    766. 

  766.   /* 失败节点（如生成报错）：泳道里以红框 + 「✗ 失败」标记 */
    767. 

  767.   .pcard.pc-failed { border-color: var(--fail); border-left-color: var(--fail); background: linear-gradient(180deg, rgba(248,113,113,.07), var(--panel)); }
    768. 

  768.   .pcard.pc-failed .pc-label { color: var(--fail); }
    769. 

  769.   .pc-fail-badge { margin-left: auto; font-family: var(--mono); font-size: 9px; font-weight: 700; color: var(--fail);
    770. 

  770.                    background: rgba(248,113,113,.14); border: 1px solid rgba(248,113,113,.45); border-radius: 5px; padding: 1px 5px; flex: 0 0 auto; }
    771. 

  771.   /* ── 旁路标注（perl_annotation）：run 跑完后重放生成的「这步做了什么 + 依据来源」 ──
    772. 

  772.      **必须与运行时事实视觉分开**：卡上那些 args/result 是当时真实发生的，标注是另一个模型事后写的
    773. 

  773.      解释；混在一片区域里，用的人迟早会把后者当前者。故这里独立底色 + 🔖 抬头。 */
    774. 

  774.   .pc-ann { margin: 7px -12px 0; padding: 7px 12px 8px; background: rgba(167,139,250,.09);
    775. 

  775.             border-top: 1px solid rgba(167,139,250,.22); border-bottom: 1px solid rgba(167,139,250,.16); }
    776. 

  776.   /* 摘要是这张卡上**最该被一眼读到**的东西（"这步做了什么"），所以加粗提亮、字号压过其余行；
    777. 

  777.      原来那条「🔖 标注 · 这步做了什么」抬头去掉了——紫色区块本身已经把"这是标注"说清楚了，
    778. 

  778.      再加一行标签只是把视觉重心从内容拉到了说明上。 */
    779. 

  779.   .pc-ann-sum { font-size: 12.5px; line-height: 1.62; font-weight: 700; color: #ddd2ff;
    780. 

  780.                 letter-spacing: .2px; }
    781. 

  781.   /* ── 工具卡的输入 / 输出：各成一段，图跟着自己那一段走 ──
    782. 

  782.      以前是两行裸文本 + 图统一堆在卡底 —— 那样既看不出字段结构，也分不清哪张图是喂进去的、
    783. 

  783.      哪张是产出的。现在一段一个小分区：入向左色条、出向右色条，缩略图就在各自分区里。 */
    784. 

  784.   .pc-io-sec { margin: 7px -12px 0; padding: 6px 12px 7px; border-top: 1px solid var(--border); }
    785. 

  785.   .pc-io-sec.in  { border-left: 2px solid rgba(56,189,248,.55); }
    786. 

  786.   .pc-io-sec.out { border-left: 2px solid rgba(74,222,128,.55); }
    787. 

  787.   /* function calling：模型这一步**发出的调用**。与「输入/输出」区分开——它既不是喂给模型的输入，
    788. 

  788.      也不是产物，而是模型的决策动作，下一步那个工具节点跑的就是它。
    789. 

  789.      **一次调用一块**：序号 + 工具名 + 该次入参；一轮发起多个就叠成多块（它们本就是一起发出的）。 */
    790. 

  790.   .pc-calls { margin: 8px -12px 0; border-top: 1px solid var(--border); }
    791. 

  791.   .pc-calls-h { font-family: var(--mono); font-size: 8.5px; font-weight: 700; letter-spacing: .6px;
    792. 

  792.                 color: rgb(183,160,255); padding: 6px 12px 0; }
    793. 

  793.   .pc-call { margin-top: 5px; padding: 5px 12px 7px;
    794. 

  794.              border-left: 2px solid rgba(167,139,250,.6); background: rgba(167,139,250,.06); }
    795. 

  795.   .pcl-h { display: flex; align-items: center; gap: 6px; }
    796. 

  796.   .pcl-i { flex: 0 0 auto; width: 14px; height: 14px; border-radius: 50%; display: grid; place-items: center;
    797. 

  797.            font-family: var(--mono); font-size: 9px; color: var(--bg); background: rgba(167,139,250,.9); }
    798. 

  798.   .pcl-n { font-family: var(--mono); font-size: 11px; font-weight: 700; color: #c9b8ff; word-break: break-all; }
    799. 

  799.   .pcl-args { margin-top: 4px; }
    800. 

  800.   .pcl-args .pc-io-lead { font-size: 10.5px; -webkit-line-clamp: 2; }
    801. 

  801.   .pcl-args .io-chip { border-color: rgba(167,139,250,.35); }
    802. 

  802.   .pcl-thumbs { margin-top: 5px; gap: 4px; }
    803. 

  803.   .pcl-thumbs img { width: 40px; height: 40px; }
    804. 

  804.   .pcl-none { font-family: var(--mono); font-size: 9px; color: var(--faint); }
    805. 

  805.   .pc-io-h { display: flex; align-items: center; gap: 6px; font-family: var(--mono); font-size: 8.5px;
    806. 

  806.              font-weight: 700; letter-spacing: .6px; margin-bottom: 5px; }
    807. 

  807.   .pc-io-h .io-ok  { color: var(--ok); }
    808. 

  808.   .pc-io-h .io-bad { color: var(--fail); }
    809. 

  809.   /* 主文：这一侧最该被读到的那句话（query / prompt / thought） */
    810. 

  810.   .pc-io-lead { font-size: 11.5px; line-height: 1.6; color: var(--text); word-break: break-word;
    811. 

  811.                 overflow: hidden; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; }
    812. 

  812.   /* 标签：一批条目（工具名、字段名）——一枚枚，而不是一坨 JSON */
    813. 

  813.   .pc-io-chips { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 5px; }
    814. 

  814.   .pc-io-chips .io-chip { font-family: var(--mono); font-size: 9px; line-height: 1.5; color: var(--text);
    815. 

  815.                           background: var(--panel2); border: 1px solid var(--border2); border-radius: 5px;
    816. 

  816.                           padding: 1px 6px; max-width: 100%; overflow: hidden; text-overflow: ellipsis;
    817. 

  817.                           white-space: nowrap; }
    818. 

  818.   .pc-io-sec.in .io-chip  { border-color: rgba(56,189,248,.35); }
    819. 

  819.   .pc-io-sec.out .io-chip { border-color: rgba(74,222,128,.35); }
    820. 

  820.   .pc-io-sec.in  .pc-io-h { color: rgba(56,189,248,.9); }
    821. 

  821.   .pc-io-sec.out .pc-io-h { color: rgba(74,222,128,.9); }
    822. 

  822.   .pc-io-kv { display: flex; flex-direction: column; gap: 3px; margin-top: 5px; }
    823. 

  823.   .pc-io-kv .io-row { display: flex; gap: 6px; font-size: 10.5px; line-height: 1.5; }
    824. 

  824.   .pc-io-kv .io-k { flex: 0 0 auto; max-width: 74px; font-family: var(--mono); font-size: 9px; font-weight: 700;
    825. 

  825.                     color: var(--faint); padding-top: 1px; overflow: hidden; text-overflow: ellipsis;
    826. 

  826.                     white-space: nowrap; }
    827. 

  827.   .pc-io-kv .io-v { color: var(--muted); overflow: hidden; display: -webkit-box; -webkit-line-clamp: 2;
    828. 

  828.                     -webkit-box-orient: vertical; word-break: break-all; }
    829. 

  829.   .pc-io-text { font-size: 10.5px; line-height: 1.55; color: var(--muted); overflow: hidden;
    830. 

  830.                 display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; word-break: break-word; }
    831. 

  831.   .io-thumbs { margin-top: 6px; }
    832. 

  832.   .io-thumbs img { width: 46px; height: 46px; }
    833. 

  833.   /* 底部「决策依据」入口 */
    834. 

  834.   .pc-basis { margin: 8px -12px -11px; padding: 7px 12px; display: flex; align-items: center; gap: 6px;
    835. 

  835.               font-family: var(--mono); font-size: 9.5px; font-weight: 700; color: rgb(167,139,250);
    836. 

  836.               background: rgba(167,139,250,.10); border-top: 1px dashed rgba(167,139,250,.35);
    837. 

  837.               border-radius: 0 0 11px 11px; }
    838. 

  838.   .pc-basis { flex-wrap: wrap; }
    839. 

  839.   .pc-basis:hover { background: rgba(167,139,250,.2); }
    840. 

  840.   .pc-basis .bs-h { flex: 0 0 auto; }
    841. 

  841.   .pc-basis .bs-n { margin-left: auto; opacity: .8; }
    842. 

  842.   /* 一类来源一枚标签：图标 + 类型名 + 条数 —— 一眼看出这步是被 prompt 训导驱动的还是被输入驱动的 */
    843. 

  843.   .pc-basis .bs-tag { display: inline-flex; align-items: center; gap: 3px; font-size: 9px; font-weight: 600;
    844. 

  844.                       color: var(--text); background: rgba(167,139,250,.16); border: 1px solid rgba(167,139,250,.3);
    845. 

  845.                       border-radius: 5px; padding: 1px 5px; }
    846. 

  846.   .pc-basis .bs-tag b { font-family: var(--mono); color: rgb(167,139,250); }
    847. 

  847.   .pc-basis .bs-ic { opacity: .85; }
    848. 

  848.   /* 文档块顶部的引用跳转条：一处引用一枚，点了滚到该处并闪一下 */
    849. 

  849.   .src-jump { display: flex; flex-wrap: wrap; gap: 6px; padding: 8px 11px; border-bottom: 1px dashed var(--border2);
    850. 

  850.               background: rgba(255,255,255,.02); }
    851. 

  851.   .src-jump .sj { font-size: 10.5px; line-height: 1.5; color: var(--muted); background: var(--panel);
    852. 

  852.                   border: 1px solid var(--border2); border-radius: 6px; padding: 2px 7px; cursor: pointer; }
    853. 

  853.   .src-jump .sj:hover { color: var(--text); border-color: rgb(167,139,250); }
    854. 

  854.   .src-jump .sj.off { opacity: .5; cursor: default; }
    855. 

  855.   .src-hl.flash { animation: hlflash .9s ease; }
    856. 

  856.   @keyframes hlflash { 0%,100% { background: rgba(245,181,68,.28); } 40% { background: rgba(245,181,68,.85); } }
    857. 

  857. 

  858.   /* ── 左侧「依据来源」栏：点依据 → 依次列出各来源全文，并在其中高亮被引片段 ── */
    859. 

  859.   .srcbar { position: fixed; top: 0; left: 0; bottom: 0; width: 520px; max-width: 94vw; z-index: 342;
    860. 

  860.             background: linear-gradient(180deg, var(--panel), var(--bg2)); border-right: 1px solid var(--border2);
    861. 

  861.             box-shadow: 20px 0 50px -20px rgba(0,0,0,.7); transform: translateX(-102%);
    862. 

  862.             transition: transform .24s cubic-bezier(.4,0,.2,1); display: flex; flex-direction: column; }
    863. 

  863.   .srcbar.open { transform: none; }
    864. 

  864.   .srcbar-h { display: flex; align-items: center; gap: 10px; padding: 14px 16px; border-bottom: 1px solid var(--border); }
    865. 

  865.   .srcbar-tag { font-family: var(--mono); font-size: 10px; font-weight: 700; letter-spacing: 1px;
    866. 

  866.                 padding: 3px 10px; border-radius: 7px; color: rgb(167,139,250); background: rgba(167,139,250,.14); }
    867. 

  867.   .srcbar-t { font-size: 13px; font-weight: 600; color: var(--text); overflow: hidden;
    868. 

  868.               text-overflow: ellipsis; white-space: nowrap; }
    869. 

  869.   .srcbar-x { margin-left: auto; width: 28px; height: 28px; border-radius: 8px; cursor: pointer; flex: 0 0 auto;
    870. 

  870.               display: flex; align-items: center; justify-content: center; color: var(--muted); background: var(--panel2); }
    871. 

  871.   .srcbar-x:hover { color: var(--text); }
    872. 

  872.   .srcbar-b { flex: 1; overflow: auto; padding: 14px 16px 40px; }
    873. 

  873.   .srcbar-sum { font-size: 12px; line-height: 1.7; color: var(--muted); background: rgba(167,139,250,.08);
    874. 

  874.                 border: 1px solid rgba(167,139,250,.2); border-radius: 10px; padding: 9px 11px; margin-bottom: 14px; }
    875. 

  875.   .src-item { border: 1px solid var(--border2); border-radius: 11px; margin-bottom: 12px; overflow: hidden; }
    876. 

  876.   .src-h { display: flex; align-items: center; gap: 7px; padding: 8px 11px; background: var(--panel2);
    877. 

  877.            border-bottom: 1px solid var(--border); flex-wrap: wrap; }
    878. 

  878.   .src-n { font-family: var(--mono); font-size: 9px; font-weight: 700; color: #0b0e13; background: rgb(167,139,250);
    879. 

  879.            border-radius: 5px; padding: 1px 6px; flex: 0 0 auto; }
    880. 

  880.   .src-kind { font-family: var(--mono); font-size: 9px; color: var(--faint); border: 1px solid var(--border2);
    881. 

  881.               border-radius: 5px; padding: 1px 6px; }
    882. 

  882.   .src-title { font-size: 11.5px; font-weight: 600; color: var(--text); min-width: 0; overflow: hidden;
    883. 

  883.                text-overflow: ellipsis; white-space: nowrap; }
    884. 

  884.   .src-loc { margin-left: auto; font-family: var(--mono); font-size: 9px; flex: 0 0 auto; }
    885. 

  885.   .src-loc.ok { color: var(--ok); } .src-loc.no { color: var(--warn, #f5b544); }
    886. 

  886.   .src-body { padding: 10px 12px; font-size: 11.5px; line-height: 1.8; color: var(--muted);
    887. 

  887.               white-space: pre-wrap; word-break: break-word; max-height: 340px; overflow: auto; }
    888. 

  888.   /* markdown 渲染态：**直接复用 .pp-md**（右侧详情抽屉用的就是它）——同一种东西只该有一种画法，
    889. 

  889.      另起一套字号/间距只会让同一份 prompt 在两个面板里长得不一样。这里只解掉 pre-wrap。 */
    890. 

  890.   .src-body.md { white-space: normal; padding: 0; }
    891. 

  891.   /* `.pp-md` 自带 `max-height:340px; overflow:auto`（它原本是抽屉里的小块富文本）。套进来源栏后
    892. 

  892.      就成了**内层滚动条**：外层 .src-body 撑到 635px 却只显示 340px 的内容 → 下方一片空白，而
    893. 

  893.      jumpHl 滚的是外层（它根本没有可滚区）→ 点跳转纹丝不动。这里把滚动权交还给 .src-body。 */
    894. 

  894.   .src-body .pp-md { max-height: none; overflow: visible; }
    895. 

  895.   /* 只有一块来源 → 铺满剩余高度（一份 4600 字的 prompt 挤在 340px 里根本没法读） */
    896. 

  896.   .srcbar-b.single { display: flex; flex-direction: column; }
    897. 

  897.   .srcbar-b.single .src-item { flex: 1; display: flex; flex-direction: column; min-height: 0; margin-bottom: 0; }
    898. 

  898.   .srcbar-b.single .src-body { flex: 1; max-height: none; }
    899. 

  899.   .src-body img { max-width: 100%; border-radius: 8px; }
    900. 

  900.   .src-hl { background: rgba(245,181,68,.28); color: var(--text); border-bottom: 2px solid rgba(245,181,68,.9);
    901. 

  901.             border-radius: 3px; padding: 1px 0; }
    902. 

  902.   .src-quote { padding: 8px 12px; font-size: 11px; line-height: 1.7; color: var(--muted);
    903. 

  903.                border-top: 1px dashed var(--border2); background: rgba(255,255,255,.02); }
    904. 

  904. 

  905.   /* 工具清单：用过的高亮（本次真的动用过这项能力），没用过的压暗 */
    906. 

  906.   .tool-chips { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 7px; }
    907. 

  907.   .tool-chip { display: inline-flex; align-items: center; gap: 4px; font-family: var(--mono); font-size: 9px;
    908. 

  908.                line-height: 1.6; color: var(--faint); background: var(--panel2);
    909. 

  909.                border: 1px solid var(--border2); border-radius: 5px; padding: 1px 6px; opacity: .62; }
    910. 

  910.   .tool-chip.used { color: var(--ok); border-color: rgba(74,222,128,.55);
    911. 

  911.                     background: rgba(74,222,128,.12); opacity: 1; font-weight: 700; }
    912. 

  912.   .tool-chip .tc-dot { width: 4px; height: 4px; border-radius: 50%; background: var(--ok); flex: 0 0 auto; }
    913. 

  913.   /* 详情里的工具项：默认折叠，只露一行标题；点开才显示说明与参数 */
    914. 

  914.   .tool-item .tool-hd { display: flex; align-items: center; gap: 7px; cursor: pointer; flex-wrap: wrap; }
    915. 

  915.   .tool-item .tool-hd:hover { color: var(--accent); }
    916. 

  916.   .tool-item .tool-arrow { display: inline-block; font-size: 10px; color: var(--faint);
    917. 

  917.                            transition: transform .15s; }
    918. 

  918.   .tool-item.open .tool-arrow { transform: rotate(90deg); color: var(--accent); }
    919. 

  919.   .tool-item .tool-meta { margin-left: auto; font-family: var(--mono); font-size: 9.5px; color: var(--faint);
    920. 

  920.                           font-weight: 400; }
    921. 

  921.   .tool-item .tool-bd { display: none; margin-top: 9px; }
    922. 

  922.   .tool-item.open .tool-bd { display: block; }
    923. 

  923.   .tool-used-tag { margin-left: 8px; font-family: var(--mono); font-size: 9px; font-weight: 700; color: var(--ok);
    924. 

  924.                    background: rgba(74,222,128,.14); border: 1px solid rgba(74,222,128,.45);
    925. 

  925.                    border-radius: 5px; padding: 1px 6px; }
    926. 

  926.   /* 工具参数表：一行一个参数（名 / 类型 / 必填 / 说明） */
    927. 

  927.   .tool-params { margin-top: 9px; border-top: 1px dashed var(--border2); padding-top: 8px;
    928. 

  928.                  display: flex; flex-direction: column; gap: 5px; }
    929. 

  929.   .tp-row { display: flex; align-items: baseline; gap: 8px; font-size: 11.5px; line-height: 1.6; flex-wrap: wrap; }
    930. 

  930.   .tp-n { font-family: var(--mono); font-weight: 700; color: var(--text); }
    931. 

  931.   .tp-t { font-family: var(--mono); font-size: 10px; color: var(--accent); }
    932. 

  932.   .tp-r { font-family: var(--mono); font-size: 9px; color: var(--faint); border: 1px solid var(--border2);
    933. 

  933.           border-radius: 4px; padding: 0 4px; }
    934. 

  934.   .tp-r.req { color: var(--warn, #f5b544); border-color: rgba(245,181,68,.5); }
    935. 

  935.   .tp-d { color: var(--muted); flex: 1 1 240px; min-width: 0; }
    936. 

  936. 

  937.   .id-chip { font-family: var(--mono); font-size: 8.5px; font-weight: 600; color: var(--faint);
    938. 

  938.              background: var(--panel2); border: 1px solid var(--border2); border-radius: 5px;
    939. 

  939.              padding: 1px 5px; cursor: pointer; user-select: all; flex: 0 0 auto; }
    940. 

  940.   .id-chip:hover { color: var(--text); border-color: var(--accent); }
    941. 

  941.   .id-chip.copied { color: var(--ok); border-color: var(--ok); }
    942. 

  942.   /* 段标题里的 id：段标题是深色徽标底，这里配一档亮色 */
    943. 

  943.   .pc-id { align-self: flex-start; margin: -2px 0 5px; }
    944. 

  944. 

  945.   .pcard-h { display: flex; align-items: center; gap: 6px; margin-bottom: 6px; }
    946. 

  946.   .pcard-h .pc-ic { font-size: 12px; flex: 0 0 auto; }
    947. 

  947.   .pc-label { font-family: var(--mono); font-size: 10.5px; font-weight: 700; color: var(--text); overflow: hidden;
    948. 

  948.               text-overflow: ellipsis; white-space: nowrap; min-width: 0; }
    949. 

  949.   .pc-tok { margin-left: auto; font-family: var(--mono); font-size: 9px; color: var(--faint); flex: 0 0 auto; }
    950. 

  950.   /* 思考（extended thinking / reasoning）：与正文分开的一段 —— 「怎么想的」和「说了什么」不是一回事。
    951. 

  951.      斜体 + 淡紫左条，视觉上比正文轻一档；卡面压到 8 行，全文在详情里。 */
    952. 

  952.   .pc-think { margin: 8px -12px 0; padding: 6px 12px 7px; border-top: 1px solid var(--border);
    953. 

  953.               border-left: 2px solid rgba(167,139,250,.45); background: rgba(167,139,250,.05); }
    954. 

  954.   .pc-think-h { font-family: var(--mono); font-size: 8.5px; font-weight: 700; letter-spacing: .6px;
    955. 

  955.                 color: rgba(183,160,255,.9); margin-bottom: 4px; }
    956. 

  956.   .pc-think-b { font-size: 11px; line-height: 1.6; color: var(--muted); font-style: italic;
    957. 

  957.                 word-break: break-word; overflow: hidden; display: -webkit-box;
    958. 

  958.                 -webkit-line-clamp: 8; -webkit-box-orient: vertical; }
    959. 

  959.   /* 模型推理节点：与工具节点**一眼可分** —— 紫色左条 + 略宽，正文（模型在想什么）多给几行。
    960. 

  960.      它是链上做决策的那一步，后面那些工具节点跑的都是它这一步发出的 function calling。 */
    961. 

  961.   .pcard.pc-llm { width: 252px; border-left: 3px solid rgba(167,139,250,.85);
    962. 

  962.                   background: linear-gradient(180deg, rgba(167,139,250,.07), var(--panel)); }
    963. 

  963.   .pcard.pc-llm .pcard-sum { -webkit-line-clamp: 8; }
    964. 

  964.   .pcard-sum { font-size: 11.5px; line-height: 1.55; color: var(--muted); flex: 1;
    965. 

  965.                display: -webkit-box; -webkit-line-clamp: 4; -webkit-box-orient: vertical; overflow: hidden; word-break: break-word; }
    966. 

  966.   .pc-thumbs { display: flex; flex-wrap: wrap; gap: 5px; margin-top: 8px; }
    967. 

  967.   .pc-thumbs img { width: 52px; height: 52px; object-fit: cover; border-radius: 7px; border: 1px solid var(--border); background: var(--bg); cursor: zoom-in; }
    968. 

  968.   .pc-more { margin-top: 8px; font-family: var(--mono); font-size: 9.5px; color: var(--faint); }
    969. 

  969.   .pcard:hover .pc-more { color: var(--accent); }
    970. 

  970. 

  971.   .mm-card.mm-round-exec { box-shadow: 0 0 0 2px var(--ok), 0 0 22px -6px rgba(52,211,153,.5); }
    972. 

  972. 

  973.   /* **不设 max-width**：链里可能装着组合模块的格子（它自身又是两列），封顶就撑不开、
    974. 

  974.      内容会溢出到相邻段上。宽度由内容决定，只留下限防过窄。 */
    975. 

  975.   .sub-struct { flex: 0 0 auto; min-width: max-content; border: 1px solid rgba(var(--tone), .42); background: rgba(var(--tone), .09);
    976. 

  976.                 border-radius: 10px; padding: 7px 9px 8px; }
    977. 

  977.   .sub-struct.off { border-style: dashed; opacity: .6; background: transparent; }
    978. 

  978.   /* 结构格内部与最外层**同一规则**：叶=一列；组合=左「本模块自身结构」+ 右「子模块结构链」两列。
    979. 

  979.      这条规则逐层适用——嵌多深都是这个形状。 */
    980. 

  980.   .sub-struct .gs-own { min-width: 196px; max-width: 260px; }
    981. 

  981.   .gs-own > .pcard { width: auto; background: rgba(14,17,22,.78); border-color: rgba(var(--tone), .3); }
    982. 

  982.   /* ① 输入段 / ③ 运行流程段 / ④ 输出段：一个子模块一个框，三列逐框对齐（等高，见 syncCompositeRows） */
    983. 

  983.   .sub-in { align-self: stretch; min-width: max-content; }
    984. 

  984.   .sub-in {
    985. 

  985.       --tone: 56,189,248; border: 1px solid rgba(var(--tone), .40);
    986. 

  986.       background: rgba(var(--tone), .06); border-radius: 12px; padding: 8px 10px 10px; }
    987. 

  987.   /* 同一行的四段（输入框 / 结构格 / 运行框 / 输出框）用**同一个** --tone —— 底色一致即为同一个子模块，
    988. 

  988.      横着扫一眼就能对上，不必去读标题。tone 由 modTone(该行的第一路) 统一决定，四处同源。 */
    989. 

  989.   .sub-in.off { border-style: dashed; opacity: .55; background: transparent; }
    990. 

  990.   /* 模块块按**调用树横向生长**摆位（x = 上游右缘 + 间距、y = 上游顶边，兄弟向下堆），
    991. 

  991.      具体坐标由 placeBlocks() 量完实际尺寸后写进 style.left/top —— CSS 只管块自己长什么样。 */
    992. 

  992.   #boardWorld { position: relative; width: max-content; }
    993. 

  993.   .mod-block { position: absolute; z-index: 2; display: flex; align-items: stretch; width: max-content;
    994. 

  994.     border: 1px solid hsl(var(--mc) 60% 55% / .45); border-radius: 14px;
    995. 

  995.     background: hsl(var(--mc) 60% 50% / .05); }
    996. 

  996.   /* 这一列的底色是模块色 .40（比页面底色亮不少）——faint / muted 两个次要文字色本是为近乎透明的
    997. 

  997.      底色调的深灰，放这儿会糊掉。**在本列内重定义这两个变量**（自定义属性向下继承）：所有用到它们的
    998. 

  998.      子元素（标题 / 版本 / 摘要 / 流程图标签 / 源码路径…）一次性提亮，不必逐个枚举选择器。 */
    999. 

  999.   .mod-def { flex: 0 0 268px; display: flex; flex-direction: column; gap: 6px; padding: 14px;
    1000. 

  1000.     --faint: #a6b1c0; --muted: #ccd4e0;
    1001. 

  1001.     border-right: 1px solid hsl(var(--mc) 60% 55% / .35);
    1002. 

  1002.     background: hsl(var(--mc) 60% 50% / .40); border-radius: 14px 0 0 14px; }
    1003. 

  1003.   .md-cap { display: flex; align-items: center; gap: 7px;
    1004. 

  1004.     font-family: var(--mono); font-size: 10.5px; color: var(--faint); letter-spacing: .4px; }
    1005. 

  1005.   /* 调用树上的深度：L0 是本轮入口，往右一层加一 */
    1006. 

  1006.   .md-depth { font-family: var(--mono); font-size: 9.5px; font-weight: 700; color: hsl(var(--mc) 70% 72%);
    1007. 

  1007.     border: 1px solid hsl(var(--mc) 60% 55% / .5); border-radius: 5px; padding: 0 5px; }
    1008. 

  1008.   .md-key { font-family: var(--mono); font-size: 13px; font-weight: 700;
    1009. 

  1009.     color: hsl(var(--mc) 70% 72%); word-break: break-all; }
    1010. 

  1010.   .md-meta { display: flex; gap: 6px; flex-wrap: wrap; font-family: var(--mono); font-size: 10.5px; }
    1011. 

  1011.   .md-kind { padding: 1px 7px; border-radius: 6px; border: 1px solid hsl(var(--mc) 60% 55% / .5);
    1012. 

  1012.     color: hsl(var(--mc) 70% 72%); }
    1013. 

  1013.   .md-ver { color: var(--faint); }
    1014. 

  1014.   .md-sum { font-size: 11.5px; color: var(--muted); line-height: 1.6; }
    1015. 

  1015.   .md-cards { display: flex; flex-direction: column; gap: 6px; margin-top: 4px; }
    1016. 

  1016. 

  1017.   .mod-runs { flex: 1; min-width: max-content; display: flex; flex-direction: column; gap: 12px; padding: 12px 14px; }
    1018. 

  1018.   .mr-cap { font-family: var(--mono); font-size: 10.5px; color: var(--faint); }
    1019. 

  1019.   /* 一个运行实例 = 一条泳道。同一个模块的 N 次运行就是 N 条，纵向排开。 */
    1020. 

  1020.   .inst-lane { border: 1px dashed hsl(var(--mc) 60% 55% / .45); border-radius: 10px;
    1021. 

  1021.     padding: 10px 12px; background: hsl(var(--mc) 60% 50% / .05); width: max-content; max-width: 100%; }
    1022. 

  1022.   .inst-lane.off { border-style: dotted; opacity: .55; }
    1023. 

  1023.   .inst-lane.focus { outline: 2px solid hsl(var(--mc) 70% 62%); outline-offset: 2px; }
    1024. 

  1024.   /* 悬停展开引用时：被指向的那条泳道 / 那个 call 芯片一起点亮 —— 线与两端同时可辨 */
    1025. 

  1025.   .inst-lane.hot { outline: 2px dashed hsl(var(--mc) 70% 62%); outline-offset: 2px;
    1026. 

  1026.                    background: hsl(var(--mc) 60% 50% / .32); }
    1027. 

  1027.   .call-chip.hot { border-style: solid; box-shadow: 0 0 0 2px hsl(var(--mc) 70% 62% / .55); }
    1028. 

  1028.   .il-cap { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-bottom: 8px;
    1029. 

  1029.     font-family: var(--mono); font-size: 11px; color: var(--muted); }
    1030. 

  1030.   .il-cap .il-t { color: var(--fg); }
    1031. 

  1031.   .il-cap .il-flags { display: flex; align-items: center; gap: 6px; margin-left: auto; }
    1032. 

  1032.   .il-from { cursor: pointer; text-decoration: underline dotted; color: var(--faint); }
    1033. 

  1033.   .il-from:hover { color: var(--fg); }
    1034. 

  1034. 

  1035.   /* 链上的箭头不再是文字「→」，而是 SVG 实线曲线（drawLaneEdges），颜色 = 所在模块的 --mc。 */
    1036. 

  1036.   /* 首尾两个节点：输入是圆头、输出是右向箭头形 —— 与中间的运行节点区分开 */
    1037. 

  1037.   /* 宽度**跟着里面的卡走**（width:max-content）：卡是定宽的（普通 210 / llm 252 / 任务槽 258），
    1038. 

  1038.      写死 max-width:240px 会让任务槽那种更宽的卡直接顶出框外。 */
    1039. 

  1039.   .io-node { flex: 0 0 auto; width: max-content; padding: 8px 10px;
    1040. 

  1040.     border: 1px solid hsl(var(--mc) 60% 55% / .5); background: hsl(var(--mc) 60% 50% / .08); }
    1041. 

  1041.   .io-node.io-in { border-radius: 22px 10px 10px 22px; }
    1042. 

  1042.   .io-node.io-out { border-radius: 10px 22px 22px 10px; }
    1043. 

  1043.   .ion-cap { font-family: var(--mono); font-size: 10.5px; color: var(--faint); margin-bottom: 6px; }
    1044. 

  1044.   .ion-body { display: flex; flex-direction: column; gap: 6px; }
    1045. 

  1045. 

  1046.   /* 引用外部模块：流程里的一步（虚线框以示"这一步在别处跑"）。
    1047. 

  1047.      配色用**被调模块自己的** --mc（由 hueStyle 内联覆盖）——这样芯片、结构图里那个引用节点、
    1048. 

  1048.      跨块的引用连线、以及目标模块块本身，四处同色，顺着颜色就能一眼追到底。 */
    1049. 

  1049.   .call-chip { min-width: 180px; max-width: 230px; padding: 9px 11px; cursor: pointer;
    1050. 

  1050.     border: 1px dashed hsl(var(--mc) 60% 55% / .6); border-radius: 10px;
    1051. 

  1051.     background: hsl(var(--mc) 60% 50% / .10);
    1052. 

  1052.     font-family: var(--mono); font-size: 11.5px; line-height: 1.6; }
    1053. 

  1053.   .call-chip:hover { border-color: hsl(var(--mc) 70% 65%); box-shadow: 0 2px 10px rgba(0,0,0,.25); }
    1054. 

  1054.   .call-chip .cc-h { color: var(--faint); font-size: 10.5px; }
    1055. 

  1055.   .call-chip .cc-k { font-weight: 600; word-break: break-all; color: hsl(var(--mc) 70% 72%); }
    1056. 

  1056.   .call-chip .cc-i { color: var(--faint); }
    1057. 

  1057. 

  1058.   /* ── 结构按 kind 分化 ─────────────────────────────────────────────────────
    1059. 

  1059.      workflow = 一张流程图（节点只写「引用哪个模块 + 跑几次」，点节点跳到那个模块）
    1060. 

  1060.      code     = 它的源码本身（散文规则说不清也会漂移，源码不会）
    1061. 

  1061.      agent    = 原有的结构卡（system prompt / 上下文构成 / 工具 / 模型） */
    1062. 

  1062.   .fc { display: flex; flex-direction: column; gap: 0; margin-bottom: 8px; }
    1063. 

  1063.   .fc-node { display: flex; gap: 8px; align-items: flex-start; padding: 8px 10px;
    1064. 

  1064.     border: 1px solid hsl(var(--mc) 60% 55% / .45); border-radius: 9px;
    1065. 

  1065.     background: hsl(var(--mc) 60% 50% / .10); }
    1066. 

  1066.   .fc-node.ref { cursor: pointer; background: hsl(var(--mc) 60% 50% / .40); }
    1067. 

  1067.   .fc-node.ref:hover { border-color: hsl(var(--mc) 70% 65%); }
    1068. 

  1068.   .fc-i { flex: 0 0 auto; width: 17px; height: 17px; border-radius: 50%; font-size: 10px;
    1069. 

  1069.     display: grid; place-items: center; color: var(--bg); background: hsl(var(--mc) 60% 62%);
    1070. 

  1070.     font-family: var(--mono); }
    1071. 

  1071.   .fc-b { min-width: 0; }
    1072. 

  1072.   .fc-t { font-size: 12px; color: var(--text); }
    1073. 

  1073.   .fc-k { font-family: var(--mono); font-size: 10.5px; color: hsl(var(--mc) 70% 72%); word-break: break-all; }
    1074. 

  1074.   .fc-x { display: inline-block; margin-top: 3px; padding: 0 6px; border-radius: 5px;
    1075. 

  1075.     font-family: var(--mono); font-size: 9.5px; color: var(--faint); border: 1px solid var(--line); }
    1076. 

  1076.   /* 边：竖线 + 基数徽标 + 边标签 —— 1:N / N:1 直接读出扇出与汇聚 */
    1077. 

  1077.   .fc-edge { display: flex; align-items: center; gap: 6px; padding: 3px 0 3px 8px; margin-left: 8px;
    1078. 

  1078.     border-left: 2px solid hsl(var(--mc) 60% 55% / .45); min-height: 20px; }
    1079. 

  1079.   .fc-card { font-family: var(--mono); font-size: 9.5px; color: hsl(var(--mc) 70% 70%);
    1080. 

  1080.     border: 1px solid hsl(var(--mc) 60% 55% / .5); border-radius: 5px; padding: 0 5px; }
    1081. 

  1081.   .fc-l { font-size: 10.5px; color: var(--faint); }
    1082. 

  1082. 

  1083.   .src-card { border: 1px solid var(--line); border-radius: 9px; overflow: hidden; margin-bottom: 8px; }
    1084. 

  1084.   .src-h { display: flex; align-items: center; gap: 8px; padding: 6px 9px; background: var(--bg2);
    1085. 

  1085.     font-family: var(--mono); font-size: 10.5px; border-bottom: 1px solid var(--line); }
    1086. 

  1086.   .src-q { color: hsl(var(--mc) 70% 72%); font-weight: 600; }
    1087. 

  1087.   .src-f { color: var(--faint); margin-left: auto; }
    1088. 

  1088.   .src-code { margin: 0; padding: 9px 10px; max-height: 340px; overflow: auto;
    1089. 

  1089.     font-family: var(--mono); font-size: 10.5px; line-height: 1.65; color: var(--text);
    1090. 

  1090.     white-space: pre; background: rgba(0,0,0,.18); }
    1091. 

  1091.   #drawerBody .src-code { max-height: none; font-size: 12.5px; line-height: 1.7; }   /* 抽屉里看全文：不限高 */
    1092. 

  1092.   /* 结构模块里 code 只给一条「查看完整代码」入口（不内联源码 → 结构列宽度与 agent 模块一致）。 */
    1093. 

  1093.   .src-more { display: flex; align-items: center; gap: 6px; padding: 6px 10px; cursor: pointer;
    1094. 

  1094.     font-family: var(--mono); font-size: 10.5px; color: hsl(var(--mc) 70% 72%);
    1095. 

  1095.     background: var(--bg2); border-top: 1px solid var(--line); }
    1096. 

  1096.   .src-more:hover { color: var(--text); background: hsl(var(--mc) 60% 50% / .12); }
    1097. 

  1097.   .mod-block.focus { outline: 2px solid hsl(var(--mc) 70% 62%); outline-offset: 3px; }
    1098. 

  1098.   /* 悬停结构里的引用时：两端的模块块一起点亮（连线 + 两端，三者同时可辨） */
    1099. 

  1099.   .mod-block.hot { outline: 2px dashed hsl(var(--mc) 70% 62%); outline-offset: 3px; }
    1100. 

  1100.   .fc-node.hot, .fc-node[data-to]:hover { border-color: hsl(var(--mc) 70% 65%);
    1101. 

  1101.                                           background: hsl(var(--mc) 60% 50% / .2); }
    1102. 

  1102. 

  1103. </style>
    1104. 

  1104. </head>
    1105. 

  1105. <body>
    1106. 

  1106. <div class="app">
    1107. 

  1107.   <aside class="sidebar">
    1108. 

  1108.     <div class="brand">
    1109. 

  1109.       <div class="brand-top">
    1110. 

  1110.         <span class="logo">Production&nbsp;Build</span>
    1111. 

  1111.         <span class="logo-sub">Runs</span>
    1112. 

  1112.       </div>
    1113. 

  1113.       <div class="brand-desc">以运行事实为主 ·
    1114. 

  1114.         <span class="loop-glyph">plan → <b>execute</b> → validate</span></div>
    1115. 

  1115.     </div>
    1116. 

  1116.     <div class="controls">
    1117. 

  1117.       <div class="seg" id="statusSeg">
    1118. 

  1118.         <button data-s="" class="active">全部</button>
    1119. 

  1119.         <button data-s="success">成功</button>
    1120. 

  1120.         <button data-s="running">运行中</button>
    1121. 

  1121.         <button data-s="failed">失败</button>
    1122. 

  1122.       </div>
    1123. 

  1123.       <div class="ctl-row">
    1124. 

  1124.         <span class="count" id="runCount">—</span>
    1125. 

  1125.         <button class="icon-btn" id="refreshBtn" title="刷新">⟳</button>
    1126. 

  1126.       </div>
    1127. 

  1127.     </div>
    1128. 

  1128.     <div class="runlist" id="runlist"><div class="hint">加载中…</div></div>
    1129. 

  1129.     <div class="pager" id="pager"></div>
    1130. 

  1130.   </aside>
    1131. 

  1131. 

  1132.   <main class="main" id="main">
    1133. 

  1133.     <div class="empty" id="emptyState">
    1134. 

  1134.       <div class="big">◍ ⇄ ◍</div>
    1135. 

  1135.       <div class="lp">选择左侧一个 Run · 查看 <b>规划</b>、<i>执行</i>与验收链路</div>
    1136. 

  1136.     </div>
    1137. 

  1137.   </main>
    1138. 

  1138. </div>
    1139. 

  1139. 

  1140. <div class="drawer-scrim" id="drawerScrim" onclick="closeDrawer()"></div>
    1141. 

  1141. <aside class="drawer" id="drawer">
    1142. 

  1142.   <div class="drawer-h">
    1143. 

  1143.     <span class="drawer-tag" id="drawerTag"></span>
    1144. 

  1144.     <span class="drawer-title" id="drawerTitle"></span>
    1145. 

  1145.     <div class="drawer-x drawer-refresh" onclick="refreshLoop(this)" title="按当前 Loop 拉取最新">⟳</div>
    1146. 

  1146.     <div class="drawer-x" onclick="closeDrawer()">✕</div>
    1147. 

  1147.   </div>
    1148. 

  1148.   <div class="drawer-b" id="drawerBody"></div>
    1149. 

  1149. </aside>
    1150. 

  1150. 

  1151. <!-- 依据来源栏（左侧）：点某个工具节点底部的「决策依据」→ 依次列出各来源全文 + 高亮被引片段。
    1152. 

  1152.      旁路数据，没有标注时这个栏永远不出现。 -->
    1153. 

  1153. <aside class="srcbar" id="srcbar">
    1154. 

  1154.   <div class="srcbar-h">
    1155. 

  1155.     <span class="srcbar-tag">🔖 依据来源</span>
    1156. 

  1156.     <span class="srcbar-t" id="srcbarTitle"></span>
    1157. 

  1157.     <div class="srcbar-x" onclick="closeSrcBar()">✕</div>
    1158. 

  1158.   </div>
    1159. 

  1159.   <div class="srcbar-b" id="srcbarBody"></div>
    1160. 

  1160. </aside>
    1161. 

  1161. 

  1162. <div class="lb" id="lb">
    1163. 

  1163.   <div class="lb-close" onclick="closeLB()">✕</div>
    1164. 

  1164.   <div class="lb-nav prev" onclick="stepLB(-1,event)">‹</div>
    1165. 

  1165.   <img id="lbImg" src="" alt="" referrerpolicy="no-referrer">
    1166. 

  1166.   <div class="lb-nav next" onclick="stepLB(1,event)">›</div>
    1167. 

  1167.   <div class="lb-counter" id="lbCounter"></div>
    1168. 

  1168. </div>
    1169. 

  1169. 

  1170. <script>
    1171. 

  1171. "use strict";
    1172. 

  1172. const $ = (s, r=document) => r.querySelector(s);
    1173. 

  1173. const esc = s => String(s ?? "").replace(/[&<>"]/g, c => ({"&":"&amp;","<":"&lt;",">":"&gt;",'"':"&quot;"}[c]));
    1174. 

  1174. const isImgUrl = u => typeof u === "string" &&
    1175. 

  1175.       (/^https?:\/\//.test(u) || /^\/api\/runs\/\d+\/media\//.test(u)) &&
    1176. 

  1176.       (/\.(png|jpe?g|webp|gif|bmp|avif)(\?|$)/i.test(u) || /image|img|oss|cos|xhscdn|sns-|ci\./i.test(u));
    1177. 

  1177. 

  1178. // ── state ──
    1179. 

  1179. let RUNS = [], TOTAL = 0, PAGE = 1, PAGE_SIZE = 20, STATUS = "", CURRENT = null, LOADING = false;
    1180. 

  1180. let LBLIST = [], LBIDX = 0;
    1181. 

  1181. 

  1182. // ── list（翻页加载：首屏 + 滚动到底自动追加下一页）──
    1183. 

  1183. async function loadRuns(reset = true) {
    1184. 

  1184.   if (LOADING) return;
    1185. 

  1185.   LOADING = true;
    1186. 

  1186.   if (reset) { PAGE = 1; RUNS = []; }
    1187. 

  1187.   renderFooter();
    1188. 

  1188.   const r = await fetch(`/api/runs?status=${encodeURIComponent(STATUS)}&page=${PAGE}&page_size=${PAGE_SIZE}`);
    1189. 

  1189.   const d = await r.json();
    1190. 

  1190.   TOTAL = d.total;
    1191. 

  1191.   RUNS = reset ? d.runs : RUNS.concat(d.runs);
    1192. 

  1192.   $("#runCount").textContent = `${TOTAL} 个 Run`;
    1193. 

  1193.   LOADING = false;                 // 先落 loading 再渲染页脚，否则页脚卡在「加载中…」
    1194. 

  1194.   renderList(); renderFooter();
    1195. 

  1195. }
    1196. 

  1196. const hasMore = () => RUNS.length < TOTAL;
    1197. 

  1197. function loadMore() {
    1198. 

  1198.   if (LOADING || !hasMore()) return;
    1199. 

  1199.   PAGE += 1; loadRuns(false);
    1200. 

  1200. }
    1201. 

  1201. 

  1202. // 深链：#run=N[&round=K] 打开任务并定位到第 K 轮（1-based；缺省第一轮）
    1203. 

  1203. let PENDING_ROUND = 1;                  // selectRun → loadSnapshots 之间传递「要停在第几轮」
    1204. 

  1204. const curRound = () => (SNAP && SNAP.loaded && SNAP.list && SNAP.list.length ? SNAP.idx + 1 : 1);
    1205. 

  1205. function parseHash() {
    1206. 

  1206.   const m = /run=(\d+)/.exec(location.hash), r = /round=(\d+)/.exec(location.hash);
    1207. 

  1207.   return { run: m ? +m[1] : null, round: r ? Math.max(1, +r[1]) : null };
    1208. 

  1208. }
    1209. 

  1209. // 当前选中的任务 + 轮次写回地址栏（replaceState 不触发 hashchange，不会回灌 openFromHash）
    1210. 

  1210. function syncHash() {
    1211. 

  1211.   if (CURRENT == null) return;
    1212. 

  1212.   const h = `#run=${CURRENT}` + (SNAP && SNAP.loaded && SNAP.list && SNAP.list.length ? `&round=${SNAP.idx + 1}` : "");
    1213. 

  1213.   if (location.hash !== h) history.replaceState(null, "", h);
    1214. 

  1214. }
    1215. 

  1215. async function openFromHash() {
    1216. 

  1216.   const { run, round } = parseHash();
    1217. 

  1217.   if (run == null) return;
    1218. 

  1218.   if (CURRENT !== run) { await selectRun(run, round || 1); return; }
    1219. 

  1219.   if (round && SNAP && SNAP.loaded) gotoSnap(round - 1);
    1220. 

  1220. }
    1221. 

  1221. window.addEventListener("hashchange", openFromHash);
    1222. 

  1222. 

  1223. function timeAgo(iso) {
    1224. 

  1224.   if (!iso) return "";
    1225. 

  1225.   const s = (Date.now() - new Date(iso).getTime()) / 1000;
    1226. 

  1226.   if (s < 60) return "刚刚";
    1227. 

  1227.   if (s < 3600) return Math.floor(s/60) + "分钟前";
    1228. 

  1228.   if (s < 86400) return Math.floor(s/3600) + "小时前";
    1229. 

  1229.   return Math.floor(s/86400) + "天前";
    1230. 

  1230. }
    1231. 

  1231. const fmtDur = s => s == null ? "—" : (s < 60 ? s.toFixed(1)+"s" : Math.floor(s/60)+"m"+Math.round(s%60)+"s");
    1232. 

  1232. const fmtTok = n => n >= 1000 ? (n/1000).toFixed(1).replace(/\.0$/,"")+"k" : String(n);
    1233. 

  1233. 

  1234. function renderList() {
    1235. 

  1235.   const el = $("#runlist");
    1236. 

  1236.   if (!RUNS.length) { el.innerHTML = `<div class="hint">暂无 Run 记录</div>`; return; }
    1237. 

  1237.   el.innerHTML = RUNS.map(r => `
    1238. 

  1238.     <div class="runcard ${CURRENT===r.id?"active":""}" data-s="${r.status}" onclick="selectRun(${r.id})">
    1239. 

  1239.       <div class="rc-top">
    1240. 

  1240.         <span class="rc-id">${esc(r.run_key || `#${r.id}`)}</span>
    1241. 

  1241.         <span class="rc-agent">${esc(r.business_label || r.agent_name)}</span>
    1242. 

  1242.         <span style="margin-left:auto"><span class="badge ${r.status} ${r.status==='running'?'dot':''}">${r.status}</span></span>
    1243. 

  1243.       </div>
    1244. 

  1244.       <div class="rc-obj">${esc(r.objective || "（无目标描述）")}</div>
    1245. 

  1245.       <div class="rc-meta">
    1246. 

  1246.         <span>${esc(r.business_progress || `${r.step_count} 条运行记录`)}</span>
    1247. 

  1247.         <span style="margin-left:auto">${timeAgo(r.start_time)}</span>
    1248. 

  1248.       </div>
    1249. 

  1249.     </div>`).join("");
    1250. 

  1250. }
    1251. 

  1251. 

  1252. function renderFooter() {
    1253. 

  1253.   const el = $("#pager");
    1254. 

  1254.   if (LOADING) { el.innerHTML = `<span class="pi">加载中…</span>`; return; }
    1255. 

  1255.   if (hasMore()) { el.innerHTML = `<button onclick="loadMore()">加载更多 · ${RUNS.length}/${TOTAL}</button>`; return; }
    1256. 

  1256.   el.innerHTML = RUNS.length ? `<span class="pi">已全部加载 · ${RUNS.length}</span>` : "";
    1257. 

  1257. }
    1258. 

  1258. // 滚动到底部附近自动追加下一页
    1259. 

  1259. $("#runlist").addEventListener("scroll", () => {
    1260. 

  1260.   const el = $("#runlist");
    1261. 

  1261.   if (el.scrollTop + el.clientHeight >= el.scrollHeight - 140) loadMore();
    1262. 

  1262. });
    1263. 

  1263. 

  1264. // ── detail ──
    1265. 

  1265. async function selectRun(id, round = 1) {
    1266. 

  1266.   CURRENT = id; PENDING_ROUND = Math.max(1, round || 1); renderList();
    1267. 

  1267.   if (location.hash !== `#run=${id}&round=${PENDING_ROUND}`) history.replaceState(null, "", `#run=${id}&round=${PENDING_ROUND}`);
    1268. 

  1268.   $("#emptyState")?.remove();
    1269. 

  1269.   $("#main").innerHTML = `<div class="loading">载入任务 #${id} <span class="dots"><span>·</span><span>·</span><span>·</span></span></div>`;
    1270. 

  1270.   const r = await fetch(`/api/runs/${id}`);
    1271. 

  1271.   if (!r.ok) { $("#main").innerHTML = `<div class="loading">任务 #${id} 载入失败</div>`; return; }
    1272. 

  1272.   renderDetail(await r.json());
    1273. 

  1273.   $("#main").scrollTop = 0;
    1274. 

  1274. }
    1275. 

  1275. 

  1276. // ─────────────────────────────────────────────────────────────
    1277. 

  1277. // 数据重构：把「节点时间线」还原成「任务（Task）模型」+「循环过程」
    1278. 

  1278. //   task = { step_id, kind, name, goal, acceptance, inputs, parent_id,
    1279. 

  1279. //            isContainer, status, attempts:[{n,feedback,out,url,verdict,traces}], pending }
    1280. 

  1280. // ─────────────────────────────────────────────────────────────
    1281. 

  1281. function normStep(step) {
    1282. 

  1282.   if (step && typeof step === "object") return step;
    1283. 

  1283.   return { name: String(step ?? ""), kind: "", goal: "", acceptance: [], inputs: [] };
    1284. 

  1284. }
    1285. 

  1285. // result 可能是裸字符串或 {output:{...}, ok}；抽出展示用 output
    1286. 

  1286. function resultOutput(result) {
    1287. 

  1287.   if (result == null) return null;
    1288. 

  1288.   if (typeof result === "string") return { text: result };
    1289. 

  1289.   if (typeof result === "object") return result.output != null ? result.output : result;
    1290. 

  1290.   return { text: String(result) };
    1291. 

  1291. }
    1292. 

  1292. function outUrl(out) { return out && (out.url || (isImgUrl(out.text) ? out.text : null)); }
    1293. 

  1293. function outText(out) {
    1294. 

  1294.   if (out == null) return null;
    1295. 

  1295.   if (out.text != null && !isImgUrl(out.text)) return out.text;
    1296. 

  1296.   if (typeof out === "string") return out;
    1297. 

  1297.   if (out.url) return null;
    1298. 

  1298.   const keys = Object.keys(out).filter(k => k !== "type");
    1299. 

  1299.   return keys.length ? JSON.stringify(out, null, 2) : null;
    1300. 

  1300. }
    1301. 

  1301. 

  1302. function buildModel(steps) {
    1303. 

  1303.   const tasks = new Map();          // key -> task
    1304. 

  1304.   const order = [];
    1305. 

  1305.   const stepKey = (st, nodeIdx) => st.step_id != null ? "s" + st.step_id : "x" + nodeIdx;
    1306. 

  1306.   const ensure = (key, st) => {
    1307. 

  1307.     if (!tasks.has(key)) {
    1308. 

  1308.       tasks.set(key, { key, step_id: st.step_id ?? null, kind: st.kind || "", name: st.name || "",
    1309. 

  1309.         goal: st.goal || "", acceptance: st.acceptance || [], inputs: st.inputs || [],
    1310. 

  1310.         parent_id: st.parent_id ?? null, stage: st.stage || "", category: st.category || "",
    1311. 

  1311.         isContainer: false, attempts: [], pending: false, pendingFeedback: null });
    1312. 

  1312.       order.push(key);
    1313. 

  1313.     }
    1314. 

  1314.     return tasks.get(key);
    1315. 

  1315.   };
    1316. 

  1316.   const merge = (t, st) => {                      // 用最新已知的 step 字段补全任务元信息
    1317. 

  1317.     if (st.name) t.name = st.name;
    1318. 

  1318.     if (st.kind) t.kind = st.kind;
    1319. 

  1319.     if (st.goal) t.goal = st.goal;
    1320. 

  1320.     if (st.acceptance && st.acceptance.length) t.acceptance = st.acceptance;
    1321. 

  1321.     if (st.inputs && st.inputs.length) t.inputs = st.inputs;
    1322. 

  1322.     if (st.parent_id != null) t.parent_id = st.parent_id;
    1323. 

  1323.     if (st.stage) t.stage = st.stage;
    1324. 

  1324.     if (st.category) t.category = st.category;
    1325. 

  1325.   };
    1326. 

  1326. 

  1327.   // 1) 已执行任务（含重试）：按 step_id 归组，每条 past_steps = 一次 attempt
    1328. 

  1328.   for (const s of steps) {
    1329. 

  1329.     if (s.node_type !== "execute") continue;
    1330. 

  1330.     for (const e of (s.delta.past_steps || [])) {
    1331. 

  1331.       const st = normStep(e.step);
    1332. 

  1332.       const t = ensure(stepKey(st, s.step_index), st);
    1333. 

  1333.       merge(t, st);
    1334. 

  1334.       const out = resultOutput(e.result);
    1335. 

  1335.       t.attempts.push({ n: t.attempts.length + 1, nodeIdx: s.step_index,
    1336. 

  1336.         feedback: st._feedback || null, out, url: outUrl(out), text: outText(out),
    1337. 

  1337.         verdict: e.verdict || null });
    1338. 

  1338.     }
    1339. 

  1339.   }
    1340. 

  1340. 

  1341.   // 2) 容器（被拆分的父 Task）：取最后一个带 containers 的 plan 节点
    1342. 

  1342.   let containers = [];
    1343. 

  1343.   for (const s of steps) if (Array.isArray(s.delta.containers) && s.delta.containers.length) containers = s.delta.containers;
    1344. 

  1344.   for (const c of containers) {
    1345. 

  1345.     const st = normStep(c);
    1346. 

  1346.     const t = ensure(stepKey(st, "c"), st);
    1347. 

  1347.     merge(t, st);
    1348. 

  1348.     t.isContainer = true;
    1349. 

  1349.   }
    1350. 

  1350. 

  1351.   // 3) 待执行队列（最新 plan 快照里、尚未成为已执行任务的叶）
    1352. 

  1352.   let queue = [];
    1353. 

  1353.   for (const s of steps) if (Array.isArray(s.delta.plan)) queue = s.delta.plan;   // 最后一次覆盖 = 最新剩余队列
    1354. 

  1354.   queue.forEach((st0, i) => {
    1355. 

  1355.     const st = normStep(st0);
    1356. 

  1356.     const key = st.step_id != null ? "s" + st.step_id : "q" + i;
    1357. 

  1357.     const t = ensure(key, st);
    1358. 

  1358.     merge(t, st);
    1359. 

  1359.     if (!t.attempts.length) t.pending = true;      // 已执行过的（重试待跑）不覆盖其历史
    1360. 

  1360.     if (st._feedback) t.pendingFeedback = st._feedback;
    1361. 

  1361.   });
    1362. 

  1362. 

  1363.   // 计算状态
    1364. 

  1364.   for (const t of tasks.values()) {
    1365. 

  1365.     if (t.isContainer) { t.status = "decomposed"; continue; }
    1366. 

  1366.     if (t.attempts.length) {
    1367. 

  1367.       const v = t.attempts[t.attempts.length - 1].verdict;
    1368. 

  1368.       t.status = v == null ? "done" : (v.pass ? "passed" : (t.pending ? "pending" : "failed"));
    1369. 

  1369.     } else {
    1370. 

  1370.       t.status = "pending";
    1371. 

  1371.     }
    1372. 

  1372.   }
    1373. 

  1373. 

  1374.   // step_id -> 产物 url（供 from_step 参考图解析 + 成品图库）
    1375. 

  1375.   const imgMap = {};
    1376. 

  1376.   for (const t of tasks.values()) {
    1377. 

  1377.     if (t.step_id == null) continue;
    1378. 

  1378.     const last = [...t.attempts].reverse().find(a => a.url);
    1379. 

  1379.     if (last) imgMap[t.step_id] = { url: last.url, name: t.name, pass: t.status === "passed" };
    1380. 

  1380.   }
    1381. 

  1381. 

  1382.   // 组树：顶层任务 + 各自的子任务
    1383. 

  1383.   const list = order.map(k => tasks.get(k));
    1384. 

  1384.   const byId = {};
    1385. 

  1385.   for (const t of list) if (t.step_id != null) byId[t.step_id] = t;
    1386. 

  1386.   const roots = [];
    1387. 

  1387.   for (const t of list) {
    1388. 

  1388.     t.children = list.filter(x => x !== t && x.parent_id != null && x.parent_id === t.step_id);
    1389. 

  1389.     if (t.parent_id == null || !byId[t.parent_id]) roots.push(t);
    1390. 

  1390.   }
    1391. 

  1391.   // 任务层级深度：顶层=0，子任务=父深度+1（沿 parent_id 链上溯，带环保护）
    1392. 

  1392.   let maxDepth = 0;
    1393. 

  1393.   for (const t of list) {
    1394. 

  1394.     let d = 0, cur = t; const seen = new Set();
    1395. 

  1395.     while (cur.parent_id != null && byId[cur.parent_id] && !seen.has(cur.parent_id)) {
    1396. 

  1396.       seen.add(cur.parent_id); cur = byId[cur.parent_id]; d++;
    1397. 

  1397.     }
    1398. 

  1398.     t.depth = d; if (d > maxDepth) maxDepth = d;
    1399. 

  1399.   }
    1400. 

  1400.   return { tasks: list, roots, imgMap, containers, byId, maxDepth };
    1401. 

  1401. }
    1402. 

  1402. const BIZ_STATUS = {
    1403. 

  1403.   success: "已通过", failed: "未通过", running: "进行中", pending: "待开始"
    1404. 

  1404. };
    1405. 

  1405. 

  1406. function renderBusinessItems(items, emptyText) {
    1407. 

  1407.   const list = (items || []).filter(Boolean);
    1408. 

  1408.   if (!list.length) return `<span style="color:var(--faint)">${esc(emptyText)}</span>`;
    1409. 

  1409.   return `<div class="biz-items">${list.map(item => {
    1410. 

  1410.     const media = item.media_url;
    1411. 

  1411.     const image = media && isImgUrl(media)
    1412. 

  1412.       ? `<img class="biz-thumb" src="${esc(media)}" referrerpolicy="no-referrer"
    1413. 

  1413.            onclick="openLB(decodeURIComponent('${encodeURIComponent(media)}'))" onerror="imgFail(this)">`
    1414. 

  1414.       : "";
    1415. 

  1415.     const link = media && !isImgUrl(media)
    1416. 

  1416.       ? `<a class="src-link" href="${esc(media)}" target="_blank" rel="noreferrer">打开正式产物 ↗</a>`
    1417. 

  1417.       : "";
    1418. 

  1418.     return `<div class="biz-item">
    1419. 

  1419.       <strong>${esc(item.label || "材料")}</strong>
    1420. 

  1420.       ${item.detail ? `<span>${esc(item.detail)}</span>` : ""}
    1421. 

  1421.       ${item.source ? `<code>${esc(item.source)}</code>` : ""}
    1422. 

  1422.       ${image}${link}
    1423. 

  1423.     </div>`;
    1424. 

  1424.   }).join("")}</div>`;
    1425. 

  1425. }
    1426. 

  1426. 

  1427. function renderBusinessCriteria(criteria) {
    1428. 

  1428.   const list = criteria || [];
    1429. 

  1429.   if (!list.length) return "";
    1430. 

  1430.   return `<details class="biz-more">
    1431. 

  1431.     <summary>展开 ${list.length} 项正式判断依据</summary>
    1432. 

  1432.     <div class="biz-more-body">${list.map(item => `
    1433. 

  1433.       <div class="biz-criterion">
    1434. 

  1434.         <div class="biz-criterion-h"><span>${esc(item.label || "判断项")}</span><b>${esc(item.verdict || "UNKNOWN")}</b></div>
    1435. 

  1435.         ${item.reason ? `<div class="biz-criterion-p">${esc(item.reason)}</div>` : ""}
    1436. 

  1436.         ${(item.evidence || []).length ? `<div class="biz-criterion-p">证据：${esc((item.evidence || []).join("；"))}</div>` : ""}
    1437. 

  1437.       </div>`).join("")}
    1438. 

  1438.     </div>
    1439. 

  1439.   </details>`;
    1440. 

  1440. }
    1441. 

  1441. 

  1442. function renderBusinessTools(tools) {
    1443. 

  1443.   const list = tools || [];
    1444. 

  1444.   if (!list.length) return "";
    1445. 

  1445.   return `<details class="biz-more">
    1446. 

  1446.     <summary>查看 ${list.length} 次真实工具操作</summary>
    1447. 

  1447.     <div class="biz-more-body">${list.map((tool, index) => `
    1448. 

  1448.       <div class="biz-criterion">
    1449. 

  1449.         <div class="biz-criterion-h"><span>${index + 1}. ${esc(tool.name || "tool")}</span><b>${esc(tool.status || "UNKNOWN")}</b></div>
    1450. 

  1450.         ${tool.detail ? `<div class="biz-criterion-p">${esc(clip(tool.detail, 320))}</div>` : ""}
    1451. 

  1451.       </div>`).join("")}
    1452. 

  1452.     </div>
    1453. 

  1453.   </details>`;
    1454. 

  1454. }
    1455. 

  1455. 

  1456. function renderBusinessStep(step) {
    1457. 

  1457.   const judgment = step.judgment || {};
    1458. 

  1458.   const verdictClass = String(judgment.verdict || "").toLowerCase();
    1459. 

  1459.   return `<article class="biz-step ${esc(step.status || "pending")}">
    1460. 

  1460.     <div class="biz-step-h">
    1461. 

  1461.       <span class="biz-stage">${esc(step.stage || "STEP")}</span>
    1462. 

  1462.       <span class="biz-step-title">${esc(step.title || step.id || "业务步骤")}</span>
    1463. 

  1463.       <span class="biz-status ${esc(step.status || "pending")}">${esc(BIZ_STATUS[step.status] || step.status || "待判断")}</span>
    1464. 

  1464.     </div>
    1465. 

  1465.     <div class="biz-rail">
    1466. 

  1466.       <section class="biz-cell action">
    1467. 

  1467.         <div class="biz-cell-k">做了什么</div>
    1468. 

  1468.         <div class="biz-cell-v">${esc(step.action || "尚未形成正式执行记录。")}</div>
    1469. 

  1469.         ${step.reason ? `<div class="biz-reason"><b>为什么：</b>${esc(step.reason)}</div>` : ""}
    1470. 

  1470.         ${renderBusinessTools(step.tools)}
    1471. 

  1471.       </section>
    1472. 

  1472.       <section class="biz-cell basis">
    1473. 

  1473.         <div class="biz-cell-k">依据什么</div>
    1474. 

  1474.         <div class="biz-cell-v">${renderBusinessItems(step.basis, "尚无正式输入依据")}</div>
    1475. 

  1475.       </section>
    1476. 

  1476.       <section class="biz-cell judge">
    1477. 

  1477.         <div class="biz-cell-k">如何判断</div>
    1478. 

  1478.         <div class="biz-cell-v">
    1479. 

  1479.           <span class="biz-verdict ${esc(verdictClass)}">${esc(judgment.verdict || "PENDING")}</span>
    1480. 

  1480.           <div>${esc(judgment.summary || "尚无正式判断。")}</div>
    1481. 

  1481.           ${renderBusinessCriteria(judgment.criteria)}
    1482. 

  1482.         </div>
    1483. 

  1483.       </section>
    1484. 

  1484.       <section class="biz-cell output">
    1485. 

  1485.         <div class="biz-cell-k">正式结果</div>
    1486. 

  1486.         <div class="biz-cell-v">${renderBusinessItems(step.outputs, "尚未形成可交付产物")}</div>
    1487. 

  1487.       </section>
    1488. 

  1488.     </div>
    1489. 

  1489.   </article>`;
    1490. 

  1490. }
    1491. 

  1491. 

  1492. function renderBusinessStory(story) {
    1493. 

  1493.   if (!story || !(story.rounds || []).length) {
    1494. 

  1494.     return `<div class="snap-empty">◍ 暂无可还原的业务轮次<br><span style="font-size:11px">（只展示正式落盘事实，不补造过程）</span></div>`;
    1495. 

  1495.   }
    1496. 

  1496.   const failure = story.failure ? `<div class="biz-failure">
    1497. 

  1497.     <strong>${esc(story.failure.code || "BUSINESS_FAILED")} · ${esc(story.failure.stage || "")}</strong>
    1498. 

  1498.     <span>${esc(story.failure.message || "业务运行未通过。")}</span>
    1499. 

  1499.   </div>` : "";
    1500. 

  1500.   return `<div class="biz-story">
    1501. 

  1501.     <div class="biz-lede">
    1502. 

  1502.       <div>
    1503. 

  1503.         <div class="biz-eyebrow">${story.kind === "global_data" ? "GLOBAL DATA PREPARATION" : "SEGMENT PRODUCTION"}</div>
    1504. 

  1504.         <div class="biz-headline">${esc(story.headline || "")}</div>
    1505. 

  1505.         <div class="biz-conclusion">${esc(story.conclusion || "")}</div>
    1506. 

  1506.         ${failure}
    1507. 

  1507.       </div>
    1508. 

  1508.       <div class="biz-meta">
    1509. 

  1509.         <span class="biz-chip">协议 ${esc(story.protocol_version || "—")}</span>
    1510. 

  1510.         <span class="biz-chip">阶段 ${esc(story.phase || "—")}</span>
    1511. 

  1511.         <span class="biz-status ${esc(story.status || "running")}">${esc(BIZ_STATUS[story.status] || story.status)}</span>
    1512. 

  1512.       </div>
    1513. 

  1513.     </div>
    1514. 

  1514.     <div class="biz-rounds">${(story.rounds || []).map(round => `
    1515. 

  1515.       <section class="biz-round ${esc(round.status || "running")}">
    1516. 

  1516.         <div class="biz-round-h">
    1517. 

  1517.           <span class="biz-round-n">${esc(round.index)}</span>
    1518. 

  1518.           <div><div class="biz-round-title">第 ${esc(round.index)} 轮 · ${esc(round.title || "")}</div>
    1519. 

  1519.           <div class="biz-round-summary">${esc(round.summary || "")}</div></div>
    1520. 

  1520.           <span class="biz-status ${esc(round.status || "running")}">${esc(BIZ_STATUS[round.status] || round.status)}</span>
    1521. 

  1521.         </div>
    1522. 

  1522.         <div class="biz-step-list">${(round.steps || []).map(renderBusinessStep).join("")}</div>
    1523. 

  1523.       </section>`).join("")}
    1524. 

  1524.     </div>
    1525. 

  1525.   </div>`;
    1526. 

  1526. }
    1527. 

  1527. 

  1528. function renderDetail(d) {
    1529. 

  1529.   const model = buildModel(d.steps);
    1530. 

  1530. 

  1531.   // 运行概览计数（不再依赖画板节点：直接从步骤序列统计）
    1532. 

  1532.   const fallbackPlanRounds = d.steps.filter(s => s.node_type === "plan" &&
    1533. 

  1533.     (s.delta.reasoning || s.delta.response != null || ("replan_count" in s.delta))).length;
    1534. 

  1534.   const fallbackExecRounds = d.steps.filter(s => s.node_type === "execute").length;
    1535. 

  1535.   const leaves = model.tasks.filter(t => !t.isContainer);
    1536. 

  1536.   const overview = d.overview || {};
    1537. 

  1537.   const planRounds = overview.plan_rounds ?? fallbackPlanRounds;
    1538. 

  1538.   const execRounds = overview.execute_rounds ?? fallbackExecRounds;
    1539. 

  1539.   const taskCount = overview.task_count ?? leaves.length;
    1540. 

  1540.   const passed = overview.passed ?? leaves.filter(t => t.status === "passed").length;
    1541. 

  1541.   const failed = overview.failed ?? leaves.filter(t => t.status === "failed").length;
    1542. 

  1542.   const retries = overview.retries ?? leaves.reduce((n, t) => n + Math.max(0, t.attempts.length - 1), 0);
    1543. 

  1543.   const gallery = Object.keys(model.imgMap).map(k => ({ sid: k, ...model.imgMap[k] }))
    1544. 

  1544.                         .sort((a, b) => (+a.sid) - (+b.sid));
    1545. 

  1545. 

  1546.   let html = `
    1547. 

  1547.     <div class="topbar">
    1548. 

  1548.       <span class="tb-id">${esc(d.run_key || `#${d.id}`)}</span>
    1549. 

  1549.       <span class="tb-obj">${esc(d.objective || "")}</span>
    1550. 

  1550.       <span class="tb-right">
    1551. 

  1551.         <span class="badge ${d.status} ${d.status==='running'?'dot':''}">${d.status}</span>
    1552. 

  1552.         <button class="icon-btn" title="刷新" onclick="selectRun(${d.id}, curRound())">⟳</button>
    1553. 

  1553.       </span>
    1554. 

  1554.     </div>
    1555. 

  1555.     <div class="detailbody">
    1556. 

  1556.       <div class="hero">
    1557. 

  1557.         <div class="hero-obj">${esc(d.objective || "（无目标描述）")}</div>
    1558. 

  1558.         <div class="hero-model">${esc(d.agent_name)} · ${esc(d.model_name)}</div>
    1559. 

  1559.         <div class="loopwrap">
    1560. 

  1560.           <div class="loopdiagram">
    1561. 

  1561.             <div class="lp-node plan"><span class="lp-t">PLAN</span><span class="lp-c">${planRounds}</span></div>
    1562. 

  1562.             <div class="lp-arrows">
    1563. 

  1563.               <span class="a1">──▶</span><span class="lbl">loop</span><span class="a2">◀──</span>
    1564. 

  1564.             </div>
    1565. 

  1565.             <div class="lp-node exec"><span class="lp-t">EXECUTE</span><span class="lp-c">${execRounds}</span></div>
    1566. 

  1566.           </div>
    1567. 

  1567.           <div class="loopstats">
    1568. 

  1568.             <div class="lstat"><div class="k">任务</div><div class="v">${taskCount}</div></div>
    1569. 

  1569.             <div class="lstat"><div class="k">达标</div><div class="v pass">${passed}</div></div>
    1570. 

  1570.             <div class="lstat"><div class="k">未达标</div><div class="v ${failed?'fail':''}">${failed}</div></div>
    1571. 

  1571.             <div class="lstat"><div class="k">重试</div><div class="v ${retries?'retry':''}">${retries}</div></div>
    1572. 

  1572.             <div class="lstat"><div class="k">重规划</div><div class="v plan">${d.replan_count}</div></div>
    1573. 

  1573.             <div class="lstat"><div class="k">Tokens</div><div class="v">${fmtTok(d.input_tokens)}<small>/${fmtTok(d.output_tokens)}</small></div></div>
    1574. 

  1574.             <div class="lstat"><div class="k">成本</div><div class="v">${d.cost_status === "unavailable" ? "—" : `$${d.cost_usd.toFixed(4)}`}</div></div>
    1575. 

  1575.             <div class="lstat"><div class="k">耗时</div><div class="v">${fmtDur(d.duration_sec)}</div></div>
    1576. 

  1576.           </div>
    1577. 

  1577.         </div>
    1578. 

  1578.         ${d.error_message ? `<div class="err-box">⚠ ${esc(d.error_message)}</div>` : ""}
    1579. 

  1579.       </div>`;
    1580. 

  1580. 

  1581.   // 结果视图内容：最终交付（final_output + 成品图库）
    1582. 

  1582.   let resultHtml;
    1583. 

  1583.   if (d.final_output || gallery.length) {
    1584. 

  1584.     resultHtml = `
    1585. 

  1585.       <div class="sec-title"><span class="t">最终交付</span><span class="line"></span></div>
    1586. 

  1586.       <div class="delivery">
    1587. 

  1587.         <div class="delivery-h">✓ 成品 / response</div>
    1588. 

  1588.         ${d.final_output ? `<div class="delivery-b">${esc(d.final_output)}</div>` : ""}
    1589. 

  1589.         ${gallery.length ? `<div class="gallery">${gallery.map(g => `
    1590. 

  1590.           <div class="gcard">
    1591. 

  1591.             <img src="${esc(g.url)}" referrerpolicy="no-referrer" onclick="openLB('${esc(g.url)}')" onerror="imgFail(this)">
    1592. 

  1592.             <div class="cap"><span class="sid">[${esc(g.sid)}]</span> ${g.pass?'✓':'○'} <span style="color:var(--faint);overflow:hidden;text-overflow:ellipsis;white-space:nowrap">${esc(g.name||'')}</span></div>
    1593. 

  1593.           </div>`).join("")}</div>` : ""}
    1594. 

  1594.       </div>`;
    1595. 

  1595.   } else {
    1596. 

  1596.     resultHtml = `<div class="snap-empty">◍ 暂无最终交付<br><span style="font-size:11px">（运行尚未产出成品 / response）</span></div>`;
    1597. 

  1597.   }
    1598. 

  1598. 

  1599.   // 默认先回答业务问题；结果与技术 Trace 作为继续下钻。
    1600. 

  1600.   const businessHtml = renderBusinessStory(d.business_story);
    1601. 

  1601.   html += `
    1602. 

  1602.     <div class="view-bar">
    1603. 

  1603.       <div class="view-tabs">
    1604. 

  1604.         <button class="view-tab active" data-v="business" onclick="switchView('business')"><span class="vt-ic">◎</span>业务视图</button>
    1605. 

  1605.         <button class="view-tab" data-v="result" onclick="switchView('result')"><span class="vt-ic">✦</span>结果视图</button>
    1606. 

  1606.         <button class="view-tab" data-v="process" onclick="switchView('process')"><span class="vt-ic">◫</span>技术过程</button>
    1607. 

  1607.       </div>
    1608. 

  1608.       <button class="fs-enter" id="boardFullscreenButton" style="display:none" onclick="enterBoardFullscreen()" title="全屏查看技术过程（Esc 退出）"><span class="vt-ic">⛶</span>全屏</button>
    1609. 

  1609.     </div>
    1610. 

  1610.     <div class="view-pane active" id="tabBusiness">${businessHtml}</div>
    1611. 

  1611.     <div class="view-pane" id="tabResult">${resultHtml}</div>
    1612. 

  1612.     <div class="view-pane" id="tabProcess"><div id="snapView"></div></div>
    1613. 

  1613.   </div>`;
    1614. 

  1614. 

  1615.   $("#main").innerHTML = html;
    1616. 

  1616.   SNAP = { runId: d.id, list: null, objective: d.objective || "", idx: 0, loaded: false,
    1617. 

  1617.            agent: d.agent_name || "production" };
    1618. 

  1618.   loadSnapshots();
    1619. 

  1619. }
    1620. 

  1620. 

  1621. // 切到技术过程时重绘画板连线（隐藏时元素无尺寸，无法测量）。
    1622. 

  1622. function switchView(v) {
    1623. 

  1623.   document.querySelectorAll(".view-tab").forEach(b => b.classList.toggle("active", b.dataset.v === v));
    1624. 

  1624.   const pane = { business: "tabBusiness", result: "tabResult", process: "tabProcess" }[v] || "tabBusiness";
    1625. 

  1625.   document.querySelectorAll(".view-pane").forEach(p => p.classList.toggle("active", p.id === pane));
    1626. 

  1626.   const fullscreen = $("#boardFullscreenButton");
    1627. 

  1627.   if (fullscreen) fullscreen.style.display = v === "process" ? "inline-flex" : "none";
    1628. 

  1628.   if (v === "process") requestAnimationFrame(() => layoutBoard());
    1629. 

  1629. }
    1630. 

  1630. 

  1631. const clip = (s, n) => { s = String(s ?? "").replace(/\s+/g, " ").trim(); return s.length > n ? s.slice(0, n) + " …" : s; };
    1632. 

  1632. 

  1633. function openDrawer() { $("#drawer").classList.add("open"); $("#drawerScrim").classList.add("open"); }
    1634. 

  1634. function closeDrawer() {
    1635. 

  1635.   $("#drawer").classList.remove("open");
    1636. 

  1636.   $("#drawerScrim").classList.remove("open");
    1637. 

  1637.   if (SNAP) SNAP.openNodeSid = null;
    1638. 

  1638. }
    1639. 

  1639. 

  1640. // ── images ──
    1641. 

  1641. function imgFail(img) {
    1642. 

  1642.   const a = document.createElement("a");
    1643. 

  1643.   a.href = img.src; a.target = "_blank"; a.className = "imgfail" + (img.classList.contains("ref")?" ref":"");
    1644. 

  1644.   a.textContent = "图片加载失败 · 点击打开";
    1645. 

  1645.   img.replaceWith(a);
    1646. 

  1646. }
    1647. 

  1647. // 收集当前上下文（抽屉开→详情，否则→画板）里可放大的图，供左右切换。含画板过程卡缩略图（无 class）与详情各图。
    1648. 

  1648. function collectImages() {
    1649. 

  1649.   const scope = $("#drawer").classList.contains("open") ? "#drawer" : "#main";
    1650. 

  1650.   return [...document.querySelectorAll(
    1651. 

  1651.     `${scope} img.thumb, ${scope} .mmc-thumb, ${scope} .gcard img, ${scope} .pc-thumbs img, ${scope} .imgs img, ${scope} .pp-imgs img`
    1652. 

  1652.   )].map(i => i.getAttribute("src")).filter(Boolean);
    1653. 

  1653. }
    1654. 

  1654. function openLB(url) {
    1655. 

  1655.   const all = [...new Set(collectImages())];
    1656. 

  1656.   LBIDX = all.indexOf(url);
    1657. 

  1657.   if (LBIDX < 0) { all.unshift(url); LBIDX = 0; }   // 点击图不在集合里 → 纳入并选中，绝不回退到第一张
    1658. 

  1658.   LBLIST = all;
    1659. 

  1659.   showLB();
    1660. 

  1660.   $("#lb").classList.add("open");
    1661. 

  1661. }
    1662. 

  1662. function showLB() { $("#lbImg").src = LBLIST[LBIDX]; $("#lbCounter").textContent = `${LBIDX+1} / ${LBLIST.length}`; }
    1663. 

  1663. function stepLB(d, ev) { ev && ev.stopPropagation(); LBIDX = (LBIDX + d + LBLIST.length) % LBLIST.length; showLB(); }
    1664. 

  1664. function closeLB() { $("#lb").classList.remove("open"); }
    1665. 

  1665. $("#lb").addEventListener("click", e => { if (e.target.id === "lb") closeLB(); });
    1666. 

  1666. document.addEventListener("keydown", e => {
    1667. 

  1667.   if ($("#lb").classList.contains("open")) {
    1668. 

  1668.     if (e.key === "Escape") closeLB();
    1669. 

  1669.     if (e.key === "ArrowLeft") stepLB(-1);
    1670. 

  1670.     if (e.key === "ArrowRight") stepLB(1);
    1671. 

  1671.     return;
    1672. 

  1672.   }
    1673. 

  1673.   const sv = $("#snapView");
    1674. 

  1674.   if (e.key === "Escape" && sv && sv.classList.contains("fs")) { boardFullscreen(); e.preventDefault(); return; }
    1675. 

  1675.   if ($("#srcbar").classList.contains("open") && e.key === "Escape") { closeSrcBar(); return; }
    1676. 

  1676.   if ($("#drawer").classList.contains("open")) { if (e.key === "Escape") closeDrawer(); return; }
    1677. 

  1677.   // 规划演进：左右键在快照序列间步进（仅过程视图可见时）
    1678. 

  1678.   if (SNAP && SNAP.loaded && SNAP.list && SNAP.list.length && $("#tabProcess") && $("#tabProcess").classList.contains("active")) {
    1679. 

  1679.     if (e.key === "ArrowLeft") { gotoSnap(SNAP.idx - 1); e.preventDefault(); }
    1680. 

  1680.     if (e.key === "ArrowRight") { gotoSnap(SNAP.idx + 1); e.preventDefault(); }
    1681. 

  1681.   }
    1682. 

  1682. });
    1683. 

  1683. 

  1684. // ═══════════════════════════════════════════════════════════════════════════
    1685. 

  1685. //  规划演进 · 思维导图（快照序列）
    1686. 

  1686. //  每个快照 = 一份完整 Task 树状态；步进器在快照间切换，整树重绘为该轮状态；
    1687. 

  1687. //  高亮相邻快照 diff（新增/调整/移除）+ 侧栏显示 reasoning + 本轮教训 + diff 摘要。
    1688. 

  1688. // ═══════════════════════════════════════════════════════════════════════════
    1689. 

  1689. let SNAP = null;
    1690. 

  1690. let BOARD = null;
    1691. 

  1691. 

  1692. async function loadSnapshots() {
    1693. 

  1693.   const panel = $("#snapView");
    1694. 

  1694.   panel.innerHTML = `<div class="loading">载入规划快照 <span class="dots"><span>·</span><span>·</span><span>·</span></span></div>`;
    1695. 

  1695.   const r = await fetch(`/api/runs/${SNAP.runId}/snapshots`);
    1696. 

  1696.   if (!r.ok) { panel.innerHTML = `<div class="snap-empty">规划快照载入失败</div>`; return; }
    1697. 

  1697.   const d = await r.json();
    1698. 

  1698.   SNAP.list = d.snapshots || []; SNAP.objective = d.objective || SNAP.objective; SNAP.runStatus = d.status;
    1699. 

  1699.   MODULES = await fetchModules(SNAP.runId);       // 模块调用树；无模块行的 run → 画板显示「本轮无节点记录」
    1700. 

  1700.   ANN = await fetchAnnotations(SNAP.runId);       // 旁路标注（可能为空 → 卡上不画那块，一切照旧）
    1701. 

  1701.   SNAP.loaded = true;
    1702. 

  1702.   SNAP.idx = Math.max(0, Math.min(SNAP.list.length - 1, PENDING_ROUND - 1));   // 深链指定的轮次；缺省第一轮
    1703. 

  1703.   if (!SNAP.list.length) {
    1704. 

  1704.     panel.innerHTML = `<div class="snap-empty">◍ 本次运行暂无规划快照<br><span style="font-size:11px">（尚未产生任何 plan 轮次）</span></div>`;
    1705. 

  1705.     return;
    1706. 

  1706.   }
    1707. 

  1707.   // 画板骨架（建一次；world 里每轮重摆节点）：可平移(拖拽)/缩放(滚轮)的白板。
    1708. 

  1708.   panel.innerHTML = `
    1709. 

  1709.     <div class="snap-stepper" id="snapStepper"></div>
    1710. 

  1710.     <div class="board" id="board">
    1711. 

  1711.       <div class="board-world" id="boardWorld"></div>
    1712. 

  1712.       <div class="board-ctrls">
    1713. 

  1713.         <button title="按当前 Loop 拉取最新" onclick="refreshLoop(this)">⟳</button>
    1714. 

  1714.         <button title="放大" onclick="boardZoom(1.15)">＋</button>
    1715. 

  1715.         <button title="缩小" onclick="boardZoom(0.87)">－</button>
    1716. 

  1716.         <button title="适应窗口" onclick="boardFit()">⤢</button>
    1717. 

  1717.         <button title="全屏 / 沉浸" id="btnFs" onclick="boardFullscreen()">⛶</button>
    1718. 

  1718.       </div>
    1719. 

  1719.       <div class="board-tip">双指滑动平移 · 双指捏合 / ⌘+滚轮缩放 · 点卡片看详情</div>
    1720. 

  1720.     </div>`;
    1721. 

  1721.   BOARD = { z: 1, panX: 0, panY: 0, worldW: 0, worldH: 0, fitted: false, contentFitted: false, suppressClick: false };
    1722. 

  1722.   attachBoardPan();
    1723. 

  1723.   renderSnapshot();
    1724. 

  1724.   syncHash();                 // 轮次可能被 clamp（如深链的 round 超出实际轮数），以真实落点回写
    1725. 

  1725. }
    1726. 

  1726. 

  1727. // ── 手动刷新（替代自动轮询）：按当前所在 Loop 重新拉取快照并重渲染 ──
    1728. 

  1728. // 停留在当前 Loop（idx 不跳到最新轮）；抽屉在看某任务详情/执行过程时，重开以刷新 meta + 实时 trace。
    1729. 

  1729. async function refreshLoop(btn) {
    1730. 

  1730.   if (!SNAP || !SNAP.runId) return;
    1731. 

  1731.   if (btn) btn.classList.add("spinning");
    1732. 

  1732.   try {
    1733. 

  1733.     const r = await fetch(`/api/runs/${SNAP.runId}/snapshots`);
    1734. 

  1734.     const d = r.ok ? await r.json() : null;
    1735. 

  1735.     const list = d && d.snapshots || [];
    1736. 

  1736.     const mods = await fetchModules(SNAP.runId);
    1737. 

  1737.     if (d && SNAP && SNAP.runId === d.run_id && list.length) {
    1738. 

  1738.       SNAP.list = list; SNAP.runStatus = d.status;
    1739. 

  1739.       if (mods) MODULES = mods;          // 重建骨架 = 丢掉旧缓存，当前轮会按需重拉（run 在跑时要拿最新）
    1740. 

  1740.       SNAP.idx = Math.min(SNAP.idx, list.length - 1);
    1741. 

  1741.       await renderSnapshot();
    1742. 

  1742.       if ($("#drawer").classList.contains("open") && SNAP.openNodeSid != null)
    1743. 

  1743.         openSnapNode(SNAP.openNodeSid, SNAP.openNodePlanOnly);
    1744. 

  1744.     }
    1745. 

  1745.   } catch (e) {}
    1746. 

  1746.   if (btn) setTimeout(() => btn.classList.remove("spinning"), 500);
    1747. 

  1747. }
    1748. 

  1748. 

  1749. const PLAN_KIND = { initial: "初始规划", advance: "推进（审视后未改规划）", replan: "重规划", finalize: "收尾" };
    1750. 

  1750. 

  1751. // 轮次标签：优先用 **planner 自述的本轮短标题**（决策里的 title，它说得出这一轮到底在干什么）；
    1752. 

  1752. // 没有（老 run / 没填）才退回按 kind 归类的通用说法。
    1753. 

  1753. const roundLabel = (s, k) => (s && s.title) || PLAN_KIND[(s || {}).kind]
    1754. 

  1754.   || ((s || {}).is_final ? "收尾" : `第 ${k + 1} 轮`);
    1755. 

  1755. 

  1756. function gotoSnap(i) {
    1757. 

  1757.   if (!SNAP || !SNAP.list) return;
    1758. 

  1758.   SNAP.idx = Math.max(0, Math.min(SNAP.list.length - 1, i));
    1759. 

  1759.   if (BOARD) { BOARD.fitted = false; BOARD.contentFitted = false; }   // 切换 Loop → 新面板自适应窗口，不保留上次位置/缩放
    1760. 

  1760.   renderSnapshot();
    1761. 

  1761.   syncHash();
    1762. 

  1762. }
    1763. 

  1763. 

  1764. function renderSnapStepper() {
    1765. 

  1765.   const el = $("#snapStepper"); if (!el) return;
    1766. 

  1766.   const n = SNAP.list.length, i = SNAP.idx;
    1767. 

  1767.   const pills = SNAP.list.map((s, k) => {
    1768. 

  1768.     const label = roundLabel(s, k);
    1769. 

  1769.     const changed = s.tree_changed;                       // 精准标记：本轮 plan 是否改了 Task
    1770. 

  1770.     const running = SNAP.runStatus === "running" && k === SNAP.list.length - 1;
    1771. 

  1771.     return `${k ? `<span class="snap-sep"></span>` : ""}<span class="snap-pill ${k === i ? "cur" : ""} ${s.is_final ? "final" : ""} ${changed ? "changed" : ""}" onclick="gotoSnap(${k})" title="${changed ? "本轮改了 Task" : "本轮未改 Task（推进/同结构）"}">
    1772. 

  1772.       <span class="sp-n">${k + 1}</span>${s.is_final ? "✓ " : ""}${esc(label)}${changed ? `<span class="sp-mark" title="改了 Task">✎</span>` : ""}${running ? `<span class="sp-live">●</span>` : ""}</span>`;
    1773. 

  1773.   }).join("");
    1774. 

  1774.   el.innerHTML = `
    1775. 

  1775.     <button class="snap-arrow" ${i <= 0 ? "disabled" : ""} onclick="gotoSnap(${i - 1})" title="上一轮（←）">◀</button>
    1776. 

  1776.     <div class="snap-track">${pills}</div>
    1777. 

  1777.     <button class="snap-arrow" ${i >= n - 1 ? "disabled" : ""} onclick="gotoSnap(${i + 1})" title="下一轮（→）">▶</button>`;
    1778. 

  1778. }
    1779. 

  1779. 

  1780. const SNAP_STATUS = { passed: "通过", failed: "未达标", pending: "待执行", running: "执行中",
    1781. 

  1781.                       decomposed: "容器", planned: "已规划" };
    1782. 

  1782. 

  1783. // 节点显示状态（含 running：run 仍在跑、最新快照里的下一个待执行叶实际正在执行）——卡片与抽屉共用，保证一致
    1784. 

  1784. function nodeDisplayStatus(node) {
    1785. 

  1785.   if (node.role === "container") return "decomposed";
    1786. 

  1786.   if (node.status === "pending" && node.step_id === SNAP.execSid) return "running";
    1787. 

  1787.   return node.status;
    1788. 

  1788. }
    1789. 

  1789. 

  1790. // 快照只在规划变化时落库：某任务执行期间不产新快照，故最新快照里它仍显示 pending。
    1791. 

  1791. // 若 run 仍在跑且这是最新快照，则「下一个待执行叶」实际正在执行 → 标 running。
    1792. 

  1792. function computeExecuting(snap) {
    1793. 

  1793.   if (SNAP.runStatus !== "running" || SNAP.idx !== SNAP.list.length - 1) return null;
    1794. 

  1794.   const pend = ((snap.tree && snap.tree.nodes) || [])
    1795. 

  1795.     .filter(n => n.role !== "container" && n.status === "pending")
    1796. 

  1796.     .sort((a, b) => (a.step_id ?? 1e9) - (b.step_id ?? 1e9));
    1797. 

  1797.   return pend.length ? pend[0].step_id : null;
    1798. 

  1798. }
    1799. 

  1799. 

  1800. async function renderSnapshot() {
    1801. 

  1801.   if (!SNAP || !SNAP.list) return;
    1802. 

  1802.   const snap = SNAP.list[SNAP.idx];
    1803. 

  1803.   SNAP.execSid = computeExecuting(snap);
    1804. 

  1804.   SNAP.roundExecSid = (snap.round_execution || {}).task_id ?? null;   // 本轮执行的任务 → 思维导图里高亮
    1805. 

  1805.   renderSnapStepper();
    1806. 

  1806.   if (MODULES && !MODULES.byIdx[SNAP.idx]) {                          // 本轮还没拉过 → 按需拉
    1807. 

  1807.     const w = $("#boardWorld");
    1808. 

  1808.     if (w) w.innerHTML = `<div class="loading">载入本轮模块树 <span class="dots"><span>·</span><span>·</span><span>·</span></span></div>`;
    1809. 

  1809.     const want = SNAP.idx;
    1810. 

  1810.     await ensureRound(want);
    1811. 

  1811.     if (want !== SNAP.idx) return;                                    // 期间又切了轮 → 让后一次接管
    1812. 

  1812.   }
    1813. 

  1813.   renderBoard();
    1814. 

  1814. }
    1815. 

  1815. 

  1816. // 任务图标：据角色 / 生成类型给出直观图标（category 为自由文本，正则匹配 + 兜底）。
    1817. 

  1817. function taskIcon(node) {
    1818. 

  1818.   if (node.role === "container") return "🗂";
    1819. 

  1819.   const c = String(node.category || "");
    1820. 

  1820.   if (/组合/.test(c)) return "🧩";
    1821. 

  1821.   if (/变化|变换|改/.test(c)) return "🔀";
    1822. 

  1822.   if (/完整|整图|图片/.test(c)) return "🖼️";
    1823. 

  1823.   if (/素材/.test(c)) return "🎨";
    1824. 

  1824.   return "📌";
    1825. 

  1825. }
    1826. 

  1826. 

  1827. // **统一的任务卡**：plan 输出的任务列表、输入里的任务槽、生成输出里的那个任务，全用这一张。
    1828. 

  1828. // opts.withResult=false → 只呈现任务本身（plan 刚排的活，还没执行）。
    1829. 

  1829. function taskCard(node, opts) {
    1830. 

  1830.   opts = opts || {};
    1831. 

  1831.   const sid = node.step_id;
    1832. 

  1832.   // planned：plan 刚排出来的计划态（状态一律「已规划」）；showResult=false：保留真实状态但不显示执行结果
    1833. 

  1833.   // badge：**用「本轮对它做了什么」占掉徽标位**（plan 的 ops / 下一步）——那一刻谈执行态状态没有意义。
    1834. 

  1834.   const planned = opts.planned === true && node.role !== "container";
    1835. 

  1835.   const status = planned ? "planned" : nodeDisplayStatus(node);
    1836. 

  1836.   const r = (planned || opts.badge || opts.showResult === false) ? null : node.result;
    1837. 

  1837.   let body = "";
    1838. 

  1838.   if (node.role === "container") {
    1839. 

  1839.     body = `<div class="mmc-kidsum"><span>◫ 已拆分，由子任务兑现</span></div>`;
    1840. 

  1840.   } else if (r) {
    1841. 

  1841.     const isImg = r.product_kind === "image" && r.product_url;
    1842. 

  1842.     body = `<div class="mmc-result">
    1843. 

  1843.       ${isImg ? `<img class="mmc-thumb" src="${esc(r.product_url)}" referrerpolicy="no-referrer" onclick="event.stopPropagation();openLB('${esc(r.product_url)}')" onerror="this.style.display='none'">` : ""}
    1844. 

  1844.       <div class="mmc-sum">${esc(r.summary || clip(r.product_text || "", 90)) || "<span style='color:var(--faint)'>（无摘要）</span>"}</div></div>`;
    1845. 

  1845.     if (r.verdict_pass === false) body += `<div class="mmc-fail">✗ ${esc(clip(r.verdict_reason || "", 90))}</div>`;
    1846. 

  1846.   }
    1847. 

  1847.   const attrs = (node.stage || node.category)
    1848. 

  1848.     ? `<div class="mmc-attrs">${node.stage ? `<span class="attr-chip stage"><span class="k">阶段</span>${esc(node.stage)}</span>` : ""}${
    1849. 

  1849.         node.category ? `<span class="attr-chip cat"><span class="k">操作</span>${esc(node.category)}</span>` : ""}</div>` : "";
    1850. 

  1850.   const cur = String(sid) === String(SNAP.roundExecSid) ? "mm-round-exec" : "";
    1851. 

  1851.   // 本轮被 update 改过：卡上直接标出改了哪几个字段（点开看逐字段 diff）
    1852. 

  1852.   const mod = (opts.modified && opts.modified.length)
    1853. 

  1853.     ? `<div class="mmc-chgs">${opts.modified.map(f => `<span class="chg-f">~ ${esc(f)}</span>`).join("")}</div>` : "";
    1854. 

  1854.   const b = opts.badge;
    1855. 

  1855.   return `<div class="mm-card mm-mini ${b ? `mm-op op-${esc(b.key)}` : `st-${status}`} ${cur} ${
    1856. 

  1856.     opts.modified ? "mm-modified" : ""}" data-sid="${esc(sid)}" onclick="${
    1857. 

  1857.     opts.click ? opts.click : `openSnapNode('${esc(sid)}',${planned || !!b})`}">
    1858. 

  1858.     <div class="mmc-top"><span class="mmc-sid">#${esc(sid)}</span>
    1859. 

  1859.       <span class="mmc-badge ${b ? `op-${esc(b.key)}` : status}">${
    1860. 

  1860.         b ? esc(b.text) : (SNAP_STATUS[status] || status)}</span></div>
    1861. 

  1861.     <div class="mmc-name">${taskIcon(node)} ${esc(node.name || "任务")}</div>
    1862. 

  1862.     ${node.goal ? `<div class="mmc-goal">${esc(node.goal)}</div>` : ""}
    1863. 

  1863.     ${attrs}${mod}${body}</div>`;
    1864. 

  1864. }
    1865. 

  1865. 

  1866. 

  1867. // 行内字符级 diff（LCS）：把旧串→新串的差异切成 eq/del/ins 片段。中文按字、英文数字按词、其余按符号切分，
    1868. 

  1868. // 保证 diff 粒度可读（非逐字节）。相邻同类片段合并。
    1869. 

  1869. function diffInline(oldS, newS) {
    1870. 

  1870.   const tok = s => String(s ?? "").match(/[\u4e00-\u9fff]|[A-Za-z0-9_]+|\s+|[^\s]/g) || [];
    1871. 

  1871.   const a = tok(oldS), b = tok(newS), n = a.length, m = b.length;
    1872. 

  1872.   const dp = Array.from({ length: n + 1 }, () => new Int32Array(m + 1));
    1873. 

  1873.   for (let i = n - 1; i >= 0; i--) for (let j = m - 1; j >= 0; j--)
    1874. 

  1874.     dp[i][j] = a[i] === b[j] ? dp[i + 1][j + 1] + 1 : Math.max(dp[i + 1][j], dp[i][j + 1]);
    1875. 

  1875.   const out = [];
    1876. 

  1876.   const push = (type, s) => { const last = out[out.length - 1]; if (last && last.type === type) last.s += s; else out.push({ type, s }); };
    1877. 

  1877.   let i = 0, j = 0;
    1878. 

  1878.   while (i < n && j < m) {
    1879. 

  1879.     if (a[i] === b[j]) { push("eq", a[i]); i++; j++; }
    1880. 

  1880.     else if (dp[i + 1][j] >= dp[i][j + 1]) { push("del", a[i]); i++; }
    1881. 

  1881.     else { push("ins", b[j]); j++; }
    1882. 

  1882.   }
    1883. 

  1883.   while (i < n) { push("del", a[i]); i++; }
    1884. 

  1884.   while (j < m) { push("ins", b[j]); j++; }
    1885. 

  1885.   return out;
    1886. 

  1886. }
    1887. 

  1887. function renderInlineDiff(oldS, newS) {
    1888. 

  1888.   return diffInline(oldS, newS).map(p =>
    1889. 

  1889.     p.type === "eq" ? esc(p.s)
    1890. 

  1890.       : p.type === "del" ? `<span class="df-del">${esc(p.s)}</span>`
    1891. 

  1891.         : `<span class="df-ins">${esc(p.s)}</span>`).join("");
    1892. 

  1892. }
    1893. 

  1893. // modified 节点的 changes → 逐字段「旧 → 新」对比（name/goal 展示具体字符级 diff，而非仅「改名/目标调整」）。
    1894. 

  1894. function renderChangesDiff(snap, sid) {
    1895. 

  1895.   const m = (snap.diff && snap.diff.modified || []).find(x => String(x.step_id) === String(sid));
    1896. 

  1896.   if (!m || !m.changes) return "";
    1897. 

  1897.   const c = m.changes, rows = [];
    1898. 

  1898.   const row = (k, v) => rows.push(`<div class="chg-row"><span class="chg-k">${k}</span><div class="chg-v">${v}</div></div>`);
    1899. 

  1899.   const pid = v => v == null ? "顶层" : "#" + esc(v);
    1900. 

  1900.   if (c.role) row("角色", c.role[0] === "leaf" && c.role[1] === "container"
    1901. 

  1901.     ? "叶子 → 容器（拆分为子任务）" : `${esc(c.role[0])} → ${esc(c.role[1])}`);
    1902. 

  1902.   if (c.parent_id) row("父任务", `${pid(c.parent_id[0])} → ${pid(c.parent_id[1])}`);
    1903. 

  1903.   if (c.name) row("名称", renderInlineDiff(c.name[0], c.name[1]));
    1904. 

  1904.   if (c.goal) row("目标", renderInlineDiff(c.goal[0], c.goal[1]));
    1905. 

  1905.   return rows.join("");
    1906. 

  1906. }
    1907. 

  1907. 

  1908. // ═══ 画板：**渲染后端给的模块调用树**（不解析、不推断）═══════════════════════
    1909. 

  1909. // 后端 /api/runs/{id}/flat?round=N 给一轮的运行实例，每个实例是同样的四段：
    1910. 

  1910. //   · input   {blocks:[{name,text,images,source,origin}]}  本次映射进来的输入（块名=结构、块值=变化）
    1911. 

  1911. //   · module  {kind, spec, view}                           这个模块的定义（agent/tool/workflow 各自的形状）
    1912. 

  1912. //   · flow    [子模块 | 事件]，已按 seq 归并（同 seq = 同一并发列）
    1913. 

  1913. //   · output  {data, ok, images}                           本次产物/结论（真 JSON）
    1914. 

  1914. // 前端只做布局与绘制。
    1915. 

  1915. 

  1916. // 一个标准节点：标题 / [输入] ─连线→ ┌结构 │ 运行流程┐ → [输出]
    1917. 

  1917. // 输入在结构**左侧**：每个输入槽用连线接到结构里同名的槽位 chip（逐槽一一对应，一眼可见）。
    1918. 

  1918. 

  1919. // 卡片登记：把一组卡放进 SNAP.cards[key]（点击查看详情按 key+下标取回）
    1920. 

  1920. function putCards(key, cards) { SNAP.cards[key] = cards; return cards; }
    1921. 

  1921. 

  1922. // 输入 / 输出锚点列：用**与运行流程完全相同的卡片组件**（renderPCard）——同一种东西只有一种画法。
    1923. 

  1923. 

  1924. // 输入槽 → 卡（每槽一张：槽名 + **本次**取值 + 该槽携带的图）。**空槽不出卡** ——
    1925. 

  1925. // 「结构里声明了这一槽、但本轮没有内容」只由结构侧那张「输入」卡表达（该槽位置灰，
    1926. 

  1926. // 详情里仍写着「本轮为空（未进入 prompt）」）。输入列只放真正进了 prompt 的东西，
    1927. 

  1927. // 不再排一列「空」卡占着版面。
    1928. 

  1928. const blockCards = blocks => (blocks || []).filter(b => b.filled !== false).map(b => ({
    1929. 

  1929.   label: b.title || b.name, icon: "⇢", key: b.key, hint: b.hint,
    1930. 

  1930.   tasks: b.item_type === "task" ? (b.items || []) : null,     // 任务型槽 → 用任务卡渲染
    1931. 

  1931.   // 有图就不再把 URL 当文字摘要重复一遍（图本身就是内容，URL 在详情里看）
    1932. 

  1932.   summary: b.text ? clip(b.text, 150) : ((b.images || []).length ? `${b.images.length} 张图` : ""),
    1933. 

  1933.   images: b.images || [],
    1934. 

  1934.   detail: { title: b.name, text: b.text || "", images: b.images || [] },
    1935. 

  1935. }));
    1936. 

  1936. 

  1937. // 结构 → 卡（system prompt / 输入槽位表 / 工具与模型）——全部来自后端申报的 structure
    1938. 

  1938. // 节点「结构」→ 卡片：**有什么画什么**。节点是 Agent 还是工序、还是别的形态，由产生侧在
    1939. 

  1939. // structure.node_kind / system_prompt 里申报，前端不预设它一定是哪一种。
    1940. 

  1940. // 结构按 kind 分化：workflow 走 flowchartHtml（流程图）、code 走 sourceHtml（源码），这里管 agent 那套卡。
    1941. 

  1941. function structCards(st, input, usedTools) {
    1942. 

  1942.   const cards = [];
    1943. 

  1943.   if (!st) return cards;
    1944. 

  1944.   if (st.summary) cards.push({ label: "这是什么", icon: "◍", summary: st.summary,
    1945. 

  1945.     chips: st.node_kind ? [st.node_kind] : [], detail: { title: "节点说明", text: st.summary } });
    1946. 

  1946.   // 调模型的模块（agent / llm）：system prompt
    1947. 

  1947.   if (st.system_prompt) cards.push({ label: "System Prompt", icon: "⌘", summary: clip(st.system_prompt, 110),
    1948. 

  1948.     detail: { title: "System Prompt", text: st.system_prompt } });
    1949. 

  1949.   // 输入：固定由哪几段构成 + 本轮各段取值。**就是输入**——不叫「上下文工程」、也不表达「哪段交给谁」
    1950. 

  1950.   // （那是下游各模块自己的输入，在它们的定义里；在这里再说一遍就是把分发规则冒充成自己的结构）。
    1951. 

  1951.   const schema = st.input_schema || [];
    1952. 

  1952.   if (schema.length) {
    1953. 

  1953.     const val = {};
    1954. 

  1954.     ((input || {}).blocks || []).forEach(b => val[b.key || b.name] = b);
    1955. 

  1955.     // 不写摘要：「由几段构成、几段有内容」下面那张槽位表逐行都写着（有内容的亮、空的置灰），
    1956. 

  1956.     // 再用一句话复述一遍就是同一件事的第二处表达。
    1957. 

  1957.     cards.push({ label: "输入", icon: "⿻",
    1958. 

  1958.       slots: schema.map(x => ({ key: x.key || x.name, hint: x.hint,
    1959. 

  1959.         name: (x.title || x.name), filled: !!(val[x.key || x.name] || {}).filled })),
    1960. 

  1960.       detail: { title: "输入 · 每一段 ↔ 本轮取值",
    1961. 

  1961.         // 逐槽分块、**完整**呈现本轮取值（不截断）——要核对模型到底看到了什么
    1962. 

  1962.         sections: schema.map(x => {
    1963. 

  1963.           const v = val[x.key || x.name] || {};
    1964. 

  1964.           return {
    1965. 

  1965.             label: (x.title || x.name) + (x.required ? "（必填）" : ""),
    1966. 

  1966.             meta: [x.hint ? "说明：" + x.hint : "", "取自：" + (x.source || "—"),
    1967. 

  1967.                    v.filled ? "" : "本轮为空（未进入 prompt）"].filter(Boolean).join("　·　"),
    1968. 

  1968.             text: v.filled ? (v.text || "") : "", images: v.images || [],
    1969. 

  1969.           };
    1970. 

  1970.         }) } });
    1971. 

  1971.   }
    1972. 

  1972.   // 工具：运行记录里只有**名字**（定义是代码、不是运行数据，按需走 /api/tools 取，见 TOOLDEF）。
    1973. 

  1973.   // `used` 是后端给的「本次实际用过哪些」——用过的高亮，一眼看出这轮动用了哪几样能力。
    1974. 

  1974.   const tools = (st.tools || []).map(t => typeof t === "string" ? { name: t } : (t || {}));
    1975. 

  1975.   const used = new Set(usedTools || []);
    1976. 

  1976.   if (tools.length) {
    1977. 

  1977.     const nUsed = tools.filter(t => used.has(t.name)).length;
    1978. 

  1978.     cards.push({ label: "工具 / 能力", icon: "⚙",
    1979. 

  1979.       summary: `可用 ${tools.length} 个工具${nUsed ? `　·　本次用过 ${nUsed} 个` : ""}`,
    1980. 

  1980.       tools, usedTools: [...used],
    1981. 

  1981.       detail: { title: "工具 / 能力", tools, usedTools: [...used] } });
    1982. 

  1982.   }
    1983. 

  1983.   // 模型只属于**真正调模型的模块**（agent / llm）；workflow / code 不调模型，模型在它们内部的子模块上。
    1984. 

  1984.   // 可执行结构申报的是扁平的 st.model，环节配置则是 st.runtime —— 两种都渲染成同一张卡。
    1985. 

  1985.   const isModelBearing = !st.node_kind || st.node_kind === "agent" || st.node_kind === "llm";
    1986. 

  1986.   const rt = st.runtime;
    1987. 

  1987.   if (isModelBearing && !(rt && rt.model) && st.model)
    1988. 

  1988.     cards.push({ label: "模型配置", icon: "◎", summary: st.model,
    1989. 

  1989.       chips: [st.runs || ""].filter(Boolean),
    1990. 

  1990.       detail: { title: "模型配置 · 本段", text: `模型：${st.model}` + (st.runs ? `\n执行：${st.runs}` : "") } });
    1991. 

  1991.   if (isModelBearing && rt && rt.model) {
    1992. 

  1992.     const p = rt.params || {}, bud = rt.budget || {};
    1993. 

  1993.     cards.push({ label: "模型配置", icon: "◎", summary: rt.model,
    1994. 

  1994.       chips: [rt.overridden ? "环节特配" : "默认模型",
    1995. 

  1995.         ...Object.keys(p).map(x => `${x}=${p[x]}`), ...Object.keys(bud).map(x => `${x}=${bud[x]}`),
    1996. 

  1996.         rt.fallback_model ? "回退 " + rt.fallback_model : ""].filter(Boolean),
    1997. 

  1997.       detail: { title: "模型配置 · 本环节", text:
    1998. 

  1998.         `环节（role）：${rt.role || "—"}\n模型：${rt.model}（${rt.overridden ? "models_by_role 特配" : "默认 model_name"}）\n` +
    1999. 

  1999.         `默认模型：${rt.default_model || "—"}\n安全回退模型：${rt.fallback_model || "（未启用）"}\n` +
    2000. 

  2000.         `参数：${JSON.stringify(p)}\n中间件：${(rt.middleware || []).join("、") || "—"}\n预算：${JSON.stringify(bud)}` } });
    2001. 

  2001.   }
    2002. 

  2002.   return cards;
    2003. 

  2003. }
    2004. 

  2004. 

  2005. // 输出 → **一张卡**。输出本身只有客观数据；**怎么读它由结构里的 output_schema 决定**：
    2006. 

  2006. //   fields[{key,name}]  给字段中文名（未列出的按原键名显示，hide_keys 里的不显示）
    2007. 

  2007. //   items_key           输出的「构成」在哪个键（如交付件 results / 逐候选 candidates）
    2008. 

  2008. //   primary_key         主件下标在哪个键；item_* 指明每件的标签/图/备注取哪
    2009. 

  2009. // 没有 schema 就按对象自身的键缺省摊平（autoFields）。任何情况下都不该把一坨 JSON 糊在卡面上。
    2010. 

  2010. function outputCards(out, schema) {
    2011. 

  2011.   if (!out) return [];
    2012. 

  2012.   const d = out.data, sc = schema || {};
    2013. 

  2013.   const labels = {}; (sc.fields || []).forEach(f => labels[f.key] = f.name);
    2014. 

  2014.   const hide = new Set([...(sc.hide_keys || []), sc.items_key, sc.primary_key].filter(Boolean));
    2015. 

  2015.   const items = (sc.items_key && d && Array.isArray(d[sc.items_key])) ? d[sc.items_key] : [];
    2016. 

  2016.   const pIdx = sc.primary_key && d ? d[sc.primary_key] : null;
    2017. 

  2017.   const itemLabel = (it, i) => {
    2018. 

  2018.     const raw = it[sc.item_label_key || "role"];
    2019. 

  2019.     const mapped = (sc.item_labels || {})[raw] || (raw != null ? String(raw) : `#${i}`);
    2020. 

  2020.     return (sc.item_label_prefix || "") + mapped;
    2021. 

  2021.   };
    2022. 

  2022.   const arts = items.map((it, i) => ({
    2023. 

  2023.     label: itemLabel(it, i), primary: (pIdx != null && i === pIdx) || it.role === "primary",
    2024. 

  2024.     note: it[sc.item_note_key || "note"] || "",
    2025. 

  2025.     url: it[sc.item_image_key || "url"],
    2026. 

  2026.     text: it.text || it.falsifiable_diff || "",
    2027. 

  2027.   }));
    2028. 

  2028.   // 其余字段：schema 给名字的优先按 schema 顺序，再补上数据里剩下的键
    2029. 

  2029.   const rest = {};
    2030. 

  2030.   if (d && typeof d === "object" && !Array.isArray(d))
    2031. 

  2031.     Object.entries(d).forEach(([k, v]) => { if (!hide.has(k)) rest[k] = v; });
    2032. 

  2032.   let fields = [];
    2033. 

  2033.   // 投影层读时组装好的字段（如 plan 决策的 ops/理由/下一步）优先——它按框架自己的 schema 渲染过了
    2034. 

  2034.   if (out.fields && out.fields.length) fields = out.fields;
    2035. 

  2035.   else if (Object.keys(rest).length) {
    2036. 

  2036.     const named = (sc.fields || []).filter(f => rest[f.key] != null && rest[f.key] !== "")
    2037. 

  2037.       .map(f => ({ key: f.key, name: f.name }));
    2038. 

  2038.     const others = Object.keys(rest).filter(k => !named.some(n => n.key === k)).map(k => ({ key: k, name: k }));
    2039. 

  2039.     const auto = {}; autoFields(rest).forEach(f => auto[f.label] = f.value);
    2040. 

  2040.     fields = [...named, ...others].map(f => ({ label: f.name, value: auto[f.key] }))
    2041. 

  2041.       .filter(f => f.value != null && f.value !== "");
    2042. 

  2042.     // 数组里是对象的（如 items）由 autoFields 展开成多行，补进来
    2043. 

  2043.     autoFields(rest).filter(f => !fields.some(x => x.label === (labels[f.label] || f.label)) && /[ #]/.test(f.label))
    2044. 

  2044.       .forEach(f => fields.push(f));
    2045. 

  2045.   }
    2046. 

  2046.   // 图：优先「输出构成」里的交付件；否则用产生侧申报的 out.images。
    2047. 

  2047.   // **哪些图算这个节点的产物由产生侧说了算**（set_output(images=…)，如 plan 显式申报「无图产物」，
    2048. 

  2048.   // 免得把决策里引用的参考图当成品）——这里不再按「有没有可读字段」去猜要不要显示图。
    2049. 

  2049.   const images = arts.map(a => a.url).filter(Boolean);
    2050. 

  2050.   return [{
    2051. 

  2051.     label: "输出" + (out.ok === false ? " · 未达标" : ""),
    2052. 

  2052.     icon: out.ok === false ? "✗" : "◆", ok: out.ok, final: true,
    2053. 

  2053.     fields, ops: out.ops || null, opsTitle: out.ops_title || "",
    2054. 

  2054.     next: out.next || null, nextTitle: out.next_title || "", arts: arts.length ? arts : null,
    2055. 

  2055.     summary: fields.length || arts.length ? "" : clip(summarizeData(d), 150),
    2056. 

  2056.     images: images.length ? images : (out.images || []),
    2057. 

  2057.     detail: { title: "输出", images: images.length ? images : (out.images || []),
    2058. 

  2058.       text: (arts.length ? arts.map(a => `${a.primary ? "★ " : ""}${a.label}${a.note ? "\n   " + a.note : ""}` +
    2059. 

  2059.                 `${a.url ? "\n   " + a.url : ""}`).join("\n\n") + "\n\n———\n\n" : "") +
    2060. 

  2060.             (typeof d === "string" ? d : JSON.stringify(d, null, 2)), json: d },
    2061. 

  2061.   }];
    2062. 

  2062. }
    2063. 

  2063. 

  2064. // 对象 → 可读字段列表（产生侧没给 fields 时的缺省摊平）。
    2065. 

  2065. // 关键：**对象数组要逐项展开**（如多候选的逐候选结论），而不是压成「N 项」——那正是要看的东西。
    2066. 

  2066. function autoFields(d) {
    2067. 

  2067.   if (!d || typeof d !== "object" || Array.isArray(d)) return [];
    2068. 

  2068.   const scalar = v => v == null ? "" : (typeof v === "boolean" ? (v ? "✓" : "✗") : String(v));
    2069. 

  2069.   const rowOf = (item, i, key) => {
    2070. 

  2070.     // 标识：优先项里带序号/名字的字段，否则用下标
    2071. 

  2071.     const idKey = ["candidate_index", "index", "idx", "name", "key", "id", "standard", "label"]
    2072. 

  2072.       .find(k => item[k] != null);
    2073. 

  2073.     const label = `${key}${idKey ? " " + String(item[idKey]) : " #" + i}`;
    2074. 

  2074.     // 值：把这一项里的标量按「布尔 → ✓/✗、数字 → 原样、短文本 → 原文」拼成一行（长文本截断）
    2075. 

  2075.     const bits = Object.entries(item)
    2076. 

  2076.       .filter(([k, v]) => k !== idKey && v != null && typeof v !== "object")
    2077. 

  2077.       .map(([, v]) => typeof v === "string" ? clip(v, 60) : scalar(v));
    2078. 

  2078.     return { label, value: clip(bits.join("　"), 160) };
    2079. 

  2079.   };
    2080. 

  2080.   const out = [];
    2081. 

  2081.   for (const [k, v] of Object.entries(d)) {
    2082. 

  2082.     if (v == null || v === "") continue;
    2083. 

  2083.     if (Array.isArray(v)) {
    2084. 

  2084.       const objs = v.filter(x => x && typeof x === "object");
    2085. 

  2085.       if (objs.length) { objs.slice(0, 8).forEach((it, i) => out.push(rowOf(it, i, k))); continue; }
    2086. 

  2086.       if (v.length) out.push({ label: k, value: clip(v.join("、"), 160) });
    2087. 

  2087.       continue;
    2088. 

  2088.     }
    2089. 

  2089.     if (typeof v === "object") { out.push({ label: k, value: clip(JSON.stringify(v), 120) }); continue; }
    2090. 

  2090.     out.push({ label: k, value: typeof v === "string" ? v : scalar(v) });
    2091. 

  2091.   }
    2092. 

  2092.   return out.slice(0, 12);
    2093. 

  2093. }
    2094. 

  2094. 

  2095. // 结构化输出的一行摘要：优先常见的可读字段，否则整体压一行（不猜格式，取到什么算什么）
    2096. 

  2096. function summarizeData(d) {
    2097. 

  2097.   if (d == null) return "";
    2098. 

  2098.   if (typeof d === "string") return d;
    2099. 

  2099.   for (const k of ["reasoning", "summary", "reason", "text", "note", "content"])
    2100. 

  2100.     if (d[k]) return String(d[k]);
    2101. 

  2101.   return JSON.stringify(d);
    2102. 

  2102. }
    2103. 

  2103. 

  2104. // ═══════════════════════════════════════════════════════════════════════════
    2105. 

  2105. //  模块渲染（统一模块模型的扁平四表：perl_module_def / _ref / _inst / perl_flow_node）
    2106. 

  2106. //
    2107. 

  2107. //  一切皆模块，模块 = 四段（输入 / 结构 / 执行流程 / 输出），模块可嵌套：
    2108. 

  2108. //  组合模块（workflow）的「执行流程」就是它的**子模块调用**，于是嵌套天然递归；
    2109. 

  2109. //  叶模块（agent / tool）的「执行流程」是事件流。同 seq = 同时发起（并发），直接分列。
    2110. 

  2110. //
    2111. 

  2111. //  前端只做两件事：**递归画四段盒子** + **按 spec.layout 摆位**。语义（并发/成败/图片/结构化
    2112. 

  2112. //  产物/布局列）全部由产生侧写进数据，这里不做任何解析或推断。
    2113. 

  2113. // ═══════════════════════════════════════════════════════════════════════════
    2114. 

  2114. let MODULES = null;
    2115. 

  2115. let MOD_COLOR = {};                     // module_key → 色相（按模块出现顺序分配，不同模块不同色）
    2116. 

  2116. 

  2117. // 只拉第 0 轮建立骨架（root 的图定义 + 轮数）；其余轮切到时再按需拉——长 run 的整树可达数 MB。
    2118. 

  2118. // ── 旁路标注：{summary, basis[]}，**按被标注的那一步 join**——标注对象是**模型推理节点**，
    2119. 

  2119. // 故主键是 node_id（= perl_flow_node.id）；旧 run 是按工具调用标的，仍按 tool_call_id 找。
    2120. 

  2120. // **拿不到就当没有** —— 这块数据是 run 之后另跑 `python -m framework.annotate <run_id>` 生成的，
    2121. 

  2121. // 缺失不影响查看器任何既有显示。
    2122. 

  2122. let ANN = { byNode: {}, byCall: {}, docs: {} };
    2123. 

  2123. async function fetchAnnotations(runId) {
    2124. 

  2124.   try {
    2125. 

  2125.     const r = await fetch(`/api/runs/${runId}/annotations`);
    2126. 

  2126.     if (!r.ok) return { byNode: {}, byCall: {}, docs: {} };
    2127. 

  2127.     const d = await r.json();
    2128. 

  2128.     return { byNode: d.by_node || {}, byCall: d.by_call || {}, docs: d.docs || {} };
    2129. 

  2129.   } catch (e) { return { byNode: {}, byCall: {}, docs: {} }; }
    2130. 

  2130. }
    2131. 

  2131. // 一张卡 → 它的标注键（`n:节点id` / `c:tool_call_id`）：键里带上取哪张表，openBasis 据此回查同一条。
    2132. 

  2132. const annKeyOf = s => !s ? "" : (s.node_id ? "n:" + s.node_id : (s.tool_call_id ? "c:" + s.tool_call_id : ""));
    2133. 

  2133. const annByKey = k => !k ? null : (k[0] === "n" ? (ANN.byNode || {})[k.slice(2)] : (ANN.byCall || {})[k.slice(2)]);
    2134. 

  2134. const annOf = s => annByKey(annKeyOf(s));
    2135. 

  2135. 

  2136. // 工具定义（说明 / 参数）**按需拉一次**：它是代码里的静态信息，不该塞进每次运行的记录里。
    2137. 

  2137. // 只在打开「工具 / 能力」详情时才取，取到后整个会话共用。
    2138. 

  2138. let TOOLDEF = null;
    2139. 

  2139. async function loadToolDefs(agent) {
    2140. 

  2140.   if (TOOLDEF) return TOOLDEF;
    2141. 

  2141.   try {
    2142. 

  2142.     const r = await fetch(`/api/tools?agent=${encodeURIComponent(agent || "production")}`);
    2143. 

  2143.     TOOLDEF = r.ok ? ((await r.json()).tools || {}) : {};
    2144. 

  2144.   } catch (e) { TOOLDEF = {}; }
    2145. 

  2145.   return TOOLDEF;
    2146. 

  2146. }
    2147. 

  2147. 

  2148. // 依据来源栏：把每条来源的**全文**列出来，并按后端给的字符区间高亮被引片段。
    2149. 

  2149. // **先按偏移切片、再逐段 esc()** —— 反过来做的话，`&`→`&amp;` 会把后面所有字符推移，高亮就偏了。
    2150. 

  2150. function hlText(text, s, e) {
    2151. 

  2151.   const t = String(text == null ? "" : text);
    2152. 

  2152.   if (s == null || e == null || s < 0 || e > t.length || e <= s) return esc(t);
    2153. 

  2153.   return esc(t.slice(0, s)) + `<mark class="src-hl">` + esc(t.slice(s, e)) + `</mark>` + esc(t.slice(e));
    2154. 

  2154. }
    2155. 

  2155. // 依据类型 → 给人看的名字与图标。**前端不认识业务自定义的 kind 也没关系**：认不出就原样显示 kind，
    2156. 

  2156. // 面板与高亮照常工作（认 anchor 与偏移，不认类型）。
    2157. 

  2157. const SRC_KIND = {
    2158. 

  2158.   agent_system_prompt: { name: "Agent System Prompt", ic: "▤" },
    2159. 

  2159.   input_block:         { name: "输入",                ic: "⇢" },
    2160. 

  2160.   input_image:         { name: "参考图",              ic: "🖼" },
    2161. 

  2161.   event:               { name: "前序步骤",            ic: "↩" },
    2162. 

  2162. };
    2163. 

  2163. const srcKind = k => SRC_KIND[k] || { name: k || "来源", ic: "◆" };
    2164. 

  2164. 

  2165. // 一份完整文档 + 其中的**多处**引用：整份显示、逐处高亮、顶部给快速切换。
    2166. 

  2166. // 为什么不切成几段摘要各自显示：读者会不知道这几处在整份 prompt 的什么位置、彼此什么关系。
    2167. 

  2167. // 高亮 + markdown 同时要：字符偏移是对着**原始 markdown 文本**算的，渲染成 HTML 后就不成立了。
    2168. 

  2168. // 做法是**先在原文里插哨兵字符、再渲染**（哨兵取私有区码点，markdown 渲染器当普通字不会动它），
    2169. 

  2169. // 渲染完把哨兵换成 <mark>。这样偏移始终对着原文，渲染器也不必知道高亮的存在。
    2170. 

  2170. const HL_O = "\uE000", HL_S = "\uE001", HL_C = "\uE002";
    2171. 

  2171. function mdWithHighlights(text, spans, gi) {
    2172. 

  2172.   let t = String(text || "");
    2173. 

  2173.   // 从后往前插，前面的偏移才不会被前一次插入推移
    2174. 

  2174.   [...spans].sort((a, b) => b.s - a.s).forEach(x => {
    2175. 

  2175.     t = t.slice(0, x.s) + HL_O + x.k + HL_S + t.slice(x.s, x.e) + HL_C + t.slice(x.e);
    2176. 

  2176.   });
    2177. 

  2177.   let html = renderMarkdown(t);
    2178. 

  2178.   // 哨兵 → <mark>。高亮区间可能跨块级标签（一句话被渲染成 <p>…</p><ul>…</ul>），此时不能简单地
    2179. 

  2179.   // 用一对 <mark> 包住（会产生跨块未闭合的非法结构）——按标签切开、只包文本片段。
    2180. 

  2180.   return html.replace(new RegExp(HL_O + "(\\d+)" + HL_S + "([\\s\\S]*?)" + HL_C, "g"), (m, k, inner) => {
    2181. 

  2181.     let first = true;
    2182. 

  2182.     return inner.split(/(<[^>]+>)/).map(piece => {
    2183. 

  2183.       if (!piece || piece[0] === "<") return piece;
    2184. 

  2184.       const id = first ? ` id="hl-${gi}-${k}"` : "";
    2185. 

  2185.       first = false;
    2186. 

  2186.       return `<mark class="src-hl"${id}>${piece}</mark>`;
    2187. 

  2187.     }).join("");
    2188. 

  2188.   });
    2189. 

  2189. }
    2190. 

  2190. function srcDocHtml(doc, cites, gi) {
    2191. 

  2191.   const t = String(doc.text || "");
    2192. 

  2192.   const spans = cites.filter(c => c.doc_start != null && c.doc_end != null)
    2193. 

  2193.                      .sort((a, b) => a.doc_start - b.doc_start);
    2194. 

  2194.   const html = mdWithHighlights(t, spans.map((c, k) => ({ s: c.doc_start, e: c.doc_end, k })), gi);
    2195. 

  2195.   const unlocated = cites.filter(c => c.doc_start == null);
    2196. 

  2196.   return `<div class="src-item">
    2197. 

  2197.     <div class="src-h"><span class="src-n">${srcKind(doc.kind).ic}</span>
    2198. 

  2198.       <span class="src-title">${esc(doc.title)}</span>
    2199. 

  2199.       <span class="src-loc ok">${cites.length} 处引用 · 全文 ${t.length} 字</span></div>
    2200. 

  2200.     <div class="src-jump">${spans.map((c, k) =>
    2201. 

  2201.       `<span class="sj" onclick="jumpHl(${gi},${k})">${k + 1}　${esc(clip(c.quote || c.title || "", 26))}</span>`
    2202. 

  2202.     ).join("")}${unlocated.map(c =>
    2203. 

  2203.       `<span class="sj off" title="未能在原文中逐字定位">△ ${esc(clip(c.quote || "", 26))}</span>`).join("")}</div>
    2204. 

  2204.     <div class="src-body md" id="src-doc-${gi}"><div class="pp-md">${html}</div></div>
    2205. 

  2205.   </div>`;
    2206. 

  2206. }
    2207. 

  2207. function jumpHl(gi, k) {
    2208. 

  2208.   const box = document.getElementById("src-doc-" + gi);
    2209. 

  2209.   const m = document.getElementById(`hl-${gi}-${k}`);
    2210. 

  2210.   if (!box || !m) return;
    2211. 

  2211.   // 用视口坐标算增量，不用 offsetTop —— 后者依赖 offsetParent，中间多包一层容器就会算错。
    2212. 

  2212.   box.scrollTop += m.getBoundingClientRect().top - box.getBoundingClientRect().top - 70;
    2213. 

  2213.   m.classList.add("flash"); setTimeout(() => m.classList.remove("flash"), 900);
    2214. 

  2214. }
    2215. 

  2215. function srcItemHtml(b, k) {
    2216. 

  2216.   const loc = !b.valid ? `<span class="src-loc no">✗ 悬空引用</span>`
    2217. 

  2217.     : b.located ? `<span class="src-loc ok">✓ 逐字定位 [${b.start}:${b.end}]</span>`
    2218. 

  2218.                 : `<span class="src-loc no">△ 未逐字定位</span>`;
    2219. 

  2219.   const isImg = b.kind === "input_image";
    2220. 

  2220.   const body = isImg
    2221. 

  2221.     ? `<img src="${esc(b.text || "")}" referrerpolicy="no-referrer" onclick="openLB('${esc(b.text || "")}')">`
    2222. 

  2222.     : (b.text ? `<div class="pp-md">${mdWithHighlights(b.text, (b.located ? [{ s: b.start, e: b.end, k: 0 }] : []), "s" + k)}</div>`
    2223. 

  2223.               : `<span style="color:var(--faint)">（来源正文不可用：该 run 缺少对应的结构记录）</span>`);
    2224. 

  2224.   return `<div class="src-item" id="src-item-${k}">
    2225. 

  2225.     <div class="src-h"><span class="src-n">${k + 1}</span>
    2226. 

  2226.       <span class="src-kind">${srcKind(b.kind).ic} ${esc(srcKind(b.kind).name)}</span>
    2227. 

  2227.       <span class="src-title">${esc(b.title || b.ref || "")}</span>${loc}</div>
    2228. 

  2228.     <div class="src-body${isImg ? "" : " md"}" id="src-body-${k}">${body}</div>
    2229. 

  2229.     ${(!isImg && b.quote) ? `<div class="src-quote">被引片段：「${esc(b.quote)}」</div>` : ""}
    2230. 

  2230.   </div>`;
    2231. 

  2231. }
    2232. 

  2232. function openBasis(key, label) {
    2233. 

  2233.   const a = annByKey(key); if (!a) return;
    2234. 

  2234.   const basis = a.basis || [];
    2235. 

  2235.   $("#srcbarTitle").textContent = label || "";
    2236. 

  2236.   // 同一份文档（后端给的 doc key，现在只有 system prompt）的多条引用**合并成一块**：显示整份原文、
    2237. 

  2237.   // 逐处高亮、顶部给跳转条。其余来源各自成块。顺序：先文档，后零散来源。
    2238. 

  2238.   const groups = {}, singles = [];
    2239. 

  2239.   basis.forEach(b => (b.doc && (ANN.docs || {})[b.doc]) ? (groups[b.doc] = groups[b.doc] || []).push(b)
    2240. 

  2240.                                                         : singles.push(b));
    2241. 

  2241.   const gkeys = Object.keys(groups);
    2242. 

  2242.   $("#srcbarBody").innerHTML =
    2243. 

  2243.     (a.summary ? `<div class="srcbar-sum">🔖 ${esc(a.summary)}</div>` : "") +
    2244. 

  2244.     (basis.length ? gkeys.map((k, gi) => srcDocHtml(ANN.docs[k], groups[k], gi)).join("")
    2245. 

  2245.                     + singles.map(srcItemHtml).join("")
    2246. 

  2246.                   : `<div class="lane-empty">（本次调用未标注依据）</div>`);
    2247. 

  2247.   // 只有一块来源时铺满剩余高度（长 prompt 挤在 340px 的小窗里读不了）；多块时各自限高、整栏滚动。
    2248. 

  2248.   $("#srcbarBody").classList.toggle("single", gkeys.length + singles.length === 1);
    2249. 

  2249.   $("#srcbar").classList.add("open");
    2250. 

  2250.   requestAnimationFrame(() => {
    2251. 

  2251.     gkeys.forEach((k, gi) => jumpHl(gi, 0));            // 文档块：定位到第一处引用
    2252. 

  2252.     singles.forEach((b, k) => {                          // 零散来源：各自把高亮滚进可视区
    2253. 

  2253.       const box = document.getElementById("src-body-" + k);
    2254. 

  2254.       const m = box && box.querySelector(".src-hl");
    2255. 

  2255.       if (m) box.scrollTop += m.getBoundingClientRect().top - box.getBoundingClientRect().top - 60;
    2256. 

  2256.     });
    2257. 

  2257.   });
    2258. 

  2258. }
    2259. 

  2259. function closeSrcBar() { $("#srcbar").classList.remove("open"); }
    2260. 

  2260. 

  2261. // id 一键复制：查看器上印的 invocation id / tool_call_id 就是标注器 CLI 的入参，
    2262. 

  2262. // 看到哪条标注不对 → 复制 id → `python -m framework.annotate <run> --invocation N`（或 --node X）重标。
    2263. 

  2263. function copyId(text, el) {
    2264. 

  2264.   // 原文存在 dataset 里（只在第一次点击时记）：**不能读 el.textContent 当原文** —— 连点两下时读到的
    2265. 

  2265.   // 已经是「✓ 已复制」，那就再也变不回去了。同时清掉上一次未跑完的定时器，避免它把状态改回去。
    2266. 

  2266.   if (!el.dataset.label) el.dataset.label = el.textContent;
    2267. 

  2267.   clearTimeout(el._copyT);
    2268. 

  2268.   const done = () => { el.textContent = "✓ 已复制"; el.classList.add("copied");
    2269. 

  2269.                        el._copyT = setTimeout(() => { el.textContent = el.dataset.label;
    2270. 

  2270.                                                       el.classList.remove("copied"); }, 1200); };
    2271. 

  2271.   if (navigator.clipboard && navigator.clipboard.writeText) navigator.clipboard.writeText(String(text)).then(done, done);
    2272. 

  2272.   else { const t = document.createElement("textarea"); t.value = String(text); document.body.appendChild(t);
    2273. 

  2273.          t.select(); try { document.execCommand("copy"); } catch (e) {} t.remove(); done(); }
    2274. 

  2274. }
    2275. 

  2275. 

  2276. // ═══ 扁平模块视图 ═══════════════════════════════════════════════════════════════
    2277. 

  2277. // **没有嵌套**：一个「运行实例」一个盒子，盒子之间由 `call` 引用相连 —— 前端沿实例 id 走链，
    2278. 

  2278. // 不做层级下钻。模块**定义**是全局的、可被多个实例共享（盒子头标 module_key@版本 + 第 k/N 个实例）。
    2279. 

  2279. // 定义层的引用（perl_module_ref）画在 ② 结构里；实例层的引用（call 节点）画在 ③ 运行流程里。
    2280. 

  2280. 

  2281. async function fetchModules(runId) {
    2282. 

  2282.   const d = await fetchRound(runId, 0);
    2283. 

  2283.   if (!d || !d.root || !d.round_count) return null;
    2284. 

  2284.   const byIdx = {};
    2285. 

  2285.   (d.rounds || []).forEach(r => byIdx[r.index] = r);
    2286. 

  2286.   return { runId, root: d.root, count: d.round_count, byIdx, defs: d.modules || {} };
    2287. 

  2287. }
    2288. 

  2288. async function fetchRound(runId, i) {
    2289. 

  2289.   try {
    2290. 

  2290.     const r = await fetch(`/api/runs/${runId}/flat?round=${i}`);
    2291. 

  2291.     return r.ok ? await r.json() : null;
    2292. 

  2292.   } catch (e) { return null; }
    2293. 

  2293. }
    2294. 

  2294. // 当前轮就绪（缓存命中直接返回）。轮数可能随 run 推进增长，故 count 也一并更新。
    2295. 

  2295. async function ensureRound(i) {
    2296. 

  2296.   if (!MODULES || MODULES.byIdx[i]) return MODULES && MODULES.byIdx[i];
    2297. 

  2297.   const d = await fetchRound(MODULES.runId, i);
    2298. 

  2298.   if (!d) return null;
    2299. 

  2299.   MODULES.count = d.round_count || MODULES.count;
    2300. 

  2300.   if (d.root) MODULES.root = d.root;
    2301. 

  2301.   Object.assign(MODULES.defs, d.modules || {});
    2302. 

  2302.   (d.rounds || []).forEach(r => MODULES.byIdx[r.index] = r);
    2303. 

  2303.   return MODULES.byIdx[i];
    2304. 

  2304. }
    2305. 

  2305. 

  2306. // DOM id 安全化：module_key 里有中文/. —— 连线锚点要用 querySelector，先规整
    2307. 

  2307. const domId = s => "m" + String(s).replace(/[^A-Za-z0-9_-]/g, "_");
    2308. 

  2308. const instDom = inst => domId("i" + inst.id);
    2309. 

  2309. const defOf = inst => (MODULES && MODULES.defs[inst.module_id]) || { spec: {}, kind: "", refs: [] };
    2310. 

  2310. // **指向别的模块的东西，一律用那个模块自己的颜色** —— 结构图里的引用节点、运行流程里的引用芯片、
    2311. 

  2311. // 跨块的引用连线，三处同源。不这么做的话它们会继承"所在块"的色相，画面上就成了
    2312. 

  2312. // 「handler 块里指向 generate 的节点是 handler 色」——颜色反而误导。
    2313. 

  2313. // 取不到（如本轮画板里没有那个模块）就不覆盖 --mc，自然回落到所在块的颜色。
    2314. 

  2314. const hueStyle = key => {
    2315. 

  2315.   const h = (MOD_COLOR || {})[key];
    2316. 

  2316.   return h == null ? "" : ` style="--mc:${h}"`;
    2317. 

  2317. };
    2318. 

  2318. 

  2319. // 某个模块在**别人的图定义**里被声明成什么样（tone / icon 等展示元信息）。
    2320. 

  2320. // 这是定义层的事实（谁引用它、怎么标它），不是前端按名字猜的。
    2321. 

  2321. 

  2322. // ③ 运行流程里的一格：**引用另一个模块的某个运行实例**。
    2323. 

  2323. // 它与 llm / tool 节点同列同序号 —— 引用只是流程里的一步。两条连线（本节点 → 被调实例的输入、
    2324. 

  2324. // 被调实例的输出 → 回到本节点）由 drawCallEdges 按 data-callee 画出来。
    2325. 

  2325. function callChipHtml(f) {
    2326. 

  2326.   return `<div class="call-chip" data-callee="${f.callee_inst_id}"
    2327. 

  2327.       data-callee-key="${esc(f.callee_module_key || "")}"${hueStyle(f.callee_module_key)}
    2328. 

  2328.       onclick="focusInst(${f.callee_inst_id})"
    2329. 

  2329.       title="引用模块 ${esc(f.callee_module_key)} 的运行实例 #${f.callee_inst_id}">
    2330. 

  2330.     <div class="cc-h">◆ 引用外部模块${f.node_key ? ` · ${esc(f.node_key)}` : ""}</div>
    2331. 

  2331.     <div class="cc-k">${esc(f.callee_module_key)}</div>
    2332. 

  2332.     <div class="cc-i">运行实例 #${f.callee_inst_id}${f.branch ? ` · ${esc(f.branch)}` : ""}</div></div>`;
    2333. 

  2333. }
    2334. 

  2334. 

  2335. // 跳转落点：横向对到目标的**起点**（左缘 + 这点边距），而不是居中 —— 运行链很长时居中会停在
    2336. 

  2336. // 链的中段，看不到实例从哪开始。
    2337. 

  2337. const FOCUS_LEFT_PAD = 48;
    2338. 

  2338. // 平移量用「当前 pan + 屏幕差值」的**增量**算：只依赖两个 getBoundingClientRect 的差，
    2339. 

  2339. // 与缩放倍率 z、transform-origin、容器内边距都无关（照抄世界坐标反推的写法在缩放时会偏）。
    2340. 

  2340. function focusPan(targetEl, vCenterEl) {
    2341. 

  2341.   const board = $("#board"); if (!board || !BOARD || !targetEl) return;
    2342. 

  2342.   const bb = board.getBoundingClientRect(), r = targetEl.getBoundingClientRect();
    2343. 

  2343.   const v = (vCenterEl || targetEl).getBoundingClientRect();
    2344. 

  2344.   BOARD.panX += (bb.left + FOCUS_LEFT_PAD) - r.left;              // 横向：起点靠左
    2345. 

  2345.   BOARD.panY += (bb.top + bb.height / 2) - (v.top + v.height / 2); // 纵向：居中
    2346. 

  2346.   boardApply();
    2347. 

  2347. }
    2348. 

  2348. 

  2349. // 跳到某个运行实例（画板是 transform 平移缩放的，不能用 scrollIntoView）。
    2350. 

  2350. // 横向按**所属模块块**的左缘对齐（于是「模块定义 + 这条运行链的起点」一起进画面），纵向让目标实例居中。
    2351. 

  2351. function focusInst(id) {
    2352. 

  2352.   const el = document.getElementById("inst-" + id), board = $("#board");
    2353. 

  2353.   if (!el || !board || !BOARD) return;
    2354. 

  2354.   document.querySelectorAll("#boardWorld .inst-lane.focus").forEach(x => x.classList.remove("focus"));
    2355. 

  2355.   el.classList.add("focus");
    2356. 

  2356.   focusPan(el.closest(".mod-block") || el, el);
    2357. 

  2357. }
    2358. 

  2358. 

  2359. // ① 输入 / ④ 输出：它们是**这条运行链的首尾节点**，与中间的运行节点排在同一条链上
    2360. 

  2360. // （而不是另立两段）——照示意图：(输入) → 节点1 → 节点2 → 节点3 → ▷输出。
    2361. 

  2361. function ioNodeHtml(inst, side, cards) {
    2362. 

  2362.   const key = "i" + inst.id + ":" + side;
    2363. 

  2363.   putCards(key, cards);
    2364. 

  2364.   const cap = side === "in" ? "输入" : "输出";
    2365. 

  2365.   return `<div class="lane-col io-node io-${side}" id="io${side}-${inst.id}">
    2366. 

  2366.     <div class="ion-cap">${cap}</div>
    2367. 

  2367.     <div class="ion-body">${cards.length ? cards.map((c, i) => renderPCard(key, i, c)).join("")
    2368. 

  2368.       : `<div class="lane-empty">（无${cap}）</div>`}</div></div>`;
    2369. 

  2369. }
    2370. 

  2370. 

  2371. // 一个运行实例 → **一条链**：输入 → 运行节点… → 输出。
    2372. 

  2372. // 同 seq = 同时发起（扇出 N 路 / 一轮多工具），并成一列画并发 —— 产生侧已把这件事写进数据。
    2373. 

  2373. function instLaneHtml(inst) {
    2374. 

  2374.   const key = "i" + inst.id + ":flow";
    2375. 

  2375.   const flow = inst.flow || [];
    2376. 

  2376.   const cards = flow.filter(f => f.kind === "node").map(f => f.card);
    2377. 

  2377.   putCards(key, cards);
    2378. 

  2378.   const steps = [];
    2379. 

  2379.   for (const f of flow) {
    2380. 

  2380.     const last = steps[steps.length - 1];
    2381. 

  2381.     if (last && last.seq === f.seq) last.items.push(f); else steps.push({ seq: f.seq, items: [f] });
    2382. 

  2382.   }
    2383. 

  2383.   const cols = steps.map(st => {
    2384. 

  2384.     const inner = st.items.map(f => f.kind === "call"
    2385. 

  2385.       ? callChipHtml(f) : renderPCard(key, cards.indexOf(f.card), f.card)).join("");
    2386. 

  2386.     return st.items.length > 1
    2387. 

  2387.       ? `<div class="lane-col conc"><div class="pc-conc-tag">⇉ 并发 ×${st.items.length}</div>
    2388. 

  2388.            <div class="pc-parallel-stack">${inner}</div></div>`
    2389. 

  2389.       : `<div class="lane-col">${inner}</div>`;
    2390. 

  2390.   });
    2391. 

  2391.   const d = defOf(inst);
    2392. 

  2392.   const chain = [ioNodeHtml(inst, "in", blockCards((inst.input || {}).blocks))]
    2393. 

  2393.     .concat(cols.length ? cols : [`<div class="lane-col"><div class="lane-empty">（无运行节点）</div></div>`])
    2394. 

  2394.     .concat([ioNodeHtml(inst, "out",
    2395. 

  2395.       outputCards(inst.output, d.view || (d.spec || {}).output_schema))]);
    2396. 

  2396.   // 步与步之间不放分隔元素：连接由 drawLaneEdges 画进这条泳道自己的 SVG（实线曲线箭头、与所在
    2397. 

  2397.   // 模块同色），元素之间只留 gap 供曲线穿过。
    2398. 

  2398.   return `<div class="lane-steps"><svg class="lane-wires"></svg>${chain.join("")}</div>`;
    2399. 

  2399. }
    2400. 

  2400. 

  2401. // ② 结构 · workflow —— **它的结构就是一张流程图**：节点只写「引用哪个模块 + 跑几次」，
    2402. 

  2402. // 细节在被引模块自己那里（点节点跳过去看）。边带基数，1:N / N:1 直接读出扇出与汇聚。
    2403. 

  2403. function flowchartHtml(spec) {
    2404. 

  2404.   const nodes = spec.nodes || [], edges = spec.edges || [];
    2405. 

  2405.   if (!nodes.length) return "";
    2406. 

  2406.   const lbl = (a, b) => (edges.find(e => e.from === a && e.to === b) || {});
    2407. 

  2407.   const card = (n, i) => {
    2408. 

  2408.     const many = n.cardinality === "many";
    2409. 

  2409.     const to = n.module_key || "";
    2410. 

  2410.     return `<div class="fc-node${to ? " ref" : ""}"${hueStyle(to)}${to ? ` data-to="${esc(to)}"
    2411. 

  2411.         onclick="focusModule('${esc(to)}')" title="悬停看这条引用连到哪 · 点击跳过去"` : ""}>
    2412. 

  2412.       <div class="fc-i">${i + 1}</div>
    2413. 

  2413.       <div class="fc-b"><div class="fc-t">${esc(n.title || n.key)}</div>
    2414. 

  2414.         ${to ? `<div class="fc-k">${esc(to)}</div>` : ""}
    2415. 

  2415.         ${many ? `<span class="fc-x">×N${n.fanout_over ? " · " + esc(n.fanout_over) : ""}</span>`
    2416. 

  2416.                : (n.cardinality === "optional" ? `<span class="fc-x">可能不跑</span>` : "")}
    2417. 

  2417.         ${n.dispatch ? `<span class="fc-x">动态派发 · ${esc(n.dispatch)}</span>` : ""}</div></div>`;
    2418. 

  2418.   };
    2419. 

  2419.   const rows = nodes.map((n, i) => {
    2420. 

  2420.     const e = i < nodes.length - 1 ? lbl(n.key, nodes[i + 1].key) : null;
    2421. 

  2421.     return card(n, i) + (i < nodes.length - 1
    2422. 

  2422.       ? `<div class="fc-edge"><span class="fc-card">${esc(e.cardinality || "")}</span>${
    2423. 

  2423.           e.label ? `<span class="fc-l">${esc(e.label)}</span>` : ""}</div>` : "");
    2424. 

  2424.   }).join("");
    2425. 

  2425.   return `<div class="fc">${rows}</div>`;
    2426. 

  2426. }
    2427. 

  2427. 

  2428. // ② 结构 · code —— **确定性代码段的定义就是它的实现**。散文规则说不清也会漂移，源码不会。
    2429. 

  2429. // 结构模块里**不内联源码**（否则 code 的结构列会被拉宽，与 agent 模块不一致）：只给标题 + 一条
    2430. 

  2430. // 「查看完整代码」入口，全文进 CODE_SRC 登记，点开在**右侧抽屉**看（见 openCodeModal）。key 用模块键。
    2431. 

  2431. let CODE_SRC = {};
    2432. 

  2432. function sourceHtml(spec, key) {
    2433. 

  2433.   const src = spec.source;
    2434. 

  2434.   if (!src) return "";
    2435. 

  2435.   CODE_SRC[key] = src;
    2436. 

  2436.   return `<div class="src-card">
    2437. 

  2437.     <div class="src-h"><span class="src-q">${esc(src.qualname || "")}</span>
    2438. 

  2438.       <span class="src-f">${esc(src.file || "")}:${src.line}</span></div>
    2439. 

  2439.     <div class="src-more" onclick="openCodeModal('${esc(key)}')">查看完整代码 ›</div></div>`;
    2440. 

  2440. }
    2441. 

  2441. // 完整源码 → 复用右侧详情抽屉（与其它节点详情同一个位置，不再另开居中弹窗）。
    2442. 

  2442. function openCodeModal(key) {
    2443. 

  2443.   const s = CODE_SRC[key]; if (!s) return;
    2444. 

  2444.   $("#drawerTag").textContent = "CODE"; $("#drawerTag").className = "drawer-tag";
    2445. 

  2445.   $("#drawerTitle").textContent = s.qualname || key;
    2446. 

  2446.   $("#drawerBody").innerHTML = `<div class="src-card">
    2447. 

  2447.     <div class="src-h"><span class="src-f">${esc(s.file || "")}${s.line != null ? ":" + s.line : ""}</span></div>
    2448. 

  2448.     <pre class="src-code">${esc(s.code || "")}</pre></div>`;
    2449. 

  2449.   openDrawer();
    2450. 

  2450. }
    2451. 

  2451. 

  2452. // 跳到某个模块块（结构图上的节点 → 那个模块）。落点同样是这个模块的**起点**：
    2453. 

  2453. // 块左缘对到视口左侧，于是看到的是「模块定义 + 运行流程开头」（见 focusPan）。
    2454. 

  2454. function focusModule(key) {
    2455. 

  2455.   const el = document.getElementById("bn-" + domId(key)), board = $("#board");
    2456. 

  2456.   if (!el || !board || !BOARD) return;
    2457. 

  2457.   document.querySelectorAll("#boardWorld .mod-block.focus").forEach(x => x.classList.remove("focus"));
    2458. 

  2458.   el.classList.add("focus");
    2459. 

  2459.   focusPan(el, el);
    2460. 

  2460. }
    2461. 

  2461. 

  2462. // 一个运行实例 → 泳道（定义那一侧只画一次，见 renderModuleBoard）
    2463. 

  2463. function instLaneBox(inst, n) {
    2464. 

  2464.   const flags = [
    2465. 

  2465.     inst.task_id != null ? `<span class="mmc-sid">Task #${esc(inst.task_id)}</span>` : "",
    2466. 

  2466.     inst.branch ? `<span class="mmc-sid">${esc(inst.branch)}</span>` : "",
    2467. 

  2467.     inst.ok === false ? `<span class="mmc-badge failed">未达标</span>`
    2468. 

  2468.       : inst.ok === true ? `<span class="mmc-badge passed">通过</span>` : "",
    2469. 

  2469.     (inst.timing && inst.timing.sec != null) ? `<span class="gn-sub">${inst.timing.sec}s</span>` : "",
    2470. 

  2470.     inst.tokens ? `<span class="gn-sub">${esc(inst.tokens)} tok</span>` : "",
    2471. 

  2471.     inst.caller ? `<span class="il-from" onclick="event.stopPropagation();focusInst(${inst.caller.inst_id})"
    2472. 

  2472.         title="谁引用了本实例（沿 call 边反查）">← 被 #${inst.caller.inst_id} 引用</span>` : "",
    2473. 

  2473.   ].join("");
    2474. 

  2474.   return `<div class="inst-lane" id="inst-${inst.id}">
    2475. 

  2475.     <div class="il-cap">运行实例 ${n}
    2476. 

  2476.       <span class="id-chip" title="运行实例 id（点击复制）" onclick="event.stopPropagation();copyId('${inst.id}',this)">#${inst.id}</span>
    2477. 

  2477.       ${inst.label ? `<span class="il-t">${esc(inst.label)}</span>` : ""}
    2478. 

  2478.       <span class="il-flags">${flags}</span></div>
    2479. 

  2479.     ${instLaneHtml(inst)}</div>`;
    2480. 

  2480. }
    2481. 

  2481. 

  2482. // 卡片里的图是**异步加载**的：加载完高度才定下来。不重排的话块的尺寸是按"图还没来"时量的，
    2483. 

  2483. // 连线端点就会落在旧位置。这里给每张图挂一次性回调，去抖后重排。
    2484. 

  2484. function relayoutOnImages(root) {
    2485. 

  2485.   let t = null;
    2486. 

  2486.   const kick = () => { clearTimeout(t); t = setTimeout(() => { layoutBoard(); }, 60); };
    2487. 

  2487.   root.querySelectorAll("img").forEach(img => {
    2488. 

  2488.     if (img.complete) return;
    2489. 

  2489.     img.addEventListener("load", kick, { once: true });
    2490. 

  2490.     img.addEventListener("error", kick, { once: true });
    2491. 

  2491.   });
    2492. 

  2492. }
    2493. 

  2493. 

  2494. // 模块级**调用树**：本轮的模块按「谁把活交给谁」串成一棵**横向生长**的树。
    2495. 

  2495. //
    2496. 

  2496. //   父子 = ① 入口链的先后（`entry_ids`：plan 规划完 → 派发给 handler 执行，是**交接**不是引用）
    2497. 

  2497. //          ② 实例层真实发生的 call 边（权威）
    2498. 

  2498. //          ③ 定义层声明的 refs（补上本轮没跑、但结构里声明了的模块）
    2499. 

  2499. //
    2500. 

  2500. // 为什么不再按「调用图最长路径分层、层＝行」：plan 与 handler 都没有被谁调用，纯调用图会把它们
    2501. 

  2501. // 判成同一层堆在一起 —— 但它们其实是先后关系。层次必须把**入口链的先后**算进去。
    2502. 

  2502. // 摆位（x/y）在 placeBlocks 里做：那要等 DOM 量出每块的实际尺寸。
    2503. 

  2503. function moduleTree(insts, defs, entryIds) {
    2504. 

  2504.   const byKey = {};                              // module_key → {insts, defIds}
    2505. 

  2505.   const push = (k, id, inst) => {
    2506. 

  2506.     const b = byKey[k] || (byKey[k] = { key: k, insts: [], defIds: [] });
    2507. 

  2507.     if (inst) b.insts.push(inst);
    2508. 

  2508.     const normalizedId = id == null ? null : String(id);
    2509. 

  2509.     if (normalizedId != null && !b.defIds.includes(normalizedId)) b.defIds.push(normalizedId);
    2510. 

  2510.   };
    2511. 

  2511.   insts.forEach(n => push(n.module_key, n.module_id, n));
    2512. 

  2512.   Object.keys(defs).forEach(id => push(defs[id].module_key, id, null));
    2513. 

  2513.   // **run 级根模块不显示**：整个 run 就是它的一次执行，它是所有轮次的**容器**而不是本轮的一个模块
    2514. 

  2514.   // —— 轮次按「根实例流程里每个 *.plan 调用」切分，根实例按构造永远落不进任何一轮的闭包，画出来只能是
    2515. 

  2515.   // 恒为 0 实例的空块。这个视图看的是**每一轮里发生了什么**，run 级的循环图定义不在这个尺度上。
    2516. 

  2516.   const rootKey = ((MODULES || {}).root || {}).module_key;
    2517. 

  2517.   if (rootKey) delete byKey[rootKey];
    2518. 

  2518. 

  2519.   const children = new Map(), parent = new Map(), edgeKind = new Map();
    2520. 

  2520.   // 每条父子边带一个**类型**（entry / call / ref）——摆位据它分轴：entry 走水平主干，
    2521. 

  2521.   // call/ref 走「往下 + 右缩进」（见 placeBlocks）。首个成边的 link 决定父与边类型（多父取第一个）。
    2522. 

  2522.   const link = (x, y, kind) => {                 // 保序去重；已有父的不改父（多父取第一个）
    2523. 

  2523.     if (!x || !y || x === y || !byKey[x] || !byKey[y] || parent.has(y)) return;
    2524. 

  2524.     if (!children.has(x)) children.set(x, []);
    2525. 

  2525.     if (children.get(x).includes(y)) return;
    2526. 

  2526.     children.get(x).push(y); parent.set(y, x); edgeKind.set(y, kind);
    2527. 

  2527.   };
    2528. 

  2528.   const instById = {}; insts.forEach(n => instById[n.id] = n);
    2529. 

  2529.   // ① 入口链：本轮根级实例按执行先后（plan → handler），前一个的产出交给后一个
    2530. 

  2530.   const chain = (entryIds || []).map(id => (instById[id] || {}).module_key).filter(Boolean);
    2531. 

  2531.   for (let i = 1; i < chain.length; i++) link(chain[i - 1], chain[i], "entry");
    2532. 

  2532.   // ② 实例层真实调用（flow 已按 seq 排好 → 子的次序 = 本轮真实的调用先后）
    2533. 

  2533.   insts.forEach(n => (n.flow || []).forEach(f => {
    2534. 

  2534.     if (f.kind === "call") link(n.module_key, f.callee_module_key, "call");
    2535. 

  2535.   }));
    2536. 

  2536.   // ③ 定义层声明的引用（本轮没跑的模块也有个去处）
    2537. 

  2537.   Object.keys(defs).forEach(id => (defs[id].refs || []).forEach(r => link(defs[id].module_key, r.to_module_key, "ref")));
    2538. 

  2538. 

  2539.   const keys = Object.keys(byKey);
    2540. 

  2540.   const roots = (chain.length && byKey[chain[0]] ? [chain[0]] : []).concat(
    2541. 

  2541.     keys.filter(k => !parent.has(k) && k !== chain[0]));
    2542. 

  2542.   // 深度（给块上标 L0/L1…；纯展示，摆位不依赖它）
    2543. 

  2543.   const depth = {}; const dfs = (k, d) => {
    2544. 

  2544.     if (depth[k] != null) return;
    2545. 

  2545.     depth[k] = d; (children.get(k) || []).forEach(c => dfs(c, d + 1));
    2546. 

  2546.   };
    2547. 

  2547.   roots.forEach(r => dfs(r, 0));
    2548. 

  2548.   keys.forEach(k => { if (depth[k] == null) depth[k] = 0; });
    2549. 

  2549.   return { byKey, keys, roots, children, parent, depth, edgeKind,
    2550. 

  2550.            lastEntry: chain.length ? chain[chain.length - 1] : null };
    2551. 

  2551. }
    2552. 

  2552. 

  2553. // 一轮 → 画板：**一个模块一块**（定义只画一次，右侧是它这一轮的全部运行实例），
    2554. 

  2554. // 块按**两个轴**摆（详见 placeBlocks）：入口链的主干**水平**往右读；模块内部引用/调用的被调块
    2555. 

  2555. // **往下 + 右缩进一个「模块定义」宽度**展开，同一父的多个被调块彼此水平排开、递归适用。
    2556. 

  2556. // 不同模块用不同颜色（按块的出现顺序取色相），于是"同一个模块的多次运行"一眼可辨。
    2557. 

  2557. let TREE = null;                                   // 本轮的调用树（供 placeBlocks 摆位）
    2558. 

  2558. function renderModuleBoard(round) {
    2559. 

  2559.   const world = $("#boardWorld"); if (!world) return;
    2560. 

  2560.   const insts = round.instances || [];
    2561. 

  2561.   const defs = (MODULES && MODULES.defs) || {};
    2562. 

  2562.   const t = moduleTree(insts, defs, round.entry_ids);
    2563. 

  2563.   if (!t.keys.length) { TREE = null; world.innerHTML = `<div class="board-none">本轮无运行实例</div>`; return; }
    2564. 

  2564.   // 摆位次序 = 树的先序（根 → 子 → 孙）；不在树上的（孤儿）排在后面
    2565. 

  2565.   const order = [], seen = new Set();
    2566. 

  2566.   const walk = k => { if (seen.has(k)) return; seen.add(k); order.push(k);
    2567. 

  2567.                       (t.children.get(k) || []).forEach(walk); };
    2568. 

  2568.   t.roots.forEach(walk);
    2569. 

  2569.   t.keys.forEach(k => { if (!seen.has(k)) { seen.add(k); order.push(k); } });
    2570. 

  2570.   // entryInsts：本轮入口实例的**实例 id**（按执行先后）——交接连线的端点取它们的输出/输入锚点
    2571. 

  2571.   TREE = { ...t, order, entryInsts: round.entry_ids || [] };
    2572. 

  2572.   MOD_COLOR = {};
    2573. 

  2573.   order.forEach((k, i) => MOD_COLOR[k] = Math.round((i * 47) % 360));
    2574. 

  2574. 

  2575.   const blockHtml = key => {
    2576. 

  2576.     const b = t.byKey[key];
    2577. 

  2577.     const d = defs[b.defIds[0]] || (b.insts[0] ? defOf(b.insts[0]) : {});
    2578. 

  2578.     const sample = b.insts[0], sk = "mod:" + b.key;
    2579. 

  2579.     // 结构按 kind 分化：workflow = 流程图（引用别的模块，点节点跳过去）；code = 源码；agent = 卡片。
    2580. 

  2580.     // 「这是什么 / System Prompt / 输入 / 工具 / 模型」是 **agent/llm 专属**的结构卡 —— workflow / code
    2581. 

  2581.     // 不走这套（它们的结构就是流程图 / 源码本身，summary 也已在 md-sum 显示过），否则会多出一张「这是什么」。
    2582. 

  2582.     const divergent = d.kind === "workflow" || d.kind === "code";
    2583. 

  2583.     const cards = divergent ? [] : structCards(d.spec || {}, sample ? sample.input : null,
    2584. 

  2584.                               sample ? sample.used_tools : []);
    2585. 

  2585.     putCards(sk, cards);
    2586. 

  2586.     // **结构只描述自己**：被引模块的细节不在这里，所以这里没有它们的 prompt / 模型 / 输入槽。
    2587. 

  2587.     const kindHtml = d.kind === "workflow" ? flowchartHtml(d.spec || {})
    2588. 

  2588.                    : d.kind === "code" ? sourceHtml(d.spec || {}, b.key) : "";
    2589. 

  2589.     return `<div class="mod-block" id="bn-${domId(b.key)}" data-key="${esc(b.key)}" style="--mc:${MOD_COLOR[b.key]}">
    2590. 

  2590.       <div class="mod-def">
    2591. 

  2591.         <div class="md-cap">模块定义<span class="md-depth" title="调用树上的深度">L${t.depth[b.key]}</span></div>
    2592. 

  2592.         <div class="md-key">${esc(b.key)}</div>
    2593. 

  2593.         <div class="md-meta"><span class="md-kind">${esc(d.kind || "")}</span>
    2594. 

  2594.           ${d.fingerprint ? `<span class="md-ver" title="定义版本指纹">@${esc(d.fingerprint)}</span>` : ""}
    2595. 

  2595.           ${b.defIds.length > 1 ? `<span class="md-ver">${b.defIds.length} 个版本</span>` : ""}</div>
    2596. 

  2596.         ${d.summary ? `<div class="md-sum">${esc(clip(d.summary, 90))}</div>` : ""}
    2597. 

  2597.         <div class="md-cards">${kindHtml}${cards.map((c, i) => renderPCard(sk, i, c)).join("")
    2598. 

  2598.           || (kindHtml ? "" : `<div class="lane-empty">（无结构信息）</div>`)}</div>
    2599. 

  2599.       </div>
    2600. 

  2600.       <div class="mod-runs">
    2601. 

  2601.         <div class="mr-cap">运行流程 · 本轮 ${b.insts.length} 个实例</div>
    2602. 

  2602.         ${b.insts.length ? b.insts.map((n, i) => instLaneBox(n, i + 1)).join("")
    2603. 

  2603.           : `<div class="inst-lane off"><div class="lane-empty">（本轮没有这个模块的运行实例）</div></div>`}
    2604. 

  2604.       </div></div>`;
    2605. 

  2605.   };
    2606. 

  2606. 

  2607.   // 「下一轮」落点：控制循环是 plan ⇄ execute 的**环**，本轮跑完要回到下一轮 plan。
    2608. 

  2608.   // 那条回边不在本轮的模块图里（它落到的是下一轮），所以单摆一个节点放在**最右**、与本轮最终
    2609. 

  2609.   // 产出那个块同一水平带：从它的产出连过去，点击即翻到下一轮。
    2610. 

  2610.   const entries = round.entry_ids || [];
    2611. 

  2611.   const lastEntry = entries.length ? entries[entries.length - 1] : null;
    2612. 

  2612.   const nextIdx = SNAP.idx + 1, hasNext = SNAP.list && nextIdx < SNAP.list.length;
    2613. 

  2613.   TREE.lastEntryKey = t.lastEntry;
    2614. 

  2614.   const tail = (hasNext && lastEntry != null) ? `
    2615. 

  2615.     <div class="next-round" id="nextRoundNode" data-from="${lastEntry}"
    2616. 

  2616.          onclick="gotoSnap(${nextIdx})" title="翻到下一轮">
    2617. 

  2617.       <div class="nr-cap">↩ 回吐 · 进入下一轮</div>
    2618. 

  2618.       <div class="nr-t">第 ${nextIdx + 1} 轮 · ${esc(roundLabel(SNAP.list[nextIdx], nextIdx))}</div></div>` : "";
    2619. 

  2619.   world.innerHTML = `<svg class="board-edges" id="boardEdges"></svg>
    2620. 

  2620.     <svg class="board-edges hot" id="boardHot"></svg>
    2621. 

  2621.     <div class="board-labels" id="boardLabels"></div>` +
    2622. 

  2622.     order.map(blockHtml).join("") + tail;
    2623. 

  2623.   relayoutOnImages(world);
    2624. 

  2624.   requestAnimationFrame(() => layoutBoard());
    2625. 

  2625. }
    2626. 

  2626. 

  2627. // 摆位：块尺寸由内容决定，只能**先渲染再量**。量完分两个轴摆（边类型见 moduleTree.edgeKind），
    2628. 

  2628. // 并按「**竖直层**」拉齐高度：
    2629. 

  2629. //   · **入口链（entry：plan→handler 的交接）→ 水平**：后继块放在父块右缘、同一层；
    2630. 

  2630. //   · **引用/调用（call/ref：模块内部引用了别的模块）→ 往下一层 + 右缩进一个「模块定义」的宽度**：
    2631. 

  2631. //     被调块落到父块**下面一层**、左缘对齐父块运行流程起点，同一父的多个被调块依次向右排开；递归适用。
    2632. 

  2632. //   **竖直层 = 从根经过几条「往下」的引用边**（entry 不增层、call/ref 增一层）。同一层的所有块**拉齐到
    2633. 

  2633. //   该层最高块的高度**（顶、底都对齐，形成整齐的水平带），于是下一层从统一的 y 起，层级带一目了然。
    2634. 

  2634. //   **唯独最底层保持自适应高度**（它下面没有东西要对齐，拉齐只会平添空白）。
    2635. 

  2635. //   入口链后继放在**本子树右缘之后**（清开自己那串被调子树），避免压在一起；不设统一列宽，宽块只撑自己那带。
    2636. 

  2636. const BLK_GX = 56, BLK_GY = 56, BLK_PAD = 32;
    2637. 

  2637. function placeBlocks() {
    2638. 

  2638.   const world = $("#boardWorld");
    2639. 

  2639.   if (!world || !TREE) return { w: world ? world.scrollWidth : 0, h: world ? world.scrollHeight : 0 };
    2640. 

  2640.   const ek = TREE.edgeKind || new Map();
    2641. 

  2641.   // 先清掉上一次可能设过的强制高度，再量**自然**尺寸（否则量到的是被拉过的高度）。
    2642. 

  2642.   const boxes = {};
    2643. 

  2643.   TREE.order.forEach(k => {
    2644. 

  2644.     const el = document.getElementById("bn-" + domId(k));
    2645. 

  2645.     if (!el) return;
    2646. 

  2646.     el.style.height = "";
    2647. 

  2647.     const def = el.querySelector(".mod-def");
    2648. 

  2648.     boxes[k] = { el, w: el.offsetWidth, h: el.offsetHeight, defW: def ? def.offsetWidth : 40 };
    2649. 

  2649.   });
    2650. 

  2650.   // ① 竖直分层：root=0；entry 后继同层；call/ref 被调 +1 层。首次赋值为准（多父取第一个）。
    2651. 

  2651.   //    遍历顺序与下面的 walk 一致（refKids 先、entryKid 后），保证「多父块归到同一层与同一次摆放」。
    2652. 

  2652.   const row = {};
    2653. 

  2653.   const assignRow = (k, r) => {
    2654. 

  2654.     if (row[k] != null) return;
    2655. 

  2655.     row[k] = r;
    2656. 

  2656.     const kids = TREE.children.get(k) || [];
    2657. 

  2657.     kids.filter(c => ek.get(c) !== "entry").forEach(c => assignRow(c, r + 1));
    2658. 

  2658.     const e = kids.find(c => ek.get(c) === "entry"); if (e) assignRow(e, r);
    2659. 

  2659.   };
    2660. 

  2660.   TREE.roots.forEach(r => assignRow(r, 0));
    2661. 

  2661.   // ② 每层最高块 + 最底层号；③ 每层顶 y（层高累加）
    2662. 

  2662.   const rowMaxH = {}; let maxRow = 0;
    2663. 

  2663.   Object.keys(row).forEach(k => {
    2664. 

  2664.     const b = boxes[k]; if (!b) return;
    2665. 

  2665.     const r = row[k]; rowMaxH[r] = Math.max(rowMaxH[r] || 0, b.h); if (r > maxRow) maxRow = r;
    2666. 

  2666.   });
    2667. 

  2667.   const rowY = {}; let acc = BLK_PAD;
    2668. 

  2668.   for (let r = 0; r <= maxRow; r++) { rowY[r] = acc; acc += (rowMaxH[r] || 0) + BLK_GY; }
    2669. 

  2669.   const rowH = k => (row[k] < maxRow ? rowMaxH[row[k]] : boxes[k].h);   // 非最底层拉齐层高；最底层自适应
    2670. 

  2670.   let maxR = 0, maxB = 0;
    2671. 

  2671.   const done = new Set();
    2672. 

  2672.   const walk = (k, x) => {                         // 只算 x（横向摆放/避让）；y 与高度由所在层决定。返回子树右缘
    2673. 

  2673.     const s = boxes[k]; if (!s) return x;
    2674. 

  2674.     const y = rowY[row[k]], h = rowH(k);
    2675. 

  2675.     s.el.style.left = x + "px"; s.el.style.top = y + "px";
    2676. 

  2676.     s.el.style.height = (row[k] < maxRow) ? h + "px" : "";
    2677. 

  2677.     maxR = Math.max(maxR, x + s.w); maxB = Math.max(maxB, y + h);
    2678. 

  2678.     const kids = (TREE.children.get(k) || []).filter(c => !done.has(c));
    2679. 

  2679.     const refKids = kids.filter(c => ek.get(c) !== "entry");   // 引用/调用：往下一层 + 缩进
    2680. 

  2680.     const entryKid = kids.find(c => ek.get(c) === "entry");    // 入口链后继：同层水平（至多一个，链是线性的）
    2681. 

  2681.     let right = x + s.w;
    2682. 

  2682.     let cx = x + s.defW;                            // 被调块缩进一个 mod-def 宽度（往下一层，y 自动来自 rowY）
    2683. 

  2683.     refKids.forEach(c => { done.add(c); const r = walk(c, cx); cx = r + BLK_GX; right = Math.max(right, r); });
    2684. 

  2684.     if (entryKid) {                                 // 放在本子树右缘之后，清开被调子树避免重叠
    2685. 

  2685.       done.add(entryKid);
    2686. 

  2686.       const r = walk(entryKid, Math.max(x + s.w + BLK_GX, right + BLK_GX));
    2687. 

  2687.       right = Math.max(right, r);
    2688. 

  2688.     }
    2689. 

  2689.     return right;
    2690. 

  2690.   };
    2691. 

  2691.   let rx = BLK_PAD;                                 // 多个根同在第 0 层 → 依次向右排开
    2692. 

  2692.   TREE.roots.forEach(r => { if (done.has(r)) return; done.add(r); rx = walk(r, rx) + BLK_GX; });
    2693. 

  2693.   let ty = maxB + BLK_GY;                           // 兜底：没进树的块（既非 root 又没被引用到）接在最下面，自然高
    2694. 

  2694.   TREE.order.forEach(k => {
    2695. 

  2695.     if (done.has(k)) return;
    2696. 

  2696.     done.add(k);
    2697. 

  2697.     const s = boxes[k]; if (!s) return;
    2698. 

  2698.     s.el.style.height = "";
    2699. 

  2699.     s.el.style.left = BLK_PAD + "px"; s.el.style.top = ty + "px";
    2700. 

  2700.     maxR = Math.max(maxR, BLK_PAD + s.w); maxB = Math.max(maxB, ty + s.h);
    2701. 

  2701.     ty += s.h + BLK_GY;
    2702. 

  2702.   });
    2703. 

  2703.   const nr = document.getElementById("nextRoundNode");
    2704. 

  2704.   if (nr) {                                        // 最右、与本轮最终产出那块同一水平带
    2705. 

  2705.     const anchor = boxes[TREE.lastEntryKey];
    2706. 

  2706.     nr.style.left = (maxR + BLK_GX) + "px";
    2707. 

  2707.     nr.style.top = (anchor ? anchor.el.offsetTop : BLK_PAD) + "px";
    2708. 

  2708.     maxR = maxR + BLK_GX + nr.offsetWidth;
    2709. 

  2709.     maxB = Math.max(maxB, nr.offsetTop + nr.offsetHeight);
    2710. 

  2710.   }
    2711. 

  2711.   return { w: maxR + BLK_PAD, h: maxB + BLK_PAD };
    2712. 

  2712. }
    2713. 

  2713. 

  2714. function renderBoard() {
    2715. 

  2715.   const world = $("#boardWorld"); if (!world) return;
    2716. 

  2716.   SNAP.cards = {};
    2717. 

  2717.   const round = MODULES && MODULES.byIdx[SNAP.idx];
    2718. 

  2718.   if (round) { renderModuleBoard(round); return; }
    2719. 

  2719.   // 本轮没有模块行 → 没有可画的节点图，如实说明而不是空白一片。
    2720. 

  2720.   SNAP.graph = { nodes: [], edges: [] };
    2721. 

  2721.   TREE = null;
    2722. 

  2722.   world.innerHTML = `<svg class="board-edges" id="boardEdges"></svg>
    2723. 

  2723.     <svg class="board-edges hot" id="boardHot"></svg>
    2724. 

  2724.     <div class="board-labels" id="boardLabels"></div>
    2725. 

  2725.     <div class="board-none">本轮无节点记录</div>`;
    2726. 

  2726. }
    2727. 

  2727. 

  2728. // ── 画板布局：先按调用树给每个块定 x/y（块的尺寸由内容决定，必须先渲染再量），再画连线 ──
    2729. 

  2729. function layoutBoard() {
    2730. 

  2730.   const world = $("#boardWorld"); if (!world || !world.offsetParent) return;   // 隐藏时跳过
    2731. 

  2731.   world.style.width = ""; world.style.height = "";
    2732. 

  2732.   const s = placeBlocks();
    2733. 

  2733.   BOARD.worldW = Math.max(s.w, world.scrollWidth);
    2734. 

  2734.   BOARD.worldH = Math.max(s.h, world.scrollHeight);
    2735. 

  2735.   world.style.width = BOARD.worldW + "px"; world.style.height = BOARD.worldH + "px";
    2736. 

  2736.   drawLaneEdges();
    2737. 

  2737.   drawCallEdges();
    2738. 

  2738.   if (!BOARD.fitted) { BOARD.fitted = true; boardFit(); } else boardApply();
    2739. 

  2739. }
    2740. 

  2740. 

  2741. // 一条 SVG 路径的通用件：箭头**与线同色**（marker 不继承 stroke，只能一种颜色一个 marker）。
    2742. 

  2742. const mkId = c => "mk" + String(c).replace(/[^A-Za-z0-9]/g, "");
    2743. 

  2743. const svgPaths = paths =>
    2744. 

  2744.   `<defs>${[...new Set(paths.map(p => p.c))].map(c =>
    2745. 

  2745.     `<marker id="${mkId(c)}" markerWidth="7" markerHeight="7" refX="6.2" refY="2.4" orient="auto">
    2746. 

  2746.        <path d="M0,0 L6.4,2.4 L0,4.8 Z" fill="${c}"/></marker>`).join("")}</defs>` +
    2747. 

  2747.   paths.map(p => `<path d="${p.d}" fill="none" stroke="${p.c}" stroke-width="${p.w || 2}" opacity=".9"
    2748. 

  2748.     stroke-linecap="round"${
    2749. 

  2749.     p.dash ? ` stroke-dasharray="${p.dash}"` : ""} marker-end="url(#${mkId(p.c)})"/>`).join("");
    2750. 

  2750. 

  2751. // 模块块的色相 —— 连线与该模块的定义块、泳道边框同色（颜色是「这是谁」的编码，别用灰）
    2752. 

  2752. const hueOf = el => {
    2753. 

  2753.   const blk = el && el.closest && el.closest(".mod-block");
    2754. 

  2754.   const h = blk ? getComputedStyle(blk).getPropertyValue("--mc").trim() : "";
    2755. 

  2755.   return h ? `hsl(${h} 70% 62%)` : "var(--muted)";
    2756. 

  2756. };
    2757. 

  2757. 

  2758. // ① 链内连接：一条运行链上相邻两步（输入 → 节点 → … → 输出），实线曲线箭头。
    2759. 

  2759. // 画在**泳道自己的** SVG 上（泳道背景之上、卡片之下），所以线是清晰的而不是隔着几层半透明底色。
    2760. 

  2760. // DOM 里的次序就是链的次序（instLaneHtml 按 seq 排好），这里只量几何、不做推断。
    2761. 

  2761. //
    2762. 

  2762. // **并发一列 = 多个端点**：同 seq 的 N 步是并成一列画的（产生侧标的并发事实），连线就该是
    2763. 

  2763. // 一分为 N（扇出）、N 合一（汇聚）—— 一条线连到"那一列"上，等于把 N 步画成了一步。
    2764. 

  2764. function drawLaneEdges() {
    2765. 

  2765.   const z = (BOARD && BOARD.z) || 1;
    2766. 

  2766.   // 一步的**连接端点**：并发列取列里的每张卡（N 个端点），其余取这一列本身（1 个端点）。
    2767. 

  2767.   const portsOf = col => {
    2768. 

  2768.     const stack = col.querySelector(":scope > .pc-parallel-stack");
    2769. 

  2769.     return stack && stack.children.length ? [...stack.children] : [col];
    2770. 

  2770.   };
    2771. 

  2771.   document.querySelectorAll("#boardWorld .lane-steps").forEach(lane => {
    2772. 

  2772.     const svg = lane.querySelector(":scope > .lane-wires"); if (!svg) return;
    2773. 

  2773.     const items = [...lane.querySelectorAll(":scope > .lane-col")];
    2774. 

  2774.     const lb = lane.getBoundingClientRect();
    2775. 

  2775.     const w = lane.scrollWidth, h = lane.scrollHeight;
    2776. 

  2776.     svg.setAttribute("width", w); svg.setAttribute("height", h);
    2777. 

  2777.     svg.setAttribute("viewBox", `0 0 ${w} ${h}`);
    2778. 

  2778.     const R = el => {
    2779. 

  2779.       const r = el.getBoundingClientRect();
    2780. 

  2780.       return { l: (r.left - lb.left) / z, r: (r.right - lb.left) / z,
    2781. 

  2781.                cy: (r.top + r.height / 2 - lb.top) / z };
    2782. 

  2782.     };
    2783. 

  2783.     const color = hueOf(lane), paths = [];
    2784. 

  2784.     // 出入端都水平离开/进入，控制点按水平间距取、再按落差补一点 → 扇出扇入是对称的平顺弧
    2785. 

  2785.     const link = (a, b) => paths.push({ d: hcurve(a, b), c: color });
    2786. 

  2786.     for (let i = 0; i + 1 < items.length; i++) {
    2787. 

  2787.       const A = portsOf(items[i]).map(R), B = portsOf(items[i + 1]).map(R);
    2788. 

  2788.       if (!A.length || !B.length || B[0].l <= A[0].r) continue;
    2789. 

  2789.       if (A.length === 1 || B.length === 1) A.forEach(a => B.forEach(b => link(a, b)));  // 扇出 / 汇聚
    2790. 

  2790.       else A.slice(0, Math.min(A.length, B.length)).forEach((a, k) => link(a, B[k]));    // 等宽并发：逐路对接
    2791. 

  2791.     }
    2792. 

  2792.     svg.innerHTML = svgPaths(paths);
    2793. 

  2793.   });
    2794. 

  2794. }
    2795. 

  2795. 

  2796. // 世界坐标下的矩形（画板是 transform 缩放的，量出来的像素要除以 z）
    2797. 

  2797. function boardRect(el) {
    2798. 

  2798.   if (!el) return null;
    2799. 

  2799.   const wb = $("#boardWorld").getBoundingClientRect(), z = (BOARD && BOARD.z) || 1;
    2800. 

  2800.   const r = el.getBoundingClientRect();
    2801. 

  2801.   return { l: (r.left - wb.left) / z, t: (r.top - wb.top) / z, r: (r.right - wb.left) / z,
    2802. 

  2802.            b: (r.bottom - wb.top) / z, cx: (r.left + r.width / 2 - wb.left) / z,
    2803. 

  2803.            cy: (r.top + r.height / 2 - wb.top) / z };
    2804. 

  2804. }
    2805. 

  2805. const vcurve = (a, b) => {                        // 竖向：平滑三次贝塞尔，不出折角
    2806. 

  2806.   const dy = Math.max(40, Math.abs(b.cy - a.cy) * 0.45);
    2807. 

  2807.   return `M${a.cx},${a.cy} C${a.cx},${a.cy + dy} ${b.cx},${b.cy - dy} ${b.cx},${b.cy}`;
    2808. 

  2808. };
    2809. 

  2809. const hcurve = (a, b) => {                        // 横向：右缘 → 左缘，控制点纯水平 → 平顺的 S
    2810. 

  2810.   const c = Math.min(Math.max((b.l - a.r) * 0.55, 26), 150) + Math.abs(b.cy - a.cy) * 0.18;
    2811. 

  2811.   return `M${a.r},${a.cy} C${a.r + c},${a.cy} ${b.l - c},${b.cy} ${b.l},${b.cy}`;
    2812. 

  2812. };
    2813. 

  2813. 

  2814. // ── 绕开模块块的正交布线 ─────────────────────────────────────────────────────
    2815. 

  2815. // 跨模块那几条线要跨过整块画面，直着连必然从别的模块的**执行流程**上压过去 —— 线是次要信息，
    2816. 

  2816. // 不该盖住主要内容。摆位是我们自己算的（placeBlocks），**块与块之间的空隙在哪是已知的**，
    2817. 

  2817. // 所以不需要通用避障算法：把线走成「竖直逃逸 → 在空隙里横穿 → 竖直切入」，逐段与所有块做
    2818. 

  2818. // 矩形碰撞检测，取不撞的那条（多条都可行时取最短）。撞不出路时才退回原来的曲线。
    2819. 

  2819. const CORRIDOR = 26;                              // 逃逸/横穿时离块边的留白（块间距 56 的一半）
    2820. 

  2820. function boardObstacles() {
    2821. 

  2821.   return [...document.querySelectorAll("#boardWorld .mod-block, #boardWorld .next-round")]
    2822. 

  2822.     .map(el => ({ el, ...boardRect(el) })).filter(o => o.l != null);
    2823. 

  2823. }
    2824. 

  2824. // 线段（水平或竖直）与矩形是否相交（留 6px 余量，贴边不算撞）
    2825. 

  2825. function segHits(x1, y1, x2, y2, r) {
    2826. 

  2826.   const p = 6, L = r.l + p, R = r.r - p, T = r.t + p, B = r.b - p;
    2827. 

  2827.   if (R <= L || B <= T) return false;
    2828. 

  2828.   if (x1 === x2) return x1 > L && x1 < R && Math.max(y1, y2) > T && Math.min(y1, y2) < B;
    2829. 

  2829.   return y1 > T && y1 < B && Math.max(x1, x2) > L && Math.min(x1, x2) < R;
    2830. 

  2830. }
    2831. 

  2831. // 两个锚点之间的正交路线：竖直出 → 走廊横穿 → 竖直入。srcBlk/dstBlk 是两端所在的块（首尾段允许穿过它们）。
    2832. 

  2832. function orthoRoute(a, b, srcBlk, dstBlk, obs) {
    2833. 

  2833.   if (!a || !b || !srcBlk || !dstBlk) return null;
    2834. 

  2834.   const lanes = [srcBlk.b + CORRIDOR, srcBlk.t - CORRIDOR, dstBlk.b + CORRIDOR, dstBlk.t - CORRIDOR];
    2835. 

  2835.   let best = null;
    2836. 

  2836.   for (const ye of lanes) {
    2837. 

  2837.     const pts = [[a.cx, ye >= a.cy ? a.b : a.t], [a.cx, ye], [b.cx, ye], [b.cx, ye >= b.cy ? b.b : b.t]]
    2838. 

  2838.       .filter((p, i, arr) => i === 0 || p[0] !== arr[i - 1][0] || p[1] !== arr[i - 1][1]);
    2839. 

  2839.     let ok = pts.length > 1, len = 0;
    2840. 

  2840.     for (let i = 0; i + 1 < pts.length && ok; i++) {
    2841. 

  2841.       const [x1, y1] = pts[i], [x2, y2] = pts[i + 1];
    2842. 

  2842.       len += Math.abs(x2 - x1) + Math.abs(y2 - y1);
    2843. 

  2843.       for (const o of obs) {
    2844. 

  2844.         if (i === 0 && o.el === srcBlk.el) continue;             // 起点在源块里，第一段必然穿它
    2845. 

  2845.         if (i === pts.length - 2 && o.el === dstBlk.el) continue; // 末段切进目标块
    2846. 

  2846.         if (segHits(x1, y1, x2, y2, o)) { ok = false; break; }
    2847. 

  2847.       }
    2848. 

  2848.     }
    2849. 

  2849.     if (ok && (!best || len < best.len)) best = { pts, len };
    2850. 

  2850.   }
    2851. 

  2851.   return best ? best.pts : null;
    2852. 

  2852. }
    2853. 

  2853. // 折线 → 圆角路径（拐角用二次贝塞尔抹圆，读起来像走线而不是折断）
    2854. 

  2854. function polyPath(pts, r = 16) {
    2855. 

  2855.   let d = `M${pts[0][0]},${pts[0][1]}`;
    2856. 

  2856.   for (let i = 1; i + 1 < pts.length; i++) {
    2857. 

  2857.     const [px, py] = pts[i - 1], [cx, cy] = pts[i], [nx, ny] = pts[i + 1];
    2858. 

  2858.     const d1 = Math.hypot(cx - px, cy - py), d2 = Math.hypot(nx - cx, ny - cy);
    2859. 

  2859.     const rr = Math.min(r, d1 / 2, d2 / 2);
    2860. 

  2860.     d += ` L${cx + (px - cx) / d1 * rr},${cy + (py - cy) / d1 * rr}`
    2861. 

  2861.        + ` Q${cx},${cy} ${cx + (nx - cx) / d2 * rr},${cy + (ny - cy) / d2 * rr}`;
    2862. 

  2862.   }
    2863. 

  2863.   const e = pts[pts.length - 1];
    2864. 

  2864.   return d + ` L${e[0]},${e[1]}`;
    2865. 

  2865. }
    2866. 

  2866. 

  2867. // 画板上的连线分**两层**，看的是两件不同的事，出现时机也不同：
    2868. 

  2868. //
    2869. 

  2869. //   · 结构层（定义 → 定义）：「这个模块的结构里引用了哪个模块」。它**逐轮不变**，一直挂在画面上
    2870. 

  2870. //     只会把运行过程压在底下 —— 改成**悬停结构才出现**（停在「模块定义」那一列、或结构图里那个引用节点上）。
    2871. 

  2871. //   · 运行层（实例 → 实例）：本轮**实际**怎么走的 —— 调用点把输入递进被调实例、被调实例把输出递回
    2872. 

  2872. //     调用点。这是跨模块的**输入 / 输出**两条线，同样悬停才出现。
    2873. 

  2873. //
    2874. 

  2874. // 常驻画面的只有一条：本轮最终产出 →「下一轮」落点（控制循环的回边，不属于任何模块）。
    2875. 

  2875. let CALL_AGG = new Map();
    2876. 

  2876. function drawCallEdges() {
    2877. 

  2877.   const edges = $("#boardEdges"); if (!edges) return;
    2878. 

  2878.   edges.setAttribute("width", BOARD.worldW); edges.setAttribute("height", BOARD.worldH);
    2879. 

  2879.   edges.setAttribute("viewBox", `0 0 ${BOARD.worldW} ${BOARD.worldH}`);
    2880. 

  2880.   // 按 (调用方模块 → 被调模块) 归并计数：悬停结构时给「本轮 ×N」用。这是对 call 边的**计数**，不是推断。
    2881. 

  2881.   CALL_AGG = new Map();
    2882. 

  2882.   $("#boardWorld").querySelectorAll(".call-chip[data-callee]").forEach(chip => {
    2883. 

  2883.     const from = (chip.closest(".mod-block") || {}).dataset?.key || "";
    2884. 

  2884.     const to = chip.dataset.calleeKey || "";
    2885. 

  2885.     if (!from || !to) return;
    2886. 

  2886.     const k = from + " " + to;
    2887. 

  2887.     CALL_AGG.set(k, (CALL_AGG.get(k) || 0) + 1);
    2888. 

  2888.   });
    2889. 

  2889.   const paths = [];
    2890. 

  2890.   // 入口链的**交接**：前一段的产出 → 后一段的输入（plan 选定的 Task 递给 handler 执行）。
    2891. 

  2891.   // 它不是 call 边 —— 两者都是本轮的根级实例、彼此没有调用关系 —— 但它是这一轮的**主干**，
    2892. 

  2892.   // 所以常驻显示（实线，与"引用"那种虚线区分开）。端点取两条泳道真实的输出 / 输入锚点。
    2893. 

  2893.   const chain = (TREE && TREE.entryInsts) || [];
    2894. 

  2894.   for (let i = 1; i < chain.length; i++) {
    2895. 

  2895.     const o = boardRect(document.getElementById("ioout-" + chain[i - 1]));
    2896. 

  2896.     const n = boardRect(document.getElementById("ioin-" + chain[i]));
    2897. 

  2897.     if (!o || !n) continue;
    2898. 

  2898.     paths.push({ d: n.l >= o.r - 4 ? hcurve(o, n)
    2899. 

  2899.                                    : vcurve({ cx: o.cx, cy: o.b }, { cx: n.cx, cy: n.t }),
    2900. 

  2900.                  c: "var(--ok)", w: 2.6 });
    2901. 

  2901.   }
    2902. 

  2902.   const nr = document.getElementById("nextRoundNode");
    2903. 

  2903.   if (nr && nr.dataset.from) {
    2904. 

  2904.     // 这条要横跨大半张画面 → 同样走绕开所有块的正交路线（见 orthoRoute）
    2905. 

  2905.     const oEl = document.getElementById("ioout-" + nr.dataset.from);
    2906. 

  2906.     const o = boardRect(oEl), t = boardRect(nr), obs = boardObstacles();
    2907. 

  2907.     if (o && t) {
    2908. 

  2908.       const src = oEl && oEl.closest(".mod-block");
    2909. 

  2909.       const pts = orthoRoute(o, t, obs.find(x => x.el === src), obs.find(x => x.el === nr), obs);
    2910. 

  2910.       paths.push({ d: pts ? polyPath(pts) : vcurve({ cx: o.cx, cy: o.b }, { cx: t.cx, cy: t.t }),
    2911. 

  2911.                    c: "var(--accent)", w: 2, dash: "7 6" });
    2912. 

  2912.     }
    2913. 

  2913.   }
    2914. 

  2914.   edges.innerHTML = svgPaths(paths);
    2915. 

  2915.   drawHotEdges([], []);                 // 重画即清空悬停层
    2916. 

  2916. }
    2917. 

  2917. 

  2918. // 两个模块块之间的一条边：**方向**按几何选边（不预设生长方向）。入口链后继在右 → 右缘出、左缘进；
    2919. 

  2919. // 被调块在下 → 底缘出、顶缘进；回边（被调在左/在上）反过来。箭头永远指向被调方。
    2920. 

  2920. function blockLink(a, b) {
    2921. 

  2921.   if (b.l >= a.r - 4) return { d: hcurve({ r: a.r, cy: a.cy }, { l: b.l, cy: b.cy }),
    2922. 

  2922.                                mid: [(a.r + b.l) / 2, (a.cy + b.cy) / 2] };
    2923. 

  2923.   if (b.r <= a.l + 4) return { d: hcurve({ r: b.r, cy: b.cy }, { l: a.l, cy: a.cy }),
    2924. 

  2924.                                mid: [(b.r + a.l) / 2, (a.cy + b.cy) / 2] };
    2925. 

  2925.   if (b.t >= a.b) return { d: vcurve({ cx: a.cx, cy: a.b }, { cx: b.cx, cy: b.t }),
    2926. 

  2926.                            mid: [(a.cx + b.cx) / 2, (a.b + b.t) / 2] };
    2927. 

  2927.   return { d: vcurve({ cx: a.cx, cy: a.t }, { cx: b.cx, cy: b.b }),
    2928. 

  2928.            mid: [(a.cx + b.cx) / 2, (a.t + b.b) / 2] };
    2929. 

  2929. }
    2930. 

  2930. 

  2931. // 悬停层：`chips` = 运行层（实例间的输入 / 输出两条），`links` = 结构层（定义间的引用一条）。
    2932. 

  2932. // 画在最上层（盖住卡片也无妨 —— 同时只有一两条，要的就是"是哪一条"一目了然）。
    2933. 

  2933. function drawHotEdges(chips, links) {
    2934. 

  2934.   const hot = $("#boardHot"), labels = $("#boardLabels"); if (!hot) return;
    2935. 

  2935.   hot.setAttribute("width", BOARD.worldW); hot.setAttribute("height", BOARD.worldH);
    2936. 

  2936.   hot.setAttribute("viewBox", `0 0 ${BOARD.worldW} ${BOARD.worldH}`);
    2937. 

  2937.   document.querySelectorAll("#boardWorld .hot").forEach(x => x.classList.remove("hot"));
    2938. 

  2938.   const paths = [], tags = [];
    2939. 

  2939.   const obs = boardObstacles();
    2940. 

  2940.   const blkOf = el => { const b = el && el.closest(".mod-block");
    2941. 

  2941.                         return b ? obs.find(o => o.el === b) : null; };
    2942. 

  2942.   // 一条跨模块的线：优先走**绕开所有块**的正交路线（不从别人的执行流程上压过去），
    2943. 

  2943.   // 实在绕不出来（几何太挤）才退回原来的贝塞尔。
    2944. 

  2944.   const routed = (a, b, ea, eb, style) => {
    2945. 

  2945.     const pts = orthoRoute(a, b, blkOf(ea), blkOf(eb), obs);
    2946. 

  2946.     const mid = pts ? pts[Math.floor(pts.length / 2)]
    2947. 

  2947.                     : [(a.cx + b.cx) / 2, (a.cy + b.cy) / 2];
    2948. 

  2948.     paths.push({ ...style, d: pts ? polyPath(pts)
    2949. 

  2949.                                   : vcurve({ cx: a.cx, cy: a.cy }, { cx: b.cx, cy: b.cy }) });
    2950. 

  2950.     return mid;
    2951. 

  2951.   };
    2952. 

  2952.   // ① 运行层：调用点 —输入→ 被调实例；被调实例 —输出→ 回到调用点。两条方向相反的虚线。
    2953. 

  2953.   (chips || []).forEach(chip => {
    2954. 

  2954.     const id = chip.dataset.callee;
    2955. 

  2955.     const c = boardRect(chip), i = boardRect(document.getElementById("ioin-" + id)),
    2956. 

  2956.           o = boardRect(document.getElementById("ioout-" + id));
    2957. 

  2957.     const lane = document.getElementById("inst-" + id);
    2958. 

  2958.     const color = hueOf(lane);
    2959. 

  2959.     chip.classList.add("hot");
    2960. 

  2960.     if (lane) lane.classList.add("hot");
    2961. 

  2961.     if (!c) return;
    2962. 

  2962.     if (i) {
    2963. 

  2963.       const m = routed(c, i, chip, document.getElementById("ioin-" + id),
    2964. 

  2964.                        { c: color, w: 2.6, dash: "7 6" });
    2965. 

  2965.       tags.push({ x: m[0], y: m[1], t: "输入", cls: "in" });
    2966. 

  2966.     }
    2967. 

  2967.     if (o) {
    2968. 

  2968.       const m = routed(o, c, document.getElementById("ioout-" + id), chip,
    2969. 

  2969.                        { c: color, w: 2.6, dash: "2 6" });
    2970. 

  2970.       tags.push({ x: m[0], y: m[1], t: "输出", cls: "out" });
    2971. 

  2971.     }
    2972. 

  2972.   });
    2973. 

  2973.   // ② 结构层：定义 → 定义，两端的模块块一起点亮；标签给出本轮实际调了几次
    2974. 

  2974.   (links || []).forEach(e => {
    2975. 

  2975.     const fa = document.getElementById("bn-" + domId(e.from)), fb = document.getElementById("bn-" + domId(e.to));
    2976. 

  2976.     const a = boardRect((fa && fa.querySelector(":scope > .mod-def")) || fa);
    2977. 

  2977.     const b = boardRect((fb && fb.querySelector(":scope > .mod-def")) || fb);
    2978. 

  2978.     if (!a || !b) return;
    2979. 

  2979.     if (fa) fa.classList.add("hot");
    2980. 

  2980.     if (fb) fb.classList.add("hot");
    2981. 

  2981.     const L = blockLink(a, b);
    2982. 

  2982.     paths.push({ d: L.d, c: hueOf(fb), w: 2.2, dash: "7 6" });
    2983. 

  2983.     const n = CALL_AGG.get(e.from + " " + e.to);
    2984. 

  2984.     tags.push({ x: L.mid[0], y: L.mid[1], cls: "ref", t: n ? `引用 · 本轮 ×${n}` : "引用 · 本轮未调用" });
    2985. 

  2985.   });
    2986. 

  2986.   hot.innerHTML = paths.length ? svgPaths(paths) : "";
    2987. 

  2987.   if (labels) labels.innerHTML = tags.map(t =>
    2988. 

  2988.     `<div class="edge-tag ${t.cls}" style="left:${t.x}px;top:${t.y}px">${esc(t.t)}</div>`).join("");
    2989. 

  2989. }
    2990. 

  2990. 

  2991. // 悬停命中什么就画什么。
    2992. 

  2992. //   运行层：**只**停在 call 芯片（引用节点）上 → 亮它引用的那个具体实例；停在泳道本身不亮
    2993. 

  2993. //   （hover 实例自己没有"要指向谁"的语义，点亮反而是噪声）。
    2994. 

  2994. //   结构层：停在结构图里的引用节点上 → 那一条；停在整列「模块定义」上 → 它声明的全部引用。
    2995. 

  2995. function hotChipsFor(el) {
    2996. 

  2996.   const world = $("#boardWorld"); if (!world || !el || !el.closest) return [];
    2997. 

  2997.   const chip = el.closest(".call-chip[data-callee]");
    2998. 

  2998.   if (chip) return [chip];
    2999. 

  2999.   return [];
    3000. 

  3000. }
    3001. 

  3001. // 「输入」的两侧联动：结构里那张输入卡的**槽位**（.slot-row[data-slot]）与运行实例输入节点里的
    3002. 

  3002. // **输入块卡**（.io-in .pcard[data-slot]）共用同一个 key（结构侧来自 input_schema，实例侧来自
    3003. 

  3003. // blockCards 的 b.key）——所以不需要推断，按 data-slot 直接对上。作用域限在**同一个模块块**内：
    3004. 

  3004. // 结构与它这一轮的全部运行实例本就同块，于是「多个运行实例各自对应的那张输入」会一起亮。
    3005. 

  3005. function slotHotFor(el) {
    3006. 

  3006.   if (!el || !el.closest) return null;
    3007. 

  3007.   const hit = el.closest(".mod-def .slot-row[data-slot], .io-in .pcard[data-slot]");
    3008. 

  3008.   if (!hit || !hit.dataset.slot) return null;
    3009. 

  3009.   const blk = hit.closest(".mod-block");
    3010. 

  3010.   return blk ? { blk, key: hit.dataset.slot } : null;
    3011. 

  3011. }
    3012. 

  3012. function applySlotHot(hit) {
    3013. 

  3013.   document.querySelectorAll("#boardWorld .slot-hot").forEach(x => x.classList.remove("slot-hot"));
    3014. 

  3014.   if (!hit) return;
    3015. 

  3015.   const k = (window.CSS && CSS.escape) ? CSS.escape(hit.key) : hit.key.replace(/"/g, '\\"');
    3016. 

  3016.   hit.blk.querySelectorAll(
    3017. 

  3017.     `.mod-def .slot-row[data-slot="${k}"], .io-in .pcard[data-slot="${k}"]`
    3018. 

  3018.   ).forEach(x => x.classList.add("slot-hot"));
    3019. 

  3019. }
    3020. 

  3020. 

  3021. function hotLinksFor(el) {
    3022. 

  3022.   if (!el || !el.closest) return [];
    3023. 

  3023.   const from = (el.closest(".mod-block") || {}).dataset?.key || "";
    3024. 

  3024.   if (!from) return [];
    3025. 

  3025.   const node = el.closest(".fc-node[data-to]");
    3026. 

  3026.   if (node) return [{ from, to: node.dataset.to }];
    3027. 

  3027.   const def = el.closest(".mod-def");
    3028. 

  3028.   if (!def) return [];
    3029. 

  3029.   return [...new Set([...def.querySelectorAll(".fc-node[data-to]")].map(n => n.dataset.to))]
    3030. 

  3030.     .map(to => ({ from, to }));
    3031. 

  3031. }
    3032. 

  3032. 

  3033. // ── 平移 / 缩放 ──
    3034. 

  3034. function boardApply() { const w = $("#boardWorld"); if (w) w.style.transform = `translate(${BOARD.panX}px,${BOARD.panY}px) scale(${BOARD.z})`; }
    3035. 

  3035. function boardZoom(f, cx, cy) {
    3036. 

  3036.   const board = $("#board"); if (!board) return;
    3037. 

  3037.   const rect = board.getBoundingClientRect();
    3038. 

  3038.   if (cx == null) cx = rect.width / 2; if (cy == null) cy = rect.height / 2;
    3039. 

  3039.   const nz = Math.max(.15, Math.min(2.5, BOARD.z * f));
    3040. 

  3040.   BOARD.panX = cx - ((cx - BOARD.panX) / BOARD.z) * nz;
    3041. 

  3041.   BOARD.panY = cy - ((cy - BOARD.panY) / BOARD.z) * nz;
    3042. 

  3042.   BOARD.z = nz; boardApply();
    3043. 

  3043. }
    3044. 

  3044. function boardFit() {
    3045. 

  3045.   const board = $("#board"); if (!board || !BOARD.worldW) return;
    3046. 

  3046.   const rect = board.getBoundingClientRect();
    3047. 

  3047.   // 调用树是**横向生长**的：宽度由最长的那条链决定、高度由并列分支决定，两个方向都可能溢出，
    3048. 

  3048.   // 所以按**两个方向都能装下**取缩放（跟随内容，不预设哪个方向更长）。
    3049. 

  3049.   const z = Math.max(.12, Math.min((rect.width - 48) / BOARD.worldW,
    3050. 

  3050.                                    (rect.height - 48) / BOARD.worldH, 1.1));
    3051. 

  3051.   BOARD.z = z;
    3052. 

  3052.   BOARD.panX = Math.max(16, (rect.width - BOARD.worldW * z) / 2);
    3053. 

  3053.   BOARD.panY = Math.max(16, (rect.height - BOARD.worldH * z) / 2);
    3054. 

  3054.   boardApply();
    3055. 

  3055. }
    3056. 

  3056. // 全屏 / 沉浸式：把 #snapView 切成 inset:0 覆盖层，退出后恢复撑满宽度；进出后重新适应窗口。
    3057. 

  3057. function boardFullscreen() {
    3058. 

  3058.   const sv = $("#snapView"); if (!sv) return;
    3059. 

  3059.   const on = sv.classList.toggle("fs");
    3060. 

  3060.   document.body.style.overflow = on ? "hidden" : "";
    3061. 

  3061.   const btn = $("#btnFs");
    3062. 

  3062.   if (btn) { btn.textContent = on ? "✕" : "⛶"; btn.title = on ? "退出全屏（Esc）" : "全屏 / 沉浸"; }
    3063. 

  3063.   sv.style.width = "";                                   // 退出全屏回到详情列自然宽度（由 detailbody max-width 约束）
    3064. 

  3064.   requestAnimationFrame(() => { layoutBoard(); boardFit(); });
    3065. 

  3065. }
    3066. 

  3066. // 顶部「全屏」按钮：确保切到过程视图后进入全屏（全屏时该按钮被覆盖层遮住，故只需负责进入）。
    3067. 

  3067. function enterBoardFullscreen() {
    3068. 

  3068.   const sv = $("#snapView"); if (!sv) return;
    3069. 

  3069.   const tab = $("#tabProcess");
    3070. 

  3070.   if (tab && !tab.classList.contains("active")) switchView("process");
    3071. 

  3071.   if (!sv.classList.contains("fs")) boardFullscreen();
    3072. 

  3072. }
    3073. 

  3073. function attachBoardPan() {
    3074. 

  3074.   const board = $("#board"); if (!board) return;
    3075. 

  3075.   // 不用 setPointerCapture（会截走子卡片的 click）；改为：按下只记起点，移动超阈值才判定为拖拽平移，
    3076. 

  3076.   // 拖拽时才吞掉紧随的 click；纯点击（无位移）原样落到卡片上。move/up 挂 window，避免快速拖出画板丢事件。
    3077. 

  3077.   let active = false, dragging = false, sx = 0, sy = 0, ox = 0, oy = 0;
    3078. 

  3078.   const onMove = e => {
    3079. 

  3079.     if (!active) return;
    3080. 

  3080.     if (!dragging && Math.hypot(e.clientX - ox, e.clientY - oy) > 5) { dragging = true; board.classList.add("dragging"); }
    3081. 

  3081.     if (dragging) { BOARD.panX = e.clientX - sx; BOARD.panY = e.clientY - sy; boardApply(); }
    3082. 

  3082.   };
    3083. 

  3083.   const onUp = () => {
    3084. 

  3084.     if (!active) return;
    3085. 

  3085.     active = false;
    3086. 

  3086.     window.removeEventListener("pointermove", onMove);
    3087. 

  3087.     window.removeEventListener("pointerup", onUp);
    3088. 

  3088.     if (dragging) { board.classList.remove("dragging"); BOARD.suppressClick = true; setTimeout(() => BOARD.suppressClick = false, 0); }
    3089. 

  3089.     dragging = false;
    3090. 

  3090.   };
    3091. 

  3091.   board.addEventListener("pointerdown", e => {
    3092. 

  3092.     if (e.button !== 0) return;
    3093. 

  3093.     active = true; dragging = false; sx = e.clientX - BOARD.panX; sy = e.clientY - BOARD.panY; ox = e.clientX; oy = e.clientY;
    3094. 

  3094.     window.addEventListener("pointermove", onMove);
    3095. 

  3095.     window.addEventListener("pointerup", onUp);
    3096. 

  3096.   });
    3097. 

  3097.   // 跨模块引用的实例级连线**按需展开**：只在停到 call 芯片（引用节点）上时亮它引用的那个实例。
    3098. 

  3098.   // 事件委托挂在画板上（卡片是每轮重绘的，逐个绑定会随重绘丢失）。拖拽平移时不画。
    3099. 

  3099.   let hotKey = "";
    3100. 

  3100.   board.addEventListener("pointermove", e => {
    3101. 

  3101.     if (dragging) return;
    3102. 

  3102.     const chips = hotChipsFor(e.target), links = hotLinksFor(e.target);
    3103. 

  3103.     const slot = slotHotFor(e.target);
    3104. 

  3104.     const k = chips.map(c => c.dataset.callee).join(",") + "|"
    3105. 

  3105.             + links.map(l => l.from + ">" + l.to).join(",") + "|"
    3106. 

  3106.             + (slot ? (slot.blk.dataset.key || "") + "#" + slot.key : "");
    3107. 

  3107.     if (k === hotKey) return;
    3108. 

  3108.     hotKey = k;
    3109. 

  3109.     applySlotHot(slot);
    3110. 

  3110.     drawHotEdges(chips, links);
    3111. 

  3111.   });
    3112. 

  3112.   board.addEventListener("pointerleave", () => {
    3113. 

  3113.     hotKey = ""; applySlotHot(null); drawHotEdges([], []);
    3114. 

  3114.   });
    3115. 

  3115.   // macOS 触控板：双指滑动 = 平移（wheel, ctrlKey=false）；双指捏合 = 缩放（wheel, ctrlKey=true）。
    3116. 

  3116.   // 另支持 macOS ⌘（metaKey）+ 鼠标滚轮缩放，方便普通鼠标用户。
    3117. 

  3117.   board.addEventListener("wheel", e => {
    3118. 

  3118.     e.preventDefault();
    3119. 

  3119.     const rect = board.getBoundingClientRect();
    3120. 

  3120.     if (e.ctrlKey || e.metaKey) boardZoom(Math.exp(-e.deltaY * 0.01), e.clientX - rect.left, e.clientY - rect.top);
    3121. 

  3121.     else { BOARD.panX -= e.deltaX; BOARD.panY -= e.deltaY; boardApply(); }
    3122. 

  3122.   }, { passive: false });
    3123. 

  3123. }
    3124. 

  3124. 

  3125. // ── 运行流程的分列与语义（并发批次 / 分支 / 标题 / 成败 / 图片）**全部来自后端**（见 web/app.py
    3126. 

  3126. //    _inv_node / _ev_card：事件按 seq 归并，同 seq = 同一并发列）。前端只负责铺列与画列间连线。──────
    3127. 

  3127. 

  3128. // 组合模块的 ③ 与 ④ 是两列**逐框对应**的（第 i 个运行框 ↔ 第 i 个输出框）。CSS 做不到跨容器对齐，
    3129. 

  3129. // 这里量一遍取每行较高的那个，把两边撑齐——横着读过去就是同一个子模块的「跑了什么 → 产出什么」。
    3130. 

  3130. // 同一行的三段（② 结构格 / ③ 运行框 / ④ 输出框）**顶边对齐**。
    3131. 

  3131. //
    3132. 

  3132. // 两件事，分开对待：
    3133. 

  3133. //   · ③ 运行框 ↔ ④ 输出框：**顶边 + 底边都对齐**（等高）——这两段讲的是同一个子模块的
    3134. 

  3134. //     「跑了什么 → 产出什么」，等高才读得出「这一块是一件事」。
    3135. 

  3135. //   · ② 结构格：只对齐顶边、**不拉伸** —— 结构列可能嵌着整条子链而高出一大截，
    3136. 

  3136. //     拉伸只会把矮的那个撑成不传达任何信息的空色块；多出来的距离留成段底色与连接线。
    3137. 

  3137. //
    3138. 

  3138. // 不靠公式推导（padding / margin / row-gap / 表头高度差 / 嵌套层数……推错一处整列就跑偏），
    3139. 

  3139. // 改成**实测驱动的收敛循环**：量当前实际位置 → 补差 → 再量，直到残差 < 1px。
    3140. 

  3140. //
    3141. 

  3141. // ⚠️ 画板带 transform: scale(z)，`getBoundingClientRect()` 量到的是**缩放后**的值，
    3142. 

  3142. //    而写进 style 的 margin/height 是**未缩放**的布局 px —— 必须除以 z 换算回去。
    3143. 

  3143. 

  3144. 

  3145. // 槽位连线：左侧「输入」里的每个盒子 → 结构「输入拼接 · 槽位」里同名的那个槽 chip。
    3146. 

  3146. // 两端都带 data-slot（后端给的 key），所以是**按槽位一一配对**，不是按顺序凑。
    3147. 

  3147. // **逐层都连**：不只最外层那一对。配对规则是「同一层的输入盒 ↔ 同一层的槽位表」：
    3148. 

  3148. //   · 本模块：① 的自有输入列 ↔ ② 的自有结构卡（组合模块的 .gs-own，不含子结构链）
    3149. 

  3149. //   · 每个子段：同 data-rk 的 .sub-in ↔ .sub-struct —— **行内匹配**，不跨行也不跨层，
    3150. 

  3150. //     于是「execute 的验收标准」不会误连到父模块同名的槽上（这是嵌套后必须先解决的撞名问题）。
    3151. 

  3151. // 线色取该行的 --tone，与那一行的四段底色同源。
    3152. 

  3152. // 卡片渲染（流程卡 / 结构卡通用）：标题、摘要、成败、图片、分支都由后端给定，前端不判断。
    3153. 

  3153. function renderPCard(key, i, s) {
    3154. 

  3154.   const thumbs = (s.images && s.images.length)
    3155. 

  3155.     ? `<div class="pc-thumbs">${s.images.slice(0, 3).map(u =>
    3156. 

  3156.         `<img src="${esc(u)}" referrerpolicy="no-referrer" onclick="event.stopPropagation();openLB('${esc(u)}')" onerror="this.style.display='none'">`).join("")}</div>` : "";
    3157. 

  3157.   // plan 的 ops：涉及具体 Task 的一律用**任务卡**画（与任务台账同一种视觉），把「做了什么操作」**融进卡本身**
    3158. 

  3158.   // ——徽标位显示操作（＋新增 / ～修改 / ↻重做…）、左侧色条按操作着色。规划这一刻不显示执行态状态：
    3159. 

  3159.   // 那时这些 Task 还没跑（重做的更是即将重来），显示「待执行/未达标」是张冠李戴。
    3160. 

  3160.   const ops = (s.ops && s.ops.length)
    3161. 

  3161.     ? `<div class="ops-h">${esc(s.opsTitle || "任务更新")}</div>
    3162. 

  3162.        <div class="ops-list">${(putCards(key + ":ops" + i, s.ops), s.ops.map((o, k) => `
    3163. 

  3163.         <div class="op op-${esc(o.op)}">
    3164. 

  3164.           ${o.detail && o.op !== "update" ? `<div class="op-h"><span class="op-detail">${esc(o.detail)}</span></div>` : ""}
    3165. 

  3165.           ${(o.tasks || []).length ? `<div class="op-tasks">${o.tasks.map(t =>
    3166. 

  3166.             `<div class="${t._child ? "op-child" : ""}">${taskCard(t, {
    3167. 

  3167.                badge: { text: o.label, key: o.op },
    3168. 

  3168.                modified: o.op === "update" ? (o.changed || []) : null,
    3169. 

  3169.                click: o.op === "update" ? `openOpDiff('${key}:ops${i}',${k})` : "" })}</div>`).join("")}</div>` : ""}
    3170. 

  3170.         </div>`).join(""))}</div>` : "";
    3171. 

  3171.   // 本轮选定的下一步：它本身就是一个 Task —— 同样用任务卡画，徽标位标「▶ 下一步」
    3172. 

  3172.   const next = s.next
    3173. 

  3173.     ? `<div class="ops-h">${esc(s.nextTitle || "下一步执行")}</div>
    3174. 

  3174.        <div class="ops-list"><div class="op op-next">${
    3175. 

  3175.          taskCard(s.next, { badge: { text: "▶ 下一步", key: "next" } })}</div></div>` : "";
    3176. 

  3176.   // 结构化输出的可读字段：一行一项「标签 + 值」
    3177. 

  3177.   const fields = (s.fields && s.fields.length)
    3178. 

  3178.     ? `<div class="kv-list">${s.fields.filter(f => f && f.value).map(f =>
    3179. 

  3179.         `<div class="kv"><span class="kv-k">${esc(f.label)}</span><span class="kv-v">${esc(f.value)}</span></div>`
    3180. 

  3180.       ).join("")}</div>` : "";
    3181. 

  3181.   // 输出的构成：每件「缩略图 + 它是什么」成对呈现；主件加 ★ 与高亮描边
    3182. 

  3182.   const arts = (s.arts && s.arts.length)
    3183. 

  3183.     ? `<div class="out-arts">${s.arts.map(a => a.url
    3184. 

  3184.         ? `<div class="out-art ${a.primary ? "is-primary" : ""}" title="${esc(a.note || a.label)}">
    3185. 

  3185.              <img src="${esc(a.url)}" referrerpolicy="no-referrer"
    3186. 

  3186.                   onclick="event.stopPropagation();openLB('${esc(a.url)}')" onerror="this.style.display='none'">
    3187. 

  3187.              <div class="oa-tag">${a.primary ? "★ " : ""}${esc(a.label)}</div></div>`
    3188. 

  3188.         : `<div class="out-art no-img ${a.primary ? "is-primary" : ""}">
    3189. 

  3189.              <div class="oa-text">${esc(clip(a.text || a.note || "", 60))}</div>
    3190. 

  3190.              <div class="oa-tag">${a.primary ? "★ " : ""}${esc(a.label)}</div></div>`).join("")}</div>` : "";
    3191. 

  3191.   // 工具清单：一枚工具一枚 chip，**本次用过的高亮**（数据由后端 used_tools 给，不靠前端猜）
    3192. 

  3192.   const usedSet = new Set(s.usedTools || []);
    3193. 

  3193.   const toolChips = (s.tools && s.tools.length)
    3194. 

  3194.     ? `<div class="tool-chips">${s.tools.map(t =>
    3195. 

  3195.         `<span class="tool-chip${usedSet.has(t.name) ? " used" : ""}"${
    3196. 

  3196.           t.description ? ` title="${esc(clip(t.description, 200))}"` : ""}>${
    3197. 

  3197.           usedSet.has(t.name) ? `<span class="tc-dot"></span>` : ""}${esc(t.name)}</span>`).join("")}</div>` : "";
    3198. 

  3198.   const chips = (s.chips && s.chips.length)
    3199. 

  3199.     ? `<div class="pc-chips">${s.chips.slice(0, 12).map(c => `<span class="pc-chip">${esc(c)}</span>`).join("")}</div>` : "";
    3200. 

  3200.   // 槽位表：一行一个槽（左侧输入盒按 data-slot 连过来），竖排避免连线挤成一团
    3201. 

  3201.   const slots = (s.slots && s.slots.length)
    3202. 

  3202.     ? `<div class="slot-list">${s.slots.map(sl =>
    3203. 

  3203.         `<div class="slot-row slot-chip ${sl.filled ? "" : "off"}" data-slot="${esc(sl.key)}"${
    3204. 

  3204.           sl.hint ? ` title="${esc(sl.hint)}"` : ""}>
    3205. 

  3205.            <span class="dot"></span><span class="nm">${esc(sl.name)}</span>${
    3206. 

  3206.           sl.filled ? "" : `<span class="slot-empty">空</span>`}</div>`).join("")}</div>` : "";
    3207. 

  3207.   const tone = String(key).split(":")[0].replace(/^execute$/, "exec").replace(/^evaluate$/, "eval");
    3208. 

  3208.   const failed = s.ok === false;
    3209. 

  3209.   const mods = [failed ? "pc-failed" : "", s.muted ? "pc-empty" : "",
    3210. 

  3210.                 s.final ? "pc-final" : "", s.type === "llm" ? "pc-llm" : ""].filter(Boolean).join(" ");
    3211. 

  3211.   // 任务条目槽（待执行队列 / 已执行 Task / 容器）：直接用**任务卡**渲染 —— 与任务列表里的任务同一种画法
    3212. 

  3212.   if (s.tasks && s.tasks.length) {
    3213. 

  3213.     putCards(key + ":tasks" + i, s.tasks);       // 供点开看「这条进槽的原文」
    3214. 

  3214.     return `<div class="pcard pc-${tone} pc-taskslot"${s.key ? ` data-slot="${esc(s.key)}"` : ""}>
    3215. 

  3215.       <div class="pcard-h"><span class="pc-ic">◇</span><span class="pc-label">${esc(s.label || "")}</span>
    3216. 

  3216.         <span class="pc-tok">${s.tasks.length} 个</span></div>
    3217. 

  3217.       <div class="task-strip">${s.tasks.map((t, k) => taskCard(t, { showResult: false,
    3218. 

  3218.         click: `openSlotTask('${key}:tasks${i}',${k})` })).join("")}</div></div>`;
    3219. 

  3219.   }
    3220. 

  3220.   // ── 旁路标注：**模型推理节点**上挂「做了什么（标注）」，底部给依据来源入口 —— 决策发生在模型
    3221. 

  3221.   // 这一步，工具只是它的执行结果。标注块独立底色 + 🔖 抬头，与卡上那些**运行时事实**明确分开。
    3222. 

  3222.   const ann = annOf(s);
    3223. 

  3223.   const annBlock = ann ? `
    3224. 

  3224.     <div class="pc-ann">
    3225. 

  3225.       <div class="pc-ann-sum">${esc(ann.summary || "—")}</div>
    3226. 

  3226.     </div>` : "";
    3227. 

  3227.   // 一段「按形态渲染」的数据（工具的输出、模型 function calling 的入参都走这一个渲染器 ——
    3228. 

  3228.   // 同一种东西只有一种画法）：
    3229. 

  3229.   //   主文 = 这段在说什么（query / prompt / thought）→ 正常字号，最先读到
    3230. 

  3230.   //   标签 = 一批条目（工具名、字段名）→ 一枚枚 chip，不是一坨 JSON
    3231. 

  3231.   //   字段 = 剩下的少量标量 → 小字键值
    3232. 

  3232.   //   图   = 就在自己这一段里
    3233. 

  3233.   // 成败折成表头一枚徽标（不再单独占一行说 success True）。
    3234. 

  3234.   const ioSec = (d, cls, head) => {
    3235. 

  3235.     d = d || {};
    3236. 

  3236.     if (!d.lead && !(d.chips || []).length && !(d.rows || []).length && !(d.images || []).length) return "";
    3237. 

  3237.     return `<div class="pc-io-sec ${cls}">
    3238. 

  3238.       <div class="pc-io-h">${head}${
    3239. 

  3239.         d.ok === true ? `<span class="io-ok">✓</span>` : d.ok === false ? `<span class="io-bad">✗ 失败</span>` : ""}</div>
    3240. 

  3240.       ${d.lead ? `<div class="pc-io-lead">${esc(d.lead)}</div>` : ""}
    3241. 

  3241.       ${(d.chips || []).length ? `<div class="pc-io-chips">${
    3242. 

  3242.         d.chips.map(c => `<span class="io-chip">${esc(c)}</span>`).join("")}</div>` : ""}
    3243. 

  3243.       ${(d.rows || []).length ? `<div class="pc-io-kv">${d.rows.map(f =>
    3244. 

  3244.         `<div class="io-row"><span class="io-k">${esc(f.k)}</span><span class="io-v">${esc(f.v)}</span></div>`).join("")}</div>` : ""}
    3245. 

  3245.       ${(d.images || []).length ? `<div class="pc-thumbs io-thumbs">${d.images.slice(0, 6).map(u =>
    3246. 

  3246.         `<img src="${esc(u)}" referrerpolicy="no-referrer" onclick="event.stopPropagation();openLB('${esc(u)}')" onerror="this.style.display='none'">`).join("")}</div>` : ""}
    3247. 

  3247.     </div>`;
    3248. 

  3248.   };
    3249. 

  3249.   // 工具节点：**只有输出**（入参是上一步 function calling 的那份，在模型推理卡上；后端据 tool_call_id
    3250. 

  3250.   // 决定要不要给 input —— 没有上游那一步的工具节点仍自带入参）。图跟着自己那一段走。
    3251. 

  3251.   const ioBlock = s.io ? ["input", "output"].map(side =>
    3252. 

  3252.     s.io[side] ? ioSec(s.io[side], side === "input" ? "in" : "out",
    3253. 

  3253.                        `<span>${side === "input" ? "⇢ 输入" : "⇠ 输出"}</span>`) : "").join("") : "";
    3254. 

  3254.   // 模型推理节点：它发出的 function calling。**一次调用一块**（序号 + 工具名 + 该次入参），
    3255. 

  3255.   // 多个调用叠在一张卡里 —— 它们本就是同一轮请求里一起发出的（框架给同一个 batch），所以要看得出
    3256. 

  3256.   // 「这一步一共发起了几个、分别是谁、各自带什么参数」，而不是糊成一段。
    3257. 

  3257.   const argRow = d => {
    3258. 

  3258.     d = d || {};
    3259. 

  3259.     return [
    3260. 

  3260.       d.lead ? `<div class="pc-io-lead">${esc(d.lead)}</div>` : "",
    3261. 

  3261.       (d.rows || []).length ? `<div class="pc-io-kv">${d.rows.map(f =>
    3262. 

  3262.         `<div class="io-row"><span class="io-k">${esc(f.k)}</span><span class="io-v">${esc(f.v)}</span></div>`).join("")}</div>` : "",
    3263. 

  3263.       (d.chips || []).length ? `<div class="pc-io-chips">${
    3264. 

  3264.         d.chips.map(c => `<span class="io-chip">${esc(c)}</span>`).join("")}</div>` : "",
    3265. 

  3265.       (d.images || []).length ? `<div class="pc-thumbs pcl-thumbs">${d.images.slice(0, 8).map(u =>
    3266. 

  3266.         `<img src="${esc(u)}" referrerpolicy="no-referrer" onclick="event.stopPropagation();openLB('${esc(u)}')" onerror="this.style.display='none'">`).join("")}</div>` : "",
    3267. 

  3267.     ].join("") || `<div class="pcl-none">（无参数）</div>`;
    3268. 

  3268.   };
    3269. 

  3269.   const callBlock = (s.calls || []).length ? `<div class="pc-calls">
    3270. 

  3270.     <div class="pc-calls-h">⚡ 推理结果 · 调用以下${s.calls.length > 1 ? ` ${s.calls.length} 个` : ""}工具</div>
    3271. 

  3271.     ${s.calls.map((c, k) => `<div class="pc-call">
    3272. 

  3272.       <div class="pcl-h"><span class="pcl-i">${k + 1}</span><span class="pcl-n">${esc(c.name)}</span></div>
    3273. 

  3273.       <div class="pcl-args">${argRow(c.args)}</div></div>`).join("")}</div>` : "";
    3274. 

  3274.   // 底部依据入口：**按类型分组计数**（"2 个来源"看不出是哪种来源，也就看不出这步是被 prompt 训导
    3275. 

  3275.   // 驱动的、还是被本 Task 的输入/上一步产物驱动的 —— 而那才是读者真正想一眼看到的东西）。
    3276. 

  3276.   let basis = "";
    3277. 

  3277.   if (ann && (ann.basis || []).length) {
    3278. 

  3278.     const cnt = {};
    3279. 

  3279.     ann.basis.forEach(b => cnt[b.kind || ""] = (cnt[b.kind || ""] || 0) + 1);
    3280. 

  3280.     const tags = Object.keys(cnt).map(k =>
    3281. 

  3281.       `<span class="bs-tag"><span class="bs-ic">${srcKind(k).ic}</span>${esc(srcKind(k).name)}<b>${cnt[k]}</b></span>`).join("");
    3282. 

  3282.     basis = `<div class="pc-basis" onclick="event.stopPropagation();openBasis('${esc(annKeyOf(s))}','${esc(String(s.label || "").replace(/['\\]/g, ""))}')">
    3283. 

  3283.          <span class="bs-h">🔗 决策依据</span>${tags}<span class="bs-n">›</span></div>`;
    3284. 

  3284.   }
    3285. 

  3285.   return `<div class="pcard pc-${tone} ${mods}"${s.key ? ` data-slot="${esc(s.key)}"` : ""}${
    3286. 

  3286.     s.hint ? ` title="${esc(s.hint)}"` : ""} onclick="openCard('${key}',${i})">
    3287. 

  3287.     <div class="pcard-h"><span class="pc-ic">${s.icon || pcIcon(s)}</span><span class="pc-label">${esc(s.label || "")}</span>${
    3288. 

  3288.       failed ? `<span class="pc-fail-badge">✗ 失败</span>` : ""}${s.tokens ? `<span class="pc-tok">${esc(s.tokens)}</span>` : ""}</div>
    3289. 

  3289.     ${s.tool_call_id ? `<div class="pc-id id-chip" title="tool_call_id（点击复制）"
    3290. 

  3290.       onclick="event.stopPropagation();copyId('${esc(s.tool_call_id)}',this)">⧉ ${esc(String(s.tool_call_id).slice(-10))}</div>`
    3291. 

  3291.       : (s.type === "llm" && s.node_id ? `<div class="pc-id id-chip" title="节点 id（点击复制）· 重标这一步：--node ${esc(String(s.node_id))}"
    3292. 

  3292.       onclick="event.stopPropagation();copyId('${esc(String(s.node_id))}',this)">⧉ #${esc(String(s.node_id))}</div>` : "")}
    3293. 

  3293.     ${s.reasoning ? `<div class="pc-think"><div class="pc-think-h">💭 思考</div>
    3294. 

  3294.       <div class="pc-think-b">${esc(s.reasoning)}</div></div>` : ""}
    3295. 

  3295.     ${(s.summary && !ann) ? `<div class="pcard-sum">${esc(s.summary)}</div>` : ""}
    3296. 

  3296.     ${(s.type === "llm" && !s.summary && !s.reasoning && !callBlock)
    3297. 

  3297.       ? `<div class="pc-note">（这一轮模型没有文本输出）</div>` : ""}
    3298. 

  3298.     ${annBlock}
    3299. 

  3299.     ${ioBlock}
    3300. 

  3300.     ${callBlock}
    3301. 

  3301.     ${fields}
    3302. 

  3302.     ${ops}
    3303. 

  3303.     ${next}
    3304. 

  3304. 

  3305.     ${toolChips}
    3306. 

  3306.     ${slots}
    3307. 

  3307.     ${arts}
    3308. 

  3308.     ${arts ? "" : chips}
    3309. 

  3309.     ${(arts || s.io || callBlock) ? "" : thumbs}
    3310. 

  3310.     <div class="pc-more">查看详情 ›</div>
    3311. 

  3311.     ${basis}
    3312. 

  3312.   </div>`;
    3313. 

  3313. }
    3314. 

  3314. const pcIcon = s => ({ tool: "🔧", llm: "◆", input: "⇢" })[s.type] || "•";
    3315. 

  3315. 

  3316. // update 的任务卡 → 看**这一改到底改了什么**：逐字段「旧 → 新」（有旧值走字符级 diff，否则给新值全文）
    3317. 

  3317. function openOpDiff(key, i) {
    3318. 

  3318.   if (BOARD && BOARD.suppressClick) return;
    3319. 

  3319.   const o = (SNAP.cards[key] || [])[i]; if (!o) return;
    3320. 

  3320.   const t = (o.tasks || [])[0] || {};
    3321. 

  3321.   $("#drawerTag").textContent = "PLAN · 修改";
    3322. 

  3322.   $("#drawerTag").className = "drawer-tag plan";
    3323. 

  3323.   $("#drawerTitle").textContent = `Task #${t.step_id ?? ""} ${t.name || ""}`;
    3324. 

  3324.   const patch = o.patch || {}, changes = o.changes || {};
    3325. 

  3325.   const rows = Object.keys(patch).map(f => {
    3326. 

  3326.     const pair = changes[f];
    3327. 

  3327.     const v = typeof patch[f] === "string" ? patch[f] : JSON.stringify(patch[f], null, 2);
    3328. 

  3328.     return `<div class="field sec-cell"><div class="lbl">${esc(f)}</div>` +
    3329. 

  3329.       (Array.isArray(pair)
    3330. 

  3330.         ? `<div class="sec-meta">旧 → 新（字符级对比）</div><div class="chg-v">${
    3331. 

  3331.              renderInlineDiff(typeof pair[0] === "string" ? pair[0] : JSON.stringify(pair[0]),
    3332. 

  3332.                               typeof pair[1] === "string" ? pair[1] : JSON.stringify(pair[1]))}</div>`
    3333. 

  3333.         : `<div class="sec-meta">本轮设为（该字段无旧值快照，只给新值）</div><div class="pp-msg">${renderRich(v)}</div>`) +
    3334. 

  3334.       `</div>`;
    3335. 

  3335.   }).join("");
    3336. 

  3336.   $("#drawerBody").innerHTML = (rows || `<div class="val" style="color:var(--faint)">（本次未改字段）</div>`);
    3337. 

  3337.   openDrawer();
    3338. 

  3338. }
    3339. 

  3339. 

  3340. // 槽里的任务卡 → 看**这条 Task 在该槽里逐字进 prompt 的那段**（所见即模型所见）
    3341. 

  3341. function openSlotTask(key, i) {
    3342. 

  3342.   if (BOARD && BOARD.suppressClick) return;
    3343. 

  3343.   const t = (SNAP.cards[key] || [])[i]; if (!t) return;
    3344. 

  3344.   $("#drawerTag").textContent = "输入 · 进槽数据";
    3345. 

  3345.   $("#drawerTag").className = "drawer-tag plan";
    3346. 

  3346.   $("#drawerTitle").textContent = t.name || `任务 #${t.step_id}`;
    3347. 

  3347.   const raw = Object.fromEntries(Object.entries(t).filter(([k]) => k !== "prompt_text"));
    3348. 

  3348.   $("#drawerBody").innerHTML =
    3349. 

  3349.     (t.prompt_text
    3350. 

  3350.       ? `<div class="field"><div class="lbl">进入 prompt 的原文（这一槽里属于本 Task 的那段）</div>
    3351. 

  3351.            <div class="pp-msg">${renderRich(t.prompt_text)}</div></div>`
    3352. 

  3352.       : `<div class="field"><div class="val" style="color:var(--faint)">这一槽未按 Task 逐条渲染（旧 run 无此字段）</div></div>`) +
    3353. 

  3353.     `<div class="field"><div class="lbl">结构化条目 · item</div><div class="pp-msg">${
    3354. 

  3354.       renderRich(JSON.stringify(raw, null, 2))}</div></div>`;
    3355. 

  3355.   openDrawer();
    3356. 

  3356. }
    3357. 

  3357. 

  3358. // 卡片点击 → 抽屉看完整详情（后端 detail：工具=args/result；模型=text/calls/payload；其它=text）
    3359. 

  3359. function openCard(key, i) {
    3360. 

  3360.   if (BOARD && BOARD.suppressClick) return;                 // 刚拖拽平移过 → 不误触
    3361. 

  3361.   const s = (SNAP.cards[key] || [])[i]; if (!s) return;
    3362. 

  3362.   const [nodeId, seg] = String(key).split(":");
    3363. 

  3363.   $("#drawerTag").textContent = `${nodeId}${seg ? " · " + ({ in: "输入", out: "输出", struct: "结构", flow: "运行流程" }[seg] || seg) : ""}`;
    3364. 

  3364.   $("#drawerTag").className = "drawer-tag " + (nodeId === "plan" ? "plan" : "execute");
    3365. 

  3365.   $("#drawerTitle").textContent = s.label || "详情";
    3366. 

  3366.   SNAP.openNodeSid = null;
    3367. 

  3367.   $("#drawerBody").innerHTML = renderCardDetail(s);
    3368. 

  3368.   openDrawer();
    3369. 

  3369.   // 工具详情：定义按需取（代码里的静态信息，不进运行记录），到手后就地重画这一屏
    3370. 

  3370.   if ((s.detail || {}).tools && !TOOLDEF) {
    3371. 

  3371.     loadToolDefs(SNAP.agent).then(() => {
    3372. 

  3372.       if ($("#drawer").classList.contains("open")) $("#drawerBody").innerHTML = renderCardDetail(s);
    3373. 

  3373.     });
    3374. 

  3374.   }
    3375. 

  3375. }
    3376. 

  3376. // Python 字符串转义（\n \t \xNN \uNNNN \' \" 等）→ 真实字符，供转 JSON 前还原。
    3377. 

  3377. function unescapePyStr(s) {
    3378. 

  3378.   return s.replace(/\\(x[0-9A-Fa-f]{2}|u[0-9A-Fa-f]{4}|.)/g, (m, e) => {
    3379. 

  3379.     if (e[0] === "x" || e[0] === "u") return String.fromCharCode(parseInt(e.slice(1), 16));
    3380. 

  3380.     return ({ n: "\n", t: "\t", r: "\r", b: "\b", f: "\f", "0": "\0", "\\": "\\", "'": "'", '"': '"' })[e] ?? e;
    3381. 

  3381.   });
    3382. 

  3382. }
    3383. 

  3383. // Python 字面量 repr（单引号/混合引号字符串、True/False/None）→ JSON 文本：逐字符扫描，字符串区整体透传
    3384. 

  3384. // （正确处理内嵌撇号与转义），非字符串区把 True/False/None 转 true/false/null；遇未知裸标识符 → 返回 null 放弃。
    3385. 

  3385. function pyReprToJson(src) {
    3386. 

  3386.   const s = String(src); let out = "", i = 0;
    3387. 

  3387.   while (i < s.length) {
    3388. 

  3388.     const c = s[i];
    3389. 

  3389.     if (c === "'" || c === '"') {
    3390. 

  3390.       i++; let str = "";
    3391. 

  3391.       while (i < s.length && s[i] !== c) { if (s[i] === "\\") { str += s[i] + (s[i + 1] || ""); i += 2; } else { str += s[i]; i++; } }
    3392. 

  3392.       i++; out += JSON.stringify(unescapePyStr(str));
    3393. 

  3393.     } else if (/[A-Za-z_]/.test(c)) {
    3394. 

  3394.       let w = ""; while (i < s.length && /[A-Za-z0-9_]/.test(s[i])) { w += s[i]; i++; }
    3395. 

  3395.       if (w === "True") out += "true"; else if (w === "False") out += "false"; else if (w === "None") out += "null"; else return null;
    3396. 

  3396.     } else { out += c; i++; }
    3397. 

  3397.   }
    3398. 

  3398.   return out;
    3399. 

  3399. }
    3400. 

  3400. // 富文本渲染：对象/JSON 串（含 Python dict repr）→ 美化 JSON（图片以缩略图条附于末尾）；否则按 markdown
    3401. 

  3401. // 渲染（图片已就地内联，不再附条）。返回可放进 .pp-msg 的内容。
    3402. 

  3402. function renderRich(raw) {
    3403. 

  3403.   let content, isMd = false;
    3404. 

  3404.   if (raw == null || (typeof raw !== "object" && !String(raw).trim())) content = `<div class="pp-content"></div>`;
    3405. 

  3405.   else if (typeof raw === "object") content = `<div class="pp-content pp-json">${esc(JSON.stringify(raw, null, 2))}</div>`;
    3406. 

  3406.   else {
    3407. 

  3407.     const s = String(raw).trim();
    3408. 

  3408.     let json;
    3409. 

  3409.     if (/^[[{]/.test(s)) {
    3410. 

  3410.       try { json = JSON.stringify(JSON.parse(s), null, 2); }
    3411. 

  3411.       catch (e) {                                        // 非严格 JSON → 试作 Python repr 归一后再解析
    3412. 

  3412.         const jt = pyReprToJson(s);
    3413. 

  3413.         if (jt != null) { try { json = JSON.stringify(JSON.parse(jt), null, 2); } catch (e2) {} }
    3414. 

  3414.       }
    3415. 

  3415.     }
    3416. 

  3416.     if (json != null) content = `<div class="pp-content pp-json">${esc(json)}</div>`;
    3417. 

  3417.     else { content = `<div class="pp-md">${renderMarkdown(s)}</div>`; isMd = true; }
    3418. 

  3418.   }
    3419. 

  3419.   return content;   // 图片不在这里捞：卡片/详情的图由后端 images 字段给定（markdown 里的图仍就地内联）
    3420. 

  3420. }
    3421. 

  3421. // 轻量 markdown → HTML（先转义再套标签，防注入）：标题 / 粗斜体 / 行内码 / 代码块 / 列表 / 引用 /
    3422. 

  3422. // **表格（GFM）** / 链接 / 段落。表格必须支持——plan 的 system prompt 里「缺陷性质 → 处方」这类对照
    3423. 

  3423. // 全是表格，不渲染就是一屏竖排的管道符，等于没法读。
    3424. 

  3424. function renderMarkdown(src) {
    3425. 

  3425.   const lines = String(src).replace(/\r\n?/g, "\n").split("\n");
    3426. 

  3426.   const inline = t => esc(t)
    3427. 

  3427.     .replace(/`([^`]+)`/g, "<code>$1</code>")
    3428. 

  3428.     .replace(/\*\*([^*]+)\*\*/g, "<strong>$1</strong>")
    3429. 

  3429.     .replace(/(^|[^*])\*([^*]+)\*(?!\*)/g, "$1<em>$2</em>")
    3430. 

  3430.     .replace(/\[([^\]]+)\]\((https?:\/\/[^)]+)\)/g, '<a href="$2" target="_blank" rel="noreferrer">$1</a>')
    3431. 

  3431.     // 裸 URL 就地渲染：图片→内联 <img>（结合上下文文字直接看图），其它→可点链接。
    3432. 

  3432.     // 负向后瞻跳过已在标签属性里的 URL（href="…" / src="…" / 紧跟 > 的 <code>URL</code>）。
    3433. 

  3433.     .replace(/(?<![="(>])(https?:\/\/[^\s<>"'`)\]}\\、，。；：）】》」｜]+)/g, (m, url) => {
    3434. 

  3434.       // 去尾：标点 + URL 编码括号（%22=" %5D=] %29=) %7D=}）+ 被转义的实体（&quot; &gt; &lt; &amp;）——
    3435. 

  3435.       // inline 跑在已转义文本上，紧随 URL 的闭合引号会变成 &quot; 被吞进匹配，需一并剥掉，否则 src 带尾巴致 404。
    3436. 

  3436.       const u = url.replace(/(?:[.,;)\]}]|%22|%5[Dd]|%29|%7[Dd]|&quot;|&gt;|&lt;|&amp;)+$/i, "");
    3437. 

  3437.       return isImgUrl(u)
    3438. 

  3438.         ? `<img class="md-img" src="${u}" referrerpolicy="no-referrer" loading="lazy" onclick="openLB('${u}')" onerror="imgFail(this)">`
    3439. 

  3439.         : `<a href="${u}" target="_blank" rel="noreferrer">${u}</a>`;
    3440. 

  3440.     });
    3441. 

  3441.   const isList = l => /^\s*([-*+]|\d+\.)\s+/.test(l), isH = l => /^#{1,6}\s+/.test(l),
    3442. 

  3442.         isQ = l => /^\s*>\s?/.test(l), isFence = l => /^```/.test(l);
    3443. 

  3443.   // 表格：一行以 | 起（或含 |）+ 下一行是 |---|---| 分隔行 —— 两条同时满足才当表格，
    3444. 

  3444.   // 免得把正文里偶然出现的竖线误判。单元格切分要**忽略被 \ 转义的 |**。
    3445. 

  3445.   const isSep = l => /^\s*\|?\s*:?-{2,}:?\s*(\|\s*:?-{2,}:?\s*)+\|?\s*$/.test(l);
    3446. 

  3446.   const isRow = l => /\|/.test(l) && !isFence(l);
    3447. 

  3447.   const cells = l => l.replace(/^\s*\|/, "").replace(/\|\s*$/, "")
    3448. 

  3448.                       .split(/(?<!\\)\|/).map(c => c.trim().replace(/\\\|/g, "|"));
    3449. 

  3449.   let html = "", i = 0;
    3450. 

  3450.   while (i < lines.length) {
    3451. 

  3451.     const line = lines[i];
    3452. 

  3452.     if (isFence(line)) {
    3453. 

  3453.       i++; const code = [];
    3454. 

  3454.       while (i < lines.length && !isFence(lines[i])) { code.push(lines[i]); i++; }
    3455. 

  3455.       i++; html += `<pre class="rich-code">${esc(code.join("\n"))}</pre>`; continue;
    3456. 

  3456.     }
    3457. 

  3457.     const hm = /^(#{1,6})\s+(.*)$/.exec(line);
    3458. 

  3458.     if (hm) { const lv = Math.min(6, hm[1].length); html += `<div class="rich-h rich-h${lv}">${inline(hm[2])}</div>`; i++; continue; }
    3459. 

  3459.     if (isRow(line) && i + 1 < lines.length && isSep(lines[i + 1])) {
    3460. 

  3460.       const head = cells(line);
    3461. 

  3461.       const align = cells(lines[i + 1]).map(c =>
    3462. 

  3462.         /^:-+:$/.test(c) ? "center" : /-+:$/.test(c) ? "right" : "left");
    3463. 

  3463.       i += 2;
    3464. 

  3464.       const rows = [];
    3465. 

  3465.       while (i < lines.length && isRow(lines[i]) && !/^\s*$/.test(lines[i])) { rows.push(cells(lines[i])); i++; }
    3466. 

  3466.       const ta = k => ` style="text-align:${align[k] || "left"}"`;
    3467. 

  3467.       html += `<div class="rich-table-wrap"><table class="rich-table">
    3468. 

  3468.         <thead><tr>${head.map((c, k) => `<th${ta(k)}>${inline(c)}</th>`).join("")}</tr></thead>
    3469. 

  3469.         <tbody>${rows.map(r => `<tr>${head.map((_, k) =>
    3470. 

  3470.           `<td${ta(k)}>${inline(r[k] || "")}</td>`).join("")}</tr>`).join("")}</tbody></table></div>`;
    3471. 

  3471.       continue;
    3472. 

  3472.     }
    3473. 

  3473.     if (isList(line)) {
    3474. 

  3474.       const ordered = /^\s*\d+\.\s+/.test(line); const items = [];
    3475. 

  3475.       while (i < lines.length && isList(lines[i])) { items.push(inline(lines[i].replace(/^\s*([-*+]|\d+\.)\s+/, ""))); i++; }
    3476. 

  3476.       html += `<${ordered ? "ol" : "ul"} class="rich-list">${items.map(x => `<li>${x}</li>`).join("")}</${ordered ? "ol" : "ul"}>`; continue;
    3477. 

  3477.     }
    3478. 

  3478.     if (isQ(line)) {
    3479. 

  3479.       const q = [];
    3480. 

  3480.       while (i < lines.length && isQ(lines[i])) { q.push(inline(lines[i].replace(/^\s*>\s?/, ""))); i++; }
    3481. 

  3481.       html += `<blockquote class="rich-quote">${q.join("<br>")}</blockquote>`; continue;
    3482. 

  3482.     }
    3483. 

  3483.     if (/^\s*$/.test(line)) { i++; continue; }
    3484. 

  3484.     const para = [];
    3485. 

  3485.     while (i < lines.length && !/^\s*$/.test(lines[i]) && !isFence(lines[i]) && !isH(lines[i])
    3486. 

  3486.            && !isList(lines[i]) && !isQ(lines[i])
    3487. 

  3487.            && !(isRow(lines[i]) && i + 1 < lines.length && isSep(lines[i + 1]))) {   // 表头行留给表格分支
    3488. 

  3488.       para.push(inline(lines[i])); i++;
    3489. 

  3489.     }
    3490. 

  3490.     html += `<p class="rich-p">${para.join("<br>")}</p>`;
    3491. 

  3491.   }
    3492. 

  3492.   return html;
    3493. 

  3493. }
    3494. 

  3494. // 工具调用输入：若 args 是对象，逐字段渲染（字段名作小标题、字符串值走 markdown 富文本），
    3495. 

  3495. // 让 think_and_plan 这类长文本参数不再是「转义 \n + 未渲染 markdown」的一坨 JSON；非对象则原样富文本。
    3496. 

  3496. // 一坨数据 → 抽屉里的若干块：**对象逐键一块**（键当小标题，值按 markdown / JSON 渲染），
    3497. 

  3497. // 其余整块铺开。这样长文本字段（think_and_plan 的 thought/plan/action）是分开可读的，
    3498. 

  3498. // 而不是塞进一个 JSON 串里。
    3499. 

  3499. // 一段数据的**规模**：几个字段 / 几项 / 多少字。抬头右侧标一下，读者不点开也知道这块有多大。
    3500. 

  3500. const dataMeta = v => {
    3501. 

  3501.   if (v == null) return "";
    3502. 

  3502.   if (Array.isArray(v)) return `${v.length} 项`;
    3503. 

  3503.   if (typeof v === "object") return `${Object.keys(v).length} 个字段`;
    3504. 

  3504.   const n = String(v).length;
    3505. 

  3505.   return n > 40 ? `${n} 字` : "";
    3506. 

  3506. };
    3507. 

  3507. function renderArgs(raw) {
    3508. 

  3508.   let obj = null;
    3509. 

  3509.   if (raw && typeof raw === "object" && !Array.isArray(raw)) obj = raw;
    3510. 

  3510.   else if (typeof raw === "string" && /^\s*\{/.test(raw)) {
    3511. 

  3511.     try { const p = JSON.parse(raw); if (p && typeof p === "object" && !Array.isArray(p)) obj = p; } catch (e) {}
    3512. 

  3512.   }
    3513. 

  3513.   if (!obj || !Object.keys(obj).length) return `<div class="pp-msg">${renderRich(raw)}</div>`;
    3514. 

  3514.   return Object.entries(obj).map(([k, v]) =>
    3515. 

  3515.     `<div class="pp-msg"><div class="pp-role"><span class="pr-k">${esc(k)}</span>${
    3516. 

  3516.       dataMeta(v) ? `<span class="pr-meta">${esc(dataMeta(v))}</span>` : ""}</div>${renderRich(v)}</div>`).join("");
    3517. 

  3517. }
    3518. 

  3518. 

  3519. // 「输入」/「输出」一区：**一区一块**——左侧色轨 + 同色抬头（入青、出绿，与卡面上那两段同一套配色），
    3520. 

  3520. // 于是「哪些是吃进去的、哪些是吐出来的」是靠颜色与分块一眼分开的，而不是靠读两个小字标签。
    3521. 

  3521. // 空就不画（不摆一个写着「（无）」的空壳）。
    3522. 

  3522. function ioField(label, v, side) {
    3523. 

  3523.   const empty = v == null || v === "" ||
    3524. 

  3524.     (typeof v === "object" && !Array.isArray(v) && !Object.keys(v).length) ||
    3525. 

  3525.     (Array.isArray(v) && !v.length);
    3526. 

  3526.   if (empty) return "";
    3527. 

  3527.   return `<div class="io-block ${side}">
    3528. 

  3528.     <div class="iob-h"><span class="iob-ic">${side === "in" ? "⇢" : "⇠"}</span>
    3529. 

  3529.       <span class="iob-t">${esc(label)}</span>
    3530. 

  3530.       <span class="iob-meta">${esc(dataMeta(v))}</span></div>
    3531. 

  3531.     <div class="iob-b">${renderArgs(v)}</div></div>`;
    3532. 

  3532. }
    3533. 

  3533. // 工具项展开/折叠（详情里默认全折叠：一屏先看清"有哪些工具、哪些用过"，要细节再点开）
    3534. 

  3534. function toggleTool(i) {
    3535. 

  3535.   const el = document.getElementById("tool-item-" + i);
    3536. 

  3536.   if (el) el.classList.toggle("open");
    3537. 

  3537. }
    3538. 

  3538. function renderCardDetail(s) {
    3539. 

  3539.   const d = s.detail || {};
    3540. 

  3540.   let h = "";
    3541. 

  3541.   if (d.tools) {           // 工具清单详情：**默认全部折叠**，点标题展开「说明 + 参数表」
    3542. 

  3542.     const used = new Set(d.usedTools || []);
    3543. 

  3543.     const defs = TOOLDEF || {};
    3544. 

  3544.     return d.tools.map((x, i) => {
    3545. 

  3545.       const t = { ...(defs[x.name] || {}), name: x.name };
    3546. 

  3546.       const np = (t.params || []).length;
    3547. 

  3547.       return `<div class="field sec-cell tool-item" id="tool-item-${i}">
    3548. 

  3548.       <div class="lbl tool-hd" onclick="toggleTool(${i})">
    3549. 

  3549.         <span class="tool-arrow">▸</span>${esc(t.name)}${used.has(t.name)
    3550. 

  3550.           ? `<span class="tool-used-tag">本次用过</span>` : ""}
    3551. 

  3551.         <span class="tool-meta">${t.description ? `${t.description.length} 字说明` : "无说明"}${
    3552. 

  3552.           np ? `　·　${np} 个参数` : ""}</span></div>
    3553. 

  3553.       <div class="tool-bd">
    3554. 

  3554.         ${t.description ? `<div class="pp-msg">${renderRich(t.description)}</div>`
    3555. 

  3555.                         : `<div class="val" style="color:var(--faint)">（未解析到该工具的定义：当前代码里已无同名工具？）</div>`}
    3556. 

  3556.         ${np ? `<div class="tool-params">${t.params.map(p =>
    3557. 

  3557.           `<div class="tp-row"><span class="tp-n">${esc(p.name)}</span>
    3558. 

  3558.             <span class="tp-t">${esc(p.type || "—")}</span>
    3559. 

  3559.             <span class="tp-r ${p.required ? "req" : ""}">${p.required ? "必填" : "可选"}</span>
    3560. 

  3560.             <span class="tp-d">${esc(p.desc || "")}</span></div>`).join("")}</div>` : ""}
    3561. 

  3561.       </div>
    3562. 

  3562.     </div>`; }).join("");
    3563. 

  3563.   }
    3564. 

  3564.   if (d.sections) {          // 逐段分块：每段标题 + 来源说明 + **完整**内容 + 该段的图
    3565. 

  3565.     h = d.sections.map(sec => `<div class="field sec-cell">
    3566. 

  3566.       <div class="lbl">${esc(sec.label)}</div>
    3567. 

  3567.       ${sec.meta ? `<div class="sec-meta">${esc(sec.meta)}</div>` : ""}
    3568. 

  3568.       ${sec.text ? `<div class="pp-msg">${renderRich(sec.text)}</div>` : ""}
    3569. 

  3569.       ${(sec.images || []).length ? `<div class="imgs" style="margin-top:8px">${sec.images.map(u =>
    3570. 

  3570.         `<img class="thumb" src="${esc(u)}" referrerpolicy="no-referrer" onclick="openLB('${esc(u)}')" onerror="imgFail(this)">`).join("")}</div>` : ""}
    3571. 

  3571.       ${(!sec.text && !(sec.images || []).length) ? `<div class="val" style="color:var(--faint)">（空）</div>` : ""}
    3572. 

  3572.     </div>`).join("");
    3573. 

  3573.     return h;
    3574. 

  3574.   }
    3575. 

  3575.   // ── 运行节点的详情：**一律「输入 / 输出」两段，数据直接铺开** ──────────────────────
    3576. 

  3576.   // 工具 / 模型推理 / 结构化收口，点开看到的是同一种东西：这一步吃进什么、吐出什么。
    3577. 

  3577.   // 没有的那一段不画（模型推理没有独立入参 —— 它看到的是本段 ① 输入与前面几步，不在这个节点里）。
    3578. 

  3578.   if (d.input !== undefined || d.output !== undefined || d.calls || d.reasoning) {
    3579. 

  3579.     h += ioField("输入", d.input, "in");
    3580. 

  3580.     // 思考在输出之前：模型先想、再说、再决定调什么工具，按这个次序读
    3581. 

  3581.     if (d.reasoning) h += `<div class="io-block call"><div class="iob-h"><span class="iob-ic">💭</span>
    3582. 

  3582.       <span class="iob-t">思考过程</span><span class="iob-meta">${esc(dataMeta(d.reasoning))}</span></div>
    3583. 

  3583.       <div class="iob-b"><div class="pp-msg">${renderRich(d.reasoning)}</div></div></div>`;
    3584. 

  3584.     h += ioField("输出", d.output, "out");
    3585. 

  3585.     // 模型推理这一步的另一半产出：它决定调用的工具。用紫色一区（与卡面上那块同色），
    3586. 

  3586.     // 一个调用一组：序号 + 工具名，参数仍是逐字段铺开。
    3587. 

  3587.     if ((d.calls || []).length)
    3588. 

  3588.       h += `<div class="io-block call">
    3589. 

  3589.         <div class="iob-h"><span class="iob-ic">⚡</span><span class="iob-t">推理结果 · 调用工具</span>
    3590. 

  3590.           <span class="iob-meta">${d.calls.length} 个</span></div>
    3591. 

  3591.         <div class="iob-b">${d.calls.map((c, k) => `<div class="call-item">
    3592. 

  3592.           <div class="ci-h"><span class="ci-i">${k + 1}</span><span class="ci-n">${esc(c.name)}</span>
    3593. 

  3593.             <span class="iob-meta">${esc(dataMeta(c.args))}</span></div>
    3594. 

  3594.           <div class="ci-b">${renderArgs(c.args)}</div></div>`).join("")}</div></div>`;
    3595. 

  3595.   } else {
    3596. 

  3596.     if (d.text) h += `<div class="field">${d.title ? `<div class="lbl">${esc(d.title)}</div>` : ""}<div class="pp-msg">${renderRich(d.text)}</div></div>`;
    3597. 

  3597.     if (d.payload != null) h += `<div class="field"><div class="lbl">结构化产物</div><div class="pp-msg">${
    3598. 

  3598.       renderRich(JSON.stringify(d.payload, null, 2))}</div></div>`;
    3599. 

  3599.     if (d.json != null && d.payload == null && !d.text) h += `<div class="field"><div class="pp-msg">${
    3600. 

  3600.       renderRich(JSON.stringify(d.json, null, 2))}</div></div>`;
    3601. 

  3601.   }
    3602. 

  3602.   if (d.images && d.images.length)
    3603. 

  3603.     h += `<div class="field"><div class="lbl">图片 · ${d.images.length}</div><div class="imgs">${d.images.map(u =>
    3604. 

  3604.       `<img class="thumb" src="${esc(u)}" referrerpolicy="no-referrer" onclick="openLB('${esc(u)}')" onerror="imgFail(this)">`).join("")}</div></div>`;
    3605. 

  3605.   return h || `<div class="val" style="color:var(--faint)">（无更多详情）</div>`;
    3606. 

  3606. }
    3607. 

  3607. 

  3608. function renderLesson(l) {
    3609. 

  3609.   const src = l.source === "verdict" ? "执行" : (l.source === "planner" ? "规划" : (l.source || ""));
    3610. 

  3610.   const cls = l.source === "verdict" ? "verdict" : "planner";
    3611. 

  3611.   return `<div class="lesson">${src ? `<span class="l-src ${cls}">${esc(src)}</span>` : ""}${l.task_id != null ? `<span class="mmc-sid" style="margin-right:6px">#${esc(l.task_id)}</span>` : ""}${esc(l.note || "")}</div>`;
    3612. 

  3612. }
    3613. 

  3613. 

  3614. // 卡片点击 → 抽屉展示节点全量详情（含跳执行过程 traces）
    3615. 

  3615. // planOnly=true（从 plan 的输出点开）：只看**规划侧**的 Task 定义，不掺执行结果——
    3616. 

  3616. // 那一刻这个 Task 还没跑，显示产物/verdict/工具是张冠李戴。
    3617. 

  3617. function openSnapNode(sid, planOnly) {
    3618. 

  3618.   if (BOARD && BOARD.suppressClick) return;                 // 刚拖拽平移过 → 不误触
    3619. 

  3619.   const snap = SNAP.list[SNAP.idx];
    3620. 

  3620.   const node = ((snap.tree && snap.tree.nodes) || []).find(n => String(n.step_id) === String(sid));
    3621. 

  3621.   if (!node) return;
    3622. 

  3622.   SNAP.openNodeSid = sid;                                    // 记下当前所看任务 → 刷新时可重开
    3623. 

  3623.   SNAP.openNodePlanOnly = !!planOnly;
    3624. 

  3624.   const status = planOnly && node.role !== "container" ? "planned" : nodeDisplayStatus(node);
    3625. 

  3625.   $("#drawerTag").textContent = SNAP_STATUS[status] || status;
    3626. 

  3626.   $("#drawerTag").className = "drawer-tag " + (planOnly || node.role === "container" ? "plan" : "execute");
    3627. 

  3627.   $("#drawerTitle").textContent = node.name || `任务 #${sid}`;
    3628. 

  3628.   $("#drawerBody").innerHTML = renderSnapNodeDetail(node, snap, !!planOnly);
    3629. 

  3629.   openDrawer();
    3630. 

  3630. }
    3631. 

  3631. 

  3632. // 依赖 / 参考图 inputs：外链图 → 缩略图；引用前序产物 → chip（前序产物 URL 由快照里的兄弟节点解析）
    3633. 

  3633. function renderNodeInputs(inputs, snap) {
    3634. 

  3634.   if (!Array.isArray(inputs) || !inputs.length) return "";
    3635. 

  3635.   const prod = {};
    3636. 

  3636.   for (const n of ((snap && snap.tree && snap.tree.nodes) || []))
    3637. 

  3637.     if (n.result && n.result.product_url) prod[String(n.step_id)] = n.result.product_url;
    3638. 

  3638.   return inputs.map(inp => {
    3639. 

  3639.     const ext = inp && inp.external;
    3640. 

  3640.     if (ext) return isImgUrl(ext)
    3641. 

  3641.       ? `<img class="thumb ref" src="${esc(ext)}" referrerpolicy="no-referrer" onclick="openLB('${esc(ext)}')" onerror="imgFail(this)">`
    3642. 

  3642.       : `<span class="refchip">↗ ${esc(ext)}</span>`;
    3643. 

  3643.     if (inp && inp.from_step != null) {
    3644. 

  3644.       const u = prod[String(inp.from_step)];
    3645. 

  3645.       return u ? `<img class="thumb ref" src="${esc(u)}" referrerpolicy="no-referrer" title="引用任务 #${esc(inp.from_step)} 的产物" onclick="openLB('${esc(u)}')" onerror="imgFail(this)">`
    3646. 

  3646.                : `<span class="refchip">↑ 引用任务 #${esc(inp.from_step)} 产物</span>`;
    3647. 

  3647.     }
    3648. 

  3648.     return "";
    3649. 

  3649.   }).filter(Boolean).join("");
    3650. 

  3650. }
    3651. 

  3651. 

  3652. // 验收标准逐条渲染：结构化项拆成「标准（主）+ 说明（次）+ 重要度 + 参考图」；纯字符串直接展示。
    3653. 

  3653. function renderAcceptance(items) {
    3654. 

  3654.   return items.map(c => {
    3655. 

  3655.     if (typeof c !== "object" || c === null) return `<li>${esc(String(c))}</li>`;
    3656. 

  3656.     const imp = c.importance ? `<span class="mmc-tag">${esc(c.importance)}</span>` : "";
    3657. 

  3657.     const std = c.standard != null ? `<div class="acc-std">${esc(c.standard)} ${imp}</div>` : "";
    3658. 

  3658.     const desc = c.description != null ? `<div class="acc-desc">${esc(c.description)}</div>` : "";
    3659. 

  3659.     const urls = Array.isArray(c.reference_urls) ? c.reference_urls : [];
    3660. 

  3660.     const refs = urls.length ? `<div class="imgs acc-refs">${urls.map(u => isImgUrl(u)
    3661. 

  3661.       ? `<img class="thumb ref" src="${esc(u)}" referrerpolicy="no-referrer" onclick="openLB('${esc(u)}')" onerror="imgFail(this)">`
    3662. 

  3662.       : `<span class="refchip">↗ ${esc(u)}</span>`).join("")}</div>` : "";
    3663. 

  3663.     return (std || desc || refs) ? `<li>${std}${desc}${refs}</li>` : `<li>${esc(JSON.stringify(c))}</li>`;
    3664. 

  3664.   }).join("");
    3665. 

  3665. }
    3666. 

  3666. 

  3667. function renderSnapNodeDetail(node, snap, planOnly) {
    3668. 

  3668.   const sid = node.step_id, r = planOnly ? null : node.result;
    3669. 

  3669.   const dstatus = planOnly && node.role !== "container" ? "planned" : nodeDisplayStatus(node);
    3670. 

  3670.   const chgHtml = renderChangesDiff(snap, sid);
    3671. 

  3671.   let h = `<div class="tc-meta" style="margin-top:0">
    3672. 

  3672.     <span class="metachip">任务 #${esc(sid)}</span>
    3673. 

  3673.     <span class="metachip">${node.role === "container" ? "容器 · 已拆分" : SNAP_STATUS[dstatus] || dstatus}</span>
    3674. 

  3674.     ${node.parent_id != null ? `<span class="metachip">← 父 #${esc(node.parent_id)}</span>` : ""}
    3675. 

  3675.     ${(snap.node_change || {})[String(sid)] ? `<span class="metachip" style="color:var(--${snap.node_change[String(sid)] === "added" ? "ok" : "run"})">${snap.node_change[String(sid)] === "added" ? "＋本轮新增" : "～本轮调整"}</span>` : ""}
    3676. 

  3676.   </div>`;
    3677. 

  3677.   if (chgHtml) h += `<div class="field"><div class="lbl">规划变化 · changes（本轮 diff）</div><div class="chg-list">${chgHtml}</div></div>`;
    3678. 

  3678.   if (node.goal) h += `<div class="field"><div class="lbl">目标 · goal</div><div class="val">${esc(node.goal)}</div></div>`;
    3679. 

  3679.   if (node.stage || node.category)
    3680. 

  3680.     h += `<div class="field"><div class="lbl">制作属性 · stage & category</div><div class="mmc-attrs" style="margin-top:0">
    3681. 

  3681.       ${node.stage ? `<span class="attr-chip stage"><span class="k">阶段</span>${esc(node.stage)}</span>` : ""}
    3682. 

  3682.       ${node.category ? `<span class="attr-chip cat"><span class="k">操作</span>${esc(node.category)}</span>` : ""}</div></div>`;
    3683. 

  3683. 

  3684.   // 依赖 / 参考图 · inputs（执行时喂入的素材）
    3685. 

  3685.   const refHtml = renderNodeInputs(node.inputs, snap);
    3686. 

  3686.   if (refHtml) h += `<div class="field"><div class="lbl">依赖 / 参考图 · inputs</div><div class="imgs">${refHtml}</div></div>`;
    3687. 

  3687. 

  3688.   // 验收标准 · acceptance（评估据此逐条核对）
    3689. 

  3689.   if (Array.isArray(node.acceptance) && node.acceptance.length)
    3690. 

  3690.     h += `<div class="field"><div class="lbl">验收标准 · acceptance</div><ul class="acc-list">${
    3691. 

  3691.       renderAcceptance(node.acceptance)}</ul></div>`;
    3692. 

  3692. 

  3693.   // 能力 kind + 执行时用到的工具（执行侧信息；只看规划时不显示）
    3694. 

  3694.   if (!planOnly && (node.kind || (node.tools && node.tools.length))) {
    3695. 

  3695.     h += `<div class="field"><div class="lbl">能力 / 工具 · kind & tools</div><div class="mmc-tools" style="margin-top:0">
    3696. 

  3696.       ${node.kind ? `<span class="kind-chip">⚙ ${esc(node.kind)}</span>` : ""}
    3697. 

  3697.       ${(node.tools || []).map(t => `<span class="tool-chip">${esc(t)}</span>`).join("")}
    3698. 

  3698.     </div></div>`;
    3699. 

  3699.   }
    3700. 

  3700. 

  3701.   if (node.role === "container") {
    3702. 

  3702.     h += `<div class="field"><div class="val" style="color:var(--faint)">该任务已被拆分，由子任务集体兑现，本身不直接执行。</div></div>`;
    3703. 

  3703.     return h;
    3704. 

  3704.   }
    3705. 

  3705.   if (r) {
    3706. 

  3706.     if (r.product_kind === "image" && r.product_url)
    3707. 

  3707.       h += `<div class="field"><div class="lbl">产物 · product</div><div class="imgs"><img class="thumb" src="${esc(r.product_url)}" referrerpolicy="no-referrer" onclick="openLB('${esc(r.product_url)}')" onerror="imgFail(this)"></div></div>`;
    3708. 

  3708.     else if (r.product_text)
    3709. 

  3709.       h += `<div class="field"><div class="lbl">产物 · text</div><div class="val">${esc(r.product_text)}</div></div>`;
    3710. 

  3710.     if (r.summary) h += `<div class="field"><div class="lbl">结果摘要 · summary</div><div class="val">${esc(r.summary)}</div></div>`;
    3711. 

  3711.     const cls = r.verdict_pass ? "pass" : "fail";
    3712. 

  3712.     h += `<div class="field"><div class="lbl">评估 · verdict${r.attempts > 1 ? ` · 尝试 ${r.attempts} 次` : ""}</div>
    3713. 

  3713.       <div class="a-verdict-box ${cls}">
    3714. 

  3714.         <div style="font-family:var(--mono);font-size:11px;font-weight:700;color:var(--${r.verdict_pass ? "ok" : "fail"})">${r.verdict_pass ? "✓ 达标" : "✗ 未达标"}</div>
    3715. 

  3715.         ${r.failed_dims && r.failed_dims.length ? `<div class="vd-dims">${r.failed_dims.map(x => `<span class="vd-dim">${esc(typeof x === "object" ? JSON.stringify(x) : x)}</span>`).join("")}</div>` : ""}
    3716. 

  3716.         ${r.verdict_reason ? `<div class="vd-note">${esc(r.verdict_reason)}</div>` : ""}
    3717. 

  3717.       </div></div>`;
    3718. 

  3718.   } else if (!planOnly) {
    3719. 

  3719.     h += dstatus === "running"
    3720. 

  3720.       ? `<div class="pending-note" style="color:var(--run)">▸ 正在执行中… 执行过程（工具调用 / 评估）会在该步完成后归档，届时可在此查看。</div>`
    3721. 

  3721.       : `<div class="pending-note">◔ 本轮该任务尚未执行（在剩余队列中，等待 execute）。</div>`;
    3722. 

  3722.   }
    3723. 

  3723.   // 完整原始数据（这个 Task 在本轮快照里的全部字段），便于核对
    3724. 

  3724.   const raw = planOnly
    3725. 

  3725.     ? Object.fromEntries(Object.entries(node).filter(([k]) =>
    3726. 

  3726.         !["result", "tools", "trace_summary", "exec_step_id", "executing"].includes(k)))
    3727. 

  3727.     : node;
    3728. 

  3728.   h += `<div class="field"><div class="lbl">完整数据 · raw</div><div class="pp-msg">${
    3729. 

  3729.     renderRich(JSON.stringify(raw, null, 2))}</div></div>`;
    3730. 

  3730.   // 内部执行过程不在此渲染：execute/evaluate 的过程已在画板的对应节点里呈现。
    3731. 

  3731.   return h;
    3732. 

  3732. }
    3733. 

  3733. 

  3734. let _mmResizeT = null;
    3735. 

  3735. window.addEventListener("resize", () => {
    3736. 

  3736.   if (!SNAP || !SNAP.loaded) return;
    3737. 

  3737.   clearTimeout(_mmResizeT); _mmResizeT = setTimeout(() => layoutBoard(), 120);
    3738. 

  3738. });
    3739. 

  3739. 

  3740. // ── controls ──
    3741. 

  3741. $("#statusSeg").addEventListener("click", e => {
    3742. 

  3742.   const b = e.target.closest("button"); if (!b) return;
    3743. 

  3743.   [...$("#statusSeg").children].forEach(x => x.classList.toggle("active", x === b));
    3744. 

  3744.   STATUS = b.dataset.s; PAGE = 1; loadRuns();
    3745. 

  3745. });
    3746. 

  3746. $("#refreshBtn").addEventListener("click", () => {
    3747. 

  3747.   const b = $("#refreshBtn"); b.classList.add("spin"); setTimeout(() => b.classList.remove("spin"), 450);
    3748. 

  3748.   loadRuns(); if (CURRENT) selectRun(CURRENT, curRound());
    3749. 

  3749. });
    3750. 

  3750. 

  3751. loadRuns().then(openFromHash);
    3752. 

  3752. </script>
    3753. 

  3753. </body>
    3754. 

  3754. </html>
    3755.