howard
/
Agent


			
							123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554555556557558559560561562563564565566567568569570571572573574575576577578579580581582583584585586587588589590591592593594595596597598599600601602603604605606607608609610611612613614615616617618619620621622623624625626627628629630631632633634635636637638639640641642643644645646647648649650651652653654655656657658659660661662663664665666667668669670671672673674675676677678679680681682683684685686687688689690691692693694695696697698699700701702703704705706707708709710711712713714715716717718719720721722723724725726727728729730731732733734735736737738739740741742743744745746747748749750751752753754755756757758759760761762763764765766767768769770771772773774775776777778779780781782783784785786787788789790791792793794795796797798799800801802803804805806807808809810811812813814815816817818819820821822823824825826827828829830831832833834835836837838839840841842843844845846847848849850851852853854855856857858859860861862863864865866867868869870871872873874875876877878879880881882883884885886887888889890891892893894895896897898899900901902903904905906907908909910911912913914915916917918919920921922923924925926927928929930931932933934935936937938939940941942943944945946947948949950951952953954955956957958959960961962963964965966967968969970971972973974975976977978979980981982983984985986987988989990991992993994995996997998999100010011002100310041005100610071008100910101011101210131014101510161017101810191020102110221023102410251026102710281029103010311032103310341035103610371038103910401041104210431044104510461047104810491050105110521053105410551056105710581059106010611062106310641065106610671068106910701071107210731074107510761077107810791080108110821083108410851086108710881089109010911092109310941095109610971098109911001101110211031104110511061107110811091110111111121113111411151116111711181119112011211122112311241125112611271128112911301131113211331134113511361137113811391140114111421143114411451146114711481149115011511152115311541155115611571158115911601161116211631164116511661167116811691170117111721173117411751176117711781179118011811182118311841185118611871188118911901191119211931194119511961197119811991200120112021203120412051206120712081209121012111212121312141215121612171218121912201221122212231224122512261227122812291230123112321233123412351236123712381239124012411242124312441245124612471248124912501251125212531254125512561257125812591260126112621263126412651266126712681269127012711272127312741275127612771278127912801281128212831284128512861287128812891290129112921293129412951296129712981299130013011302130313041305130613071308130913101311131213131314131513161317131813191320132113221323132413251326132713281329133013311332133313341335133613371338133913401341134213431344134513461347134813491350135113521353135413551356135713581359136013611362136313641365136613671368136913701371137213731374137513761377137813791380138113821383138413851386138713881389139013911392139313941395139613971398139914001401140214031404140514061407140814091410141114121413141414151416141714181419142014211422142314241425142614271428142914301431143214331434143514361437143814391440144114421443144414451446144714481449145014511452145314541455145614571458145914601461146214631464146514661467146814691470147114721473147414751476147714781479148014811482148314841485148614871488148914901491149214931494149514961497149814991500150115021503150415051506150715081509151015111512151315141515151615171518151915201521152215231524152515261527152815291530153115321533153415351536153715381539154015411542154315441545154615471548154915501551155215531554155515561557155815591560156115621563156415651566156715681569157015711572157315741575157615771578157915801581158215831584158515861587158815891590159115921593159415951596159715981599160016011602160316041605160616071608160916101611161216131614161516161617161816191620162116221623162416251626162716281629163016311632163316341635163616371638163916401641164216431644164516461647164816491650165116521653165416551656165716581659166016611662166316641665166616671668166916701671167216731674167516761677167816791680168116821683168416851686168716881689169016911692169316941695169616971698169917001701170217031704170517061707170817091710171117121713171417151716171717181719172017211722172317241725172617271728172917301731173217331734173517361737173817391740174117421743174417451746174717481749175017511752175317541755175617571758175917601761176217631764176517661767176817691770177117721773177417751776177717781779178017811782178317841785178617871788178917901791179217931794179517961797179817991800180118021803180418051806180718081809181018111812181318141815181618171818181918201821182218231824182518261827182818291830183118321833183418351836183718381839184018411842184318441845184618471848184918501851
							<!doctype html>
