howard
/
Agent


			
				
					
						
						
							123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554555556557558559560561562563564565566567568569570571572573574575576577578579580581582583584585586587588589590591592593594595596597598599600601602603604605606607608609610611612613614615616617618619620621622623624625626627628629630631632633634635636637638639640641642643644645646647648649650651652653654655656657658659660661662663664665666667668669670671672673674675676677678679680681682683684685686687688689690691692693694695696697698699700701702703704705706707708709710711712713714715716717718719720721722723724725726727728729730731732733734735736737738739740741742743744745746747748749750751752753754755756757758759760761762763764765766767768769770771772773774775776777778779780781782783784785786787788789790791792793794795796797798799800801802803804805806807808809810811812813814815816817818819820821822823824825826827828829830831832833834835836837838839840841842843844845846847848849850851852853854855856857858859860861862863864865866867868869870871872873874875876877878879880881882883884885886887888889890891892893894895896897898899900901902903904905906907908909910911912913914915916917918919920921922923924925926927928929930931932933934935936937938939940941942943944945946947948949950951952953954955956957958959960961962963964965966967968969970971972973974975976977978979980981982983984985986987988989990991992993994995996997998999100010011002100310041005100610071008100910101011101210131014101510161017101810191020102110221023102410251026102710281029103010311032103310341035103610371038103910401041104210431044104510461047104810491050105110521053
							<!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;
    --shi-bg:#dbeafe; --shi-fg:#1e40af;
    --xing-bg:#ede9fe; --xing-fg:#6d28d9;
    --both-bg:#fef3c7; --both-fg:#92400e;
    --split-w:8px;
    --left-pct:60%;
  }
  *{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;height:41px}
  h1{font-size:14px;margin:0;font-weight:600}
  .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)}

  /* two-panel layout with draggable splitter */
  .app{display:grid;
    grid-template-columns: minmax(0, var(--left-pct)) var(--split-w) minmax(0, 1fr);
    height:calc(100vh - 41px);
    overflow:hidden}
  .selection{overflow:hidden;display:flex;flex-direction:column;background:var(--panel);
    min-width:0}
  .splitter{background:var(--border);cursor:col-resize;position:relative;user-select:none}
  .splitter::before{content:"";position:absolute;left:50%;top:50%;
    transform:translate(-50%,-50%);width:2px;height:30px;background:var(--muted);
    border-radius:1px;opacity:.6}
  .splitter:hover{background:var(--accent)}
  .splitter:hover::before{background:#fff;opacity:1}
  .splitter.dragging{background:var(--accent)}
  .splitter.dragging::before{background:#fff;opacity:1}
  .detail-area{overflow:auto;background:var(--panel);padding:0}
  .preset-btns{display:flex;gap:6px;margin-right:10px}
  .preset-btn{font-size:11px;padding:3px 9px;border:1px solid var(--border);
    border-radius:4px;background:transparent;color:var(--muted);cursor:pointer}
  .preset-btn:hover{color:var(--fg);border-color:var(--accent)}
  .preset-btn.active{color:var(--accent);border-color:var(--accent);background:#eff6ff}

  /* selection 4-column grid */
  .sel-cols{display:grid;
    grid-template-columns:minmax(180px,1fr) minmax(220px,1.1fr) minmax(190px,1fr) minmax(280px,1.6fr);
    height:100%;overflow-x:auto;overflow-y:hidden}
  section{overflow:auto;border-right:1px solid var(--border);padding:8px 10px;min-width:0}
  section:last-child{border-right:none}
  section.fac1{background:var(--panel)}
  section.fac2{background:#fafbfd}
  section.fac3{background:var(--panel)}
  section.fac4{background:#fafbfd}

  .col-title{font-size:10px;text-transform:uppercase;letter-spacing:.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:.42;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(255,255,255,.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,.85)}
  .item-stack{flex:1;min-width:0}

  /* verb-filter (collapsible chip list inside col-1) */
  .verb-filter{margin:0 0 8px;border:1px solid var(--border);border-radius:5px;
    background:var(--code)}
  .verb-filter > summary{cursor:pointer;padding:6px 9px;font-size:11px;
    color:var(--muted);user-select:none;display:flex;align-items:center;gap:6px;outline:none}
  .verb-filter > summary:hover{color:var(--fg)}
  .verb-filter > summary .vf-count{margin-left:auto;font-size:10px;color:var(--accent)}
  .verb-filter[open] > summary{border-bottom:1px solid var(--border)}
  .verb-chips{display:flex;flex-wrap:wrap;gap:4px;padding:7px 7px 5px}
  .verb-chip{font-size:11px;padding:2px 8px;background:var(--tag-bg);border-radius:8px;
    cursor:pointer;color:var(--fg);user-select:none;border:1px solid transparent;
    display:inline-flex;align-items:center;gap:4px}
  .verb-chip:hover:not(.disabled):not(.active){background:var(--panel2);border-color:var(--border)}
  .verb-chip.active{background:var(--tag-bg-active);color:var(--tag-fg-active)}
  .verb-chip.disabled{opacity:.42;cursor:not-allowed}
  .verb-chip .cnt{font-size:9px;color:var(--muted);background:var(--bg);
    padding:0 4px;border-radius:6px}
  .verb-chip.active .cnt{background:rgba(255,255,255,.3);color:#fff}

  /* action sequence list */
  .actseq{padding:7px 9px;border-radius:5px;cursor:pointer;margin-bottom:4px;
    border:1px solid var(--border);background:var(--panel);font-size:11px;line-height:1.45}
  .actseq:hover:not(.disabled):not(.active){border-color:var(--accent)}
  .actseq.active{border-color:var(--accent);background:#eff6ff;
    box-shadow:0 0 0 1px var(--accent) inset}
  .actseq.disabled{opacity:.42;cursor:not-allowed}
  .actseq-count{float:right;font-size:10px;color:var(--muted);
    background:var(--bg);padding:1px 5px;border-radius:8px}
  .actseq.active .actseq-count{background:rgba(59,130,246,.15);color:var(--accent)}
  .actseq-chip{display:inline-block;background:var(--tag-bg);padding:1px 6px;
    border-radius:3px;font-size:10px;margin:1px 2px;font-weight:600;color:var(--fg)}
  .actseq.active .actseq-chip{background:#dbeafe;color:#1e40af}
  .actseq-sep{color:var(--muted);font-size:9px;margin:0 1px}

  /* 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:.42;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(255,255,255,.3);color:#fff}
  .tcollapsed > .tnode{display:none}
  .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:.5px}
  .facet-title:first-child{margin-top:0}

  /* workflow card */
  .wf{padding:9px 10px;border-radius:6px;cursor:pointer;margin-bottom:6px;
    border:1px solid var(--border);background:var(--panel)}
  .wf:hover:not(.active){background:var(--panel2)}
  .wf.active{border-color:var(--accent);background:#eff6ff;
    box-shadow:0 0 0 1px var(--accent) inset}
  .wf-head{display:flex;align-items:center;gap:6px;margin-bottom:5px;flex-wrap:wrap}
  .case-badge{background:var(--accent);color:#fff;padding:1px 5px;border-radius:3px;
    font-weight:600;font-size:10px}
  .wf-badge{background:var(--accent2);color:#fff;padding:1px 5px;border-radius:3px;
    font-weight:600;font-size:10px}
  .wf-meta{font-size:10px;color:var(--muted);margin-left:auto}
  .wf-sig{font-size:10px;color:var(--muted);margin:3px 0;font-family:ui-monospace,SFMono-Regular,Menlo,monospace}
  .wf-seq{display:flex;flex-wrap:wrap;gap:3px;margin-top:5px;align-items:center}
  .wf-row{font-size:10px;margin-top:4px;display:flex;align-items:baseline;gap:6px;line-height:1.4}
  .wf-row .wf-lbl{color:var(--muted);text-transform:uppercase;letter-spacing:.4px;flex-shrink:0;font-size:9px;min-width:28px}
  .wf-row .wf-val{color:#334155;flex:1;min-width:0}
  .wf-scope-chip{display:inline-block;background:#e0e7ff;color:#3730a3;padding:1px 6px;
    border-radius:3px;font-size:10px;margin:1px 2px;font-weight:600}
  .wf-scope-chip.suggest{background:#ede9fe;color:#6d28d9;font-style:italic}
  .wf-scope-more{font-size:9px;color:var(--muted);margin-left:3px}
  .vchip{font-size:10px;padding:2px 6px;border-radius:3px;font-weight:600;line-height:1.3;
    border:1px solid transparent;white-space:nowrap;background:var(--tag-bg);color:var(--fg)}
  .vsep{color:var(--muted);font-size:9px;line-height:1.3}

  /* modality side filter */
  .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):not(.active){background:var(--panel2);border-color:var(--border)}
  .mod-chip.active{background:var(--tag-bg-active);color:var(--tag-fg-active)}
  .mod-chip.disabled{opacity:.42;cursor:not-allowed}

  /* detail */
  .detail-empty{color:var(--muted);text-align:center;padding:60px 20px;font-size:13px}
  .detail-pad{padding:14px 18px}
  .detail h2{font-size:14px;margin:0 0 8px;display:flex;gap:8px;align-items:center;flex-wrap:wrap}
  .detail-section{margin:12px 0}
  .detail-section h3{font-size:10px;color:var(--muted);text-transform:uppercase;
    letter-spacing:.6px;margin:0 0 6px;font-weight:600}
  .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:var(--shi-bg);color:var(--shi-fg)}
  .pill.out{background:var(--xing-bg);color:var(--xing-fg)}

  /* case-detail (original-post) section */
  .case-detail{margin:0 0 8px;padding-bottom:8px;border-bottom:1px solid var(--border)}
  .case-detail summary{font-weight:bold;color:var(--accent);padding:6px 8px;
    background:var(--panel2);border-radius:4px;font-size:11px;cursor:pointer;outline:none;margin:0}
  .case-content{padding:10px;background:var(--code);border-radius:5px;
    margin-top:4px;border:1px solid var(--border)}
  .case-images{display:flex;gap:8px;overflow-x:auto;margin-bottom:8px;padding-bottom:4px}
  .case-images img{height:160px;border-radius:5px;object-fit:contain;
    background:var(--panel2);border:1px solid var(--border)}
  .case-body{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}
  .case-link{font-size:11px;color:var(--accent);display:inline-block;
    background:var(--panel2);padding:4px 8px;border-radius:4px;text-decoration:none}
  .case-feedback{font-size:11px;color:var(--muted);margin-bottom:6px;display:flex;gap:12px;flex-wrap:wrap}
  .case-feedback .fb{display:inline-flex;gap:3px;align-items:center}
  .case-author{font-size:11px;color:var(--muted);margin-bottom:6px}

  /* capability table — light, compact, white-on-gray */
  .cap-table{width:100%;border-collapse:collapse;background:var(--panel);
    font-size:11px;border:1px solid var(--border);table-layout:auto}
  .cap-table th, .cap-table td{
    border:1px solid var(--border);padding:5px 8px;vertical-align:top;text-align:left;
    line-height:1.5;background:var(--panel)}
  .cap-table thead th{background:#f8fafc;font-weight:600;color:var(--muted);
    position:sticky;top:0;z-index:2;font-size:10px;text-transform:uppercase;
    letter-spacing:.4px;text-align:left}
  .cap-table tbody tr.cap-first td{border-top:1px solid var(--border)}
  .cap-table tbody tr.step-first td{border-top:2px solid var(--accent)}
  .cap-table tbody tr:first-child td{border-top:none}
  .cell-step{text-align:center;font-weight:600;color:#334155;font-size:12px;
    background:#fafbfd}
  .cell-id{font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:10px;
    color:var(--muted);white-space:nowrap;background:#fafbfd}
  .cell-action{font-weight:600;color:#334155;background:#fafbfd}
  .cell-atom-action{color:#334155;font-weight:500}
  .cell-scope{color:#334155}
  .cell-scope.suggest{color:var(--suggest);font-style:italic}
  .cell-tool{font-size:10px;color:#475569;font-family:ui-monospace,SFMono-Regular,Menlo,monospace}
  .cell-type{font-size:10px;color:var(--muted)}
  .cell-impl{color:#334155;max-width:260px;font-size:11px;line-height:1.5}
  .cell-io{background:#fafbfd}
  .cell-io .mod-pill{display:inline-block;padding:1px 7px;border-radius:3px;
    font-size:10px;margin:1px 2px;font-weight:600;
    background:#e0e7ff;color:#3730a3}
  .cell-io .mod-pill.output{background:#e0e7ff;color:#3730a3}
  .cell-dash{color:var(--inferred)}
  .scope-leaf{display:inline-block;padding:1px 6px;background:#e0e7ff;
    color:#3730a3;border-radius:3px;font-size:11px;font-weight:600}
  .scope-leaf.suggest{background:#ede9fe;color:#6d28d9}
  .scope-facet{font-size:9px;color:var(--muted);margin-left:5px;text-transform:uppercase;letter-spacing:.3px}
  .scope-path{font-size:9px;color:var(--muted);margin-top:3px;font-family:ui-monospace,SFMono-Regular,Menlo,monospace}
  .scope-mark{font-size:10px;color:var(--suggest);margin-left:3px}

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

  .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;margin-right:4px}
  .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}

  .loading{display:flex;align-items:center;justify-content:center;
    height:100vh;font-size:14px;color:var(--muted)}
</style>
</head>
<body>

<div id="loading" class="loading">加载工序数据中…</div>

<div id="appRoot" style="display:none">
<header>
  <h1>工序</h1>
  <span id="chips"></span>
  <div class="preset-btns" style="margin-left:auto">
    <button class="preset-btn" id="presetLeft" title="选择区为主">◧ 选择</button>
    <button class="preset-btn" id="presetEven" title="均分">⊟ 均分</button>
    <button class="preset-btn" id="presetRight" title="详情区为主">◨ 详情</button>
  </div>
  <button class="clear-all" id="clearAll">清除筛选</button>
</header>

<div class="app" id="app">
  <div class="selection">
    <div class="sel-cols">
      <section class="fac1" id="actCol">
        <div class="col-title">
          <span>① 动作</span>
          <span class="col-clear" id="actClear" style="margin-left:auto">清除</span>
        </div>
        <details class="verb-filter" id="verbFilter">
          <summary>
            <span>动词表</span>
            <span id="vfSummary" class="vf-count"></span>
          </summary>
          <div class="verb-chips" id="verbChips"></div>
        </details>
        <div id="actSeqList"></div>
      </section>

      <section class="fac2" id="scopeCol">
        <div class="col-title">
          <span>② 作用域</span>
          <span class="col-count" id="scopeStat"></span>
          <span class="col-clear" id="scopeClear" style="margin-left:auto;align-self:center">清除</span>
        </div>
        <div class="facet-title">实质</div>
        <div id="shizhiTree"></div>
        <div class="facet-title">形式</div>
        <div id="xingshiTree"></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="wfCol">
        <div class="col-title"><span>④ 工序</span><span class="col-count" id="wfCnt"></span></div>
        <div id="wfList"></div>
      </section>
    </div>
  </div>

  <div class="splitter" id="splitter"></div>

  <div class="detail-area">
    <div class="detail-pad" id="detailBody">
      <div class="detail-empty">点击左侧工序查看详情</div>
    </div>
  </div>
</div>
</div>

<script>
let data = null;
let casesByIndex = {};
let SIDE_MODS = null;
let shiDesc = null;
let xingDesc = null;
const fragByKey = new Map();

const state = {
  actionSeqSig: null,        // selected action-sequence signature
  actionsSelected: new Set(),// selected verbs (AND filter)
  shizhiPath: null,
  xingshiPath: null,
  modSig: null,
  modInFilter: new Set(),
  modOutFilter: new Set(),
  wfKey: null,
  collapsed: new Set(),
};

const PHASE_IGNORE = new Set(["非制作"]);

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 if (k === 'style') e.setAttribute('style', 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;
}

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) };
}

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;
}

function workflowMatchesPath(w, key, selPath, descMap){
  if (!selPath) return true;
  const allowed = new Set(descMap.get(selPath) || [selPath]);
  const list = (key === 'shizhi') ? w.apply_shizhi_paths : w.apply_xingshi_paths;
  for (const p of (list || [])) if (allowed.has(p)) return true;
  return false;
}

// action sequence of a workflow, ignoring 非制作 steps
function actionSeqOfWorkflow(w){
  const seq = [];
  for (const s of w.steps){
    if (PHASE_IGNORE.has(s.phase)) continue;
    for (const fk of s.fragment_keys){
      const f = fragByKey.get(fk);
      if (f && f.action) seq.push(f.action);
    }
  }
  return seq;
}
function actionSigOfWorkflow(w){
  return actionSeqOfWorkflow(w).join(' → ');
}
// action set ignoring 非制作 (for verb filter)
function actionSetOfWorkflow(w){
  return new Set(actionSeqOfWorkflow(w));
}

function actionFilterActive(){
  return !!state.actionSeqSig || state.actionsSelected.size > 0;
}
function scopeFilterActive(){
  return !!(state.shizhiPath || state.xingshiPath);
}

function applyFilters(except){
  return data.workflows.filter(w => {
    if (except !== 'action' && actionFilterActive()){
      if (state.actionSeqSig){
        if (actionSigOfWorkflow(w) !== state.actionSeqSig) return false;
      }
      if (state.actionsSelected.size > 0){
        const set = actionSetOfWorkflow(w);
        for (const v of state.actionsSelected) if (!set.has(v)) return false;
      }
    }
    if (except !== 'scope' && scopeFilterActive()){
      if (state.shizhiPath && !workflowMatchesPath(w, 'shizhi', state.shizhiPath, shiDesc)) return false;
      if (state.xingshiPath && !workflowMatchesPath(w, 'xingshi', state.xingshiPath, xingDesc)) return false;
    }
    if (except !== 'mod' && state.modSig && w.io_signature !== state.modSig) return false;
    return true;
  });
}

function renderVerbFilter(){
  const baseFiltered = applyFilters('action');
  const counts = {};
  for (const w of baseFiltered) for (const v of actionSetOfWorkflow(w)) counts[v] = (counts[v]||0)+1;
  const wrap = $('verbChips'); wrap.innerHTML = '';
  for (const a of data.actions){
    const c = counts[a.verb] || 0;
    const isActive = state.actionsSelected.has(a.verb);
    const chip = el('span', {
      class: 'verb-chip' + (isActive ? ' active' : '') + (c === 0 && !isActive ? ' disabled' : ''),
      title: a.verb + (a.definition ? '\n\n' + a.definition : ''),
      onClick: () => {
        if (c === 0 && !isActive) return;
        if (state.actionsSelected.has(a.verb)) state.actionsSelected.delete(a.verb);
        else state.actionsSelected.add(a.verb);
        renderAll();
      }
    },
      el('span', null, a.verb),
      el('span', {class:'cnt'}, String(c))
    );
    wrap.appendChild(chip);
  }
  const n = state.actionsSelected.size;
  $('vfSummary').textContent = n > 0 ? (n + ' 项已选') : (data.actions.length + ' 个动词');
  if (n > 0) $('verbFilter').setAttribute('open', '');
}

function renderActionSeqs(){
  // collect all distinct action signatures across the filtered workflow set
  const baseFiltered = applyFilters('action');
  const counts = {};
  const examples = {};
  for (const w of data.workflows){
    const sig = actionSigOfWorkflow(w);
    if (!sig) continue;
    if (!(sig in counts)) { counts[sig] = 0; examples[sig] = actionSeqOfWorkflow(w); }
  }
  // count under current other filters
  const filteredCount = {};
  for (const w of baseFiltered){
    const sig = actionSigOfWorkflow(w);
    if (!sig) continue;
    filteredCount[sig] = (filteredCount[sig]||0)+1;
  }
  const wrap = $('actSeqList'); wrap.innerHTML = '';
  const sigs = Object.keys(counts).sort((a,b) => (filteredCount[b]||0) - (filteredCount[a]||0) || a.localeCompare(b));
  if (!sigs.length){
    wrap.appendChild(el('div', {class:'empty-msg'}, '没有动作序列'));
    return;
  }
  for (const sig of sigs){
    const c = filteredCount[sig] || 0;
    const isActive = state.actionSeqSig === sig;
    const node = el('div', {
      class: 'actseq' + (isActive ? ' active' : '') + (c === 0 && !isActive ? ' disabled' : ''),
      onClick: () => {
        if (c === 0 && !isActive) return;
        state.actionSeqSig = isActive ? null : sig;
        renderAll();
      }
    });
    node.appendChild(el('span', {class:'actseq-count'}, String(c)));
    const seq = examples[sig];
    seq.forEach((v, i) => {
      if (i > 0) node.appendChild(el('span', {class:'actseq-sep'}, ' › '));
      node.appendChild(el('span', {class:'actseq-chip'}, v));
    });
    wrap.appendChild(node);
  }
}

function renderActions(){
  $('actClear').classList.toggle('show', actionFilterActive());
  renderVerbFilter();
  renderActionSeqs();
}

function renderTreeFacet(roots, key, mountId, selPath, descMap){
  const wrap = $(mountId); wrap.innerHTML = '';
  const baseFiltered = applyFilters('scope');
  const hitCounts = new Map();
  for (const w of baseFiltered){
    const list = (key === 'shizhi') ? w.apply_shizhi_paths : w.apply_xingshi_paths;
    const seen = new Set();
    for (const p of (list || [])){
      const parts = (p || '').split('/').filter(Boolean);
      for (let i = 1; i <= parts.length; i++){
        const pp = '/' + parts.slice(0,i).join('/');
        if (seen.has(pp)) continue;
        seen.add(pp);
      }
    }
    for (const pp of seen) hitCounts.set(pp, (hitCounts.get(pp)||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 renderScope(){
  $('scopeStat').textContent = '路径树（双 facet）';
  $('scopeClear').classList.toggle('show', scopeFilterActive());
  renderTrees();
}

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 = '';
    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 (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 w of baseFiltered) counts[w.io_signature] = (counts[w.io_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 renderWorkflowCard(w){
  const isActive = state.wfKey === w.workflow_key;
  const node = el('div', {
    class: 'wf' + (isActive ? ' active' : ''),
    onClick: () => { state.wfKey = isActive ? null : w.workflow_key; renderWorkflows(); renderDetail(); }
  });
  const head = el('div', {class:'wf-head'},
    el('span', {class:'wf-meta', style:'margin-left:0'}, w.step_count + ' step · ' + w.capability_count + ' cap')
  );
  node.appendChild(head);

  // 动作序列
  const seq = el('div', {class:'wf-seq'});
  const visibleSeq = actionSeqOfWorkflow(w);
  if (visibleSeq.length){
    visibleSeq.forEach((v, i) => {
      if (i > 0) seq.appendChild(el('span', {class:'vsep'}, '›'));
      seq.appendChild(el('span', {class:'vchip'}, v));
    });
  } else {
    seq.appendChild(el('span', {style:'font-size:10px;color:var(--muted)'}, '—'));
  }
  node.appendChild(seq);

  // 作用域 (leaf names from apply paths)
  const scopeLeaves = [];
  const seenLeaf = new Set();
  const addLeaves = (paths, facet) => {
    for (const p of (paths || [])){
      const leaf = (p || '').split('/').filter(Boolean).pop();
      if (!leaf) continue;
      const key = facet + ':' + leaf;
      if (seenLeaf.has(key)) continue;
      seenLeaf.add(key);
      scopeLeaves.push({leaf, facet, path:p});
    }
  };
  addLeaves(w.apply_shizhi_paths, '实质');
  addLeaves(w.apply_xingshi_paths, '形式');
  const scopeRow = el('div', {class:'wf-row'},
    el('span', {class:'wf-lbl'}, '作用域'));
  const scopeVal = el('span', {class:'wf-val'});
  if (scopeLeaves.length){
    const MAX = 6;
    scopeLeaves.slice(0, MAX).forEach(s => {
      scopeVal.appendChild(el('span', {class:'wf-scope-chip', title:s.path}, s.leaf));
    });
    if (scopeLeaves.length > MAX){
      scopeVal.appendChild(el('span', {class:'wf-scope-more'}, '+'+(scopeLeaves.length - MAX)));
    }
  } else {
    scopeVal.appendChild(el('span', {style:'color:var(--muted)'}, '—'));
  }
  scopeRow.appendChild(scopeVal);
  node.appendChild(scopeRow);

  // IO
  const ioRow = el('div', {class:'wf-row'},
    el('span', {class:'wf-lbl'}, 'IO'),
    el('span', {class:'wf-val', style:'font-family:ui-monospace,SFMono-Regular,Menlo,monospace;color:var(--muted)'}, w.io_signature)
  );
  node.appendChild(ioRow);

  return node;
}

function renderWorkflows(){
  const filtered = applyFilters(null);
  const wrap = $('wfList'); wrap.innerHTML = '';
  $('wfCnt').textContent = filtered.length + ' / ' + data.workflows.length;
  if (!filtered.length){
    wrap.appendChild(el('div', {class:'empty-msg'}, '当前筛选下没有命中的工序'));
    return;
  }
  for (const w of filtered) wrap.appendChild(renderWorkflowCard(w));
}

function renderCaseDetail(wrap, caseIdx){
  const c = casesByIndex[caseIdx];
  if (!c) return;
  const det = el('details', {class:'case-detail'});
  const sumLabel = '📄 源: ' + (c.title || '案例 ' + caseIdx);
  det.appendChild(el('summary', null, sumLabel));
  const content = el('div', {class:'case-content'});

  if (c.author) {
    content.appendChild(el('div', {class:'case-author'}, '作者：' + c.author));
  }
  if (c.feedback && (c.feedback.like_count || c.feedback.comment_count || c.feedback.collect_count || c.feedback.share_count)){
    const fb = c.feedback;
    const row = el('div', {class:'case-feedback'});
    if (fb.like_count != null) row.appendChild(el('span', {class:'fb'}, '👍 ' + fb.like_count));
    if (fb.comment_count != null) row.appendChild(el('span', {class:'fb'}, '💬 ' + fb.comment_count));
    if (fb.collect_count != null) row.appendChild(el('span', {class:'fb'}, '⭐ ' + fb.collect_count));
    if (fb.share_count != null) row.appendChild(el('span', {class:'fb'}, '↗ ' + fb.share_count));
    content.appendChild(row);
  }

  const imgs = (c.images && c.images.length) ? c.images : (c.cover ? [c.cover] : []);
  if (imgs.length){
    const wrapImg = el('div', {class:'case-images'});
    for (const src of imgs) wrapImg.appendChild(el('img', {src, loading:'lazy'}));
    content.appendChild(wrapImg);
  }
  if (c.body){
    content.appendChild(el('div', {class:'case-body'}, c.body));
  }
  if (c.url){
    content.appendChild(el('a', {href:c.url, target:'_blank', rel:'noopener', class:'case-link'}, '🔗 访问原始链接'));
  }
  det.appendChild(content);
  wrap.appendChild(det);
}

// build atomic rows from a fragment: apply_shizhi + apply_xingshi entries, with markers
function buildAtomicRows(f){
  const rows = [];
  for (const e of (f.apply_shizhi || [])){
    rows.push({
      facet: '实质',
      category_path: e.category_path,
      source: e.source,
      leaf: (e.category_path || '').split('/').filter(Boolean).pop() || '—',
    });
  }
  for (const e of (f.apply_xingshi || [])){
    rows.push({
      facet: '形式',
      category_path: e.category_path,
      source: e.source,
      leaf: (e.category_path || '').split('/').filter(Boolean).pop() || '—',
    });
  }
  if (!rows.length) rows.push({ facet:'—', category_path:'', source:'apply', leaf:'—', empty:true });
  return rows;
}

function renderCapTable(w){
  const table = el('table', {class:'cap-table'});
  const thead = el('thead');
  thead.appendChild(el('tr', null,
    el('th', null, '步骤'),
    el('th', null, '能力动作'),
    el('th', null, '原子能力动作'),
    el('th', null, '原子能力作用域'),
    el('th', null, '原子能力Tool'),
    el('th', null, '原子能力类型'),
    el('th', null, '原子能力实现'),
    el('th', null, '能力输入'),
    el('th', null, '能力输出')
  ));
  table.appendChild(thead);

  const tbody = el('tbody');

  // pre-compute atom rows per cap to know rowspan totals per step
  const stepRows = []; // [{step, caps: [{f, atoms}], totalRows}]
  for (const s of w.steps){
    const caps = [];
    let total = 0;
    for (const fk of s.fragment_keys){
      const f = fragByKey.get(fk);
      if (!f) continue;
      const atoms = buildAtomicRows(f);
      caps.push({f, atoms});
      total += atoms.length;
    }
    if (caps.length === 0) continue;
    stepRows.push({step:s, caps, totalRows: total});
  }

  let stepIdx = 0;
  stepRows.forEach((sr, si) => {
    stepIdx += 1;
    sr.caps.forEach((cp, ci) => {
      const {f, atoms} = cp;
      const N = atoms.length;
      const tools = (f.tools && f.tools.length) ? f.tools.join(' / ') : '—';
      const inMods = (f.in_modalities && f.in_modalities.length) ? f.in_modalities : [];
      const outMods = (f.out_modalities && f.out_modalities.length) ? f.out_modalities : [];

      const renderIO = (mods, kind) => {
        if (!mods.length) return el('span', {class:'cell-dash'}, '—');
        const box = el('div');
        for (const m of mods) box.appendChild(el('span', {class:'mod-pill ' + kind}, m));
        return box;
      };

      atoms.forEach((a, ai) => {
        const isStepFirst = ai === 0 && ci === 0;
        const isCapFirst = ai === 0;
        const trClass = isStepFirst ? 'step-first' : (isCapFirst ? 'cap-first' : '');
        const tr = el('tr', trClass ? {class: trClass} : null);

        if (isStepFirst){
          tr.appendChild(el('td', {class:'cell-step', rowSpan: sr.totalRows}, String(stepIdx)));
        }
        if (isCapFirst){
          tr.appendChild(el('td', {class:'cell-action', rowSpan:N, title:f.fragment_id}, f.action || '—'));
        }
        // 原子能力动作: fallback to cap.action
        tr.appendChild(el('td', {class:'cell-atom-action'},
          a.empty ? el('span', {class:'cell-dash'}, '—') : (f.action || '—')));
        // 原子能力作用域
        if (a.empty){
          tr.appendChild(el('td', {class:'cell-dash'}, '—'));
        } else {
          const cell = el('td', {
            class:'cell-scope' + (a.source === 'suggest' ? ' suggest' : ''),
            title: a.category_path
          });
          const labelLine = el('div');
          const leaf = el('span', {class:'scope-leaf' + (a.source === 'suggest' ? ' suggest' : '')}, a.leaf);
          labelLine.appendChild(leaf);
          if (a.source === 'suggest') labelLine.appendChild(el('span', {class:'scope-mark'}, '✦'));
          labelLine.appendChild(el('span', {class:'scope-facet'}, a.facet));
          cell.appendChild(labelLine);
          cell.appendChild(el('div', {class:'scope-path'}, a.category_path));
          tr.appendChild(cell);
        }
        // 原子能力Tool
        tr.appendChild(el('td', {class:'cell-tool'}, tools));
        // 原子能力类型
        tr.appendChild(el('td', {class:'cell-type'}, 'prompt'));
        // 原子能力实现
        tr.appendChild(el('td', {class:'cell-impl'}, el('span', {class:'cell-dash'}, '—')));

        if (isCapFirst){
          tr.appendChild(el('td', {class:'cell-io', rowSpan:N}, renderIO(inMods, 'input')));
          tr.appendChild(el('td', {class:'cell-io', rowSpan:N}, renderIO(outMods, 'output')));
        }
        tbody.appendChild(tr);
      });
    });
  });
  table.appendChild(tbody);
  return table;
}

function renderDetail(){
  const wrap = $('detailBody'); wrap.innerHTML = '';
  const w = data.workflows.find(x => x.workflow_key === state.wfKey);
  if (!w){ wrap.appendChild(el('div', {class:'detail-empty'}, '点击左侧工序查看详情')); return; }

  wrap.appendChild(el('h2', null,
    el('span', {class:'case-badge'}, '案例 '+w.case_index),
    el('span', {class:'wf-badge'}, w.workflow_id),
    el('span', {class:'pill'}, w.step_count + ' step'),
    el('span', {class:'pill'}, w.capability_count + ' cap')
  ));

  renderCaseDetail(wrap, w.case_index);

  const sigSec = el('div', {class:'detail-section'}, el('h3', null, '签名'));
  sigSec.appendChild(el('div', {style:'font-size:12px;margin-bottom:4px'},
    el('span', {style:'color:var(--muted);margin-right:6px'}, 'IO'),
    el('span', null, w.io_signature)));
  sigSec.appendChild(el('div', {style:'font-size:12px;margin-bottom:4px'},
    el('span', {style:'color:var(--muted);margin-right:6px'}, '动作序列'),
    el('span', null, actionSigOfWorkflow(w) || '—')));
  wrap.appendChild(sigSec);

  const tableSec = el('div', {class:'detail-section'}, el('h3', null, '能力 / 原子能力'));
  tableSec.appendChild(renderCapTable(w));
  wrap.appendChild(tableSec);
}

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.actionSeqSig) mk('动作序列', state.actionSeqSig, () => { state.actionSeqSig = null; });
  if (state.actionsSelected.size) mk('含动词', [...state.actionsSelected].join(' + '), () => { state.actionsSelected.clear(); });
  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; });
  if (state.modSig) mk('模态', state.modSig, () => { state.modSig = null; });
  $('clearAll').classList.toggle('active', any);
}

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

// splitter
function setupSplitter(){
  const sp = $('splitter');
  let dragging = false;
  const setPct = (pct) => {
    pct = Math.max(4, Math.min(96, pct));
    document.documentElement.style.setProperty('--left-pct', pct + '%');
    // update preset active state
    let activeId = null;
    if (pct < 20) activeId = 'presetRight';
    else if (pct > 80) activeId = 'presetLeft';
    else if (pct >= 45 && pct <= 55) activeId = 'presetEven';
    for (const id of ['presetLeft','presetEven','presetRight']){
      $(id).classList.toggle('active', id === activeId);
    }
  };
  sp.addEventListener('mousedown', e => {
    dragging = true; sp.classList.add('dragging');
    document.body.style.cursor = 'col-resize';
    document.body.style.userSelect = 'none';
    e.preventDefault();
  });
  document.addEventListener('mousemove', e => {
    if (!dragging) return;
    const w = window.innerWidth;
    setPct((e.clientX / w) * 100);
  });
  document.addEventListener('mouseup', () => {
    if (!dragging) return;
    dragging = false; sp.classList.remove('dragging');
    document.body.style.cursor = ''; document.body.style.userSelect = '';
  });
  $('presetLeft').addEventListener('click', () => setPct(94));
  $('presetEven').addEventListener('click', () => setPct(50));
  $('presetRight').addEventListener('click', () => setPct(28));
  setPct(40);
}

function init(){
  for (const c of (data.cases || [])) casesByIndex[c.index] = c;
  for (const f of data.fragments) fragByKey.set(f.case_index + ':' + f.fragment_id, f);

  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() };
  })();

  shiDesc = buildDescMap(data.subtree.shizhi || []);
  xingDesc = buildDescMap(data.subtree.xingshi || []);

  $('loading').style.display = 'none';
  $('appRoot').style.display = '';

  $('clearAll').addEventListener('click', () => {
    state.actionSeqSig = null;
    state.actionsSelected.clear();
    state.shizhiPath = null; state.xingshiPath = null;
    state.modSig = null;
    state.modInFilter.clear(); state.modOutFilter.clear();
    renderAll();
  });
  $('actClear').addEventListener('click', () => {
    state.actionSeqSig = null;
    state.actionsSelected.clear();
    renderAll();
  });
  $('scopeClear').addEventListener('click', () => {
    state.shizhiPath = null; state.xingshiPath = null;
    renderAll();
  });
  $('modClear').addEventListener('click', () => {
    state.modSig = null; state.modInFilter.clear(); state.modOutFilter.clear();
    renderAll();
  });

  setupSplitter();
  renderAll();
}

fetch('/api/viz/data/workflow')
  .then(r => {
    if (!r.ok) throw new Error('fetch failed: ' + r.status);
    return r.json();
  })
  .then(d => { data = d; init(); })
  .catch(err => {
    $('loading').textContent = '加载失败：' + err.message + '。请先上传数据：POST /api/viz/data/workflow';
  });
</script>
</body>
</html>