howard
/
Agent


			
				
					
						
						
							123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554555556557558559560561562563564565566567568569570571572573574575576577578579580581582583584585586587588589590591592593594595596597598599600601602603604605606607608609610611612613614615616617618619620621622623624625626627628629630631632633634635636637638639640641642643644645646647648649650651652653654655656657658659660661662663664665666667668669670671672673674675676677678679680681682683684685686687688689690691692693694695696697698699700701702703704705706707708709710711712713714715716717718719720721722723724725726727728729730731732733734735736737738739740741742743744745746747748749750751752753754755756757758759760761762763764765766767768769770771772773774775776777778779780781782783784785786787788789790791792793794795796797798799800801802803804805806807808809810811812813814815816817818819820821822823824825826827828829830831832833834835836837838839840841842843844845846847848849850851852853854855856857858859860861862863864865866867868869870871872873874875876877878
							<!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;
  }
  *{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)}

  main{display:grid;grid-template-columns:200px 260px 220px 380px 1fr;
    height:calc(100vh - 41px);min-width:1520px}
  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:#fafbfd}
  section.fac3{background:var(--panel)}
  section.fac4{background:#fafbfd}
  section.detail{background:var(--panel)}

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

  /* col-1 action tabs */
  .act-tabs{display:flex;gap:4px;margin:0 0 8px;border-bottom:1px solid var(--border);padding-bottom:5px}
  .act-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}
  .act-tab.active{color:var(--fg);background:var(--panel2);border-color:var(--border)}
  .act-tab:hover:not(.active){color:var(--fg)}
  .act-pane{display:none}
  .act-pane.active{display:block}
  .act-meta{font-size:10px;color:var(--muted);margin:0 4px 8px;line-height:1.4}

  /* phase signature list */
  .phasesig{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.4}
  .phasesig:hover:not(.disabled):not(.active){border-color:var(--accent)}
  .phasesig.active{border-color:var(--accent);background:#eff6ff;
    box-shadow:0 0 0 1px var(--accent) inset}
  .phasesig.disabled{opacity:.42;cursor:not-allowed}
  .phasesig-count{float:right;font-size:10px;color:var(--muted);
    background:var(--bg);padding:1px 5px;border-radius:8px}
  .phasesig.active .phasesig-count{background:rgba(255,255,255,.3);color:var(--accent)}

  /* 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-title{font-size:12px;color:#334155;margin:3px 0;line-height:1.4;
    display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
  .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}
  .vchip{font-size:10px;padding:2px 6px;border-radius:3px;font-weight:600;line-height:1.3;
    border:1px solid transparent;white-space:nowrap}
  .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 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}
  .body-text{font-size:12px;line-height:1.6;color:#334155;background:var(--code);
    padding:8px 10px;border-radius:5px;white-space:pre-wrap}
  .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)}
  .pill.cfg{background:var(--both-bg);color:var(--both-fg)}
  .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:3px;margin-left:4px;line-height:1.45}
  .excerpt-line{color:var(--muted);font-size:11px;margin-left:4px;line-height:1.45;margin-bottom:6px;
    border-left:2px solid var(--border);padding-left:6px}
  .excerpt-line .em{color:#334155}
  .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:#334155;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)}

  /* case-detail (original-post) section */
  .case-detail{margin:8px 0;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}

  /* step section */
  .step-sec{margin:10px 0;border:1px solid var(--border);border-radius:6px;background:var(--panel)}
  .step-head{display:flex;align-items:center;gap:8px;padding:6px 10px;
    border-bottom:1px solid var(--border);font-size:11px;background:var(--panel2)}
  .step-id{background:var(--accent);color:#fff;padding:1px 6px;border-radius:3px;font-weight:600;font-size:10px}
  .step-phase{padding:1px 6px;border-radius:3px;font-size:10px;font-weight:600}
  .step-order{color:var(--muted);font-size:10px}
  .step-altnote{margin-left:auto;font-size:10px;color:var(--warn)}
  .cap{padding:8px 10px;border-top:1px dashed var(--border)}
  .cap:first-child{border-top:none}
  .cap-head{display:flex;align-items:center;gap:6px;margin-bottom:4px;flex-wrap:wrap}
  .cap-id{background:var(--accent2);color:#fff;padding:1px 5px;border-radius:3px;font-size:10px;font-weight:600}
  .cap-act{background:var(--warn);color:#fff;padding:1px 5px;border-radius:3px;font-size:10px;font-weight:600}
  .cap-sig{font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:10px;color:var(--muted)}
  .cap-body{font-size:12px;line-height:1.55;color:#334155;background:var(--code);
    padding:6px 9px;border-radius:4px;white-space:pre-wrap;margin:4px 0}
  .cap-meta{font-size:10px;color:var(--muted);margin-top: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>
  <button class="clear-all" id="clearAll">清除全部筛选</button>
</header>

<main>
  <section class="fac1" id="actCol">
    <div class="col-title">
      <span>① 动作</span>
      <span class="col-clear" id="actClear" style="margin-left:auto">清除</span>
    </div>
    <div class="act-tabs">
      <div class="act-tab" data-mode="multiset" id="tabMulti">动作</div>
      <div class="act-tab" data-mode="phase" id="tabPhase">结构</div>
    </div>
    <div class="act-pane" id="paneMulti">
      <div class="act-meta">多选 · 工序须包含所有选中动作（AND）</div>
      <div id="actList"></div>
    </div>
    <div class="act-pane" id="panePhase">
      <div class="act-meta">单选 · 完整 phase 序列</div>
      <div id="phaseList"></div>
    </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>

  <section class="detail" id="detailCol">
    <div class="col-title"><span>⑤ 工序详情</span></div>
    <div id="detailBody"><div class="detail-empty">点击左侧工序查看详情</div></div>
  </section>
</main>
</div>

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

const state = {
  actionMode: 'multiset',
  actionsSelected: new Set(),
  phaseSig: null,
  shizhiPath: null,
  xingshiPath: null,
  modSig: null,
  modInFilter: new Set(),
  modOutFilter: new Set(),
  wfKey: null,
  collapsed: 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;
}

function actionFilterActive(){
  if (state.actionMode === 'multiset') return state.actionsSelected.size > 0;
  return !!state.phaseSig;
}
function scopeFilterActive(){
  return !!(state.shizhiPath || state.xingshiPath);
}

function applyFilters(except){
  return data.workflows.filter(w => {
    if (except !== 'action' && actionFilterActive()){
      if (state.actionMode === 'multiset'){
        const set = new Set(w.actions_set);
        for (const v of state.actionsSelected) if (!set.has(v)) return false;
      } else {
        if (w.phase_signature !== state.phaseSig) 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 renderActionMultiset(){
  const baseFiltered = applyFilters('action');
  const counts = {};
  for (const w of baseFiltered) for (const v of w.actions_set) counts[v] = (counts[v]||0)+1;
  const wrap = $('actList'); wrap.innerHTML = '';
  for (const a of data.actions){
    const c = counts[a.verb] || 0;
    const isActive = state.actionsSelected.has(a.verb);
    const node = el('div', {
      class: 'item' + (isActive ? ' active' : '') + (c === 0 && !isActive ? ' disabled' : ''),
      onClick: () => {
        if (c === 0 && !isActive) return;
        if (state.actionsSelected.has(a.verb)) state.actionsSelected.delete(a.verb);
        else state.actionsSelected.add(a.verb);
        renderAll();
      }
    });
    const stack = el('div', {class:'item-stack'},
      el('div', {class:'item-name'}, a.verb),
      a.definition ? el('div', {class:'item-def'}, a.definition) : null);
    node.appendChild(stack);
    node.appendChild(el('span', {class:'item-count'}, String(c)));
    wrap.appendChild(node);
  }
}

function renderActionPhase(){
  const baseFiltered = applyFilters('action');
  const counts = {};
  for (const w of baseFiltered) counts[w.phase_signature] = (counts[w.phase_signature]||0)+1;
  const wrap = $('phaseList'); wrap.innerHTML = '';
  const sigs = [...data.phaseSignatures].sort((a, b) => (counts[b]||0) - (counts[a]||0) || a.localeCompare(b));
  for (const sig of sigs){
    const c = counts[sig] || 0;
    const isActive = state.phaseSig === sig;
    const node = el('div', {
      class: 'phasesig' + (isActive ? ' active' : '') + (c === 0 && !isActive ? ' disabled' : ''),
      onClick: () => {
        if (c === 0 && !isActive) return;
        state.phaseSig = isActive ? null : sig;
        renderAll();
      }
    });
    node.appendChild(el('span', {class:'phasesig-count'}, String(c)));
    node.appendChild(document.createTextNode(sig));
    wrap.appendChild(node);
  }
}

function renderActions(){
  $('tabMulti').classList.toggle('active', state.actionMode === 'multiset');
  $('tabPhase').classList.toggle('active', state.actionMode === 'phase');
  $('paneMulti').classList.toggle('active', state.actionMode === 'multiset');
  $('panePhase').classList.toggle('active', state.actionMode === 'phase');
  $('actClear').classList.toggle('show', actionFilterActive());
  if (state.actionMode === 'multiset') renderActionMultiset();
  else renderActionPhase();
}

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 vchipStyle(phase){
  // Neutral chip styling (color no longer encodes phase).
  return 'background:var(--tag-bg);color:var(--fg);border-color:var(--border)';
}

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:'case-badge'}, '案例'+w.case_index),
    el('span', {class:'wf-badge'}, w.workflow_id),
    el('span', {class:'wf-meta'}, w.step_count + ' step · ' + w.capability_count + ' cap')
  );
  node.appendChild(head);
  if (w.case_title){
    node.appendChild(el('div', {class:'wf-title'}, w.case_title));
  }
  node.appendChild(el('div', {class:'wf-sig'}, w.io_signature));
  node.appendChild(el('div', {class:'wf-sig'}, w.phase_signature));

  const seq = el('div', {class:'wf-seq'});
  let prevStepIdx = -1;
  w.steps.forEach((s, si) => {
    if (!s.fragment_keys.length) return;
    if (prevStepIdx >= 0) seq.appendChild(el('span', {class:'vsep'}, '›'));
    prevStepIdx = si;
    s.fragment_keys.forEach((fk, ci) => {
      const f = fragByKey.get(fk);
      if (!f) return;
      if (ci > 0) seq.appendChild(el('span', {class:'vsep'}, '·'));
      seq.appendChild(el('span', {
        class:'vchip',
        style: vchipStyle(s.phase),
        title: 'step ' + s.step_id + ' / ' + s.phase + ' / ' + (f.action || '')
      }, f.action || '?'));
    });
  });
  node.appendChild(seq);
  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);
}

function renderCap(f){
  const cap = el('div', {class:'cap'});
  cap.appendChild(el('div', {class:'cap-head'},
    el('span', {class:'cap-id'}, f.fragment_id),
    el('span', {class:'cap-act'}, f.action || '?'),
    el('span', {class:'cap-sig'}, f.modality_signature)
  ));
  if (f.body) cap.appendChild(el('div', {class:'cap-body'}, f.body));

  const ioPills = el('div', {style:'margin-top:4px'});
  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;
  };
  ioPills.appendChild(ioRow('IN', f.inputs, 'in'));
  ioPills.appendChild(ioRow('OUT', f.outputs, 'out'));
  cap.appendChild(ioPills);

  const renderApply = (label, arr) => {
    if (!arr || !arr.length) return null;
    const sec = el('div', {style:'margin-top:6px'},
      el('div', {style:'font-size:10px;color:var(--muted);text-transform:uppercase;letter-spacing:.5px;margin-bottom:3px'},
        'Apply · ' + label));
    for (const e of arr){
      const isHighlighted =
        (label === '实质' && state.shizhiPath && (shiDesc.get(state.shizhiPath)||[]).includes(e.category_path)) ||
        (label === '形式' && state.xingshiPath && (xingDesc.get(state.xingshiPath)||[]).includes(e.category_path));
      const isSuggest = e.source === 'suggest';
      sec.appendChild(el('div', {
        class:'pathline' + (isSuggest ? ' suggest' : ''),
        style: isHighlighted ? 'color:#ca8a04;font-weight:600' : ''
      }, e.category_path + (isSuggest ? ' ✦' : '')));
      if (e.body_excerpt){
        sec.appendChild(el('div', {class:'excerpt-line'}, el('span', {class:'em'}, e.body_excerpt)));
      }
      if (e.body_excerpt_note){
        sec.appendChild(el('div', {class:'rationale'}, '— ' + e.body_excerpt_note));
      }
      if (e.rationale){
        sec.appendChild(el('div', {class:'rationale'}, '· ' + e.rationale));
      }
    }
    return sec;
  };
  const shi = renderApply('实质', f.apply_shizhi);
  if (shi) cap.appendChild(shi);
  const xing = renderApply('形式', f.apply_xingshi);
  if (xing) cap.appendChild(xing);

  if (f.tools && f.tools.length){
    cap.appendChild(el('div', {class:'cap-meta'}, 'tools: ' + f.tools.join(', ')));
  }
  if (f.is_alternative_to && f.is_alternative_to.length){
    cap.appendChild(el('div', {class:'cap-meta'}, 'alt_to: ' + f.is_alternative_to.join(', ')));
  }
  return cap;
}

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'}, 'phase'),
    el('span', null, w.phase_signature)));
  sigSec.appendChild(el('div', {style:'font-size:12px'},
    el('span', {style:'color:var(--muted);margin-right:6px'}, 'actions'),
    el('span', null, Object.entries(w.actions_multiset).map(([v,c])=>v+(c>1?'×'+c:'')).join(' · '))));
  wrap.appendChild(sigSec);

  const stepsSec = el('div', {class:'detail-section'}, el('h3', null, '工序步骤'));
  w.steps.forEach(s => {
    const sec = el('div', {class:'step-sec'});
    const head = el('div', {class:'step-head'},
      el('span', {class:'step-id'}, 'step '+s.step_id),
      el('span', {class:'step-phase', style: vchipStyle(s.phase)}, s.phase || '—'),
      el('span', {class:'step-order'}, 'order '+s.order),
      s.fragment_keys.length > 1 ? el('span', {class:'step-altnote'}, '⇆ '+s.fragment_keys.length+' 个替代方案') : null
    );
    sec.appendChild(head);
    if (!s.fragment_keys.length){
      sec.appendChild(el('div', {class:'empty-msg', style:'padding:10px'}, '(无 capability)'));
    } else {
      s.fragment_keys.forEach(fk => {
        const f = fragByKey.get(fk);
        if (!f) return;
        sec.appendChild(renderCap(f));
      });
    }
    stepsSec.appendChild(sec);
  });
  wrap.appendChild(stepsSec);

  wrap.appendChild(el('details', null,
    el('summary', null, '查看 workflow JSON'),
    el('pre', {class:'json-raw'}, JSON.stringify(w, 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.actionMode === 'multiset' && state.actionsSelected.size){
    mk('动作', [...state.actionsSelected].join(' + '), () => { state.actionsSelected.clear(); });
  } else if (state.actionMode === 'phase' && state.phaseSig){
    mk('结构', state.phaseSig, () => { state.phaseSig = null; });
  }
  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 renderStats(){}

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

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);
  PHASE_COLORS = data.phaseColors || {};
  PHASE_FG = data.phaseFg || {};

  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.actionsSelected.clear(); state.phaseSig = null;
    state.shizhiPath = null; state.xingshiPath = null;
    state.modSig = null;
    state.modInFilter.clear(); state.modOutFilter.clear();
    renderAll();
  });
  $('actClear').addEventListener('click', () => {
    if (state.actionMode === 'multiset') state.actionsSelected.clear();
    else state.phaseSig = null;
    renderAll();
  });
  $('scopeClear').addEventListener('click', () => {
    state.shizhiPath = null; state.xingshiPath = null;
    renderAll();
  });
  $('tabMulti').addEventListener('click', () => { state.actionMode = 'multiset'; renderAll(); });
  $('tabPhase').addEventListener('click', () => { state.actionMode = 'phase'; renderAll(); });
  $('modClear').addEventListener('click', () => {
    state.modSig = null; state.modInFilter.clear(); state.modOutFilter.clear();
    renderAll();
  });

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