Sākums Izpētīt Palīdzība
Pierakstīties
lisihan
/
video-image-production-build
1
0
Atdalīts 0
Faili Problēmas 0 Izmaiņu pieprasījumi 0 Vikivietne
Koks: 52ca392e77
Atzari Tagi
video-image-...
/
visualization
/
web
/
index.html

index.html 232 KB
Vēsture Neapstrādāts

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554555556557558559560561562563564565566567568569570571572573574575576577578579580581582583584585586587588589590591592593594595596597598599600601602603604605606607608609610611612613614615616617618619620621622623624625626627628629630631632633634635636637638639640641642643644645646647648649650651652653654655656657658659660661662663664665666667668669670671672673674675676677678679680681682683684685686687688689690691692693694695696697698699700701702703704705706707708709710711712713714715716717718719720721722723724725726727728729730731732733734735736737738739740741742743744745746747748749750751752753754755756757758759760761762763764765766767768769770771772773774775776777778779780781782783784785786787788789790791792793794795796797798799800801802803804805806807808809810811812813814815816817818819820821822823824825826827828829830831832833834835836837838839840841842843844845846847848849850851852853854855856857858859860861862863864865866867868869870871872873874875876877878879880881882883884885886887888889890891892893894895896897898899900901902903904905906907908909910911912913914915916917918919920921922923924925926927928929930931932933934935936937938939940941942943944945946947948949950951952953954955956957958959960961962963964965966967968969970971972973974975976977978979980981982983984985986987988989990991992993994995996997998999100010011002100310041005100610071008100910101011101210131014101510161017101810191020102110221023102410251026102710281029103010311032103310341035103610371038103910401041104210431044104510461047104810491050105110521053105410551056105710581059106010611062106310641065106610671068106910701071107210731074107510761077107810791080108110821083108410851086108710881089109010911092109310941095109610971098109911001101110211031104110511061107110811091110111111121113111411151116111711181119112011211122112311241125112611271128112911301131113211331134113511361137113811391140114111421143114411451146114711481149115011511152115311541155115611571158115911601161116211631164116511661167116811691170117111721173117411751176117711781179118011811182118311841185118611871188118911901191119211931194119511961197119811991200120112021203120412051206120712081209121012111212121312141215121612171218121912201221122212231224122512261227122812291230123112321233123412351236123712381239124012411242124312441245124612471248124912501251125212531254125512561257125812591260126112621263126412651266126712681269127012711272127312741275127612771278127912801281128212831284128512861287128812891290129112921293129412951296129712981299130013011302130313041305130613071308130913101311131213131314131513161317131813191320132113221323132413251326132713281329133013311332133313341335133613371338133913401341134213431344134513461347134813491350135113521353135413551356135713581359136013611362136313641365136613671368136913701371137213731374137513761377137813791380138113821383138413851386138713881389139013911392139313941395139613971398139914001401140214031404140514061407140814091410141114121413141414151416141714181419142014211422142314241425142614271428142914301431143214331434143514361437143814391440144114421443144414451446144714481449145014511452145314541455145614571458145914601461146214631464146514661467146814691470147114721473147414751476147714781479148014811482148314841485148614871488148914901491149214931494149514961497149814991500150115021503150415051506150715081509151015111512151315141515151615171518151915201521152215231524152515261527152815291530153115321533153415351536153715381539154015411542154315441545154615471548154915501551155215531554155515561557155815591560156115621563156415651566156715681569157015711572157315741575157615771578157915801581158215831584158515861587158815891590159115921593159415951596159715981599160016011602160316041605160616071608160916101611161216131614161516161617161816191620162116221623162416251626162716281629163016311632163316341635163616371638163916401641164216431644164516461647164816491650165116521653165416551656165716581659166016611662166316641665166616671668166916701671167216731674167516761677167816791680168116821683168416851686168716881689169016911692169316941695169616971698169917001701170217031704170517061707170817091710171117121713171417151716171717181719172017211722172317241725172617271728172917301731173217331734173517361737173817391740174117421743174417451746174717481749175017511752175317541755175617571758175917601761176217631764176517661767176817691770177117721773177417751776177717781779178017811782178317841785178617871788178917901791179217931794179517961797179817991800180118021803180418051806180718081809181018111812181318141815181618171818181918201821182218231824182518261827182818291830183118321833183418351836183718381839184018411842184318441845184618471848184918501851185218531854185518561857185818591860186118621863186418651866186718681869187018711872187318741875187618771878187918801881188218831884188518861887188818891890189118921893189418951896189718981899190019011902190319041905190619071908190919101911191219131914191519161917191819191920192119221923192419251926192719281929193019311932193319341935193619371938193919401941194219431944194519461947194819491950195119521953195419551956195719581959196019611962196319641965196619671968196919701971197219731974197519761977197819791980198119821983198419851986198719881989199019911992199319941995199619971998199920002001200220032004200520062007200820092010201120122013201420152016201720182019202020212022202320242025202620272028202920302031203220332034203520362037203820392040204120422043204420452046204720482049205020512052205320542055205620572058205920602061206220632064206520662067206820692070207120722073207420752076207720782079208020812082208320842085208620872088208920902091209220932094209520962097209820992100210121022103210421052106210721082109211021112112211321142115211621172118211921202121212221232124212521262127212821292130213121322133213421352136213721382139214021412142214321442145214621472148214921502151215221532154215521562157215821592160216121622163216421652166216721682169217021712172217321742175217621772178217921802181218221832184218521862187218821892190219121922193219421952196219721982199220022012202220322042205220622072208220922102211221222132214221522162217221822192220222122222223222422252226222722282229223022312232223322342235223622372238223922402241224222432244224522462247224822492250225122522253225422552256225722582259226022612262226322642265226622672268226922702271227222732274227522762277227822792280228122822283228422852286228722882289229022912292229322942295229622972298229923002301230223032304230523062307230823092310231123122313231423152316231723182319232023212322232323242325232623272328232923302331233223332334233523362337233823392340234123422343234423452346234723482349235023512352235323542355235623572358235923602361236223632364236523662367236823692370237123722373237423752376237723782379238023812382238323842385238623872388238923902391239223932394239523962397239823992400240124022403240424052406240724082409241024112412241324142415241624172418241924202421242224232424242524262427242824292430243124322433243424352436243724382439244024412442244324442445244624472448244924502451245224532454245524562457245824592460246124622463246424652466246724682469247024712472247324742475247624772478247924802481248224832484248524862487248824892490249124922493249424952496249724982499250025012502250325042505250625072508250925102511251225132514251525162517251825192520252125222523252425252526252725282529253025312532253325342535253625372538253925402541254225432544254525462547254825492550255125522553255425552556255725582559256025612562256325642565256625672568256925702571257225732574257525762577257825792580258125822583258425852586258725882589259025912592259325942595259625972598259926002601260226032604260526062607260826092610261126122613261426152616261726182619262026212622262326242625262626272628262926302631263226332634263526362637263826392640264126422643264426452646264726482649265026512652265326542655265626572658265926602661266226632664266526662667266826692670267126722673267426752676267726782679268026812682268326842685268626872688268926902691269226932694269526962697269826992700270127022703270427052706270727082709271027112712271327142715271627172718271927202721272227232724272527262727272827292730273127322733273427352736273727382739274027412742274327442745274627472748274927502751275227532754275527562757275827592760276127622763276427652766276727682769277027712772277327742775277627772778277927802781278227832784278527862787278827892790279127922793279427952796279727982799280028012802280328042805280628072808280928102811281228132814281528162817281828192820282128222823282428252826282728282829283028312832283328342835283628372838283928402841284228432844284528462847284828492850285128522853285428552856285728582859286028612862286328642865286628672868286928702871287228732874287528762877287828792880288128822883288428852886288728882889289028912892289328942895289628972898289929002901290229032904290529062907290829092910291129122913291429152916291729182919292029212922292329242925292629272928292929302931293229332934293529362937293829392940294129422943294429452946294729482949295029512952295329542955295629572958295929602961296229632964296529662967296829692970297129722973297429752976297729782979298029812982298329842985298629872988298929902991299229932994299529962997299829993000300130023003300430053006300730083009301030113012301330143015301630173018301930203021302230233024302530263027302830293030303130323033303430353036303730383039304030413042304330443045304630473048304930503051305230533054305530563057305830593060306130623063306430653066306730683069307030713072307330743075307630773078307930803081308230833084308530863087308830893090309130923093309430953096309730983099310031013102310331043105310631073108310931103111311231133114311531163117311831193120312131223123312431253126312731283129313031313132313331343135313631373138313931403141314231433144314531463147314831493150315131523153315431553156315731583159316031613162316331643165316631673168316931703171317231733174317531763177317831793180318131823183318431853186318731883189319031913192319331943195319631973198319932003201320232033204320532063207320832093210321132123213321432153216321732183219322032213222322332243225322632273228322932303231323232333234323532363237323832393240324132423243324432453246324732483249325032513252325332543255325632573258325932603261326232633264326532663267326832693270327132723273327432753276327732783279328032813282328332843285328632873288328932903291329232933294329532963297329832993300330133023303330433053306330733083309331033113312331333143315331633173318331933203321332233233324332533263327332833293330333133323333333433353336333733383339334033413342334333443345334633473348334933503351335233533354335533563357335833593360336133623363336433653366336733683369337033713372337333743375337633773378337933803381338233833384338533863387338833893390339133923393339433953396339733983399340034013402340334043405340634073408340934103411341234133414341534163417341834193420342134223423342434253426342734283429343034313432343334343435343634373438343934403441344234433444344534463447344834493450345134523453345434553456345734583459346034613462346334643465346634673468346934703471347234733474347534763477347834793480348134823483348434853486348734883489349034913492349334943495349634973498349935003501350235033504350535063507350835093510351135123513351435153516351735183519352035213522352335243525352635273528352935303531353235333534 
  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.   /* ═══════════ 过程视图 · 画板（可平移/缩放的白板；节点自由摆放 + SVG 连线）═══════════ */
    488. 

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

  489.            border-radius: 16px; overflow: hidden; background: var(--bg2);
    490. 

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

  491.            cursor: grab; touch-action: none; user-select: none; }
    492. 

  492.   .board.dragging { cursor: grabbing; }
    493. 

  493.   .board-world { position: absolute; left: 0; top: 0; transform-origin: 0 0; }
    494. 

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

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

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

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

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

  499.   .board-edges.hot { z-index: 5; }
    500. 

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

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

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

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

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

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

  506.   .edge-tag.ref { color: var(--muted); }
    507. 

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

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

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

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

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

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

  513. 

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

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

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

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

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

  519. 

  520.   /* 评估 */
    521. 

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

  522. 

  523.   /* 给槽位连线留出走线通道 */
    524. 

  524. 

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

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

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

  528.   .io-col .pcard { width: 232px; }
    529. 

  529.   .io-col .pcard .pc-thumbs { flex-wrap: nowrap; }
    530. 

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

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

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

  533.   .kv { display: flex; flex-direction: column; gap: 3px; }
    534. 

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

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

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

  537.           display: -webkit-box; -webkit-line-clamp: 4; -webkit-box-orient: vertical; overflow: hidden; }
    538. 

  538. 

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

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

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

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

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

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

  545.   .op-tasks { display: flex; flex-direction: column; gap: 6px; }
    546. 

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

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

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

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

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

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

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

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

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

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

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

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

  558.                                               border-color: rgba(139,157,255,.35); }
    559. 

  559.   .op-tasks .mm-card { width: auto; }
    560. 

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

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

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

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

  564.   .op-child { padding-left: 16px; }
    565. 

  565. 

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

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

  568.   .out-art { width: 64px; }
    569. 

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

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

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

  572.                      text-align: center; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
    573. 

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

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

  575.   .out-art.no-img { width: auto; max-width: 100%; }
    576. 

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

  577.                              border-radius: 8px; padding: 6px 8px; }
    578. 

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

  579.   .pcard.pc-final .pcard-sum { -webkit-line-clamp: 3; }
    580. 

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

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

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

  583.   .pcard.pc-taskslot { width: 258px; cursor: default; }
    584. 

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

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

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

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

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

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

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

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

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

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

  594.                 transition: border-color .15s, background .15s; }
    595. 

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

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

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

  598. 

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

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

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

  602.                padding: 6px 9px 7px; }
    603. 

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

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

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

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

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

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

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

  610.                                padding: 0 4px; margin-right: 5px; }
    611. 

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

  612.                            overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
    613. 

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

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

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

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

  617. 

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

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

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

  621.             min-width: 200px; max-width: 250px; }
    622. 

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

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

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

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

  626.               border-radius: 6px; padding: 3px 8px; }
    627. 

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

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

  629.   .slot-row.off .dot { background: var(--faint); }
    630. 

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

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

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

  633.                        color: var(--text); opacity: 1; }
    634. 

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

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

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

  637. 

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

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

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

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

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

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

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

  645. 

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

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

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

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

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

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

  652.     gap: 52px; }
    653. 

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

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

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

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

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

  658. 

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

  660.   .lane-col.conc { gap: 6px; }
    661. 

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

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

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

  664.                 font-size: 12px; color: var(--faint); }
    665. 

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

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

  667. 

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

  669.            padding: 10px 12px 11px; cursor: pointer; display: flex; flex-direction: column;
    670. 

  670.            transition: transform .12s, box-shadow .15s, border-color .15s; }
    671. 

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

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

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

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

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

  676.   .pcard.pc-failed .pc-label { color: var(--fail); }
    677. 

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

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

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

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

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

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

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

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

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

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

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

  688.                 letter-spacing: .2px; }
    689. 

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

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

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

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

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

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

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

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

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

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

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

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

  701.   .pc-call { margin-top: 5px; padding: 5px 12px 7px;
    702. 

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

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

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

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

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

  707.   .pcl-args { margin-top: 4px; }
    708. 

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

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

  710.   .pcl-thumbs { margin-top: 5px; gap: 4px; }
    711. 

  711.   .pcl-thumbs img { width: 40px; height: 40px; }
    712. 

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

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

  714.              font-weight: 700; letter-spacing: .6px; margin-bottom: 5px; }
    715. 

  715.   .pc-io-h .io-ok  { color: var(--ok); }
    716. 

  716.   .pc-io-h .io-bad { color: var(--fail); }
    717. 

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

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

  719.                 overflow: hidden; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; }
    720. 

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

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

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

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

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

  725.                           white-space: nowrap; }
    726. 

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

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

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

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

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

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

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

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

  734.                     white-space: nowrap; }
    735. 

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

  736.                     -webkit-box-orient: vertical; word-break: break-all; }
    737. 

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

  738.                 display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; word-break: break-word; }
    739. 

  739.   .io-thumbs { margin-top: 6px; }
    740. 

  740.   .io-thumbs img { width: 46px; height: 46px; }
    741. 

  741.   /* 底部「决策依据」入口 */
    742. 

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

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

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

  745.               border-radius: 0 0 11px 11px; }
    746. 

  746.   .pc-basis { flex-wrap: wrap; }
    747. 

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

  748.   .pc-basis .bs-h { flex: 0 0 auto; }
    749. 

  749.   .pc-basis .bs-n { margin-left: auto; opacity: .8; }
    750. 

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

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

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

  753.                       border-radius: 5px; padding: 1px 5px; }
    754. 

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

  755.   .pc-basis .bs-ic { opacity: .85; }
    756. 

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

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

  758.               background: rgba(255,255,255,.02); }
    759. 

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

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

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

  762.   .src-jump .sj.off { opacity: .5; cursor: default; }
    763. 

  763.   .src-hl.flash { animation: hlflash .9s ease; }
    764. 

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

  765. 

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

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

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

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

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

  771.   .srcbar.open { transform: none; }
    772. 

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

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

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

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

  776.               text-overflow: ellipsis; white-space: nowrap; }
    777. 

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

  778.               display: flex; align-items: center; justify-content: center; color: var(--muted); background: var(--panel2); }
    779. 

  779.   .srcbar-x:hover { color: var(--text); }
    780. 

  780.   .srcbar-b { flex: 1; overflow: auto; padding: 14px 16px 40px; }
    781. 

  781.   .srcbar-sum { font-size: 12px; line-height: 1.7; color: var(--muted); background: rgba(167,139,250,.08);
    782. 

  782.                 border: 1px solid rgba(167,139,250,.2); border-radius: 10px; padding: 9px 11px; margin-bottom: 14px; }
    783. 

  783.   .src-item { border: 1px solid var(--border2); border-radius: 11px; margin-bottom: 12px; overflow: hidden; }
    784. 

  784.   .src-h { display: flex; align-items: center; gap: 7px; padding: 8px 11px; background: var(--panel2);
    785. 

  785.            border-bottom: 1px solid var(--border); flex-wrap: wrap; }
    786. 

  786.   .src-n { font-family: var(--mono); font-size: 9px; font-weight: 700; color: #0b0e13; background: rgb(167,139,250);
    787. 

  787.            border-radius: 5px; padding: 1px 6px; flex: 0 0 auto; }
    788. 

  788.   .src-kind { font-family: var(--mono); font-size: 9px; color: var(--faint); border: 1px solid var(--border2);
    789. 

  789.               border-radius: 5px; padding: 1px 6px; }
    790. 

  790.   .src-title { font-size: 11.5px; font-weight: 600; color: var(--text); min-width: 0; overflow: hidden;
    791. 

  791.                text-overflow: ellipsis; white-space: nowrap; }
    792. 

  792.   .src-loc { margin-left: auto; font-family: var(--mono); font-size: 9px; flex: 0 0 auto; }
    793. 

  793.   .src-loc.ok { color: var(--ok); } .src-loc.no { color: var(--warn, #f5b544); }
    794. 

  794.   .src-body { padding: 10px 12px; font-size: 11.5px; line-height: 1.8; color: var(--muted);
    795. 

  795.               white-space: pre-wrap; word-break: break-word; max-height: 340px; overflow: auto; }
    796. 

  796.   /* markdown 渲染态：**直接复用 .pp-md**（右侧详情抽屉用的就是它）——同一种东西只该有一种画法，
    797. 

  797.      另起一套字号/间距只会让同一份 prompt 在两个面板里长得不一样。这里只解掉 pre-wrap。 */
    798. 

  798.   .src-body.md { white-space: normal; padding: 0; }
    799. 

  799.   /* `.pp-md` 自带 `max-height:340px; overflow:auto`（它原本是抽屉里的小块富文本）。套进来源栏后
    800. 

  800.      就成了**内层滚动条**：外层 .src-body 撑到 635px 却只显示 340px 的内容 → 下方一片空白，而
    801. 

  801.      jumpHl 滚的是外层（它根本没有可滚区）→ 点跳转纹丝不动。这里把滚动权交还给 .src-body。 */
    802. 

  802.   .src-body .pp-md { max-height: none; overflow: visible; }
    803. 

  803.   /* 只有一块来源 → 铺满剩余高度（一份 4600 字的 prompt 挤在 340px 里根本没法读） */
    804. 

  804.   .srcbar-b.single { display: flex; flex-direction: column; }
    805. 

  805.   .srcbar-b.single .src-item { flex: 1; display: flex; flex-direction: column; min-height: 0; margin-bottom: 0; }
    806. 

  806.   .srcbar-b.single .src-body { flex: 1; max-height: none; }
    807. 

  807.   .src-body img { max-width: 100%; border-radius: 8px; }
    808. 

  808.   .src-hl { background: rgba(245,181,68,.28); color: var(--text); border-bottom: 2px solid rgba(245,181,68,.9);
    809. 

  809.             border-radius: 3px; padding: 1px 0; }
    810. 

  810.   .src-quote { padding: 8px 12px; font-size: 11px; line-height: 1.7; color: var(--muted);
    811. 

  811.                border-top: 1px dashed var(--border2); background: rgba(255,255,255,.02); }
    812. 

  812. 

  813.   /* 工具清单：用过的高亮（本次真的动用过这项能力），没用过的压暗 */
    814. 

  814.   .tool-chips { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 7px; }
    815. 

  815.   .tool-chip { display: inline-flex; align-items: center; gap: 4px; font-family: var(--mono); font-size: 9px;
    816. 

  816.                line-height: 1.6; color: var(--faint); background: var(--panel2);
    817. 

  817.                border: 1px solid var(--border2); border-radius: 5px; padding: 1px 6px; opacity: .62; }
    818. 

  818.   .tool-chip.used { color: var(--ok); border-color: rgba(74,222,128,.55);
    819. 

  819.                     background: rgba(74,222,128,.12); opacity: 1; font-weight: 700; }
    820. 

  820.   .tool-chip .tc-dot { width: 4px; height: 4px; border-radius: 50%; background: var(--ok); flex: 0 0 auto; }
    821. 

  821.   /* 详情里的工具项：默认折叠，只露一行标题；点开才显示说明与参数 */
    822. 

  822.   .tool-item .tool-hd { display: flex; align-items: center; gap: 7px; cursor: pointer; flex-wrap: wrap; }
    823. 

  823.   .tool-item .tool-hd:hover { color: var(--accent); }
    824. 

  824.   .tool-item .tool-arrow { display: inline-block; font-size: 10px; color: var(--faint);
    825. 

  825.                            transition: transform .15s; }
    826. 

  826.   .tool-item.open .tool-arrow { transform: rotate(90deg); color: var(--accent); }
    827. 

  827.   .tool-item .tool-meta { margin-left: auto; font-family: var(--mono); font-size: 9.5px; color: var(--faint);
    828. 

  828.                           font-weight: 400; }
    829. 

  829.   .tool-item .tool-bd { display: none; margin-top: 9px; }
    830. 

  830.   .tool-item.open .tool-bd { display: block; }
    831. 

  831.   .tool-used-tag { margin-left: 8px; font-family: var(--mono); font-size: 9px; font-weight: 700; color: var(--ok);
    832. 

  832.                    background: rgba(74,222,128,.14); border: 1px solid rgba(74,222,128,.45);
    833. 

  833.                    border-radius: 5px; padding: 1px 6px; }
    834. 

  834.   /* 工具参数表：一行一个参数（名 / 类型 / 必填 / 说明） */
    835. 

  835.   .tool-params { margin-top: 9px; border-top: 1px dashed var(--border2); padding-top: 8px;
    836. 

  836.                  display: flex; flex-direction: column; gap: 5px; }
    837. 

  837.   .tp-row { display: flex; align-items: baseline; gap: 8px; font-size: 11.5px; line-height: 1.6; flex-wrap: wrap; }
    838. 

  838.   .tp-n { font-family: var(--mono); font-weight: 700; color: var(--text); }
    839. 

  839.   .tp-t { font-family: var(--mono); font-size: 10px; color: var(--accent); }
    840. 

  840.   .tp-r { font-family: var(--mono); font-size: 9px; color: var(--faint); border: 1px solid var(--border2);
    841. 

  841.           border-radius: 4px; padding: 0 4px; }
    842. 

  842.   .tp-r.req { color: var(--warn, #f5b544); border-color: rgba(245,181,68,.5); }
    843. 

  843.   .tp-d { color: var(--muted); flex: 1 1 240px; min-width: 0; }
    844. 

  844. 

  845.   .id-chip { font-family: var(--mono); font-size: 8.5px; font-weight: 600; color: var(--faint);
    846. 

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

  847.              padding: 1px 5px; cursor: pointer; user-select: all; flex: 0 0 auto; }
    848. 

  848.   .id-chip:hover { color: var(--text); border-color: var(--accent); }
    849. 

  849.   .id-chip.copied { color: var(--ok); border-color: var(--ok); }
    850. 

  850.   /* 段标题里的 id：段标题是深色徽标底，这里配一档亮色 */
    851. 

  851.   .pc-id { align-self: flex-start; margin: -2px 0 5px; }
    852. 

  852. 

  853.   .pcard-h { display: flex; align-items: center; gap: 6px; margin-bottom: 6px; }
    854. 

  854.   .pcard-h .pc-ic { font-size: 12px; flex: 0 0 auto; }
    855. 

  855.   .pc-label { font-family: var(--mono); font-size: 10.5px; font-weight: 700; color: var(--text); overflow: hidden;
    856. 

  856.               text-overflow: ellipsis; white-space: nowrap; min-width: 0; }
    857. 

  857.   .pc-tok { margin-left: auto; font-family: var(--mono); font-size: 9px; color: var(--faint); flex: 0 0 auto; }
    858. 

  858.   /* 思考（extended thinking / reasoning）：与正文分开的一段 —— 「怎么想的」和「说了什么」不是一回事。
    859. 

  859.      斜体 + 淡紫左条，视觉上比正文轻一档；卡面压到 8 行，全文在详情里。 */
    860. 

  860.   .pc-think { margin: 8px -12px 0; padding: 6px 12px 7px; border-top: 1px solid var(--border);
    861. 

  861.               border-left: 2px solid rgba(167,139,250,.45); background: rgba(167,139,250,.05); }
    862. 

  862.   .pc-think-h { font-family: var(--mono); font-size: 8.5px; font-weight: 700; letter-spacing: .6px;
    863. 

  863.                 color: rgba(183,160,255,.9); margin-bottom: 4px; }
    864. 

  864.   .pc-think-b { font-size: 11px; line-height: 1.6; color: var(--muted); font-style: italic;
    865. 

  865.                 word-break: break-word; overflow: hidden; display: -webkit-box;
    866. 

  866.                 -webkit-line-clamp: 8; -webkit-box-orient: vertical; }
    867. 

  867.   /* 模型推理节点：与工具节点**一眼可分** —— 紫色左条 + 略宽，正文（模型在想什么）多给几行。
    868. 

  868.      它是链上做决策的那一步，后面那些工具节点跑的都是它这一步发出的 function calling。 */
    869. 

  869.   .pcard.pc-llm { width: 252px; border-left: 3px solid rgba(167,139,250,.85);
    870. 

  870.                   background: linear-gradient(180deg, rgba(167,139,250,.07), var(--panel)); }
    871. 

  871.   .pcard.pc-llm .pcard-sum { -webkit-line-clamp: 8; }
    872. 

  872.   .pcard-sum { font-size: 11.5px; line-height: 1.55; color: var(--muted); flex: 1;
    873. 

  873.                display: -webkit-box; -webkit-line-clamp: 4; -webkit-box-orient: vertical; overflow: hidden; word-break: break-word; }
    874. 

  874.   .pc-thumbs { display: flex; flex-wrap: wrap; gap: 5px; margin-top: 8px; }
    875. 

  875.   .pc-thumbs img { width: 52px; height: 52px; object-fit: cover; border-radius: 7px; border: 1px solid var(--border); background: var(--bg); cursor: zoom-in; }
    876. 

  876.   .pc-more { margin-top: 8px; font-family: var(--mono); font-size: 9.5px; color: var(--faint); }
    877. 

  877.   .pcard:hover .pc-more { color: var(--accent); }
    878. 

  878. 

  879.   .mm-card.mm-round-exec { box-shadow: 0 0 0 2px var(--ok), 0 0 22px -6px rgba(52,211,153,.5); }
    880. 

  880. 

  881.   /* **不设 max-width**：链里可能装着组合模块的格子（它自身又是两列），封顶就撑不开、
    882. 

  882.      内容会溢出到相邻段上。宽度由内容决定，只留下限防过窄。 */
    883. 

  883.   .sub-struct { flex: 0 0 auto; min-width: max-content; border: 1px solid rgba(var(--tone), .42); background: rgba(var(--tone), .09);
    884. 

  884.                 border-radius: 10px; padding: 7px 9px 8px; }
    885. 

  885.   .sub-struct.off { border-style: dashed; opacity: .6; background: transparent; }
    886. 

  886.   /* 结构格内部与最外层**同一规则**：叶=一列；组合=左「本模块自身结构」+ 右「子模块结构链」两列。
    887. 

  887.      这条规则逐层适用——嵌多深都是这个形状。 */
    888. 

  888.   .sub-struct .gs-own { min-width: 196px; max-width: 260px; }
    889. 

  889.   .gs-own > .pcard { width: auto; background: rgba(14,17,22,.78); border-color: rgba(var(--tone), .3); }
    890. 

  890.   /* ① 输入段 / ③ 运行流程段 / ④ 输出段：一个子模块一个框，三列逐框对齐（等高，见 syncCompositeRows） */
    891. 

  891.   .sub-in { align-self: stretch; min-width: max-content; }
    892. 

  892.   .sub-in {
    893. 

  893.       --tone: 56,189,248; border: 1px solid rgba(var(--tone), .40);
    894. 

  894.       background: rgba(var(--tone), .06); border-radius: 12px; padding: 8px 10px 10px; }
    895. 

  895.   /* 同一行的四段（输入框 / 结构格 / 运行框 / 输出框）用**同一个** --tone —— 底色一致即为同一个子模块，
    896. 

  896.      横着扫一眼就能对上，不必去读标题。tone 由 modTone(该行的第一路) 统一决定，四处同源。 */
    897. 

  897.   .sub-in.off { border-style: dashed; opacity: .55; background: transparent; }
    898. 

  898.   /* 模块块按**调用树横向生长**摆位（x = 上游右缘 + 间距、y = 上游顶边，兄弟向下堆），
    899. 

  899.      具体坐标由 placeBlocks() 量完实际尺寸后写进 style.left/top —— CSS 只管块自己长什么样。 */
    900. 

  900.   #boardWorld { position: relative; width: max-content; }
    901. 

  901.   .mod-block { position: absolute; z-index: 2; display: flex; align-items: stretch; width: max-content;
    902. 

  902.     border: 1px solid hsl(var(--mc) 60% 55% / .45); border-radius: 14px;
    903. 

  903.     background: hsl(var(--mc) 60% 50% / .05); }
    904. 

  904.   /* 这一列的底色是模块色 .40（比页面底色亮不少）——faint / muted 两个次要文字色本是为近乎透明的
    905. 

  905.      底色调的深灰，放这儿会糊掉。**在本列内重定义这两个变量**（自定义属性向下继承）：所有用到它们的
    906. 

  906.      子元素（标题 / 版本 / 摘要 / 流程图标签 / 源码路径…）一次性提亮，不必逐个枚举选择器。 */
    907. 

  907.   .mod-def { flex: 0 0 268px; display: flex; flex-direction: column; gap: 6px; padding: 14px;
    908. 

  908.     --faint: #a6b1c0; --muted: #ccd4e0;
    909. 

  909.     border-right: 1px solid hsl(var(--mc) 60% 55% / .35);
    910. 

  910.     background: hsl(var(--mc) 60% 50% / .40); border-radius: 14px 0 0 14px; }
    911. 

  911.   .md-cap { display: flex; align-items: center; gap: 7px;
    912. 

  912.     font-family: var(--mono); font-size: 10.5px; color: var(--faint); letter-spacing: .4px; }
    913. 

  913.   /* 调用树上的深度：L0 是本轮入口，往右一层加一 */
    914. 

  914.   .md-depth { font-family: var(--mono); font-size: 9.5px; font-weight: 700; color: hsl(var(--mc) 70% 72%);
    915. 

  915.     border: 1px solid hsl(var(--mc) 60% 55% / .5); border-radius: 5px; padding: 0 5px; }
    916. 

  916.   .md-key { font-family: var(--mono); font-size: 13px; font-weight: 700;
    917. 

  917.     color: hsl(var(--mc) 70% 72%); word-break: break-all; }
    918. 

  918.   .md-meta { display: flex; gap: 6px; flex-wrap: wrap; font-family: var(--mono); font-size: 10.5px; }
    919. 

  919.   .md-kind { padding: 1px 7px; border-radius: 6px; border: 1px solid hsl(var(--mc) 60% 55% / .5);
    920. 

  920.     color: hsl(var(--mc) 70% 72%); }
    921. 

  921.   .md-ver { color: var(--faint); }
    922. 

  922.   .md-sum { font-size: 11.5px; color: var(--muted); line-height: 1.6; }
    923. 

  923.   .md-cards { display: flex; flex-direction: column; gap: 6px; margin-top: 4px; }
    924. 

  924. 

  925.   .mod-runs { flex: 1; min-width: max-content; display: flex; flex-direction: column; gap: 12px; padding: 12px 14px; }
    926. 

  926.   .mr-cap { font-family: var(--mono); font-size: 10.5px; color: var(--faint); }
    927. 

  927.   /* 一个运行实例 = 一条泳道。同一个模块的 N 次运行就是 N 条，纵向排开。 */
    928. 

  928.   .inst-lane { border: 1px dashed hsl(var(--mc) 60% 55% / .45); border-radius: 10px;
    929. 

  929.     padding: 10px 12px; background: hsl(var(--mc) 60% 50% / .05); width: max-content; max-width: 100%; }
    930. 

  930.   .inst-lane.off { border-style: dotted; opacity: .55; }
    931. 

  931.   .inst-lane.focus { outline: 2px solid hsl(var(--mc) 70% 62%); outline-offset: 2px; }
    932. 

  932.   /* 悬停展开引用时：被指向的那条泳道 / 那个 call 芯片一起点亮 —— 线与两端同时可辨 */
    933. 

  933.   .inst-lane.hot { outline: 2px dashed hsl(var(--mc) 70% 62%); outline-offset: 2px;
    934. 

  934.                    background: hsl(var(--mc) 60% 50% / .32); }
    935. 

  935.   .call-chip.hot { border-style: solid; box-shadow: 0 0 0 2px hsl(var(--mc) 70% 62% / .55); }
    936. 

  936.   .il-cap { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-bottom: 8px;
    937. 

  937.     font-family: var(--mono); font-size: 11px; color: var(--muted); }
    938. 

  938.   .il-cap .il-t { color: var(--fg); }
    939. 

  939.   .il-cap .il-flags { display: flex; align-items: center; gap: 6px; margin-left: auto; }
    940. 

  940.   .il-from { cursor: pointer; text-decoration: underline dotted; color: var(--faint); }
    941. 

  941.   .il-from:hover { color: var(--fg); }
    942. 

  942. 

  943.   /* 链上的箭头不再是文字「→」，而是 SVG 实线曲线（drawLaneEdges），颜色 = 所在模块的 --mc。 */
    944. 

  944.   /* 首尾两个节点：输入是圆头、输出是右向箭头形 —— 与中间的运行节点区分开 */
    945. 

  945.   /* 宽度**跟着里面的卡走**（width:max-content）：卡是定宽的（普通 210 / llm 252 / 任务槽 258），
    946. 

  946.      写死 max-width:240px 会让任务槽那种更宽的卡直接顶出框外。 */
    947. 

  947.   .io-node { flex: 0 0 auto; width: max-content; padding: 8px 10px;
    948. 

  948.     border: 1px solid hsl(var(--mc) 60% 55% / .5); background: hsl(var(--mc) 60% 50% / .08); }
    949. 

  949.   .io-node.io-in { border-radius: 22px 10px 10px 22px; }
    950. 

  950.   .io-node.io-out { border-radius: 10px 22px 22px 10px; }
    951. 

  951.   .ion-cap { font-family: var(--mono); font-size: 10.5px; color: var(--faint); margin-bottom: 6px; }
    952. 

  952.   .ion-body { display: flex; flex-direction: column; gap: 6px; }
    953. 

  953. 

  954.   /* 引用外部模块：流程里的一步（虚线框以示"这一步在别处跑"）。
    955. 

  955.      配色用**被调模块自己的** --mc（由 hueStyle 内联覆盖）——这样芯片、结构图里那个引用节点、
    956. 

  956.      跨块的引用连线、以及目标模块块本身，四处同色，顺着颜色就能一眼追到底。 */
    957. 

  957.   .call-chip { min-width: 180px; max-width: 230px; padding: 9px 11px; cursor: pointer;
    958. 

  958.     border: 1px dashed hsl(var(--mc) 60% 55% / .6); border-radius: 10px;
    959. 

  959.     background: hsl(var(--mc) 60% 50% / .10);
    960. 

  960.     font-family: var(--mono); font-size: 11.5px; line-height: 1.6; }
    961. 

  961.   .call-chip:hover { border-color: hsl(var(--mc) 70% 65%); box-shadow: 0 2px 10px rgba(0,0,0,.25); }
    962. 

  962.   .call-chip .cc-h { color: var(--faint); font-size: 10.5px; }
    963. 

  963.   .call-chip .cc-k { font-weight: 600; word-break: break-all; color: hsl(var(--mc) 70% 72%); }
    964. 

  964.   .call-chip .cc-i { color: var(--faint); }
    965. 

  965. 

  966.   /* ── 结构按 kind 分化 ─────────────────────────────────────────────────────
    967. 

  967.      workflow = 一张流程图（节点只写「引用哪个模块 + 跑几次」，点节点跳到那个模块）
    968. 

  968.      code     = 它的源码本身（散文规则说不清也会漂移，源码不会）
    969. 

  969.      agent    = 原有的结构卡（system prompt / 上下文构成 / 工具 / 模型） */
    970. 

  970.   .fc { display: flex; flex-direction: column; gap: 0; margin-bottom: 8px; }
    971. 

  971.   .fc-node { display: flex; gap: 8px; align-items: flex-start; padding: 8px 10px;
    972. 

  972.     border: 1px solid hsl(var(--mc) 60% 55% / .45); border-radius: 9px;
    973. 

  973.     background: hsl(var(--mc) 60% 50% / .10); }
    974. 

  974.   .fc-node.ref { cursor: pointer; background: hsl(var(--mc) 60% 50% / .40); }
    975. 

  975.   .fc-node.ref:hover { border-color: hsl(var(--mc) 70% 65%); }
    976. 

  976.   .fc-i { flex: 0 0 auto; width: 17px; height: 17px; border-radius: 50%; font-size: 10px;
    977. 

  977.     display: grid; place-items: center; color: var(--bg); background: hsl(var(--mc) 60% 62%);
    978. 

  978.     font-family: var(--mono); }
    979. 

  979.   .fc-b { min-width: 0; }
    980. 

  980.   .fc-t { font-size: 12px; color: var(--text); }
    981. 

  981.   .fc-k { font-family: var(--mono); font-size: 10.5px; color: hsl(var(--mc) 70% 72%); word-break: break-all; }
    982. 

  982.   .fc-x { display: inline-block; margin-top: 3px; padding: 0 6px; border-radius: 5px;
    983. 

  983.     font-family: var(--mono); font-size: 9.5px; color: var(--faint); border: 1px solid var(--line); }
    984. 

  984.   /* 边：竖线 + 基数徽标 + 边标签 —— 1:N / N:1 直接读出扇出与汇聚 */
    985. 

  985.   .fc-edge { display: flex; align-items: center; gap: 6px; padding: 3px 0 3px 8px; margin-left: 8px;
    986. 

  986.     border-left: 2px solid hsl(var(--mc) 60% 55% / .45); min-height: 20px; }
    987. 

  987.   .fc-card { font-family: var(--mono); font-size: 9.5px; color: hsl(var(--mc) 70% 70%);
    988. 

  988.     border: 1px solid hsl(var(--mc) 60% 55% / .5); border-radius: 5px; padding: 0 5px; }
    989. 

  989.   .fc-l { font-size: 10.5px; color: var(--faint); }
    990. 

  990. 

  991.   .src-card { border: 1px solid var(--line); border-radius: 9px; overflow: hidden; margin-bottom: 8px; }
    992. 

  992.   .src-h { display: flex; align-items: center; gap: 8px; padding: 6px 9px; background: var(--bg2);
    993. 

  993.     font-family: var(--mono); font-size: 10.5px; border-bottom: 1px solid var(--line); }
    994. 

  994.   .src-q { color: hsl(var(--mc) 70% 72%); font-weight: 600; }
    995. 

  995.   .src-f { color: var(--faint); margin-left: auto; }
    996. 

  996.   .src-code { margin: 0; padding: 9px 10px; max-height: 340px; overflow: auto;
    997. 

  997.     font-family: var(--mono); font-size: 10.5px; line-height: 1.65; color: var(--text);
    998. 

  998.     white-space: pre; background: rgba(0,0,0,.18); }
    999. 

  999.   #drawerBody .src-code { max-height: none; font-size: 12.5px; line-height: 1.7; }   /* 抽屉里看全文：不限高 */
    1000. 

  1000.   /* 结构模块里 code 只给一条「查看完整代码」入口（不内联源码 → 结构列宽度与 agent 模块一致）。 */
    1001. 

  1001.   .src-more { display: flex; align-items: center; gap: 6px; padding: 6px 10px; cursor: pointer;
    1002. 

  1002.     font-family: var(--mono); font-size: 10.5px; color: hsl(var(--mc) 70% 72%);
    1003. 

  1003.     background: var(--bg2); border-top: 1px solid var(--line); }
    1004. 

  1004.   .src-more:hover { color: var(--text); background: hsl(var(--mc) 60% 50% / .12); }
    1005. 

  1005.   .mod-block.focus { outline: 2px solid hsl(var(--mc) 70% 62%); outline-offset: 3px; }
    1006. 

  1006.   /* 悬停结构里的引用时：两端的模块块一起点亮（连线 + 两端，三者同时可辨） */
    1007. 

  1007.   .mod-block.hot { outline: 2px dashed hsl(var(--mc) 70% 62%); outline-offset: 3px; }
    1008. 

  1008.   .fc-node.hot, .fc-node[data-to]:hover { border-color: hsl(var(--mc) 70% 65%);
    1009. 

  1009.                                           background: hsl(var(--mc) 60% 50% / .2); }
    1010. 

  1010. 

  1011. </style>
    1012. 

  1012. </head>
    1013. 

  1013. <body>
    1014. 

  1014. <div class="app">
    1015. 

  1015.   <aside class="sidebar">
    1016. 

  1016.     <div class="brand">
    1017. 

  1017.       <div class="brand-top">
    1018. 

  1018.         <span class="logo">Production&nbsp;Build</span>
    1019. 

  1019.         <span class="logo-sub">Runs</span>
    1020. 

  1020.       </div>
    1021. 

  1021.       <div class="brand-desc">以运行事实为主 ·
    1022. 

  1022.         <span class="loop-glyph">plan → <b>execute</b> → validate</span></div>
    1023. 

  1023.     </div>
    1024. 

  1024.     <div class="controls">
    1025. 

  1025.       <div class="seg" id="statusSeg">
    1026. 

  1026.         <button data-s="" class="active">全部</button>
    1027. 

  1027.         <button data-s="success">成功</button>
    1028. 

  1028.         <button data-s="running">运行中</button>
    1029. 

  1029.         <button data-s="failed">失败</button>
    1030. 

  1030.       </div>
    1031. 

  1031.       <div class="ctl-row">
    1032. 

  1032.         <span class="count" id="runCount">—</span>
    1033. 

  1033.         <button class="icon-btn" id="refreshBtn" title="刷新">⟳</button>
    1034. 

  1034.       </div>
    1035. 

  1035.     </div>
    1036. 

  1036.     <div class="runlist" id="runlist"><div class="hint">加载中…</div></div>
    1037. 

  1037.     <div class="pager" id="pager"></div>
    1038. 

  1038.   </aside>
    1039. 

  1039. 

  1040.   <main class="main" id="main">
    1041. 

  1041.     <div class="empty" id="emptyState">
    1042. 

  1042.       <div class="big">◍ ⇄ ◍</div>
    1043. 

  1043.       <div class="lp">选择左侧一个 Run · 查看 <b>规划</b>、<i>执行</i>与验收链路</div>
    1044. 

  1044.     </div>
    1045. 

  1045.   </main>
    1046. 

  1046. </div>
    1047. 

  1047. 

  1048. <div class="drawer-scrim" id="drawerScrim" onclick="closeDrawer()"></div>
    1049. 

  1049. <aside class="drawer" id="drawer">
    1050. 

  1050.   <div class="drawer-h">
    1051. 

  1051.     <span class="drawer-tag" id="drawerTag"></span>
    1052. 

  1052.     <span class="drawer-title" id="drawerTitle"></span>
    1053. 

  1053.     <div class="drawer-x drawer-refresh" onclick="refreshLoop(this)" title="按当前 Loop 拉取最新">⟳</div>
    1054. 

  1054.     <div class="drawer-x" onclick="closeDrawer()">✕</div>
    1055. 

  1055.   </div>
    1056. 

  1056.   <div class="drawer-b" id="drawerBody"></div>
    1057. 

  1057. </aside>
    1058. 

  1058. 

  1059. <!-- 依据来源栏（左侧）：点某个工具节点底部的「决策依据」→ 依次列出各来源全文 + 高亮被引片段。
    1060. 

  1060.      旁路数据，没有标注时这个栏永远不出现。 -->
    1061. 

  1061. <aside class="srcbar" id="srcbar">
    1062. 

  1062.   <div class="srcbar-h">
    1063. 

  1063.     <span class="srcbar-tag">🔖 依据来源</span>
    1064. 

  1064.     <span class="srcbar-t" id="srcbarTitle"></span>
    1065. 

  1065.     <div class="srcbar-x" onclick="closeSrcBar()">✕</div>
    1066. 

  1066.   </div>
    1067. 

  1067.   <div class="srcbar-b" id="srcbarBody"></div>
    1068. 

  1068. </aside>
    1069. 

  1069. 

  1070. <div class="lb" id="lb">
    1071. 

  1071.   <div class="lb-close" onclick="closeLB()">✕</div>
    1072. 

  1072.   <div class="lb-nav prev" onclick="stepLB(-1,event)">‹</div>
    1073. 

  1073.   <img id="lbImg" src="" alt="" referrerpolicy="no-referrer">
    1074. 

  1074.   <div class="lb-nav next" onclick="stepLB(1,event)">›</div>
    1075. 

  1075.   <div class="lb-counter" id="lbCounter"></div>
    1076. 

  1076. </div>
    1077. 

  1077. 

  1078. <script>
    1079. 

  1079. "use strict";
    1080. 

  1080. const $ = (s, r=document) => r.querySelector(s);
    1081. 

  1081. const esc = s => String(s ?? "").replace(/[&<>"]/g, c => ({"&":"&amp;","<":"&lt;",">":"&gt;",'"':"&quot;"}[c]));
    1082. 

  1082. const isImgUrl = u => typeof u === "string" &&
    1083. 

  1083.       (/^https?:\/\//.test(u) || /^\/api\/runs\/\d+\/media\//.test(u)) &&
    1084. 

  1084.       (/\.(png|jpe?g|webp|gif|bmp|avif)(\?|$)/i.test(u) || /image|img|oss|cos|xhscdn|sns-|ci\./i.test(u));
    1085. 

  1085. 

  1086. // ── state ──
    1087. 

  1087. let RUNS = [], TOTAL = 0, PAGE = 1, PAGE_SIZE = 20, STATUS = "", CURRENT = null, LOADING = false;
    1088. 

  1088. let LBLIST = [], LBIDX = 0;
    1089. 

  1089. 

  1090. // ── list（翻页加载：首屏 + 滚动到底自动追加下一页）──
    1091. 

  1091. async function loadRuns(reset = true) {
    1092. 

  1092.   if (LOADING) return;
    1093. 

  1093.   LOADING = true;
    1094. 

  1094.   if (reset) { PAGE = 1; RUNS = []; }
    1095. 

  1095.   renderFooter();
    1096. 

  1096.   const r = await fetch(`/api/runs?status=${encodeURIComponent(STATUS)}&page=${PAGE}&page_size=${PAGE_SIZE}`);
    1097. 

  1097.   const d = await r.json();
    1098. 

  1098.   TOTAL = d.total;
    1099. 

  1099.   RUNS = reset ? d.runs : RUNS.concat(d.runs);
    1100. 

  1100.   $("#runCount").textContent = `${TOTAL} 个 Run`;
    1101. 

  1101.   LOADING = false;                 // 先落 loading 再渲染页脚，否则页脚卡在「加载中…」
    1102. 

  1102.   renderList(); renderFooter();
    1103. 

  1103. }
    1104. 

  1104. const hasMore = () => RUNS.length < TOTAL;
    1105. 

  1105. function loadMore() {
    1106. 

  1106.   if (LOADING || !hasMore()) return;
    1107. 

  1107.   PAGE += 1; loadRuns(false);
    1108. 

  1108. }
    1109. 

  1109. 

  1110. // 深链：#run=N[&round=K] 打开任务并定位到第 K 轮（1-based；缺省第一轮）
    1111. 

  1111. let PENDING_ROUND = 1;                  // selectRun → loadSnapshots 之间传递「要停在第几轮」
    1112. 

  1112. const curRound = () => (SNAP && SNAP.loaded && SNAP.list && SNAP.list.length ? SNAP.idx + 1 : 1);
    1113. 

  1113. function parseHash() {
    1114. 

  1114.   const m = /run=(\d+)/.exec(location.hash), r = /round=(\d+)/.exec(location.hash);
    1115. 

  1115.   return { run: m ? +m[1] : null, round: r ? Math.max(1, +r[1]) : null };
    1116. 

  1116. }
    1117. 

  1117. // 当前选中的任务 + 轮次写回地址栏（replaceState 不触发 hashchange，不会回灌 openFromHash）
    1118. 

  1118. function syncHash() {
    1119. 

  1119.   if (CURRENT == null) return;
    1120. 

  1120.   const h = `#run=${CURRENT}` + (SNAP && SNAP.loaded && SNAP.list && SNAP.list.length ? `&round=${SNAP.idx + 1}` : "");
    1121. 

  1121.   if (location.hash !== h) history.replaceState(null, "", h);
    1122. 

  1122. }
    1123. 

  1123. async function openFromHash() {
    1124. 

  1124.   const { run, round } = parseHash();
    1125. 

  1125.   if (run == null) return;
    1126. 

  1126.   if (CURRENT !== run) { await selectRun(run, round || 1); return; }
    1127. 

  1127.   if (round && SNAP && SNAP.loaded) gotoSnap(round - 1);
    1128. 

  1128. }
    1129. 

  1129. window.addEventListener("hashchange", openFromHash);
    1130. 

  1130. 

  1131. function timeAgo(iso) {
    1132. 

  1132.   if (!iso) return "";
    1133. 

  1133.   const s = (Date.now() - new Date(iso).getTime()) / 1000;
    1134. 

  1134.   if (s < 60) return "刚刚";
    1135. 

  1135.   if (s < 3600) return Math.floor(s/60) + "分钟前";
    1136. 

  1136.   if (s < 86400) return Math.floor(s/3600) + "小时前";
    1137. 

  1137.   return Math.floor(s/86400) + "天前";
    1138. 

  1138. }
    1139. 

  1139. const fmtDur = s => s == null ? "—" : (s < 60 ? s.toFixed(1)+"s" : Math.floor(s/60)+"m"+Math.round(s%60)+"s");
    1140. 

  1140. const fmtTok = n => n >= 1000 ? (n/1000).toFixed(1).replace(/\.0$/,"")+"k" : String(n);
    1141. 

  1141. 

  1142. function renderList() {
    1143. 

  1143.   const el = $("#runlist");
    1144. 

  1144.   if (!RUNS.length) { el.innerHTML = `<div class="hint">暂无 Run 记录</div>`; return; }
    1145. 

  1145.   el.innerHTML = RUNS.map(r => `
    1146. 

  1146.     <div class="runcard ${CURRENT===r.id?"active":""}" data-s="${r.status}" onclick="selectRun(${r.id})">
    1147. 

  1147.       <div class="rc-top">
    1148. 

  1148.         <span class="rc-id">${esc(r.run_key || `#${r.id}`)}</span>
    1149. 

  1149.         <span class="rc-agent">${esc(r.agent_name)}</span>
    1150. 

  1150.         <span style="margin-left:auto"><span class="badge ${r.status} ${r.status==='running'?'dot':''}">${r.status}</span></span>
    1151. 

  1151.       </div>
    1152. 

  1152.       <div class="rc-obj">${esc(r.objective || "（无目标描述）")}</div>
    1153. 

  1153.       <div class="rc-meta">
    1154. 

  1154.         <span><b>${r.step_count}</b> 节点</span>
    1155. 

  1155.         <span>replan <b>${r.replan_count}</b></span>
    1156. 

  1156.         <span>${fmtTok(r.input_tokens)}/${fmtTok(r.output_tokens)} tok</span>
    1157. 

  1157.         <span>${r.cost_status === "unavailable" ? "成本 —" : `$${r.cost_usd.toFixed(4)}`}</span>
    1158. 

  1158.         <span style="margin-left:auto">${timeAgo(r.start_time)}</span>
    1159. 

  1159.       </div>
    1160. 

  1160.     </div>`).join("");
    1161. 

  1161. }
    1162. 

  1162. 

  1163. function renderFooter() {
    1164. 

  1164.   const el = $("#pager");
    1165. 

  1165.   if (LOADING) { el.innerHTML = `<span class="pi">加载中…</span>`; return; }
    1166. 

  1166.   if (hasMore()) { el.innerHTML = `<button onclick="loadMore()">加载更多 · ${RUNS.length}/${TOTAL}</button>`; return; }
    1167. 

  1167.   el.innerHTML = RUNS.length ? `<span class="pi">已全部加载 · ${RUNS.length}</span>` : "";
    1168. 

  1168. }
    1169. 

  1169. // 滚动到底部附近自动追加下一页
    1170. 

  1170. $("#runlist").addEventListener("scroll", () => {
    1171. 

  1171.   const el = $("#runlist");
    1172. 

  1172.   if (el.scrollTop + el.clientHeight >= el.scrollHeight - 140) loadMore();
    1173. 

  1173. });
    1174. 

  1174. 

  1175. // ── detail ──
    1176. 

  1176. async function selectRun(id, round = 1) {
    1177. 

  1177.   CURRENT = id; PENDING_ROUND = Math.max(1, round || 1); renderList();
    1178. 

  1178.   if (location.hash !== `#run=${id}&round=${PENDING_ROUND}`) history.replaceState(null, "", `#run=${id}&round=${PENDING_ROUND}`);
    1179. 

  1179.   $("#emptyState")?.remove();
    1180. 

  1180.   $("#main").innerHTML = `<div class="loading">载入任务 #${id} <span class="dots"><span>·</span><span>·</span><span>·</span></span></div>`;
    1181. 

  1181.   const r = await fetch(`/api/runs/${id}`);
    1182. 

  1182.   if (!r.ok) { $("#main").innerHTML = `<div class="loading">任务 #${id} 载入失败</div>`; return; }
    1183. 

  1183.   renderDetail(await r.json());
    1184. 

  1184.   $("#main").scrollTop = 0;
    1185. 

  1185. }
    1186. 

  1186. 

  1187. // ─────────────────────────────────────────────────────────────
    1188. 

  1188. // 数据重构：把「节点时间线」还原成「任务（Task）模型」+「循环过程」
    1189. 

  1189. //   task = { step_id, kind, name, goal, acceptance, inputs, parent_id,
    1190. 

  1190. //            isContainer, status, attempts:[{n,feedback,out,url,verdict,traces}], pending }
    1191. 

  1191. // ─────────────────────────────────────────────────────────────
    1192. 

  1192. function normStep(step) {
    1193. 

  1193.   if (step && typeof step === "object") return step;
    1194. 

  1194.   return { name: String(step ?? ""), kind: "", goal: "", acceptance: [], inputs: [] };
    1195. 

  1195. }
    1196. 

  1196. // result 可能是裸字符串或 {output:{...}, ok}；抽出展示用 output
    1197. 

  1197. function resultOutput(result) {
    1198. 

  1198.   if (result == null) return null;
    1199. 

  1199.   if (typeof result === "string") return { text: result };
    1200. 

  1200.   if (typeof result === "object") return result.output != null ? result.output : result;
    1201. 

  1201.   return { text: String(result) };
    1202. 

  1202. }
    1203. 

  1203. function outUrl(out) { return out && (out.url || (isImgUrl(out.text) ? out.text : null)); }
    1204. 

  1204. function outText(out) {
    1205. 

  1205.   if (out == null) return null;
    1206. 

  1206.   if (out.text != null && !isImgUrl(out.text)) return out.text;
    1207. 

  1207.   if (typeof out === "string") return out;
    1208. 

  1208.   if (out.url) return null;
    1209. 

  1209.   const keys = Object.keys(out).filter(k => k !== "type");
    1210. 

  1210.   return keys.length ? JSON.stringify(out, null, 2) : null;
    1211. 

  1211. }
    1212. 

  1212. 

  1213. function buildModel(steps) {
    1214. 

  1214.   const tasks = new Map();          // key -> task
    1215. 

  1215.   const order = [];
    1216. 

  1216.   const stepKey = (st, nodeIdx) => st.step_id != null ? "s" + st.step_id : "x" + nodeIdx;
    1217. 

  1217.   const ensure = (key, st) => {
    1218. 

  1218.     if (!tasks.has(key)) {
    1219. 

  1219.       tasks.set(key, { key, step_id: st.step_id ?? null, kind: st.kind || "", name: st.name || "",
    1220. 

  1220.         goal: st.goal || "", acceptance: st.acceptance || [], inputs: st.inputs || [],
    1221. 

  1221.         parent_id: st.parent_id ?? null, stage: st.stage || "", category: st.category || "",
    1222. 

  1222.         isContainer: false, attempts: [], pending: false, pendingFeedback: null });
    1223. 

  1223.       order.push(key);
    1224. 

  1224.     }
    1225. 

  1225.     return tasks.get(key);
    1226. 

  1226.   };
    1227. 

  1227.   const merge = (t, st) => {                      // 用最新已知的 step 字段补全任务元信息
    1228. 

  1228.     if (st.name) t.name = st.name;
    1229. 

  1229.     if (st.kind) t.kind = st.kind;
    1230. 

  1230.     if (st.goal) t.goal = st.goal;
    1231. 

  1231.     if (st.acceptance && st.acceptance.length) t.acceptance = st.acceptance;
    1232. 

  1232.     if (st.inputs && st.inputs.length) t.inputs = st.inputs;
    1233. 

  1233.     if (st.parent_id != null) t.parent_id = st.parent_id;
    1234. 

  1234.     if (st.stage) t.stage = st.stage;
    1235. 

  1235.     if (st.category) t.category = st.category;
    1236. 

  1236.   };
    1237. 

  1237. 

  1238.   // 1) 已执行任务（含重试）：按 step_id 归组，每条 past_steps = 一次 attempt
    1239. 

  1239.   for (const s of steps) {
    1240. 

  1240.     if (s.node_type !== "execute") continue;
    1241. 

  1241.     for (const e of (s.delta.past_steps || [])) {
    1242. 

  1242.       const st = normStep(e.step);
    1243. 

  1243.       const t = ensure(stepKey(st, s.step_index), st);
    1244. 

  1244.       merge(t, st);
    1245. 

  1245.       const out = resultOutput(e.result);
    1246. 

  1246.       t.attempts.push({ n: t.attempts.length + 1, nodeIdx: s.step_index,
    1247. 

  1247.         feedback: st._feedback || null, out, url: outUrl(out), text: outText(out),
    1248. 

  1248.         verdict: e.verdict || null });
    1249. 

  1249.     }
    1250. 

  1250.   }
    1251. 

  1251. 

  1252.   // 2) 容器（被拆分的父 Task）：取最后一个带 containers 的 plan 节点
    1253. 

  1253.   let containers = [];
    1254. 

  1254.   for (const s of steps) if (Array.isArray(s.delta.containers) && s.delta.containers.length) containers = s.delta.containers;
    1255. 

  1255.   for (const c of containers) {
    1256. 

  1256.     const st = normStep(c);
    1257. 

  1257.     const t = ensure(stepKey(st, "c"), st);
    1258. 

  1258.     merge(t, st);
    1259. 

  1259.     t.isContainer = true;
    1260. 

  1260.   }
    1261. 

  1261. 

  1262.   // 3) 待执行队列（最新 plan 快照里、尚未成为已执行任务的叶）
    1263. 

  1263.   let queue = [];
    1264. 

  1264.   for (const s of steps) if (Array.isArray(s.delta.plan)) queue = s.delta.plan;   // 最后一次覆盖 = 最新剩余队列
    1265. 

  1265.   queue.forEach((st0, i) => {
    1266. 

  1266.     const st = normStep(st0);
    1267. 

  1267.     const key = st.step_id != null ? "s" + st.step_id : "q" + i;
    1268. 

  1268.     const t = ensure(key, st);
    1269. 

  1269.     merge(t, st);
    1270. 

  1270.     if (!t.attempts.length) t.pending = true;      // 已执行过的（重试待跑）不覆盖其历史
    1271. 

  1271.     if (st._feedback) t.pendingFeedback = st._feedback;
    1272. 

  1272.   });
    1273. 

  1273. 

  1274.   // 计算状态
    1275. 

  1275.   for (const t of tasks.values()) {
    1276. 

  1276.     if (t.isContainer) { t.status = "decomposed"; continue; }
    1277. 

  1277.     if (t.attempts.length) {
    1278. 

  1278.       const v = t.attempts[t.attempts.length - 1].verdict;
    1279. 

  1279.       t.status = v == null ? "done" : (v.pass ? "passed" : (t.pending ? "pending" : "failed"));
    1280. 

  1280.     } else {
    1281. 

  1281.       t.status = "pending";
    1282. 

  1282.     }
    1283. 

  1283.   }
    1284. 

  1284. 

  1285.   // step_id -> 产物 url（供 from_step 参考图解析 + 成品图库）
    1286. 

  1286.   const imgMap = {};
    1287. 

  1287.   for (const t of tasks.values()) {
    1288. 

  1288.     if (t.step_id == null) continue;
    1289. 

  1289.     const last = [...t.attempts].reverse().find(a => a.url);
    1290. 

  1290.     if (last) imgMap[t.step_id] = { url: last.url, name: t.name, pass: t.status === "passed" };
    1291. 

  1291.   }
    1292. 

  1292. 

  1293.   // 组树：顶层任务 + 各自的子任务
    1294. 

  1294.   const list = order.map(k => tasks.get(k));
    1295. 

  1295.   const byId = {};
    1296. 

  1296.   for (const t of list) if (t.step_id != null) byId[t.step_id] = t;
    1297. 

  1297.   const roots = [];
    1298. 

  1298.   for (const t of list) {
    1299. 

  1299.     t.children = list.filter(x => x !== t && x.parent_id != null && x.parent_id === t.step_id);
    1300. 

  1300.     if (t.parent_id == null || !byId[t.parent_id]) roots.push(t);
    1301. 

  1301.   }
    1302. 

  1302.   // 任务层级深度：顶层=0，子任务=父深度+1（沿 parent_id 链上溯，带环保护）
    1303. 

  1303.   let maxDepth = 0;
    1304. 

  1304.   for (const t of list) {
    1305. 

  1305.     let d = 0, cur = t; const seen = new Set();
    1306. 

  1306.     while (cur.parent_id != null && byId[cur.parent_id] && !seen.has(cur.parent_id)) {
    1307. 

  1307.       seen.add(cur.parent_id); cur = byId[cur.parent_id]; d++;
    1308. 

  1308.     }
    1309. 

  1309.     t.depth = d; if (d > maxDepth) maxDepth = d;
    1310. 

  1310.   }
    1311. 

  1311.   return { tasks: list, roots, imgMap, containers, byId, maxDepth };
    1312. 

  1312. }
    1313. 

  1313. function renderDetail(d) {
    1314. 

  1314.   const model = buildModel(d.steps);
    1315. 

  1315. 

  1316.   // 运行概览计数（不再依赖画板节点：直接从步骤序列统计）
    1317. 

  1317.   const fallbackPlanRounds = d.steps.filter(s => s.node_type === "plan" &&
    1318. 

  1318.     (s.delta.reasoning || s.delta.response != null || ("replan_count" in s.delta))).length;
    1319. 

  1319.   const fallbackExecRounds = d.steps.filter(s => s.node_type === "execute").length;
    1320. 

  1320.   const leaves = model.tasks.filter(t => !t.isContainer);
    1321. 

  1321.   const overview = d.overview || {};
    1322. 

  1322.   const planRounds = overview.plan_rounds ?? fallbackPlanRounds;
    1323. 

  1323.   const execRounds = overview.execute_rounds ?? fallbackExecRounds;
    1324. 

  1324.   const taskCount = overview.task_count ?? leaves.length;
    1325. 

  1325.   const passed = overview.passed ?? leaves.filter(t => t.status === "passed").length;
    1326. 

  1326.   const failed = overview.failed ?? leaves.filter(t => t.status === "failed").length;
    1327. 

  1327.   const retries = overview.retries ?? leaves.reduce((n, t) => n + Math.max(0, t.attempts.length - 1), 0);
    1328. 

  1328.   const gallery = Object.keys(model.imgMap).map(k => ({ sid: k, ...model.imgMap[k] }))
    1329. 

  1329.                         .sort((a, b) => (+a.sid) - (+b.sid));
    1330. 

  1330. 

  1331.   let html = `
    1332. 

  1332.     <div class="topbar">
    1333. 

  1333.       <span class="tb-id">${esc(d.run_key || `#${d.id}`)}</span>
    1334. 

  1334.       <span class="tb-obj">${esc(d.objective || "")}</span>
    1335. 

  1335.       <span class="tb-right">
    1336. 

  1336.         <span class="badge ${d.status} ${d.status==='running'?'dot':''}">${d.status}</span>
    1337. 

  1337.         <button class="icon-btn" title="刷新" onclick="selectRun(${d.id}, curRound())">⟳</button>
    1338. 

  1338.       </span>
    1339. 

  1339.     </div>
    1340. 

  1340.     <div class="detailbody">
    1341. 

  1341.       <div class="hero">
    1342. 

  1342.         <div class="hero-obj">${esc(d.objective || "（无目标描述）")}</div>
    1343. 

  1343.         <div class="hero-model">${esc(d.agent_name)} · ${esc(d.model_name)}</div>
    1344. 

  1344.         <div class="loopwrap">
    1345. 

  1345.           <div class="loopdiagram">
    1346. 

  1346.             <div class="lp-node plan"><span class="lp-t">PLAN</span><span class="lp-c">${planRounds}</span></div>
    1347. 

  1347.             <div class="lp-arrows">
    1348. 

  1348.               <span class="a1">──▶</span><span class="lbl">loop</span><span class="a2">◀──</span>
    1349. 

  1349.             </div>
    1350. 

  1350.             <div class="lp-node exec"><span class="lp-t">EXECUTE</span><span class="lp-c">${execRounds}</span></div>
    1351. 

  1351.           </div>
    1352. 

  1352.           <div class="loopstats">
    1353. 

  1353.             <div class="lstat"><div class="k">任务</div><div class="v">${taskCount}</div></div>
    1354. 

  1354.             <div class="lstat"><div class="k">达标</div><div class="v pass">${passed}</div></div>
    1355. 

  1355.             <div class="lstat"><div class="k">未达标</div><div class="v ${failed?'fail':''}">${failed}</div></div>
    1356. 

  1356.             <div class="lstat"><div class="k">重试</div><div class="v ${retries?'retry':''}">${retries}</div></div>
    1357. 

  1357.             <div class="lstat"><div class="k">重规划</div><div class="v plan">${d.replan_count}</div></div>
    1358. 

  1358.             <div class="lstat"><div class="k">Tokens</div><div class="v">${fmtTok(d.input_tokens)}<small>/${fmtTok(d.output_tokens)}</small></div></div>
    1359. 

  1359.             <div class="lstat"><div class="k">成本</div><div class="v">${d.cost_status === "unavailable" ? "—" : `$${d.cost_usd.toFixed(4)}`}</div></div>
    1360. 

  1360.             <div class="lstat"><div class="k">耗时</div><div class="v">${fmtDur(d.duration_sec)}</div></div>
    1361. 

  1361.           </div>
    1362. 

  1362.         </div>
    1363. 

  1363.         ${d.error_message ? `<div class="err-box">⚠ ${esc(d.error_message)}</div>` : ""}
    1364. 

  1364.       </div>`;
    1365. 

  1365. 

  1366.   // 结果视图内容：最终交付（final_output + 成品图库）
    1367. 

  1367.   let resultHtml;
    1368. 

  1368.   if (d.final_output || gallery.length) {
    1369. 

  1369.     resultHtml = `
    1370. 

  1370.       <div class="sec-title"><span class="t">最终交付</span><span class="line"></span></div>
    1371. 

  1371.       <div class="delivery">
    1372. 

  1372.         <div class="delivery-h">✓ 成品 / response</div>
    1373. 

  1373.         ${d.final_output ? `<div class="delivery-b">${esc(d.final_output)}</div>` : ""}
    1374. 

  1374.         ${gallery.length ? `<div class="gallery">${gallery.map(g => `
    1375. 

  1375.           <div class="gcard">
    1376. 

  1376.             <img src="${esc(g.url)}" referrerpolicy="no-referrer" onclick="openLB('${esc(g.url)}')" onerror="imgFail(this)">
    1377. 

  1377.             <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>
    1378. 

  1378.           </div>`).join("")}</div>` : ""}
    1379. 

  1379.       </div>`;
    1380. 

  1380.   } else {
    1381. 

  1381.     resultHtml = `<div class="snap-empty">◍ 暂无最终交付<br><span style="font-size:11px">（运行尚未产出成品 / response）</span></div>`;
    1382. 

  1382.   }
    1383. 

  1383. 

  1384.   // 视图 Tab：结果视图（交付成果）/ 过程视图（Plan→执行→评估 大画板，默认）
    1385. 

  1385.   html += `
    1386. 

  1386.     <div class="view-bar">
    1387. 

  1387.       <div class="view-tabs">
    1388. 

  1388.         <button class="view-tab" data-v="result" onclick="switchView('result')"><span class="vt-ic">✦</span>结果视图</button>
    1389. 

  1389.         <button class="view-tab active" data-v="process" onclick="switchView('process')"><span class="vt-ic">◫</span>过程视图</button>
    1390. 

  1390.       </div>
    1391. 

  1391.       <button class="fs-enter" onclick="enterBoardFullscreen()" title="全屏查看过程视图（Esc 退出）"><span class="vt-ic">⛶</span>全屏</button>
    1392. 

  1392.     </div>
    1393. 

  1393.     <div class="view-pane" id="tabResult">${resultHtml}</div>
    1394. 

  1394.     <div class="view-pane active" id="tabProcess"><div id="snapView"></div></div>
    1395. 

  1395.   </div>`;
    1396. 

  1396. 

  1397.   $("#main").innerHTML = html;
    1398. 

  1398.   SNAP = { runId: d.id, list: null, objective: d.objective || "", idx: 0, loaded: false,
    1399. 

  1399.            agent: d.agent_name || "production" };
    1400. 

  1400.   loadSnapshots();
    1401. 

  1401. }
    1402. 

  1402. 

  1403. // 视图切换：结果 / 过程。切到过程视图时重绘画板连线（隐藏时元素无尺寸，无法测量）。
    1404. 

  1404. function switchView(v) {
    1405. 

  1405.   document.querySelectorAll(".view-tab").forEach(b => b.classList.toggle("active", b.dataset.v === v));
    1406. 

  1406.   document.querySelectorAll(".view-pane").forEach(p =>
    1407. 

  1407.     p.classList.toggle("active", p.id === (v === "result" ? "tabResult" : "tabProcess")));
    1408. 

  1408.   if (v === "process") requestAnimationFrame(() => layoutBoard());
    1409. 

  1409. }
    1410. 

  1410. 

  1411. const clip = (s, n) => { s = String(s ?? "").replace(/\s+/g, " ").trim(); return s.length > n ? s.slice(0, n) + " …" : s; };
    1412. 

  1412. 

  1413. function openDrawer() { $("#drawer").classList.add("open"); $("#drawerScrim").classList.add("open"); }
    1414. 

  1414. function closeDrawer() {
    1415. 

  1415.   $("#drawer").classList.remove("open");
    1416. 

  1416.   $("#drawerScrim").classList.remove("open");
    1417. 

  1417.   if (SNAP) SNAP.openNodeSid = null;
    1418. 

  1418. }
    1419. 

  1419. 

  1420. // ── images ──
    1421. 

  1421. function imgFail(img) {
    1422. 

  1422.   const a = document.createElement("a");
    1423. 

  1423.   a.href = img.src; a.target = "_blank"; a.className = "imgfail" + (img.classList.contains("ref")?" ref":"");
    1424. 

  1424.   a.textContent = "图片加载失败 · 点击打开";
    1425. 

  1425.   img.replaceWith(a);
    1426. 

  1426. }
    1427. 

  1427. // 收集当前上下文（抽屉开→详情，否则→画板）里可放大的图，供左右切换。含画板过程卡缩略图（无 class）与详情各图。
    1428. 

  1428. function collectImages() {
    1429. 

  1429.   const scope = $("#drawer").classList.contains("open") ? "#drawer" : "#main";
    1430. 

  1430.   return [...document.querySelectorAll(
    1431. 

  1431.     `${scope} img.thumb, ${scope} .mmc-thumb, ${scope} .gcard img, ${scope} .pc-thumbs img, ${scope} .imgs img, ${scope} .pp-imgs img`
    1432. 

  1432.   )].map(i => i.getAttribute("src")).filter(Boolean);
    1433. 

  1433. }
    1434. 

  1434. function openLB(url) {
    1435. 

  1435.   const all = [...new Set(collectImages())];
    1436. 

  1436.   LBIDX = all.indexOf(url);
    1437. 

  1437.   if (LBIDX < 0) { all.unshift(url); LBIDX = 0; }   // 点击图不在集合里 → 纳入并选中，绝不回退到第一张
    1438. 

  1438.   LBLIST = all;
    1439. 

  1439.   showLB();
    1440. 

  1440.   $("#lb").classList.add("open");
    1441. 

  1441. }
    1442. 

  1442. function showLB() { $("#lbImg").src = LBLIST[LBIDX]; $("#lbCounter").textContent = `${LBIDX+1} / ${LBLIST.length}`; }
    1443. 

  1443. function stepLB(d, ev) { ev && ev.stopPropagation(); LBIDX = (LBIDX + d + LBLIST.length) % LBLIST.length; showLB(); }
    1444. 

  1444. function closeLB() { $("#lb").classList.remove("open"); }
    1445. 

  1445. $("#lb").addEventListener("click", e => { if (e.target.id === "lb") closeLB(); });
    1446. 

  1446. document.addEventListener("keydown", e => {
    1447. 

  1447.   if ($("#lb").classList.contains("open")) {
    1448. 

  1448.     if (e.key === "Escape") closeLB();
    1449. 

  1449.     if (e.key === "ArrowLeft") stepLB(-1);
    1450. 

  1450.     if (e.key === "ArrowRight") stepLB(1);
    1451. 

  1451.     return;
    1452. 

  1452.   }
    1453. 

  1453.   const sv = $("#snapView");
    1454. 

  1454.   if (e.key === "Escape" && sv && sv.classList.contains("fs")) { boardFullscreen(); e.preventDefault(); return; }
    1455. 

  1455.   if ($("#srcbar").classList.contains("open") && e.key === "Escape") { closeSrcBar(); return; }
    1456. 

  1456.   if ($("#drawer").classList.contains("open")) { if (e.key === "Escape") closeDrawer(); return; }
    1457. 

  1457.   // 规划演进：左右键在快照序列间步进（仅过程视图可见时）
    1458. 

  1458.   if (SNAP && SNAP.loaded && SNAP.list && SNAP.list.length && $("#tabProcess") && $("#tabProcess").classList.contains("active")) {
    1459. 

  1459.     if (e.key === "ArrowLeft") { gotoSnap(SNAP.idx - 1); e.preventDefault(); }
    1460. 

  1460.     if (e.key === "ArrowRight") { gotoSnap(SNAP.idx + 1); e.preventDefault(); }
    1461. 

  1461.   }
    1462. 

  1462. });
    1463. 

  1463. 

  1464. // ═══════════════════════════════════════════════════════════════════════════
    1465. 

  1465. //  规划演进 · 思维导图（快照序列）
    1466. 

  1466. //  每个快照 = 一份完整 Task 树状态；步进器在快照间切换，整树重绘为该轮状态；
    1467. 

  1467. //  高亮相邻快照 diff（新增/调整/移除）+ 侧栏显示 reasoning + 本轮教训 + diff 摘要。
    1468. 

  1468. // ═══════════════════════════════════════════════════════════════════════════
    1469. 

  1469. let SNAP = null;
    1470. 

  1470. let BOARD = null;
    1471. 

  1471. 

  1472. async function loadSnapshots() {
    1473. 

  1473.   const panel = $("#snapView");
    1474. 

  1474.   panel.innerHTML = `<div class="loading">载入规划快照 <span class="dots"><span>·</span><span>·</span><span>·</span></span></div>`;
    1475. 

  1475.   const r = await fetch(`/api/runs/${SNAP.runId}/snapshots`);
    1476. 

  1476.   if (!r.ok) { panel.innerHTML = `<div class="snap-empty">规划快照载入失败</div>`; return; }
    1477. 

  1477.   const d = await r.json();
    1478. 

  1478.   SNAP.list = d.snapshots || []; SNAP.objective = d.objective || SNAP.objective; SNAP.runStatus = d.status;
    1479. 

  1479.   MODULES = await fetchModules(SNAP.runId);       // 模块调用树；无模块行的 run → 画板显示「本轮无节点记录」
    1480. 

  1480.   ANN = await fetchAnnotations(SNAP.runId);       // 旁路标注（可能为空 → 卡上不画那块，一切照旧）
    1481. 

  1481.   SNAP.loaded = true;
    1482. 

  1482.   SNAP.idx = Math.max(0, Math.min(SNAP.list.length - 1, PENDING_ROUND - 1));   // 深链指定的轮次；缺省第一轮
    1483. 

  1483.   if (!SNAP.list.length) {
    1484. 

  1484.     panel.innerHTML = `<div class="snap-empty">◍ 本次运行暂无规划快照<br><span style="font-size:11px">（尚未产生任何 plan 轮次）</span></div>`;
    1485. 

  1485.     return;
    1486. 

  1486.   }
    1487. 

  1487.   // 画板骨架（建一次；world 里每轮重摆节点）：可平移(拖拽)/缩放(滚轮)的白板。
    1488. 

  1488.   panel.innerHTML = `
    1489. 

  1489.     <div class="snap-stepper" id="snapStepper"></div>
    1490. 

  1490.     <div class="board" id="board">
    1491. 

  1491.       <div class="board-world" id="boardWorld"></div>
    1492. 

  1492.       <div class="board-ctrls">
    1493. 

  1493.         <button title="按当前 Loop 拉取最新" onclick="refreshLoop(this)">⟳</button>
    1494. 

  1494.         <button title="放大" onclick="boardZoom(1.15)">＋</button>
    1495. 

  1495.         <button title="缩小" onclick="boardZoom(0.87)">－</button>
    1496. 

  1496.         <button title="适应窗口" onclick="boardFit()">⤢</button>
    1497. 

  1497.         <button title="全屏 / 沉浸" id="btnFs" onclick="boardFullscreen()">⛶</button>
    1498. 

  1498.       </div>
    1499. 

  1499.       <div class="board-tip">双指滑动平移 · 双指捏合 / ⌘+滚轮缩放 · 点卡片看详情</div>
    1500. 

  1500.     </div>`;
    1501. 

  1501.   BOARD = { z: 1, panX: 0, panY: 0, worldW: 0, worldH: 0, fitted: false, contentFitted: false, suppressClick: false };
    1502. 

  1502.   attachBoardPan();
    1503. 

  1503.   renderSnapshot();
    1504. 

  1504.   syncHash();                 // 轮次可能被 clamp（如深链的 round 超出实际轮数），以真实落点回写
    1505. 

  1505. }
    1506. 

  1506. 

  1507. // ── 手动刷新（替代自动轮询）：按当前所在 Loop 重新拉取快照并重渲染 ──
    1508. 

  1508. // 停留在当前 Loop（idx 不跳到最新轮）；抽屉在看某任务详情/执行过程时，重开以刷新 meta + 实时 trace。
    1509. 

  1509. async function refreshLoop(btn) {
    1510. 

  1510.   if (!SNAP || !SNAP.runId) return;
    1511. 

  1511.   if (btn) btn.classList.add("spinning");
    1512. 

  1512.   try {
    1513. 

  1513.     const r = await fetch(`/api/runs/${SNAP.runId}/snapshots`);
    1514. 

  1514.     const d = r.ok ? await r.json() : null;
    1515. 

  1515.     const list = d && d.snapshots || [];
    1516. 

  1516.     const mods = await fetchModules(SNAP.runId);
    1517. 

  1517.     if (d && SNAP && SNAP.runId === d.run_id && list.length) {
    1518. 

  1518.       SNAP.list = list; SNAP.runStatus = d.status;
    1519. 

  1519.       if (mods) MODULES = mods;          // 重建骨架 = 丢掉旧缓存，当前轮会按需重拉（run 在跑时要拿最新）
    1520. 

  1520.       SNAP.idx = Math.min(SNAP.idx, list.length - 1);
    1521. 

  1521.       await renderSnapshot();
    1522. 

  1522.       if ($("#drawer").classList.contains("open") && SNAP.openNodeSid != null)
    1523. 

  1523.         openSnapNode(SNAP.openNodeSid, SNAP.openNodePlanOnly);
    1524. 

  1524.     }
    1525. 

  1525.   } catch (e) {}
    1526. 

  1526.   if (btn) setTimeout(() => btn.classList.remove("spinning"), 500);
    1527. 

  1527. }
    1528. 

  1528. 

  1529. const PLAN_KIND = { initial: "初始规划", advance: "推进（审视后未改规划）", replan: "重规划", finalize: "收尾" };
    1530. 

  1530. 

  1531. // 轮次标签：优先用 **planner 自述的本轮短标题**（决策里的 title，它说得出这一轮到底在干什么）；
    1532. 

  1532. // 没有（老 run / 没填）才退回按 kind 归类的通用说法。
    1533. 

  1533. const roundLabel = (s, k) => (s && s.title) || PLAN_KIND[(s || {}).kind]
    1534. 

  1534.   || ((s || {}).is_final ? "收尾" : `第 ${k + 1} 轮`);
    1535. 

  1535. 

  1536. function gotoSnap(i) {
    1537. 

  1537.   if (!SNAP || !SNAP.list) return;
    1538. 

  1538.   SNAP.idx = Math.max(0, Math.min(SNAP.list.length - 1, i));
    1539. 

  1539.   if (BOARD) { BOARD.fitted = false; BOARD.contentFitted = false; }   // 切换 Loop → 新面板自适应窗口，不保留上次位置/缩放
    1540. 

  1540.   renderSnapshot();
    1541. 

  1541.   syncHash();
    1542. 

  1542. }
    1543. 

  1543. 

  1544. function renderSnapStepper() {
    1545. 

  1545.   const el = $("#snapStepper"); if (!el) return;
    1546. 

  1546.   const n = SNAP.list.length, i = SNAP.idx;
    1547. 

  1547.   const pills = SNAP.list.map((s, k) => {
    1548. 

  1548.     const label = roundLabel(s, k);
    1549. 

  1549.     const changed = s.tree_changed;                       // 精准标记：本轮 plan 是否改了 Task
    1550. 

  1550.     const running = SNAP.runStatus === "running" && k === SNAP.list.length - 1;
    1551. 

  1551.     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（推进/同结构）"}">
    1552. 

  1552.       <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>`;
    1553. 

  1553.   }).join("");
    1554. 

  1554.   el.innerHTML = `
    1555. 

  1555.     <button class="snap-arrow" ${i <= 0 ? "disabled" : ""} onclick="gotoSnap(${i - 1})" title="上一轮（←）">◀</button>
    1556. 

  1556.     <div class="snap-track">${pills}</div>
    1557. 

  1557.     <button class="snap-arrow" ${i >= n - 1 ? "disabled" : ""} onclick="gotoSnap(${i + 1})" title="下一轮（→）">▶</button>`;
    1558. 

  1558. }
    1559. 

  1559. 

  1560. const SNAP_STATUS = { passed: "通过", failed: "未达标", pending: "待执行", running: "执行中",
    1561. 

  1561.                       decomposed: "容器", planned: "已规划" };
    1562. 

  1562. 

  1563. // 节点显示状态（含 running：run 仍在跑、最新快照里的下一个待执行叶实际正在执行）——卡片与抽屉共用，保证一致
    1564. 

  1564. function nodeDisplayStatus(node) {
    1565. 

  1565.   if (node.role === "container") return "decomposed";
    1566. 

  1566.   if (node.status === "pending" && node.step_id === SNAP.execSid) return "running";
    1567. 

  1567.   return node.status;
    1568. 

  1568. }
    1569. 

  1569. 

  1570. // 快照只在规划变化时落库：某任务执行期间不产新快照，故最新快照里它仍显示 pending。
    1571. 

  1571. // 若 run 仍在跑且这是最新快照，则「下一个待执行叶」实际正在执行 → 标 running。
    1572. 

  1572. function computeExecuting(snap) {
    1573. 

  1573.   if (SNAP.runStatus !== "running" || SNAP.idx !== SNAP.list.length - 1) return null;
    1574. 

  1574.   const pend = ((snap.tree && snap.tree.nodes) || [])
    1575. 

  1575.     .filter(n => n.role !== "container" && n.status === "pending")
    1576. 

  1576.     .sort((a, b) => (a.step_id ?? 1e9) - (b.step_id ?? 1e9));
    1577. 

  1577.   return pend.length ? pend[0].step_id : null;
    1578. 

  1578. }
    1579. 

  1579. 

  1580. async function renderSnapshot() {
    1581. 

  1581.   if (!SNAP || !SNAP.list) return;
    1582. 

  1582.   const snap = SNAP.list[SNAP.idx];
    1583. 

  1583.   SNAP.execSid = computeExecuting(snap);
    1584. 

  1584.   SNAP.roundExecSid = (snap.round_execution || {}).task_id ?? null;   // 本轮执行的任务 → 思维导图里高亮
    1585. 

  1585.   renderSnapStepper();
    1586. 

  1586.   if (MODULES && !MODULES.byIdx[SNAP.idx]) {                          // 本轮还没拉过 → 按需拉
    1587. 

  1587.     const w = $("#boardWorld");
    1588. 

  1588.     if (w) w.innerHTML = `<div class="loading">载入本轮模块树 <span class="dots"><span>·</span><span>·</span><span>·</span></span></div>`;
    1589. 

  1589.     const want = SNAP.idx;
    1590. 

  1590.     await ensureRound(want);
    1591. 

  1591.     if (want !== SNAP.idx) return;                                    // 期间又切了轮 → 让后一次接管
    1592. 

  1592.   }
    1593. 

  1593.   renderBoard();
    1594. 

  1594. }
    1595. 

  1595. 

  1596. // 任务图标：据角色 / 生成类型给出直观图标（category 为自由文本，正则匹配 + 兜底）。
    1597. 

  1597. function taskIcon(node) {
    1598. 

  1598.   if (node.role === "container") return "🗂";
    1599. 

  1599.   const c = String(node.category || "");
    1600. 

  1600.   if (/组合/.test(c)) return "🧩";
    1601. 

  1601.   if (/变化|变换|改/.test(c)) return "🔀";
    1602. 

  1602.   if (/完整|整图|图片/.test(c)) return "🖼️";
    1603. 

  1603.   if (/素材/.test(c)) return "🎨";
    1604. 

  1604.   return "📌";
    1605. 

  1605. }
    1606. 

  1606. 

  1607. // **统一的任务卡**：plan 输出的任务列表、输入里的任务槽、生成输出里的那个任务，全用这一张。
    1608. 

  1608. // opts.withResult=false → 只呈现任务本身（plan 刚排的活，还没执行）。
    1609. 

  1609. function taskCard(node, opts) {
    1610. 

  1610.   opts = opts || {};
    1611. 

  1611.   const sid = node.step_id;
    1612. 

  1612.   // planned：plan 刚排出来的计划态（状态一律「已规划」）；showResult=false：保留真实状态但不显示执行结果
    1613. 

  1613.   // badge：**用「本轮对它做了什么」占掉徽标位**（plan 的 ops / 下一步）——那一刻谈执行态状态没有意义。
    1614. 

  1614.   const planned = opts.planned === true && node.role !== "container";
    1615. 

  1615.   const status = planned ? "planned" : nodeDisplayStatus(node);
    1616. 

  1616.   const r = (planned || opts.badge || opts.showResult === false) ? null : node.result;
    1617. 

  1617.   let body = "";
    1618. 

  1618.   if (node.role === "container") {
    1619. 

  1619.     body = `<div class="mmc-kidsum"><span>◫ 已拆分，由子任务兑现</span></div>`;
    1620. 

  1620.   } else if (r) {
    1621. 

  1621.     const isImg = r.product_kind === "image" && r.product_url;
    1622. 

  1622.     body = `<div class="mmc-result">
    1623. 

  1623.       ${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'">` : ""}
    1624. 

  1624.       <div class="mmc-sum">${esc(r.summary || clip(r.product_text || "", 90)) || "<span style='color:var(--faint)'>（无摘要）</span>"}</div></div>`;
    1625. 

  1625.     if (r.verdict_pass === false) body += `<div class="mmc-fail">✗ ${esc(clip(r.verdict_reason || "", 90))}</div>`;
    1626. 

  1626.   }
    1627. 

  1627.   const attrs = (node.stage || node.category)
    1628. 

  1628.     ? `<div class="mmc-attrs">${node.stage ? `<span class="attr-chip stage"><span class="k">阶段</span>${esc(node.stage)}</span>` : ""}${
    1629. 

  1629.         node.category ? `<span class="attr-chip cat"><span class="k">操作</span>${esc(node.category)}</span>` : ""}</div>` : "";
    1630. 

  1630.   const cur = String(sid) === String(SNAP.roundExecSid) ? "mm-round-exec" : "";
    1631. 

  1631.   // 本轮被 update 改过：卡上直接标出改了哪几个字段（点开看逐字段 diff）
    1632. 

  1632.   const mod = (opts.modified && opts.modified.length)
    1633. 

  1633.     ? `<div class="mmc-chgs">${opts.modified.map(f => `<span class="chg-f">~ ${esc(f)}</span>`).join("")}</div>` : "";
    1634. 

  1634.   const b = opts.badge;
    1635. 

  1635.   return `<div class="mm-card mm-mini ${b ? `mm-op op-${esc(b.key)}` : `st-${status}`} ${cur} ${
    1636. 

  1636.     opts.modified ? "mm-modified" : ""}" data-sid="${esc(sid)}" onclick="${
    1637. 

  1637.     opts.click ? opts.click : `openSnapNode('${esc(sid)}',${planned || !!b})`}">
    1638. 

  1638.     <div class="mmc-top"><span class="mmc-sid">#${esc(sid)}</span>
    1639. 

  1639.       <span class="mmc-badge ${b ? `op-${esc(b.key)}` : status}">${
    1640. 

  1640.         b ? esc(b.text) : (SNAP_STATUS[status] || status)}</span></div>
    1641. 

  1641.     <div class="mmc-name">${taskIcon(node)} ${esc(node.name || "任务")}</div>
    1642. 

  1642.     ${node.goal ? `<div class="mmc-goal">${esc(node.goal)}</div>` : ""}
    1643. 

  1643.     ${attrs}${mod}${body}</div>`;
    1644. 

  1644. }
    1645. 

  1645. 

  1646. 

  1647. // 行内字符级 diff（LCS）：把旧串→新串的差异切成 eq/del/ins 片段。中文按字、英文数字按词、其余按符号切分，
    1648. 

  1648. // 保证 diff 粒度可读（非逐字节）。相邻同类片段合并。
    1649. 

  1649. function diffInline(oldS, newS) {
    1650. 

  1650.   const tok = s => String(s ?? "").match(/[\u4e00-\u9fff]|[A-Za-z0-9_]+|\s+|[^\s]/g) || [];
    1651. 

  1651.   const a = tok(oldS), b = tok(newS), n = a.length, m = b.length;
    1652. 

  1652.   const dp = Array.from({ length: n + 1 }, () => new Int32Array(m + 1));
    1653. 

  1653.   for (let i = n - 1; i >= 0; i--) for (let j = m - 1; j >= 0; j--)
    1654. 

  1654.     dp[i][j] = a[i] === b[j] ? dp[i + 1][j + 1] + 1 : Math.max(dp[i + 1][j], dp[i][j + 1]);
    1655. 

  1655.   const out = [];
    1656. 

  1656.   const push = (type, s) => { const last = out[out.length - 1]; if (last && last.type === type) last.s += s; else out.push({ type, s }); };
    1657. 

  1657.   let i = 0, j = 0;
    1658. 

  1658.   while (i < n && j < m) {
    1659. 

  1659.     if (a[i] === b[j]) { push("eq", a[i]); i++; j++; }
    1660. 

  1660.     else if (dp[i + 1][j] >= dp[i][j + 1]) { push("del", a[i]); i++; }
    1661. 

  1661.     else { push("ins", b[j]); j++; }
    1662. 

  1662.   }
    1663. 

  1663.   while (i < n) { push("del", a[i]); i++; }
    1664. 

  1664.   while (j < m) { push("ins", b[j]); j++; }
    1665. 

  1665.   return out;
    1666. 

  1666. }
    1667. 

  1667. function renderInlineDiff(oldS, newS) {
    1668. 

  1668.   return diffInline(oldS, newS).map(p =>
    1669. 

  1669.     p.type === "eq" ? esc(p.s)
    1670. 

  1670.       : p.type === "del" ? `<span class="df-del">${esc(p.s)}</span>`
    1671. 

  1671.         : `<span class="df-ins">${esc(p.s)}</span>`).join("");
    1672. 

  1672. }
    1673. 

  1673. // modified 节点的 changes → 逐字段「旧 → 新」对比（name/goal 展示具体字符级 diff，而非仅「改名/目标调整」）。
    1674. 

  1674. function renderChangesDiff(snap, sid) {
    1675. 

  1675.   const m = (snap.diff && snap.diff.modified || []).find(x => String(x.step_id) === String(sid));
    1676. 

  1676.   if (!m || !m.changes) return "";
    1677. 

  1677.   const c = m.changes, rows = [];
    1678. 

  1678.   const row = (k, v) => rows.push(`<div class="chg-row"><span class="chg-k">${k}</span><div class="chg-v">${v}</div></div>`);
    1679. 

  1679.   const pid = v => v == null ? "顶层" : "#" + esc(v);
    1680. 

  1680.   if (c.role) row("角色", c.role[0] === "leaf" && c.role[1] === "container"
    1681. 

  1681.     ? "叶子 → 容器（拆分为子任务）" : `${esc(c.role[0])} → ${esc(c.role[1])}`);
    1682. 

  1682.   if (c.parent_id) row("父任务", `${pid(c.parent_id[0])} → ${pid(c.parent_id[1])}`);
    1683. 

  1683.   if (c.name) row("名称", renderInlineDiff(c.name[0], c.name[1]));
    1684. 

  1684.   if (c.goal) row("目标", renderInlineDiff(c.goal[0], c.goal[1]));
    1685. 

  1685.   return rows.join("");
    1686. 

  1686. }
    1687. 

  1687. 

  1688. // ═══ 画板：**渲染后端给的模块调用树**（不解析、不推断）═══════════════════════
    1689. 

  1689. // 后端 /api/runs/{id}/flat?round=N 给一轮的运行实例，每个实例是同样的四段：
    1690. 

  1690. //   · input   {blocks:[{name,text,images,source,origin}]}  本次映射进来的输入（块名=结构、块值=变化）
    1691. 

  1691. //   · module  {kind, spec, view}                           这个模块的定义（agent/tool/workflow 各自的形状）
    1692. 

  1692. //   · flow    [子模块 | 事件]，已按 seq 归并（同 seq = 同一并发列）
    1693. 

  1693. //   · output  {data, ok, images}                           本次产物/结论（真 JSON）
    1694. 

  1694. // 前端只做布局与绘制。
    1695. 

  1695. 

  1696. // 一个标准节点：标题 / [输入] ─连线→ ┌结构 │ 运行流程┐ → [输出]
    1697. 

  1697. // 输入在结构**左侧**：每个输入槽用连线接到结构里同名的槽位 chip（逐槽一一对应，一眼可见）。
    1698. 

  1698. 

  1699. // 卡片登记：把一组卡放进 SNAP.cards[key]（点击查看详情按 key+下标取回）
    1700. 

  1700. function putCards(key, cards) { SNAP.cards[key] = cards; return cards; }
    1701. 

  1701. 

  1702. // 输入 / 输出锚点列：用**与运行流程完全相同的卡片组件**（renderPCard）——同一种东西只有一种画法。
    1703. 

  1703. 

  1704. // 输入槽 → 卡（每槽一张：槽名 + **本次**取值 + 该槽携带的图）。**空槽不出卡** ——
    1705. 

  1705. // 「结构里声明了这一槽、但本轮没有内容」只由结构侧那张「输入」卡表达（该槽位置灰，
    1706. 

  1706. // 详情里仍写着「本轮为空（未进入 prompt）」）。输入列只放真正进了 prompt 的东西，
    1707. 

  1707. // 不再排一列「空」卡占着版面。
    1708. 

  1708. const blockCards = blocks => (blocks || []).filter(b => b.filled !== false).map(b => ({
    1709. 

  1709.   label: b.title || b.name, icon: "⇢", key: b.key, hint: b.hint,
    1710. 

  1710.   tasks: b.item_type === "task" ? (b.items || []) : null,     // 任务型槽 → 用任务卡渲染
    1711. 

  1711.   // 有图就不再把 URL 当文字摘要重复一遍（图本身就是内容，URL 在详情里看）
    1712. 

  1712.   summary: b.text ? clip(b.text, 150) : ((b.images || []).length ? `${b.images.length} 张图` : ""),
    1713. 

  1713.   images: b.images || [],
    1714. 

  1714.   detail: { title: b.name, text: b.text || "", images: b.images || [] },
    1715. 

  1715. }));
    1716. 

  1716. 

  1717. // 结构 → 卡（system prompt / 输入槽位表 / 工具与模型）——全部来自后端申报的 structure
    1718. 

  1718. // 节点「结构」→ 卡片：**有什么画什么**。节点是 Agent 还是工序、还是别的形态，由产生侧在
    1719. 

  1719. // structure.node_kind / system_prompt 里申报，前端不预设它一定是哪一种。
    1720. 

  1720. // 结构按 kind 分化：workflow 走 flowchartHtml（流程图）、code 走 sourceHtml（源码），这里管 agent 那套卡。
    1721. 

  1721. function structCards(st, input, usedTools) {
    1722. 

  1722.   const cards = [];
    1723. 

  1723.   if (!st) return cards;
    1724. 

  1724.   if (st.summary) cards.push({ label: "这是什么", icon: "◍", summary: st.summary,
    1725. 

  1725.     chips: st.node_kind ? [st.node_kind] : [], detail: { title: "节点说明", text: st.summary } });
    1726. 

  1726.   // 调模型的模块（agent / llm）：system prompt
    1727. 

  1727.   if (st.system_prompt) cards.push({ label: "System Prompt", icon: "⌘", summary: clip(st.system_prompt, 110),
    1728. 

  1728.     detail: { title: "System Prompt", text: st.system_prompt } });
    1729. 

  1729.   // 输入：固定由哪几段构成 + 本轮各段取值。**就是输入**——不叫「上下文工程」、也不表达「哪段交给谁」
    1730. 

  1730.   // （那是下游各模块自己的输入，在它们的定义里；在这里再说一遍就是把分发规则冒充成自己的结构）。
    1731. 

  1731.   const schema = st.input_schema || [];
    1732. 

  1732.   if (schema.length) {
    1733. 

  1733.     const val = {};
    1734. 

  1734.     ((input || {}).blocks || []).forEach(b => val[b.key || b.name] = b);
    1735. 

  1735.     // 不写摘要：「由几段构成、几段有内容」下面那张槽位表逐行都写着（有内容的亮、空的置灰），
    1736. 

  1736.     // 再用一句话复述一遍就是同一件事的第二处表达。
    1737. 

  1737.     cards.push({ label: "输入", icon: "⿻",
    1738. 

  1738.       slots: schema.map(x => ({ key: x.key || x.name, hint: x.hint,
    1739. 

  1739.         name: (x.title || x.name), filled: !!(val[x.key || x.name] || {}).filled })),
    1740. 

  1740.       detail: { title: "输入 · 每一段 ↔ 本轮取值",
    1741. 

  1741.         // 逐槽分块、**完整**呈现本轮取值（不截断）——要核对模型到底看到了什么
    1742. 

  1742.         sections: schema.map(x => {
    1743. 

  1743.           const v = val[x.key || x.name] || {};
    1744. 

  1744.           return {
    1745. 

  1745.             label: (x.title || x.name) + (x.required ? "（必填）" : ""),
    1746. 

  1746.             meta: [x.hint ? "说明：" + x.hint : "", "取自：" + (x.source || "—"),
    1747. 

  1747.                    v.filled ? "" : "本轮为空（未进入 prompt）"].filter(Boolean).join("　·　"),
    1748. 

  1748.             text: v.filled ? (v.text || "") : "", images: v.images || [],
    1749. 

  1749.           };
    1750. 

  1750.         }) } });
    1751. 

  1751.   }
    1752. 

  1752.   // 工具：运行记录里只有**名字**（定义是代码、不是运行数据，按需走 /api/tools 取，见 TOOLDEF）。
    1753. 

  1753.   // `used` 是后端给的「本次实际用过哪些」——用过的高亮，一眼看出这轮动用了哪几样能力。
    1754. 

  1754.   const tools = (st.tools || []).map(t => typeof t === "string" ? { name: t } : (t || {}));
    1755. 

  1755.   const used = new Set(usedTools || []);
    1756. 

  1756.   if (tools.length) {
    1757. 

  1757.     const nUsed = tools.filter(t => used.has(t.name)).length;
    1758. 

  1758.     cards.push({ label: "工具 / 能力", icon: "⚙",
    1759. 

  1759.       summary: `可用 ${tools.length} 个工具${nUsed ? `　·　本次用过 ${nUsed} 个` : ""}`,
    1760. 

  1760.       tools, usedTools: [...used],
    1761. 

  1761.       detail: { title: "工具 / 能力", tools, usedTools: [...used] } });
    1762. 

  1762.   }
    1763. 

  1763.   // 模型只属于**真正调模型的模块**（agent / llm）；workflow / code 不调模型，模型在它们内部的子模块上。
    1764. 

  1764.   // 可执行结构申报的是扁平的 st.model，环节配置则是 st.runtime —— 两种都渲染成同一张卡。
    1765. 

  1765.   const isModelBearing = !st.node_kind || st.node_kind === "agent" || st.node_kind === "llm";
    1766. 

  1766.   const rt = st.runtime;
    1767. 

  1767.   if (isModelBearing && !(rt && rt.model) && st.model)
    1768. 

  1768.     cards.push({ label: "模型配置", icon: "◎", summary: st.model,
    1769. 

  1769.       chips: [st.runs || ""].filter(Boolean),
    1770. 

  1770.       detail: { title: "模型配置 · 本段", text: `模型：${st.model}` + (st.runs ? `\n执行：${st.runs}` : "") } });
    1771. 

  1771.   if (isModelBearing && rt && rt.model) {
    1772. 

  1772.     const p = rt.params || {}, bud = rt.budget || {};
    1773. 

  1773.     cards.push({ label: "模型配置", icon: "◎", summary: rt.model,
    1774. 

  1774.       chips: [rt.overridden ? "环节特配" : "默认模型",
    1775. 

  1775.         ...Object.keys(p).map(x => `${x}=${p[x]}`), ...Object.keys(bud).map(x => `${x}=${bud[x]}`),
    1776. 

  1776.         rt.fallback_model ? "回退 " + rt.fallback_model : ""].filter(Boolean),
    1777. 

  1777.       detail: { title: "模型配置 · 本环节", text:
    1778. 

  1778.         `环节（role）：${rt.role || "—"}\n模型：${rt.model}（${rt.overridden ? "models_by_role 特配" : "默认 model_name"}）\n` +
    1779. 

  1779.         `默认模型：${rt.default_model || "—"}\n安全回退模型：${rt.fallback_model || "（未启用）"}\n` +
    1780. 

  1780.         `参数：${JSON.stringify(p)}\n中间件：${(rt.middleware || []).join("、") || "—"}\n预算：${JSON.stringify(bud)}` } });
    1781. 

  1781.   }
    1782. 

  1782.   return cards;
    1783. 

  1783. }
    1784. 

  1784. 

  1785. // 输出 → **一张卡**。输出本身只有客观数据；**怎么读它由结构里的 output_schema 决定**：
    1786. 

  1786. //   fields[{key,name}]  给字段中文名（未列出的按原键名显示，hide_keys 里的不显示）
    1787. 

  1787. //   items_key           输出的「构成」在哪个键（如交付件 results / 逐候选 candidates）
    1788. 

  1788. //   primary_key         主件下标在哪个键；item_* 指明每件的标签/图/备注取哪
    1789. 

  1789. // 没有 schema 就按对象自身的键缺省摊平（autoFields）。任何情况下都不该把一坨 JSON 糊在卡面上。
    1790. 

  1790. function outputCards(out, schema) {
    1791. 

  1791.   if (!out) return [];
    1792. 

  1792.   const d = out.data, sc = schema || {};
    1793. 

  1793.   const labels = {}; (sc.fields || []).forEach(f => labels[f.key] = f.name);
    1794. 

  1794.   const hide = new Set([...(sc.hide_keys || []), sc.items_key, sc.primary_key].filter(Boolean));
    1795. 

  1795.   const items = (sc.items_key && d && Array.isArray(d[sc.items_key])) ? d[sc.items_key] : [];
    1796. 

  1796.   const pIdx = sc.primary_key && d ? d[sc.primary_key] : null;
    1797. 

  1797.   const itemLabel = (it, i) => {
    1798. 

  1798.     const raw = it[sc.item_label_key || "role"];
    1799. 

  1799.     const mapped = (sc.item_labels || {})[raw] || (raw != null ? String(raw) : `#${i}`);
    1800. 

  1800.     return (sc.item_label_prefix || "") + mapped;
    1801. 

  1801.   };
    1802. 

  1802.   const arts = items.map((it, i) => ({
    1803. 

  1803.     label: itemLabel(it, i), primary: (pIdx != null && i === pIdx) || it.role === "primary",
    1804. 

  1804.     note: it[sc.item_note_key || "note"] || "",
    1805. 

  1805.     url: it[sc.item_image_key || "url"],
    1806. 

  1806.     text: it.text || it.falsifiable_diff || "",
    1807. 

  1807.   }));
    1808. 

  1808.   // 其余字段：schema 给名字的优先按 schema 顺序，再补上数据里剩下的键
    1809. 

  1809.   const rest = {};
    1810. 

  1810.   if (d && typeof d === "object" && !Array.isArray(d))
    1811. 

  1811.     Object.entries(d).forEach(([k, v]) => { if (!hide.has(k)) rest[k] = v; });
    1812. 

  1812.   let fields = [];
    1813. 

  1813.   // 投影层读时组装好的字段（如 plan 决策的 ops/理由/下一步）优先——它按框架自己的 schema 渲染过了
    1814. 

  1814.   if (out.fields && out.fields.length) fields = out.fields;
    1815. 

  1815.   else if (Object.keys(rest).length) {
    1816. 

  1816.     const named = (sc.fields || []).filter(f => rest[f.key] != null && rest[f.key] !== "")
    1817. 

  1817.       .map(f => ({ key: f.key, name: f.name }));
    1818. 

  1818.     const others = Object.keys(rest).filter(k => !named.some(n => n.key === k)).map(k => ({ key: k, name: k }));
    1819. 

  1819.     const auto = {}; autoFields(rest).forEach(f => auto[f.label] = f.value);
    1820. 

  1820.     fields = [...named, ...others].map(f => ({ label: f.name, value: auto[f.key] }))
    1821. 

  1821.       .filter(f => f.value != null && f.value !== "");
    1822. 

  1822.     // 数组里是对象的（如 items）由 autoFields 展开成多行，补进来
    1823. 

  1823.     autoFields(rest).filter(f => !fields.some(x => x.label === (labels[f.label] || f.label)) && /[ #]/.test(f.label))
    1824. 

  1824.       .forEach(f => fields.push(f));
    1825. 

  1825.   }
    1826. 

  1826.   // 图：优先「输出构成」里的交付件；否则用产生侧申报的 out.images。
    1827. 

  1827.   // **哪些图算这个节点的产物由产生侧说了算**（set_output(images=…)，如 plan 显式申报「无图产物」，
    1828. 

  1828.   // 免得把决策里引用的参考图当成品）——这里不再按「有没有可读字段」去猜要不要显示图。
    1829. 

  1829.   const images = arts.map(a => a.url).filter(Boolean);
    1830. 

  1830.   return [{
    1831. 

  1831.     label: "输出" + (out.ok === false ? " · 未达标" : ""),
    1832. 

  1832.     icon: out.ok === false ? "✗" : "◆", ok: out.ok, final: true,
    1833. 

  1833.     fields, ops: out.ops || null, opsTitle: out.ops_title || "",
    1834. 

  1834.     next: out.next || null, nextTitle: out.next_title || "", arts: arts.length ? arts : null,
    1835. 

  1835.     summary: fields.length || arts.length ? "" : clip(summarizeData(d), 150),
    1836. 

  1836.     images: images.length ? images : (out.images || []),
    1837. 

  1837.     detail: { title: "输出", images: images.length ? images : (out.images || []),
    1838. 

  1838.       text: (arts.length ? arts.map(a => `${a.primary ? "★ " : ""}${a.label}${a.note ? "\n   " + a.note : ""}` +
    1839. 

  1839.                 `${a.url ? "\n   " + a.url : ""}`).join("\n\n") + "\n\n———\n\n" : "") +
    1840. 

  1840.             (typeof d === "string" ? d : JSON.stringify(d, null, 2)), json: d },
    1841. 

  1841.   }];
    1842. 

  1842. }
    1843. 

  1843. 

  1844. // 对象 → 可读字段列表（产生侧没给 fields 时的缺省摊平）。
    1845. 

  1845. // 关键：**对象数组要逐项展开**（如多候选的逐候选结论），而不是压成「N 项」——那正是要看的东西。
    1846. 

  1846. function autoFields(d) {
    1847. 

  1847.   if (!d || typeof d !== "object" || Array.isArray(d)) return [];
    1848. 

  1848.   const scalar = v => v == null ? "" : (typeof v === "boolean" ? (v ? "✓" : "✗") : String(v));
    1849. 

  1849.   const rowOf = (item, i, key) => {
    1850. 

  1850.     // 标识：优先项里带序号/名字的字段，否则用下标
    1851. 

  1851.     const idKey = ["candidate_index", "index", "idx", "name", "key", "id", "standard", "label"]
    1852. 

  1852.       .find(k => item[k] != null);
    1853. 

  1853.     const label = `${key}${idKey ? " " + String(item[idKey]) : " #" + i}`;
    1854. 

  1854.     // 值：把这一项里的标量按「布尔 → ✓/✗、数字 → 原样、短文本 → 原文」拼成一行（长文本截断）
    1855. 

  1855.     const bits = Object.entries(item)
    1856. 

  1856.       .filter(([k, v]) => k !== idKey && v != null && typeof v !== "object")
    1857. 

  1857.       .map(([, v]) => typeof v === "string" ? clip(v, 60) : scalar(v));
    1858. 

  1858.     return { label, value: clip(bits.join("　"), 160) };
    1859. 

  1859.   };
    1860. 

  1860.   const out = [];
    1861. 

  1861.   for (const [k, v] of Object.entries(d)) {
    1862. 

  1862.     if (v == null || v === "") continue;
    1863. 

  1863.     if (Array.isArray(v)) {
    1864. 

  1864.       const objs = v.filter(x => x && typeof x === "object");
    1865. 

  1865.       if (objs.length) { objs.slice(0, 8).forEach((it, i) => out.push(rowOf(it, i, k))); continue; }
    1866. 

  1866.       if (v.length) out.push({ label: k, value: clip(v.join("、"), 160) });
    1867. 

  1867.       continue;
    1868. 

  1868.     }
    1869. 

  1869.     if (typeof v === "object") { out.push({ label: k, value: clip(JSON.stringify(v), 120) }); continue; }
    1870. 

  1870.     out.push({ label: k, value: typeof v === "string" ? v : scalar(v) });
    1871. 

  1871.   }
    1872. 

  1872.   return out.slice(0, 12);
    1873. 

  1873. }
    1874. 

  1874. 

  1875. // 结构化输出的一行摘要：优先常见的可读字段，否则整体压一行（不猜格式，取到什么算什么）
    1876. 

  1876. function summarizeData(d) {
    1877. 

  1877.   if (d == null) return "";
    1878. 

  1878.   if (typeof d === "string") return d;
    1879. 

  1879.   for (const k of ["reasoning", "summary", "reason", "text", "note", "content"])
    1880. 

  1880.     if (d[k]) return String(d[k]);
    1881. 

  1881.   return JSON.stringify(d);
    1882. 

  1882. }
    1883. 

  1883. 

  1884. // ═══════════════════════════════════════════════════════════════════════════
    1885. 

  1885. //  模块渲染（统一模块模型的扁平四表：perl_module_def / _ref / _inst / perl_flow_node）
    1886. 

  1886. //
    1887. 

  1887. //  一切皆模块，模块 = 四段（输入 / 结构 / 执行流程 / 输出），模块可嵌套：
    1888. 

  1888. //  组合模块（workflow）的「执行流程」就是它的**子模块调用**，于是嵌套天然递归；
    1889. 

  1889. //  叶模块（agent / tool）的「执行流程」是事件流。同 seq = 同时发起（并发），直接分列。
    1890. 

  1890. //
    1891. 

  1891. //  前端只做两件事：**递归画四段盒子** + **按 spec.layout 摆位**。语义（并发/成败/图片/结构化
    1892. 

  1892. //  产物/布局列）全部由产生侧写进数据，这里不做任何解析或推断。
    1893. 

  1893. // ═══════════════════════════════════════════════════════════════════════════
    1894. 

  1894. let MODULES = null;
    1895. 

  1895. let MOD_COLOR = {};                     // module_key → 色相（按模块出现顺序分配，不同模块不同色）
    1896. 

  1896. 

  1897. // 只拉第 0 轮建立骨架（root 的图定义 + 轮数）；其余轮切到时再按需拉——长 run 的整树可达数 MB。
    1898. 

  1898. // ── 旁路标注：{summary, basis[]}，**按被标注的那一步 join**——标注对象是**模型推理节点**，
    1899. 

  1899. // 故主键是 node_id（= perl_flow_node.id）；旧 run 是按工具调用标的，仍按 tool_call_id 找。
    1900. 

  1900. // **拿不到就当没有** —— 这块数据是 run 之后另跑 `python -m framework.annotate <run_id>` 生成的，
    1901. 

  1901. // 缺失不影响查看器任何既有显示。
    1902. 

  1902. let ANN = { byNode: {}, byCall: {}, docs: {} };
    1903. 

  1903. async function fetchAnnotations(runId) {
    1904. 

  1904.   try {
    1905. 

  1905.     const r = await fetch(`/api/runs/${runId}/annotations`);
    1906. 

  1906.     if (!r.ok) return { byNode: {}, byCall: {}, docs: {} };
    1907. 

  1907.     const d = await r.json();
    1908. 

  1908.     return { byNode: d.by_node || {}, byCall: d.by_call || {}, docs: d.docs || {} };
    1909. 

  1909.   } catch (e) { return { byNode: {}, byCall: {}, docs: {} }; }
    1910. 

  1910. }
    1911. 

  1911. // 一张卡 → 它的标注键（`n:节点id` / `c:tool_call_id`）：键里带上取哪张表，openBasis 据此回查同一条。
    1912. 

  1912. const annKeyOf = s => !s ? "" : (s.node_id ? "n:" + s.node_id : (s.tool_call_id ? "c:" + s.tool_call_id : ""));
    1913. 

  1913. const annByKey = k => !k ? null : (k[0] === "n" ? (ANN.byNode || {})[k.slice(2)] : (ANN.byCall || {})[k.slice(2)]);
    1914. 

  1914. const annOf = s => annByKey(annKeyOf(s));
    1915. 

  1915. 

  1916. // 工具定义（说明 / 参数）**按需拉一次**：它是代码里的静态信息，不该塞进每次运行的记录里。
    1917. 

  1917. // 只在打开「工具 / 能力」详情时才取，取到后整个会话共用。
    1918. 

  1918. let TOOLDEF = null;
    1919. 

  1919. async function loadToolDefs(agent) {
    1920. 

  1920.   if (TOOLDEF) return TOOLDEF;
    1921. 

  1921.   try {
    1922. 

  1922.     const r = await fetch(`/api/tools?agent=${encodeURIComponent(agent || "production")}`);
    1923. 

  1923.     TOOLDEF = r.ok ? ((await r.json()).tools || {}) : {};
    1924. 

  1924.   } catch (e) { TOOLDEF = {}; }
    1925. 

  1925.   return TOOLDEF;
    1926. 

  1926. }
    1927. 

  1927. 

  1928. // 依据来源栏：把每条来源的**全文**列出来，并按后端给的字符区间高亮被引片段。
    1929. 

  1929. // **先按偏移切片、再逐段 esc()** —— 反过来做的话，`&`→`&amp;` 会把后面所有字符推移，高亮就偏了。
    1930. 

  1930. function hlText(text, s, e) {
    1931. 

  1931.   const t = String(text == null ? "" : text);
    1932. 

  1932.   if (s == null || e == null || s < 0 || e > t.length || e <= s) return esc(t);
    1933. 

  1933.   return esc(t.slice(0, s)) + `<mark class="src-hl">` + esc(t.slice(s, e)) + `</mark>` + esc(t.slice(e));
    1934. 

  1934. }
    1935. 

  1935. // 依据类型 → 给人看的名字与图标。**前端不认识业务自定义的 kind 也没关系**：认不出就原样显示 kind，
    1936. 

  1936. // 面板与高亮照常工作（认 anchor 与偏移，不认类型）。
    1937. 

  1937. const SRC_KIND = {
    1938. 

  1938.   agent_system_prompt: { name: "Agent System Prompt", ic: "▤" },
    1939. 

  1939.   input_block:         { name: "输入",                ic: "⇢" },
    1940. 

  1940.   input_image:         { name: "参考图",              ic: "🖼" },
    1941. 

  1941.   event:               { name: "前序步骤",            ic: "↩" },
    1942. 

  1942. };
    1943. 

  1943. const srcKind = k => SRC_KIND[k] || { name: k || "来源", ic: "◆" };
    1944. 

  1944. 

  1945. // 一份完整文档 + 其中的**多处**引用：整份显示、逐处高亮、顶部给快速切换。
    1946. 

  1946. // 为什么不切成几段摘要各自显示：读者会不知道这几处在整份 prompt 的什么位置、彼此什么关系。
    1947. 

  1947. // 高亮 + markdown 同时要：字符偏移是对着**原始 markdown 文本**算的，渲染成 HTML 后就不成立了。
    1948. 

  1948. // 做法是**先在原文里插哨兵字符、再渲染**（哨兵取私有区码点，markdown 渲染器当普通字不会动它），
    1949. 

  1949. // 渲染完把哨兵换成 <mark>。这样偏移始终对着原文，渲染器也不必知道高亮的存在。
    1950. 

  1950. const HL_O = "\uE000", HL_S = "\uE001", HL_C = "\uE002";
    1951. 

  1951. function mdWithHighlights(text, spans, gi) {
    1952. 

  1952.   let t = String(text || "");
    1953. 

  1953.   // 从后往前插，前面的偏移才不会被前一次插入推移
    1954. 

  1954.   [...spans].sort((a, b) => b.s - a.s).forEach(x => {
    1955. 

  1955.     t = t.slice(0, x.s) + HL_O + x.k + HL_S + t.slice(x.s, x.e) + HL_C + t.slice(x.e);
    1956. 

  1956.   });
    1957. 

  1957.   let html = renderMarkdown(t);
    1958. 

  1958.   // 哨兵 → <mark>。高亮区间可能跨块级标签（一句话被渲染成 <p>…</p><ul>…</ul>），此时不能简单地
    1959. 

  1959.   // 用一对 <mark> 包住（会产生跨块未闭合的非法结构）——按标签切开、只包文本片段。
    1960. 

  1960.   return html.replace(new RegExp(HL_O + "(\\d+)" + HL_S + "([\\s\\S]*?)" + HL_C, "g"), (m, k, inner) => {
    1961. 

  1961.     let first = true;
    1962. 

  1962.     return inner.split(/(<[^>]+>)/).map(piece => {
    1963. 

  1963.       if (!piece || piece[0] === "<") return piece;
    1964. 

  1964.       const id = first ? ` id="hl-${gi}-${k}"` : "";
    1965. 

  1965.       first = false;
    1966. 

  1966.       return `<mark class="src-hl"${id}>${piece}</mark>`;
    1967. 

  1967.     }).join("");
    1968. 

  1968.   });
    1969. 

  1969. }
    1970. 

  1970. function srcDocHtml(doc, cites, gi) {
    1971. 

  1971.   const t = String(doc.text || "");
    1972. 

  1972.   const spans = cites.filter(c => c.doc_start != null && c.doc_end != null)
    1973. 

  1973.                      .sort((a, b) => a.doc_start - b.doc_start);
    1974. 

  1974.   const html = mdWithHighlights(t, spans.map((c, k) => ({ s: c.doc_start, e: c.doc_end, k })), gi);
    1975. 

  1975.   const unlocated = cites.filter(c => c.doc_start == null);
    1976. 

  1976.   return `<div class="src-item">
    1977. 

  1977.     <div class="src-h"><span class="src-n">${srcKind(doc.kind).ic}</span>
    1978. 

  1978.       <span class="src-title">${esc(doc.title)}</span>
    1979. 

  1979.       <span class="src-loc ok">${cites.length} 处引用 · 全文 ${t.length} 字</span></div>
    1980. 

  1980.     <div class="src-jump">${spans.map((c, k) =>
    1981. 

  1981.       `<span class="sj" onclick="jumpHl(${gi},${k})">${k + 1}　${esc(clip(c.quote || c.title || "", 26))}</span>`
    1982. 

  1982.     ).join("")}${unlocated.map(c =>
    1983. 

  1983.       `<span class="sj off" title="未能在原文中逐字定位">△ ${esc(clip(c.quote || "", 26))}</span>`).join("")}</div>
    1984. 

  1984.     <div class="src-body md" id="src-doc-${gi}"><div class="pp-md">${html}</div></div>
    1985. 

  1985.   </div>`;
    1986. 

  1986. }
    1987. 

  1987. function jumpHl(gi, k) {
    1988. 

  1988.   const box = document.getElementById("src-doc-" + gi);
    1989. 

  1989.   const m = document.getElementById(`hl-${gi}-${k}`);
    1990. 

  1990.   if (!box || !m) return;
    1991. 

  1991.   // 用视口坐标算增量，不用 offsetTop —— 后者依赖 offsetParent，中间多包一层容器就会算错。
    1992. 

  1992.   box.scrollTop += m.getBoundingClientRect().top - box.getBoundingClientRect().top - 70;
    1993. 

  1993.   m.classList.add("flash"); setTimeout(() => m.classList.remove("flash"), 900);
    1994. 

  1994. }
    1995. 

  1995. function srcItemHtml(b, k) {
    1996. 

  1996.   const loc = !b.valid ? `<span class="src-loc no">✗ 悬空引用</span>`
    1997. 

  1997.     : b.located ? `<span class="src-loc ok">✓ 逐字定位 [${b.start}:${b.end}]</span>`
    1998. 

  1998.                 : `<span class="src-loc no">△ 未逐字定位</span>`;
    1999. 

  1999.   const isImg = b.kind === "input_image";
    2000. 

  2000.   const body = isImg
    2001. 

  2001.     ? `<img src="${esc(b.text || "")}" referrerpolicy="no-referrer" onclick="openLB('${esc(b.text || "")}')">`
    2002. 

  2002.     : (b.text ? `<div class="pp-md">${mdWithHighlights(b.text, (b.located ? [{ s: b.start, e: b.end, k: 0 }] : []), "s" + k)}</div>`
    2003. 

  2003.               : `<span style="color:var(--faint)">（来源正文不可用：该 run 缺少对应的结构记录）</span>`);
    2004. 

  2004.   return `<div class="src-item" id="src-item-${k}">
    2005. 

  2005.     <div class="src-h"><span class="src-n">${k + 1}</span>
    2006. 

  2006.       <span class="src-kind">${srcKind(b.kind).ic} ${esc(srcKind(b.kind).name)}</span>
    2007. 

  2007.       <span class="src-title">${esc(b.title || b.ref || "")}</span>${loc}</div>
    2008. 

  2008.     <div class="src-body${isImg ? "" : " md"}" id="src-body-${k}">${body}</div>
    2009. 

  2009.     ${(!isImg && b.quote) ? `<div class="src-quote">被引片段：「${esc(b.quote)}」</div>` : ""}
    2010. 

  2010.   </div>`;
    2011. 

  2011. }
    2012. 

  2012. function openBasis(key, label) {
    2013. 

  2013.   const a = annByKey(key); if (!a) return;
    2014. 

  2014.   const basis = a.basis || [];
    2015. 

  2015.   $("#srcbarTitle").textContent = label || "";
    2016. 

  2016.   // 同一份文档（后端给的 doc key，现在只有 system prompt）的多条引用**合并成一块**：显示整份原文、
    2017. 

  2017.   // 逐处高亮、顶部给跳转条。其余来源各自成块。顺序：先文档，后零散来源。
    2018. 

  2018.   const groups = {}, singles = [];
    2019. 

  2019.   basis.forEach(b => (b.doc && (ANN.docs || {})[b.doc]) ? (groups[b.doc] = groups[b.doc] || []).push(b)
    2020. 

  2020.                                                         : singles.push(b));
    2021. 

  2021.   const gkeys = Object.keys(groups);
    2022. 

  2022.   $("#srcbarBody").innerHTML =
    2023. 

  2023.     (a.summary ? `<div class="srcbar-sum">🔖 ${esc(a.summary)}</div>` : "") +
    2024. 

  2024.     (basis.length ? gkeys.map((k, gi) => srcDocHtml(ANN.docs[k], groups[k], gi)).join("")
    2025. 

  2025.                     + singles.map(srcItemHtml).join("")
    2026. 

  2026.                   : `<div class="lane-empty">（本次调用未标注依据）</div>`);
    2027. 

  2027.   // 只有一块来源时铺满剩余高度（长 prompt 挤在 340px 的小窗里读不了）；多块时各自限高、整栏滚动。
    2028. 

  2028.   $("#srcbarBody").classList.toggle("single", gkeys.length + singles.length === 1);
    2029. 

  2029.   $("#srcbar").classList.add("open");
    2030. 

  2030.   requestAnimationFrame(() => {
    2031. 

  2031.     gkeys.forEach((k, gi) => jumpHl(gi, 0));            // 文档块：定位到第一处引用
    2032. 

  2032.     singles.forEach((b, k) => {                          // 零散来源：各自把高亮滚进可视区
    2033. 

  2033.       const box = document.getElementById("src-body-" + k);
    2034. 

  2034.       const m = box && box.querySelector(".src-hl");
    2035. 

  2035.       if (m) box.scrollTop += m.getBoundingClientRect().top - box.getBoundingClientRect().top - 60;
    2036. 

  2036.     });
    2037. 

  2037.   });
    2038. 

  2038. }
    2039. 

  2039. function closeSrcBar() { $("#srcbar").classList.remove("open"); }
    2040. 

  2040. 

  2041. // id 一键复制：查看器上印的 invocation id / tool_call_id 就是标注器 CLI 的入参，
    2042. 

  2042. // 看到哪条标注不对 → 复制 id → `python -m framework.annotate <run> --invocation N`（或 --node X）重标。
    2043. 

  2043. function copyId(text, el) {
    2044. 

  2044.   // 原文存在 dataset 里（只在第一次点击时记）：**不能读 el.textContent 当原文** —— 连点两下时读到的
    2045. 

  2045.   // 已经是「✓ 已复制」，那就再也变不回去了。同时清掉上一次未跑完的定时器，避免它把状态改回去。
    2046. 

  2046.   if (!el.dataset.label) el.dataset.label = el.textContent;
    2047. 

  2047.   clearTimeout(el._copyT);
    2048. 

  2048.   const done = () => { el.textContent = "✓ 已复制"; el.classList.add("copied");
    2049. 

  2049.                        el._copyT = setTimeout(() => { el.textContent = el.dataset.label;
    2050. 

  2050.                                                       el.classList.remove("copied"); }, 1200); };
    2051. 

  2051.   if (navigator.clipboard && navigator.clipboard.writeText) navigator.clipboard.writeText(String(text)).then(done, done);
    2052. 

  2052.   else { const t = document.createElement("textarea"); t.value = String(text); document.body.appendChild(t);
    2053. 

  2053.          t.select(); try { document.execCommand("copy"); } catch (e) {} t.remove(); done(); }
    2054. 

  2054. }
    2055. 

  2055. 

  2056. // ═══ 扁平模块视图 ═══════════════════════════════════════════════════════════════
    2057. 

  2057. // **没有嵌套**：一个「运行实例」一个盒子，盒子之间由 `call` 引用相连 —— 前端沿实例 id 走链，
    2058. 

  2058. // 不做层级下钻。模块**定义**是全局的、可被多个实例共享（盒子头标 module_key@版本 + 第 k/N 个实例）。
    2059. 

  2059. // 定义层的引用（perl_module_ref）画在 ② 结构里；实例层的引用（call 节点）画在 ③ 运行流程里。
    2060. 

  2060. 

  2061. async function fetchModules(runId) {
    2062. 

  2062.   const d = await fetchRound(runId, 0);
    2063. 

  2063.   if (!d || !d.root || !d.round_count) return null;
    2064. 

  2064.   const byIdx = {};
    2065. 

  2065.   (d.rounds || []).forEach(r => byIdx[r.index] = r);
    2066. 

  2066.   return { runId, root: d.root, count: d.round_count, byIdx, defs: d.modules || {} };
    2067. 

  2067. }
    2068. 

  2068. async function fetchRound(runId, i) {
    2069. 

  2069.   try {
    2070. 

  2070.     const r = await fetch(`/api/runs/${runId}/flat?round=${i}`);
    2071. 

  2071.     return r.ok ? await r.json() : null;
    2072. 

  2072.   } catch (e) { return null; }
    2073. 

  2073. }
    2074. 

  2074. // 当前轮就绪（缓存命中直接返回）。轮数可能随 run 推进增长，故 count 也一并更新。
    2075. 

  2075. async function ensureRound(i) {
    2076. 

  2076.   if (!MODULES || MODULES.byIdx[i]) return MODULES && MODULES.byIdx[i];
    2077. 

  2077.   const d = await fetchRound(MODULES.runId, i);
    2078. 

  2078.   if (!d) return null;
    2079. 

  2079.   MODULES.count = d.round_count || MODULES.count;
    2080. 

  2080.   if (d.root) MODULES.root = d.root;
    2081. 

  2081.   Object.assign(MODULES.defs, d.modules || {});
    2082. 

  2082.   (d.rounds || []).forEach(r => MODULES.byIdx[r.index] = r);
    2083. 

  2083.   return MODULES.byIdx[i];
    2084. 

  2084. }
    2085. 

  2085. 

  2086. // DOM id 安全化：module_key 里有中文/. —— 连线锚点要用 querySelector，先规整
    2087. 

  2087. const domId = s => "m" + String(s).replace(/[^A-Za-z0-9_-]/g, "_");
    2088. 

  2088. const instDom = inst => domId("i" + inst.id);
    2089. 

  2089. const defOf = inst => (MODULES && MODULES.defs[inst.module_id]) || { spec: {}, kind: "", refs: [] };
    2090. 

  2090. // **指向别的模块的东西，一律用那个模块自己的颜色** —— 结构图里的引用节点、运行流程里的引用芯片、
    2091. 

  2091. // 跨块的引用连线，三处同源。不这么做的话它们会继承"所在块"的色相，画面上就成了
    2092. 

  2092. // 「handler 块里指向 generate 的节点是 handler 色」——颜色反而误导。
    2093. 

  2093. // 取不到（如本轮画板里没有那个模块）就不覆盖 --mc，自然回落到所在块的颜色。
    2094. 

  2094. const hueStyle = key => {
    2095. 

  2095.   const h = (MOD_COLOR || {})[key];
    2096. 

  2096.   return h == null ? "" : ` style="--mc:${h}"`;
    2097. 

  2097. };
    2098. 

  2098. 

  2099. // 某个模块在**别人的图定义**里被声明成什么样（tone / icon 等展示元信息）。
    2100. 

  2100. // 这是定义层的事实（谁引用它、怎么标它），不是前端按名字猜的。
    2101. 

  2101. 

  2102. // ③ 运行流程里的一格：**引用另一个模块的某个运行实例**。
    2103. 

  2103. // 它与 llm / tool 节点同列同序号 —— 引用只是流程里的一步。两条连线（本节点 → 被调实例的输入、
    2104. 

  2104. // 被调实例的输出 → 回到本节点）由 drawCallEdges 按 data-callee 画出来。
    2105. 

  2105. function callChipHtml(f) {
    2106. 

  2106.   return `<div class="call-chip" data-callee="${f.callee_inst_id}"
    2107. 

  2107.       data-callee-key="${esc(f.callee_module_key || "")}"${hueStyle(f.callee_module_key)}
    2108. 

  2108.       onclick="focusInst(${f.callee_inst_id})"
    2109. 

  2109.       title="引用模块 ${esc(f.callee_module_key)} 的运行实例 #${f.callee_inst_id}">
    2110. 

  2110.     <div class="cc-h">◆ 引用外部模块${f.node_key ? ` · ${esc(f.node_key)}` : ""}</div>
    2111. 

  2111.     <div class="cc-k">${esc(f.callee_module_key)}</div>
    2112. 

  2112.     <div class="cc-i">运行实例 #${f.callee_inst_id}${f.branch ? ` · ${esc(f.branch)}` : ""}</div></div>`;
    2113. 

  2113. }
    2114. 

  2114. 

  2115. // 跳转落点：横向对到目标的**起点**（左缘 + 这点边距），而不是居中 —— 运行链很长时居中会停在
    2116. 

  2116. // 链的中段，看不到实例从哪开始。
    2117. 

  2117. const FOCUS_LEFT_PAD = 48;
    2118. 

  2118. // 平移量用「当前 pan + 屏幕差值」的**增量**算：只依赖两个 getBoundingClientRect 的差，
    2119. 

  2119. // 与缩放倍率 z、transform-origin、容器内边距都无关（照抄世界坐标反推的写法在缩放时会偏）。
    2120. 

  2120. function focusPan(targetEl, vCenterEl) {
    2121. 

  2121.   const board = $("#board"); if (!board || !BOARD || !targetEl) return;
    2122. 

  2122.   const bb = board.getBoundingClientRect(), r = targetEl.getBoundingClientRect();
    2123. 

  2123.   const v = (vCenterEl || targetEl).getBoundingClientRect();
    2124. 

  2124.   BOARD.panX += (bb.left + FOCUS_LEFT_PAD) - r.left;              // 横向：起点靠左
    2125. 

  2125.   BOARD.panY += (bb.top + bb.height / 2) - (v.top + v.height / 2); // 纵向：居中
    2126. 

  2126.   boardApply();
    2127. 

  2127. }
    2128. 

  2128. 

  2129. // 跳到某个运行实例（画板是 transform 平移缩放的，不能用 scrollIntoView）。
    2130. 

  2130. // 横向按**所属模块块**的左缘对齐（于是「模块定义 + 这条运行链的起点」一起进画面），纵向让目标实例居中。
    2131. 

  2131. function focusInst(id) {
    2132. 

  2132.   const el = document.getElementById("inst-" + id), board = $("#board");
    2133. 

  2133.   if (!el || !board || !BOARD) return;
    2134. 

  2134.   document.querySelectorAll("#boardWorld .inst-lane.focus").forEach(x => x.classList.remove("focus"));
    2135. 

  2135.   el.classList.add("focus");
    2136. 

  2136.   focusPan(el.closest(".mod-block") || el, el);
    2137. 

  2137. }
    2138. 

  2138. 

  2139. // ① 输入 / ④ 输出：它们是**这条运行链的首尾节点**，与中间的运行节点排在同一条链上
    2140. 

  2140. // （而不是另立两段）——照示意图：(输入) → 节点1 → 节点2 → 节点3 → ▷输出。
    2141. 

  2141. function ioNodeHtml(inst, side, cards) {
    2142. 

  2142.   const key = "i" + inst.id + ":" + side;
    2143. 

  2143.   putCards(key, cards);
    2144. 

  2144.   const cap = side === "in" ? "输入" : "输出";
    2145. 

  2145.   return `<div class="lane-col io-node io-${side}" id="io${side}-${inst.id}">
    2146. 

  2146.     <div class="ion-cap">${cap}</div>
    2147. 

  2147.     <div class="ion-body">${cards.length ? cards.map((c, i) => renderPCard(key, i, c)).join("")
    2148. 

  2148.       : `<div class="lane-empty">（无${cap}）</div>`}</div></div>`;
    2149. 

  2149. }
    2150. 

  2150. 

  2151. // 一个运行实例 → **一条链**：输入 → 运行节点… → 输出。
    2152. 

  2152. // 同 seq = 同时发起（扇出 N 路 / 一轮多工具），并成一列画并发 —— 产生侧已把这件事写进数据。
    2153. 

  2153. function instLaneHtml(inst) {
    2154. 

  2154.   const key = "i" + inst.id + ":flow";
    2155. 

  2155.   const flow = inst.flow || [];
    2156. 

  2156.   const cards = flow.filter(f => f.kind === "node").map(f => f.card);
    2157. 

  2157.   putCards(key, cards);
    2158. 

  2158.   const steps = [];
    2159. 

  2159.   for (const f of flow) {
    2160. 

  2160.     const last = steps[steps.length - 1];
    2161. 

  2161.     if (last && last.seq === f.seq) last.items.push(f); else steps.push({ seq: f.seq, items: [f] });
    2162. 

  2162.   }
    2163. 

  2163.   const cols = steps.map(st => {
    2164. 

  2164.     const inner = st.items.map(f => f.kind === "call"
    2165. 

  2165.       ? callChipHtml(f) : renderPCard(key, cards.indexOf(f.card), f.card)).join("");
    2166. 

  2166.     return st.items.length > 1
    2167. 

  2167.       ? `<div class="lane-col conc"><div class="pc-conc-tag">⇉ 并发 ×${st.items.length}</div>
    2168. 

  2168.            <div class="pc-parallel-stack">${inner}</div></div>`
    2169. 

  2169.       : `<div class="lane-col">${inner}</div>`;
    2170. 

  2170.   });
    2171. 

  2171.   const d = defOf(inst);
    2172. 

  2172.   const chain = [ioNodeHtml(inst, "in", blockCards((inst.input || {}).blocks))]
    2173. 

  2173.     .concat(cols.length ? cols : [`<div class="lane-col"><div class="lane-empty">（无运行节点）</div></div>`])
    2174. 

  2174.     .concat([ioNodeHtml(inst, "out",
    2175. 

  2175.       outputCards(inst.output, d.view || (d.spec || {}).output_schema))]);
    2176. 

  2176.   // 步与步之间不放分隔元素：连接由 drawLaneEdges 画进这条泳道自己的 SVG（实线曲线箭头、与所在
    2177. 

  2177.   // 模块同色），元素之间只留 gap 供曲线穿过。
    2178. 

  2178.   return `<div class="lane-steps"><svg class="lane-wires"></svg>${chain.join("")}</div>`;
    2179. 

  2179. }
    2180. 

  2180. 

  2181. // ② 结构 · workflow —— **它的结构就是一张流程图**：节点只写「引用哪个模块 + 跑几次」，
    2182. 

  2182. // 细节在被引模块自己那里（点节点跳过去看）。边带基数，1:N / N:1 直接读出扇出与汇聚。
    2183. 

  2183. function flowchartHtml(spec) {
    2184. 

  2184.   const nodes = spec.nodes || [], edges = spec.edges || [];
    2185. 

  2185.   if (!nodes.length) return "";
    2186. 

  2186.   const lbl = (a, b) => (edges.find(e => e.from === a && e.to === b) || {});
    2187. 

  2187.   const card = (n, i) => {
    2188. 

  2188.     const many = n.cardinality === "many";
    2189. 

  2189.     const to = n.module_key || "";
    2190. 

  2190.     return `<div class="fc-node${to ? " ref" : ""}"${hueStyle(to)}${to ? ` data-to="${esc(to)}"
    2191. 

  2191.         onclick="focusModule('${esc(to)}')" title="悬停看这条引用连到哪 · 点击跳过去"` : ""}>
    2192. 

  2192.       <div class="fc-i">${i + 1}</div>
    2193. 

  2193.       <div class="fc-b"><div class="fc-t">${esc(n.title || n.key)}</div>
    2194. 

  2194.         ${to ? `<div class="fc-k">${esc(to)}</div>` : ""}
    2195. 

  2195.         ${many ? `<span class="fc-x">×N${n.fanout_over ? " · " + esc(n.fanout_over) : ""}</span>`
    2196. 

  2196.                : (n.cardinality === "optional" ? `<span class="fc-x">可能不跑</span>` : "")}
    2197. 

  2197.         ${n.dispatch ? `<span class="fc-x">动态派发 · ${esc(n.dispatch)}</span>` : ""}</div></div>`;
    2198. 

  2198.   };
    2199. 

  2199.   const rows = nodes.map((n, i) => {
    2200. 

  2200.     const e = i < nodes.length - 1 ? lbl(n.key, nodes[i + 1].key) : null;
    2201. 

  2201.     return card(n, i) + (i < nodes.length - 1
    2202. 

  2202.       ? `<div class="fc-edge"><span class="fc-card">${esc(e.cardinality || "")}</span>${
    2203. 

  2203.           e.label ? `<span class="fc-l">${esc(e.label)}</span>` : ""}</div>` : "");
    2204. 

  2204.   }).join("");
    2205. 

  2205.   return `<div class="fc">${rows}</div>`;
    2206. 

  2206. }
    2207. 

  2207. 

  2208. // ② 结构 · code —— **确定性代码段的定义就是它的实现**。散文规则说不清也会漂移，源码不会。
    2209. 

  2209. // 结构模块里**不内联源码**（否则 code 的结构列会被拉宽，与 agent 模块不一致）：只给标题 + 一条
    2210. 

  2210. // 「查看完整代码」入口，全文进 CODE_SRC 登记，点开在**右侧抽屉**看（见 openCodeModal）。key 用模块键。
    2211. 

  2211. let CODE_SRC = {};
    2212. 

  2212. function sourceHtml(spec, key) {
    2213. 

  2213.   const src = spec.source;
    2214. 

  2214.   if (!src) return "";
    2215. 

  2215.   CODE_SRC[key] = src;
    2216. 

  2216.   return `<div class="src-card">
    2217. 

  2217.     <div class="src-h"><span class="src-q">${esc(src.qualname || "")}</span>
    2218. 

  2218.       <span class="src-f">${esc(src.file || "")}:${src.line}</span></div>
    2219. 

  2219.     <div class="src-more" onclick="openCodeModal('${esc(key)}')">查看完整代码 ›</div></div>`;
    2220. 

  2220. }
    2221. 

  2221. // 完整源码 → 复用右侧详情抽屉（与其它节点详情同一个位置，不再另开居中弹窗）。
    2222. 

  2222. function openCodeModal(key) {
    2223. 

  2223.   const s = CODE_SRC[key]; if (!s) return;
    2224. 

  2224.   $("#drawerTag").textContent = "CODE"; $("#drawerTag").className = "drawer-tag";
    2225. 

  2225.   $("#drawerTitle").textContent = s.qualname || key;
    2226. 

  2226.   $("#drawerBody").innerHTML = `<div class="src-card">
    2227. 

  2227.     <div class="src-h"><span class="src-f">${esc(s.file || "")}${s.line != null ? ":" + s.line : ""}</span></div>
    2228. 

  2228.     <pre class="src-code">${esc(s.code || "")}</pre></div>`;
    2229. 

  2229.   openDrawer();
    2230. 

  2230. }
    2231. 

  2231. 

  2232. // 跳到某个模块块（结构图上的节点 → 那个模块）。落点同样是这个模块的**起点**：
    2233. 

  2233. // 块左缘对到视口左侧，于是看到的是「模块定义 + 运行流程开头」（见 focusPan）。
    2234. 

  2234. function focusModule(key) {
    2235. 

  2235.   const el = document.getElementById("bn-" + domId(key)), board = $("#board");
    2236. 

  2236.   if (!el || !board || !BOARD) return;
    2237. 

  2237.   document.querySelectorAll("#boardWorld .mod-block.focus").forEach(x => x.classList.remove("focus"));
    2238. 

  2238.   el.classList.add("focus");
    2239. 

  2239.   focusPan(el, el);
    2240. 

  2240. }
    2241. 

  2241. 

  2242. // 一个运行实例 → 泳道（定义那一侧只画一次，见 renderModuleBoard）
    2243. 

  2243. function instLaneBox(inst, n) {
    2244. 

  2244.   const flags = [
    2245. 

  2245.     inst.task_id != null ? `<span class="mmc-sid">Task #${esc(inst.task_id)}</span>` : "",
    2246. 

  2246.     inst.branch ? `<span class="mmc-sid">${esc(inst.branch)}</span>` : "",
    2247. 

  2247.     inst.ok === false ? `<span class="mmc-badge failed">未达标</span>`
    2248. 

  2248.       : inst.ok === true ? `<span class="mmc-badge passed">通过</span>` : "",
    2249. 

  2249.     (inst.timing && inst.timing.sec != null) ? `<span class="gn-sub">${inst.timing.sec}s</span>` : "",
    2250. 

  2250.     inst.tokens ? `<span class="gn-sub">${esc(inst.tokens)} tok</span>` : "",
    2251. 

  2251.     inst.caller ? `<span class="il-from" onclick="event.stopPropagation();focusInst(${inst.caller.inst_id})"
    2252. 

  2252.         title="谁引用了本实例（沿 call 边反查）">← 被 #${inst.caller.inst_id} 引用</span>` : "",
    2253. 

  2253.   ].join("");
    2254. 

  2254.   return `<div class="inst-lane" id="inst-${inst.id}">
    2255. 

  2255.     <div class="il-cap">运行实例 ${n}
    2256. 

  2256.       <span class="id-chip" title="运行实例 id（点击复制）" onclick="event.stopPropagation();copyId('${inst.id}',this)">#${inst.id}</span>
    2257. 

  2257.       ${inst.label ? `<span class="il-t">${esc(inst.label)}</span>` : ""}
    2258. 

  2258.       <span class="il-flags">${flags}</span></div>
    2259. 

  2259.     ${instLaneHtml(inst)}</div>`;
    2260. 

  2260. }
    2261. 

  2261. 

  2262. // 卡片里的图是**异步加载**的：加载完高度才定下来。不重排的话块的尺寸是按"图还没来"时量的，
    2263. 

  2263. // 连线端点就会落在旧位置。这里给每张图挂一次性回调，去抖后重排。
    2264. 

  2264. function relayoutOnImages(root) {
    2265. 

  2265.   let t = null;
    2266. 

  2266.   const kick = () => { clearTimeout(t); t = setTimeout(() => { layoutBoard(); }, 60); };
    2267. 

  2267.   root.querySelectorAll("img").forEach(img => {
    2268. 

  2268.     if (img.complete) return;
    2269. 

  2269.     img.addEventListener("load", kick, { once: true });
    2270. 

  2270.     img.addEventListener("error", kick, { once: true });
    2271. 

  2271.   });
    2272. 

  2272. }
    2273. 

  2273. 

  2274. // 模块级**调用树**：本轮的模块按「谁把活交给谁」串成一棵**横向生长**的树。
    2275. 

  2275. //
    2276. 

  2276. //   父子 = ① 入口链的先后（`entry_ids`：plan 规划完 → 派发给 handler 执行，是**交接**不是引用）
    2277. 

  2277. //          ② 实例层真实发生的 call 边（权威）
    2278. 

  2278. //          ③ 定义层声明的 refs（补上本轮没跑、但结构里声明了的模块）
    2279. 

  2279. //
    2280. 

  2280. // 为什么不再按「调用图最长路径分层、层＝行」：plan 与 handler 都没有被谁调用，纯调用图会把它们
    2281. 

  2281. // 判成同一层堆在一起 —— 但它们其实是先后关系。层次必须把**入口链的先后**算进去。
    2282. 

  2282. // 摆位（x/y）在 placeBlocks 里做：那要等 DOM 量出每块的实际尺寸。
    2283. 

  2283. function moduleTree(insts, defs, entryIds) {
    2284. 

  2284.   const byKey = {};                              // module_key → {insts, defIds}
    2285. 

  2285.   const push = (k, id, inst) => {
    2286. 

  2286.     const b = byKey[k] || (byKey[k] = { key: k, insts: [], defIds: [] });
    2287. 

  2287.     if (inst) b.insts.push(inst);
    2288. 

  2288.     const normalizedId = id == null ? null : String(id);
    2289. 

  2289.     if (normalizedId != null && !b.defIds.includes(normalizedId)) b.defIds.push(normalizedId);
    2290. 

  2290.   };
    2291. 

  2291.   insts.forEach(n => push(n.module_key, n.module_id, n));
    2292. 

  2292.   Object.keys(defs).forEach(id => push(defs[id].module_key, id, null));
    2293. 

  2293.   // **run 级根模块不显示**：整个 run 就是它的一次执行，它是所有轮次的**容器**而不是本轮的一个模块
    2294. 

  2294.   // —— 轮次按「根实例流程里每个 *.plan 调用」切分，根实例按构造永远落不进任何一轮的闭包，画出来只能是
    2295. 

  2295.   // 恒为 0 实例的空块。这个视图看的是**每一轮里发生了什么**，run 级的循环图定义不在这个尺度上。
    2296. 

  2296.   const rootKey = ((MODULES || {}).root || {}).module_key;
    2297. 

  2297.   if (rootKey) delete byKey[rootKey];
    2298. 

  2298. 

  2299.   const children = new Map(), parent = new Map(), edgeKind = new Map();
    2300. 

  2300.   // 每条父子边带一个**类型**（entry / call / ref）——摆位据它分轴：entry 走水平主干，
    2301. 

  2301.   // call/ref 走「往下 + 右缩进」（见 placeBlocks）。首个成边的 link 决定父与边类型（多父取第一个）。
    2302. 

  2302.   const link = (x, y, kind) => {                 // 保序去重；已有父的不改父（多父取第一个）
    2303. 

  2303.     if (!x || !y || x === y || !byKey[x] || !byKey[y] || parent.has(y)) return;
    2304. 

  2304.     if (!children.has(x)) children.set(x, []);
    2305. 

  2305.     if (children.get(x).includes(y)) return;
    2306. 

  2306.     children.get(x).push(y); parent.set(y, x); edgeKind.set(y, kind);
    2307. 

  2307.   };
    2308. 

  2308.   const instById = {}; insts.forEach(n => instById[n.id] = n);
    2309. 

  2309.   // ① 入口链：本轮根级实例按执行先后（plan → handler），前一个的产出交给后一个
    2310. 

  2310.   const chain = (entryIds || []).map(id => (instById[id] || {}).module_key).filter(Boolean);
    2311. 

  2311.   for (let i = 1; i < chain.length; i++) link(chain[i - 1], chain[i], "entry");
    2312. 

  2312.   // ② 实例层真实调用（flow 已按 seq 排好 → 子的次序 = 本轮真实的调用先后）
    2313. 

  2313.   insts.forEach(n => (n.flow || []).forEach(f => {
    2314. 

  2314.     if (f.kind === "call") link(n.module_key, f.callee_module_key, "call");
    2315. 

  2315.   }));
    2316. 

  2316.   // ③ 定义层声明的引用（本轮没跑的模块也有个去处）
    2317. 

  2317.   Object.keys(defs).forEach(id => (defs[id].refs || []).forEach(r => link(defs[id].module_key, r.to_module_key, "ref")));
    2318. 

  2318. 

  2319.   const keys = Object.keys(byKey);
    2320. 

  2320.   const roots = (chain.length && byKey[chain[0]] ? [chain[0]] : []).concat(
    2321. 

  2321.     keys.filter(k => !parent.has(k) && k !== chain[0]));
    2322. 

  2322.   // 深度（给块上标 L0/L1…；纯展示，摆位不依赖它）
    2323. 

  2323.   const depth = {}; const dfs = (k, d) => {
    2324. 

  2324.     if (depth[k] != null) return;
    2325. 

  2325.     depth[k] = d; (children.get(k) || []).forEach(c => dfs(c, d + 1));
    2326. 

  2326.   };
    2327. 

  2327.   roots.forEach(r => dfs(r, 0));
    2328. 

  2328.   keys.forEach(k => { if (depth[k] == null) depth[k] = 0; });
    2329. 

  2329.   return { byKey, keys, roots, children, parent, depth, edgeKind,
    2330. 

  2330.            lastEntry: chain.length ? chain[chain.length - 1] : null };
    2331. 

  2331. }
    2332. 

  2332. 

  2333. // 一轮 → 画板：**一个模块一块**（定义只画一次，右侧是它这一轮的全部运行实例），
    2334. 

  2334. // 块按**两个轴**摆（详见 placeBlocks）：入口链的主干**水平**往右读；模块内部引用/调用的被调块
    2335. 

  2335. // **往下 + 右缩进一个「模块定义」宽度**展开，同一父的多个被调块彼此水平排开、递归适用。
    2336. 

  2336. // 不同模块用不同颜色（按块的出现顺序取色相），于是"同一个模块的多次运行"一眼可辨。
    2337. 

  2337. let TREE = null;                                   // 本轮的调用树（供 placeBlocks 摆位）
    2338. 

  2338. function renderModuleBoard(round) {
    2339. 

  2339.   const world = $("#boardWorld"); if (!world) return;
    2340. 

  2340.   const insts = round.instances || [];
    2341. 

  2341.   const defs = (MODULES && MODULES.defs) || {};
    2342. 

  2342.   const t = moduleTree(insts, defs, round.entry_ids);
    2343. 

  2343.   if (!t.keys.length) { TREE = null; world.innerHTML = `<div class="board-none">本轮无运行实例</div>`; return; }
    2344. 

  2344.   // 摆位次序 = 树的先序（根 → 子 → 孙）；不在树上的（孤儿）排在后面
    2345. 

  2345.   const order = [], seen = new Set();
    2346. 

  2346.   const walk = k => { if (seen.has(k)) return; seen.add(k); order.push(k);
    2347. 

  2347.                       (t.children.get(k) || []).forEach(walk); };
    2348. 

  2348.   t.roots.forEach(walk);
    2349. 

  2349.   t.keys.forEach(k => { if (!seen.has(k)) { seen.add(k); order.push(k); } });
    2350. 

  2350.   // entryInsts：本轮入口实例的**实例 id**（按执行先后）——交接连线的端点取它们的输出/输入锚点
    2351. 

  2351.   TREE = { ...t, order, entryInsts: round.entry_ids || [] };
    2352. 

  2352.   MOD_COLOR = {};
    2353. 

  2353.   order.forEach((k, i) => MOD_COLOR[k] = Math.round((i * 47) % 360));
    2354. 

  2354. 

  2355.   const blockHtml = key => {
    2356. 

  2356.     const b = t.byKey[key];
    2357. 

  2357.     const d = defs[b.defIds[0]] || (b.insts[0] ? defOf(b.insts[0]) : {});
    2358. 

  2358.     const sample = b.insts[0], sk = "mod:" + b.key;
    2359. 

  2359.     // 结构按 kind 分化：workflow = 流程图（引用别的模块，点节点跳过去）；code = 源码；agent = 卡片。
    2360. 

  2360.     // 「这是什么 / System Prompt / 输入 / 工具 / 模型」是 **agent/llm 专属**的结构卡 —— workflow / code
    2361. 

  2361.     // 不走这套（它们的结构就是流程图 / 源码本身，summary 也已在 md-sum 显示过），否则会多出一张「这是什么」。
    2362. 

  2362.     const divergent = d.kind === "workflow" || d.kind === "code";
    2363. 

  2363.     const cards = divergent ? [] : structCards(d.spec || {}, sample ? sample.input : null,
    2364. 

  2364.                               sample ? sample.used_tools : []);
    2365. 

  2365.     putCards(sk, cards);
    2366. 

  2366.     // **结构只描述自己**：被引模块的细节不在这里，所以这里没有它们的 prompt / 模型 / 输入槽。
    2367. 

  2367.     const kindHtml = d.kind === "workflow" ? flowchartHtml(d.spec || {})
    2368. 

  2368.                    : d.kind === "code" ? sourceHtml(d.spec || {}, b.key) : "";
    2369. 

  2369.     return `<div class="mod-block" id="bn-${domId(b.key)}" data-key="${esc(b.key)}" style="--mc:${MOD_COLOR[b.key]}">
    2370. 

  2370.       <div class="mod-def">
    2371. 

  2371.         <div class="md-cap">模块定义<span class="md-depth" title="调用树上的深度">L${t.depth[b.key]}</span></div>
    2372. 

  2372.         <div class="md-key">${esc(b.key)}</div>
    2373. 

  2373.         <div class="md-meta"><span class="md-kind">${esc(d.kind || "")}</span>
    2374. 

  2374.           ${d.fingerprint ? `<span class="md-ver" title="定义版本指纹">@${esc(d.fingerprint)}</span>` : ""}
    2375. 

  2375.           ${b.defIds.length > 1 ? `<span class="md-ver">${b.defIds.length} 个版本</span>` : ""}</div>
    2376. 

  2376.         ${d.summary ? `<div class="md-sum">${esc(clip(d.summary, 90))}</div>` : ""}
    2377. 

  2377.         <div class="md-cards">${kindHtml}${cards.map((c, i) => renderPCard(sk, i, c)).join("")
    2378. 

  2378.           || (kindHtml ? "" : `<div class="lane-empty">（无结构信息）</div>`)}</div>
    2379. 

  2379.       </div>
    2380. 

  2380.       <div class="mod-runs">
    2381. 

  2381.         <div class="mr-cap">运行流程 · 本轮 ${b.insts.length} 个实例</div>
    2382. 

  2382.         ${b.insts.length ? b.insts.map((n, i) => instLaneBox(n, i + 1)).join("")
    2383. 

  2383.           : `<div class="inst-lane off"><div class="lane-empty">（本轮没有这个模块的运行实例）</div></div>`}
    2384. 

  2384.       </div></div>`;
    2385. 

  2385.   };
    2386. 

  2386. 

  2387.   // 「下一轮」落点：控制循环是 plan ⇄ execute 的**环**，本轮跑完要回到下一轮 plan。
    2388. 

  2388.   // 那条回边不在本轮的模块图里（它落到的是下一轮），所以单摆一个节点放在**最右**、与本轮最终
    2389. 

  2389.   // 产出那个块同一水平带：从它的产出连过去，点击即翻到下一轮。
    2390. 

  2390.   const entries = round.entry_ids || [];
    2391. 

  2391.   const lastEntry = entries.length ? entries[entries.length - 1] : null;
    2392. 

  2392.   const nextIdx = SNAP.idx + 1, hasNext = SNAP.list && nextIdx < SNAP.list.length;
    2393. 

  2393.   TREE.lastEntryKey = t.lastEntry;
    2394. 

  2394.   const tail = (hasNext && lastEntry != null) ? `
    2395. 

  2395.     <div class="next-round" id="nextRoundNode" data-from="${lastEntry}"
    2396. 

  2396.          onclick="gotoSnap(${nextIdx})" title="翻到下一轮">
    2397. 

  2397.       <div class="nr-cap">↩ 回吐 · 进入下一轮</div>
    2398. 

  2398.       <div class="nr-t">第 ${nextIdx + 1} 轮 · ${esc(roundLabel(SNAP.list[nextIdx], nextIdx))}</div></div>` : "";
    2399. 

  2399.   world.innerHTML = `<svg class="board-edges" id="boardEdges"></svg>
    2400. 

  2400.     <svg class="board-edges hot" id="boardHot"></svg>
    2401. 

  2401.     <div class="board-labels" id="boardLabels"></div>` +
    2402. 

  2402.     order.map(blockHtml).join("") + tail;
    2403. 

  2403.   relayoutOnImages(world);
    2404. 

  2404.   requestAnimationFrame(() => layoutBoard());
    2405. 

  2405. }
    2406. 

  2406. 

  2407. // 摆位：块尺寸由内容决定，只能**先渲染再量**。量完分两个轴摆（边类型见 moduleTree.edgeKind），
    2408. 

  2408. // 并按「**竖直层**」拉齐高度：
    2409. 

  2409. //   · **入口链（entry：plan→handler 的交接）→ 水平**：后继块放在父块右缘、同一层；
    2410. 

  2410. //   · **引用/调用（call/ref：模块内部引用了别的模块）→ 往下一层 + 右缩进一个「模块定义」的宽度**：
    2411. 

  2411. //     被调块落到父块**下面一层**、左缘对齐父块运行流程起点，同一父的多个被调块依次向右排开；递归适用。
    2412. 

  2412. //   **竖直层 = 从根经过几条「往下」的引用边**（entry 不增层、call/ref 增一层）。同一层的所有块**拉齐到
    2413. 

  2413. //   该层最高块的高度**（顶、底都对齐，形成整齐的水平带），于是下一层从统一的 y 起，层级带一目了然。
    2414. 

  2414. //   **唯独最底层保持自适应高度**（它下面没有东西要对齐，拉齐只会平添空白）。
    2415. 

  2415. //   入口链后继放在**本子树右缘之后**（清开自己那串被调子树），避免压在一起；不设统一列宽，宽块只撑自己那带。
    2416. 

  2416. const BLK_GX = 56, BLK_GY = 56, BLK_PAD = 32;
    2417. 

  2417. function placeBlocks() {
    2418. 

  2418.   const world = $("#boardWorld");
    2419. 

  2419.   if (!world || !TREE) return { w: world ? world.scrollWidth : 0, h: world ? world.scrollHeight : 0 };
    2420. 

  2420.   const ek = TREE.edgeKind || new Map();
    2421. 

  2421.   // 先清掉上一次可能设过的强制高度，再量**自然**尺寸（否则量到的是被拉过的高度）。
    2422. 

  2422.   const boxes = {};
    2423. 

  2423.   TREE.order.forEach(k => {
    2424. 

  2424.     const el = document.getElementById("bn-" + domId(k));
    2425. 

  2425.     if (!el) return;
    2426. 

  2426.     el.style.height = "";
    2427. 

  2427.     const def = el.querySelector(".mod-def");
    2428. 

  2428.     boxes[k] = { el, w: el.offsetWidth, h: el.offsetHeight, defW: def ? def.offsetWidth : 40 };
    2429. 

  2429.   });
    2430. 

  2430.   // ① 竖直分层：root=0；entry 后继同层；call/ref 被调 +1 层。首次赋值为准（多父取第一个）。
    2431. 

  2431.   //    遍历顺序与下面的 walk 一致（refKids 先、entryKid 后），保证「多父块归到同一层与同一次摆放」。
    2432. 

  2432.   const row = {};
    2433. 

  2433.   const assignRow = (k, r) => {
    2434. 

  2434.     if (row[k] != null) return;
    2435. 

  2435.     row[k] = r;
    2436. 

  2436.     const kids = TREE.children.get(k) || [];
    2437. 

  2437.     kids.filter(c => ek.get(c) !== "entry").forEach(c => assignRow(c, r + 1));
    2438. 

  2438.     const e = kids.find(c => ek.get(c) === "entry"); if (e) assignRow(e, r);
    2439. 

  2439.   };
    2440. 

  2440.   TREE.roots.forEach(r => assignRow(r, 0));
    2441. 

  2441.   // ② 每层最高块 + 最底层号；③ 每层顶 y（层高累加）
    2442. 

  2442.   const rowMaxH = {}; let maxRow = 0;
    2443. 

  2443.   Object.keys(row).forEach(k => {
    2444. 

  2444.     const b = boxes[k]; if (!b) return;
    2445. 

  2445.     const r = row[k]; rowMaxH[r] = Math.max(rowMaxH[r] || 0, b.h); if (r > maxRow) maxRow = r;
    2446. 

  2446.   });
    2447. 

  2447.   const rowY = {}; let acc = BLK_PAD;
    2448. 

  2448.   for (let r = 0; r <= maxRow; r++) { rowY[r] = acc; acc += (rowMaxH[r] || 0) + BLK_GY; }
    2449. 

  2449.   const rowH = k => (row[k] < maxRow ? rowMaxH[row[k]] : boxes[k].h);   // 非最底层拉齐层高；最底层自适应
    2450. 

  2450.   let maxR = 0, maxB = 0;
    2451. 

  2451.   const done = new Set();
    2452. 

  2452.   const walk = (k, x) => {                         // 只算 x（横向摆放/避让）；y 与高度由所在层决定。返回子树右缘
    2453. 

  2453.     const s = boxes[k]; if (!s) return x;
    2454. 

  2454.     const y = rowY[row[k]], h = rowH(k);
    2455. 

  2455.     s.el.style.left = x + "px"; s.el.style.top = y + "px";
    2456. 

  2456.     s.el.style.height = (row[k] < maxRow) ? h + "px" : "";
    2457. 

  2457.     maxR = Math.max(maxR, x + s.w); maxB = Math.max(maxB, y + h);
    2458. 

  2458.     const kids = (TREE.children.get(k) || []).filter(c => !done.has(c));
    2459. 

  2459.     const refKids = kids.filter(c => ek.get(c) !== "entry");   // 引用/调用：往下一层 + 缩进
    2460. 

  2460.     const entryKid = kids.find(c => ek.get(c) === "entry");    // 入口链后继：同层水平（至多一个，链是线性的）
    2461. 

  2461.     let right = x + s.w;
    2462. 

  2462.     let cx = x + s.defW;                            // 被调块缩进一个 mod-def 宽度（往下一层，y 自动来自 rowY）
    2463. 

  2463.     refKids.forEach(c => { done.add(c); const r = walk(c, cx); cx = r + BLK_GX; right = Math.max(right, r); });
    2464. 

  2464.     if (entryKid) {                                 // 放在本子树右缘之后，清开被调子树避免重叠
    2465. 

  2465.       done.add(entryKid);
    2466. 

  2466.       const r = walk(entryKid, Math.max(x + s.w + BLK_GX, right + BLK_GX));
    2467. 

  2467.       right = Math.max(right, r);
    2468. 

  2468.     }
    2469. 

  2469.     return right;
    2470. 

  2470.   };
    2471. 

  2471.   let rx = BLK_PAD;                                 // 多个根同在第 0 层 → 依次向右排开
    2472. 

  2472.   TREE.roots.forEach(r => { if (done.has(r)) return; done.add(r); rx = walk(r, rx) + BLK_GX; });
    2473. 

  2473.   let ty = maxB + BLK_GY;                           // 兜底：没进树的块（既非 root 又没被引用到）接在最下面，自然高
    2474. 

  2474.   TREE.order.forEach(k => {
    2475. 

  2475.     if (done.has(k)) return;
    2476. 

  2476.     done.add(k);
    2477. 

  2477.     const s = boxes[k]; if (!s) return;
    2478. 

  2478.     s.el.style.height = "";
    2479. 

  2479.     s.el.style.left = BLK_PAD + "px"; s.el.style.top = ty + "px";
    2480. 

  2480.     maxR = Math.max(maxR, BLK_PAD + s.w); maxB = Math.max(maxB, ty + s.h);
    2481. 

  2481.     ty += s.h + BLK_GY;
    2482. 

  2482.   });
    2483. 

  2483.   const nr = document.getElementById("nextRoundNode");
    2484. 

  2484.   if (nr) {                                        // 最右、与本轮最终产出那块同一水平带
    2485. 

  2485.     const anchor = boxes[TREE.lastEntryKey];
    2486. 

  2486.     nr.style.left = (maxR + BLK_GX) + "px";
    2487. 

  2487.     nr.style.top = (anchor ? anchor.el.offsetTop : BLK_PAD) + "px";
    2488. 

  2488.     maxR = maxR + BLK_GX + nr.offsetWidth;
    2489. 

  2489.     maxB = Math.max(maxB, nr.offsetTop + nr.offsetHeight);
    2490. 

  2490.   }
    2491. 

  2491.   return { w: maxR + BLK_PAD, h: maxB + BLK_PAD };
    2492. 

  2492. }
    2493. 

  2493. 

  2494. function renderBoard() {
    2495. 

  2495.   const world = $("#boardWorld"); if (!world) return;
    2496. 

  2496.   SNAP.cards = {};
    2497. 

  2497.   const round = MODULES && MODULES.byIdx[SNAP.idx];
    2498. 

  2498.   if (round) { renderModuleBoard(round); return; }
    2499. 

  2499.   // 本轮没有模块行 → 没有可画的节点图，如实说明而不是空白一片。
    2500. 

  2500.   SNAP.graph = { nodes: [], edges: [] };
    2501. 

  2501.   TREE = null;
    2502. 

  2502.   world.innerHTML = `<svg class="board-edges" id="boardEdges"></svg>
    2503. 

  2503.     <svg class="board-edges hot" id="boardHot"></svg>
    2504. 

  2504.     <div class="board-labels" id="boardLabels"></div>
    2505. 

  2505.     <div class="board-none">本轮无节点记录</div>`;
    2506. 

  2506. }
    2507. 

  2507. 

  2508. // ── 画板布局：先按调用树给每个块定 x/y（块的尺寸由内容决定，必须先渲染再量），再画连线 ──
    2509. 

  2509. function layoutBoard() {
    2510. 

  2510.   const world = $("#boardWorld"); if (!world || !world.offsetParent) return;   // 隐藏时跳过
    2511. 

  2511.   world.style.width = ""; world.style.height = "";
    2512. 

  2512.   const s = placeBlocks();
    2513. 

  2513.   BOARD.worldW = Math.max(s.w, world.scrollWidth);
    2514. 

  2514.   BOARD.worldH = Math.max(s.h, world.scrollHeight);
    2515. 

  2515.   world.style.width = BOARD.worldW + "px"; world.style.height = BOARD.worldH + "px";
    2516. 

  2516.   drawLaneEdges();
    2517. 

  2517.   drawCallEdges();
    2518. 

  2518.   if (!BOARD.fitted) { BOARD.fitted = true; boardFit(); } else boardApply();
    2519. 

  2519. }
    2520. 

  2520. 

  2521. // 一条 SVG 路径的通用件：箭头**与线同色**（marker 不继承 stroke，只能一种颜色一个 marker）。
    2522. 

  2522. const mkId = c => "mk" + String(c).replace(/[^A-Za-z0-9]/g, "");
    2523. 

  2523. const svgPaths = paths =>
    2524. 

  2524.   `<defs>${[...new Set(paths.map(p => p.c))].map(c =>
    2525. 

  2525.     `<marker id="${mkId(c)}" markerWidth="7" markerHeight="7" refX="6.2" refY="2.4" orient="auto">
    2526. 

  2526.        <path d="M0,0 L6.4,2.4 L0,4.8 Z" fill="${c}"/></marker>`).join("")}</defs>` +
    2527. 

  2527.   paths.map(p => `<path d="${p.d}" fill="none" stroke="${p.c}" stroke-width="${p.w || 2}" opacity=".9"
    2528. 

  2528.     stroke-linecap="round"${
    2529. 

  2529.     p.dash ? ` stroke-dasharray="${p.dash}"` : ""} marker-end="url(#${mkId(p.c)})"/>`).join("");
    2530. 

  2530. 

  2531. // 模块块的色相 —— 连线与该模块的定义块、泳道边框同色（颜色是「这是谁」的编码，别用灰）
    2532. 

  2532. const hueOf = el => {
    2533. 

  2533.   const blk = el && el.closest && el.closest(".mod-block");
    2534. 

  2534.   const h = blk ? getComputedStyle(blk).getPropertyValue("--mc").trim() : "";
    2535. 

  2535.   return h ? `hsl(${h} 70% 62%)` : "var(--muted)";
    2536. 

  2536. };
    2537. 

  2537. 

  2538. // ① 链内连接：一条运行链上相邻两步（输入 → 节点 → … → 输出），实线曲线箭头。
    2539. 

  2539. // 画在**泳道自己的** SVG 上（泳道背景之上、卡片之下），所以线是清晰的而不是隔着几层半透明底色。
    2540. 

  2540. // DOM 里的次序就是链的次序（instLaneHtml 按 seq 排好），这里只量几何、不做推断。
    2541. 

  2541. //
    2542. 

  2542. // **并发一列 = 多个端点**：同 seq 的 N 步是并成一列画的（产生侧标的并发事实），连线就该是
    2543. 

  2543. // 一分为 N（扇出）、N 合一（汇聚）—— 一条线连到"那一列"上，等于把 N 步画成了一步。
    2544. 

  2544. function drawLaneEdges() {
    2545. 

  2545.   const z = (BOARD && BOARD.z) || 1;
    2546. 

  2546.   // 一步的**连接端点**：并发列取列里的每张卡（N 个端点），其余取这一列本身（1 个端点）。
    2547. 

  2547.   const portsOf = col => {
    2548. 

  2548.     const stack = col.querySelector(":scope > .pc-parallel-stack");
    2549. 

  2549.     return stack && stack.children.length ? [...stack.children] : [col];
    2550. 

  2550.   };
    2551. 

  2551.   document.querySelectorAll("#boardWorld .lane-steps").forEach(lane => {
    2552. 

  2552.     const svg = lane.querySelector(":scope > .lane-wires"); if (!svg) return;
    2553. 

  2553.     const items = [...lane.querySelectorAll(":scope > .lane-col")];
    2554. 

  2554.     const lb = lane.getBoundingClientRect();
    2555. 

  2555.     const w = lane.scrollWidth, h = lane.scrollHeight;
    2556. 

  2556.     svg.setAttribute("width", w); svg.setAttribute("height", h);
    2557. 

  2557.     svg.setAttribute("viewBox", `0 0 ${w} ${h}`);
    2558. 

  2558.     const R = el => {
    2559. 

  2559.       const r = el.getBoundingClientRect();
    2560. 

  2560.       return { l: (r.left - lb.left) / z, r: (r.right - lb.left) / z,
    2561. 

  2561.                cy: (r.top + r.height / 2 - lb.top) / z };
    2562. 

  2562.     };
    2563. 

  2563.     const color = hueOf(lane), paths = [];
    2564. 

  2564.     // 出入端都水平离开/进入，控制点按水平间距取、再按落差补一点 → 扇出扇入是对称的平顺弧
    2565. 

  2565.     const link = (a, b) => paths.push({ d: hcurve(a, b), c: color });
    2566. 

  2566.     for (let i = 0; i + 1 < items.length; i++) {
    2567. 

  2567.       const A = portsOf(items[i]).map(R), B = portsOf(items[i + 1]).map(R);
    2568. 

  2568.       if (!A.length || !B.length || B[0].l <= A[0].r) continue;
    2569. 

  2569.       if (A.length === 1 || B.length === 1) A.forEach(a => B.forEach(b => link(a, b)));  // 扇出 / 汇聚
    2570. 

  2570.       else A.slice(0, Math.min(A.length, B.length)).forEach((a, k) => link(a, B[k]));    // 等宽并发：逐路对接
    2571. 

  2571.     }
    2572. 

  2572.     svg.innerHTML = svgPaths(paths);
    2573. 

  2573.   });
    2574. 

  2574. }
    2575. 

  2575. 

  2576. // 世界坐标下的矩形（画板是 transform 缩放的，量出来的像素要除以 z）
    2577. 

  2577. function boardRect(el) {
    2578. 

  2578.   if (!el) return null;
    2579. 

  2579.   const wb = $("#boardWorld").getBoundingClientRect(), z = (BOARD && BOARD.z) || 1;
    2580. 

  2580.   const r = el.getBoundingClientRect();
    2581. 

  2581.   return { l: (r.left - wb.left) / z, t: (r.top - wb.top) / z, r: (r.right - wb.left) / z,
    2582. 

  2582.            b: (r.bottom - wb.top) / z, cx: (r.left + r.width / 2 - wb.left) / z,
    2583. 

  2583.            cy: (r.top + r.height / 2 - wb.top) / z };
    2584. 

  2584. }
    2585. 

  2585. const vcurve = (a, b) => {                        // 竖向：平滑三次贝塞尔，不出折角
    2586. 

  2586.   const dy = Math.max(40, Math.abs(b.cy - a.cy) * 0.45);
    2587. 

  2587.   return `M${a.cx},${a.cy} C${a.cx},${a.cy + dy} ${b.cx},${b.cy - dy} ${b.cx},${b.cy}`;
    2588. 

  2588. };
    2589. 

  2589. const hcurve = (a, b) => {                        // 横向：右缘 → 左缘，控制点纯水平 → 平顺的 S
    2590. 

  2590.   const c = Math.min(Math.max((b.l - a.r) * 0.55, 26), 150) + Math.abs(b.cy - a.cy) * 0.18;
    2591. 

  2591.   return `M${a.r},${a.cy} C${a.r + c},${a.cy} ${b.l - c},${b.cy} ${b.l},${b.cy}`;
    2592. 

  2592. };
    2593. 

  2593. 

  2594. // ── 绕开模块块的正交布线 ─────────────────────────────────────────────────────
    2595. 

  2595. // 跨模块那几条线要跨过整块画面，直着连必然从别的模块的**执行流程**上压过去 —— 线是次要信息，
    2596. 

  2596. // 不该盖住主要内容。摆位是我们自己算的（placeBlocks），**块与块之间的空隙在哪是已知的**，
    2597. 

  2597. // 所以不需要通用避障算法：把线走成「竖直逃逸 → 在空隙里横穿 → 竖直切入」，逐段与所有块做
    2598. 

  2598. // 矩形碰撞检测，取不撞的那条（多条都可行时取最短）。撞不出路时才退回原来的曲线。
    2599. 

  2599. const CORRIDOR = 26;                              // 逃逸/横穿时离块边的留白（块间距 56 的一半）
    2600. 

  2600. function boardObstacles() {
    2601. 

  2601.   return [...document.querySelectorAll("#boardWorld .mod-block, #boardWorld .next-round")]
    2602. 

  2602.     .map(el => ({ el, ...boardRect(el) })).filter(o => o.l != null);
    2603. 

  2603. }
    2604. 

  2604. // 线段（水平或竖直）与矩形是否相交（留 6px 余量，贴边不算撞）
    2605. 

  2605. function segHits(x1, y1, x2, y2, r) {
    2606. 

  2606.   const p = 6, L = r.l + p, R = r.r - p, T = r.t + p, B = r.b - p;
    2607. 

  2607.   if (R <= L || B <= T) return false;
    2608. 

  2608.   if (x1 === x2) return x1 > L && x1 < R && Math.max(y1, y2) > T && Math.min(y1, y2) < B;
    2609. 

  2609.   return y1 > T && y1 < B && Math.max(x1, x2) > L && Math.min(x1, x2) < R;
    2610. 

  2610. }
    2611. 

  2611. // 两个锚点之间的正交路线：竖直出 → 走廊横穿 → 竖直入。srcBlk/dstBlk 是两端所在的块（首尾段允许穿过它们）。
    2612. 

  2612. function orthoRoute(a, b, srcBlk, dstBlk, obs) {
    2613. 

  2613.   if (!a || !b || !srcBlk || !dstBlk) return null;
    2614. 

  2614.   const lanes = [srcBlk.b + CORRIDOR, srcBlk.t - CORRIDOR, dstBlk.b + CORRIDOR, dstBlk.t - CORRIDOR];
    2615. 

  2615.   let best = null;
    2616. 

  2616.   for (const ye of lanes) {
    2617. 

  2617.     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]]
    2618. 

  2618.       .filter((p, i, arr) => i === 0 || p[0] !== arr[i - 1][0] || p[1] !== arr[i - 1][1]);
    2619. 

  2619.     let ok = pts.length > 1, len = 0;
    2620. 

  2620.     for (let i = 0; i + 1 < pts.length && ok; i++) {
    2621. 

  2621.       const [x1, y1] = pts[i], [x2, y2] = pts[i + 1];
    2622. 

  2622.       len += Math.abs(x2 - x1) + Math.abs(y2 - y1);
    2623. 

  2623.       for (const o of obs) {
    2624. 

  2624.         if (i === 0 && o.el === srcBlk.el) continue;             // 起点在源块里，第一段必然穿它
    2625. 

  2625.         if (i === pts.length - 2 && o.el === dstBlk.el) continue; // 末段切进目标块
    2626. 

  2626.         if (segHits(x1, y1, x2, y2, o)) { ok = false; break; }
    2627. 

  2627.       }
    2628. 

  2628.     }
    2629. 

  2629.     if (ok && (!best || len < best.len)) best = { pts, len };
    2630. 

  2630.   }
    2631. 

  2631.   return best ? best.pts : null;
    2632. 

  2632. }
    2633. 

  2633. // 折线 → 圆角路径（拐角用二次贝塞尔抹圆，读起来像走线而不是折断）
    2634. 

  2634. function polyPath(pts, r = 16) {
    2635. 

  2635.   let d = `M${pts[0][0]},${pts[0][1]}`;
    2636. 

  2636.   for (let i = 1; i + 1 < pts.length; i++) {
    2637. 

  2637.     const [px, py] = pts[i - 1], [cx, cy] = pts[i], [nx, ny] = pts[i + 1];
    2638. 

  2638.     const d1 = Math.hypot(cx - px, cy - py), d2 = Math.hypot(nx - cx, ny - cy);
    2639. 

  2639.     const rr = Math.min(r, d1 / 2, d2 / 2);
    2640. 

  2640.     d += ` L${cx + (px - cx) / d1 * rr},${cy + (py - cy) / d1 * rr}`
    2641. 

  2641.        + ` Q${cx},${cy} ${cx + (nx - cx) / d2 * rr},${cy + (ny - cy) / d2 * rr}`;
    2642. 

  2642.   }
    2643. 

  2643.   const e = pts[pts.length - 1];
    2644. 

  2644.   return d + ` L${e[0]},${e[1]}`;
    2645. 

  2645. }
    2646. 

  2646. 

  2647. // 画板上的连线分**两层**，看的是两件不同的事，出现时机也不同：
    2648. 

  2648. //
    2649. 

  2649. //   · 结构层（定义 → 定义）：「这个模块的结构里引用了哪个模块」。它**逐轮不变**，一直挂在画面上
    2650. 

  2650. //     只会把运行过程压在底下 —— 改成**悬停结构才出现**（停在「模块定义」那一列、或结构图里那个引用节点上）。
    2651. 

  2651. //   · 运行层（实例 → 实例）：本轮**实际**怎么走的 —— 调用点把输入递进被调实例、被调实例把输出递回
    2652. 

  2652. //     调用点。这是跨模块的**输入 / 输出**两条线，同样悬停才出现。
    2653. 

  2653. //
    2654. 

  2654. // 常驻画面的只有一条：本轮最终产出 →「下一轮」落点（控制循环的回边，不属于任何模块）。
    2655. 

  2655. let CALL_AGG = new Map();
    2656. 

  2656. function drawCallEdges() {
    2657. 

  2657.   const edges = $("#boardEdges"); if (!edges) return;
    2658. 

  2658.   edges.setAttribute("width", BOARD.worldW); edges.setAttribute("height", BOARD.worldH);
    2659. 

  2659.   edges.setAttribute("viewBox", `0 0 ${BOARD.worldW} ${BOARD.worldH}`);
    2660. 

  2660.   // 按 (调用方模块 → 被调模块) 归并计数：悬停结构时给「本轮 ×N」用。这是对 call 边的**计数**，不是推断。
    2661. 

  2661.   CALL_AGG = new Map();
    2662. 

  2662.   $("#boardWorld").querySelectorAll(".call-chip[data-callee]").forEach(chip => {
    2663. 

  2663.     const from = (chip.closest(".mod-block") || {}).dataset?.key || "";
    2664. 

  2664.     const to = chip.dataset.calleeKey || "";
    2665. 

  2665.     if (!from || !to) return;
    2666. 

  2666.     const k = from + " " + to;
    2667. 

  2667.     CALL_AGG.set(k, (CALL_AGG.get(k) || 0) + 1);
    2668. 

  2668.   });
    2669. 

  2669.   const paths = [];
    2670. 

  2670.   // 入口链的**交接**：前一段的产出 → 后一段的输入（plan 选定的 Task 递给 handler 执行）。
    2671. 

  2671.   // 它不是 call 边 —— 两者都是本轮的根级实例、彼此没有调用关系 —— 但它是这一轮的**主干**，
    2672. 

  2672.   // 所以常驻显示（实线，与"引用"那种虚线区分开）。端点取两条泳道真实的输出 / 输入锚点。
    2673. 

  2673.   const chain = (TREE && TREE.entryInsts) || [];
    2674. 

  2674.   for (let i = 1; i < chain.length; i++) {
    2675. 

  2675.     const o = boardRect(document.getElementById("ioout-" + chain[i - 1]));
    2676. 

  2676.     const n = boardRect(document.getElementById("ioin-" + chain[i]));
    2677. 

  2677.     if (!o || !n) continue;
    2678. 

  2678.     paths.push({ d: n.l >= o.r - 4 ? hcurve(o, n)
    2679. 

  2679.                                    : vcurve({ cx: o.cx, cy: o.b }, { cx: n.cx, cy: n.t }),
    2680. 

  2680.                  c: "var(--ok)", w: 2.6 });
    2681. 

  2681.   }
    2682. 

  2682.   const nr = document.getElementById("nextRoundNode");
    2683. 

  2683.   if (nr && nr.dataset.from) {
    2684. 

  2684.     // 这条要横跨大半张画面 → 同样走绕开所有块的正交路线（见 orthoRoute）
    2685. 

  2685.     const oEl = document.getElementById("ioout-" + nr.dataset.from);
    2686. 

  2686.     const o = boardRect(oEl), t = boardRect(nr), obs = boardObstacles();
    2687. 

  2687.     if (o && t) {
    2688. 

  2688.       const src = oEl && oEl.closest(".mod-block");
    2689. 

  2689.       const pts = orthoRoute(o, t, obs.find(x => x.el === src), obs.find(x => x.el === nr), obs);
    2690. 

  2690.       paths.push({ d: pts ? polyPath(pts) : vcurve({ cx: o.cx, cy: o.b }, { cx: t.cx, cy: t.t }),
    2691. 

  2691.                    c: "var(--accent)", w: 2, dash: "7 6" });
    2692. 

  2692.     }
    2693. 

  2693.   }
    2694. 

  2694.   edges.innerHTML = svgPaths(paths);
    2695. 

  2695.   drawHotEdges([], []);                 // 重画即清空悬停层
    2696. 

  2696. }
    2697. 

  2697. 

  2698. // 两个模块块之间的一条边：**方向**按几何选边（不预设生长方向）。入口链后继在右 → 右缘出、左缘进；
    2699. 

  2699. // 被调块在下 → 底缘出、顶缘进；回边（被调在左/在上）反过来。箭头永远指向被调方。
    2700. 

  2700. function blockLink(a, b) {
    2701. 

  2701.   if (b.l >= a.r - 4) return { d: hcurve({ r: a.r, cy: a.cy }, { l: b.l, cy: b.cy }),
    2702. 

  2702.                                mid: [(a.r + b.l) / 2, (a.cy + b.cy) / 2] };
    2703. 

  2703.   if (b.r <= a.l + 4) return { d: hcurve({ r: b.r, cy: b.cy }, { l: a.l, cy: a.cy }),
    2704. 

  2704.                                mid: [(b.r + a.l) / 2, (a.cy + b.cy) / 2] };
    2705. 

  2705.   if (b.t >= a.b) return { d: vcurve({ cx: a.cx, cy: a.b }, { cx: b.cx, cy: b.t }),
    2706. 

  2706.                            mid: [(a.cx + b.cx) / 2, (a.b + b.t) / 2] };
    2707. 

  2707.   return { d: vcurve({ cx: a.cx, cy: a.t }, { cx: b.cx, cy: b.b }),
    2708. 

  2708.            mid: [(a.cx + b.cx) / 2, (a.t + b.b) / 2] };
    2709. 

  2709. }
    2710. 

  2710. 

  2711. // 悬停层：`chips` = 运行层（实例间的输入 / 输出两条），`links` = 结构层（定义间的引用一条）。
    2712. 

  2712. // 画在最上层（盖住卡片也无妨 —— 同时只有一两条，要的就是"是哪一条"一目了然）。
    2713. 

  2713. function drawHotEdges(chips, links) {
    2714. 

  2714.   const hot = $("#boardHot"), labels = $("#boardLabels"); if (!hot) return;
    2715. 

  2715.   hot.setAttribute("width", BOARD.worldW); hot.setAttribute("height", BOARD.worldH);
    2716. 

  2716.   hot.setAttribute("viewBox", `0 0 ${BOARD.worldW} ${BOARD.worldH}`);
    2717. 

  2717.   document.querySelectorAll("#boardWorld .hot").forEach(x => x.classList.remove("hot"));
    2718. 

  2718.   const paths = [], tags = [];
    2719. 

  2719.   const obs = boardObstacles();
    2720. 

  2720.   const blkOf = el => { const b = el && el.closest(".mod-block");
    2721. 

  2721.                         return b ? obs.find(o => o.el === b) : null; };
    2722. 

  2722.   // 一条跨模块的线：优先走**绕开所有块**的正交路线（不从别人的执行流程上压过去），
    2723. 

  2723.   // 实在绕不出来（几何太挤）才退回原来的贝塞尔。
    2724. 

  2724.   const routed = (a, b, ea, eb, style) => {
    2725. 

  2725.     const pts = orthoRoute(a, b, blkOf(ea), blkOf(eb), obs);
    2726. 

  2726.     const mid = pts ? pts[Math.floor(pts.length / 2)]
    2727. 

  2727.                     : [(a.cx + b.cx) / 2, (a.cy + b.cy) / 2];
    2728. 

  2728.     paths.push({ ...style, d: pts ? polyPath(pts)
    2729. 

  2729.                                   : vcurve({ cx: a.cx, cy: a.cy }, { cx: b.cx, cy: b.cy }) });
    2730. 

  2730.     return mid;
    2731. 

  2731.   };
    2732. 

  2732.   // ① 运行层：调用点 —输入→ 被调实例；被调实例 —输出→ 回到调用点。两条方向相反的虚线。
    2733. 

  2733.   (chips || []).forEach(chip => {
    2734. 

  2734.     const id = chip.dataset.callee;
    2735. 

  2735.     const c = boardRect(chip), i = boardRect(document.getElementById("ioin-" + id)),
    2736. 

  2736.           o = boardRect(document.getElementById("ioout-" + id));
    2737. 

  2737.     const lane = document.getElementById("inst-" + id);
    2738. 

  2738.     const color = hueOf(lane);
    2739. 

  2739.     chip.classList.add("hot");
    2740. 

  2740.     if (lane) lane.classList.add("hot");
    2741. 

  2741.     if (!c) return;
    2742. 

  2742.     if (i) {
    2743. 

  2743.       const m = routed(c, i, chip, document.getElementById("ioin-" + id),
    2744. 

  2744.                        { c: color, w: 2.6, dash: "7 6" });
    2745. 

  2745.       tags.push({ x: m[0], y: m[1], t: "输入", cls: "in" });
    2746. 

  2746.     }
    2747. 

  2747.     if (o) {
    2748. 

  2748.       const m = routed(o, c, document.getElementById("ioout-" + id), chip,
    2749. 

  2749.                        { c: color, w: 2.6, dash: "2 6" });
    2750. 

  2750.       tags.push({ x: m[0], y: m[1], t: "输出", cls: "out" });
    2751. 

  2751.     }
    2752. 

  2752.   });
    2753. 

  2753.   // ② 结构层：定义 → 定义，两端的模块块一起点亮；标签给出本轮实际调了几次
    2754. 

  2754.   (links || []).forEach(e => {
    2755. 

  2755.     const fa = document.getElementById("bn-" + domId(e.from)), fb = document.getElementById("bn-" + domId(e.to));
    2756. 

  2756.     const a = boardRect((fa && fa.querySelector(":scope > .mod-def")) || fa);
    2757. 

  2757.     const b = boardRect((fb && fb.querySelector(":scope > .mod-def")) || fb);
    2758. 

  2758.     if (!a || !b) return;
    2759. 

  2759.     if (fa) fa.classList.add("hot");
    2760. 

  2760.     if (fb) fb.classList.add("hot");
    2761. 

  2761.     const L = blockLink(a, b);
    2762. 

  2762.     paths.push({ d: L.d, c: hueOf(fb), w: 2.2, dash: "7 6" });
    2763. 

  2763.     const n = CALL_AGG.get(e.from + " " + e.to);
    2764. 

  2764.     tags.push({ x: L.mid[0], y: L.mid[1], cls: "ref", t: n ? `引用 · 本轮 ×${n}` : "引用 · 本轮未调用" });
    2765. 

  2765.   });
    2766. 

  2766.   hot.innerHTML = paths.length ? svgPaths(paths) : "";
    2767. 

  2767.   if (labels) labels.innerHTML = tags.map(t =>
    2768. 

  2768.     `<div class="edge-tag ${t.cls}" style="left:${t.x}px;top:${t.y}px">${esc(t.t)}</div>`).join("");
    2769. 

  2769. }
    2770. 

  2770. 

  2771. // 悬停命中什么就画什么。
    2772. 

  2772. //   运行层：**只**停在 call 芯片（引用节点）上 → 亮它引用的那个具体实例；停在泳道本身不亮
    2773. 

  2773. //   （hover 实例自己没有"要指向谁"的语义，点亮反而是噪声）。
    2774. 

  2774. //   结构层：停在结构图里的引用节点上 → 那一条；停在整列「模块定义」上 → 它声明的全部引用。
    2775. 

  2775. function hotChipsFor(el) {
    2776. 

  2776.   const world = $("#boardWorld"); if (!world || !el || !el.closest) return [];
    2777. 

  2777.   const chip = el.closest(".call-chip[data-callee]");
    2778. 

  2778.   if (chip) return [chip];
    2779. 

  2779.   return [];
    2780. 

  2780. }
    2781. 

  2781. // 「输入」的两侧联动：结构里那张输入卡的**槽位**（.slot-row[data-slot]）与运行实例输入节点里的
    2782. 

  2782. // **输入块卡**（.io-in .pcard[data-slot]）共用同一个 key（结构侧来自 input_schema，实例侧来自
    2783. 

  2783. // blockCards 的 b.key）——所以不需要推断，按 data-slot 直接对上。作用域限在**同一个模块块**内：
    2784. 

  2784. // 结构与它这一轮的全部运行实例本就同块，于是「多个运行实例各自对应的那张输入」会一起亮。
    2785. 

  2785. function slotHotFor(el) {
    2786. 

  2786.   if (!el || !el.closest) return null;
    2787. 

  2787.   const hit = el.closest(".mod-def .slot-row[data-slot], .io-in .pcard[data-slot]");
    2788. 

  2788.   if (!hit || !hit.dataset.slot) return null;
    2789. 

  2789.   const blk = hit.closest(".mod-block");
    2790. 

  2790.   return blk ? { blk, key: hit.dataset.slot } : null;
    2791. 

  2791. }
    2792. 

  2792. function applySlotHot(hit) {
    2793. 

  2793.   document.querySelectorAll("#boardWorld .slot-hot").forEach(x => x.classList.remove("slot-hot"));
    2794. 

  2794.   if (!hit) return;
    2795. 

  2795.   const k = (window.CSS && CSS.escape) ? CSS.escape(hit.key) : hit.key.replace(/"/g, '\\"');
    2796. 

  2796.   hit.blk.querySelectorAll(
    2797. 

  2797.     `.mod-def .slot-row[data-slot="${k}"], .io-in .pcard[data-slot="${k}"]`
    2798. 

  2798.   ).forEach(x => x.classList.add("slot-hot"));
    2799. 

  2799. }
    2800. 

  2800. 

  2801. function hotLinksFor(el) {
    2802. 

  2802.   if (!el || !el.closest) return [];
    2803. 

  2803.   const from = (el.closest(".mod-block") || {}).dataset?.key || "";
    2804. 

  2804.   if (!from) return [];
    2805. 

  2805.   const node = el.closest(".fc-node[data-to]");
    2806. 

  2806.   if (node) return [{ from, to: node.dataset.to }];
    2807. 

  2807.   const def = el.closest(".mod-def");
    2808. 

  2808.   if (!def) return [];
    2809. 

  2809.   return [...new Set([...def.querySelectorAll(".fc-node[data-to]")].map(n => n.dataset.to))]
    2810. 

  2810.     .map(to => ({ from, to }));
    2811. 

  2811. }
    2812. 

  2812. 

  2813. // ── 平移 / 缩放 ──
    2814. 

  2814. function boardApply() { const w = $("#boardWorld"); if (w) w.style.transform = `translate(${BOARD.panX}px,${BOARD.panY}px) scale(${BOARD.z})`; }
    2815. 

  2815. function boardZoom(f, cx, cy) {
    2816. 

  2816.   const board = $("#board"); if (!board) return;
    2817. 

  2817.   const rect = board.getBoundingClientRect();
    2818. 

  2818.   if (cx == null) cx = rect.width / 2; if (cy == null) cy = rect.height / 2;
    2819. 

  2819.   const nz = Math.max(.15, Math.min(2.5, BOARD.z * f));
    2820. 

  2820.   BOARD.panX = cx - ((cx - BOARD.panX) / BOARD.z) * nz;
    2821. 

  2821.   BOARD.panY = cy - ((cy - BOARD.panY) / BOARD.z) * nz;
    2822. 

  2822.   BOARD.z = nz; boardApply();
    2823. 

  2823. }
    2824. 

  2824. function boardFit() {
    2825. 

  2825.   const board = $("#board"); if (!board || !BOARD.worldW) return;
    2826. 

  2826.   const rect = board.getBoundingClientRect();
    2827. 

  2827.   // 调用树是**横向生长**的：宽度由最长的那条链决定、高度由并列分支决定，两个方向都可能溢出，
    2828. 

  2828.   // 所以按**两个方向都能装下**取缩放（跟随内容，不预设哪个方向更长）。
    2829. 

  2829.   const z = Math.max(.12, Math.min((rect.width - 48) / BOARD.worldW,
    2830. 

  2830.                                    (rect.height - 48) / BOARD.worldH, 1.1));
    2831. 

  2831.   BOARD.z = z;
    2832. 

  2832.   BOARD.panX = Math.max(16, (rect.width - BOARD.worldW * z) / 2);
    2833. 

  2833.   BOARD.panY = Math.max(16, (rect.height - BOARD.worldH * z) / 2);
    2834. 

  2834.   boardApply();
    2835. 

  2835. }
    2836. 

  2836. // 全屏 / 沉浸式：把 #snapView 切成 inset:0 覆盖层，退出后恢复撑满宽度；进出后重新适应窗口。
    2837. 

  2837. function boardFullscreen() {
    2838. 

  2838.   const sv = $("#snapView"); if (!sv) return;
    2839. 

  2839.   const on = sv.classList.toggle("fs");
    2840. 

  2840.   document.body.style.overflow = on ? "hidden" : "";
    2841. 

  2841.   const btn = $("#btnFs");
    2842. 

  2842.   if (btn) { btn.textContent = on ? "✕" : "⛶"; btn.title = on ? "退出全屏（Esc）" : "全屏 / 沉浸"; }
    2843. 

  2843.   sv.style.width = "";                                   // 退出全屏回到详情列自然宽度（由 detailbody max-width 约束）
    2844. 

  2844.   requestAnimationFrame(() => { layoutBoard(); boardFit(); });
    2845. 

  2845. }
    2846. 

  2846. // 顶部「全屏」按钮：确保切到过程视图后进入全屏（全屏时该按钮被覆盖层遮住，故只需负责进入）。
    2847. 

  2847. function enterBoardFullscreen() {
    2848. 

  2848.   const sv = $("#snapView"); if (!sv) return;
    2849. 

  2849.   const tab = $("#tabProcess");
    2850. 

  2850.   if (tab && !tab.classList.contains("active")) switchView("process");
    2851. 

  2851.   if (!sv.classList.contains("fs")) boardFullscreen();
    2852. 

  2852. }
    2853. 

  2853. function attachBoardPan() {
    2854. 

  2854.   const board = $("#board"); if (!board) return;
    2855. 

  2855.   // 不用 setPointerCapture（会截走子卡片的 click）；改为：按下只记起点，移动超阈值才判定为拖拽平移，
    2856. 

  2856.   // 拖拽时才吞掉紧随的 click；纯点击（无位移）原样落到卡片上。move/up 挂 window，避免快速拖出画板丢事件。
    2857. 

  2857.   let active = false, dragging = false, sx = 0, sy = 0, ox = 0, oy = 0;
    2858. 

  2858.   const onMove = e => {
    2859. 

  2859.     if (!active) return;
    2860. 

  2860.     if (!dragging && Math.hypot(e.clientX - ox, e.clientY - oy) > 5) { dragging = true; board.classList.add("dragging"); }
    2861. 

  2861.     if (dragging) { BOARD.panX = e.clientX - sx; BOARD.panY = e.clientY - sy; boardApply(); }
    2862. 

  2862.   };
    2863. 

  2863.   const onUp = () => {
    2864. 

  2864.     if (!active) return;
    2865. 

  2865.     active = false;
    2866. 

  2866.     window.removeEventListener("pointermove", onMove);
    2867. 

  2867.     window.removeEventListener("pointerup", onUp);
    2868. 

  2868.     if (dragging) { board.classList.remove("dragging"); BOARD.suppressClick = true; setTimeout(() => BOARD.suppressClick = false, 0); }
    2869. 

  2869.     dragging = false;
    2870. 

  2870.   };
    2871. 

  2871.   board.addEventListener("pointerdown", e => {
    2872. 

  2872.     if (e.button !== 0) return;
    2873. 

  2873.     active = true; dragging = false; sx = e.clientX - BOARD.panX; sy = e.clientY - BOARD.panY; ox = e.clientX; oy = e.clientY;
    2874. 

  2874.     window.addEventListener("pointermove", onMove);
    2875. 

  2875.     window.addEventListener("pointerup", onUp);
    2876. 

  2876.   });
    2877. 

  2877.   // 跨模块引用的实例级连线**按需展开**：只在停到 call 芯片（引用节点）上时亮它引用的那个实例。
    2878. 

  2878.   // 事件委托挂在画板上（卡片是每轮重绘的，逐个绑定会随重绘丢失）。拖拽平移时不画。
    2879. 

  2879.   let hotKey = "";
    2880. 

  2880.   board.addEventListener("pointermove", e => {
    2881. 

  2881.     if (dragging) return;
    2882. 

  2882.     const chips = hotChipsFor(e.target), links = hotLinksFor(e.target);
    2883. 

  2883.     const slot = slotHotFor(e.target);
    2884. 

  2884.     const k = chips.map(c => c.dataset.callee).join(",") + "|"
    2885. 

  2885.             + links.map(l => l.from + ">" + l.to).join(",") + "|"
    2886. 

  2886.             + (slot ? (slot.blk.dataset.key || "") + "#" + slot.key : "");
    2887. 

  2887.     if (k === hotKey) return;
    2888. 

  2888.     hotKey = k;
    2889. 

  2889.     applySlotHot(slot);
    2890. 

  2890.     drawHotEdges(chips, links);
    2891. 

  2891.   });
    2892. 

  2892.   board.addEventListener("pointerleave", () => {
    2893. 

  2893.     hotKey = ""; applySlotHot(null); drawHotEdges([], []);
    2894. 

  2894.   });
    2895. 

  2895.   // macOS 触控板：双指滑动 = 平移（wheel, ctrlKey=false）；双指捏合 = 缩放（wheel, ctrlKey=true）。
    2896. 

  2896.   // 另支持 macOS ⌘（metaKey）+ 鼠标滚轮缩放，方便普通鼠标用户。
    2897. 

  2897.   board.addEventListener("wheel", e => {
    2898. 

  2898.     e.preventDefault();
    2899. 

  2899.     const rect = board.getBoundingClientRect();
    2900. 

  2900.     if (e.ctrlKey || e.metaKey) boardZoom(Math.exp(-e.deltaY * 0.01), e.clientX - rect.left, e.clientY - rect.top);
    2901. 

  2901.     else { BOARD.panX -= e.deltaX; BOARD.panY -= e.deltaY; boardApply(); }
    2902. 

  2902.   }, { passive: false });
    2903. 

  2903. }
    2904. 

  2904. 

  2905. // ── 运行流程的分列与语义（并发批次 / 分支 / 标题 / 成败 / 图片）**全部来自后端**（见 web/app.py
    2906. 

  2906. //    _inv_node / _ev_card：事件按 seq 归并，同 seq = 同一并发列）。前端只负责铺列与画列间连线。──────
    2907. 

  2907. 

  2908. // 组合模块的 ③ 与 ④ 是两列**逐框对应**的（第 i 个运行框 ↔ 第 i 个输出框）。CSS 做不到跨容器对齐，
    2909. 

  2909. // 这里量一遍取每行较高的那个，把两边撑齐——横着读过去就是同一个子模块的「跑了什么 → 产出什么」。
    2910. 

  2910. // 同一行的三段（② 结构格 / ③ 运行框 / ④ 输出框）**顶边对齐**。
    2911. 

  2911. //
    2912. 

  2912. // 两件事，分开对待：
    2913. 

  2913. //   · ③ 运行框 ↔ ④ 输出框：**顶边 + 底边都对齐**（等高）——这两段讲的是同一个子模块的
    2914. 

  2914. //     「跑了什么 → 产出什么」，等高才读得出「这一块是一件事」。
    2915. 

  2915. //   · ② 结构格：只对齐顶边、**不拉伸** —— 结构列可能嵌着整条子链而高出一大截，
    2916. 

  2916. //     拉伸只会把矮的那个撑成不传达任何信息的空色块；多出来的距离留成段底色与连接线。
    2917. 

  2917. //
    2918. 

  2918. // 不靠公式推导（padding / margin / row-gap / 表头高度差 / 嵌套层数……推错一处整列就跑偏），
    2919. 

  2919. // 改成**实测驱动的收敛循环**：量当前实际位置 → 补差 → 再量，直到残差 < 1px。
    2920. 

  2920. //
    2921. 

  2921. // ⚠️ 画板带 transform: scale(z)，`getBoundingClientRect()` 量到的是**缩放后**的值，
    2922. 

  2922. //    而写进 style 的 margin/height 是**未缩放**的布局 px —— 必须除以 z 换算回去。
    2923. 

  2923. 

  2924. 

  2925. // 槽位连线：左侧「输入」里的每个盒子 → 结构「输入拼接 · 槽位」里同名的那个槽 chip。
    2926. 

  2926. // 两端都带 data-slot（后端给的 key），所以是**按槽位一一配对**，不是按顺序凑。
    2927. 

  2927. // **逐层都连**：不只最外层那一对。配对规则是「同一层的输入盒 ↔ 同一层的槽位表」：
    2928. 

  2928. //   · 本模块：① 的自有输入列 ↔ ② 的自有结构卡（组合模块的 .gs-own，不含子结构链）
    2929. 

  2929. //   · 每个子段：同 data-rk 的 .sub-in ↔ .sub-struct —— **行内匹配**，不跨行也不跨层，
    2930. 

  2930. //     于是「execute 的验收标准」不会误连到父模块同名的槽上（这是嵌套后必须先解决的撞名问题）。
    2931. 

  2931. // 线色取该行的 --tone，与那一行的四段底色同源。
    2932. 

  2932. // 卡片渲染（流程卡 / 结构卡通用）：标题、摘要、成败、图片、分支都由后端给定，前端不判断。
    2933. 

  2933. function renderPCard(key, i, s) {
    2934. 

  2934.   const thumbs = (s.images && s.images.length)
    2935. 

  2935.     ? `<div class="pc-thumbs">${s.images.slice(0, 3).map(u =>
    2936. 

  2936.         `<img src="${esc(u)}" referrerpolicy="no-referrer" onclick="event.stopPropagation();openLB('${esc(u)}')" onerror="this.style.display='none'">`).join("")}</div>` : "";
    2937. 

  2937.   // plan 的 ops：涉及具体 Task 的一律用**任务卡**画（与任务台账同一种视觉），把「做了什么操作」**融进卡本身**
    2938. 

  2938.   // ——徽标位显示操作（＋新增 / ～修改 / ↻重做…）、左侧色条按操作着色。规划这一刻不显示执行态状态：
    2939. 

  2939.   // 那时这些 Task 还没跑（重做的更是即将重来），显示「待执行/未达标」是张冠李戴。
    2940. 

  2940.   const ops = (s.ops && s.ops.length)
    2941. 

  2941.     ? `<div class="ops-h">${esc(s.opsTitle || "任务更新")}</div>
    2942. 

  2942.        <div class="ops-list">${(putCards(key + ":ops" + i, s.ops), s.ops.map((o, k) => `
    2943. 

  2943.         <div class="op op-${esc(o.op)}">
    2944. 

  2944.           ${o.detail && o.op !== "update" ? `<div class="op-h"><span class="op-detail">${esc(o.detail)}</span></div>` : ""}
    2945. 

  2945.           ${(o.tasks || []).length ? `<div class="op-tasks">${o.tasks.map(t =>
    2946. 

  2946.             `<div class="${t._child ? "op-child" : ""}">${taskCard(t, {
    2947. 

  2947.                badge: { text: o.label, key: o.op },
    2948. 

  2948.                modified: o.op === "update" ? (o.changed || []) : null,
    2949. 

  2949.                click: o.op === "update" ? `openOpDiff('${key}:ops${i}',${k})` : "" })}</div>`).join("")}</div>` : ""}
    2950. 

  2950.         </div>`).join(""))}</div>` : "";
    2951. 

  2951.   // 本轮选定的下一步：它本身就是一个 Task —— 同样用任务卡画，徽标位标「▶ 下一步」
    2952. 

  2952.   const next = s.next
    2953. 

  2953.     ? `<div class="ops-h">${esc(s.nextTitle || "下一步执行")}</div>
    2954. 

  2954.        <div class="ops-list"><div class="op op-next">${
    2955. 

  2955.          taskCard(s.next, { badge: { text: "▶ 下一步", key: "next" } })}</div></div>` : "";
    2956. 

  2956.   // 结构化输出的可读字段：一行一项「标签 + 值」
    2957. 

  2957.   const fields = (s.fields && s.fields.length)
    2958. 

  2958.     ? `<div class="kv-list">${s.fields.filter(f => f && f.value).map(f =>
    2959. 

  2959.         `<div class="kv"><span class="kv-k">${esc(f.label)}</span><span class="kv-v">${esc(f.value)}</span></div>`
    2960. 

  2960.       ).join("")}</div>` : "";
    2961. 

  2961.   // 输出的构成：每件「缩略图 + 它是什么」成对呈现；主件加 ★ 与高亮描边
    2962. 

  2962.   const arts = (s.arts && s.arts.length)
    2963. 

  2963.     ? `<div class="out-arts">${s.arts.map(a => a.url
    2964. 

  2964.         ? `<div class="out-art ${a.primary ? "is-primary" : ""}" title="${esc(a.note || a.label)}">
    2965. 

  2965.              <img src="${esc(a.url)}" referrerpolicy="no-referrer"
    2966. 

  2966.                   onclick="event.stopPropagation();openLB('${esc(a.url)}')" onerror="this.style.display='none'">
    2967. 

  2967.              <div class="oa-tag">${a.primary ? "★ " : ""}${esc(a.label)}</div></div>`
    2968. 

  2968.         : `<div class="out-art no-img ${a.primary ? "is-primary" : ""}">
    2969. 

  2969.              <div class="oa-text">${esc(clip(a.text || a.note || "", 60))}</div>
    2970. 

  2970.              <div class="oa-tag">${a.primary ? "★ " : ""}${esc(a.label)}</div></div>`).join("")}</div>` : "";
    2971. 

  2971.   // 工具清单：一枚工具一枚 chip，**本次用过的高亮**（数据由后端 used_tools 给，不靠前端猜）
    2972. 

  2972.   const usedSet = new Set(s.usedTools || []);
    2973. 

  2973.   const toolChips = (s.tools && s.tools.length)
    2974. 

  2974.     ? `<div class="tool-chips">${s.tools.map(t =>
    2975. 

  2975.         `<span class="tool-chip${usedSet.has(t.name) ? " used" : ""}"${
    2976. 

  2976.           t.description ? ` title="${esc(clip(t.description, 200))}"` : ""}>${
    2977. 

  2977.           usedSet.has(t.name) ? `<span class="tc-dot"></span>` : ""}${esc(t.name)}</span>`).join("")}</div>` : "";
    2978. 

  2978.   const chips = (s.chips && s.chips.length)
    2979. 

  2979.     ? `<div class="pc-chips">${s.chips.slice(0, 12).map(c => `<span class="pc-chip">${esc(c)}</span>`).join("")}</div>` : "";
    2980. 

  2980.   // 槽位表：一行一个槽（左侧输入盒按 data-slot 连过来），竖排避免连线挤成一团
    2981. 

  2981.   const slots = (s.slots && s.slots.length)
    2982. 

  2982.     ? `<div class="slot-list">${s.slots.map(sl =>
    2983. 

  2983.         `<div class="slot-row slot-chip ${sl.filled ? "" : "off"}" data-slot="${esc(sl.key)}"${
    2984. 

  2984.           sl.hint ? ` title="${esc(sl.hint)}"` : ""}>
    2985. 

  2985.            <span class="dot"></span><span class="nm">${esc(sl.name)}</span>${
    2986. 

  2986.           sl.filled ? "" : `<span class="slot-empty">空</span>`}</div>`).join("")}</div>` : "";
    2987. 

  2987.   const tone = String(key).split(":")[0].replace(/^execute$/, "exec").replace(/^evaluate$/, "eval");
    2988. 

  2988.   const failed = s.ok === false;
    2989. 

  2989.   const mods = [failed ? "pc-failed" : "", s.muted ? "pc-empty" : "",
    2990. 

  2990.                 s.final ? "pc-final" : "", s.type === "llm" ? "pc-llm" : ""].filter(Boolean).join(" ");
    2991. 

  2991.   // 任务条目槽（待执行队列 / 已执行 Task / 容器）：直接用**任务卡**渲染 —— 与任务列表里的任务同一种画法
    2992. 

  2992.   if (s.tasks && s.tasks.length) {
    2993. 

  2993.     putCards(key + ":tasks" + i, s.tasks);       // 供点开看「这条进槽的原文」
    2994. 

  2994.     return `<div class="pcard pc-${tone} pc-taskslot"${s.key ? ` data-slot="${esc(s.key)}"` : ""}>
    2995. 

  2995.       <div class="pcard-h"><span class="pc-ic">◇</span><span class="pc-label">${esc(s.label || "")}</span>
    2996. 

  2996.         <span class="pc-tok">${s.tasks.length} 个</span></div>
    2997. 

  2997.       <div class="task-strip">${s.tasks.map((t, k) => taskCard(t, { showResult: false,
    2998. 

  2998.         click: `openSlotTask('${key}:tasks${i}',${k})` })).join("")}</div></div>`;
    2999. 

  2999.   }
    3000. 

  3000.   // ── 旁路标注：**模型推理节点**上挂「做了什么（标注）」，底部给依据来源入口 —— 决策发生在模型
    3001. 

  3001.   // 这一步，工具只是它的执行结果。标注块独立底色 + 🔖 抬头，与卡上那些**运行时事实**明确分开。
    3002. 

  3002.   const ann = annOf(s);
    3003. 

  3003.   const annBlock = ann ? `
    3004. 

  3004.     <div class="pc-ann">
    3005. 

  3005.       <div class="pc-ann-sum">${esc(ann.summary || "—")}</div>
    3006. 

  3006.     </div>` : "";
    3007. 

  3007.   // 一段「按形态渲染」的数据（工具的输出、模型 function calling 的入参都走这一个渲染器 ——
    3008. 

  3008.   // 同一种东西只有一种画法）：
    3009. 

  3009.   //   主文 = 这段在说什么（query / prompt / thought）→ 正常字号，最先读到
    3010. 

  3010.   //   标签 = 一批条目（工具名、字段名）→ 一枚枚 chip，不是一坨 JSON
    3011. 

  3011.   //   字段 = 剩下的少量标量 → 小字键值
    3012. 

  3012.   //   图   = 就在自己这一段里
    3013. 

  3013.   // 成败折成表头一枚徽标（不再单独占一行说 success True）。
    3014. 

  3014.   const ioSec = (d, cls, head) => {
    3015. 

  3015.     d = d || {};
    3016. 

  3016.     if (!d.lead && !(d.chips || []).length && !(d.rows || []).length && !(d.images || []).length) return "";
    3017. 

  3017.     return `<div class="pc-io-sec ${cls}">
    3018. 

  3018.       <div class="pc-io-h">${head}${
    3019. 

  3019.         d.ok === true ? `<span class="io-ok">✓</span>` : d.ok === false ? `<span class="io-bad">✗ 失败</span>` : ""}</div>
    3020. 

  3020.       ${d.lead ? `<div class="pc-io-lead">${esc(d.lead)}</div>` : ""}
    3021. 

  3021.       ${(d.chips || []).length ? `<div class="pc-io-chips">${
    3022. 

  3022.         d.chips.map(c => `<span class="io-chip">${esc(c)}</span>`).join("")}</div>` : ""}
    3023. 

  3023.       ${(d.rows || []).length ? `<div class="pc-io-kv">${d.rows.map(f =>
    3024. 

  3024.         `<div class="io-row"><span class="io-k">${esc(f.k)}</span><span class="io-v">${esc(f.v)}</span></div>`).join("")}</div>` : ""}
    3025. 

  3025.       ${(d.images || []).length ? `<div class="pc-thumbs io-thumbs">${d.images.slice(0, 6).map(u =>
    3026. 

  3026.         `<img src="${esc(u)}" referrerpolicy="no-referrer" onclick="event.stopPropagation();openLB('${esc(u)}')" onerror="this.style.display='none'">`).join("")}</div>` : ""}
    3027. 

  3027.     </div>`;
    3028. 

  3028.   };
    3029. 

  3029.   // 工具节点：**只有输出**（入参是上一步 function calling 的那份，在模型推理卡上；后端据 tool_call_id
    3030. 

  3030.   // 决定要不要给 input —— 没有上游那一步的工具节点仍自带入参）。图跟着自己那一段走。
    3031. 

  3031.   const ioBlock = s.io ? ["input", "output"].map(side =>
    3032. 

  3032.     s.io[side] ? ioSec(s.io[side], side === "input" ? "in" : "out",
    3033. 

  3033.                        `<span>${side === "input" ? "⇢ 输入" : "⇠ 输出"}</span>`) : "").join("") : "";
    3034. 

  3034.   // 模型推理节点：它发出的 function calling。**一次调用一块**（序号 + 工具名 + 该次入参），
    3035. 

  3035.   // 多个调用叠在一张卡里 —— 它们本就是同一轮请求里一起发出的（框架给同一个 batch），所以要看得出
    3036. 

  3036.   // 「这一步一共发起了几个、分别是谁、各自带什么参数」，而不是糊成一段。
    3037. 

  3037.   const argRow = d => {
    3038. 

  3038.     d = d || {};
    3039. 

  3039.     return [
    3040. 

  3040.       d.lead ? `<div class="pc-io-lead">${esc(d.lead)}</div>` : "",
    3041. 

  3041.       (d.rows || []).length ? `<div class="pc-io-kv">${d.rows.map(f =>
    3042. 

  3042.         `<div class="io-row"><span class="io-k">${esc(f.k)}</span><span class="io-v">${esc(f.v)}</span></div>`).join("")}</div>` : "",
    3043. 

  3043.       (d.chips || []).length ? `<div class="pc-io-chips">${
    3044. 

  3044.         d.chips.map(c => `<span class="io-chip">${esc(c)}</span>`).join("")}</div>` : "",
    3045. 

  3045.       (d.images || []).length ? `<div class="pc-thumbs pcl-thumbs">${d.images.slice(0, 8).map(u =>
    3046. 

  3046.         `<img src="${esc(u)}" referrerpolicy="no-referrer" onclick="event.stopPropagation();openLB('${esc(u)}')" onerror="this.style.display='none'">`).join("")}</div>` : "",
    3047. 

  3047.     ].join("") || `<div class="pcl-none">（无参数）</div>`;
    3048. 

  3048.   };
    3049. 

  3049.   const callBlock = (s.calls || []).length ? `<div class="pc-calls">
    3050. 

  3050.     <div class="pc-calls-h">⚡ 推理结果 · 调用以下${s.calls.length > 1 ? ` ${s.calls.length} 个` : ""}工具</div>
    3051. 

  3051.     ${s.calls.map((c, k) => `<div class="pc-call">
    3052. 

  3052.       <div class="pcl-h"><span class="pcl-i">${k + 1}</span><span class="pcl-n">${esc(c.name)}</span></div>
    3053. 

  3053.       <div class="pcl-args">${argRow(c.args)}</div></div>`).join("")}</div>` : "";
    3054. 

  3054.   // 底部依据入口：**按类型分组计数**（"2 个来源"看不出是哪种来源，也就看不出这步是被 prompt 训导
    3055. 

  3055.   // 驱动的、还是被本 Task 的输入/上一步产物驱动的 —— 而那才是读者真正想一眼看到的东西）。
    3056. 

  3056.   let basis = "";
    3057. 

  3057.   if (ann && (ann.basis || []).length) {
    3058. 

  3058.     const cnt = {};
    3059. 

  3059.     ann.basis.forEach(b => cnt[b.kind || ""] = (cnt[b.kind || ""] || 0) + 1);
    3060. 

  3060.     const tags = Object.keys(cnt).map(k =>
    3061. 

  3061.       `<span class="bs-tag"><span class="bs-ic">${srcKind(k).ic}</span>${esc(srcKind(k).name)}<b>${cnt[k]}</b></span>`).join("");
    3062. 

  3062.     basis = `<div class="pc-basis" onclick="event.stopPropagation();openBasis('${esc(annKeyOf(s))}','${esc(String(s.label || "").replace(/['\\]/g, ""))}')">
    3063. 

  3063.          <span class="bs-h">🔗 决策依据</span>${tags}<span class="bs-n">›</span></div>`;
    3064. 

  3064.   }
    3065. 

  3065.   return `<div class="pcard pc-${tone} ${mods}"${s.key ? ` data-slot="${esc(s.key)}"` : ""}${
    3066. 

  3066.     s.hint ? ` title="${esc(s.hint)}"` : ""} onclick="openCard('${key}',${i})">
    3067. 

  3067.     <div class="pcard-h"><span class="pc-ic">${s.icon || pcIcon(s)}</span><span class="pc-label">${esc(s.label || "")}</span>${
    3068. 

  3068.       failed ? `<span class="pc-fail-badge">✗ 失败</span>` : ""}${s.tokens ? `<span class="pc-tok">${esc(s.tokens)}</span>` : ""}</div>
    3069. 

  3069.     ${s.tool_call_id ? `<div class="pc-id id-chip" title="tool_call_id（点击复制）"
    3070. 

  3070.       onclick="event.stopPropagation();copyId('${esc(s.tool_call_id)}',this)">⧉ ${esc(String(s.tool_call_id).slice(-10))}</div>`
    3071. 

  3071.       : (s.type === "llm" && s.node_id ? `<div class="pc-id id-chip" title="节点 id（点击复制）· 重标这一步：--node ${esc(String(s.node_id))}"
    3072. 

  3072.       onclick="event.stopPropagation();copyId('${esc(String(s.node_id))}',this)">⧉ #${esc(String(s.node_id))}</div>` : "")}
    3073. 

  3073.     ${s.reasoning ? `<div class="pc-think"><div class="pc-think-h">💭 思考</div>
    3074. 

  3074.       <div class="pc-think-b">${esc(s.reasoning)}</div></div>` : ""}
    3075. 

  3075.     ${(s.summary && !ann) ? `<div class="pcard-sum">${esc(s.summary)}</div>` : ""}
    3076. 

  3076.     ${(s.type === "llm" && !s.summary && !s.reasoning && !callBlock)
    3077. 

  3077.       ? `<div class="pc-note">（这一轮模型没有文本输出）</div>` : ""}
    3078. 

  3078.     ${annBlock}
    3079. 

  3079.     ${ioBlock}
    3080. 

  3080.     ${callBlock}
    3081. 

  3081.     ${fields}
    3082. 

  3082.     ${ops}
    3083. 

  3083.     ${next}
    3084. 

  3084. 

  3085.     ${toolChips}
    3086. 

  3086.     ${slots}
    3087. 

  3087.     ${arts}
    3088. 

  3088.     ${arts ? "" : chips}
    3089. 

  3089.     ${(arts || s.io || callBlock) ? "" : thumbs}
    3090. 

  3090.     <div class="pc-more">查看详情 ›</div>
    3091. 

  3091.     ${basis}
    3092. 

  3092.   </div>`;
    3093. 

  3093. }
    3094. 

  3094. const pcIcon = s => ({ tool: "🔧", llm: "◆", input: "⇢" })[s.type] || "•";
    3095. 

  3095. 

  3096. // update 的任务卡 → 看**这一改到底改了什么**：逐字段「旧 → 新」（有旧值走字符级 diff，否则给新值全文）
    3097. 

  3097. function openOpDiff(key, i) {
    3098. 

  3098.   if (BOARD && BOARD.suppressClick) return;
    3099. 

  3099.   const o = (SNAP.cards[key] || [])[i]; if (!o) return;
    3100. 

  3100.   const t = (o.tasks || [])[0] || {};
    3101. 

  3101.   $("#drawerTag").textContent = "PLAN · 修改";
    3102. 

  3102.   $("#drawerTag").className = "drawer-tag plan";
    3103. 

  3103.   $("#drawerTitle").textContent = `Task #${t.step_id ?? ""} ${t.name || ""}`;
    3104. 

  3104.   const patch = o.patch || {}, changes = o.changes || {};
    3105. 

  3105.   const rows = Object.keys(patch).map(f => {
    3106. 

  3106.     const pair = changes[f];
    3107. 

  3107.     const v = typeof patch[f] === "string" ? patch[f] : JSON.stringify(patch[f], null, 2);
    3108. 

  3108.     return `<div class="field sec-cell"><div class="lbl">${esc(f)}</div>` +
    3109. 

  3109.       (Array.isArray(pair)
    3110. 

  3110.         ? `<div class="sec-meta">旧 → 新（字符级对比）</div><div class="chg-v">${
    3111. 

  3111.              renderInlineDiff(typeof pair[0] === "string" ? pair[0] : JSON.stringify(pair[0]),
    3112. 

  3112.                               typeof pair[1] === "string" ? pair[1] : JSON.stringify(pair[1]))}</div>`
    3113. 

  3113.         : `<div class="sec-meta">本轮设为（该字段无旧值快照，只给新值）</div><div class="pp-msg">${renderRich(v)}</div>`) +
    3114. 

  3114.       `</div>`;
    3115. 

  3115.   }).join("");
    3116. 

  3116.   $("#drawerBody").innerHTML = (rows || `<div class="val" style="color:var(--faint)">（本次未改字段）</div>`);
    3117. 

  3117.   openDrawer();
    3118. 

  3118. }
    3119. 

  3119. 

  3120. // 槽里的任务卡 → 看**这条 Task 在该槽里逐字进 prompt 的那段**（所见即模型所见）
    3121. 

  3121. function openSlotTask(key, i) {
    3122. 

  3122.   if (BOARD && BOARD.suppressClick) return;
    3123. 

  3123.   const t = (SNAP.cards[key] || [])[i]; if (!t) return;
    3124. 

  3124.   $("#drawerTag").textContent = "输入 · 进槽数据";
    3125. 

  3125.   $("#drawerTag").className = "drawer-tag plan";
    3126. 

  3126.   $("#drawerTitle").textContent = t.name || `任务 #${t.step_id}`;
    3127. 

  3127.   const raw = Object.fromEntries(Object.entries(t).filter(([k]) => k !== "prompt_text"));
    3128. 

  3128.   $("#drawerBody").innerHTML =
    3129. 

  3129.     (t.prompt_text
    3130. 

  3130.       ? `<div class="field"><div class="lbl">进入 prompt 的原文（这一槽里属于本 Task 的那段）</div>
    3131. 

  3131.            <div class="pp-msg">${renderRich(t.prompt_text)}</div></div>`
    3132. 

  3132.       : `<div class="field"><div class="val" style="color:var(--faint)">这一槽未按 Task 逐条渲染（旧 run 无此字段）</div></div>`) +
    3133. 

  3133.     `<div class="field"><div class="lbl">结构化条目 · item</div><div class="pp-msg">${
    3134. 

  3134.       renderRich(JSON.stringify(raw, null, 2))}</div></div>`;
    3135. 

  3135.   openDrawer();
    3136. 

  3136. }
    3137. 

  3137. 

  3138. // 卡片点击 → 抽屉看完整详情（后端 detail：工具=args/result；模型=text/calls/payload；其它=text）
    3139. 

  3139. function openCard(key, i) {
    3140. 

  3140.   if (BOARD && BOARD.suppressClick) return;                 // 刚拖拽平移过 → 不误触
    3141. 

  3141.   const s = (SNAP.cards[key] || [])[i]; if (!s) return;
    3142. 

  3142.   const [nodeId, seg] = String(key).split(":");
    3143. 

  3143.   $("#drawerTag").textContent = `${nodeId}${seg ? " · " + ({ in: "输入", out: "输出", struct: "结构", flow: "运行流程" }[seg] || seg) : ""}`;
    3144. 

  3144.   $("#drawerTag").className = "drawer-tag " + (nodeId === "plan" ? "plan" : "execute");
    3145. 

  3145.   $("#drawerTitle").textContent = s.label || "详情";
    3146. 

  3146.   SNAP.openNodeSid = null;
    3147. 

  3147.   $("#drawerBody").innerHTML = renderCardDetail(s);
    3148. 

  3148.   openDrawer();
    3149. 

  3149.   // 工具详情：定义按需取（代码里的静态信息，不进运行记录），到手后就地重画这一屏
    3150. 

  3150.   if ((s.detail || {}).tools && !TOOLDEF) {
    3151. 

  3151.     loadToolDefs(SNAP.agent).then(() => {
    3152. 

  3152.       if ($("#drawer").classList.contains("open")) $("#drawerBody").innerHTML = renderCardDetail(s);
    3153. 

  3153.     });
    3154. 

  3154.   }
    3155. 

  3155. }
    3156. 

  3156. // Python 字符串转义（\n \t \xNN \uNNNN \' \" 等）→ 真实字符，供转 JSON 前还原。
    3157. 

  3157. function unescapePyStr(s) {
    3158. 

  3158.   return s.replace(/\\(x[0-9A-Fa-f]{2}|u[0-9A-Fa-f]{4}|.)/g, (m, e) => {
    3159. 

  3159.     if (e[0] === "x" || e[0] === "u") return String.fromCharCode(parseInt(e.slice(1), 16));
    3160. 

  3160.     return ({ n: "\n", t: "\t", r: "\r", b: "\b", f: "\f", "0": "\0", "\\": "\\", "'": "'", '"': '"' })[e] ?? e;
    3161. 

  3161.   });
    3162. 

  3162. }
    3163. 

  3163. // Python 字面量 repr（单引号/混合引号字符串、True/False/None）→ JSON 文本：逐字符扫描，字符串区整体透传
    3164. 

  3164. // （正确处理内嵌撇号与转义），非字符串区把 True/False/None 转 true/false/null；遇未知裸标识符 → 返回 null 放弃。
    3165. 

  3165. function pyReprToJson(src) {
    3166. 

  3166.   const s = String(src); let out = "", i = 0;
    3167. 

  3167.   while (i < s.length) {
    3168. 

  3168.     const c = s[i];
    3169. 

  3169.     if (c === "'" || c === '"') {
    3170. 

  3170.       i++; let str = "";
    3171. 

  3171.       while (i < s.length && s[i] !== c) { if (s[i] === "\\") { str += s[i] + (s[i + 1] || ""); i += 2; } else { str += s[i]; i++; } }
    3172. 

  3172.       i++; out += JSON.stringify(unescapePyStr(str));
    3173. 

  3173.     } else if (/[A-Za-z_]/.test(c)) {
    3174. 

  3174.       let w = ""; while (i < s.length && /[A-Za-z0-9_]/.test(s[i])) { w += s[i]; i++; }
    3175. 

  3175.       if (w === "True") out += "true"; else if (w === "False") out += "false"; else if (w === "None") out += "null"; else return null;
    3176. 

  3176.     } else { out += c; i++; }
    3177. 

  3177.   }
    3178. 

  3178.   return out;
    3179. 

  3179. }
    3180. 

  3180. // 富文本渲染：对象/JSON 串（含 Python dict repr）→ 美化 JSON（图片以缩略图条附于末尾）；否则按 markdown
    3181. 

  3181. // 渲染（图片已就地内联，不再附条）。返回可放进 .pp-msg 的内容。
    3182. 

  3182. function renderRich(raw) {
    3183. 

  3183.   let content, isMd = false;
    3184. 

  3184.   if (raw == null || (typeof raw !== "object" && !String(raw).trim())) content = `<div class="pp-content"></div>`;
    3185. 

  3185.   else if (typeof raw === "object") content = `<div class="pp-content pp-json">${esc(JSON.stringify(raw, null, 2))}</div>`;
    3186. 

  3186.   else {
    3187. 

  3187.     const s = String(raw).trim();
    3188. 

  3188.     let json;
    3189. 

  3189.     if (/^[[{]/.test(s)) {
    3190. 

  3190.       try { json = JSON.stringify(JSON.parse(s), null, 2); }
    3191. 

  3191.       catch (e) {                                        // 非严格 JSON → 试作 Python repr 归一后再解析
    3192. 

  3192.         const jt = pyReprToJson(s);
    3193. 

  3193.         if (jt != null) { try { json = JSON.stringify(JSON.parse(jt), null, 2); } catch (e2) {} }
    3194. 

  3194.       }
    3195. 

  3195.     }
    3196. 

  3196.     if (json != null) content = `<div class="pp-content pp-json">${esc(json)}</div>`;
    3197. 

  3197.     else { content = `<div class="pp-md">${renderMarkdown(s)}</div>`; isMd = true; }
    3198. 

  3198.   }
    3199. 

  3199.   return content;   // 图片不在这里捞：卡片/详情的图由后端 images 字段给定（markdown 里的图仍就地内联）
    3200. 

  3200. }
    3201. 

  3201. // 轻量 markdown → HTML（先转义再套标签，防注入）：标题 / 粗斜体 / 行内码 / 代码块 / 列表 / 引用 /
    3202. 

  3202. // **表格（GFM）** / 链接 / 段落。表格必须支持——plan 的 system prompt 里「缺陷性质 → 处方」这类对照
    3203. 

  3203. // 全是表格，不渲染就是一屏竖排的管道符，等于没法读。
    3204. 

  3204. function renderMarkdown(src) {
    3205. 

  3205.   const lines = String(src).replace(/\r\n?/g, "\n").split("\n");
    3206. 

  3206.   const inline = t => esc(t)
    3207. 

  3207.     .replace(/`([^`]+)`/g, "<code>$1</code>")
    3208. 

  3208.     .replace(/\*\*([^*]+)\*\*/g, "<strong>$1</strong>")
    3209. 

  3209.     .replace(/(^|[^*])\*([^*]+)\*(?!\*)/g, "$1<em>$2</em>")
    3210. 

  3210.     .replace(/\[([^\]]+)\]\((https?:\/\/[^)]+)\)/g, '<a href="$2" target="_blank" rel="noreferrer">$1</a>')
    3211. 

  3211.     // 裸 URL 就地渲染：图片→内联 <img>（结合上下文文字直接看图），其它→可点链接。
    3212. 

  3212.     // 负向后瞻跳过已在标签属性里的 URL（href="…" / src="…" / 紧跟 > 的 <code>URL</code>）。
    3213. 

  3213.     .replace(/(?<![="(>])(https?:\/\/[^\s<>"'`)\]}\\、，。；：）】》」｜]+)/g, (m, url) => {
    3214. 

  3214.       // 去尾：标点 + URL 编码括号（%22=" %5D=] %29=) %7D=}）+ 被转义的实体（&quot; &gt; &lt; &amp;）——
    3215. 

  3215.       // inline 跑在已转义文本上，紧随 URL 的闭合引号会变成 &quot; 被吞进匹配，需一并剥掉，否则 src 带尾巴致 404。
    3216. 

  3216.       const u = url.replace(/(?:[.,;)\]}]|%22|%5[Dd]|%29|%7[Dd]|&quot;|&gt;|&lt;|&amp;)+$/i, "");
    3217. 

  3217.       return isImgUrl(u)
    3218. 

  3218.         ? `<img class="md-img" src="${u}" referrerpolicy="no-referrer" loading="lazy" onclick="openLB('${u}')" onerror="imgFail(this)">`
    3219. 

  3219.         : `<a href="${u}" target="_blank" rel="noreferrer">${u}</a>`;
    3220. 

  3220.     });
    3221. 

  3221.   const isList = l => /^\s*([-*+]|\d+\.)\s+/.test(l), isH = l => /^#{1,6}\s+/.test(l),
    3222. 

  3222.         isQ = l => /^\s*>\s?/.test(l), isFence = l => /^```/.test(l);
    3223. 

  3223.   // 表格：一行以 | 起（或含 |）+ 下一行是 |---|---| 分隔行 —— 两条同时满足才当表格，
    3224. 

  3224.   // 免得把正文里偶然出现的竖线误判。单元格切分要**忽略被 \ 转义的 |**。
    3225. 

  3225.   const isSep = l => /^\s*\|?\s*:?-{2,}:?\s*(\|\s*:?-{2,}:?\s*)+\|?\s*$/.test(l);
    3226. 

  3226.   const isRow = l => /\|/.test(l) && !isFence(l);
    3227. 

  3227.   const cells = l => l.replace(/^\s*\|/, "").replace(/\|\s*$/, "")
    3228. 

  3228.                       .split(/(?<!\\)\|/).map(c => c.trim().replace(/\\\|/g, "|"));
    3229. 

  3229.   let html = "", i = 0;
    3230. 

  3230.   while (i < lines.length) {
    3231. 

  3231.     const line = lines[i];
    3232. 

  3232.     if (isFence(line)) {
    3233. 

  3233.       i++; const code = [];
    3234. 

  3234.       while (i < lines.length && !isFence(lines[i])) { code.push(lines[i]); i++; }
    3235. 

  3235.       i++; html += `<pre class="rich-code">${esc(code.join("\n"))}</pre>`; continue;
    3236. 

  3236.     }
    3237. 

  3237.     const hm = /^(#{1,6})\s+(.*)$/.exec(line);
    3238. 

  3238.     if (hm) { const lv = Math.min(6, hm[1].length); html += `<div class="rich-h rich-h${lv}">${inline(hm[2])}</div>`; i++; continue; }
    3239. 

  3239.     if (isRow(line) && i + 1 < lines.length && isSep(lines[i + 1])) {
    3240. 

  3240.       const head = cells(line);
    3241. 

  3241.       const align = cells(lines[i + 1]).map(c =>
    3242. 

  3242.         /^:-+:$/.test(c) ? "center" : /-+:$/.test(c) ? "right" : "left");
    3243. 

  3243.       i += 2;
    3244. 

  3244.       const rows = [];
    3245. 

  3245.       while (i < lines.length && isRow(lines[i]) && !/^\s*$/.test(lines[i])) { rows.push(cells(lines[i])); i++; }
    3246. 

  3246.       const ta = k => ` style="text-align:${align[k] || "left"}"`;
    3247. 

  3247.       html += `<div class="rich-table-wrap"><table class="rich-table">
    3248. 

  3248.         <thead><tr>${head.map((c, k) => `<th${ta(k)}>${inline(c)}</th>`).join("")}</tr></thead>
    3249. 

  3249.         <tbody>${rows.map(r => `<tr>${head.map((_, k) =>
    3250. 

  3250.           `<td${ta(k)}>${inline(r[k] || "")}</td>`).join("")}</tr>`).join("")}</tbody></table></div>`;
    3251. 

  3251.       continue;
    3252. 

  3252.     }
    3253. 

  3253.     if (isList(line)) {
    3254. 

  3254.       const ordered = /^\s*\d+\.\s+/.test(line); const items = [];
    3255. 

  3255.       while (i < lines.length && isList(lines[i])) { items.push(inline(lines[i].replace(/^\s*([-*+]|\d+\.)\s+/, ""))); i++; }
    3256. 

  3256.       html += `<${ordered ? "ol" : "ul"} class="rich-list">${items.map(x => `<li>${x}</li>`).join("")}</${ordered ? "ol" : "ul"}>`; continue;
    3257. 

  3257.     }
    3258. 

  3258.     if (isQ(line)) {
    3259. 

  3259.       const q = [];
    3260. 

  3260.       while (i < lines.length && isQ(lines[i])) { q.push(inline(lines[i].replace(/^\s*>\s?/, ""))); i++; }
    3261. 

  3261.       html += `<blockquote class="rich-quote">${q.join("<br>")}</blockquote>`; continue;
    3262. 

  3262.     }
    3263. 

  3263.     if (/^\s*$/.test(line)) { i++; continue; }
    3264. 

  3264.     const para = [];
    3265. 

  3265.     while (i < lines.length && !/^\s*$/.test(lines[i]) && !isFence(lines[i]) && !isH(lines[i])
    3266. 

  3266.            && !isList(lines[i]) && !isQ(lines[i])
    3267. 

  3267.            && !(isRow(lines[i]) && i + 1 < lines.length && isSep(lines[i + 1]))) {   // 表头行留给表格分支
    3268. 

  3268.       para.push(inline(lines[i])); i++;
    3269. 

  3269.     }
    3270. 

  3270.     html += `<p class="rich-p">${para.join("<br>")}</p>`;
    3271. 

  3271.   }
    3272. 

  3272.   return html;
    3273. 

  3273. }
    3274. 

  3274. // 工具调用输入：若 args 是对象，逐字段渲染（字段名作小标题、字符串值走 markdown 富文本），
    3275. 

  3275. // 让 think_and_plan 这类长文本参数不再是「转义 \n + 未渲染 markdown」的一坨 JSON；非对象则原样富文本。
    3276. 

  3276. // 一坨数据 → 抽屉里的若干块：**对象逐键一块**（键当小标题，值按 markdown / JSON 渲染），
    3277. 

  3277. // 其余整块铺开。这样长文本字段（think_and_plan 的 thought/plan/action）是分开可读的，
    3278. 

  3278. // 而不是塞进一个 JSON 串里。
    3279. 

  3279. // 一段数据的**规模**：几个字段 / 几项 / 多少字。抬头右侧标一下，读者不点开也知道这块有多大。
    3280. 

  3280. const dataMeta = v => {
    3281. 

  3281.   if (v == null) return "";
    3282. 

  3282.   if (Array.isArray(v)) return `${v.length} 项`;
    3283. 

  3283.   if (typeof v === "object") return `${Object.keys(v).length} 个字段`;
    3284. 

  3284.   const n = String(v).length;
    3285. 

  3285.   return n > 40 ? `${n} 字` : "";
    3286. 

  3286. };
    3287. 

  3287. function renderArgs(raw) {
    3288. 

  3288.   let obj = null;
    3289. 

  3289.   if (raw && typeof raw === "object" && !Array.isArray(raw)) obj = raw;
    3290. 

  3290.   else if (typeof raw === "string" && /^\s*\{/.test(raw)) {
    3291. 

  3291.     try { const p = JSON.parse(raw); if (p && typeof p === "object" && !Array.isArray(p)) obj = p; } catch (e) {}
    3292. 

  3292.   }
    3293. 

  3293.   if (!obj || !Object.keys(obj).length) return `<div class="pp-msg">${renderRich(raw)}</div>`;
    3294. 

  3294.   return Object.entries(obj).map(([k, v]) =>
    3295. 

  3295.     `<div class="pp-msg"><div class="pp-role"><span class="pr-k">${esc(k)}</span>${
    3296. 

  3296.       dataMeta(v) ? `<span class="pr-meta">${esc(dataMeta(v))}</span>` : ""}</div>${renderRich(v)}</div>`).join("");
    3297. 

  3297. }
    3298. 

  3298. 

  3299. // 「输入」/「输出」一区：**一区一块**——左侧色轨 + 同色抬头（入青、出绿，与卡面上那两段同一套配色），
    3300. 

  3300. // 于是「哪些是吃进去的、哪些是吐出来的」是靠颜色与分块一眼分开的，而不是靠读两个小字标签。
    3301. 

  3301. // 空就不画（不摆一个写着「（无）」的空壳）。
    3302. 

  3302. function ioField(label, v, side) {
    3303. 

  3303.   const empty = v == null || v === "" ||
    3304. 

  3304.     (typeof v === "object" && !Array.isArray(v) && !Object.keys(v).length) ||
    3305. 

  3305.     (Array.isArray(v) && !v.length);
    3306. 

  3306.   if (empty) return "";
    3307. 

  3307.   return `<div class="io-block ${side}">
    3308. 

  3308.     <div class="iob-h"><span class="iob-ic">${side === "in" ? "⇢" : "⇠"}</span>
    3309. 

  3309.       <span class="iob-t">${esc(label)}</span>
    3310. 

  3310.       <span class="iob-meta">${esc(dataMeta(v))}</span></div>
    3311. 

  3311.     <div class="iob-b">${renderArgs(v)}</div></div>`;
    3312. 

  3312. }
    3313. 

  3313. // 工具项展开/折叠（详情里默认全折叠：一屏先看清"有哪些工具、哪些用过"，要细节再点开）
    3314. 

  3314. function toggleTool(i) {
    3315. 

  3315.   const el = document.getElementById("tool-item-" + i);
    3316. 

  3316.   if (el) el.classList.toggle("open");
    3317. 

  3317. }
    3318. 

  3318. function renderCardDetail(s) {
    3319. 

  3319.   const d = s.detail || {};
    3320. 

  3320.   let h = "";
    3321. 

  3321.   if (d.tools) {           // 工具清单详情：**默认全部折叠**，点标题展开「说明 + 参数表」
    3322. 

  3322.     const used = new Set(d.usedTools || []);
    3323. 

  3323.     const defs = TOOLDEF || {};
    3324. 

  3324.     return d.tools.map((x, i) => {
    3325. 

  3325.       const t = { ...(defs[x.name] || {}), name: x.name };
    3326. 

  3326.       const np = (t.params || []).length;
    3327. 

  3327.       return `<div class="field sec-cell tool-item" id="tool-item-${i}">
    3328. 

  3328.       <div class="lbl tool-hd" onclick="toggleTool(${i})">
    3329. 

  3329.         <span class="tool-arrow">▸</span>${esc(t.name)}${used.has(t.name)
    3330. 

  3330.           ? `<span class="tool-used-tag">本次用过</span>` : ""}
    3331. 

  3331.         <span class="tool-meta">${t.description ? `${t.description.length} 字说明` : "无说明"}${
    3332. 

  3332.           np ? `　·　${np} 个参数` : ""}</span></div>
    3333. 

  3333.       <div class="tool-bd">
    3334. 

  3334.         ${t.description ? `<div class="pp-msg">${renderRich(t.description)}</div>`
    3335. 

  3335.                         : `<div class="val" style="color:var(--faint)">（未解析到该工具的定义：当前代码里已无同名工具？）</div>`}
    3336. 

  3336.         ${np ? `<div class="tool-params">${t.params.map(p =>
    3337. 

  3337.           `<div class="tp-row"><span class="tp-n">${esc(p.name)}</span>
    3338. 

  3338.             <span class="tp-t">${esc(p.type || "—")}</span>
    3339. 

  3339.             <span class="tp-r ${p.required ? "req" : ""}">${p.required ? "必填" : "可选"}</span>
    3340. 

  3340.             <span class="tp-d">${esc(p.desc || "")}</span></div>`).join("")}</div>` : ""}
    3341. 

  3341.       </div>
    3342. 

  3342.     </div>`; }).join("");
    3343. 

  3343.   }
    3344. 

  3344.   if (d.sections) {          // 逐段分块：每段标题 + 来源说明 + **完整**内容 + 该段的图
    3345. 

  3345.     h = d.sections.map(sec => `<div class="field sec-cell">
    3346. 

  3346.       <div class="lbl">${esc(sec.label)}</div>
    3347. 

  3347.       ${sec.meta ? `<div class="sec-meta">${esc(sec.meta)}</div>` : ""}
    3348. 

  3348.       ${sec.text ? `<div class="pp-msg">${renderRich(sec.text)}</div>` : ""}
    3349. 

  3349.       ${(sec.images || []).length ? `<div class="imgs" style="margin-top:8px">${sec.images.map(u =>
    3350. 

  3350.         `<img class="thumb" src="${esc(u)}" referrerpolicy="no-referrer" onclick="openLB('${esc(u)}')" onerror="imgFail(this)">`).join("")}</div>` : ""}
    3351. 

  3351.       ${(!sec.text && !(sec.images || []).length) ? `<div class="val" style="color:var(--faint)">（空）</div>` : ""}
    3352. 

  3352.     </div>`).join("");
    3353. 

  3353.     return h;
    3354. 

  3354.   }
    3355. 

  3355.   // ── 运行节点的详情：**一律「输入 / 输出」两段，数据直接铺开** ──────────────────────
    3356. 

  3356.   // 工具 / 模型推理 / 结构化收口，点开看到的是同一种东西：这一步吃进什么、吐出什么。
    3357. 

  3357.   // 没有的那一段不画（模型推理没有独立入参 —— 它看到的是本段 ① 输入与前面几步，不在这个节点里）。
    3358. 

  3358.   if (d.input !== undefined || d.output !== undefined || d.calls || d.reasoning) {
    3359. 

  3359.     h += ioField("输入", d.input, "in");
    3360. 

  3360.     // 思考在输出之前：模型先想、再说、再决定调什么工具，按这个次序读
    3361. 

  3361.     if (d.reasoning) h += `<div class="io-block call"><div class="iob-h"><span class="iob-ic">💭</span>
    3362. 

  3362.       <span class="iob-t">思考过程</span><span class="iob-meta">${esc(dataMeta(d.reasoning))}</span></div>
    3363. 

  3363.       <div class="iob-b"><div class="pp-msg">${renderRich(d.reasoning)}</div></div></div>`;
    3364. 

  3364.     h += ioField("输出", d.output, "out");
    3365. 

  3365.     // 模型推理这一步的另一半产出：它决定调用的工具。用紫色一区（与卡面上那块同色），
    3366. 

  3366.     // 一个调用一组：序号 + 工具名，参数仍是逐字段铺开。
    3367. 

  3367.     if ((d.calls || []).length)
    3368. 

  3368.       h += `<div class="io-block call">
    3369. 

  3369.         <div class="iob-h"><span class="iob-ic">⚡</span><span class="iob-t">推理结果 · 调用工具</span>
    3370. 

  3370.           <span class="iob-meta">${d.calls.length} 个</span></div>
    3371. 

  3371.         <div class="iob-b">${d.calls.map((c, k) => `<div class="call-item">
    3372. 

  3372.           <div class="ci-h"><span class="ci-i">${k + 1}</span><span class="ci-n">${esc(c.name)}</span>
    3373. 

  3373.             <span class="iob-meta">${esc(dataMeta(c.args))}</span></div>
    3374. 

  3374.           <div class="ci-b">${renderArgs(c.args)}</div></div>`).join("")}</div></div>`;
    3375. 

  3375.   } else {
    3376. 

  3376.     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>`;
    3377. 

  3377.     if (d.payload != null) h += `<div class="field"><div class="lbl">结构化产物</div><div class="pp-msg">${
    3378. 

  3378.       renderRich(JSON.stringify(d.payload, null, 2))}</div></div>`;
    3379. 

  3379.     if (d.json != null && d.payload == null && !d.text) h += `<div class="field"><div class="pp-msg">${
    3380. 

  3380.       renderRich(JSON.stringify(d.json, null, 2))}</div></div>`;
    3381. 

  3381.   }
    3382. 

  3382.   if (d.images && d.images.length)
    3383. 

  3383.     h += `<div class="field"><div class="lbl">图片 · ${d.images.length}</div><div class="imgs">${d.images.map(u =>
    3384. 

  3384.       `<img class="thumb" src="${esc(u)}" referrerpolicy="no-referrer" onclick="openLB('${esc(u)}')" onerror="imgFail(this)">`).join("")}</div></div>`;
    3385. 

  3385.   return h || `<div class="val" style="color:var(--faint)">（无更多详情）</div>`;
    3386. 

  3386. }
    3387. 

  3387. 

  3388. function renderLesson(l) {
    3389. 

  3389.   const src = l.source === "verdict" ? "执行" : (l.source === "planner" ? "规划" : (l.source || ""));
    3390. 

  3390.   const cls = l.source === "verdict" ? "verdict" : "planner";
    3391. 

  3391.   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>`;
    3392. 

  3392. }
    3393. 

  3393. 

  3394. // 卡片点击 → 抽屉展示节点全量详情（含跳执行过程 traces）
    3395. 

  3395. // planOnly=true（从 plan 的输出点开）：只看**规划侧**的 Task 定义，不掺执行结果——
    3396. 

  3396. // 那一刻这个 Task 还没跑，显示产物/verdict/工具是张冠李戴。
    3397. 

  3397. function openSnapNode(sid, planOnly) {
    3398. 

  3398.   if (BOARD && BOARD.suppressClick) return;                 // 刚拖拽平移过 → 不误触
    3399. 

  3399.   const snap = SNAP.list[SNAP.idx];
    3400. 

  3400.   const node = ((snap.tree && snap.tree.nodes) || []).find(n => String(n.step_id) === String(sid));
    3401. 

  3401.   if (!node) return;
    3402. 

  3402.   SNAP.openNodeSid = sid;                                    // 记下当前所看任务 → 刷新时可重开
    3403. 

  3403.   SNAP.openNodePlanOnly = !!planOnly;
    3404. 

  3404.   const status = planOnly && node.role !== "container" ? "planned" : nodeDisplayStatus(node);
    3405. 

  3405.   $("#drawerTag").textContent = SNAP_STATUS[status] || status;
    3406. 

  3406.   $("#drawerTag").className = "drawer-tag " + (planOnly || node.role === "container" ? "plan" : "execute");
    3407. 

  3407.   $("#drawerTitle").textContent = node.name || `任务 #${sid}`;
    3408. 

  3408.   $("#drawerBody").innerHTML = renderSnapNodeDetail(node, snap, !!planOnly);
    3409. 

  3409.   openDrawer();
    3410. 

  3410. }
    3411. 

  3411. 

  3412. // 依赖 / 参考图 inputs：外链图 → 缩略图；引用前序产物 → chip（前序产物 URL 由快照里的兄弟节点解析）
    3413. 

  3413. function renderNodeInputs(inputs, snap) {
    3414. 

  3414.   if (!Array.isArray(inputs) || !inputs.length) return "";
    3415. 

  3415.   const prod = {};
    3416. 

  3416.   for (const n of ((snap && snap.tree && snap.tree.nodes) || []))
    3417. 

  3417.     if (n.result && n.result.product_url) prod[String(n.step_id)] = n.result.product_url;
    3418. 

  3418.   return inputs.map(inp => {
    3419. 

  3419.     const ext = inp && inp.external;
    3420. 

  3420.     if (ext) return isImgUrl(ext)
    3421. 

  3421.       ? `<img class="thumb ref" src="${esc(ext)}" referrerpolicy="no-referrer" onclick="openLB('${esc(ext)}')" onerror="imgFail(this)">`
    3422. 

  3422.       : `<span class="refchip">↗ ${esc(ext)}</span>`;
    3423. 

  3423.     if (inp && inp.from_step != null) {
    3424. 

  3424.       const u = prod[String(inp.from_step)];
    3425. 

  3425.       return u ? `<img class="thumb ref" src="${esc(u)}" referrerpolicy="no-referrer" title="引用任务 #${esc(inp.from_step)} 的产物" onclick="openLB('${esc(u)}')" onerror="imgFail(this)">`
    3426. 

  3426.                : `<span class="refchip">↑ 引用任务 #${esc(inp.from_step)} 产物</span>`;
    3427. 

  3427.     }
    3428. 

  3428.     return "";
    3429. 

  3429.   }).filter(Boolean).join("");
    3430. 

  3430. }
    3431. 

  3431. 

  3432. // 验收标准逐条渲染：结构化项拆成「标准（主）+ 说明（次）+ 重要度 + 参考图」；纯字符串直接展示。
    3433. 

  3433. function renderAcceptance(items) {
    3434. 

  3434.   return items.map(c => {
    3435. 

  3435.     if (typeof c !== "object" || c === null) return `<li>${esc(String(c))}</li>`;
    3436. 

  3436.     const imp = c.importance ? `<span class="mmc-tag">${esc(c.importance)}</span>` : "";
    3437. 

  3437.     const std = c.standard != null ? `<div class="acc-std">${esc(c.standard)} ${imp}</div>` : "";
    3438. 

  3438.     const desc = c.description != null ? `<div class="acc-desc">${esc(c.description)}</div>` : "";
    3439. 

  3439.     const urls = Array.isArray(c.reference_urls) ? c.reference_urls : [];
    3440. 

  3440.     const refs = urls.length ? `<div class="imgs acc-refs">${urls.map(u => isImgUrl(u)
    3441. 

  3441.       ? `<img class="thumb ref" src="${esc(u)}" referrerpolicy="no-referrer" onclick="openLB('${esc(u)}')" onerror="imgFail(this)">`
    3442. 

  3442.       : `<span class="refchip">↗ ${esc(u)}</span>`).join("")}</div>` : "";
    3443. 

  3443.     return (std || desc || refs) ? `<li>${std}${desc}${refs}</li>` : `<li>${esc(JSON.stringify(c))}</li>`;
    3444. 

  3444.   }).join("");
    3445. 

  3445. }
    3446. 

  3446. 

  3447. function renderSnapNodeDetail(node, snap, planOnly) {
    3448. 

  3448.   const sid = node.step_id, r = planOnly ? null : node.result;
    3449. 

  3449.   const dstatus = planOnly && node.role !== "container" ? "planned" : nodeDisplayStatus(node);
    3450. 

  3450.   const chgHtml = renderChangesDiff(snap, sid);
    3451. 

  3451.   let h = `<div class="tc-meta" style="margin-top:0">
    3452. 

  3452.     <span class="metachip">任务 #${esc(sid)}</span>
    3453. 

  3453.     <span class="metachip">${node.role === "container" ? "容器 · 已拆分" : SNAP_STATUS[dstatus] || dstatus}</span>
    3454. 

  3454.     ${node.parent_id != null ? `<span class="metachip">← 父 #${esc(node.parent_id)}</span>` : ""}
    3455. 

  3455.     ${(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>` : ""}
    3456. 

  3456.   </div>`;
    3457. 

  3457.   if (chgHtml) h += `<div class="field"><div class="lbl">规划变化 · changes（本轮 diff）</div><div class="chg-list">${chgHtml}</div></div>`;
    3458. 

  3458.   if (node.goal) h += `<div class="field"><div class="lbl">目标 · goal</div><div class="val">${esc(node.goal)}</div></div>`;
    3459. 

  3459.   if (node.stage || node.category)
    3460. 

  3460.     h += `<div class="field"><div class="lbl">制作属性 · stage & category</div><div class="mmc-attrs" style="margin-top:0">
    3461. 

  3461.       ${node.stage ? `<span class="attr-chip stage"><span class="k">阶段</span>${esc(node.stage)}</span>` : ""}
    3462. 

  3462.       ${node.category ? `<span class="attr-chip cat"><span class="k">操作</span>${esc(node.category)}</span>` : ""}</div></div>`;
    3463. 

  3463. 

  3464.   // 依赖 / 参考图 · inputs（执行时喂入的素材）
    3465. 

  3465.   const refHtml = renderNodeInputs(node.inputs, snap);
    3466. 

  3466.   if (refHtml) h += `<div class="field"><div class="lbl">依赖 / 参考图 · inputs</div><div class="imgs">${refHtml}</div></div>`;
    3467. 

  3467. 

  3468.   // 验收标准 · acceptance（评估据此逐条核对）
    3469. 

  3469.   if (Array.isArray(node.acceptance) && node.acceptance.length)
    3470. 

  3470.     h += `<div class="field"><div class="lbl">验收标准 · acceptance</div><ul class="acc-list">${
    3471. 

  3471.       renderAcceptance(node.acceptance)}</ul></div>`;
    3472. 

  3472. 

  3473.   // 能力 kind + 执行时用到的工具（执行侧信息；只看规划时不显示）
    3474. 

  3474.   if (!planOnly && (node.kind || (node.tools && node.tools.length))) {
    3475. 

  3475.     h += `<div class="field"><div class="lbl">能力 / 工具 · kind & tools</div><div class="mmc-tools" style="margin-top:0">
    3476. 

  3476.       ${node.kind ? `<span class="kind-chip">⚙ ${esc(node.kind)}</span>` : ""}
    3477. 

  3477.       ${(node.tools || []).map(t => `<span class="tool-chip">${esc(t)}</span>`).join("")}
    3478. 

  3478.     </div></div>`;
    3479. 

  3479.   }
    3480. 

  3480. 

  3481.   if (node.role === "container") {
    3482. 

  3482.     h += `<div class="field"><div class="val" style="color:var(--faint)">该任务已被拆分，由子任务集体兑现，本身不直接执行。</div></div>`;
    3483. 

  3483.     return h;
    3484. 

  3484.   }
    3485. 

  3485.   if (r) {
    3486. 

  3486.     if (r.product_kind === "image" && r.product_url)
    3487. 

  3487.       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>`;
    3488. 

  3488.     else if (r.product_text)
    3489. 

  3489.       h += `<div class="field"><div class="lbl">产物 · text</div><div class="val">${esc(r.product_text)}</div></div>`;
    3490. 

  3490.     if (r.summary) h += `<div class="field"><div class="lbl">结果摘要 · summary</div><div class="val">${esc(r.summary)}</div></div>`;
    3491. 

  3491.     const cls = r.verdict_pass ? "pass" : "fail";
    3492. 

  3492.     h += `<div class="field"><div class="lbl">评估 · verdict${r.attempts > 1 ? ` · 尝试 ${r.attempts} 次` : ""}</div>
    3493. 

  3493.       <div class="a-verdict-box ${cls}">
    3494. 

  3494.         <div style="font-family:var(--mono);font-size:11px;font-weight:700;color:var(--${r.verdict_pass ? "ok" : "fail"})">${r.verdict_pass ? "✓ 达标" : "✗ 未达标"}</div>
    3495. 

  3495.         ${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>` : ""}
    3496. 

  3496.         ${r.verdict_reason ? `<div class="vd-note">${esc(r.verdict_reason)}</div>` : ""}
    3497. 

  3497.       </div></div>`;
    3498. 

  3498.   } else if (!planOnly) {
    3499. 

  3499.     h += dstatus === "running"
    3500. 

  3500.       ? `<div class="pending-note" style="color:var(--run)">▸ 正在执行中… 执行过程（工具调用 / 评估）会在该步完成后归档，届时可在此查看。</div>`
    3501. 

  3501.       : `<div class="pending-note">◔ 本轮该任务尚未执行（在剩余队列中，等待 execute）。</div>`;
    3502. 

  3502.   }
    3503. 

  3503.   // 完整原始数据（这个 Task 在本轮快照里的全部字段），便于核对
    3504. 

  3504.   const raw = planOnly
    3505. 

  3505.     ? Object.fromEntries(Object.entries(node).filter(([k]) =>
    3506. 

  3506.         !["result", "tools", "trace_summary", "exec_step_id", "executing"].includes(k)))
    3507. 

  3507.     : node;
    3508. 

  3508.   h += `<div class="field"><div class="lbl">完整数据 · raw</div><div class="pp-msg">${
    3509. 

  3509.     renderRich(JSON.stringify(raw, null, 2))}</div></div>`;
    3510. 

  3510.   // 内部执行过程不在此渲染：execute/evaluate 的过程已在画板的对应节点里呈现。
    3511. 

  3511.   return h;
    3512. 

  3512. }
    3513. 

  3513. 

  3514. let _mmResizeT = null;
    3515. 

  3515. window.addEventListener("resize", () => {
    3516. 

  3516.   if (!SNAP || !SNAP.loaded) return;
    3517. 

  3517.   clearTimeout(_mmResizeT); _mmResizeT = setTimeout(() => layoutBoard(), 120);
    3518. 

  3518. });
    3519. 

  3519. 

  3520. // ── controls ──
    3521. 

  3521. $("#statusSeg").addEventListener("click", e => {
    3522. 

  3522.   const b = e.target.closest("button"); if (!b) return;
    3523. 

  3523.   [...$("#statusSeg").children].forEach(x => x.classList.toggle("active", x === b));
    3524. 

  3524.   STATUS = b.dataset.s; PAGE = 1; loadRuns();
    3525. 

  3525. });
    3526. 

  3526. $("#refreshBtn").addEventListener("click", () => {
    3527. 

  3527.   const b = $("#refreshBtn"); b.classList.add("spin"); setTimeout(() => b.classList.remove("spin"), 450);
    3528. 

  3528.   loadRuns(); if (CURRENT) selectRun(CURRENT, curRound());
    3529. 

  3529. });
    3530. 

  3530. 

  3531. loadRuns().then(openFromHash);
    3532. 

  3532. </script>
    3533. 

  3533. </body>
    3534. 

  3534. </html>
    3535.