howard
/
Agent


			
				
					
						
						
							12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455565758596061626364656667686970717273747576777879808182838485868788899091929394959697989910010110210310410510610710810911011111211311411511611711811912012112212312412512612712812913013113213313413513613713813914014114214314414514614714814915015115215315415515615715815916016116216316416516616716816917017117217317417517617717817918018118218318418518618718818919019119219319419519619719819920020120220320420520620720820921021121221321421521621721821922022122222322422522622722822923023123223323423523623723823924024124224324424524624724824925025125225325425525625725825926026126226326426526626726826927027127227327427527627727827928028128228328428528628728828929029129229329429529629729829930030130230330430530630730830931031131231331431531631731831932032132232332432532632732832933033133233333433533633733833934034134234334434534634734834935035135235335435535635735835936036136236336436536636736836937037137237337437537637737837938038138238338438538638738838939039139239339439539639739839940040140240340440540640740840941041141241341441541641741841942042142242342442542642742842943043143243343443543643743843944044144244344444544644744844945045145245345445545645745845946046146246346446546646746846947047147247347447547647747847948048148248348448548648748848949049149249349449549649749849950050150250350450550650750850951051151251351451551651751851952052152252352452552652752852953053153253353453553653753853954054154254354454554654754854955055155255355455555655755855956056156256356456556656756856957057157257357457557657757857958058158258358458558658758858959059159259359459559659759859960060160260360460560660760860961061161261361461561661761861962062162262362462562662762862963063163263363463563663763863964064164264364464564664764864965065165265365465565665765865966066166266366466566666766866967067167267367467567667767867968068168268368468568668768868969069169269369469569669769869970070170270370470570670770870971071171271371471571671771871972072172272372472572672772872973073173273373473573673773873974074174274374474574674774874975075175275375475575675775875976076176276376476576676776876977077177277377477577677777877978078178278378478578678778878979079179279379479579679779879980080180280380480580680780880981081181281381481581681781881982082182282382482582682782882983083183283383483583683783883984084184284384484584684784884985085185285385485585685785885986086186286386486586686786886987087187287387487587687787887988088188288388488588688788888989089189289389489589689789889990090190290390490590690790890991091191291391491591691791891992092192292392492592692792892993093193293393493593693793893994094194294394494594694794894995095195295395495595695795895996096196296396496596696796896997097197297397497597697797897998098198298398498598698798898999099199299399499599699799899910001001100210031004100510061007100810091010101110121013101410151016101710181019102010211022102310241025102610271028102910301031103210331034103510361037103810391040104110421043104410451046104710481049105010511052105310541055105610571058105910601061106210631064106510661067106810691070107110721073107410751076107710781079108010811082108310841085108610871088108910901091109210931094109510961097109810991100110111021103110411051106110711081109111011111112111311141115111611171118111911201121112211231124112511261127112811291130113111321133113411351136113711381139114011411142114311441145114611471148114911501151115211531154115511561157115811591160116111621163116411651166116711681169117011711172117311741175117611771178117911801181118211831184118511861187118811891190119111921193119411951196119711981199120012011202120312041205120612071208120912101211121212131214121512161217121812191220122112221223122412251226122712281229123012311232123312341235123612371238123912401241124212431244124512461247124812491250125112521253125412551256125712581259126012611262126312641265126612671268126912701271127212731274127512761277127812791280128112821283128412851286128712881289129012911292129312941295129612971298129913001301130213031304130513061307130813091310131113121313131413151316131713181319132013211322132313241325132613271328132913301331133213331334133513361337133813391340134113421343134413451346134713481349135013511352135313541355135613571358135913601361136213631364136513661367136813691370137113721373137413751376137713781379138013811382138313841385138613871388138913901391139213931394139513961397139813991400140114021403140414051406140714081409141014111412141314141415141614171418141914201421142214231424142514261427142814291430143114321433143414351436143714381439144014411442144314441445144614471448144914501451145214531454145514561457145814591460146114621463146414651466146714681469147014711472147314741475147614771478147914801481148214831484148514861487148814891490149114921493149414951496149714981499150015011502150315041505150615071508150915101511151215131514151515161517151815191520152115221523152415251526152715281529153015311532153315341535153615371538153915401541154215431544154515461547154815491550155115521553155415551556155715581559156015611562156315641565156615671568156915701571157215731574157515761577157815791580158115821583158415851586158715881589159015911592159315941595159615971598159916001601160216031604160516061607160816091610161116121613161416151616161716181619162016211622162316241625162616271628162916301631163216331634163516361637163816391640164116421643164416451646164716481649165016511652165316541655165616571658165916601661166216631664166516661667166816691670167116721673167416751676167716781679168016811682168316841685168616871688168916901691169216931694169516961697169816991700170117021703170417051706170717081709171017111712171317141715171617171718171917201721172217231724172517261727172817291730173117321733173417351736173717381739174017411742174317441745174617471748174917501751175217531754175517561757175817591760176117621763176417651766176717681769177017711772177317741775177617771778177917801781178217831784178517861787178817891790179117921793179417951796179717981799180018011802180318041805180618071808180918101811181218131814181518161817181818191820182118221823182418251826182718281829183018311832183318341835183618371838183918401841184218431844184518461847184818491850185118521853185418551856185718581859186018611862186318641865186618671868186918701871187218731874187518761877187818791880188118821883188418851886188718881889189018911892189318941895189618971898189919001901190219031904190519061907190819091910191119121913191419151916191719181919192019211922192319241925192619271928192919301931193219331934193519361937193819391940194119421943194419451946194719481949195019511952195319541955195619571958195919601961196219631964196519661967196819691970197119721973197419751976197719781979198019811982198319841985198619871988198919901991199219931994199519961997199819992000200120022003200420052006200720082009201020112012201320142015201620172018201920202021202220232024202520262027202820292030203120322033203420352036203720382039204020412042204320442045204620472048204920502051205220532054205520562057205820592060206120622063206420652066206720682069207020712072207320742075207620772078207920802081208220832084208520862087208820892090209120922093209420952096209720982099210021012102210321042105210621072108210921102111211221132114211521162117211821192120212121222123212421252126212721282129213021312132213321342135213621372138213921402141214221432144214521462147214821492150215121522153215421552156215721582159216021612162216321642165216621672168216921702171217221732174217521762177217821792180218121822183218421852186218721882189219021912192219321942195219621972198219922002201220222032204220522062207220822092210221122122213221422152216221722182219222022212222222322242225222622272228222922302231223222332234223522362237223822392240224122422243224422452246224722482249225022512252225322542255225622572258225922602261226222632264226522662267226822692270227122722273227422752276227722782279228022812282228322842285228622872288228922902291229222932294229522962297229822992300230123022303230423052306230723082309231023112312231323142315231623172318231923202321232223232324232523262327232823292330233123322333233423352336233723382339234023412342234323442345234623472348234923502351235223532354235523562357235823592360236123622363236423652366236723682369237023712372237323742375237623772378237923802381238223832384238523862387238823892390239123922393239423952396239723982399240024012402240324042405240624072408240924102411241224132414241524162417241824192420242124222423242424252426242724282429243024312432243324342435243624372438243924402441244224432444244524462447244824492450245124522453245424552456245724582459246024612462246324642465246624672468246924702471247224732474247524762477247824792480248124822483248424852486248724882489249024912492249324942495249624972498249925002501250225032504250525062507250825092510251125122513251425152516251725182519252025212522252325242525252625272528252925302531253225332534253525362537253825392540254125422543254425452546254725482549255025512552255325542555255625572558255925602561256225632564256525662567256825692570257125722573257425752576257725782579258025812582258325842585258625872588258925902591259225932594259525962597259825992600260126022603260426052606260726082609261026112612261326142615261626172618261926202621262226232624262526262627262826292630263126322633263426352636263726382639264026412642264326442645264626472648264926502651265226532654265526562657265826592660266126622663266426652666266726682669267026712672267326742675267626772678267926802681268226832684268526862687268826892690269126922693269426952696269726982699270027012702270327042705270627072708270927102711271227132714271527162717271827192720272127222723272427252726272727282729273027312732273327342735273627372738273927402741274227432744274527462747274827492750275127522753275427552756275727582759276027612762276327642765276627672768276927702771277227732774277527762777277827792780278127822783278427852786278727882789279027912792279327942795279627972798279928002801280228032804280528062807280828092810281128122813281428152816281728182819282028212822282328242825282628272828282928302831283228332834283528362837283828392840284128422843284428452846284728482849285028512852285328542855285628572858285928602861286228632864286528662867286828692870287128722873287428752876287728782879288028812882288328842885288628872888288928902891289228932894289528962897289828992900290129022903290429052906290729082909291029112912291329142915291629172918291929202921292229232924292529262927292829292930293129322933293429352936293729382939294029412942294329442945294629472948294929502951295229532954295529562957295829592960296129622963296429652966296729682969297029712972297329742975297629772978297929802981298229832984298529862987298829892990299129922993299429952996299729982999300030013002300330043005300630073008300930103011301230133014301530163017301830193020302130223023302430253026302730283029303030313032303330343035303630373038303930403041304230433044304530463047304830493050305130523053305430553056305730583059306030613062306330643065306630673068306930703071307230733074307530763077307830793080308130823083308430853086308730883089309030913092309330943095309630973098309931003101310231033104310531063107310831093110311131123113311431153116311731183119312031213122312331243125312631273128312931303131313231333134313531363137313831393140314131423143314431453146314731483149315031513152315331543155315631573158315931603161316231633164316531663167316831693170317131723173317431753176317731783179318031813182318331843185318631873188318931903191319231933194319531963197319831993200320132023203320432053206320732083209321032113212321332143215321632173218321932203221322232233224322532263227322832293230323132323233323432353236323732383239324032413242324332443245324632473248324932503251325232533254325532563257325832593260326132623263326432653266326732683269327032713272327332743275327632773278327932803281328232833284328532863287328832893290329132923293329432953296329732983299330033013302330333043305330633073308330933103311331233133314331533163317331833193320332133223323332433253326332733283329333033313332333333343335333633373338333933403341334233433344334533463347334833493350335133523353335433553356335733583359336033613362336333643365336633673368336933703371337233733374337533763377337833793380338133823383338433853386338733883389339033913392339333943395339633973398339934003401340234033404340534063407340834093410341134123413341434153416341734183419342034213422342334243425342634273428342934303431343234333434343534363437343834393440344134423443344434453446344734483449345034513452345334543455345634573458345934603461346234633464346534663467346834693470347134723473347434753476347734783479348034813482348334843485348634873488348934903491349234933494349534963497349834993500350135023503350435053506350735083509351035113512351335143515351635173518351935203521352235233524352535263527352835293530353135323533353435353536353735383539354035413542354335443545354635473548354935503551355235533554355535563557355835593560356135623563356435653566356735683569357035713572357335743575357635773578357935803581358235833584358535863587358835893590359135923593359435953596359735983599360036013602360336043605360636073608360936103611361236133614361536163617361836193620362136223623362436253626362736283629363036313632363336343635363636373638363936403641364236433644364536463647364836493650365136523653365436553656365736583659366036613662366336643665366636673668366936703671367236733674367536763677367836793680368136823683368436853686368736883689369036913692369336943695369636973698369937003701370237033704370537063707370837093710371137123713371437153716371737183719372037213722372337243725372637273728372937303731373237333734373537363737373837393740374137423743374437453746374737483749375037513752375337543755375637573758375937603761376237633764376537663767376837693770377137723773377437753776377737783779378037813782378337843785378637873788378937903791379237933794379537963797379837993800380138023803380438053806380738083809381038113812381338143815381638173818381938203821382238233824382538263827382838293830383138323833383438353836383738383839384038413842384338443845384638473848384938503851385238533854385538563857385838593860386138623863386438653866386738683869387038713872387338743875387638773878387938803881388238833884388538863887388838893890389138923893389438953896389738983899390039013902390339043905390639073908390939103911391239133914391539163917391839193920392139223923392439253926392739283929393039313932393339343935393639373938393939403941394239433944394539463947394839493950395139523953395439553956395739583959396039613962396339643965396639673968396939703971397239733974397539763977397839793980398139823983398439853986398739883989399039913992399339943995399639973998399940004001400240034004400540064007400840094010401140124013401440154016401740184019402040214022402340244025402640274028402940304031403240334034403540364037403840394040404140424043404440454046404740484049405040514052405340544055405640574058405940604061406240634064406540664067406840694070407140724073407440754076407740784079408040814082408340844085408640874088408940904091409240934094409540964097409840994100410141024103410441054106410741084109411041114112411341144115411641174118411941204121412241234124412541264127412841294130413141324133413441354136413741384139414041414142414341444145414641474148414941504151415241534154415541564157415841594160416141624163416441654166416741684169417041714172417341744175417641774178417941804181418241834184418541864187418841894190419141924193419441954196419741984199420042014202420342044205420642074208420942104211421242134214421542164217421842194220422142224223422442254226422742284229423042314232423342344235423642374238423942404241424242434244424542464247424842494250425142524253425442554256425742584259426042614262426342644265426642674268426942704271427242734274427542764277427842794280428142824283428442854286428742884289429042914292429342944295429642974298429943004301430243034304430543064307430843094310431143124313431443154316431743184319432043214322432343244325432643274328432943304331433243334334433543364337433843394340434143424343434443454346434743484349435043514352435343544355435643574358435943604361436243634364436543664367436843694370437143724373437443754376437743784379438043814382438343844385438643874388438943904391439243934394439543964397439843994400440144024403440444054406440744084409441044114412441344144415441644174418441944204421442244234424442544264427442844294430
							<!doctype html>
