howard
/
Agent


			
							1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556575859606162636465666768697071727374757677787980818283848586878889909192939495969798991001011021031041051061071081091101111121131141151161171181191201211221231241251261271281291301311321331341351361371381391401411421431441451461471481491501511521531541551561571581591601611621631641651661671681691701711721731741751761771781791801811821831841851861871881891901911921931941951961971981992002012022032042052062072082092102112122132142152162172182192202212222232242252262272282292302312322332342352362372382392402412422432442452462472482492502512522532542552562572582592602612622632642652662672682692702712722732742752762772782792802812822832842852862872882892902912922932942952962972982993003013023033043053063073083093103113123133143153163173183193203213223233243253263273283293303313323333343353363373383393403413423433443453463473483493503513523533543553563573583593603613623633643653663673683693703713723733743753763773783793803813823833843853863873883893903913923933943953963973983994004014024034044054064074084094104114124134144154164174184194204214224234244254264274284294304314324334344354364374384394404414424434444454464474484494504514524534544554564574584594604614624634644654664674684694704714724734744754764774784794804814824834844854864874884894904914924934944954964974984995005015025035045055065075085095105115125135145155165175185195205215225235245255265275285295305315325335345355365375385395405415425435445455465475485495505515525535545555565575585595605615625635645655665675685695705715725735745755765775785795805815825835845855865875885895905915925935945955965975985996006016026036046056066076086096106116126136146156166176186196206216226236246256266276286296306316326336346356366376386396406416426436446456466476486496506516526536546556566576586596606616626636646656666676686696706716726736746756766776786796806816826836846856866876886896906916926936946956966976986997007017027037047057067077087097107117127137147157167177187197207217227237247257267277287297307317327337347357367377387397407417427437447457467477487497507517527537547557567577587597607617627637647657667677687697707717727737747757767777787797807817827837847857867877887897907917927937947957967977987998008018028038048058068078088098108118128138148158168178188198208218228238248258268278288298308318328338348358368378388398408418428438448458468478488498508518528538548558568578588598608618628638648658668678688698708718728738748758768778788798808818828838848858868878888898908918928938948958968978988999009019029039049059069079089099109119129139149159169179189199209219229239249259269279289299309319329339349359369379389399409419429439449459469479489499509519529539549559569579589599609619629639649659669679689699709719729739749759769779789799809819829839849859869879889899909919929939949959969979989991000100110021003100410051006100710081009101010111012101310141015101610171018101910201021102210231024102510261027102810291030103110321033103410351036103710381039104010411042104310441045104610471048104910501051105210531054105510561057105810591060106110621063106410651066106710681069107010711072107310741075107610771078107910801081108210831084108510861087108810891090109110921093109410951096109710981099110011011102110311041105110611071108110911101111111211131114111511161117111811191120112111221123112411251126112711281129113011311132113311341135113611371138113911401141114211431144114511461147114811491150115111521153115411551156115711581159116011611162116311641165116611671168116911701171117211731174117511761177117811791180118111821183118411851186118711881189119011911192119311941195119611971198119912001201120212031204120512061207120812091210121112121213121412151216121712181219122012211222122312241225122612271228122912301231123212331234123512361237123812391240124112421243124412451246124712481249125012511252125312541255125612571258125912601261126212631264126512661267126812691270127112721273127412751276127712781279128012811282128312841285128612871288128912901291129212931294129512961297129812991300130113021303130413051306130713081309131013111312131313141315131613171318131913201321132213231324132513261327132813291330133113321333133413351336133713381339134013411342134313441345134613471348134913501351135213531354135513561357135813591360136113621363136413651366136713681369137013711372137313741375137613771378137913801381138213831384138513861387138813891390139113921393139413951396139713981399140014011402140314041405140614071408140914101411141214131414141514161417141814191420142114221423142414251426142714281429143014311432143314341435143614371438143914401441144214431444144514461447144814491450145114521453145414551456145714581459146014611462146314641465146614671468146914701471147214731474147514761477147814791480148114821483148414851486148714881489149014911492149314941495149614971498149915001501150215031504150515061507150815091510151115121513151415151516151715181519152015211522152315241525152615271528152915301531153215331534153515361537153815391540154115421543154415451546154715481549155015511552155315541555155615571558155915601561156215631564156515661567156815691570157115721573157415751576157715781579158015811582158315841585158615871588158915901591159215931594159515961597159815991600160116021603160416051606160716081609161016111612161316141615161616171618161916201621162216231624162516261627162816291630163116321633163416351636163716381639164016411642164316441645164616471648164916501651165216531654165516561657165816591660166116621663166416651666166716681669167016711672167316741675167616771678167916801681168216831684168516861687168816891690169116921693169416951696169716981699170017011702170317041705170617071708170917101711171217131714171517161717171817191720172117221723172417251726172717281729173017311732173317341735173617371738173917401741
							<!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;

      Promise.all([
        fetch('/fragment.json').then(r => r.json()),
        fetch('/case_pure.json').then(r => r.json()).catch(() => null)
      ]).then(([fragData, caseData]) => {
        data = fragData;
        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();
      });

      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) {
          const sec = el(
            "div",
            { class: "detail-section" },
            el("h3", null, "Suggest Apply to ✦（建议新增节点）"),
            el("div", { class: "pathline suggest" }, f.suggest_apply_to),
          );
          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>