<html lang="zh">
  <head>
    <meta charset="utf-8" />
    <title>工序五层筛选</title>
    <style>
      :root {
        --bg: #f8fafc;
        --panel: #ffffff;
        --panel2: #f1f5f9;
        --border: #e2e8f0;
        --fg: #0f172a;
        --muted: #64748b;
        --accent: #3b82f6;
        --accent2: #8b5cf6;
        --tag-bg: #e2e8f0;
        --tag-bg-active: #3b82f6;
        --tag-fg-active: #fff;
        --code: #f1f5f9;
        --warn: #eab308;
        --suggest: #8b5cf6;
        --inferred: #94a3b8;
      }
      * {
        box-sizing: border-box;
      }
      html,
      body {
        margin: 0;
        height: 100%;
        background: var(--bg);
        color: var(--fg);
        font:
          13px/1.55 -apple-system,
          BlinkMacSystemFont,
          "PingFang SC",
          "Helvetica Neue",
          sans-serif;
      }
      header {
        display: flex;
        align-items: center;
        gap: 12px;
        padding: 8px 14px;
        border-bottom: 1px solid var(--border);
        background: var(--panel);
        position: sticky;
        top: 0;
        z-index: 5;
        flex-wrap: wrap;
      }
      h1 {
        font-size: 14px;
        margin: 0;
        font-weight: 600;
      }
      .stats {
        color: var(--muted);
        font-size: 11px;
      }
      .clear-all {
        margin-left: auto;
        font-size: 11px;
        color: var(--muted);
        cursor: pointer;
        padding: 4px 10px;
        border: 1px solid var(--border);
        border-radius: 4px;
        background: transparent;
      }
      .clear-all:hover {
        color: var(--fg);
        border-color: var(--accent);
      }
      .clear-all.active {
        color: var(--warn);
        border-color: var(--warn);
      }
      .exit-fs {
        margin-left: auto;
        font-size: 11px;
        color: var(--muted);
        cursor: pointer;
        padding: 4px 10px;
        border: 1px solid var(--border);
        border-radius: 4px;
        background: transparent;
        display: none;
      }
      .exit-fs:hover {
        color: var(--fg);
        border-color: var(--accent);
      }

      main {
        display: grid;
        grid-template-columns: 160px 360px 220px 320px 1fr;
        height: 100vh;
        min-width: 1480px;
        background: var(--bg);
      }
      section {
        overflow: auto;
        border-right: 1px solid var(--border);
        padding: 8px 10px;
      }
      section:last-child {
        border-right: none;
      }
      section.fac1 {
        background: var(--panel);
      }
      section.fac2 {
        background: #f8fafc;
      }
      section.fac3 {
        background: var(--panel);
      }
      section.fac4 {
        background: #f4f4f5;
      }
      section.detail {
        background: var(--panel);
      }

      .col-title {
        font-size: 10px;
        text-transform: uppercase;
        letter-spacing: 0.6px;
        color: var(--muted);
        margin: 2px 4px 8px;
        display: flex;
        justify-content: space-between;
        align-items: baseline;
      }
      .col-count {
        font-size: 10px;
        color: var(--muted);
      }
      .col-clear {
        font-size: 10px;
        color: var(--accent);
        cursor: pointer;
        display: none;
      }
      .col-clear.show {
        display: inline;
      }

      .item {
        padding: 6px 8px;
        border-radius: 5px;
        cursor: pointer;
        margin-bottom: 3px;
        border: 1px solid transparent;
        display: flex;
        justify-content: space-between;
        align-items: center;
        gap: 6px;
      }
      .item:hover:not(.disabled):not(.active) {
        background: var(--panel2);
      }
      .item.active {
        background: var(--tag-bg-active);
        color: var(--tag-fg-active);
        border-color: var(--tag-bg-active);
      }
      .item.disabled {
        opacity: 0.32;
        cursor: not-allowed;
      }
      .item-name {
        flex: 1;
        min-width: 0;
        font-size: 12px;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
      }
      .item-count {
        font-size: 10px;
        background: var(--bg);
        padding: 1px 5px;
        border-radius: 8px;
        color: var(--muted);
        min-width: 20px;
        text-align: center;
        flex-shrink: 0;
      }
      .item.active .item-count {
        background: rgba(0, 0, 0, 0.3);
        color: #fff;
      }
      .item-def {
        display: block;
        font-size: 10px;
        color: var(--muted);
        margin-top: 2px;
        line-height: 1.4;
      }
      .item.active .item-def {
        color: rgba(255, 255, 255, 0.85);
      }
      .item-stack {
        flex: 1;
        min-width: 0;
      }

      /* col-2 tabs */
      .scope-tabs {
        display: flex;
        gap: 4px;
        margin: 0 0 8px;
        border-bottom: 1px solid var(--border);
        padding-bottom: 5px;
      }
      .scope-tab {
        padding: 4px 10px;
        border-radius: 5px 5px 0 0;
        cursor: pointer;
        font-size: 12px;
        color: var(--muted);
        background: transparent;
        border: 1px solid transparent;
        border-bottom: none;
        user-select: none;
      }
      .scope-tab.active {
        color: var(--fg);
        background: var(--panel2);
        border-color: var(--border);
      }
      .scope-tab:hover:not(.active) {
        color: var(--fg);
      }
      .scope-pane {
        display: none;
      }
      .scope-pane.active {
        display: block;
      }
      .scope-meta {
        font-size: 10px;
        color: var(--muted);
        margin: 0 4px 8px;
        line-height: 1.4;
      }

      /* facets */
      .facet-title {
        margin-top: 10px;
        padding: 4px 6px;
        font-size: 11px;
        color: var(--muted);
        font-weight: 600;
        border-bottom: 1px solid var(--border);
        text-transform: uppercase;
        letter-spacing: 0.5px;
      }
      .facet-title:first-child {
        margin-top: 0;
      }

      /* itemsets (pattern tab) */
      .iset {
        padding: 8px 10px;
        border-radius: 5px;
        cursor: pointer;
        margin-bottom: 5px;
        border: 1px solid var(--border);
        background: var(--panel2);
      }
      .iset:hover:not(.disabled):not(.active) {
        border-color: var(--accent);
      }
      .iset.active {
        border-color: var(--accent);
        background: #eff6ff;
        box-shadow: 0 0 0 1px var(--accent) inset;
      }
      .iset.disabled {
        opacity: 0.32;
        cursor: not-allowed;
      }
      .iset-head {
        display: flex;
        align-items: center;
        gap: 6px;
        margin-bottom: 5px;
      }
      .iset-sup {
        background: var(--accent);
        color: #fff;
        padding: 1px 7px;
        border-radius: 3px;
        font-weight: 700;
        font-size: 11px;
      }
      .iset-k {
        background: var(--tag-bg);
        color: var(--fg);
        padding: 1px 6px;
        border-radius: 3px;
        font-size: 10px;
        letter-spacing: 0.3px;
      }
      .iset-meta {
        font-size: 10px;
        color: var(--muted);
        margin-left: auto;
      }
      .iset-paths {
        display: flex;
        flex-direction: column;
        gap: 3px;
      }
      .iset-path {
        display: flex;
        gap: 5px;
        font-size: 11px;
        line-height: 1.4;
        align-items: flex-start;
      }
      .iset-fdot {
        width: 18px;
        flex-shrink: 0;
        font-size: 9px;
        font-weight: 700;
        text-align: center;
        border-radius: 3px;
        line-height: 16px;
        height: 16px;
        letter-spacing: 0;
        margin-top: 1px;
      }
      .iset-fdot.shi {
        background: #dbeafe;
        color: #1d4ed8;
      }
      .iset-fdot.xing {
        background: #f3e8ff;
        color: #7e22ce;
      }
      .iset-fdot.both {
        background: #fef9c3;
        color: #a16207;
      }
      .iset-leaf {
        font-weight: 600;
        color: var(--fg);
        word-break: break-all;
      }
      .iset-parent {
        color: var(--muted);
        font-size: 10px;
        margin-top: 1px;
        word-break: break-all;
        line-height: 1.3;
        font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
      }

      /* tree */
      .tnode {
        margin-left: 0;
      }
      .tnode .tnode {
        margin-left: 12px;
        border-left: 1px dashed var(--border);
        padding-left: 6px;
      }
      .tline {
        display: flex;
        align-items: center;
        gap: 4px;
        padding: 3px 4px;
        border-radius: 4px;
        cursor: pointer;
        font-size: 12px;
        line-height: 1.35;
      }
      .tline:hover:not(.disabled):not(.active) {
        background: var(--panel2);
      }
      .tline.active {
        background: var(--tag-bg-active);
        color: var(--tag-fg-active);
      }
      .tline.disabled {
        opacity: 0.32;
        cursor: not-allowed;
      }
      .tline.suggested .tname {
        color: var(--suggest);
        font-style: italic;
      }
      .tline.suggested.active .tname {
        color: #fff;
      }
      .tline.inferred .tname {
        color: var(--inferred);
        font-style: italic;
      }
      .tline.inferred.active .tname {
        color: #fff;
      }
      .tcaret {
        width: 12px;
        display: inline-block;
        text-align: center;
        color: var(--muted);
        cursor: pointer;
        user-select: none;
        flex-shrink: 0;
        font-size: 10px;
      }
      .tcaret.invis {
        visibility: hidden;
      }
      .tname {
        flex: 1;
        min-width: 0;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
      }
      .tcount {
        font-size: 10px;
        color: var(--muted);
        background: var(--bg);
        padding: 1px 5px;
        border-radius: 8px;
        flex-shrink: 0;
      }
      .tline.active .tcount {
        background: rgba(0, 0, 0, 0.3);
        color: #fff;
      }
      .tcollapsed > .tnode {
        display: none;
      }

      /* fragments list */
      .frag {
        padding: 7px 9px;
        border-radius: 5px;
        cursor: pointer;
        margin-bottom: 4px;
        border: 1px solid var(--border);
        background: var(--panel);
      }
      .frag:hover {
        background: var(--panel2);
      }
      .frag.active {
        border-color: var(--accent);
        background: var(--panel2);
      }
      .frag-head {
        font-size: 10px;
        color: var(--muted);
        margin-bottom: 3px;
        display: flex;
        gap: 6px;
        align-items: center;
      }
      .case-badge {
        background: var(--accent);
        color: #fff;
        padding: 1px 5px;
        border-radius: 3px;
        font-weight: 600;
        font-size: 10px;
      }
      .frag-badge {
        background: var(--accent2);
        color: #fff;
        padding: 1px 5px;
        border-radius: 3px;
        font-weight: 600;
        font-size: 10px;
      }
      .act-badge {
        background: var(--warn);
        color: #000;
        padding: 1px 5px;
        border-radius: 3px;
        font-weight: 600;
        font-size: 10px;
      }
      .frag-sig {
        font-size: 11px;
        color: var(--muted);
        margin-top: 2px;
        font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
      }
      .frag-body {
        font-size: 12px;
        color: #334155;
        margin-top: 4px;
        line-height: 1.45;
        display: -webkit-box;
        -webkit-line-clamp: 2;
        -webkit-box-orient: vertical;
        overflow: hidden;
      }

      /* detail */
      .detail-empty {
        color: var(--muted);
        text-align: center;
        padding: 60px 20px;
        font-size: 13px;
      }
      .detail h2 {
        font-size: 14px;
        margin: 0 0 8px;
        display: flex;
        gap: 8px;
        align-items: center;
        flex-wrap: wrap;
      }
      .case-title {
        font-size: 12px;
        color: var(--accent);
        margin: 6px 0;
        line-height: 1.5;
      }
      .case-title a {
        color: var(--accent);
        text-decoration: none;
      }
      .case-title a:hover {
        text-decoration: underline;
      }
      .detail-section {
        margin: 12px 0;
      }
      .detail-section h3 {
        font-size: 10px;
        color: var(--muted);
        text-transform: uppercase;
        letter-spacing: 0.6px;
        margin: 0 0 6px;
        font-weight: 600;
      }
      .body-text {
        font-size: 12px;
        line-height: 1.6;
        color: #334155;
        background: var(--code);
        padding: 8px 10px;
        border-radius: 5px;
        white-space: pre-wrap;
      }
      .effect-card {
        background: var(--code);
        border-radius: 5px;
        padding: 7px 9px;
        margin-bottom: 5px;
        border-left: 3px solid var(--accent2);
        font-size: 12px;
      }
      .effect-stmt {
        font-weight: 600;
        margin-bottom: 4px;
      }
      .effect-meta {
        color: var(--muted);
        font-size: 11px;
        margin-top: 3px;
      }
      .pill {
        display: inline-block;
        padding: 1px 6px;
        background: var(--tag-bg);
        border-radius: 8px;
        font-size: 11px;
        margin-right: 3px;
        margin-bottom: 3px;
      }
      .pill.in {
        background: #dbeafe;
        color: #1e3a8a;
      }
      .pill.out {
        background: #f3e8ff;
        color: #581c87;
      }
      .pill.cfg {
        background: #fef9c3;
        color: #854d0e;
      }
      .io-row {
        margin-bottom: 4px;
        font-size: 11px;
      }
      .io-row .lbl {
        color: var(--muted);
        font-size: 10px;
        margin-right: 6px;
        text-transform: uppercase;
      }
      .pathline {
        font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
        font-size: 11px;
        color: var(--accent);
        margin-bottom: 2px;
        word-break: break-all;
      }
      .pathline.suggest {
        color: var(--suggest);
      }
      .rationale {
        color: var(--muted);
        font-size: 11px;
        margin-bottom: 6px;
        margin-left: 4px;
        line-height: 1.45;
      }
      .json-raw {
        font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
        font-size: 10px;
        background: var(--code);
        padding: 8px;
        border-radius: 5px;
        white-space: pre-wrap;
        color: var(--fg);
        max-height: 240px;
        overflow: auto;
      }
      details summary {
        cursor: pointer;
        color: var(--muted);
        font-size: 10px;
        margin: 6px 0;
        user-select: none;
      }
      details summary:hover {
        color: var(--fg);
      }

      .empty-msg {
        color: var(--muted);
        text-align: center;
        padding: 30px 10px;
        font-size: 11px;
        font-style: italic;
      }

      /* modality side filter (column 3 internal) */
      .mod-filter {
        margin: 0 4px 8px;
        padding: 6px 6px 4px;
        background: var(--code);
        border: 1px solid var(--border);
        border-radius: 5px;
      }
      .mod-filter-row {
        display: flex;
        align-items: center;
        gap: 6px;
        margin-bottom: 4px;
      }
      .mod-filter-row:last-child {
        margin-bottom: 0;
      }
      .mod-filter-lbl {
        font-size: 10px;
        color: var(--muted);
        min-width: 42px;
        flex-shrink: 0;
      }
      .mod-chips {
        display: flex;
        gap: 4px;
        flex-wrap: wrap;
      }
      .mod-chip {
        font-size: 11px;
        padding: 1px 7px;
        background: var(--tag-bg);
        border-radius: 8px;
        cursor: pointer;
        color: var(--fg);
        user-select: none;
        border: 1px solid transparent;
      }
      .mod-chip:hover:not(.disabled) {
        background: var(--panel2);
        border-color: var(--border);
      }
      .mod-chip.active {
        background: var(--tag-bg-active);
        color: var(--tag-fg-active);
      }
      .mod-chip.disabled {
        opacity: 0.32;
        cursor: not-allowed;
      }

      /* selection summary chip in header */
      .filter-chip {
        font-size: 11px;
        padding: 3px 8px;
        background: var(--tag-bg);
        border-radius: 10px;
        color: var(--fg);
        display: inline-flex;
        align-items: center;
        gap: 6px;
      }
      .filter-chip .x {
        color: var(--muted);
        cursor: pointer;
        font-weight: bold;
      }
      .filter-chip .x:hover {
        color: var(--warn);
      }
      .filter-chip .lbl {
        color: var(--muted);
        font-size: 9px;
        text-transform: uppercase;
      }
    </style>
  </head>
  <body>
    <header>
      <h1>工序五层筛选</h1>
      <span class="stats" id="stats"></span>
      <span id="chips"></span>
      <button class="exit-fs" id="exitFs">退出全屏</button>
      <button class="clear-all" id="clearAll">清除全部筛选</button>
    </header>

    <main>
      <section class="fac1" id="actCol">
        <div class="col-title">
          <span>① 动作</span><span class="col-count" id="actCnt"></span>
        </div>
        <div id="actList"></div>
      </section>
      <section class="fac2" id="scopeCol">
        <div class="col-title">
          <span>② 作用域</span>
          <span class="col-count" id="scopeStat"></span>
        </div>
        <div class="scope-tabs">
          <div class="scope-tab" data-mode="node" id="tabNode">
            node · 内容树
          </div>
          <div class="scope-tab" data-mode="pattern" id="tabPattern">
            pattern · 频繁项集
          </div>
          <span
            class="col-clear"
            id="scopeClear"
            style="margin-left: auto; align-self: center"
            >清除</span
          >
        </div>

        <div class="scope-pane" id="paneNode">
          <div class="facet-title">实质</div>
          <div id="shizhiTree"></div>
          <div class="facet-title">形式</div>
          <div id="xingshiTree"></div>
        </div>

        <div class="scope-pane" id="panePattern">
          <div class="scope-meta" id="isParams"></div>
          <div id="isList"></div>
        </div>
      </section>
      <section class="fac3" id="modCol">
        <div class="col-title">
          <span>③ 输入 → 输出模态</span
          ><span class="col-clear" id="modClear">清除</span>
        </div>
        <div class="mod-filter">
          <div class="mod-filter-row">
            <span class="mod-filter-lbl">输入含</span>
            <span class="mod-chips" id="modInChips"></span>
          </div>
          <div class="mod-filter-row">
            <span class="mod-filter-lbl">输出含</span>
            <span class="mod-chips" id="modOutChips"></span>
          </div>
        </div>
        <div id="modList"></div>
      </section>
      <section class="fac4" id="fragCol">
        <div class="col-title">
          <span id="fragColTitle">④ Fragments</span
          ><span class="col-count" id="fragCnt"></span>
        </div>
        <div id="fragList"></div>
      </section>
      <section class="detail" id="detailCol">
        <div class="col-title"><span>⑤ 来源工序详情</span></div>
        <div id="detailBody">
          <div class="detail-empty">点击左侧 fragment 查看详情</div>
        </div>
      </section>
    </main>

    
    <script>
      
      let data = null;
      let SIDE_MODS = null;
      let shiDesc = null;
      let xingDesc = null;

      const urlParams = new URLSearchParams(window.location.search);
      const reqIdx = urlParams.get('req') || '108';

      Promise.all([
        fetch(`/output/${reqIdx}/case.json`).then(r => r.json()).catch(() => null),
        fetch(`/output/${reqIdx}/fragment.json`).then(r => r.json()).catch(() => null)
      ]).then(([caseData, fragData]) => {
        if (!caseData) {
            throw new Error("case.json is required but not found");
        }

        if (fragData && fragData.fragments && fragData.subtree) {
            data = fragData;
        } else {
            console.warn("fragment.json missing or invalid. Building data dynamically from case.json apply_to/apply_to_draft...");
            data = buildDataFromCase(caseData);
        }

        const casesMap = {};
        if (caseData && caseData.cases) {
          caseData.cases.forEach(c => casesMap[c.index] = c);
        }
        data.fragments.forEach(f => {
          if (casesMap[f.case_index]) {
            f.case_title = casesMap[f.case_index].title;
            f.case_url = casesMap[f.case_index].url;
            f.case_cover = casesMap[f.case_index].cover;
            f.case_body = casesMap[f.case_index].body;
            f.case_images = casesMap[f.case_index].images;
          }
        });
        initApp();
      }).catch(err => {
        document.body.innerHTML = `<div style="padding: 40px; text-align: center; color: var(--muted); font-size: 14px;">
          <h2>⚠️ 缺少必需的数据文件</h2>
          <p>无法加载 /output/${reqIdx}/case.json，或数据解析失败。</p>
          <p>请确保流水线已运行完毕并生成了 case.json。</p>
        </div>`;
      });

      function buildDataFromCase(caseData) {
        let frags = [];
        caseData.cases.forEach(c => {
           let groups = c.workflow_groups || [];
           groups.forEach(g => {
             let caps = g.capability || [];
             caps.forEach((cap, idx) => {
               let apply = cap.apply_to || cap.apply_to_draft || {};
               let apply_shizhi = [];
               let apply_xingshi = [];
               
               if (apply["实质"]) apply_shizhi = apply["实质"].map(s => typeof s === 'string' ? {category_path: s} : {category_path: s.category_path || s.path || s});
               if (apply["形式"]) apply_xingshi = apply["形式"].map(s => typeof s === 'string' ? {category_path: s} : {category_path: s.category_path || s.path || s});

               let inMod = cap.inputs ? cap.inputs.map(i=>i.modality).join('+') : '∅';
               let outMod = cap.outputs ? cap.outputs.map(i=>i.modality).join('+') : '∅';
               let sig = `${inMod} → ${outMod}`;

               frags.push({
                 ...cap,
                 case_index: c.index,
                 fragment_id: cap.capability_id || `${g.workflow_id}_${idx}`,
                 action: cap.action ? cap.action.description : '未知',
                 apply_shizhi,
                 apply_xingshi,
                 modality_signature: sig,
                 original_cap: cap 
               });
             });
           });
        });

        let actMap = new Map();
        frags.forEach(f => actMap.set(f.action, (actMap.get(f.action) || 0) + 1));
        let actions = Array.from(actMap.entries()).map(([verb, count]) => ({verb, count}));
        actions.sort((a,b)=>b.count-a.count);

        let modMap = new Map();
        frags.forEach(f => modMap.set(f.modality_signature, (modMap.get(f.modality_signature) || 0) + 1));
        let modalities = Array.from(modMap.entries()).map(([sig, count]) => ({sig, count}));
        modalities.sort((a,b)=>b.count-a.count);

        function buildTree(pathList) {
          let rootNodes = [];
          let nodeMap = {};
          pathList.forEach(p => {
             if (!p) return;
             let parts = p.split('/').filter(x => x);
             let currPath = '';
             let currentLevelList = rootNodes;
             parts.forEach(part => {
               currPath += '/' + part;
               if (!nodeMap[currPath]) {
                 let newNode = { path: currPath, name: part, children: [] };
                 nodeMap[currPath] = newNode;
                 currentLevelList.push(newNode);
               }
               currentLevelList = nodeMap[currPath].children;
             });
          });
          return rootNodes;
        }

        let shizhiPaths = new Set();
        let xingshiPaths = new Set();
        frags.forEach(f => {
           f.apply_shizhi.forEach(s => s.category_path && shizhiPaths.add(s.category_path));
           f.apply_xingshi.forEach(s => s.category_path && xingshiPaths.add(s.category_path));
        });

        return {
          fragments: frags,
          subtree: {
            shizhi: buildTree(Array.from(shizhiPaths)),
            xingshi: buildTree(Array.from(xingshiPaths))
          },
          actions,
          modalities,
          itemsets: [],
          itemsetsParams: { min_support: 0, max_k: 0, include_ancestors: false },
          stats: { fragments: frags.length, fragments_skipped: 0 }
        };
      }

      function initApp() {


      // State of selections (cascading filters)
      const state = {
        action: null, // verb string
        scopeMode: "node", // 'node' or 'pattern' — which sub-filter is active
        shizhiPath: null, // path (node mode)
        xingshiPath: null, // path (node mode)
        itemsetIdx: null, // index into data.itemsets (pattern mode)
        modSig: null,
        modInFilter: new Set(),
        modOutFilter: new Set(),
        fragKey: null,
        collapsed: new Set(),
      };

      // Parse a modality signature into input/output sets
      function sigParts(sig) {
        const [inS, outS] = sig.split(" → ");
        const parse = (s) =>
          new Set(s.split("+").filter((x) => x && x !== "∅"));
        return { in: parse(inS), out: parse(outS) };
      }
      // All non-config modalities seen in any signature (for the chip palette)
      const SIDE_MODS = (() => {
        const inSet = new Set(),
          outSet = new Set();
        for (const m of data.modalities) {
          const p = sigParts(m.sig);
          for (const x of p.in) inSet.add(x);
          for (const x of p.out) outSet.add(x);
        }
        return { in: [...inSet].sort(), out: [...outSet].sort() };
      })();

      function $(id) {
        return document.getElementById(id);
      }
      function el(tag, attrs, ...kids) {
        const e = document.createElement(tag);
        if (attrs)
          for (const k in attrs) {
            if (k === "class") e.className = attrs[k];
            else if (k === "onClick") e.addEventListener("click", attrs[k]);
            else if (k.startsWith("data-")) e.setAttribute(k, attrs[k]);
            else if (k === "title") e.title = attrs[k];
            else e[k] = attrs[k];
          }
        for (const kid of kids) {
          if (kid == null || kid === false) continue;
          if (typeof kid === "string")
            e.appendChild(document.createTextNode(kid));
          else e.appendChild(kid);
        }
        return e;
      }

      const fragKey = (f) => f.case_index + ":" + f.fragment_id;

      // build path -> all descendant paths map for tree filtering
      function buildDescMap(roots) {
        const map = new Map();
        function walk(node) {
          const all = [node.path];
          for (const c of node.children || []) {
            const sub = walk(c);
            for (const p of sub) all.push(p);
          }
          map.set(node.path, all);
          return all;
        }
        for (const r of roots) walk(r);
        return map;
      }
      const shiDesc = buildDescMap(data.subtree.shizhi || []);
      const xingDesc = buildDescMap(data.subtree.xingshi || []);

      function fragMatchesPath(f, key, selPath, descMap) {
        if (!selPath) return true;
        const allowed = descMap.get(selPath) || [selPath];
        const allowedSet = new Set(allowed);
        const list = key === "shizhi" ? f.apply_shizhi : f.apply_xingshi;
        for (const e of list || []) {
          if (allowedSet.has(e.category_path)) return true;
        }
        return false;
      }

      // Pattern mode helpers
      function fragPathSet(f) {
        const s = new Set();
        for (const e of f.apply_shizhi || [])
          if (e.category_path) s.add(e.category_path);
        for (const e of f.apply_xingshi || [])
          if (e.category_path) s.add(e.category_path);
        return s;
      }
      const fragPaths = new Map();
      for (const f of data.fragments)
        fragPaths.set(f.case_index + ":" + f.fragment_id, fragPathSet(f));
      function fragMatchesItemset(f, itemset) {
        if (!itemset) return true;
        const ps = fragPaths.get(f.case_index + ":" + f.fragment_id);
        for (const p of itemset.items) if (!ps.has(p)) return false;
        return true;
      }

      // Active scope filter only counts when we're on the matching tab.
      function scopeFilterActive() {
        if (state.scopeMode === "node")
          return !!(state.shizhiPath || state.xingshiPath);
        if (state.scopeMode === "pattern") return state.itemsetIdx != null;
        return false;
      }

      // Compute filtered fragments given the current state, optionally excluding one filter dim
      function applyFilters(except) {
        return data.fragments.filter((f) => {
          if (except !== "action" && state.action && f.action !== state.action)
            return false;
          if (except !== "scope" && scopeFilterActive()) {
            if (state.scopeMode === "node") {
              if (
                state.shizhiPath &&
                !fragMatchesPath(f, "shizhi", state.shizhiPath, shiDesc)
              )
                return false;
              if (
                state.xingshiPath &&
                !fragMatchesPath(f, "xingshi", state.xingshiPath, xingDesc)
              )
                return false;
            } else if (state.scopeMode === "pattern") {
              const sel = data.itemsets[state.itemsetIdx];
              if (sel && !fragMatchesItemset(f, sel)) return false;
            }
          }
          if (
            except !== "mod" &&
            state.modSig &&
            f.modality_signature !== state.modSig
          )
            return false;
          return true;
        });
      }

      // === RENDERERS ===

      function renderActions() {
        const baseFiltered = applyFilters("action");
        const counts = {};
        for (const f of baseFiltered)
          counts[f.action] = (counts[f.action] || 0) + 1;
        const wrap = $("actList");
        wrap.innerHTML = "";
        for (const a of data.actions) {
          const c = counts[a.verb] || 0;
          const node = el("div", {
            class:
              "item" +
              (state.action === a.verb ? " active" : "") +
              (c === 0 && state.action !== a.verb ? " disabled" : ""),
            onClick: () => {
              if (c === 0 && state.action !== a.verb) return;
              state.action = state.action === a.verb ? null : a.verb;
              renderAll();
            },
          });
          const stack = el(
            "div",
            { class: "item-stack" },
            el("div", { class: "item-name" }, a.verb),
            el("div", { class: "item-def" }, a.definition),
          );
          node.appendChild(stack);
          node.appendChild(el("span", { class: "item-count" }, String(c)));
          wrap.appendChild(node);
        }
        $("actCnt").textContent = "共 " + data.actions.length + " 个";
      }

      function renderTreeFacet(roots, key, mountId, selPath, descMap) {
        const wrap = $(mountId);
        wrap.innerHTML = "";
        const baseFiltered = applyFilters("scope"); // exclude scope filters so this column shows what could be selected
        // Compute hits: each fragment puts its 实质/形式 leaf paths in hit set
        const hitCounts = new Map();
        for (const f of baseFiltered) {
          const list = key === "shizhi" ? f.apply_shizhi : f.apply_xingshi;
          const seen = new Set();
          for (const e of list || []) {
            // walk up the path adding to ancestor counts so subtree counts roll up
            const parts = (e.category_path || "").split("/").filter(Boolean);
            for (let i = 1; i <= parts.length; i++) {
              const p = "/" + parts.slice(0, i).join("/");
              if (seen.has(p)) continue;
              seen.add(p);
            }
          }
          for (const p of seen) hitCounts.set(p, (hitCounts.get(p) || 0) + 1);
        }

        function renderNode(node, parent) {
          const c = hitCounts.get(node.path) || 0;
          const collapsed = state.collapsed.has(node.path);
          const hasChildren = (node.children || []).length > 0;
          const tnode = el("div", {
            class: "tnode" + (collapsed ? " tcollapsed" : ""),
          });
          const cls = ["tline"];
          if (selPath === node.path) cls.push("active");
          if (c === 0 && selPath !== node.path) cls.push("disabled");
          if (node.is_suggested && !node.is_hit) cls.push("suggested");
          if (node.is_inferred) cls.push("inferred");
          const line = el("div", {
            class: cls.join(" "),
            title:
              node.path + (node.description ? "\n\n" + node.description : ""),
          });
          const caret = el(
            "span",
            {
              class: "tcaret" + (hasChildren ? "" : " invis"),
              onClick: (ev) => {
                ev.stopPropagation();
                if (state.collapsed.has(node.path))
                  state.collapsed.delete(node.path);
                else state.collapsed.add(node.path);
                renderTrees();
              },
            },
            hasChildren ? (collapsed ? "▶" : "▼") : "·",
          );
          line.appendChild(caret);
          let label = node.name;
          if (node.is_suggested && !node.is_hit) label += " ✦";
          if (node.is_inferred) label += " (推断)";
          line.appendChild(el("span", { class: "tname" }, label));
          line.appendChild(el("span", { class: "tcount" }, String(c)));
          line.addEventListener("click", () => {
            if (c === 0 && selPath !== node.path) return;
            const k = key === "shizhi" ? "shizhiPath" : "xingshiPath";
            state[k] = state[k] === node.path ? null : node.path;
            renderAll();
          });
          tnode.appendChild(line);
          for (const ch of node.children || []) renderNode(ch, tnode);
          parent.appendChild(tnode);
        }
        for (const r of roots) renderNode(r, wrap);
      }

      function renderTrees() {
        renderTreeFacet(
          data.subtree.shizhi || [],
          "shizhi",
          "shizhiTree",
          state.shizhiPath,
          shiDesc,
        );
        renderTreeFacet(
          data.subtree.xingshi || [],
          "xingshi",
          "xingshiTree",
          state.xingshiPath,
          xingDesc,
        );
      }

      function pathLeafAndParent(p) {
        const parts = p.split("/").filter(Boolean);
        if (!parts.length) return { leaf: p, parent: "" };
        return {
          leaf: parts[parts.length - 1],
          parent: "/" + parts.slice(0, -1).join("/"),
        };
      }

      function renderItemsets() {
        const wrap = $("isList");
        wrap.innerHTML = "";
        $("isParams").textContent =
          `${data.itemsets.length} closed · min_support=${data.itemsetsParams.min_support}, k≤${data.itemsetsParams.max_k}, ${data.itemsetsParams.include_ancestors ? "+ancestors" : "leaf-only"}`;

        const baseFiltered = applyFilters("scope");
        data.itemsets.forEach((iset, idx) => {
          const supportNow = baseFiltered.filter((f) =>
            fragMatchesItemset(f, iset),
          ).length;
          const isActive = state.itemsetIdx === idx;
          const cls = ["iset"];
          if (isActive) cls.push("active");
          if (supportNow === 0 && !isActive) cls.push("disabled");
          const node = el("div", {
            class: cls.join(" "),
            onClick: () => {
              if (supportNow === 0 && !isActive) return;
              state.itemsetIdx = isActive ? null : idx;
              renderAll();
            },
          });
          const head = el(
            "div",
            { class: "iset-head" },
            el(
              "span",
              { class: "iset-sup", title: "当前筛选下的支持度" },
              "×" + supportNow,
            ),
            el("span", { class: "iset-k" }, "k=" + iset.size),
            el("span", { class: "iset-meta" }, "原始 sup " + iset.support),
          );
          node.appendChild(head);
          const paths = el("div", { class: "iset-paths" });
          for (const p of iset.items) {
            const facet = data.pathToFacet[p] || "?";
            const dot =
              facet === "实质"
                ? el("span", { class: "iset-fdot shi", title: "实质" }, "实")
                : facet === "形式"
                  ? el("span", { class: "iset-fdot xing", title: "形式" }, "形")
                  : el(
                      "span",
                      { class: "iset-fdot both", title: "两侧都有" },
                      "双",
                    );
            const lp = pathLeafAndParent(p);
            const row = el(
              "div",
              { class: "iset-path", title: p },
              dot,
              el(
                "div",
                null,
                el("span", { class: "iset-leaf" }, lp.leaf),
                el("div", { class: "iset-parent" }, lp.parent),
              ),
            );
            paths.appendChild(row);
          }
          node.appendChild(paths);
          wrap.appendChild(node);
        });
      }

      function renderScope() {
        // tab visuals
        $("tabNode").classList.toggle("active", state.scopeMode === "node");
        $("tabPattern").classList.toggle(
          "active",
          state.scopeMode === "pattern",
        );
        $("paneNode").classList.toggle("active", state.scopeMode === "node");
        $("panePattern").classList.toggle(
          "active",
          state.scopeMode === "pattern",
        );
        // status
        if (state.scopeMode === "node") {
          $("scopeStat").textContent = "路径树（双 facet）";
        } else {
          $("scopeStat").textContent = `${data.itemsets.length} 项集`;
        }
        $("scopeClear").classList.toggle("show", scopeFilterActive());
        // body
        if (state.scopeMode === "node") renderTrees();
        else renderItemsets();
      }

      function sigPassesChipFilter(sig) {
        const p = sigParts(sig);
        for (const m of state.modInFilter) if (!p.in.has(m)) return false;
        for (const m of state.modOutFilter) if (!p.out.has(m)) return false;
        return true;
      }

      function renderModalityChips() {
        const renderSide = (mountId, palette, selectedSet, side) => {
          const wrap = $(mountId);
          wrap.innerHTML = "";
          // Counts: how many sigs would remain if THIS chip were toggled on (alongside the other already-selected chips on this side)
          for (const m of palette) {
            const trial = new Set(selectedSet);
            if (!trial.has(m)) trial.add(m);
            let c = 0;
            for (const sig of data.modalities) {
              const p = sigParts(sig.sig);
              const inOK =
                side === "in"
                  ? [...trial].every((x) => p.in.has(x)) &&
                    [...state.modOutFilter].every((x) => p.out.has(x))
                  : [...state.modInFilter].every((x) => p.in.has(x)) &&
                    [...trial].every((x) => p.out.has(x));
              if (inOK) c++;
            }
            const isActive = selectedSet.has(m);
            const chip = el(
              "span",
              {
                class:
                  "mod-chip" +
                  (isActive ? " active" : "") +
                  (c === 0 && !isActive ? " disabled" : ""),
                title: m + (c === 0 && !isActive ? " (无匹配)" : ""),
                onClick: () => {
                  if (c === 0 && !isActive) return;
                  if (selectedSet.has(m)) selectedSet.delete(m);
                  else selectedSet.add(m);
                  // if the currently selected modSig no longer matches, drop it
                  if (state.modSig && !sigPassesChipFilter(state.modSig))
                    state.modSig = null;
                  renderAll();
                },
              },
              m,
            );
            wrap.appendChild(chip);
          }
        };
        renderSide("modInChips", SIDE_MODS.in, state.modInFilter, "in");
        renderSide("modOutChips", SIDE_MODS.out, state.modOutFilter, "out");
      }

      function renderModalities() {
        const baseFiltered = applyFilters("mod");
        const counts = {};
        for (const f of baseFiltered)
          counts[f.modality_signature] =
            (counts[f.modality_signature] || 0) + 1;
        renderModalityChips();
        const wrap = $("modList");
        wrap.innerHTML = "";
        const visible = data.modalities.filter((m) =>
          sigPassesChipFilter(m.sig),
        );
        const sorted = [...visible].sort(
          (a, b) => (counts[b.sig] || 0) - (counts[a.sig] || 0),
        );
        if (sorted.length === 0) {
          wrap.appendChild(
            el("div", { class: "empty-msg" }, "当前 chip 筛选下没有匹配签名"),
          );
        }
        for (const m of sorted) {
          const c = counts[m.sig] || 0;
          const node = el(
            "div",
            {
              class:
                "item" +
                (state.modSig === m.sig ? " active" : "") +
                (c === 0 && state.modSig !== m.sig ? " disabled" : ""),
              onClick: () => {
                if (c === 0 && state.modSig !== m.sig) return;
                state.modSig = state.modSig === m.sig ? null : m.sig;
                renderAll();
              },
            },
            el("span", { class: "item-name" }, m.sig),
            el("span", { class: "item-count" }, String(c)),
          );
          wrap.appendChild(node);
        }
        $("modClear").classList.toggle(
          "show",
          !!state.modSig ||
            state.modInFilter.size > 0 ||
            state.modOutFilter.size > 0,
        );
      }

      function renderFragments() {
        const filtered = applyFilters(null);
        const wrap = $("fragList");
        wrap.innerHTML = "";
        $("fragCnt").textContent =
          filtered.length + " / " + data.fragments.length;
        $("fragColTitle").textContent =
          "④ Fragments · " +
          (state.scopeMode === "pattern" ? "分子能力" : "原子能力");
        if (filtered.length === 0) {
          wrap.appendChild(
            el("div", { class: "empty-msg" }, "当前筛选下没有命中的 fragment"),
          );
          return;
        }
        for (const f of filtered) {
          const k = fragKey(f);
          const head = el(
            "div",
            { class: "frag-head" },
            el("span", { class: "case-badge" }, "案例" + f.case_index),
            el("span", { class: "frag-badge" }, f.fragment_id),
            el("span", { class: "act-badge" }, f.action),
          );
          const sig = el("div", { class: "frag-sig" }, f.modality_signature);
          const body = el("div", { class: "frag-body" }, f.body || "");
          const node = el(
            "div",
            {
              class: "frag" + (state.fragKey === k ? " active" : ""),
              onClick: () => {
                state.fragKey = k;
                renderFragments();
                renderDetail();
              },
            },
            head,
            sig,
            body,
          );
          wrap.appendChild(node);
        }
      }

      function renderDetail() {
        const wrap = $("detailBody");
        wrap.innerHTML = "";
        const f = data.fragments.find((x) => fragKey(x) === state.fragKey);
        if (!f) {
          wrap.appendChild(
            el("div", { class: "detail-empty" }, "点击左侧 fragment 查看详情"),
          );
          return;
        }

        // Header
        wrap.appendChild(
          el(
            "h2",
            null,
            el("span", { class: "case-badge" }, "案例 " + f.case_index),
            el("span", { class: "frag-badge" }, f.fragment_id),
            el("span", { class: "act-badge" }, f.action),
            f.workflow_step_ref && f.workflow_step_ref.step_id
              ? el(
                  "span",
                  { class: "pill" },
                  "step " + f.workflow_step_ref.step_id,
                )
              : null,
          ),
        );
        if (f.case_title) {
          const det = el("details", { style: "margin: 8px 0; padding-bottom: 8px; border-bottom: 1px solid var(--border);" });
          const sum = el("summary", { class: "case-title", style: "cursor: pointer; margin: 0; outline: none; font-weight: bold; color: var(--accent); padding: 6px 8px; background: var(--panel2); border-radius: 4px; font-size: 11px;" }, "📄 源: " + f.case_title);
          det.appendChild(sum);
          
          const caseContent = el("div", { style: "padding: 10px; background: var(--code); border-radius: 5px; margin-top: 4px; border: 1px solid var(--border);" });
          
          const imgsToRender = f.case_images && f.case_images.length ? f.case_images : (f.case_cover ? [f.case_cover] : []);
          if (imgsToRender.length > 0) {
            const imgContainer = el("div", { style: "display: flex; gap: 8px; overflow-x: auto; margin-bottom: 8px; padding-bottom: 4px;" });
            for (const imgSrc of imgsToRender) {
              const img = el("img", { src: imgSrc, style: "height: 160px; border-radius: 5px; object-fit: contain; background: var(--panel2); border: 1px solid var(--border);" });
              imgContainer.appendChild(img);
            }
            caseContent.appendChild(imgContainer);
          }
          
          if (f.case_body) {
            const body = el("div", { style: "font-size: 12px; line-height: 1.6; color: var(--fg); white-space: pre-wrap; margin-bottom: 10px; max-height: 250px; overflow-y: auto; padding-right: 4px;" }, f.case_body);
            caseContent.appendChild(body);
          }
          
          if (f.case_url) {
            const link = el("a", { href: f.case_url, target: "_blank", rel: "noopener", style: "font-size: 11px; color: var(--accent); display: inline-block; background: var(--panel2); padding: 4px 8px; border-radius: 4px; text-decoration: none;" }, "🔗 访问原始链接");
            caseContent.appendChild(link);
          }
          
          det.appendChild(caseContent);
          wrap.appendChild(det);
        }

        // I/O modalities
        const ioSec = el(
          "div",
          { class: "detail-section" },
          el("h3", null, "I/O 模态"),
        );
        ioSec.appendChild(
          el(
            "div",
            { class: "frag-sig", style: "font-size:13px;margin-bottom:6px" },
            f.modality_signature,
          ),
        );
        const ioRow = (lbl, arr, kind) => {
          const row = el(
            "div",
            { class: "io-row" },
            el("span", { class: "lbl" }, lbl),
          );
          if (!arr || !arr.length) {
            row.appendChild(
              el("span", { style: "color:var(--muted)" }, "(无)"),
            );
            return row;
          }
          for (const x of arr) {
            const isCfg = x.modality === "模型" || x.modality === "参数";
            const txt =
              (x.description || "") +
              (x.modality ? "[" + x.modality + "]" : "") +
              (x.relation ? " " + x.relation : "");
            row.appendChild(
              el("span", { class: "pill " + (isCfg ? "cfg" : kind) }, txt),
            );
          }
          return row;
        };
        ioSec.appendChild(ioRow("IN", f.inputs, "in"));
        ioSec.appendChild(ioRow("OUT", f.outputs, "out"));
        wrap.appendChild(ioSec);

        // Body
        if (f.body) {
          wrap.appendChild(
            el(
              "div",
              { class: "detail-section" },
              el("h3", null, "Body"),
              el("div", { class: "body-text" }, f.body),
            ),
          );
        }

        // apply_to (实质 + 形式) — highlight rule depends on scope mode
        let hotPaths = new Set();
        if (state.scopeMode === "pattern" && state.itemsetIdx != null) {
          const sel = data.itemsets[state.itemsetIdx];
          if (sel) for (const p of sel.items) hotPaths.add(p);
        }
        const renderApply = (label, arr) => {
          const sec = el(
            "div",
            { class: "detail-section" },
            el("h3", null, "Apply to · " + label),
          );
          if (!arr || !arr.length) {
            sec.appendChild(
              el("div", { class: "empty-msg", style: "padding:8px" }, "无"),
            );
            return sec;
          }
          for (const e of arr) {
            let isHighlighted = false;
            if (state.scopeMode === "node") {
              isHighlighted =
                (label === "实质" &&
                  state.shizhiPath &&
                  (shiDesc.get(state.shizhiPath) || []).includes(
                    e.category_path,
                  )) ||
                (label === "形式" &&
                  state.xingshiPath &&
                  (xingDesc.get(state.xingshiPath) || []).includes(
                    e.category_path,
                  ));
            } else {
              isHighlighted = hotPaths.has(e.category_path);
            }
            sec.appendChild(
              el(
                "div",
                {
                  class: "pathline",
                  style: isHighlighted ? "color:#f1e05a" : "",
                },
                e.category_path,
              ),
            );
            if (e.rationale)
              sec.appendChild(
                el("div", { class: "rationale" }, "— " + e.rationale),
              );
          }
          return sec;
        };
        wrap.appendChild(renderApply("实质", f.apply_shizhi));
        wrap.appendChild(renderApply("形式", f.apply_xingshi));

        // suggest_apply_to
        if (f.suggest_apply_to && f.suggest_apply_to.length) {
          const sec = el(
            "div",
            { class: "detail-section" },
            el("h3", null, "Suggest Apply to ✦（建议新增节点）")
          );
          let arr = Array.isArray(f.suggest_apply_to) ? f.suggest_apply_to : [f.suggest_apply_to];
          for (const s of arr) {
            let p = typeof s === 'string' ? s : (s.path || s.category_path || JSON.stringify(s));
            sec.appendChild(el("div", { class: "pathline suggest" }, p));
            if (s && typeof s === 'object' && s.rationale) {
              sec.appendChild(el("div", { class: "rationale" }, "— " + s.rationale));
            }
          }
          wrap.appendChild(sec);
        }

        // effects
        if (f.effects && f.effects.length) {
          const sec = el(
            "div",
            { class: "detail-section" },
            el("h3", null, "Effects"),
          );
          f.effects.forEach((e, i) => {
            const card = el("div", { class: "effect-card" });
            card.appendChild(
              el(
                "div",
                { class: "effect-stmt" },
                "#" + i + " " + (e.statement || "-"),
              ),
            );
            if (e.criteria)
              card.appendChild(
                el("div", { class: "effect-meta" }, "判定标准：" + e.criteria),
              );
            if (e.judge_method)
              card.appendChild(
                el(
                  "div",
                  { class: "effect-meta" },
                  "判定方式：" + e.judge_method,
                ),
              );
            if (e.negative_examples && e.negative_examples.length) {
              const ne = el("div", { class: "effect-meta" }, "反例：");
              for (const n of e.negative_examples)
                ne.appendChild(
                  el("div", { style: "margin-left:8px" }, "· " + n),
                );
              card.appendChild(ne);
            }
            sec.appendChild(card);
          });
          wrap.appendChild(sec);
        }

        // misc
        const miscRows = [];
        miscRows.push(["tools", (f.tools && f.tools.length) ? f.tools.join(", ") : "-"]);
        miscRows.push(["artifact_type", f.artifact_type ? f.artifact_type : "-"]);
        miscRows.push(["control_target", (f.control_target && f.control_target.length) ? f.control_target.join(", ") : "-"]);
        miscRows.push(["alt_to", (f.is_alternative_to && f.is_alternative_to.length) ? f.is_alternative_to.join(", ") : "-"]);
        if (miscRows.length) {
          const sec = el(
            "div",
            { class: "detail-section" },
            el("h3", null, "其他"),
          );
          for (const [k2, v2] of miscRows) {
            const row = el(
              "div",
              { style: "font-size:11px;margin-bottom:3px" },
              el("span", { style: "color:var(--muted);margin-right:8px" }, k2),
              el("span", null, v2),
            );
            sec.appendChild(row);
          }
          wrap.appendChild(sec);
        }

        // raw fold-out
        wrap.appendChild(
          el(
            "details",
            null,
            el("summary", null, "查看原始 fragment JSON"),
            el("pre", { class: "json-raw" }, JSON.stringify(f, null, 2)),
          ),
        );
      }

      function renderChips() {
        const c = $("chips");
        c.innerHTML = "";
        let any = false;
        const mk = (lbl, val, onX) => {
          any = true;
          c.appendChild(
            el(
              "span",
              { class: "filter-chip" },
              el("span", { class: "lbl" }, lbl),
              el("span", null, val),
              el(
                "span",
                {
                  class: "x",
                  onClick: () => {
                    onX();
                    renderAll();
                  },
                },
                "×",
              ),
            ),
          );
        };
        if (state.action)
          mk("动作", state.action, () => {
            state.action = null;
          });
        if (state.scopeMode === "node") {
          if (state.shizhiPath)
            mk(
              "实质",
              state.shizhiPath.split("/").pop() || state.shizhiPath,
              () => {
                state.shizhiPath = null;
              },
            );
          if (state.xingshiPath)
            mk(
              "形式",
              state.xingshiPath.split("/").pop() || state.xingshiPath,
              () => {
                state.xingshiPath = null;
              },
            );
        } else if (state.scopeMode === "pattern" && state.itemsetIdx != null) {
          const sel = data.itemsets[state.itemsetIdx];
          const desc = sel.items.map((p) => p.split("/").pop()).join(" + ");
          mk("项集 k=" + sel.size, desc, () => {
            state.itemsetIdx = null;
          });
        }
        if (state.modSig)
          mk("模态", state.modSig, () => {
            state.modSig = null;
          });
        $("clearAll").classList.toggle("active", any);
      }

      function renderStats() {
        $("stats").textContent =
          `${data.stats.fragments} fragments · ${data.actions.length} 动作 · ${data.modalities.length} 模态组合${data.stats.fragments_skipped ? ` · 已跳过 ${data.stats.fragments_skipped} 个空模态片段` : ""}`;
      }

      function renderAll() {
        renderActions();
        renderScope();
        renderModalities();
        renderFragments();
        renderDetail();
        renderChips();
      }

      $("clearAll").addEventListener("click", () => {
        state.action = null;
        state.shizhiPath = null;
        state.xingshiPath = null;
        state.itemsetIdx = null;
        state.modSig = null;
        state.modInFilter.clear();
        state.modOutFilter.clear();
        renderAll();
      });
      $("scopeClear").addEventListener("click", () => {
        // clear only the current tab's selection
        if (state.scopeMode === "node") {
          state.shizhiPath = null;
          state.xingshiPath = null;
        } else {
          state.itemsetIdx = null;
        }
        renderAll();
      });
      $("tabNode").addEventListener("click", () => {
        state.scopeMode = "node";
        renderAll();
      });
      $("tabPattern").addEventListener("click", () => {
        state.scopeMode = "pattern";
        renderAll();
      });
      $("modClear").addEventListener("click", () => {
        state.modSig = null;
        state.modInFilter.clear();
        state.modOutFilter.clear();
        renderAll();
      });

      renderStats();
      renderAll();
      }

      document.getElementById('exitFs').addEventListener('click', () => {
        window.parent.postMessage({ type: 'EXIT_FULLSCREEN' }, '*');
      });

      window.addEventListener('message', (e) => {
        if (e.data && e.data.type === 'SET_FULLSCREEN') {
          const btn = document.getElementById('exitFs');
          const clearAll = document.getElementById('clearAll');
          if (e.data.isFullscreen) {
            btn.style.display = 'inline-block';
            clearAll.style.marginLeft = '8px';
          } else {
            btn.style.display = 'none';
            clearAll.style.marginLeft = 'auto';
          }
        }
      });
    </script>
  </body>
</html>