<html lang="zh">
  <head>
    <meta charset="utf-8" />
    <meta
      name="viewport"
      content="width=device-width, initial-scale=1"
    />
    <title>mode_workflow · 解构工作台</title>
    <script src="https://cdn.jsdelivr.net/npm/echarts@5/dist/echarts.min.js"></script>
    <link
      rel="preconnect"
      href="https://fonts.googleapis.com"
    />
    <link
      href="https://fonts.googleapis.com/css2?family=Noto+Serif+SC:wght@600;900&family=Noto+Sans+SC:wght@400;500;700&family=IBM+Plex+Mono:wght@500;700&display=swap"
      rel="stylesheet"
    />
    <style>
      /* ── 主题:净白工作台 + 墨蓝/朱砂点缀 ─────────────────────────────────────── */
      :root {
        --bg: #f4f4f1;
        --card: #ffffff;
        --ink: #1c2433;
        --ink-soft: #5a6577;
        --ink-faint: #9aa3b0;
        --line: #e8e6e0;
        --line-dark: #d4d1c8;
        --navy: #1e3a5f;
        --navy-deep: #13243a; /* 需求区 / 品牌 */
        --blue: #2563eb;
        --blue-bg: #eef3fe; /* 评分/交互强调 */
        --amber: #b45309;
        --amber-bg: #fff7e8; /* 输入区 */
        --teal: #0f6b5c;
        --teal-bg: #eef8f3; /* 实现区 */
        --green: #15803d;
        --green-bg: #effaf1; /* 输出区 / 采纳 */
        --seal: #bb3a22; /* 朱砂印 */
        --infer: #fdf0d2;
        --infer-edge: #d97706;
        --shadow: 0 1px 2px rgba(20, 30, 46, 0.04), 0 8px 24px -12px rgba(20, 30, 46, 0.12);
        --shadow-lg: 0 4px 10px rgba(20, 30, 46, 0.06), 0 24px 60px -20px rgba(20, 30, 46, 0.25);
      }
      * {
        box-sizing: border-box;
        margin: 0;
        padding: 0;
      }
      html {
        font-size: 14px;
      }
      body {
        font-family: "Noto Sans SC", sans-serif;
        color: var(--ink);
        background: var(--bg);
        background-image: radial-gradient(900px 360px at 90% -8%, rgba(37, 99, 235, 0.045), transparent 60%);
        min-height: 100vh;
      }
      .num {
        font-family: "IBM Plex Mono", monospace;
      }
      h1,
      h2,
      .serif {
        font-family: "Noto Serif SC", serif;
      }
      a {
        color: var(--blue);
      }
      button {
        font-family: inherit;
        cursor: pointer;
      }

      /* ── 顶部 ── */
      header {
        display: flex;
        align-items: center;
        gap: 20px;
        padding: 0 30px;
        height: 60px;
        background: linear-gradient(135deg, #13243a, #1c3552);
        color: #eef2f8;
        position: sticky;
        top: 0;
        z-index: 40;
        box-shadow: 0 2px 14px rgba(19, 36, 58, 0.28);
      }
      .logo {
        display: flex;
        align-items: center;
        gap: 12px;
      }
      .logo .seal {
        width: 33px;
        height: 33px;
        background: var(--seal);
        color: #fff;
        display: grid;
        place-items: center;
        font-family: "Noto Serif SC", serif;
        font-weight: 900;
        font-size: 17px;
        border-radius: 7px;
        box-shadow:
          inset 0 0 0 2px rgba(255, 255, 255, 0.22),
          0 3px 8px rgba(187, 58, 34, 0.35);
        transform: rotate(-4deg);
      }
      .logo b {
        font-family: "Noto Serif SC", serif;
        font-weight: 900;
        font-size: 16px;
        letter-spacing: 1px;
      }
      .logo small {
        display: block;
        font-size: 10px;
        color: #93a7c0;
        letter-spacing: 3px;
      }
      nav {
        display: flex;
        gap: 6px;
        margin-left: 26px;
      }
      nav a {
        display: flex;
        align-items: center;
        padding: 7px 18px;
        color: #a8b9cd;
        text-decoration: none;
        font-weight: 500;
        letter-spacing: 0.5px;
        border-radius: 99px;
        transition: 0.15s;
        font-size: 13px;
      }
      nav a:hover {
        color: #fff;
        background: rgba(255, 255, 255, 0.07);
      }
      nav a.on {
        color: #fff;
        background: rgba(255, 255, 255, 0.13);
        box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.14);
      }
      header .spacer {
        flex: 1;
      }
      header .hint {
        font-size: 11px;
        color: #6e83a0;
        letter-spacing: 2px;
      }

      main {
        display: none;
        padding: 24px 30px 80px;
        max-width: 1920px;
        margin: 0 auto;
      }
      main.on {
        display: block;
      }
      /* 数据集视图:整体定高占满视口,左侧列表与右侧解构各自独立滚动 */
      #view-dataset {
        padding-bottom: 20px;
      }
      #view-dataset.on {
        display: flex;
        flex-direction: column;
        height: calc(100vh - 60px);
        overflow: hidden;
      }
      /* 聚类库:内嵌知识检索页,占满视口、无内边距 */
      #view-cluster {
        padding: 0;
        max-width: none;
      }
      #view-cluster.on {
        display: flex;
      }
      #cluster-frame {
        border: 0;
        width: 100%;
        height: calc(100vh - 60px);
        display: block;
      }

      /* ── 通用卡片/标签/按钮 ── */
      .card {
        background: var(--card);
        border: 1px solid var(--line);
        border-radius: 12px;
        box-shadow: var(--shadow);
      }
      .pill {
        display: inline-block;
        padding: 1px 9px;
        border-radius: 99px;
        font-size: 11px;
        font-weight: 500;
        border: 1px solid var(--line-dark);
        background: #f7f6f2;
        color: var(--ink-soft);
        white-space: nowrap;
      }
      .pill.navy {
        background: #e8eef6;
        border-color: #bccbde;
        color: var(--navy);
      }
      .pill.amber {
        background: var(--amber-bg);
        border-color: #ecc88a;
        color: var(--amber);
      }
      .pill.teal {
        background: var(--teal-bg);
        border-color: #a9d6c8;
        color: var(--teal);
      }
      .pill.red {
        background: #fbeae5;
        border-color: #e4ab9c;
        color: var(--seal);
      }
      .pill.green {
        background: var(--green-bg);
        border-color: #a7d9b4;
        color: var(--green);
      }
      .pill.blue {
        background: var(--blue-bg);
        border-color: #b6cdf7;
        color: var(--blue);
      }
      /* 目的列 intent 胶囊: 底色 = 所引用列的分组色, 与表头/列 chip 一致
         (需求=navy / 输入=amber / 实现=teal / 输出=green; 口径同 procedure-dsl「token 色对应来源列」) */
      .intent-text { color: var(--ink); line-height: 1.6; }
      .intent-tok { display: inline-block; padding: 1px 6px; border-radius: 4px; margin: 0 1px; font-size: 11.5px; font-weight: 500; }
      .intent-tok.ik-effect   { background: #e8eef6; color: var(--navy); }                          /* 作用列 (需求组) */
      .intent-tok.ik-via      { background: var(--teal-bg); color: var(--teal); font-family: "IBM Plex Mono", ui-monospace, monospace; }  /* 外部工具列 (实现组) */
      .intent-tok.ik-act      { background: var(--teal-bg); color: var(--teal); }                   /* 动作列 (实现组) */
      .intent-tok.ik-in-type  { background: var(--amber-bg); color: var(--amber); border: 1px solid #ecc88a; border-radius: 99px; padding: 1px 8px; }  /* 输入·类型 */
      .intent-tok.ik-out-type { background: var(--blue-bg); color: var(--blue); border: 1px solid #b6cdf7; border-radius: 99px; padding: 1px 8px; }  /* 输出·类型 (蓝色,避免与实现组绿色混淆) */
      .intent-tok.ik-other    { background: #fbeae5; color: var(--seal); text-decoration: line-through; }  /* 非法类别(lint 警告) */
      .btn {
        border: 1px solid var(--line-dark);
        background: var(--card);
        color: var(--ink);
        padding: 6px 14px;
        border-radius: 8px;
        font-size: 13px;
        font-weight: 500;
        transition: 0.15s;
      }
      .btn:hover {
        border-color: var(--blue);
        color: var(--blue);
        box-shadow: 0 2px 8px rgba(37, 99, 235, 0.12);
      }
      .btn.primary {
        background: var(--blue);
        border-color: var(--blue);
        color: #fff;
      }
      .btn.primary:hover {
        background: #1d4fc4;
        color: #fff;
        box-shadow: 0 4px 12px rgba(37, 99, 235, 0.3);
      }
      .btn.seal {
        background: var(--seal);
        border-color: var(--seal);
        color: #fff;
      }
      .btn.seal:hover {
        background: #a02f1a;
        color: #fff;
        box-shadow: 0 4px 12px rgba(187, 58, 34, 0.3);
      }
      .btn.sm {
        padding: 3px 11px;
        font-size: 12px;
      }
      .btn:disabled {
        opacity: 0.45;
        cursor: not-allowed;
        box-shadow: none;
      }
      select,
      input[type="text"],
      input[type="number"] {
        font-family: inherit;
        font-size: 13px;
        padding: 6px 10px;
        border: 1px solid var(--line-dark);
        border-radius: 8px;
        background: #fff;
        color: var(--ink);
        outline: none;
        transition: 0.15s;
      }
      select:focus,
      input:focus {
        border-color: var(--blue);
        box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.12);
      }
      .empty {
        text-align: center;
        color: var(--ink-faint);
        padding: 48px 20px;
        font-size: 13px;
        line-height: 2;
      }
      .empty .glyph {
        font-family: "Noto Serif SC", serif;
        font-size: 42px;
        color: var(--line-dark);
        display: block;
      }
      .spinner {
        display: inline-block;
        width: 16px;
        height: 16px;
        border: 2px solid var(--line-dark);
        border-top-color: var(--blue);
        border-radius: 50%;
        animation: spin 0.7s linear infinite;
        vertical-align: -3px;
        margin-right: 8px;
      }
      @keyframes spin {
        to {
          transform: rotate(360deg);
        }
      }

      /* ── Dashboard ── */
      .dash-section {
        margin-bottom: 14px;
        display: flex;
        align-items: baseline;
        gap: 10px;
      }
      .dash-section h2 {
        font-size: 16px;
        font-weight: 900;
        letter-spacing: 2px;
      }
      .dash-section .rule {
        flex: 1;
        border-top: 1px dashed var(--line-dark);
      }
      .dash-section .tag {
        font-size: 10px;
        letter-spacing: 2px;
        color: var(--ink-faint);
      }
      .cards {
        display: grid;
        grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
        gap: 14px;
        margin-bottom: 26px;
      }
      .stat {
        padding: 16px 18px 14px;
        position: relative;
        overflow: hidden;
      }
      .stat::after {
        content: "";
        position: absolute;
        left: 0;
        top: 0;
        bottom: 0;
        width: 3px;
        background: var(--navy);
      }
      .stat.a::after {
        background: var(--amber);
      }
      .stat.t::after {
        background: var(--teal);
      }
      .stat.r::after {
        background: var(--seal);
      }
      .stat .lbl {
        font-size: 11px;
        letter-spacing: 2px;
        color: var(--ink-soft);
        margin-bottom: 8px;
      }
      .stat .val {
        font-size: 30px;
        font-weight: 700;
        line-height: 1;
      }
      .stat .sub {
        font-size: 11px;
        color: var(--ink-faint);
        margin-top: 7px;
      }
      .stat .sub.plat-break {
        margin-top: 5px;
        color: var(--ink-soft);
        font-weight: 600;
        display: flex;
        flex-wrap: wrap;
        align-items: center;
        gap: 4px 12px;
      }
      .stat .sub.plat-break .pb-item {
        display: inline-flex;
        align-items: center;
        gap: 5px;
      }
      .stat .sub.plat-break .pb-item b {
        font-size: 12px;
        color: var(--ink);
      }
      .ring-row {
        display: flex;
        align-items: center;
        gap: 14px;
      }
      .ring {
        width: 64px;
        height: 64px;
        border-radius: 50%;
        display: grid;
        place-items: center;
        flex: none;
        background: conic-gradient(var(--teal) calc(var(--p) * 1%), #e9e7e0 0);
      }
      .ring > div {
        width: 48px;
        height: 48px;
        border-radius: 50%;
        background: var(--card);
        display: grid;
        place-items: center;
        font-size: 12px;
        font-weight: 700;
      }
      .charts {
        display: grid;
        grid-template-columns: repeat(12, 1fr);
        gap: 16px;
      }
      .chart-card {
        padding: 14px 16px 8px;
      }
      .chart-card h3 {
        font-size: 13px;
        font-weight: 700;
        letter-spacing: 1px;
        color: var(--ink-soft);
        margin-bottom: 4px;
        display: flex;
        align-items: baseline;
        gap: 8px;
      }
      .chart-card h3 .num {
        color: var(--seal);
        font-size: 12px;
      }
      .chart {
        width: 100%;
      }
      .span12 {
        grid-column: span 12;
      }
      .span6 {
        grid-column: span 6;
      }
      .span4 {
        grid-column: span 4;
      }
      @media (max-width: 1100px) {
        .span6,
        .span4 {
          grid-column: span 12;
        }
      }

      /* ── Dataset 三栏 ── */
      .ds-top {
        display: flex;
        align-items: center;
        gap: 12px;
        margin-bottom: 16px;
      }
      .mode-switch {
        display: flex;
        border: 1px solid var(--line-dark);
        border-radius: 10px;
        overflow: hidden;
        background: #fff;
      }
      .mode-switch button {
        border: 0;
        background: transparent;
        padding: 7px 24px;
        font-size: 13px;
        font-weight: 700;
        color: var(--ink-soft);
        transition: 0.15s;
      }
      .mode-switch button.on {
        background: var(--navy);
        color: #fff;
      }
      .ds-grid {
        display: grid;
        grid-template-columns: 235px 350px minmax(0, 1fr);
        gap: 16px;
        align-items: stretch;
        flex: 1;
        min-height: 0;
      }
      @media (max-width: 1280px) {
        .ds-grid {
          grid-template-columns: 200px 320px minmax(0, 1fr);
        }
      }
      /* 每一列卡片纵向铺满网格高度,内部滚动区独立滚动 */
      .ds-grid > .card {
        display: flex;
        flex-direction: column;
        min-height: 0;
        overflow: hidden;
      }
      .col-head {
        display: flex;
        align-items: center;
        justify-content: space-between;
        padding: 11px 14px;
        border-bottom: 1px solid var(--line);
        font-weight: 700;
        font-size: 13px;
        letter-spacing: 1px;
      }
      .col-head .n {
        font-size: 11px;
        color: var(--ink-faint);
        font-weight: 500;
      }
      /* 帖子列头:标题一行、操作按钮另起一行(按钮不和「帖子 N/M」挤一行) */
      .col-head.posts-head {
        flex-direction: column;
        align-items: stretch;
        gap: 8px;
      }
      .posts-head .ph-title {
        display: flex;
        align-items: center;
        gap: 8px;
      }
      .posts-head .ph-actions {
        display: flex;
        flex-wrap: wrap;
        gap: 8px;
      }
      /* 按钮内计数:未做数(灰) / 已采纳总数(绿) */
      .ph-actions .cnt-rest {
        color: #9aa0a6;
        font-weight: 700;
      }
      .ph-actions .cnt-total {
        color: #2e9e5b;
        font-weight: 700;
      }

      .qlist {
        flex: 1;
        min-height: 0;
        overflow: auto;
      }
      .qitem {
        padding: 12px 14px;
        border-bottom: 1px solid var(--line);
        cursor: pointer;
        transition: 0.12s;
      }
      .qitem:hover {
        background: #f8f8f4;
      }
      .qitem.on {
        background: var(--blue-bg);
        box-shadow: inset 3px 0 0 var(--blue);
      }
      .qitem .qid {
        font-size: 10px;
        letter-spacing: 1px;
        color: var(--ink-faint);
        display: flex;
        gap: 6px;
        align-items: center;
      }
      .qitem .qt {
        font-weight: 500;
        margin: 4px 0 7px;
        line-height: 1.45;
      }
      .qitem .qm {
        font-size: 11px;
        color: var(--ink-soft);
        display: flex;
        gap: 10px;
        flex-wrap: wrap;
        align-items: center;
      }
      .qitem .qm b.hit {
        color: var(--blue);
        font-size: 13px;
      }

      /* 渠道 tab */
      .plat-tabs {
        display: flex;
        gap: 4px;
        padding: 8px 10px;
        border-bottom: 1px solid var(--line);
        overflow-x: auto;
        background: #fbfbf8;
        border-radius: 0;
      }
      .plat-tabs button {
        border: 1px solid transparent;
        background: transparent;
        color: var(--ink-soft);
        padding: 3px 11px;
        border-radius: 99px;
        font-size: 12px;
        font-weight: 500;
        white-space: nowrap;
        transition: 0.15s;
      }
      .plat-tabs button:hover {
        background: #efeee8;
        color: var(--ink);
      }
      .plat-tabs button.on {
        background: var(--navy);
        color: #fff;
        font-weight: 700;
      }
      .plat-tabs button .c {
        font-size: 10px;
        opacity: 0.75;
        margin-left: 3px;
      }
      /* 已解构筛选按钮:靠右,激活态用 teal 呼应「已解构」 */
      .plat-tabs .done-filter {
        margin-left: auto;
        flex: none;
        border: 1px solid var(--line);
        display: inline-flex;
        align-items: center;
        gap: 4px;
        color: var(--ink-soft);
      }
      .plat-tabs .done-filter:hover {
        background: #efeee8;
        color: var(--ink);
      }
      .plat-tabs .done-filter.on {
        background: var(--teal-bg, #e3f1ec);
        border-color: #a9d6c8;
        color: var(--teal);
        font-weight: 700;
      }
      .plat-tabs .done-filter .dot {
        font-size: 8px;
      }

      .plist {
        flex: 1;
        min-height: 0;
        overflow: auto;
      }
      .post {
        padding: 12px 13px;
        border-bottom: 1px solid var(--line);
        cursor: pointer;
        display: flex;
        gap: 10px;
        transition: 0.12s;
        align-items: flex-start;
      }
      .post:hover {
        background: #f8f8f4;
      }
      .post.on {
        background: var(--blue-bg);
        box-shadow: inset 3px 0 0 var(--blue);
      }
      .post input {
        margin-top: 4px;
        accent-color: var(--blue);
      }
      .post .pt {
        font-weight: 500;
        line-height: 1.45;
        font-size: 13px;
      }
      .post .pm {
        display: flex;
        flex-wrap: wrap;
        gap: 5px;
        margin-top: 7px;
        align-items: center;
      }
      .plat {
        display: inline-block;
        padding: 1px 7px;
        border-radius: 4px;
        font-size: 10px;
        font-weight: 700;
        color: #fff;
      }
      .plat.xhs {
        background: #d63a2f;
      }
      .plat.gzh {
        background: #2e9939;
      }
      .plat.zhihu {
        background: #1772f6;
      }
      .plat.douyin {
        background: #170b1a;
      }
      .plat.sph {
        background: #fa6d20;
      }
      .plat.youtube {
        background: #c00;
      }
      .plat.x {
        background: #15202b;
      }
      .plat.other {
        background: #777;
      }
      .plat-logo {
        display: inline-flex;
        line-height: 0;
        flex: none;
      }
      .plat-logo svg,
      .plat-logo img {
        display: block;
      }
      .done-dot {
        font-size: 10px;
        color: var(--teal);
        font-weight: 700;
      }

      /* 评分徽章:大、亮、可点 */
      .score-badge {
        flex: none;
        position: relative;
        font-family: "IBM Plex Mono", monospace;
        font-weight: 700;
        font-size: 16.5px;
        line-height: 1;
        padding: 8px 10px;
        border-radius: 9px;
        cursor: pointer;
        transition: 0.15s;
        align-self: center;
        border: 1px solid transparent;
      }
      .score-badge.s9 {
        color: #fff;
        background: linear-gradient(135deg, #16a34a, #15803d);
        box-shadow: 0 3px 10px rgba(22, 163, 74, 0.35);
      }
      .score-badge.s8 {
        color: #fff;
        background: linear-gradient(135deg, #3b82f6, #2563eb);
        box-shadow: 0 3px 10px rgba(37, 99, 235, 0.35);
      }
      .score-badge.s6 {
        color: #fff;
        background: linear-gradient(135deg, #f59e0b, #d97706);
        box-shadow: 0 3px 10px rgba(217, 119, 6, 0.32);
      }
      .score-badge.s0 {
        color: var(--ink-soft);
        background: #eceae4;
        border-color: var(--line-dark);
      }
      .score-badge:hover {
        transform: translateY(-2px) scale(1.06);
      }
      .score-badge::after {
        content: "查看详情";
        position: absolute;
        left: 50%;
        bottom: calc(100% + 6px);
        transform: translateX(-50%) scale(0.92);
        background: var(--ink);
        color: #fff;
        font-family: "Noto Sans SC", sans-serif;
        font-size: 10px;
        font-weight: 500;
        padding: 3px 8px;
        border-radius: 5px;
        white-space: nowrap;
        opacity: 0;
        pointer-events: none;
        transition: 0.15s;
        z-index: 5;
      }
      .score-badge:hover::after {
        opacity: 1;
        transform: translateX(-50%) scale(1);
      }

      .xp {
        min-height: 60vh;
      }
      .xp-head {
        display: flex;
        align-items: center;
        gap: 10px;
        padding: 12px 16px;
        border-bottom: 1px solid var(--line);
        flex-wrap: wrap;
      }
      .xp-head .st {
        font-family: "Noto Serif SC", serif;
        font-weight: 900;
        font-size: 15px;
      }
      .xp-head .st em {
        color: var(--seal);
        font-style: normal;
      }
      .xp-head .spacer {
        flex: 1;
      }
      .xp-body {
        padding: 16px;
        flex: 1;
        min-height: 0;
        overflow: auto;
      }

      /* 工序卡 */
      .proc {
        border: 1px solid var(--line);
        border-radius: 10px;
        margin-bottom: 22px;
        overflow: hidden;
        background: #fff;
        box-shadow: var(--shadow);
      }
      .proc-head {
        padding: 14px 16px;
        border-bottom: 1px solid var(--line);
        background: #fafaf6;
      }
      .proc-head .nm {
        font-family: "Noto Serif SC", serif;
        font-weight: 900;
        font-size: 15px;
      }
      .proc-head .nm .pid {
        color: var(--seal);
        margin-right: 6px;
        font-size: 13px;
      }
      .proc-head .pp {
        font-size: 12px;
        color: var(--ink-soft);
        margin-top: 5px;
        line-height: 1.6;
      }
      .proc-head .meta {
        display: flex;
        gap: 6px;
        flex-wrap: wrap;
        margin-top: 8px;
      }
      .decl {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 0;
        border-bottom: 1px solid var(--line);
      }
      .decl > div {
        padding: 10px 16px;
      }
      .decl > div + div {
        border-left: 1px solid var(--line);
      }
      .decl .dl {
        font-size: 10px;
        letter-spacing: 2px;
        color: var(--ink-faint);
        margin-bottom: 6px;
      }
      .decl .di {
        font-size: 12px;
        line-height: 1.7;
      }
      .decl .di b {
        font-weight: 700;
      }
      /* 步骤表:固定列宽撑开,宿主容器 overflow-x 滚动 */
      .steps {
        width: 100%;
        min-width: 1760px;
        table-layout: fixed;
        border-collapse: collapse;
        font-size: 12px;
      }
      .steps th {
        padding: 6px 8px;
        font-size: 11px;
        font-weight: 700;
        letter-spacing: 1px;
        color: #fff;
        text-align: left;
      }
      .steps thead tr:first-child th {
        text-align: center;
        font-size: 12px;
        letter-spacing: 4px;
        padding: 7px 4px;
      }
      .steps .h-req {
        background: var(--navy);
      }
      .steps .h-req2 {
        background: #33547a;
      }
      .steps .h-in {
        background: var(--amber);
      }
      .steps .h-in2 {
        background: #cd7522;
      }
      .steps .h-im {
        background: var(--teal);
      }
      .steps .h-im2 {
        background: #2d8273;
      }
      .steps .h-out {
        background: var(--blue);
      }
      .steps .h-out2 {
        background: #4f7fe6;
      }
      .steps td {
        padding: 8px 9px;
        border: 1px solid var(--line);
        vertical-align: top;
        line-height: 1.6;
      }
      .steps tbody tr:nth-child(odd) td {
        background: #fdfdf9;
      }
      .steps td.c-in {
        background: var(--amber-bg) !important;
      }
      .steps td.c-out {
        background: var(--blue-bg) !important;
      }
      .steps .sid {
        font-family: "IBM Plex Mono", monospace;
        font-weight: 700;
        color: var(--navy);
        white-space: nowrap;
      }
      .steps .vtxt {
        color: var(--ink-soft);
        font-size: 11.5px;
        word-break: break-all;
      }
      /* 归类命中(实质/形式):原值 → 命中值 逐行配对 */
      .steps .sf-map {
        display: flex;
        flex-direction: column;
        gap: 4px;
      }
      .steps .sf-pair {
        display: flex;
        align-items: center;
        gap: 4px;
        flex-wrap: wrap;
        line-height: 1.5;
      }
      .steps .sf-old {
        color: #9aa0a6;
        text-decoration: line-through;
      }
      .steps .sf-plain {
        color: var(--ink);
      }
      .steps .sf-arrow {
        color: #2e9e5b;
        flex: none;
      }
      .steps .sf-new {
        display: inline-block;
        padding: 1px 7px;
        border-radius: 10px;
        background: #e3f3e8;
        color: #2e6b45;
        border: 1px solid #bfe3cb;
        font-weight: 600;
        white-space: nowrap;
      }
      .inf {
        background: var(--infer) !important;
        position: relative;
        outline: 1px dashed var(--infer-edge);
        outline-offset: -2px;
      }
      .inf .ib {
        position: absolute;
        top: -1px;
        right: -1px;
        background: var(--infer-edge);
        color: #fff;
        font-size: 9px;
        padding: 0 4px;
        border-radius: 0 0 0 4px;
        font-weight: 700;
      }
      .anchor {
        font-family: "IBM Plex Mono", monospace;
        font-size: 10.5px;
        color: var(--ink-faint);
        word-break: break-all;
      }
      /* 输入/输出「值」单元格:超过 4 行加蒙版,点击展开/收起 */
      .clamp-val {
        position: relative;
      }
      .clamp-val.clampable {
        max-height: 6.6em;
        overflow: hidden;
        cursor: zoom-in;
      }
      .clamp-val.clampable::after {
        content: "";
        position: absolute;
        left: 0;
        right: 0;
        bottom: 0;
        height: 2.4em;
        pointer-events: none;
      }
      .steps td.c-in .clamp-val.clampable::after {
        background: linear-gradient(180deg, rgba(255, 247, 232, 0), rgba(255, 247, 232, 1));
      }
      .steps td.c-out .clamp-val.clampable::after {
        background: linear-gradient(180deg, rgba(238, 243, 254, 0), rgba(238, 243, 254, 1));
      }
      .clamp-val.open {
        max-height: none;
        overflow: visible;
        cursor: zoom-out;
      }
      .clamp-val.open::after {
        display: none;
      }

      /* 工具表格(移植自 fixed_query_eval:案例逐行 rowspan + 限高展开) */
      .mw-ttwrap {
        overflow-x: auto;
        border: 1px solid var(--line);
        border-radius: 10px;
        box-shadow: var(--shadow);
      }
      .mw-tt {
        border-collapse: separate;
        border-spacing: 0;
        width: 100%;
        min-width: 1180px;
        background: #fff;
        font-size: 12.5px;
      }
      .mw-tt thead th {
        position: sticky;
        top: 0;
        z-index: 2;
        text-align: left;
        white-space: nowrap;
        background: linear-gradient(180deg, #2aa79b, #1c8076);
        color: #fff;
        font-weight: 700;
        padding: 10px 12px;
        letter-spacing: 0.3px;
        border-right: 1px solid rgba(255, 255, 255, 0.18);
      }
      .mw-tt thead th:last-child {
        border-right: none;
      }
      .mw-tt thead tr:first-child th {
        top: 0;
      }
      .mw-tt thead tr:nth-child(2) th {
        top: 38px;
      }
      .mw-tt .th-group {
        text-align: center;
      }
      .mw-tt .th-sub {
        background: linear-gradient(180deg, #36bdb0, #23897f);
        font-weight: 600;
      }
      .mw-tt tbody td {
        padding: 9px 12px;
        vertical-align: top;
        line-height: 1.6;
        border-bottom: 1px solid #f0eee8;
        border-right: 1px solid #f5f3ee;
        color: #3a3a3a;
      }
      .mw-tt tbody td:last-child {
        border-right: none;
      }
      .mw-tt td.col-case {
        background: #fafdfc;
      }
      .mw-tt tbody tr.tr-b td {
        background: #fbfaf6;
      }
      .mw-tt tbody tr.tr-b td.col-case {
        background: #f6fbfa;
      }
      .mw-tt tbody td.col-tool {
        font-weight: 700;
        color: #176d64;
        white-space: nowrap;
        border-left: 3px solid #2aa79b;
        background: #f3faf8;
      }
      .mw-tt tbody tr:hover td.col-tool {
        background: #e3f4f0;
      }
      .mw-tt ul {
        margin: 0;
        padding-left: 17px;
      }
      .mw-tt ul li {
        margin: 3px 0;
      }
      .mw-tt ul li::marker {
        color: #2aa79b;
      }
      .mw-tt .layer-badge {
        display: inline-block;
        font-weight: 700;
        font-size: 11px;
        padding: 2px 10px;
        border-radius: 20px;
        white-space: nowrap;
      }
      .mw-tt .layer-badge.make {
        color: #0e7490;
        background: #d6f0ee;
      }
      .mw-tt .layer-badge.create {
        color: #b8731a;
        background: #fef0db;
      }
      .mw-tt .dash {
        color: #c9c2b6;
      }
      .mw-tt .tcell {
        position: relative;
        max-height: 7.8em;
        overflow: hidden;
        transition: max-height 0.15s;
      }
      .mw-tt .tcell.clamped {
        cursor: zoom-in;
      }
      .mw-tt .tcell.clamped::after {
        content: "▾ 展开";
        position: absolute;
        left: 0;
        right: 0;
        bottom: 0;
        height: 2.6em;
        display: flex;
        align-items: flex-end;
        justify-content: center;
        padding-bottom: 2px;
        font-size: 11px;
        font-weight: 700;
        color: #176d64;
        background: linear-gradient(rgba(255, 255, 255, 0), #fff 72%);
        pointer-events: none;
      }
      .mw-tt tbody tr.tr-b .tcell.clamped::after {
        background: linear-gradient(rgba(251, 250, 246, 0), #fbfaf6 72%);
      }
      .mw-tt td.col-case .tcell.clamped::after {
        background: linear-gradient(rgba(250, 253, 252, 0), #fafdfc 72%);
      }
      .mw-tt tbody tr.tr-b td.col-case .tcell.clamped::after {
        background: linear-gradient(rgba(246, 251, 250, 0), #f6fbfa 72%);
      }
      .mw-tt .tcell.open {
        max-height: none;
        cursor: zoom-out;
      }
      .mw-tt .tcell.open::after {
        content: "";
        height: 0;
      }

      /* ── 帖子详情弹层 ── */
      dialog#post-dialog {
        width: min(1100px, 94vw);
        max-height: calc(100vh - 40px);
        border: none;
        border-radius: 14px;
        padding: 0;
        box-shadow: var(--shadow-lg);
        overflow: hidden;
        margin: auto; /* 全局 reset 清掉了 dialog 默认 margin:auto,这里补回才能居中 */
      }
      dialog#post-dialog::backdrop {
        background: rgba(19, 30, 46, 0.5);
        backdrop-filter: blur(2px);
      }
      /* 重新解构·编辑 Prompt 弹框 */
      dialog#reextract-dlg {
        border: none;
        border-radius: 14px;
        padding: 0;
        width: min(680px, 94vw);
        box-shadow: var(--shadow-lg);
        margin: auto;
      }
      dialog#reextract-dlg::backdrop {
        background: rgba(19, 30, 46, 0.42);
        backdrop-filter: blur(2px);
      }
      .rx-wrap {
        display: flex;
        flex-direction: column;
        max-height: calc(100vh - 48px);
      }
      .rx-head {
        display: flex;
        align-items: center;
        justify-content: space-between;
        padding: 14px 18px 12px;
        border-bottom: 1px solid var(--line);
      }
      .rx-title {
        font-weight: 700;
        font-size: 15px;
        color: var(--navy-deep);
      }
      .rx-sub {
        padding: 12px 18px 0;
        font-size: 12px;
        color: var(--ink-faint);
        line-height: 1.6;
      }
      .rx-model {
        padding: 12px 18px 0;
        display: flex;
        align-items: center;
        gap: 8px;
        font-size: 13px;
      }
      .rx-model label {
        font-weight: 600;
        color: var(--ink);
      }
      .rx-prompt {
        margin: 12px 18px;
        flex: 1;
        min-height: 300px;
        resize: vertical;
        font-family: "IBM Plex Mono", ui-monospace, monospace;
        font-size: 12px;
        line-height: 1.6;
        color: var(--ink);
        border: 1px solid var(--line-dark);
        border-radius: 8px;
        padding: 12px;
        background: #fbfaf6;
      }
      .rx-foot {
        display: flex;
        justify-content: flex-end;
        gap: 10px;
        padding: 12px 18px 16px;
        border-top: 1px solid var(--line);
      }
      #rx-save {
        background: var(--green);
        border-color: var(--green);
        color: #fff;
      }
      #rx-save:hover {
        background: #126b33;
        color: #fff;
        box-shadow: 0 4px 12px rgba(21, 128, 61, 0.3);
      }
      .pd-wrap {
        display: flex;
        flex-direction: column;
        max-height: calc(100vh - 40px);
      }
      .pd-head {
        display: flex;
        justify-content: space-between;
        gap: 14px;
        align-items: flex-start;
        padding: 16px 20px;
        border-bottom: 1px solid var(--line);
        background: #fff;
        flex: none;
      }
      .pd-head h3 {
        font-family: "Noto Serif SC", serif;
        font-size: 18px;
        line-height: 1.35;
        margin-top: 6px;
      }
      .pd-meta {
        display: flex;
        gap: 8px;
        flex-wrap: wrap;
        align-items: center;
        font-size: 12px;
        color: var(--ink-soft);
      }
      .pd-close {
        border: none;
        background: #f1f0ea;
        width: 30px;
        height: 30px;
        border-radius: 8px;
        font-size: 14px;
        color: var(--ink-soft);
        flex: none;
        transition: 0.15s;
      }
      .pd-close:hover {
        background: var(--seal);
        color: #fff;
      }
      .pd-body {
        display: grid;
        grid-template-columns: 1.05fr 0.95fr;
        gap: 20px;
        padding: 18px 20px;
        overflow: auto;
      }
      @media (max-width: 920px) {
        .pd-body {
          grid-template-columns: 1fr;
        }
      }
      .pd-body > section,
      .pd-body > aside {
        min-width: 0;
      }
      .pd-sec-title {
        font-weight: 800;
        margin: 16px 0 8px;
        font-size: 13px;
      }
      .pd-sec-title:first-child {
        margin-top: 0;
      }
      .pd-verdict {
        background: #eaf6fb;
        border-left: 4px solid #2c9ec7;
        padding: 10px 12px;
        color: #22566b;
        border-radius: 6px;
        font-size: 13px;
        line-height: 1.6;
      }
      .pd-raw {
        white-space: pre-wrap;
        background: #faf9f5;
        border: 1px solid var(--line);
        border-radius: 10px;
        padding: 12px;
        max-height: 320px;
        overflow: auto;
        color: #3d3f44;
        font-size: 13px;
        line-height: 1.7;
      }
      .pd-images {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 8px;
      }
      .pd-images img {
        width: 100%;
        max-height: 250px;
        object-fit: contain;
        border: 1px solid var(--line);
        border-radius: 10px;
        background: #f3f2ed;
        cursor: zoom-in;
      }
      .pd-videos {
        display: grid;
        grid-template-columns: 1fr;
        gap: 8px;
      }
      .pd-videos video {
        width: 100%;
        max-height: 320px;
        border: 1px solid var(--line);
        border-radius: 10px;
        background: #000;
      }
      .pd-videos iframe {
        width: 100%;
        aspect-ratio: 16 / 9;
        border: 1px solid var(--line);
        border-radius: 10px;
        background: #000;
      }
      .pd-videos .vid-fallback {
        display: block;
        padding: 10px 12px;
        font-size: 12px;
        color: var(--accent, #2d6cdf);
        border: 1px dashed var(--line);
        border-radius: 10px;
        text-decoration: none;
      }
      /* ── 图片预览灯箱 ── */
      dialog.lightbox {
        position: fixed;
        inset: 0;
        width: 100%;
        height: 100%;
        max-width: 100%;
        max-height: 100%;
        margin: 0;
        padding: 40px 72px;
        border: none;
        gap: 18px;
        align-items: center;
        justify-content: center;
        background: rgba(20, 20, 22, 0.86);
        backdrop-filter: blur(2px);
        overflow: hidden;
      }
      dialog.lightbox[open] {
        display: flex;
      }
      dialog.lightbox::backdrop {
        background: rgba(20, 20, 22, 0.5);
      }
      .lb-stage {
        margin: 0;
        max-width: 100%;
        max-height: 100%;
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 12px;
      }
      .lb-stage img {
        max-width: min(1100px, 86vw);
        max-height: 82vh;
        object-fit: contain;
        border-radius: 8px;
        box-shadow: 0 12px 48px rgba(0, 0, 0, 0.5);
        background: #2a2a2c;
      }
      .lb-stage figcaption {
        color: rgba(255, 255, 255, 0.78);
        font-size: 13px;
        letter-spacing: 0.5px;
      }
      .lb-nav {
        flex: 0 0 auto;
        width: 46px;
        height: 46px;
        border-radius: 50%;
        border: none;
        background: rgba(255, 255, 255, 0.12);
        color: #fff;
        font-size: 28px;
        line-height: 1;
        cursor: pointer;
        transition: 0.15s;
      }
      .lb-nav:hover {
        background: rgba(255, 255, 255, 0.26);
      }
      .lb-close {
        position: absolute;
        top: 20px;
        right: 24px;
        width: 38px;
        height: 38px;
        border-radius: 50%;
        border: none;
        background: rgba(255, 255, 255, 0.12);
        color: #fff;
        font-size: 18px;
        cursor: pointer;
        transition: 0.15s;
      }
      .lb-close:hover {
        background: rgba(255, 255, 255, 0.26);
      }
      /* ── 帖子列表缩略图 ── */
      .post .thumb {
        flex: 0 0 auto;
        width: 44px;
        height: 44px;
        border-radius: 7px;
        object-fit: cover;
        background: #f0efe9;
        border: 1px solid var(--line);
      }
      .post .thumb-ph {
        flex: 0 0 auto;
        width: 44px;
        height: 44px;
        border-radius: 7px;
        background: #f0efe9;
        border: 1px solid var(--line);
        display: flex;
        align-items: center;
        justify-content: center;
        color: var(--ink-faint);
        font-size: 16px;
      }
      /* ── 原文卡片(可整体展开/收起;含标题、图片缩略图、正文) ── */
      .src-block {
        border: 1px solid var(--line);
        border-radius: 10px;
        margin-bottom: 14px;
        background: #faf9f5;
        overflow: hidden;
      }
      .src-head {
        display: flex;
        align-items: center;
        gap: 8px;
        padding: 9px 12px;
        cursor: pointer;
        user-select: none;
      }
      .src-head:hover {
        background: #f3f2ed;
      }
      .src-caret {
        flex: 0 0 auto;
        color: var(--ink-faint);
        font-size: 11px;
        transition: transform 0.15s;
      }
      .src-block.open .src-caret {
        transform: rotate(90deg);
      }
      .src-label {
        flex: 0 0 auto;
        font-size: 11px;
        font-weight: 700;
        color: var(--blue);
        background: var(--blue-bg);
        padding: 1px 7px;
        border-radius: 4px;
      }
      .src-title {
        flex: 1;
        min-width: 0;
        font-weight: 600;
        font-size: 13px;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
      }
      .src-link {
        flex: 0 0 auto;
        font-size: 12px;
        color: var(--blue);
        text-decoration: none;
      }
      .src-case {
        flex: 0 0 auto;
        font-size: 11px;
        font-family: "IBM Plex Mono", ui-monospace, monospace;
        color: var(--ink-faint);
        background: var(--paper, #f3f2ed);
        border: 1px solid var(--line);
        padding: 1px 7px;
        border-radius: 4px;
        white-space: nowrap;
      }
      .src-body {
        padding: 0 12px 12px;
      }
      .src-block:not(.open) .src-body {
        display: none;
      }
      .src-thumbs {
        display: flex;
        gap: 8px;
        overflow-x: auto;
        padding: 4px 2px 10px;
        scrollbar-width: thin;
      }
      .src-thumbs img {
        flex: 0 0 auto;
        height: 96px;
        width: auto;
        max-width: 150px;
        border-radius: 8px;
        border: 1px solid var(--line);
        object-fit: cover;
        background: #f0efe9;
        cursor: zoom-in;
      }
      .src-text {
        font-size: 13px;
        line-height: 1.7;
        color: #3d3f44;
        white-space: pre-wrap;
      }
      .src-text.clamp {
        max-height: 88px;
        overflow: hidden;
        -webkit-mask-image: linear-gradient(180deg, #000 62%, transparent);
        mask-image: linear-gradient(180deg, #000 62%, transparent);
      }
      .src-text-toggle {
        margin-top: 4px;
        background: none;
        border: none;
        color: var(--blue);
        cursor: pointer;
        font-size: 12px;
        padding: 2px 0;
      }
      .pd-tags {
        display: flex;
        gap: 6px;
        flex-wrap: wrap;
        margin-top: 12px;
      }
      .pd-score-head {
        display: flex;
        justify-content: space-between;
        align-items: center;
        margin-bottom: 10px;
      }
      .pd-score-head .t {
        font-weight: 800;
        font-size: 14px;
      }
      .pd-overall {
        display: flex;
        align-items: center;
        gap: 6px;
        font-size: 12.5px;
        font-weight: 700;
        color: var(--ink-soft);
        background: #faf9f5;
        border: 1px solid var(--line);
        padding: 4px 12px;
        border-radius: 8px;
      }
      .pd-overall b {
        font-size: 20px;
        color: var(--blue);
        font-weight: 900;
        line-height: 1;
      }
      .sc-card {
        border: 1px solid var(--line);
        border-radius: 10px;
        background: #fff;
        overflow: hidden;
        margin-bottom: 12px;
      }
      .sc-card-head {
        display: flex;
        justify-content: space-between;
        align-items: center;
        gap: 10px;
        padding: 10px 12px;
        background: #faf9f5;
        border-bottom: 1px solid var(--line);
        font-size: 13px;
        font-weight: 800;
      }
      .sc-card-head .badge {
        display: inline-grid;
        place-items: center;
        width: 20px;
        height: 20px;
        border-radius: 5px;
        background: var(--navy);
        color: #fff;
        font-size: 10px;
        font-weight: 700;
        margin-right: 7px;
      }
      .sc-card-head .avg {
        font-size: 12px;
        color: var(--ink-faint);
        font-weight: 600;
      }
      .sc-card-head .avg b {
        font-size: 17px;
        color: var(--blue);
        font-weight: 900;
      }
      .sc-card-body {
        display: grid;
        gap: 8px;
        padding: 11px 12px;
      }
      /* 维度分组小标题:参考 mode_procedure —— 一级虚线大写,二级点线常规 */
      .sc-sub {
        font-size: 11px;
        font-weight: 800;
        letter-spacing: 0.8px;
        color: var(--ink-faint);
        text-transform: uppercase;
        margin: 14px 0 8px;
        padding-bottom: 5px;
        border-bottom: 1px dashed var(--line-dark);
      }
      .sc-card-body > .sc-sub:first-child {
        margin-top: 2px;
      }
      .sc-sub.lv2 {
        font-size: 11px;
        font-weight: 700;
        letter-spacing: 0.3px;
        text-transform: none;
        color: var(--ink-soft);
        margin: 11px 0 6px;
        padding-bottom: 4px;
        border-bottom: 1px dotted var(--line);
      }
      .sc-row {
        display: grid;
        grid-template-columns: 118px 1fr 30px 16px;
        gap: 9px;
        align-items: center;
        font-size: 12.5px;
      }
      .sc-row .meter {
        height: 8px;
        border-radius: 99px;
        background: #edebe4;
        overflow: hidden;
      }
      .sc-row .meter span {
        display: block;
        height: 100%;
        border-radius: 99px;
        background: linear-gradient(90deg, #60a5fa, #2563eb);
      }
      .sc-row b {
        font-weight: 700;
        text-align: right;
      }
      .sc-row .info {
        color: var(--ink-faint);
        cursor: pointer;
        font-size: 12px;
        opacity: 0.75;
        user-select: none;
      }
      .sc-row .info:hover {
        color: var(--blue);
        opacity: 1;
      }
      /* 判定理由弹层:点击 ⓘ 时浮现,挂在 dialog 顶层 */
      .score-pop {
        position: fixed;
        z-index: 90;
        width: 288px;
        max-width: calc(100vw - 24px);
        background: var(--card);
        border: 1px solid var(--line-dark);
        border-radius: 10px;
        box-shadow: var(--shadow-lg);
        padding: 12px 14px;
        font-size: 12.5px;
        line-height: 1.65;
        color: var(--ink-soft);
        animation: popIn 0.12s ease;
      }
      .score-pop .sp-head {
        display: flex;
        align-items: center;
        gap: 8px;
        margin-bottom: 8px;
        padding-bottom: 8px;
        border-bottom: 1px solid var(--line);
      }
      .score-pop .sp-tag {
        font-size: 9px;
        letter-spacing: 1.5px;
        color: var(--ink-faint);
        font-weight: 700;
        border: 1px solid var(--line-dark);
        border-radius: 5px;
        padding: 2px 6px;
        white-space: nowrap;
      }
      .score-pop .sp-name {
        font-weight: 800;
        font-size: 13px;
        color: var(--ink);
      }
      .score-pop .sp-score {
        margin-left: auto;
        font-size: 16px;
        font-weight: 900;
        color: var(--blue);
      }
      .score-pop .sp-body {
        white-space: pre-wrap;
      }
      @keyframes popIn {
        from {
          opacity: 0;
          transform: translateY(-4px);
        }
        to {
          opacity: 1;
          transform: none;
        }
      }

      /* 任务面板 */
      #task-panel {
        position: fixed;
        right: 22px;
        bottom: 22px;
        width: 440px;
        max-height: 55vh;
        z-index: 130;   /* 高于弹层(modal-bg 70/dialog 120),搜索进度日志始终可见 */
        display: flex;
        flex-direction: column;
        border: 1px solid var(--line-dark);
        border-radius: 12px;
        background: var(--card);
        box-shadow: var(--shadow-lg);
        overflow: hidden;
      }
      #task-panel header {
        all: unset;
        display: flex;
        align-items: center;
        gap: 9px;
        padding: 11px 14px;
        background: var(--navy-deep);
        color: #fff;
        font-size: 13px;
        font-weight: 700;
      }
      #task-panel header .dot {
        width: 8px;
        height: 8px;
        border-radius: 50%;
        background: #f5b942;
        animation: blink 1s infinite;
      }
      #task-panel header .dot.done {
        background: #3fb27f;
        animation: none;
      }
      #task-panel header .dot.failed {
        background: #e0492f;
        animation: none;
      }
      @keyframes blink {
        50% {
          opacity: 0.3;
        }
      }
      #task-panel header button {
        margin-left: auto;
        background: none;
        border: 0;
        color: #9eb0c5;
        font-size: 15px;
      }
      #task-panel header button:hover {
        color: #fff;
      }
      #task-log {
        font-family: "IBM Plex Mono", monospace;
        font-size: 11px;
        line-height: 1.65;
        color: var(--ink-soft);
        white-space: pre-wrap;
        overflow: auto;
        padding: 12px 14px;
        background: #fafaf6;
        flex: 1;
      }

      /* 弹窗(新建搜索) */
      .modal-bg {
        position: fixed;
        inset: 0;
        background: rgba(19, 30, 46, 0.5);
        z-index: 70;
        display: grid;
        place-items: center;
        backdrop-filter: blur(2px);
      }
      /* 不能 overflow:hidden,否则渠道下拉面板会被裁掉 */
      .modal {
        width: 460px;
        background: var(--card);
        border-radius: 14px;
        box-shadow: var(--shadow-lg);
      }
      .modal h2 {
        padding: 14px 18px;
        background: var(--navy-deep);
        color: #fff;
        font-size: 15px;
        letter-spacing: 2px;
        border-radius: 14px 14px 0 0;
      }
      .modal .mb {
        padding: 18px;
        display: grid;
        gap: 12px;
      }
      .modal label {
        font-size: 12px;
        color: var(--ink-soft);
        display: grid;
        gap: 5px;
      }
      .modal .mf {
        display: flex;
        justify-content: flex-end;
        gap: 10px;
        padding: 0 18px 18px;
      }
      /* 渠道下拉多选 */
      .dd {
        position: relative;
      }
      .dd-btn {
        width: 100%;
        display: flex;
        justify-content: space-between;
        align-items: center;
        gap: 8px;
        text-align: left;
        padding: 7px 10px;
        border: 1px solid var(--line-dark);
        border-radius: 8px;
        background: #fff;
        font-size: 13px;
        color: var(--ink);
      }
      .dd-btn .dd-arrow {
        color: var(--ink-faint);
        flex: none;
      }
      .dd-btn:focus {
        border-color: var(--blue);
      }
      .dd-panel {
        position: absolute;
        left: 0;
        right: 0;
        top: calc(100% + 4px);
        z-index: 10;
        background: #fff;
        border: 1px solid var(--line-dark);
        border-radius: 10px;
        box-shadow: var(--shadow-lg);
        padding: 6px;
        max-height: 220px;
        overflow: auto;
      }
      .modal label.dd-opt {
        display: flex;
        flex-direction: row;
        align-items: center;
        gap: 8px;
        padding: 7px 9px;
        border-radius: 6px;
        font-size: 13px;
        color: var(--ink);
        cursor: pointer;
      }
      .dd-opt:hover {
        background: #f4f3ee;
      }
      .dd-opt input {
        accent-color: var(--blue);
        margin: 0;
        cursor: pointer;
      }
      .dd-opt.sel {
        background: var(--blue-bg);
        font-weight: 500;
      }

      /* 聚类库占位 */
      .cluster-empty {
        display: grid;
        place-items: center;
        min-height: 60vh;
      }
      .cluster-empty .inner {
        text-align: center;
        color: var(--ink-faint);
      }
      .cluster-empty .stamp {
        width: 120px;
        height: 120px;
        margin: 0 auto 18px;
        border: 3px solid var(--line-dark);
        border-radius: 50%;
        display: grid;
        place-items: center;
        font-family: "Noto Serif SC", serif;
        font-size: 30px;
        font-weight: 900;
        color: var(--line-dark);
        transform: rotate(-8deg);
        letter-spacing: 4px;
      }
      [hidden] {
        display: none !important;
      }

      /* ── 页内提示(替代浏览器原生 alert) ── */
      #toast-wrap {
        position: fixed;
        top: 18px;
        left: 50%;
        transform: translateX(-50%);
        z-index: 120;
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 10px;
        pointer-events: none;
      }
      .toast {
        pointer-events: auto;
        display: flex;
        align-items: flex-start;
        gap: 10px;
        min-width: 240px;
        max-width: min(440px, calc(100vw - 32px));
        padding: 12px 14px 12px 13px;
        background: var(--card);
        color: var(--ink);
        border: 1px solid var(--line-dark);
        border-left: 4px solid var(--navy);
        border-radius: 10px;
        box-shadow: var(--shadow-lg);
        font-size: 13px;
        line-height: 1.55;
        animation: toastIn 0.18s ease;
      }
      .toast.out {
        animation: toastOut 0.16s ease forwards;
      }
      .toast .ic {
        flex: none;
        width: 18px;
        height: 18px;
        margin-top: 1px;
        display: grid;
        place-items: center;
        border-radius: 50%;
        font-size: 12px;
        font-weight: 900;
        color: #fff;
        background: var(--navy);
      }
      .toast .msg {
        flex: 1;
        word-break: break-word;
      }
      .toast.error {
        border-left-color: var(--seal);
      }
      .toast.error .ic {
        background: var(--seal);
      }
      .toast.success {
        border-left-color: var(--green);
      }
      .toast.success .ic {
        background: var(--green);
      }
      .toast.warn {
        border-left-color: var(--amber);
      }
      .toast.warn .ic {
        background: var(--amber);
      }
      @keyframes toastIn {
        from {
          opacity: 0;
          transform: translateY(-10px);
        }
        to {
          opacity: 1;
          transform: none;
        }
      }
      @keyframes toastOut {
        to {
          opacity: 0;
          transform: translateY(-8px);
        }
      }
      /* Query 规则弹层 */
      .qr-box { background:#fff; border-radius:14px; box-shadow:0 10px 44px rgba(0,0,0,.18);
                width:96vw; max-width:1200px; max-height:92vh; display:flex; flex-direction:column; overflow:hidden; }
      .qr-head { display:flex; align-items:center; padding:15px 20px; border-bottom:1px solid #eee; }
      .qr-title { font-size:15px; font-weight:600; color:#1a1a1a; }
      .qr-x { margin-left:auto; border:none; background:none; font-size:16px; color:#999; cursor:pointer; padding:4px 9px; border-radius:7px; line-height:1; }
      .qr-x:hover { background:#f2f2f2; color:#333; }
      .qr-bar { display:flex; align-items:center; gap:10px; padding:11px 20px; border-bottom:1px solid #f0f0f0; background:#fcfcfc; }
      .qr-hint { color:#888; font-size:12px; margin-left:4px; }
      .qr-thr-lab { color:#666; font-size:12px; }
      .qr-thr { width:46px; padding:3px 5px; border:1px solid #ddd; border-radius:6px; font-size:12px; }
      #qr-score:disabled { opacity:.6; cursor:wait; }
      .ui-confirm-bg { position:fixed; inset:0; background:rgba(0,0,0,.38); z-index:200; display:flex; align-items:center; justify-content:center; }
      .ui-confirm { background:#fff; border-radius:14px; box-shadow:0 14px 50px rgba(0,0,0,.28); width:400px; max-width:92vw; padding:22px 24px; }
      .ui-confirm-msg { font-size:14px; color:#1a1a1a; line-height:1.6; white-space:pre-line; margin-bottom:18px; }
      .ui-confirm-acts { display:flex; justify-content:flex-end; gap:10px; }
      .qr-dims { padding:8px 20px 10px; max-height:32vh; overflow:auto; border-bottom:1px solid #f0f0f0; }
      .qr-row { display:flex; align-items:flex-start; gap:10px; padding:4px 0; }
      .qr-row + .qr-row { border-top:1px solid #f6f6f6; }
      .qr-lab { min-width:64px; color:#999; font-size:12.5px; padding-top:5px; flex-shrink:0; }
      .qr-chips { display:flex; flex-wrap:wrap; gap:6px; flex:1; }
      .chip { padding:4px 13px; border-radius:16px; font-size:12.5px; cursor:pointer; border:1.5px solid #e2e2e2; background:#fff; color:#555; line-height:1.4; }
      .chip:hover { border-color:#bbb; color:#222; }
      .chip.on { background:#1a1a1a; border-color:#1a1a1a; color:#fff; font-weight:500; }
      .chip.axis.on { background:#2563eb; border-color:#2563eb; }
      .qr-table-wrap { overflow:auto; flex:1; }
      .qr-tab { border-collapse:collapse; font-size:11px; }
      .qr-tab th, .qr-tab td { border:1px solid #eee; padding:3px 7px; white-space:nowrap; }
      .qr-tab thead th { position:sticky; top:0; background:#f7f7f7; z-index:2; }
      .qr-corner { position:sticky; left:0; z-index:3; background:#eef0f3; font-weight:600; color:#555; }
      .qr-th { position:sticky; left:0; background:#fafafa; z-index:1; text-align:left; color:#444; }
      .qr-tl1 { background:#eef0f3; font-weight:600; color:#444; }
      .qr-gh { background:#e8ebef; font-weight:600; color:#333; text-align:center; }
      .qr-ah { background:#f3f4f6; color:#555; text-align:center; }
      .qr-c.t0 { background:#fafafa; color:#bbb; } .qr-c.t1 { background:#f1f8f1; }
      .qr-c.t2 { background:#d8ecd8; } .qr-c.t3 { background:#b9ddb9; }
      .qr-c.dead { color:#ccc; }
      .qr-c.keep { background:#fff3bf !important; box-shadow:inset 0 0 0 2px #f59e0b; color:#111; font-weight:700; cursor:pointer; }
      .qr-c.keep:hover { background:#ffe066 !important; }
      .qr-bd { display:inline-block; margin-left:5px; font-style:normal; font-size:11px; font-weight:800; color:#fff; background:#f59e0b; padding:0 6px; border-radius:9px; }
      .qr-pop { position:fixed; z-index:60; width:300px; background:#fff; border:1px solid #e2e2e2;
                border-radius:11px; box-shadow:0 8px 30px rgba(0,0,0,.18); padding:13px 15px; font-size:12.5px; color:#333; }
      .qr-pop .q { font-size:13.5px; font-weight:600; color:#1a1a1a; margin-bottom:2px; word-break:break-all; }
      .qr-pop .orig { font-size:11px; color:#aaa; margin-bottom:8px; }
      .qr-pop .sc { display:flex; align-items:baseline; gap:8px; margin:6px 0; }
      .qr-pop .sc b { font-size:22px; color:#2563eb; }
      .qr-pop .dim { color:#888; font-size:11.5px; }
      .qr-pop .rsn { color:#555; margin:7px 0 10px; line-height:1.5; }
      .qr-pop .acts { display:flex; gap:8px; }
    </style>
  </head>
  <body>
    <div id="toast-wrap" aria-live="polite"></div>
    <header>
      <div class="logo">
        <div class="seal">解</div>
        <div><b>mode_workflow</b><small>解构工作台 · MODE WORKBENCH</small></div>
      </div>
      <nav id="nav">
        <a
          href="#dashboard"
          data-tab="dashboard"
          >Dashboard</a
        >
        <a
          href="#dataset"
          data-tab="dataset"
          >Dataset</a
        >
        <a
          href="#cluster"
          data-tab="cluster"
          >知识库</a
        >
      </nav>
      <div class="spacer"></div>
      <div class="hint">SEARCH · EXTRACT · ARCHIVE</div>
    </header>

    <main id="view-dashboard"></main>

    <main id="view-dataset">
      <div class="ds-top">
        <div class="mode-switch">
          <button
            id="m-process"
            class="on"
          >
            工序
          </button>
          <button id="m-tools">工具</button>
        </div>
        <div style="flex: 1"></div>
        <button
          class="btn seal"
          id="btn-new-search"
        >
          ＋ 新建搜索
        </button>
        <button class="btn" id="btn-query-rule" style="margin-left:8px">Query 规则</button>
      </div>
      <div class="ds-grid">
        <div class="card">
          <div class="col-head">
            QUERY
            <span
              class="n"
              id="q-count"
            ></span>
          </div>
          <div
            class="qlist"
            id="query-list"
          >
            <div class="empty">暂无 query</div>
          </div>
        </div>
        <div class="card">
          <div class="col-head posts-head">
            <div class="ph-title">帖子 <span class="n" id="p-count"></span></div>
            <div class="ph-actions">
              <button class="btn sm" id="btn-batch" disabled hidden>批量解构</button>
              <button class="btn sm" id="btn-extract-adopted" hidden>解构全部已采纳</button>
              <button class="btn sm" id="btn-cat-adopted" hidden>归类全部已采纳</button>
            </div>
          </div>
          <div
            class="plat-tabs"
            id="plat-tabs"
            hidden
          ></div>
          <div
            class="plist"
            id="post-list"
          >
            <div class="empty"><span class="glyph">←</span>先选择左侧 query</div>
          </div>
        </div>
        <div class="card xp">
          <div
            class="xp-head"
            id="xp-head"
          >
            <span class="st">解构结果</span>
          </div>
          <div
            class="xp-body"
            id="xp-body"
          >
            <div class="empty"><span class="glyph">←</span>选择一个帖子查看解构结果</div>
          </div>
        </div>
      </div>
    </main>

    <main id="view-cluster">
      <iframe
        id="cluster-frame"
        title="知识检索"
        loading="lazy"
      ></iframe>
    </main>

    <div
      id="task-panel"
      hidden
    >
      <header>
        <span
          class="dot"
          id="task-dot"
        ></span
        ><span id="task-title">任务</span> <button onclick="hideTask()">✕</button>
      </header>
      <div id="task-log"></div>
    </div>

    <!-- 帖子详情弹层(评分详情参考 fixed_query_eval) -->
    <dialog id="post-dialog">
      <div class="pd-wrap">
        <div class="pd-head">
          <div style="min-width: 0">
            <div
              class="pd-meta"
              id="pd-meta"
            ></div>
            <h3 id="pd-title"></h3>
          </div>
          <button
            class="pd-close"
            onclick="document.getElementById('post-dialog').close()"
          >
            ✕
          </button>
        </div>
        <div class="pd-body">
          <section>
            <div id="pd-verdict"></div>
            <div class="pd-sec-title">抓取文本节选</div>
            <div
              class="pd-raw"
              id="pd-text"
            ></div>
            <div class="pd-sec-title">图片预览</div>
            <div
              class="pd-images"
              id="pd-images"
            ></div>
            <div
              class="pd-sec-title"
              id="pd-videos-title"
              style="display: none"
            >
              视频预览
            </div>
            <div
              class="pd-videos"
              id="pd-videos"
              style="display: none"
            ></div>
            <div
              class="pd-tags"
              id="pd-tags"
            ></div>
          </section>
          <aside>
            <div class="pd-score-head">
              <span class="t">评分详情</span>
              <span class="pd-overall">综合评分 <b id="pd-overall">—</b></span>
            </div>
            <div id="pd-scores"></div>
          </aside>
        </div>
      </div>
    </dialog>

    <!-- 重新解构 · 编辑解构 Prompt -->
    <dialog id="reextract-dlg">
      <div class="rx-wrap">
        <div class="rx-head">
          <div class="rx-title">重新解构 · 编辑解构 Prompt</div>
          <button
            class="btn sm"
            onclick="document.getElementById('reextract-dlg').close()"
          >
            关闭
          </button>
        </div>
        <div class="rx-sub">
          修改下面的解构 Prompt 后,点「保存修改」将按最新 Prompt
          重新解构本帖(生成新版本,旧版本保留)。改动仅本次生效,不会改写默认 Prompt。
        </div>
        <div class="rx-model">
          <label>模型:</label>
          <select id="rx-model"></select>
        </div>
        <textarea
          id="rx-prompt"
          class="rx-prompt"
          spellcheck="false"
        ></textarea>
        <div class="rx-foot">
          <button
            class="btn"
            onclick="document.getElementById('reextract-dlg').close()"
          >
            取消
          </button>
          <button
            class="btn primary"
            id="rx-save"
            onclick="saveReextract()"
          >
            保存修改
          </button>
        </div>
      </div>
    </dialog>

    <!-- 图片预览灯箱(支持左右切换) -->
    <dialog
      class="lightbox"
      id="lightbox"
      onclick="if (event.target === this) closeLightbox();"
    >
      <button
        class="lb-close"
        onclick="closeLightbox()"
        title="关闭 (Esc)"
      >
        ✕
      </button>
      <button
        class="lb-nav lb-prev"
        onclick="lbStep(-1)"
        title="上一张 (←)"
      >
        ‹
      </button>
      <figure class="lb-stage">
        <img
          id="lb-img"
          src=""
          alt=""
        />
        <figcaption id="lb-count"></figcaption>
      </figure>
      <button
        class="lb-nav lb-next"
        onclick="lbStep(1)"
        title="下一张 (→)"
      >
        ›
      </button>
    </dialog>

    <div
      class="modal-bg"
      id="search-modal"
      hidden
    >
      <div class="modal">
        <h2>新建搜索</h2>
        <div class="mb">
          <label
            >Query(评估锚点,必填)<input
              type="text"
              id="s-query"
              placeholder="如:AI 人像 图片 生成 怎么做"
          /></label>
          <label
            >解构方向<select id="s-mode">
              <option value="工序">工序</option>
              <option value="工具">工具</option>
            </select></label
          >
          <label
            >同义措辞(可选,逗号分隔)<input
              type="text"
              id="s-syn"
              placeholder="如:AI 人像生成 教程,AI 写真 怎么做"
          /></label>
          <label
            >检索渠道(下拉多选)
            <div
              class="dd"
              id="s-plat-dd"
            >
              <button
                type="button"
                class="dd-btn"
                id="s-plat-btn"
              >
                选择渠道 ▾
              </button>
              <div
                class="dd-panel"
                id="s-plat-panel"
                hidden
              ></div>
            </div>
          </label>
          <label
            >每措辞每渠道上限<input
              type="number"
              id="s-max"
              value="10"
              min="1"
              max="50"
          /></label>
        </div>
        <div class="mf">
          <button
            class="btn"
            onclick="document.getElementById('search-modal').hidden = true"
          >
            取消
          </button>
          <button
            class="btn primary"
            id="s-go"
          >
            开始搜索
          </button>
        </div>
      </div>
    </div>

    <!-- Query 规则组织器 弹层 -->
    <div class="modal-bg" id="qr-modal" hidden>
      <div class="qr-box">
        <div class="qr-head">
          <span class="qr-title">Query 词组织器</span>
          <button class="qr-x" id="qr-close" title="关闭">✕</button>
        </div>
        <div class="qr-bar">
          <button class="btn seal" id="qr-score">生成正交表</button>
          <button class="btn" id="qr-search-all" hidden>搜全部达标</button>
          <label class="qr-thr-lab">达标分 ≥ <input id="qr-thr" class="qr-thr" type="number" min="0" max="10" step="0.5" value="7"></label>
          <span id="qr-hint" class="qr-hint"></span>
        </div>
        <div id="qr-dims" class="qr-dims"></div>
        <div id="qr-table-wrap" class="qr-table-wrap"></div>
      </div>
      <div id="qr-pop" class="qr-pop" hidden></div>
    </div>

    <script>
      /* ════ 基础 ════ */
      const $ = (s) => document.querySelector(s);
      /* 页内提示,替代浏览器原生 alert();type: info|error|success|warn */
      function toast(msg, type = "info", ms = 3200) {
        const wrap = $("#toast-wrap");
        if (!wrap) return;
        const ic = { info: "i", error: "!", success: "✓", warn: "!" }[type] || "i";
        const el = document.createElement("div");
        el.className = "toast " + type;
        el.innerHTML = `<span class="ic">${ic}</span><span class="msg">${esc(msg)}</span>`;
        const dismiss = () => {
          el.classList.add("out");
          el.addEventListener("animationend", () => el.remove(), { once: true });
        };
        el.addEventListener("click", dismiss);
        wrap.appendChild(el);
        setTimeout(dismiss, ms);
      }
      const api = (p, opt) =>
        fetch(p, opt).then(async (r) => {
          if (!r.ok)
            throw Object.assign(new Error("api"), { status: r.status, body: await r.json().catch(() => ({})) });
          return r.json();
        });
      const esc = (s) =>
        String(s ?? "").replace(
          /[&<>"']/g,
          (c) => ({ "&": "&amp;", "<": "&lt;", ">": "&gt;", '"': "&quot;", "'": "&#39;" })[c],
        );
      /* 目的列: 把 intent 里的 {类别:值} 标记渲染成彩色胶囊 (口径同 procedure-dsl renderer.py:render_intent)。
         合法类别 5 个: effect/via/act/in-type/out-type; 其余落 ik-other(红删除线,当 lint 警告)。
         标记外的字面文字与值都做 HTML 转义。 */
      const INTENT_KIND = {
        effect: "ik-effect", via: "ik-via", act: "ik-act",
        "in-type": "ik-in-type", "out-type": "ik-out-type",
      };
      const renderIntent = (text) => {
        const s = String(text ?? "");
        const re = /\{([\w-]+):([^}]+)\}/g;
        let out = "", last = 0, m;
        while ((m = re.exec(s))) {
          out += esc(s.slice(last, m.index).replace(/`/g, ""));
          const kc = INTENT_KIND[m[1]] || "ik-other";
          out += `<span class="intent-tok ${kc}">${esc(m[2])}</span>`;
          last = m.index + m[0].length;
        }
        return out + esc(s.slice(last).replace(/`/g, ""));
      };
      /* 外链图片走本服务同源反代,绕过公众号(mmbiz.qpic.cn)等防盗链 */
      const imgProxy = (u) => (/^https?:\/\//.test(u || "") ? "/api/img?u=" + encodeURIComponent(u) : u || "");
      /* 图片加载策略:优先「浏览器直连 CDN」(referrerpolicy=no-referrer 多数能绕防盗链),
         直连失败再回退到同源代理 /api/img。
         为什么:公网走 Cloudflare 快速隧道(trycloudflare),所有经 /api/img 的图片字节都要
         「上游CDN → 本机 → 隧道(受本机上行带宽限制)→ 客户」,一帖十几张图(每张 100~180KB)
         就把本机上行打满,于是「本地快、公网慢」。改为浏览器直连后,绝大多数图片字节不再过本机/
         隧道,只有少数仍被防盗链拦截的才回退代理。 */
      const imgDirect = (u) => (/^https?:\/\//.test(u || "") ? u : imgProxy(u));
      /* 视频走专用同源反代 /api/video:服务端按平台补 Referer(抖音 aweme/play 等必需)
         + 透传 Range 头做边下边播/拖拽。不像 /api/img 那样整文件缓冲,避免慢 + BrokenPipe。 */
      const vidProxy = (u) => (/^https?:\/\//.test(u || "") ? "/api/video?u=" + encodeURIComponent(u) : u || "");
      /* 从各种 YouTube 链接里抠出 video_id(watch?v= / youtu.be/ / embed/) */
      const ytId = (u) => {
        const m =
          (u || "").match(/[?&]v=([\w-]{6,})/) ||
          (u || "").match(/youtu\.be\/([\w-]{6,})/) ||
          (u || "").match(/embed\/([\w-]{6,})/);
        return m ? m[1] : "";
      };
      /* 视频代理也失败时,把 <video> 换成「源站打开」链接(data-src 存原始 URL) */
      function vidFallback(el) {
        el.onerror = null;
        const u = el.dataset.src || "";
        if (u)
          el.outerHTML =
            '<a class="vid-fallback" href="' + u.replace(/"/g, "&quot;") +
            '" target="_blank" rel="noopener">源站打开视频 ↗</a>';
      }
      function imgFallback(el, proxy) {
        el.onerror = null; // 防止回调里再次触发自身造成死循环
        if (!el.dataset.fb) {
          el.dataset.fb = "1"; // 直连失败 → 回退同源代理(防盗链兜底)
          el.onerror = () => imgFallback(el, proxy);
          el.src = proxy;
          return;
        }
        if (el.dataset.ph)
          el.outerHTML = el.dataset.ph; // 代理也失败:换占位元素
        else el.style.opacity = 0.25; // 无占位:淡化
      }
      function imgHtml(u, { cls = "", extra = "", ph = "" } = {}) {
        const phAttr = ph ? ` data-ph="${esc(ph)}"` : "";
        return `<img ${cls ? `class="${cls}" ` : ""}src="${esc(imgDirect(u))}" referrerpolicy="no-referrer" loading="lazy"${phAttr} ${extra} onerror="imgFallback(this,'${esc(imgProxy(u))}')">`;
      }
      const state = {
        tab: "dashboard",
        mode: "process",
        queryId: null,
        caseId: null,
        post: null,
        version: null,
        platFilter: "all",
        doneFilter: true,
        selected: new Set(),
        queries: [],
        posts: [],
      };
      const PLAT_CLS = (p) =>
        ({ xhs: "xhs", gzh: "gzh", zhihu: "zhihu", douyin: "douyin", sph: "sph", youtube: "youtube", x: "x" })[p] ||
        "other";
      const PLAT_NAME = (p) =>
        ({
          xhs: "小红书",
          gzh: "公众号",
          sph: "视频号",
          github: "GitHub",
          toutiao: "头条",
          douyin: "抖音",
          bili: "哔哩哔哩",
          zhihu: "知乎",
          weibo: "微博",
          youtube: "YouTube",
          x: "X",
        })[p] ||
        p ||
        "?";
      /* 渠道 logo 徽标(品牌色圆角方块,hover 显示渠道名) */
      /* 有对应 SVG 图标的渠道(文件位于 /icons/<key>.svg) */
      const PLAT_ICONS = new Set(["xhs", "gzh", "sph", "github", "douyin", "bili", "zhihu", "weibo", "youtube"]);
      const PLAT_LOGO = (p, size = 18) =>
        PLAT_ICONS.has(p)
          ? `<span class="plat-logo" title="${PLAT_NAME(p)}"><img src="/icons/${p}.svg" width="${size}" height="${size}" alt="${PLAT_NAME(p)}" loading="lazy"></span>`
          : `<span class="plat other">${esc(PLAT_NAME(p))}</span>`;
      const MODELS_PROC = ["anthropic/claude-sonnet-4-6", "google/gemini-3.1-flash-lite"];
      const MODELS_TOOL = ["google/gemini-3.1-flash-lite", "anthropic/claude-sonnet-4-6"];
      const scoreCls = (v) => (v == null ? "s0" : v >= 9 ? "s9" : v >= 8 ? "s8" : v >= 6 ? "s6" : "s0");

      /* ════ 路由 ════ */
      function route() {
        state.tab = (location.hash || "#dashboard").slice(1);
        if (!["dashboard", "dataset", "cluster"].includes(state.tab)) state.tab = "dashboard";
        document.querySelectorAll("nav a").forEach((a) => a.classList.toggle("on", a.dataset.tab === state.tab));
        document.querySelectorAll("main").forEach((m) => m.classList.toggle("on", m.id === "view-" + state.tab));
        if (state.tab === "dashboard") renderDashboard();
        if (state.tab === "dataset" && !state.queries.length) loadQueries();
        if (state.tab === "cluster") {
          // 首次打开聚类库才加载内嵌检索页
          const f = $("#cluster-frame");
          if (f && !f.src) f.src = "/search.html";
        }
      }
      window.addEventListener("hashchange", route);

      /* ════ Dashboard ════ */
      let chartRefs = [];
      async function renderDashboard() {
        const v = $("#view-dashboard");
        let d;
        try {
          d = await api("/api/dashboard");
        } catch (e) {
          v.innerHTML = `<div class="card empty"><span class="glyph">!</span>Dashboard 加载失败:${esc(e.body?.error || e.status)}</div>`;
          return;
        }
        const r = d.result,
          p = d.process_data;
        // 进度百分比向下取整:200/201=99.5% 显示 99%,未真正做完不会显示 100%
        const pct = (a, b) => (b ? Math.floor((a / b) * 100) : 0);
        const platBreak = (arr) =>
          (arr || [])
            .map(
              ([k, n]) =>
                `<span class="pb-item">${PLAT_LOGO(k, 15)}<b class="num">${n}</b></span>`,
            )
            .join("") || "—";
        v.innerHTML = `
  <div class="dash-section"><h2>结果数据</h2><div class="rule"></div><span class="tag">RESULTS</span></div>
  <div class="cards">
    <div class="card stat"><div class="lbl">采集帖子数量</div><div class="val num">${r.post_count}</div><div class="sub plat-break">${platBreak(r.collected_by_platform)}</div></div>
    <div class="card stat t"><div class="lbl">解构帖子数量</div><div class="val num">${r.extracted_post_count}</div><div class="sub plat-break">${platBreak(r.extracted_by_platform)}</div></div>
    <div class="card stat a"><div class="lbl">工具数量</div><div class="val num">${r.tool_count}</div><div class="sub">mode_tools 去重工具名</div></div>
    <div class="card stat r"><div class="lbl">内容树覆盖节点</div><div class="val num">0</div>
      <div class="sub">0%</div></div>
    <div class="card stat"><div class="lbl">实质数量</div><div class="val num">${r.substance_count}</div><div class="sub">去重实质条目数</div></div>
    <div class="card stat"><div class="lbl">形式数量</div><div class="val num">${r.form_count}</div><div class="sub">去重形式条目数</div></div>
  </div>
  <div class="dash-section"><h2>过程数据</h2><div class="rule"></div><span class="tag">PROCESS</span></div>
  <div class="cards">
    <div class="card stat a"><div class="lbl">解构成本</div><div class="val num">$${p.total_cost}</div><div class="sub">单条均值 $${p.avg_cost} · 共 ${p.run_count} 次</div></div>
    <div class="card stat a"><div class="lbl">解构耗时</div><div class="val num">${(p.total_duration / 3600).toFixed(1)}<span style="font-size:14px">h</span></div><div class="sub">平均 ${p.avg_duration}s / 次</div></div>
    <div class="card stat t"><div class="ring-row"><div class="ring" style="--p:${pct(p.process_progress.done, p.process_progress.total)}"><div>${pct(p.process_progress.done, p.process_progress.total)}%</div></div>
      <div><div class="lbl">工序进度</div><div class="num" style="font-weight:700">${p.process_progress.done} / ${p.process_progress.total}</div><div class="sub">已解构 / 需解构</div></div></div></div>
    <div class="card stat t"><div class="ring-row"><div class="ring" style="--p:${pct(p.tools_progress.done, p.tools_progress.total)}"><div>${pct(p.tools_progress.done, p.tools_progress.total)}%</div></div>
      <div><div class="lbl">工具进度</div><div class="num" style="font-weight:700">${p.tools_progress.done} / ${p.tools_progress.total}</div><div class="sub">已解构 / 需解构</div></div></div></div>
  </div>
  <div class="charts">
    <div class="card chart-card span6"><h3>工序提及工具 TOP10</h3><div class="chart" id="ch-via" style="height:300px"></div></div>
    <div class="card chart-card span6"><h3>解构成本趋势</h3><div class="chart" id="ch-cost" style="height:300px"></div></div>
    <div class="card chart-card span6"><h3>实质覆盖分布 <span class="num">${r.substance_count}</span></h3><div class="chart" id="ch-sub" style="height:320px"></div></div>
    <div class="card chart-card span6"><h3>形式覆盖分布 <span class="num">${r.form_count}</span></h3><div class="chart" id="ch-form" style="height:320px"></div></div>
    <div class="card chart-card span12"><h3>内容树覆盖热力图 <span class="num">${r.matrix_covered}/${r.matrix_valid}</span><span style="font-weight:400;color:var(--ink-faint)">· 27 动作 × 50 类型</span></h3><div class="chart" id="ch-matrix" style="height:560px"></div></div>
  </div>`;
        chartRefs.forEach((c) => c.dispose());
        chartRefs = [];
        const mk = (id, opt) => {
          const c = echarts.init($(id));
          c.setOption(opt);
          chartRefs.push(c);
          return c;
        };
        const ink = "#1c2433",
          faint = "#9aa3b0",
          grid = { left: 8, right: 16, top: 8, bottom: 8, containLabel: true };
        /* 热力图 */
        mk("#ch-matrix", {
          tooltip: { formatter: (pr) => `${r.matrix_actions[pr.value[1]]} × ${r.matrix_types[pr.value[0]]}` },
          grid: { left: 8, right: 16, top: 8, bottom: 60, containLabel: true },
          xAxis: {
            type: "category",
            data: r.matrix_types,
            axisLabel: { rotate: 60, fontSize: 9, color: faint },
            splitArea: { show: true, areaStyle: { color: ["#fcfcf9", "#f5f4ef"] } },
          },
          yAxis: {
            type: "category",
            data: r.matrix_actions,
            axisLabel: { fontSize: 10, color: ink },
            splitArea: { show: true },
          },
          visualMap: { show: false, min: 0, max: 1, inRange: { color: ["#f0efe8", "#bb3a22"] } },
          series: [
            {
              type: "heatmap",
              data: r.matrix_cells.map(([a, t]) => [t, a, 1]),
              itemStyle: { borderColor: "#fff", borderWidth: 1 },
            },
          ],
        });
        const bar = (data, color) => ({
          tooltip: {},
          grid,
          xAxis: { type: "value", axisLabel: { color: faint } },
          yAxis: {
            type: "category",
            data: data.map((x) => x[0]).reverse(),
            axisLabel: { color: ink, fontSize: 11, width: 130, overflow: "truncate" },
          },
          series: [
            {
              type: "bar",
              data: data.map((x) => x[1]).reverse(),
              itemStyle: { color, borderRadius: [0, 3, 3, 0] },
              barMaxWidth: 16,
              label: { show: true, position: "right", color: faint, fontSize: 10 },
            },
          ],
        });
        mk("#ch-via", r.via_top10.length ? bar(r.via_top10, "#1e3a5f") : emptyOpt());
        mk("#ch-sub", r.substance_top.length ? bar(r.substance_top, "#b45309") : emptyOpt());
        mk("#ch-form", r.form_top.length ? bar(r.form_top, "#0f6b5c") : emptyOpt());
        mk(
          "#ch-cost",
          p.cost_trend.length
            ? {
                tooltip: { trigger: "axis" },
                grid,
                xAxis: { type: "category", data: p.cost_trend.map((x) => x.date), axisLabel: { color: faint } },
                yAxis: { type: "value", axisLabel: { color: faint, formatter: "${value}" } },
                series: [
                  {
                    type: "line",
                    data: p.cost_trend.map((x) => x.cost),
                    smooth: true,
                    symbolSize: 7,
                    lineStyle: { color: "#bb3a22", width: 2.5 },
                    itemStyle: { color: "#bb3a22" },
                    areaStyle: { color: "rgba(187,58,34,.08)" },
                  },
                ],
              }
            : emptyOpt(),
        );
        function emptyOpt() {
          return {
            title: {
              text: "暂无数据",
              left: "center",
              top: "middle",
              textStyle: { color: faint, fontSize: 12, fontWeight: 400 },
            },
            xAxis: { show: false },
            yAxis: { show: false },
          };
        }
      }

      /* ════ Dataset:query 列表 ════ */
      async function loadQueries() {
        /* 工序/工具各自一张搜索表,query 列表按当前子模式拉取 */
        try {
          /* 接口按 query_id 升序返回;列表倒序显示(最新在上) */
          state.queries = (await api("/api/queries?mode=" + state.mode)).reverse();
        } catch (e) {
          state.queries = [];
        }
        renderQueries();
        /* 进入/切换子模式时默认选中第一个(即最新)query(进而联动第一帖与解构结果) */
        if (!state.queryId && state.queries.length) await selectQuery(state.queries[0].query_id);
      }
      function renderQueries() {
        const list = state.queries;
        $("#q-count").textContent = list.length ? list.length + " 组" : "";
        if (!list.length) {
          $("#query-list").innerHTML = '<div class="empty">暂无 query<br>点右上「新建搜索」开始</div>';
          return;
        }
        $("#query-list").innerHTML = list
          .map((q) => {
            const done = state.mode === "process" ? q.process_done : q.tools_done;
            return `<div class="qitem ${q.query_id === state.queryId ? "on" : ""}" onclick="selectQuery('${q.query_id}')">
      <div class="qid">${q.query_id}</div>
      <div class="qt">${esc(q.query_text || "(未命名)")}</div>
      <div class="qm">
        <span>采纳/命中 <b class="num hit">${q.hit_count ?? 0}</b></span>
        <span>总帖数 <b class="num">${q.post_count}</b></span>
        <span>已解构 <b class="num">${done}</b></span>
      </div>
    </div>`;
          })
          .join("");
      }
      async function selectQuery(qid) {
        state.queryId = qid;
        state.caseId = null;
        state.post = null;
        state.platFilter = "all";
        state.selected.clear();
        renderQueries();
        renderExtractEmpty();
        $("#post-list").innerHTML = '<div class="empty">加载中…</div>';
        try {
          state.posts = await api("/api/posts?mode=" + state.mode + "&query_id=" + encodeURIComponent(qid));
        } catch (e) {
          state.posts = [];
        }
        renderPosts();
        /* 默认选中「可见列表」第一帖(已解构筛选下即第一个已解构帖),无可见帖则退回全部第一帖 */
        if (state.posts.length) {
          const vis = visiblePosts();
          await selectPost((vis[0] || state.posts[0]).case_id);
        }
      }

      /* ════ Dataset:帖子列表(按渠道分 tab)════ */
      function setPlatFilter(p) {
        state.platFilter = p;
        renderPosts();
      }
      function toggleDoneFilter() {
        state.doneFilter = !state.doneFilter;
        renderPosts();
        renderPostsAutoSelect();
      }
      /* 当前可见帖(渠道 + 已解构筛选后),供列表渲染与「默认选中」共用 */
      function visiblePosts() {
        const isDone = (p) => (state.mode === "process" ? p.has_process : p.has_tools);
        let list =
          state.platFilter === "all"
            ? state.posts
            : state.posts.filter((p) => (p.platform || "other") === state.platFilter);
        if (state.doneFilter) list = list.filter(isDone);
        return list;
      }
      /* 切换筛选后,若当前选中帖已被筛掉,则改选可见列表的第一帖 */
      async function renderPostsAutoSelect() {
        const vis = visiblePosts();
        if (vis.length && !vis.some((p) => p.case_id === state.caseId)) await selectPost(vis[0].case_id);
      }
      function renderPosts() {
        const all = state.posts;
        updateBatchBtn();
        /* 渠道 tab + 已解构筛选 */
        const counts = {};
        all.forEach((p) => {
          const k = p.platform || "other";
          counts[k] = (counts[k] || 0) + 1;
        });
        const plats = Object.keys(counts);
        if (state.platFilter !== "all" && !counts[state.platFilter]) state.platFilter = "all";
        const isDone = (p) => (state.mode === "process" ? p.has_process : p.has_tools);
        const platScoped =
          state.platFilter === "all" ? all : all.filter((p) => (p.platform || "other") === state.platFilter);
        const doneN = platScoped.filter(isDone).length;
        const tabs = $("#plat-tabs");
        if (all.length) {
          tabs.hidden = false;
          const btns =
            plats.length > 1
              ? [
                  `<button class="${state.platFilter === "all" ? "on" : ""}" onclick="setPlatFilter('all')">全部<span class="c">${all.length}</span></button>`,
                ].concat(
                  plats.map(
                    (k) =>
                      `<button class="${state.platFilter === k ? "on" : ""}" onclick="setPlatFilter('${esc(k)}')">${PLAT_NAME(k)}<span class="c">${counts[k]}</span></button>`,
                  ),
                )
              : [];
          btns.push(`<button class="done-filter ${state.doneFilter ? "on" : ""}" onclick="toggleDoneFilter()"
        title="${state.doneFilter ? "当前只看已解构,点击显示全部" : "点击只看已解构"}"><span class="dot">●</span>已解构<span class="c">${doneN}</span></button>`);
          tabs.innerHTML = btns.join("");
        } else {
          tabs.hidden = true;
        }

        const list = visiblePosts();
        $("#p-count").textContent = all.length
          ? state.platFilter === "all" && !state.doneFilter
            ? `${all.length} 帖`
            : `${list.length} / ${all.length} 帖`
          : "";
        if (!all.length) {
          $("#post-list").innerHTML = '<div class="empty">该 query 暂无帖子</div>';
          return;
        }
        if (!list.length) {
          $("#post-list").innerHTML =
            `<div class="empty">${state.doneFilter ? "该筛选下暂无已解构帖子" : "该渠道暂无帖子"}</div>`;
          return;
        }
        $("#post-list").innerHTML = list
          .map((p) => {
            const done = state.mode === "process" ? p.has_process : p.has_tools;
            const kt = (p.knowledge_type || []).map((k) => `<span class="pill">${esc(k)}</span>`).join("");
            const sb =
              p.overall_score != null
                ? `<span class="score-badge ${scoreCls(p.overall_score)} num"
              onclick="event.stopPropagation();openPostDetail('${esc(p.case_id)}')">${p.overall_score}</span>`
                : "";
            const thumbSrc = (p.images || []).filter(Boolean)[0];
            const thumb = thumbSrc
              ? imgHtml(thumbSrc, { cls: "thumb", ph: "<div class='thumb-ph'>🖼️</div>" })
              : `<div class="thumb-ph" title="暂无图片">🖼️</div>`;
            return `<div class="post ${p.case_id === state.caseId ? "on" : ""}" onclick="selectPost('${esc(p.case_id)}')">
      ${thumb}
      <div style="flex:1;min-width:0">
        <div class="pt">${esc(p.title || "(无标题)")}</div>
        <div class="pm">
          ${PLAT_LOGO(p.platform)}
          ${p.adopted ? '<span class="pill green">采纳</span>' : ""}
          ${kt}
          ${done ? '<span class="done-dot">● 已解构</span>' : ""}
        </div>
      </div>
      ${sb}
    </div>`;
          })
          .join("");
      }
      function toggleSel(cid, on) {
        on ? state.selected.add(cid) : state.selected.delete(cid);
        updateBatchBtn();
      }
      function updateBatchBtn() {
        const b = $("#btn-batch");
        b.disabled = !state.selected.size;
        b.textContent = state.selected.size ? `批量解构(${state.selected.size})` : "批量解构";
        // 解构全部(未解构/已采纳总数):未解构=已采纳但本方向未解构;A 灰 B 绿
        const adopted = (state.posts || []).filter((p) => p.adopted);
        const adoptedN = adopted.length;
        const doneKey = state.mode === "process" ? "has_process" : "has_tools";
        const undoneN = adopted.filter((p) => !p[doneKey]).length;
        const ea = $("#btn-extract-adopted");
        ea.hidden = !adoptedN;
        ea.innerHTML = `解构全部(<span class="cnt-rest">${undoneN}</span>/<span class="cnt-total">${adoptedN}</span>)`;
        // 归类全部(未归类/已采纳总数):仅工序方向 + 有已采纳已解构帖才显示;未归类=已采纳未归类
        const hasCatTarget = adopted.some((p) => p.has_process);
        const unCatN = adopted.filter((p) => !p.has_category).length;
        const ca = $("#btn-cat-adopted");
        ca.hidden = state.mode !== "process" || !hasCatTarget;
        ca.innerHTML = `归类全部(<span class="cnt-rest">${unCatN}</span>/<span class="cnt-total">${adoptedN}</span>)`;
      }
      $("#btn-batch").onclick = () => state.selected.size && startExtract([...state.selected]);
      $("#btn-extract-adopted").onclick = async () => {
        const adopted = (state.posts || []).filter((p) => p.adopted);
        const cids = adopted.map((p) => p.case_id);
        if (!cids.length) return toast("当前 query 下没有已采纳的帖子", "warn");
        const dir = state.mode === "process" ? "工序" : "工具";
        const doneKey = state.mode === "process" ? "has_process" : "has_tools";
        const undoneN = adopted.filter((p) => !p[doneKey]).length;
        const allDone = undoneN === 0;   // 已采纳帖全部已解构
        const msg = allDone
          ? `这 ${cids.length} 个已采纳帖都已${dir}解构。是否重新解构?\n重新解构会消耗 LLM、生成新版本并覆盖当前展示。`
          : `对该 query 下全部 ${cids.length} 个已采纳帖做${dir}解构(其中 ${undoneN} 个未解构)。\n已解构过的会自动跳过/复用,不重复花钱。`;
        if (!(await uiConfirm(msg))) return;
        // 全部已解构时,确认重做须 force(否则按 case 去重会全部跳过、白点一次)
        startExtract(cids, allDone ? { force: true } : {});
      };
      $("#btn-cat-adopted").onclick = async () => {
        // 只归类「已采纳且已解构」的帖(只有已解构才有 steps 可归类);has_category 来自 fetch_posts
        const adoptedProc = (state.posts || []).filter((p) => p.adopted && p.has_process);
        const cids = adoptedProc.map((p) => p.case_id);
        if (!cids.length) return toast("当前 query 下没有「已采纳且已解构」的帖子", "warn");
        const rest = adoptedProc.filter((p) => !p.has_category).map((p) => p.case_id);   // 未归类
        const catN = cids.length - rest.length;

        let action;   // "all"=归类全部(覆盖) / "rest"=只归类剩余 / null=取消
        if (rest.length === 0) {
          // 全部已归类:只能重新归类全部
          action = (await uiConfirm(`这 ${cids.length} 个帖的工序都已归类。是否重新归类?\n重新归类会用最新分类结果覆盖原有实质/形式 tag。`)) ? "all" : null;
        } else if (catN === 0) {
          // 都没归类:归类全部 = 归类剩余,两按钮即可
          action = (await uiConfirm(`对该 query 下 ${cids.length} 个已采纳且已解构的帖做工序归类?\n将把命中的分类回写进各工序的实质/形式。`)) ? "all" : null;
        } else {
          // 部分已归类:归类剩余(只处理未归类) / 归类全部(覆盖) / 取消
          action = await uiChoose(
            `该 query 下 ${cids.length} 个已采纳且已解构的帖,其中 ${catN} 个已归类、${rest.length} 个未归类。\n「归类剩余」只处理未归类的 ${rest.length} 个;「归类全部」会重跑并覆盖已归类的。`,
            [
              { key: "rest", text: `归类剩余(${rest.length})` },
              { key: "all", text: "归类全部(覆盖)", primary: true },
            ]);
        }
        if (!action) return;
        startCategorize(action === "rest" ? rest : cids);   // 归类即覆盖写,无需 force
      };

      /* ════ 帖子详情弹层 ════ */
      /* 得分可能是字符串("1")或数字(10),统一解析;非数值返回 null */
      const scoreNum = (v) => {
        const n = typeof v === "number" || (typeof v === "string" && v.trim() !== "") ? Number(v) : NaN;
        return Number.isFinite(n) ? n : null;
      };
      function collectScores(node) {
        let out = [];
        if (Array.isArray(node)) node.forEach((v) => (out = out.concat(collectScores(v))));
        else if (node && typeof node === "object") {
          for (const [k, v] of Object.entries(node)) {
            if (k === "得分") {
              const n = scoreNum(v);
              if (n !== null) out.push(n);
            } else out = out.concat(collectScores(v));
          }
        }
        return out;
      }
      function scRow(label, v, reason) {
        const n = scoreNum(v);
        const has = n !== null;
        return `<div class="sc-row">
    <span style="color:${has ? "inherit" : "var(--ink-faint)"}">${esc(label)}</span>
    <div class="meter"><span style="width:${has ? Math.min(n, 10) * 10 : 0}%"></span></div>
    <b class="num">${has ? n : "—"}</b>
    ${reason ? `<span class="info" data-label="${esc(label)}" data-reason="${esc(reason)}" data-score="${has ? n : ""}" onclick="showScorePop(this)">ⓘ</span>` : "<span></span>"}
  </div>`;
      }
      /* 递归渲染评分;depth>0 的分组标题用二级样式,形成层级 */
      function walkScores(node, depth) {
        depth = depth || 0;
        let html = "";
        for (const [k, v] of Object.entries(node || {})) {
          if (v && typeof v === "object" && !Array.isArray(v) && "得分" in v) {
            html += scRow(k, v["得分"], v["理由"]);
          } else if (scoreNum(v) !== null) {
            html += scRow(k, v);
          } else if (v && typeof v === "object" && !Array.isArray(v)) {
            const inner = walkScores(v, depth + 1);
            if (inner) html += `<div class="sc-sub${depth > 0 ? " lv2" : ""}">${esc(k)}</div>` + inner;
          }
        }
        return html;
      }

      /* ── 质量评分:不跟随原始 JSON 嵌套,改用 mode_procedure 的规范分组与顺序 ──
   固定维度 → 用例 → 工序 → 能力 → 工具;丢弃「字段完整性」「动态维度」等中间表头 */
      const QUALITY_ORDER = {
        工序: ["流程完整性", "输入完整性", "实现完整性", "输出完整性", "泛化性"],
        能力: ["输入完整性", "实现完整性", "输出完整性", "泛化性"],
        工具: ["能力边界覆盖", "有效比较", "参数/接口具体性", "实操示例", "版本&限制"],
      };
      /* DFS 找到名为 name 的容器节点(工序/能力/工具) */
      function findScoreNode(n, name) {
        if (!n || typeof n !== "object" || Array.isArray(n)) return null;
        if (name in n && n[name] && typeof n[name] === "object" && !Array.isArray(n[name])) return n[name];
        for (const v of Object.values(n)) {
          if (v && typeof v === "object" && !Array.isArray(v)) {
            const r = findScoreNode(v, name);
            if (r) return r;
          }
        }
        return null;
      }
      /* 递归收集子树叶子评分 [name,{得分,理由}],打平中间分组头 */
      function collectLeaves(node) {
        let out = [];
        for (const [k, v] of Object.entries(node || {})) {
          if (v && typeof v === "object" && !Array.isArray(v) && "得分" in v) out.push([k, v]);
          else if (scoreNum(v) !== null) out.push([k, { 得分: v }]);
          else if (v && typeof v === "object" && !Array.isArray(v)) out = out.concat(collectLeaves(v));
        }
        return out;
      }
      function renderQuality(qnode) {
        /* 固定维度/用例 的维度名全局唯一,扁平索引即可取 */
        const flat = {};
        (function collect(n) {
          for (const [k, v] of Object.entries(n || {})) {
            if (v && typeof v === "object" && !Array.isArray(v)) {
              if ("得分" in v) flat[k] = v;
              else collect(v);
            } else if (scoreNum(v) !== null) flat[k] = { 得分: v };
          }
        })(qnode);
        const sub = (t) => `<div class="sc-sub">${esc(t)}</div>`;
        const rows = (pairs) => pairs.map(([n, o]) => scRow(n, o["得分"], o["理由"])).join("");
        const pick = (names) => names.filter((n) => flat[n]).map((n) => [n, flat[n]]);

        let html = "";
        let p = pick(["时效性", "热度性", "评论反馈", "可复现性", "意图可控性"]); // ① 固定维度(置顶)
        if (p.length) html += sub("固定维度") + rows(p);
        p = pick(["真实感", "真实感 (非AI)", "真实感(非AI)", "表现力"]); // ② 用例
        if (p.length) html += sub("用例") + rows(p);
        for (const name of ["工序", "能力", "工具"]) {
          // ③ 动态维度(按方向命名,内部规范排序)
          const node = findScoreNode(qnode, name);
          if (!node) continue;
          const leaves = collectLeaves(node);
          if (!leaves.length) continue;
          const order = QUALITY_ORDER[name] || [];
          leaves.sort((a, b) => (order.indexOf(a[0]) + 1 || 99) - (order.indexOf(b[0]) + 1 || 99));
          html += sub(name) + rows(leaves);
        }
        return html || '<span style="color:var(--ink-faint)">无评分</span>';
      }

      /* ── 判定理由弹层:点击 ⓘ 浮现,符合当前页面样式 ── */
      let _scorePop = null;
      function closeScorePop() {
        if (_scorePop) {
          _scorePop.remove();
          _scorePop = null;
        }
        document.removeEventListener("mousedown", _scorePopOutside, true);
      }
      function _scorePopOutside(e) {
        if (_scorePop && !_scorePop.contains(e.target) && !e.target.classList.contains("info")) closeScorePop();
      }
      function showScorePop(el) {
        const reopen = _scorePop && _scorePop._anchor === el;
        closeScorePop();
        if (reopen) return; // 再次点击同一图标 → 收起
        const score = el.dataset.score;
        const pop = document.createElement("div");
        pop.className = "score-pop";
        pop._anchor = el;
        pop.innerHTML = `<div class="sp-head">
      <span class="sp-tag">判定理由</span>
      <span class="sp-name">${esc(el.dataset.label || "")}</span>
      ${score !== "" && score != null ? `<span class="sp-score">${esc(score)}</span>` : ""}
    </div>
    <div class="sp-body">${esc(el.dataset.reason || "")}</div>`;
        // 挂在 dialog 内,确保位于 showModal 顶层之上
        (document.getElementById("post-dialog") || document.body).appendChild(pop);
        _scorePop = pop;
        // 定位:图标下方右对齐;越界则上翻 / 收边
        const r = el.getBoundingClientRect();
        let top = r.bottom + 8,
          left = r.right - pop.offsetWidth;
        if (left < 12) left = 12;
        if (top + pop.offsetHeight > window.innerHeight - 12) top = r.top - pop.offsetHeight - 8;
        if (top < 12) top = 12;
        pop.style.top = top + "px";
        pop.style.left = left + "px";
        setTimeout(() => document.addEventListener("mousedown", _scorePopOutside, true), 0);
      }
      document.getElementById("post-dialog")?.addEventListener("close", closeScorePop);
      /* ── 图片预览灯箱 ── */
      const lb = { imgs: [], i: 0 };
      function openLightbox(i) {
        if (!lb.imgs.length) return;
        lb.i = (i + lb.imgs.length) % lb.imgs.length;
        renderLightbox();
        const d = $("#lightbox");
        if (!d.open) d.showModal();
      }
      function closeLightbox() {
        const d = $("#lightbox");
        if (d.open) d.close();
      }
      function lbStep(d) {
        if (!lb.imgs.length) return;
        lb.i = (lb.i + d + lb.imgs.length) % lb.imgs.length;
        renderLightbox();
      }
      function renderLightbox() {
        const url = lb.imgs[lb.i];
        const el = $("#lb-img");
        delete el.dataset.fb; // 切换图片前清除上一张的回退标记
        el.onerror = () => imgFallback(el, imgProxy(url));
        el.src = imgDirect(url); // 大图同样优先直连,失败回退代理
        $("#lb-count").textContent = `${lb.i + 1} / ${lb.imgs.length}`;
        const multi = lb.imgs.length > 1;
        document.querySelector(".lb-prev").style.visibility = multi ? "visible" : "hidden";
        document.querySelector(".lb-next").style.visibility = multi ? "visible" : "hidden";
      }
      document.addEventListener("keydown", (e) => {
        if (!$("#lightbox").open) return;
        if (e.key === "ArrowLeft") lbStep(-1);
        else if (e.key === "ArrowRight") lbStep(1);
        // Esc 由 <dialog> 原生处理(触发 close)
      });

      async function openPostDetail(cid) {
        const p = state.posts.find((x) => x.case_id === cid);
        if (!p) return;
        await ensurePostDetail(p);   // 列表瘦身,弹框前补全正文/评估
        const e = p.llm_evaluation || {};
        const meta = [];
        meta.push(`${PLAT_LOGO(p.platform)}<span style="font-weight:600">${esc(PLAT_NAME(p.platform))}</span>`);
        meta.push(p.adopted ? '<span class="pill green">采纳/命中</span>' : '<span class="pill">未采纳</span>');
        if (p.publish_time) meta.push(`<span>${esc(String(p.publish_time).slice(0, 16))}</span>`);
        if (p.like_count != null) meta.push(`<span>👍 ${p.like_count}</span>`);
        if (p.quality_grade) meta.push(`<span>质量 ${esc(p.quality_grade)} ${p.quality_score ?? ""}</span>`);
        if (p.url) meta.push(`<a href="${esc(p.url)}" target="_blank">原文 ↗</a>`);
        meta.push(`<span class="pill" title="case_id" style="font-family:'IBM Plex Mono',ui-monospace,monospace">${esc(p.case_id || cid)}</span>`);
        $("#pd-meta").innerHTML = meta.join("");
        $("#pd-title").textContent = p.title || "(无标题)";
        const verdict = e["判定理由"] || e["理由"] || "";
        $("#pd-verdict").innerHTML = verdict ? `<div class="pd-verdict">${esc(verdict)}</div>` : "";
        $("#pd-text").textContent = p.body || "(无正文)";
        const imgs = (p.images || []).filter(Boolean);
        $("#pd-images").innerHTML = imgs.length
          ? imgs
              .map(
                (s, i) => imgHtml(s, { extra: `onclick="openLightbox(${i})"` }),
              )
              .join("")
          : '<p style="color:var(--ink-faint);font-size:12px">搜索详情未返回图片。</p>';
        lb.imgs = imgs;
        // 视频预览:仅当 videos 有值时显示模块
        const vids = (p.videos || []).filter(Boolean);
        const showVids = vids.length > 0;
        $("#pd-videos-title").style.display = showVids ? "" : "none";
        const pdVideos = $("#pd-videos");
        pdVideos.style.display = showVids ? "" : "none";
        pdVideos.innerHTML = showVids
          ? vids
              .map((s) => {
                // YouTube 的 videos[0] 是 watch 页 URL,<video> 播不了 → 用 iframe embed
                const isYt = p.platform === "youtube" || /youtube\.com|youtu\.be/.test(s);
                if (isYt) {
                  const id = p.video_id || ytId(s);
                  return id
                    ? `<iframe src="https://www.youtube.com/embed/${esc(id)}" loading="lazy" allow="accelerometer; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>`
                    : `<a class="vid-fallback" href="${esc(s)}" target="_blank" rel="noopener">在 YouTube 打开视频 ↗</a>`;
                }
                // 其他平台(抖音等)走同源视频代理:补 Referer + Range 流式,失败兜底源站链接
                return `<video src="${esc(vidProxy(s))}" data-src="${esc(s)}" controls preload="metadata" playsinline onerror="vidFallback(this)"></video>`;
              })
              .join("")
          : "";
        $("#pd-tags").innerHTML = [
          ...(p.knowledge_type || []).map((t) => "类型:" + t),
          ...(p.found_by || []).map((q) => "命中:" + q),
        ]
          .map((t) => `<span class="pill">${esc(t)}</span>`)
          .join("");
        $("#pd-overall").innerHTML =
          p.overall_score != null
            ? `${p.overall_score}<span style="font-size:11px;color:var(--ink-faint);font-weight:500"> /10</span>`
            : "—";
        /* 评分卡:相关性 + 质量(均分 + 各维度,ⓘ hover 看理由) */
        $("#pd-scores").innerHTML =
          [
            ["01", "相关性"],
            ["02", "质量"],
          ]
            .map(([no, key], i) => {
              const node = e[key];
              if (!node) return "";
              const vs = collectScores(node);
              const avg = vs.length ? (vs.reduce((a, b) => a + b, 0) / vs.length).toFixed(1) : "N/A";
              return `<div class="sc-card">
      <div class="sc-card-head">
        <span><span class="badge">${no}</span>${esc(key)}</span>
        <span class="avg">均分 <b>${avg}</b>/10</span>
      </div>
      <div class="sc-card-body">${(key === "质量" ? renderQuality(node) : walkScores(node)) || '<span style="color:var(--ink-faint)">无评分</span>'}</div>
    </div>`;
            })
            .join("") || '<div class="empty">无评估数据</div>';
        $("#post-dialog").showModal();
      }

      /* ════ Dataset:右栏解构结果 ════ */
      function renderExtractEmpty() {
        $("#xp-head").innerHTML = '<span class="st">解构结果</span>';
        $("#xp-body").innerHTML = '<div class="empty"><span class="glyph">←</span>选择一个帖子查看解构结果</div>';
      }
      async function selectPost(cid) {
        state.caseId = cid;
        state.version = null;
        state.post = state.posts.find((p) => p.case_id === cid) || null;
        renderPosts();
        await ensurePostDetail(state.post);   // 列表瘦身,补全正文/评估再渲染右侧详情
        await loadExtract();
      }
      // 列表是瘦身数据(无 body/llm_evaluation/videos);详情按需取单帖并合并到对象上(合并后再点 0 往返)
      async function ensurePostDetail(p) {
        if (!p || p.body !== undefined) return p;
        try {
          const full = await api(`/api/post?mode=${state.mode}&query_id=`
            + encodeURIComponent(state.queryId) + "&case_id=" + encodeURIComponent(p.case_id));
          if (full) Object.assign(p, full);
        } catch (e) { /* 详情取不到不阻断,正文/评分留空 */ }
        return p;
      }

      /* ── 解构结果:客户端缓存 + 请求竞态守卫(解决「多次点击卡顿 / 残留上一帖」)──
         · _extractCache:解构数据只在「重新解构」时变(由本页 startExtract 触发,届时清缓存),
           故缓存可长留——再次点开看过的帖 0 往返、瞬时渲染。
         · _extractSeq:每次发起 +1;晚到的旧响应据 seq 丢弃,杜绝快速连点时旧响应覆盖新选中。 */
      const _extractCache = new Map(); // key: mode|case_id|version → {versions,data,missing}
      const _extractKey = (cid, ver) => `${state.mode}|${cid}|${ver || ""}`;
      let _extractSeq = 0;
      function invalidateExtractCache(cid) {
        for (const k of [..._extractCache.keys()]) if (k.includes(`|${cid}|`)) _extractCache.delete(k);
      }

      async function loadExtract() {
        if (!state.caseId) return renderExtractEmpty();
        const isProc = state.mode === "process";
        const seq = ++_extractSeq; // 本次请求序号
        const key = _extractKey(state.caseId, state.version);

        // 1) 命中缓存:瞬时渲染,0 往返
        const cached = _extractCache.get(key);
        if (cached) return paintExtract(cached, seq);

        // 2) 未命中:立即显示「原文 + loading」。关键:重写 #xp-body 会移除上一帖的 <img>,
        //    浏览器随即取消其 /api/img 下载,腾出每域 ~6 条连接额度,新的 /api/extract 不再
        //    排在旧图片请求后面等待——这是「多次点击要等很久」的根因。同时给出加载态,
        //    不再停留在上一帖的解构结果。
        renderExtractHead([], null, false, true);
        $("#xp-body").innerHTML =
          renderSourceBlock() +
          `<div class="empty"><span class="spinner"></span>正在加载${isProc ? "工序" : "工具"}解构…</div>`;

        // 版本列表 + 解构详情合一,一个请求拿全(服务端同连接两查,ETag 命中可走 304)
        const url =
          `/api/extract?mode=${state.mode}&case_id=` +
          encodeURIComponent(state.caseId) +
          (state.version ? "&version=" + encodeURIComponent(state.version) : "");
        let res;
        try {
          res = await api(url);
        } catch (e) {
          if (seq !== _extractSeq) return; // 已切到别的帖,丢弃本响应
          $("#xp-body").innerHTML = renderSourceBlock() + '<div class="empty">解构数据加载失败,请重试</div>';
          return;
        }
        if (seq !== _extractSeq) return; // 晚到的旧响应:不覆盖新选中
        const payload = { versions: res.versions || [], data: res.data, missing: res.missing || !res.data };
        _extractCache.set(key, payload);
        paintExtract(payload, seq);
      }

      function paintExtract({ versions, data, missing }, seq) {
        if (seq !== _extractSeq) return; // 渲染前再校验(缓存命中路径也经此)
        const isProc = state.mode === "process";
        renderExtractHead(versions, data, missing);
        const body = $("#xp-body");
        if (missing || !data) {
          body.innerHTML =
            renderSourceBlock() +
            `<div class="empty">该帖暂无${isProc ? "工序" : "工具"}解构<br><br>
      <button class="btn primary" onclick="startExtract(['${esc(state.caseId)}'])">开始解构</button></div>`;
          return;
        }
        state.version = data.version;
        // 以「具体 version」补一条缓存别名,版本下拉切回时也能命中
        _extractCache.set(_extractKey(state.caseId, data.version), { versions, data, missing });
        syncVersionSelect();
        body.innerHTML = isProc ? renderProcedures(data) : renderTools(data);
        requestAnimationFrame(markSrcTextClamp);
        if (isProc) requestAnimationFrame(markStepClamps);
        else requestAnimationFrame(markClampedCells);
      }
      function renderExtractHead(versions, data, missing, loading) {
        const isProc = state.mode === "process";
        const title = state.post ? esc(state.post.title || state.caseId) : esc(state.caseId || "");
        const opts = versions
          .map(
            (v, i) =>
              `<option value="${esc(v.version)}">${esc(v.version)}${i === 0 ? " (最新)" : ""} · ${v.n}${isProc ? "工序" : "工具"}</option>`,
          )
          .join("");
        const stat = loading ? "加载中…" : missing ? "未提取" : "已提取";
        $("#xp-head").innerHTML = `
    <span class="st">大模型${isProc ? "工序" : "工具"}:<em>${stat}</em></span>
    <span style="font-size:12px;color:var(--ink-faint);max-width:330px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap" title="${title}">${title}</span>
    <span class="spacer"></span>
    ${versions.length ? `<select id="ver-sel">${opts}</select>` : ""}
    <button class="btn sm primary" onclick="openReextractDialog()">${missing ? "提取" : "♻ 重新生成"}</button>
    ${isProc && !missing ? `<button class="btn sm" onclick="categorizeCurrent()" title="对本帖工序做分类归纳,把命中分类回写到实质/形式">🏷 归纳</button>` : ""}
    <button class="btn sm" onclick="showTaskPanel()" title="重新打开任务日志面板">📋 操作日志</button>`;
        const vs = $("#ver-sel");
        if (vs)
          vs.onchange = () => {
            state.version = vs.value;
            loadExtract();
          };
      }
      function syncVersionSelect() {
        const vs = $("#ver-sel");
        if (vs && state.version) vs.value = state.version;
      }

      /* ── 原文卡片:标题 + 图片缩略图(横滑、可灯箱预览)+ 正文(定高可展开),整体可收起 ── */
      let srcOpen = true,
        srcTextOpen = false;
      function renderSourceBlock() {
        const p = state.post;
        if (!p || !(p.title || (p.images || []).length || p.body)) return "";
        const imgs = (p.images || []).filter(Boolean);
        const thumbs = imgs.length
          ? `<div class="src-thumbs">${imgs
              .map(
                (s, i) =>
                  imgHtml(s, { extra: `onclick="openSrcLightbox(${i})"` }),
              )
              .join("")}</div>`
          : "";
        const body = p.body
          ? `<div class="src-text${srcTextOpen ? "" : " clamp"}" id="src-text">${esc(p.body)}</div>
        <button class="src-text-toggle" id="src-text-toggle" onclick="toggleSrcText()" hidden>${srcTextOpen ? "收起 ▲" : "展开 ▼"}</button>`
          : "";
        const link = p.url
          ? `<a class="src-link" href="${esc(p.url)}" target="_blank" rel="noreferrer" onclick="event.stopPropagation()">原文 ↗</a>`
          : "";
        return `<div class="src-block${srcOpen ? " open" : ""}" id="src-block">
      <div class="src-head" onclick="toggleSrc()">
        <span class="src-caret">▸</span>
        <span class="src-label">原文</span>
        <span class="src-title">${esc(p.title || "(无标题)")}</span>
        ${link}
        <span class="src-case" title="case_id" onclick="event.stopPropagation()">${esc(p.case_id || "")}</span>
      </div>
      <div class="src-body">${thumbs}${body}</div>
    </div>`;
      }
      function toggleSrc() {
        srcOpen = !srcOpen;
        const b = $("#src-block");
        if (b) b.classList.toggle("open", srcOpen);
        requestAnimationFrame(markSrcTextClamp);
      }
      function toggleSrcText() {
        srcTextOpen = !srcTextOpen;
        const t = $("#src-text"),
          btn = $("#src-text-toggle");
        if (t) t.classList.toggle("clamp", !srcTextOpen);
        if (btn) btn.textContent = srcTextOpen ? "收起 ▲" : "展开 ▼";
      }
      function openSrcLightbox(i) {
        lb.imgs = ((state.post && state.post.images) || []).filter(Boolean);
        openLightbox(i);
      }
      /* 仅当正文在定高下溢出时才显示「展开」按钮(需在可见、未展开态测量) */
      function markSrcTextClamp() {
        const t = $("#src-text"),
          btn = $("#src-text-toggle");
        if (!t || !btn) return;
        if (srcTextOpen) {
          btn.hidden = false;
          return;
        }
        btn.hidden = !(t.scrollHeight > t.clientHeight + 2);
      }

      /* ── 工序渲染 ── */
      function renderProcedures(data) {
        const src = data.source || {};
        return (
          renderSourceBlock() +
            (data.procedures || [])
              .map((p) => {
                const d = p.declarations || {};
                const ins =
                  (d.inputs || [])
                    .map(
                      (x) =>
                        `<span class="pill amber">${esc(x.type || "")}</span> ${x.name ? `<b>${esc(x.name)}</b>` : ""} ${x.desc ? `<span style="color:var(--ink-faint)">— ${esc(x.desc)}</span>` : ""}`,
                    )
                    .join("<br>") || '<span style="color:var(--ink-faint)">无</span>';
                const ret = d.returns
                  ? `<span class="pill teal">${esc(d.returns.type || "")}</span>`
                  : '<span style="color:var(--ink-faint)">无</span>';
                return `<div class="proc">
      <div class="proc-head">
        <div class="nm"><span class="pid">工序 ${esc(p.id || "")}</span>${esc(p.name || "")}</div>
        ${p.purpose ? `<div class="pp">#目的:${esc(p.purpose)}</div>` : ""}
        <div class="meta">
          ${p.category ? `<span class="pill red">类别:${esc(p.category)}</span>` : ""}
          ${src.platform ? `<span class="pill">#平台:${esc(src.platform)}</span>` : ""}
          ${src.author ? `<span class="pill">#作者:${esc(src.author)}</span>` : ""}
          <span class="pill">case:${esc(data.case_id)}</span>
          ${(p.tools_used || []).map((t) => `<span class="pill teal">${esc(t)}</span>`).join("")}
        </div>
      </div>
      <div class="decl">
        <div><div class="dl">输入</div><div class="di">${ins}</div></div>
        <div><div class="dl">返回</div><div class="di">${ret}</div></div>
      </div>
      ${renderSteps(p.steps || [])}
    </div>`;
              })
              .join("") || '<div class="empty">本版本无工序</div>'
        );
      }
      function renderSteps(steps) {
        if (!steps.length) return '<div class="empty">无步骤</div>';
        let rows = "";
        for (const s of steps) {
          const ins = s.inputs && s.inputs.length ? s.inputs : [null];
          const outs = s.outputs && s.outputs.length ? s.outputs : [null];
          const n = Math.max(ins.length, outs.length);
          for (let i = 0; i < n; i++) {
            rows += "<tr>";
            if (i === 0) {
              rows += `<td rowspan="${n}" class="sid">${esc(s.id || "")}</td>
          <td rowspan="${n}"><div class="intent-text">${renderIntent(s.intent || s.directive || "")}</div></td>
          <td rowspan="${n}">${s.effect ? `<span class="pill navy">${esc(s.effect)}</span>` : ""}</td>
          <td rowspan="${n}">${renderSF(s.substance, s.substanceMatch)}</td>
          <td rowspan="${n}">${renderSF(s.form, s.formMatch)}</td>`;
            }
            rows += ioCell(ins[i], "in");
            if (i === 0) {
              rows += `<td rowspan="${n}">${s.via ? `<span class="pill teal">${esc(s.via)}</span>` : ""}</td>
          <td rowspan="${n}" class="vtxt">${esc(s.action || "")}</td>`;
            }
            rows += ioCell(outs[i], "out");
            rows += "</tr>";
          }
        }
        return `<div style="overflow-x:auto"><table class="steps">
    <colgroup>
      <col style="width:44px"><col style="width:200px"><col style="width:92px">
      <col style="width:180px"><col style="width:168px">
      <col style="width:112px"><col style="width:330px"><col style="width:92px">
      <col style="width:118px"><col style="width:130px">
      <col style="width:112px"><col style="width:360px"><col style="width:110px">
    </colgroup>
    <thead>
      <tr><th class="h-req" colspan="5">需 求</th><th class="h-in" colspan="3">输 入</th><th class="h-im" colspan="2">实 现</th><th class="h-out" colspan="3">输 出</th></tr>
      <tr>
        <th class="h-req2">#</th><th class="h-req2">目的</th><th class="h-req2">作用</th><th class="h-req2">实质</th><th class="h-req2">形式</th>
        <th class="h-in2">类型</th><th class="h-in2">值</th><th class="h-in2">来源</th>
        <th class="h-im2">外部工具</th><th class="h-im2">动作</th>
        <th class="h-out2">类型</th><th class="h-out2">值</th><th class="h-out2">去处</th>
      </tr>
    </thead><tbody>${rows}</tbody></table></div>`;
      }
      function fmtSF(v) {
        return v == null ? "" : Array.isArray(v) ? v.join("、") : v;
      }
      const SF_ARROW =
        '<svg class="sf-arrow" viewBox="0 0 24 24" width="13" height="13" aria-hidden="true"><path d="M5 12h14M13 6l6 6-6 6" fill="none" stroke="currentColor" stroke-width="2.2" stroke-linecap="round" stroke-linejoin="round"/></svg>';
      const SF_NO_MATCH = "无"; // 后端未命中占位符(与 category_match.py NO_MATCH 一致)
      /* 原值拆分:与后端 _split_values 完全一致 —— 括号内的「、」不拆、去重保序,
         保证原值子项与 *Match 子项「等长等序」可按下标配对 */
      function _splitParts(raw) {
        if (raw == null) return [];
        if (Array.isArray(raw)) {
          const out = [],
            seen = new Set();
          for (const x of raw) {
            const p = String(x).trim();
            if (p && !seen.has(p)) {
              seen.add(p);
              out.push(p);
            }
          }
          return out;
        }
        const parts = [];
        let cur = "",
          depth = 0;
        for (const ch of String(raw)) {
          if (ch === "(" || ch === "（") {
            depth++;
            cur += ch;
          } else if (ch === ")" || ch === "）") {
            depth--;
            cur += ch;
          } else if (ch === "、" && depth === 0) {
            const p = cur.trim();
            if (p) parts.push(p);
            cur = "";
          } else {
            cur += ch;
          }
        }
        const last = cur.trim();
        if (last) parts.push(last);
        const out = [],
          seen = new Set();
        for (const p of parts)
          if (!seen.has(p)) {
            seen.add(p);
            out.push(p);
          }
        return out;
      }
      /* *Match 拆分:按下标对齐,**不去重不滤空**,保留「无」占位 */
      function _matchParts(v) {
        return v == null ? [] : String(v).split("、").map((x) => x.trim());
      }
      /* 实质/形式单元格:逐子项「原值 → 命中值」配对。
         命中 → 原值灰色划除 + 箭头 + 绿色命中值;
         未命中(占位「无」/缺失)→ 只显原值,黑色正常(无划除无箭头) */
      function renderSF(value, match) {
        const olds = _splitParts(value);
        const news = _matchParts(match);
        if (!news.length) return esc(fmtSF(value)); // 整格未归类 → 原值黑色
        const n = Math.max(olds.length, news.length);
        let rows = "";
        for (let i = 0; i < n; i++) {
          const a = olds[i],
            b = news[i];
          const matched = b != null && b !== "" && b !== SF_NO_MATCH;
          if (matched) {
            rows += `<div class="sf-pair">${
              a != null ? `<span class="sf-old">${esc(a)}</span>${SF_ARROW}` : ""
            }<span class="sf-new">${esc(b)}</span></div>`;
          } else if (a != null) {
            rows += `<div class="sf-pair"><span class="sf-plain">${esc(a)}</span></div>`;
          }
        }
        return `<div class="sf-map">${rows}</div>`;
      }
      function ioCell(x, kind) {
        const cls = kind === "in" ? "c-in" : "c-out";
        if (!x) return `<td class="${cls}"></td><td class="${cls}"></td><td class="${cls}"></td>`;
        const inf = x.inferred ? ` inf" title="推断理由:${esc(x.inferred_reason || "模型推断补全")}` : "";
        const badge = x.inferred ? '<span class="ib">推</span>' : "";
        return `<td class="${cls}"><span class="pill ${kind === "in" ? "amber" : "blue"}">${esc(x.type || "")}</span></td>
    <td class="${cls}${inf}">${badge}<div class="clamp-val" onclick="toggleClampVal(this)"><span class="vtxt">${esc(x.value || "")}</span></div></td>
    <td class="${cls}"><span class="anchor">${esc(x.anchor || "")}</span></td>`;
      }
      /* 点击「值」单元格展开/收起(仅在内容溢出、已标记 clampable 时生效) */
      function toggleClampVal(el) {
        if (!el.classList.contains("clampable") && !el.classList.contains("open")) return;
        el.classList.toggle("open");
      }
      /* 渲染后标记真正溢出 4 行的「值」单元格:先套限高再测量,溢出才保留 clampable */
      function markStepClamps() {
        document.querySelectorAll("#xp-body .steps .clamp-val").forEach((el) => {
          if (el.classList.contains("open")) return;
          el.classList.add("clampable");
          if (el.scrollHeight <= el.clientHeight + 2) el.classList.remove("clampable");
        });
      }

      /* ── 工具渲染(表格,移植自 fixed_query_eval renderToolTable)── */
      const DASH = '<span class="dash">—</span>';
      function _toolCell(v) {
        if (v === null || v === undefined || v === "" || (Array.isArray(v) && !v.length)) return DASH;
        if (Array.isArray(v)) return "<ul>" + v.map((x) => `<li>${esc(String(x))}</li>`).join("") + "</ul>";
        return esc(String(v));
      }
      function _scopeCell(v) {
        /* 作用域是 JSON 数组:按「、」拼接成短语,不出列表 */
        if (v === null || v === undefined || (Array.isArray(v) && !v.length) || v === "") return DASH;
        return esc(Array.isArray(v) ? v.join("、") : String(v));
      }
      function _ttCell(inner, clampable) {
        return clampable ? `<div class="tcell" onclick="this.classList.toggle('open')">${inner}</div>` : inner;
      }
      function _toolCellContent(c, t) {
        let inner,
          cls = "",
          clampable = true,
          style = "";
        if (c === "工具名称") {
          cls = "col-tool";
          clampable = false;
          inner = `🔧 ${esc(t[c] || "(未命名)")}`;
        } else if (c === "来源链接") {
          clampable = false;
          inner = t[c]
            ? `<a href="${esc(t[c])}" target="_blank" style="color:#176d64;font-weight:600;">🔗 打开</a>`
            : DASH;
        } else if (c === "创作层级") {
          clampable = false;
          inner = t[c]
            ? `<span class="layer-badge ${t[c] === "制作层" ? "make" : "create"}">${esc(t[c])}</span>`
            : DASH;
        } else if (c === "实质作用域" || c === "形式作用域") {
          inner = _scopeCell(t[c]);
        } else {
          inner = _toolCell(t[c]);
        }
        if (["输入", "输出", "用法", "缺点"].includes(c)) style = "max-width:240px;";
        else if (c === "实质作用域" || c === "形式作用域") style = "max-width:170px;";
        else if (!clampable) style = "white-space:nowrap;";
        return { inner, cls, clampable, style };
      }
      function _td(c, t, rowspan) {
        const { inner, cls, clampable, style } = _toolCellContent(c, t);
        const rs = rowspan > 1 ? ` rowspan="${rowspan}"` : "";
        return `<td class="${cls}" style="${style}"${rs}>${_ttCell(inner, clampable)}</td>`;
      }
      function _caseTd(cse, key) {
        const v = cse && cse[key] != null && cse[key] !== "" ? esc(String(cse[key])) : DASH;
        return `<td class="col-case" style="max-width:210px;">${_ttCell(v, true)}</td>`;
      }
      function renderTools(data) {
        const tools = data.tools || [];
        if (!tools.length) return renderSourceBlock() + '<div class="empty">本版本无工具</div>';
        /* 案例 group(输入/输出/效果)放在 用法 后、缺点 前;用 colspan/rowspan 做两层表头 */
        const before = ["工具名称", "创作层级", "实质作用域", "形式作用域", "输入", "输出", "用法"];
        const after = ["缺点", "来源链接", "最新更新时间"];
        const thead = `<thead>
    <tr>
      ${before.map((c) => `<th rowspan="2">${c}</th>`).join("")}
      <th colspan="3" class="th-group">案例</th>
      ${after.map((c) => `<th rowspan="2">${c}</th>`).join("")}
    </tr>
    <tr>${["输入", "输出", "效果"].map((c) => `<th class="th-sub">${c}</th>`).join("")}</tr>
  </thead>`;
        const rows = tools
          .map((t, ti) => {
            const cases = Array.isArray(t["案例"]) && t["案例"].length ? t["案例"] : [null];
            const K = cases.length;
            const par = ti % 2 ? "tr-b" : "tr-a";
            return cases
              .map((cse, i) => {
                const caseTds = `${_caseTd(cse, "输入")}${_caseTd(cse, "输出")}${_caseTd(cse, "效果")}`;
                if (i === 0) {
                  return `<tr class="${par}">${before.map((c) => _td(c, t, K)).join("")}${caseTds}${after.map((c) => _td(c, t, K)).join("")}</tr>`;
                }
                return `<tr class="${par}">${caseTds}</tr>`;
              })
              .join("");
          })
          .join("");
        return (
          renderSourceBlock() +
          `<div class="mw-ttwrap"><table class="mw-tt">${thead}<tbody>${rows}</tbody></table></div>`
        );
      }
      /* 渲染后标记真正溢出的单元格(才显示蒙版+可点击) */
      function markClampedCells() {
        document.querySelectorAll("#xp-body .mw-tt .tcell").forEach((el) => {
          if (!el.classList.contains("open") && el.scrollHeight > el.clientHeight + 2) el.classList.add("clamped");
          else if (el.scrollHeight <= el.clientHeight + 2) el.classList.remove("clamped");
        });
      }

      /* ════ 重新解构 · 编辑 Prompt 弹框 ════ */
      async function openReextractDialog() {
        if (!state.caseId) {
          toast("请先选择帖子", "info");
          return;
        }
        const isProc = state.mode === "process";
        const dlg = $("#reextract-dlg"),
          sel = $("#rx-model"),
          ta = $("#rx-prompt"),
          save = $("#rx-save");
        sel.innerHTML = (isProc ? MODELS_PROC : MODELS_TOOL)
          .map((m) => `<option>${m}</option>`)
          .join("");
        ta.value = "加载中…";
        ta.disabled = save.disabled = true;
        dlg.showModal();
        try {
          const r = await api(`/api/extract_prompt?mode=${state.mode}`);
          ta.value = r.prompt || "";
        } catch (e) {
          ta.value = "";
          toast("加载 Prompt 失败:" + (e.body?.error || e.status), "error");
        } finally {
          ta.disabled = save.disabled = false;
        }
      }
      async function saveReextract() {
        const cid = state.caseId;
        if (!cid) return;
        const model = $("#rx-model").value,
          prompt = $("#rx-prompt").value;
        $("#reextract-dlg").close();
        // 临时 prompt 覆盖 + force 重解构(仅本次生效,不改默认 Prompt)
        await startExtract([cid], { model, prompt, force: true });
      }

      /* ════ 解构任务 ════ */
      async function startExtract(caseIds, opts = {}) {
        if (!state.queryId || !caseIds.length) return;
        const isProc = state.mode === "process";
        const model = opts.model || (isProc ? MODELS_PROC[0] : MODELS_TOOL[0]);
        try {
          const body = { query_id: state.queryId, case_ids: caseIds, model };
          if (opts.prompt != null) body.prompt = opts.prompt; // 临时 prompt 覆盖(仅本次)
          if (opts.force) body.force = true; // 换 prompt/模型重解构需跳过去重
          const r = await api(`/api/extract_${isProc ? "process" : "tools"}`, {
            method: "POST",
            body: JSON.stringify(body),
          });
          // 全部正在解构中(被认领跳过):没有 task_id,提示一下即可,别去轮询空任务
          if (!r.task_id) {
            toast(r.note || "所选帖子正在解构中,已跳过", "info");
            return;
          }
          if ((r.skipped || []).length) toast(`${r.skipped.length} 帖正在解构中,已跳过`, "info");
          showTask(`${isProc ? "工序" : "工具"}解构 · ${caseIds.length} 帖`, r.task_id, async () => {
            state.selected.clear();
            caseIds.forEach(invalidateExtractCache); // 重新解构后数据已变,清这些帖的缓存
            await selectQuery(state.queryId);
            if (caseIds.includes(state.caseId)) {
              /* selectQuery 清了 caseId,恢复选中 */
            }
            if (caseIds.length === 1) {
              state.caseId = caseIds[0];
              state.version = null;
              renderPosts();
              await loadExtract();
            }
            // 需求3:工序解构完成 → 自动归类(工具方向无 substance/form,不归类)
            if (isProc) startCategorize(caseIds, { auto: true });
          });
        } catch (e) {
          toast("任务启动失败:" + (e.body?.error || e.status), "error");
        }
      }

      /* ════ 工序归类(category-match)════
         起 /api/categorize 子进程任务,完成后清缓存并刷新当前帖解构,实质/形式单元格出 tag。
         auto=true 为「工序解构完成后自动归类」,文案略不同。 */
      async function startCategorize(caseIds, opts = {}) {
        if (state.mode !== "process") return; // 仅工序方向有 substance/form 可归类
        if (!state.queryId || !caseIds.length) return;
        try {
          const r = await api("/api/categorize", {
            method: "POST",
            body: JSON.stringify({ query_id: state.queryId, case_ids: caseIds }),
          });
          if (!r.task_id) return toast(r.note || "无可归类帖", "info");
          showTask(`工序归类 · ${caseIds.length} 帖${opts.auto ? "(自动)" : ""}`, r.task_id, async () => {
            caseIds.forEach(invalidateExtractCache); // 归类改了 steps,清缓存才能拿到新 match
            // 乐观更新:归类成功的帖标记已归类,刷新「归类全部(未归类/已采纳)」计数
            const done = new Set(caseIds);
            (state.posts || []).forEach((p) => { if (done.has(p.case_id)) p.has_category = true; });
            updateBatchBtn();
            // 当前正看的帖在本批里 → 重载解构,实质/形式立即出 tag
            if (caseIds.includes(state.caseId)) {
              state.version = null;
              await loadExtract();
            }
            toast(opts.auto ? "解构完成,已自动归类" : "归类完成", "success");
          });
        } catch (e) {
          toast("归类启动失败:" + (e.body?.error || e.status), "error");
        }
      }
      function categorizeCurrent() {
        if (!state.caseId) return toast("请先选择帖子", "warn");
        startCategorize([state.caseId]);
      }

      /* ════ 任务面板(✕ 只隐藏;「操作日志」按钮可随时唤回)════ */
      let pollTimer = null,
        hasTask = false;
      // 自建确认弹框(替代浏览器原生 confirm):返回 Promise<bool>。Enter=确定 / Esc=取消 / 点遮罩=取消
      function uiConfirm(message, opt = {}) {
        const { okText = "确定", cancelText = "取消" } = opt;
        return new Promise((resolve) => {
          const bg = document.createElement("div");
          bg.className = "ui-confirm-bg";
          bg.innerHTML =
            '<div class="ui-confirm"><div class="ui-confirm-msg"></div>'
            + '<div class="ui-confirm-acts">'
            + '<button class="btn" data-act="cancel"></button>'
            + '<button class="btn seal" data-act="ok"></button></div></div>';
          bg.querySelector(".ui-confirm-msg").textContent = message;
          bg.querySelector('[data-act="cancel"]').textContent = cancelText;
          bg.querySelector('[data-act="ok"]').textContent = okText;
          document.body.appendChild(bg);
          const done = (v) => { bg.remove(); document.removeEventListener("keydown", onKey, true); resolve(v); };
          bg.addEventListener("click", (e) => {
            if (e.target === bg) return done(false);
            const a = e.target.closest("[data-act]");
            if (a) done(a.dataset.act === "ok");
          });
          const onKey = (e) => {
            if (e.key === "Escape") { e.preventDefault(); done(false); }
            else if (e.key === "Enter") { e.preventDefault(); done(true); }
          };
          document.addEventListener("keydown", onKey, true);
          bg.querySelector('[data-act="ok"]').focus();
        });
      }
      /* 多按钮选择弹框(uiConfirm 的多选版):buttons=[{key,text,primary?}]。
         点业务按钮返回其 key;取消/Esc/点遮罩返回 null;Enter=primary(或第一个)按钮。 */
      function uiChoose(message, buttons, opt = {}) {
        const { cancelText = "取消" } = opt;
        return new Promise((resolve) => {
          const bg = document.createElement("div");
          bg.className = "ui-confirm-bg";
          const btns = buttons
            .map((b) => `<button class="btn ${b.primary ? "seal" : ""}" data-key="${esc(b.key)}">${esc(b.text)}</button>`)
            .join("");
          bg.innerHTML =
            '<div class="ui-confirm"><div class="ui-confirm-msg"></div>'
            + '<div class="ui-confirm-acts">'
            + `<button class="btn" data-key="">${esc(cancelText)}</button>`
            + btns + "</div></div>";
          bg.querySelector(".ui-confirm-msg").textContent = message;
          document.body.appendChild(bg);
          const done = (v) => { bg.remove(); document.removeEventListener("keydown", onKey, true); resolve(v); };
          bg.addEventListener("click", (e) => {
            if (e.target === bg) return done(null);
            const a = e.target.closest("[data-key]");
            if (a) done(a.dataset.key || null);   // data-key="" → 取消 → null
          });
          const onKey = (e) => {
            if (e.key === "Escape") { e.preventDefault(); done(null); }
            else if (e.key === "Enter") {
              e.preventDefault();
              const p = buttons.find((b) => b.primary) || buttons[0];
              done(p ? p.key : null);
            }
          };
          document.addEventListener("keydown", onKey, true);
          (bg.querySelector(".ui-confirm-acts .seal") || bg.querySelector(".ui-confirm-acts .btn:last-child")).focus();
        });
      }
      function showTask(title, taskId, onDone, onSettled) {
        hasTask = true;
        $("#task-panel").hidden = false;
        $("#task-title").textContent = title;
        $("#task-dot").className = "dot";
        $("#task-log").textContent = "启动中…";
        clearTimeout(pollTimer);
        const poll = async () => {
          let t;
          try {
            t = await api("/api/task_status?task_id=" + encodeURIComponent(taskId));
          } catch (e) {
            $("#task-log").textContent = "状态查询失败";
            if (onSettled) onSettled("error");   // 轮询出错也算结束,让调用方恢复按钮等
            return;
          }
          const log = $("#task-log");
          log.textContent = t.log_tail || "(暂无日志)";
          log.scrollTop = log.scrollHeight;
          if (t.status === "running") {
            pollTimer = setTimeout(poll, 2000);
            return;
          }
          $("#task-dot").className = "dot " + t.status;
          $("#task-title").textContent = title + (t.status === "done" ? " · 完成" : " · 失败");
          if (t.status === "done" && onDone) onDone();
          if (onSettled) onSettled(t.status);    // done / failed 都触发
        };
        poll();
      }
      /* ✕ 只隐藏面板,轮询照跑(任务完成后回调依然触发) */
      function hideTask() {
        $("#task-panel").hidden = true;
      }
      function showTaskPanel() {
        if (!hasTask) return toast("本次会话还没有任务日志", "warn");
        $("#task-panel").hidden = false;
        const log = $("#task-log");
        log.scrollTop = log.scrollHeight;
      }

      /* ════ Query 规则组织器 ════ */
      // 扁平维度词表(移植自 query-builder.html DIMS);实质/形式 改为接口下钻,不在此。
      const QR_FLAT = [
        { id: "tool_type", label: "工具类型", items: ["AI", "桌面 APP", "云端 Web", "API·CLI", "插件扩展"] },
        { id: "modality", label: "模态", items: ["图片", "视频"] },
        { id: "suffix", label: "后缀", items: ["怎么做"] },
      ];
      const QR_TREE = [
        { id: "substance", label: "实质", source: "实质" },
        { id: "form", label: "形式", source: "形式" },
      ];
      const qrState = {
        flat: { tool_type: null, modality: null, suffix: null },
        treePath: { substance: [], form: [] },   // 实质/形式 选中 name 路径(仅作 Sonnet 上下文)
        treeData: { substance: null, form: null },
        axisPath: { action: [], type: [] },        // 动作/类型 筛选路径(l1/l2/叶子,来自 matrix,筛表显示)
        matrix: null,                              // /api/query_matrix
        scores: null,                              // 最近一次评分结果 cells
        threshold: 7,                              // 达标 = keep 且 综合分≥此值(可在弹层调)
        lastCost: null,
      };
      function qrChip(label, active, on, cls) {
        const b = document.createElement("button");
        b.className = "chip" + (cls ? " " + cls : "") + (active ? " on" : "");
        b.textContent = label;
        b.onclick = on;
        return b;
      }
      function qrRow(root, labtxt) {
        const row = document.createElement("div");
        row.className = "qr-row";
        row.innerHTML = `<span class="qr-lab">${labtxt}</span>`;
        const wrap = document.createElement("span");
        wrap.className = "qr-chips";
        row.appendChild(wrap);
        root.appendChild(row);
        return wrap;
      }
      // 动作/类型 三级(l1/l2/叶子)取自 matrix items 的 l1/l2/name
      function qrAxisLevelOptions(items, prefix) {
        if (prefix.length === 0) return [...new Set(items.map((x) => x.l1))];
        if (prefix.length === 1) return [...new Set(items.filter((x) => x.l1 === prefix[0]).map((x) => x.l2))];
        return items.filter((x) => x.l1 === prefix[0] && x.l2 === prefix[1]).map((x) => x.name);
      }
      function qrAxisMatch(item, path) {
        if (path[0] && item.l1 !== path[0]) return false;
        if (path[1] && item.l2 !== path[1]) return false;
        if (path[2] && item.name !== path[2]) return false;
        return true;
      }
      function renderQrDims() {
        const root = $("#qr-dims");
        root.innerHTML = "";
        // 扁平维度(工具类型/模态/后缀):拼词上下文
        QR_FLAT.forEach((d) => {
          const wrap = qrRow(root, `· ${d.label}`);
          wrap.appendChild(qrChip("无", qrState.flat[d.id] == null, () => { qrState.flat[d.id] = null; renderQrDims(); renderQrTable(); }));
          d.items.forEach((it) =>
            wrap.appendChild(qrChip(it, qrState.flat[d.id] === it, () => { qrState.flat[d.id] = it; renderQrDims(); renderQrTable(); })));
        });
        // 实质/形式 接口下钻:仅作 Sonnet 上下文,不拼词、不筛表
        QR_TREE.forEach((d) => {
          const path = qrState.treePath[d.id];
          let level = qrState.treeData[d.id] ? qrState.treeData[d.id].tree : [];
          for (let depth = 0; ; depth++) {
            const wrap = qrRow(root, depth === 0 ? `· ${d.label}` : "");
            wrap.appendChild(qrChip("无", path.length === depth, () => { qrState.treePath[d.id] = path.slice(0, depth); renderQrDims(); }));
            (level || []).forEach((node) =>
              wrap.appendChild(qrChip(node.name, path[depth] === node.name,
                () => { qrState.treePath[d.id] = [...path.slice(0, depth), node.name]; renderQrDims(); })));
            const sel = (level || []).find((n) => n.name === path[depth]);
            if (!sel || !(sel.children && sel.children.length)) break;
            level = sel.children;
          }
        });
        // 动作/类型 下钻(来自 matrix l1/l2):筛选表格显示
        if (qrState.matrix) {
          [{ id: "action", label: "动作", items: qrState.matrix.actions },
           { id: "type", label: "类型", items: qrState.matrix.types }].forEach((d) => {
            const path = qrState.axisPath[d.id];
            for (let depth = 0; depth <= 2; depth++) {
              const opts = qrAxisLevelOptions(d.items, path.slice(0, depth));
              if (!opts.length) break;
              const wrap = qrRow(root, depth === 0 ? `· ${d.label}` : "");
              wrap.appendChild(qrChip("无", path.length === depth,
                () => { qrState.axisPath[d.id] = path.slice(0, depth); renderQrDims(); renderQrTable(); }, "axis"));
              opts.forEach((name) =>
                wrap.appendChild(qrChip(name, path[depth] === name,
                  () => { qrState.axisPath[d.id] = [...path.slice(0, depth), name]; renderQrDims(); renderQrTable(); }, "axis")));
              if (path[depth] == null) break;   // 未选中本层 → 不展开下一层
            }
          });
        }
      }
      async function qrOpen() {
        qrClosePop();
        renderQrDims();
        // 并行拉矩阵 + 两棵分类树(接口挂则该维度降级:提示不可选)
        try { qrState.matrix = qrState.matrix || await api("/api/query_matrix"); }
        catch (e) { return toast("内容树矩阵加载失败", "error"); }
        for (const d of QR_TREE) {
          if (qrState.treeData[d.id]) continue;
          try { qrState.treeData[d.id] = await api("/api/category_tree?source_type=" + encodeURIComponent(d.source)); }
          catch (e) { toast(`${d.label} 接口不可达,该维度暂不可选`, "warn"); }
        }
        renderQrDims();
        renderQrTable();
      }

      // 单格 query = [工具类型] 动作叶 类型叶 [模态] [后缀](与后端 query_score._build_cells 一致)
      function qrCellQuery(action, type) {
        const f = qrState.flat;
        return [f.tool_type, action, type, f.modality, f.suffix].filter((x) => x && x !== "无").join(" ");
      }
      function renderQrTable() {
        const m = qrState.matrix;
        if (!m) return;
        const { actions, types, matrix } = m;
        const sc = qrState.scores;   // {"ai_ti":{keep,score,rewrite,...}}
        // 按 动作/类型 筛选路径过滤可见行列(保留原始索引 ai/ti 供评分键 ai_ti)
        const aIdx = actions.map((_, i) => i).filter((i) => qrAxisMatch(actions[i], qrState.axisPath.action));
        const tIdx = types.map((_, i) => i).filter((i) => qrAxisMatch(types[i], qrState.axisPath.type));
        let html = '<table class="qr-tab"><thead>';
        html += '<tr><th class="qr-corner" rowspan="2">类型 \\ 动作</th>';
        const groups = [];
        aIdx.forEach((ai) => {
          const l1 = actions[ai].l1;
          const last = groups[groups.length - 1];
          if (last && last.l1 === l1) last.span++;
          else groups.push({ l1, span: 1 });
        });
        groups.forEach((g) => { html += `<th colspan="${g.span}" class="qr-gh">${g.l1}</th>`; });
        html += "</tr><tr>";
        aIdx.forEach((ai) => { html += `<th class="qr-ah">${actions[ai].name}</th>`; });
        html += "</tr></thead><tbody>";
        let curL1 = null;
        tIdx.forEach((ti) => {
          const t = types[ti];
          if (t.l1 !== curL1) {
            curL1 = t.l1;
            html += `<tr><td class="qr-tl1" colspan="${aIdx.length + 1}">${t.l1}</td></tr>`;
          }
          html += `<tr><th class="qr-th">${t.name}</th>`;
          aIdx.forEach((ai) => {
            const tier = (matrix[ai][ti] || {}).tier || 0;
            const q = qrCellQuery(actions[ai].name, t.name);
            const v = sc ? sc[`${ai}_${ti}`] : null;
            const keep = qrKeep(v);
            const cls = `qr-c t${tier}` + (tier === 0 ? " dead" : "") + (keep ? " keep" : "");
            const badge = keep && v.score != null ? `<i class="qr-bd">${v.score}</i>` : "";
            html += `<td class="${cls}" data-ai="${ai}" data-ti="${ti}">${q}${badge}</td>`;
          });
          html += "</tr>";
        });
        html += "</tbody></table>";
        $("#qr-table-wrap").innerHTML = html;
      }
      function qrSelBody() {
        return {
          tool_type: qrState.flat.tool_type || "",
          modality: qrState.flat.modality || "",
          suffix: qrState.flat.suffix || "",
          substance_path: qrState.treePath.substance,
          form_path: qrState.treePath.form,
        };
      }
      async function qrLoadScores(sel) {
        const r = await api("/api/query_score?sel=" + encodeURIComponent(sel));
        if (r && r.pending) return false;
        qrState.scores = r.cells || {};
        qrState.lastCost = r.cost_usd;
        renderQrTable();
        qrRefreshKeep();
        return true;
      }
      // 达标 = Sonnet keep 且 综合分≥阈值;高亮/计数/搜全部达标 统一口径
      function qrKeep(v) { return !!(v && v.keep && v.score != null && v.score >= qrState.threshold); }
      function qrRefreshKeep() {
        if (!qrState.scores) return;
        const k = Object.values(qrState.scores).filter(qrKeep).length;
        $("#qr-hint").textContent = `达标(keep 且 ≥${qrState.threshold}):${k} 格`
          + (qrState.lastCost != null ? ` · 评分 $${qrState.lastCost}` : "");
        $("#qr-search-all").hidden = k === 0;
      }
      $("#qr-thr").addEventListener("input", () => {
        const x = parseFloat($("#qr-thr").value);
        qrState.threshold = isNaN(x) ? 0 : x;
        if (qrState.scores) { qrClosePop(); renderQrTable(); qrRefreshKeep(); }
      });
      $("#qr-score").onclick = async () => {
        const btn = $("#qr-score");
        if (btn.disabled) return;                 // 评分进行中:防重复点击(避免重复起任务/花钱)
        const orig = btn.textContent;
        btn.disabled = true; btn.textContent = "评估中…";
        const restore = () => { btn.disabled = false; btn.textContent = orig; };
        renderQrTable();                          // 先按当前 chips 刷新拼词
        $("#qr-hint").textContent = "提交评分…";
        let r;
        try { r = await api("/api/query_score", { method: "POST", body: JSON.stringify(qrSelBody()) }); }
        catch (e) { toast("评分启动失败:" + (e.body?.error || e.status), "error"); return restore(); }
        if (r.cached) { try { await qrLoadScores(r.sel); } finally { restore(); } return; }
        // 后台任务:完成→载入结果;成功/失败/查询出错 都恢复按钮(onSettled)
        showTask("Query 评分 · 643 格", r.task_id,
          async () => { await qrLoadScores(r.sel); },
          (status) => { if (status !== "done") toast("评分任务" + (status === "failed" ? "失败" : "状态异常") + ",可重试", "warn"); restore(); });
      };
      async function qrRunSearch(query, label) {
        const body = { query, platforms: "xhs,gzh", max_count: 20 };   // 用改写词搜索,方向无关
        if (label && label !== query) body.query_text = label;          // query 列表存原始组合词
        const r = await api("/api/run_search", { method: "POST", body: JSON.stringify(body) });
        return r;   // {task_id, query_id}
      }
      // 点高亮格 → 气泡显示评分/理由 + 发起搜索/复制(不再用浏览器原生 confirm)
      function qrClosePop() { $("#qr-pop").hidden = true; }
      function qrShowPop(td, v) {
        const pop = $("#qr-pop");
        const query = v.rewrite || v.query;
        const orig = v.rewrite && v.rewrite !== v.query ? `<div class="orig">原: ${v.query}</div>` : "";
        const tier = td.classList.contains("t3") ? 3 : td.classList.contains("t2") ? 2 : td.classList.contains("t1") ? 1 : 0;
        pop.innerHTML =
          `<div class="q">${query}</div>${orig}` +
          `<div class="sc"><b>${v.score ?? "?"}</b><span class="dim">综合分 = 人话 ${v.natural ?? "?"}×.4 + 可搜 ${v.findable ?? "?"}×.3 + 价值 ${v.useful ?? "?"}×.3</span></div>` +
          `<div class="dim" style="margin:0 0 7px">内容树 tier ${tier}(人工预判可检索度,仅参考,不计入综合分)</div>` +
          `<div class="rsn">${v.reason || "(无理由)"}</div>` +
          `<div class="acts"><button class="btn seal" id="qr-pop-go">发起搜索</button><button class="btn" id="qr-pop-copy">复制</button></div>`;
        pop.hidden = false;
        const r = td.getBoundingClientRect(), pw = 300, ph = pop.offsetHeight || 150;
        let left = r.left, top = r.bottom + 6;
        if (left + pw > window.innerWidth - 10) left = window.innerWidth - pw - 10;
        if (top + ph > window.innerHeight - 10) top = r.top - ph - 6;
        pop.style.left = Math.max(10, left) + "px";
        pop.style.top = Math.max(10, top) + "px";
        $("#qr-pop-go").onclick = async () => {
          qrClosePop();
          try { const rr = await qrRunSearch(query, v.query); showTask(`搜索 · ${rr.query_id} ${query}`, rr.task_id, null); }
          catch (err) { toast("搜索启动失败:" + (err.body?.error || err.status), "error"); }
        };
        $("#qr-pop-copy").onclick = () => { navigator.clipboard && navigator.clipboard.writeText(query); toast("已复制", "info", 1200); };
      }
      $("#qr-table-wrap").onclick = (e) => {
        const td = e.target.closest("td.qr-c.keep");
        if (!td) return;
        const v = qrState.scores && qrState.scores[`${td.dataset.ai}_${td.dataset.ti}`];
        if (v) qrShowPop(td, v);
      };
      // 点气泡外/表格空白处 关闭气泡
      $("#qr-modal").addEventListener("click", (e) => {
        if (!e.target.closest("#qr-pop") && !e.target.closest("td.qr-c.keep")) qrClosePop();
      });
      // 搜全部达标:逐格起任务(朴素循环,失败不阻断)
      // 批量进度面板:任务面板里列出每个搜索的实时状态(轮询各 task_id)
      function showQrBatch(items) {
        hasTask = true;
        $("#task-panel").hidden = false;
        $("#task-title").textContent = `搜全部达标 · ${items.length} 个`;
        $("#task-dot").className = "dot";
        clearTimeout(pollTimer);
        const st = {};
        const poll = async () => {
          await Promise.all(items.map(async (it) => {
            if (st[it.task_id] && st[it.task_id] !== "running") return;
            try { const t = await api("/api/task_status?task_id=" + encodeURIComponent(it.task_id)); st[it.task_id] = t.status; }
            catch (e) { st[it.task_id] = st[it.task_id] || "running"; }
          }));
          const done = items.filter((it) => st[it.task_id] && st[it.task_id] !== "running").length;
          $("#task-title").textContent = `搜全部达标 · ${done}/${items.length} 完成`;
          $("#task-log").textContent = items.map((it) => {
            const s = st[it.task_id] || "running";
            return `${s === "done" ? "✅" : s === "failed" ? "❌" : "⏳"} ${it.query_id}  ${it.query}`;
          }).join("\n");
          if (done < items.length) pollTimer = setTimeout(poll, 2000);
          else $("#task-dot").className = "dot done";
        };
        poll();
      }
      $("#qr-search-all").onclick = async () => {
        const keeps = Object.entries(qrState.scores || {}).filter(([, v]) => qrKeep(v));
        if (!keeps.length) return;
        if (!(await uiConfirm(`将对 ${keeps.length} 个达标 query 各起一次搜索(小红书+公众号 各20),确认?`))) return;
        qrClosePop();
        const items = [];
        for (const [, v] of keeps) {
          const q = v.rewrite || v.query;
          try { const r = await qrRunSearch(q, v.query); if (r.task_id) items.push({ query: q, query_id: r.query_id, task_id: r.task_id }); }
          catch (e) { /* 单格失败不阻断 */ }
        }
        if (!items.length) return toast("全部发起失败", "error");
        toast(`已发起 ${items.length}/${keeps.length} 个搜索`, "info");
        showQrBatch(items);
      };

      /* ════ 新建搜索 ════ */
      /* 渠道下拉多选(选项同 search_eval:小红书/知乎/公众号/抖音/视频号/YouTube) */
      const CHANNELS = [
        { key: "xhs", name: "小红书", on: true },
        { key: "zhihu", name: "知乎", on: true },
        { key: "gzh", name: "公众号" },
        { key: "douyin", name: "抖音" },
        { key: "sph", name: "视频号" },
        { key: "youtube", name: "YouTube" },
      ];
      $("#s-plat-panel").innerHTML = CHANNELS.map(
        (c) => `
  <label class="dd-opt ${c.on ? "sel" : ""}">
    <input type="checkbox" value="${c.key}" ${c.on ? "checked" : ""}>${c.name}
  </label>`,
      ).join("");
      function selectedPlatforms() {
        return [...document.querySelectorAll("#s-plat-panel input:checked")].map((x) => x.value);
      }
      function syncPlatBtn() {
        const names = [...document.querySelectorAll("#s-plat-panel input:checked")].map(
          (x) => CHANNELS.find((c) => c.key === x.value).name,
        );
        $("#s-plat-btn").innerHTML =
          `<span>${names.length ? esc(names.join("、")) : "选择渠道"}</span><span class="dd-arrow">▾</span>`;
      }
      $("#s-plat-btn").onclick = (e) => {
        e.stopPropagation();
        $("#s-plat-panel").hidden = !$("#s-plat-panel").hidden;
      };
      $("#s-plat-panel").onclick = (e) => e.stopPropagation();
      $("#s-plat-panel").addEventListener("change", (e) => {
        e.target.closest(".dd-opt").classList.toggle("sel", e.target.checked);
        syncPlatBtn();
      });
      document.addEventListener("click", () => {
        $("#s-plat-panel").hidden = true;
      });
      syncPlatBtn();
      $("#btn-new-search").onclick = () => {
        $("#s-mode").value = state.mode === "process" ? "工序" : "工具"; // 默认跟随当前子模式
        $("#search-modal").hidden = false;
        $("#s-query").focus();
      };
      $("#search-modal").onclick = (e) => {
        if (e.target === $("#search-modal")) $("#search-modal").hidden = true;
      };
      $("#s-go").onclick = async () => {
        const query = $("#s-query").value.trim();
        if (!query) return toast("请填写 query", "warn");
        const plats = selectedPlatforms();
        if (!plats.length) return toast("请至少选择一个检索渠道", "warn");
        const body = {
          query,
          synonyms: $("#s-syn").value.trim(),
          mode_type: $("#s-mode").value,
          platforms: plats.join(","),
          max_count: parseInt($("#s-max").value) || 10,
        };
        try {
          const r = await api("/api/run_search", { method: "POST", body: JSON.stringify(body) });
          $("#search-modal").hidden = true;
          showTask(`搜索 · ${r.query_id} ${query}`, r.task_id, async () => {
            /* 搜索结果落在 s-mode 对应的表,完成后切到对应子模式再选中 */
            const m = body.mode_type === "工具" ? "tools" : "process";
            if (state.mode !== m) {
              state.mode = m;
              $("#m-process").classList.toggle("on", m === "process");
              $("#m-tools").classList.toggle("on", m === "tools");
            }
            await loadQueries();
            selectQuery(r.query_id);
          });
        } catch (e) {
          toast("搜索启动失败:" + (e.body?.error || e.status), "error");
        }
      };

      /* ════ 工序/工具子模式 ════ */
      $("#m-process").onclick = () => setMode("process");
      $("#m-tools").onclick = () => setMode("tools");
      function setMode(m) {
        if (state.mode === m) return;
        state.mode = m;
        state.version = null;
        /* 工序/工具是两张独立搜索表,切换时整体重置三栏 */
        state.queryId = null;
        state.caseId = null;
        state.post = null;
        state.posts = [];
        state.selected.clear();
        state.platFilter = "all";
        $("#m-process").classList.toggle("on", m === "process");
        $("#m-tools").classList.toggle("on", m === "tools");
        $("#plat-tabs").hidden = true;
        $("#p-count").textContent = "";
        $("#post-list").innerHTML = '<div class="empty"><span class="glyph">←</span>先选择左侧 query</div>';
        renderExtractEmpty();
        loadQueries();
      }

      $("#btn-query-rule").onclick = () => { $("#qr-modal").hidden = false; qrOpen(); };
      $("#qr-close").onclick = () => { $("#qr-modal").hidden = true; };
      $("#qr-modal").onclick = (e) => { if (e.target === $("#qr-modal")) $("#qr-modal").hidden = true; };

      window.addEventListener("resize", () => chartRefs.forEach((c) => c.resize()));
      route();
    </script>
  </body>
</html>