howard
/
Agent


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

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

main{display:none;padding:24px 30px 80px;max-width:1920px;margin:0 auto}
main.on{display:block}
/* 聚类库:内嵌知识检索页,占满视口、无内边距 */
#view-cluster{padding:0;max-width:none}
#view-cluster.on{display:flex}
#cluster-frame{border:0;width:100%;height:calc(100vh - 60px);display:block}

/* ── 通用卡片/标签/按钮 ── */
.card{background:var(--card);border:1px solid var(--line);border-radius:12px;box-shadow:var(--shadow)}
.pill{display:inline-block;padding:1px 9px;border-radius:99px;font-size:11px;font-weight:500;
  border:1px solid var(--line-dark);background:#f7f6f2;color:var(--ink-soft);white-space:nowrap}
.pill.navy{background:#e8eef6;border-color:#bccbde;color:var(--navy)}
.pill.amber{background:var(--amber-bg);border-color:#ecc88a;color:var(--amber)}
.pill.teal{background:var(--teal-bg);border-color:#a9d6c8;color:var(--teal)}
.pill.red{background:#fbeae5;border-color:#e4ab9c;color:var(--seal)}
.pill.green{background:var(--green-bg);border-color:#a7d9b4;color:var(--green)}
.btn{
  border:1px solid var(--line-dark);background:var(--card);color:var(--ink);
  padding:6px 14px;border-radius:8px;font-size:13px;font-weight:500;transition:.15s;
}
.btn:hover{border-color:var(--blue);color:var(--blue);box-shadow:0 2px 8px rgba(37,99,235,.12)}
.btn.primary{background:var(--blue);border-color:var(--blue);color:#fff}
.btn.primary:hover{background:#1d4fc4;color:#fff;box-shadow:0 4px 12px rgba(37,99,235,.3)}
.btn.seal{background:var(--seal);border-color:var(--seal);color:#fff}
.btn.seal:hover{background:#a02f1a;color:#fff;box-shadow:0 4px 12px rgba(187,58,34,.3)}
.btn.sm{padding:3px 11px;font-size:12px}
.btn:disabled{opacity:.45;cursor:not-allowed;box-shadow:none}
select,input[type=text],input[type=number]{
  font-family:inherit;font-size:13px;padding:6px 10px;border:1px solid var(--line-dark);
  border-radius:8px;background:#fff;color:var(--ink);outline:none;transition:.15s;
}
select:focus,input:focus{border-color:var(--blue);box-shadow:0 0 0 3px rgba(37,99,235,.12)}
.empty{
  text-align:center;color:var(--ink-faint);padding:48px 20px;font-size:13px;line-height:2;
}
.empty .glyph{font-family:'Noto Serif SC',serif;font-size:42px;color:var(--line-dark);display:block}

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

/* ── Dataset 三栏 ── */
.ds-top{display:flex;align-items:center;gap:12px;margin-bottom:16px}
.mode-switch{display:flex;border:1px solid var(--line-dark);border-radius:10px;overflow:hidden;background:#fff}
.mode-switch button{border:0;background:transparent;padding:7px 24px;font-size:13px;font-weight:700;color:var(--ink-soft);transition:.15s}
.mode-switch button.on{background:var(--navy);color:#fff}
.ds-grid{display:grid;grid-template-columns:235px 350px minmax(0,1fr);gap:16px;align-items:start}
@media(max-width:1280px){.ds-grid{grid-template-columns:200px 320px minmax(0,1fr)}}
.col-head{display:flex;align-items:center;justify-content:space-between;padding:11px 14px;
  border-bottom:1px solid var(--line);font-weight:700;font-size:13px;letter-spacing:1px}
.col-head .n{font-size:11px;color:var(--ink-faint);font-weight:500}

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

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

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

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

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

/* 工序卡 */
.proc{border:1px solid var(--line);border-radius:10px;margin-bottom:22px;overflow:hidden;background:#fff;box-shadow:var(--shadow)}
.proc-head{padding:14px 16px;border-bottom:1px solid var(--line);background:#fafaf6}
.proc-head .nm{font-family:'Noto Serif SC',serif;font-weight:900;font-size:15px}
.proc-head .nm .pid{color:var(--seal);margin-right:6px;font-size:13px}
.proc-head .pp{font-size:12px;color:var(--ink-soft);margin-top:5px;line-height:1.6}
.proc-head .meta{display:flex;gap:6px;flex-wrap:wrap;margin-top:8px}
.decl{display:grid;grid-template-columns:1fr 1fr;gap:0;border-bottom:1px solid var(--line)}
.decl>div{padding:10px 16px}
.decl>div+div{border-left:1px solid var(--line)}
.decl .dl{font-size:10px;letter-spacing:2px;color:var(--ink-faint);margin-bottom:6px}
.decl .di{font-size:12px;line-height:1.7}
.decl .di b{font-weight:700}
/* 步骤表:固定列宽撑开,宿主容器 overflow-x 滚动 */
.steps{width:100%;min-width:1760px;table-layout:fixed;border-collapse:collapse;font-size:12px}
.steps th{padding:6px 8px;font-size:11px;font-weight:700;letter-spacing:1px;color:#fff;text-align:left}
.steps thead tr:first-child th{text-align:center;font-size:12px;letter-spacing:4px;padding:7px 4px}
.steps .h-req{background:var(--navy)} .steps .h-req2{background:#33547a}
.steps .h-in{background:var(--amber)} .steps .h-in2{background:#cd7522}
.steps .h-im{background:var(--teal)} .steps .h-im2{background:#2d8273}
.steps .h-out{background:var(--green)} .steps .h-out2{background:#2e6b45}
.steps td{padding:8px 9px;border:1px solid var(--line);vertical-align:top;line-height:1.6}
.steps tbody tr:nth-child(odd) td{background:#fdfdf9}
.steps td.c-in{background:var(--amber-bg)!important}
.steps td.c-out{background:var(--green-bg)!important}
.steps .sid{font-family:'IBM Plex Mono',monospace;font-weight:700;color:var(--navy);white-space:nowrap}
.steps .vtxt{color:var(--ink-soft);font-size:11.5px;word-break:break-all}
.inf{background:var(--infer)!important;position:relative;outline:1px dashed var(--infer-edge);outline-offset:-2px}
.inf .ib{position:absolute;top:-1px;right:-1px;background:var(--infer-edge);color:#fff;font-size:9px;
  padding:0 4px;border-radius:0 0 0 4px;font-weight:700}
.anchor{font-family:'IBM Plex Mono',monospace;font-size:10.5px;color:var(--ink-faint);word-break:break-all}

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

/* ── 帖子详情弹层 ── */
dialog#post-dialog{
  width:min(1100px,94vw);max-height:calc(100vh - 40px);border:none;border-radius:14px;
  padding:0;box-shadow:var(--shadow-lg);overflow:hidden;
  margin:auto;   /* 全局 reset 清掉了 dialog 默认 margin:auto,这里补回才能居中 */
}
dialog#post-dialog::backdrop{background:rgba(19,30,46,.5);backdrop-filter:blur(2px)}
.pd-wrap{display:flex;flex-direction:column;max-height:calc(100vh - 40px)}
.pd-head{
  display:flex;justify-content:space-between;gap:14px;align-items:flex-start;
  padding:16px 20px;border-bottom:1px solid var(--line);background:#fff;flex:none;
}
.pd-head h3{font-family:'Noto Serif SC',serif;font-size:18px;line-height:1.35;margin-top:6px}
.pd-meta{display:flex;gap:8px;flex-wrap:wrap;align-items:center;font-size:12px;color:var(--ink-soft)}
.pd-close{border:none;background:#f1f0ea;width:30px;height:30px;border-radius:8px;font-size:14px;
  color:var(--ink-soft);flex:none;transition:.15s}
.pd-close:hover{background:var(--seal);color:#fff}
.pd-body{display:grid;grid-template-columns:1.05fr .95fr;gap:20px;padding:18px 20px;overflow:auto}
@media(max-width:920px){.pd-body{grid-template-columns:1fr}}
.pd-body>section,.pd-body>aside{min-width:0}
.pd-sec-title{font-weight:800;margin:16px 0 8px;font-size:13px}
.pd-sec-title:first-child{margin-top:0}
.pd-verdict{background:#eaf6fb;border-left:4px solid #2c9ec7;padding:10px 12px;color:#22566b;
  border-radius:6px;font-size:13px;line-height:1.6}
.pd-raw{white-space:pre-wrap;background:#faf9f5;border:1px solid var(--line);border-radius:10px;
  padding:12px;max-height:320px;overflow:auto;color:#3d3f44;font-size:13px;line-height:1.7}
.pd-images{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}
.pd-images img{width:100%;max-height:250px;object-fit:contain;border:1px solid var(--line);
  border-radius:10px;background:#f3f2ed;cursor:zoom-in}
.pd-tags{display:flex;gap:6px;flex-wrap:wrap;margin-top:12px}
.pd-score-head{display:flex;justify-content:space-between;align-items:center;margin-bottom:10px}
.pd-score-head .t{font-weight:800;font-size:14px}
.pd-overall{display:flex;align-items:center;gap:6px;font-size:12.5px;font-weight:700;color:var(--ink-soft);
  background:#faf9f5;border:1px solid var(--line);padding:4px 12px;border-radius:8px}
.pd-overall b{font-size:20px;color:var(--blue);font-weight:900;line-height:1}
.sc-card{border:1px solid var(--line);border-radius:10px;background:#fff;overflow:hidden;margin-bottom:12px}
.sc-card-head{display:flex;justify-content:space-between;align-items:center;gap:10px;
  padding:10px 12px;background:#faf9f5;border-bottom:1px solid var(--line);font-size:13px;font-weight:800}
.sc-card-head .badge{display:inline-grid;place-items:center;width:20px;height:20px;border-radius:5px;
  background:var(--navy);color:#fff;font-size:10px;font-weight:700;margin-right:7px}
.sc-card-head .avg{font-size:12px;color:var(--ink-faint);font-weight:600}
.sc-card-head .avg b{font-size:17px;color:var(--blue);font-weight:900}
.sc-card-body{display:grid;gap:8px;padding:11px 12px}
/* 维度分组小标题:参考 mode_procedure —— 一级虚线大写,二级点线常规 */
.sc-sub{font-size:11px;font-weight:800;letter-spacing:.8px;color:var(--ink-faint);text-transform:uppercase;
  margin:14px 0 8px;padding-bottom:5px;border-bottom:1px dashed var(--line-dark)}
.sc-card-body>.sc-sub:first-child{margin-top:2px}
.sc-sub.lv2{font-size:11px;font-weight:700;letter-spacing:.3px;text-transform:none;color:var(--ink-soft);
  margin:11px 0 6px;padding-bottom:4px;border-bottom:1px dotted var(--line)}
.sc-row{display:grid;grid-template-columns:118px 1fr 30px 16px;gap:9px;align-items:center;font-size:12.5px}
.sc-row .meter{height:8px;border-radius:99px;background:#edebe4;overflow:hidden}
.sc-row .meter span{display:block;height:100%;border-radius:99px;
  background:linear-gradient(90deg,#60a5fa,#2563eb)}
.sc-row b{font-weight:700;text-align:right}
.sc-row .info{color:var(--ink-faint);cursor:pointer;font-size:12px;opacity:.75;user-select:none}
.sc-row .info:hover{color:var(--blue);opacity:1}
/* 判定理由弹层:点击 ⓘ 时浮现,挂在 dialog 顶层 */
.score-pop{position:fixed;z-index:90;width:288px;max-width:calc(100vw - 24px);background:var(--card);
  border:1px solid var(--line-dark);border-radius:10px;box-shadow:var(--shadow-lg);padding:12px 14px;
  font-size:12.5px;line-height:1.65;color:var(--ink-soft);animation:popIn .12s ease}
.score-pop .sp-head{display:flex;align-items:center;gap:8px;margin-bottom:8px;
  padding-bottom:8px;border-bottom:1px solid var(--line)}
.score-pop .sp-tag{font-size:9px;letter-spacing:1.5px;color:var(--ink-faint);font-weight:700;
  border:1px solid var(--line-dark);border-radius:5px;padding:2px 6px;white-space:nowrap}
.score-pop .sp-name{font-weight:800;font-size:13px;color:var(--ink)}
.score-pop .sp-score{margin-left:auto;font-size:16px;font-weight:900;color:var(--blue)}
.score-pop .sp-body{white-space:pre-wrap}
@keyframes popIn{from{opacity:0;transform:translateY(-4px)}to{opacity:1;transform:none}}

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

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

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

<header>
  <div class="logo">
    <div class="seal">解</div>
    <div><b>mode_workflow</b><small>解构工作台 · MODE WORKBENCH</small></div>
  </div>
  <nav id="nav">
    <a href="#dashboard" data-tab="dashboard">Dashboard</a>
    <a href="#dataset" data-tab="dataset">Dataset</a>
    <a href="#cluster" data-tab="cluster">聚类库</a>
  </nav>
  <div class="spacer"></div>
  <div class="hint">SEARCH · EXTRACT · ARCHIVE</div>
</header>

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

<main id="view-dataset">
  <div class="ds-top">
    <div class="mode-switch">
      <button id="m-process" class="on">工序</button>
      <button id="m-tools">工具</button>
    </div>
    <div style="flex:1"></div>
    <button class="btn seal" id="btn-new-search">＋ 新建搜索</button>
  </div>
  <div class="ds-grid">
    <div class="card">
      <div class="col-head">QUERY <span class="n" id="q-count"></span></div>
      <div class="qlist" id="query-list"><div class="empty">暂无 query</div></div>
    </div>
    <div class="card">
      <div class="col-head">帖子
        <span style="display:flex;gap:8px;align-items:center">
          <span class="n" id="p-count"></span>
          <button class="btn sm" id="btn-batch" disabled hidden>批量解构</button>
        </span>
      </div>
      <div class="plat-tabs" id="plat-tabs" hidden></div>
      <div class="plist" id="post-list"><div class="empty"><span class="glyph">←</span>先选择左侧 query</div></div>
    </div>
    <div class="card xp">
      <div class="xp-head" id="xp-head"><span class="st">解构结果</span></div>
      <div class="xp-body" id="xp-body"><div class="empty"><span class="glyph">←</span>选择一个帖子查看解构结果</div></div>
    </div>
  </div>
</main>

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

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

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

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

<script>
/* ════ 基础 ════ */
const $ = s => document.querySelector(s);
const api = (p, opt) => fetch(p, opt).then(async r => {
  if (!r.ok) throw Object.assign(new Error('api'), {status: r.status, body: await r.json().catch(() => ({}))});
  return r.json();
});
const esc = s => String(s ?? '').replace(/[&<>"']/g, c => ({'&':'&amp;','<':'&lt;','>':'&gt;','"':'&quot;',"'":'&#39;'}[c]));
const state = {tab:'dashboard', mode:'process', queryId:null, caseId:null, post:null,
               version:null, platFilter:'all', doneFilter:true, selected:new Set(), queries:[], posts:[]};
const PLAT_CLS = p => ({xhs:'xhs',gzh:'gzh',zhihu:'zhihu',douyin:'douyin',sph:'sph',youtube:'youtube',x:'x'})[p] || 'other';
const PLAT_NAME = p => ({xhs:'小红书',gzh:'公众号',zhihu:'知乎',douyin:'抖音',sph:'视频号',youtube:'YouTube',x:'X'})[p] || p || '?';
/* 渠道 logo 徽标(品牌色圆角方块,hover 显示渠道名) */
const PLAT_LOGO = (p, size = 18) => {
  const glyph = (bg, ch) => `<svg width="${size}" height="${size}" viewBox="0 0 24 24">
    <rect width="24" height="24" rx="5.5" fill="${bg}"/>
    <text x="12" y="16.6" font-size="12" font-weight="700" fill="#fff" text-anchor="middle"
          font-family="'Noto Sans SC',sans-serif">${ch}</text></svg>`;
  const svgs = {
    xhs: glyph('#ff2442', '红'),
    zhihu: glyph('#0084ff', '知'),
    gzh: glyph('#07c160', '公'),
    douyin: glyph('#161823', '抖'),
    sph: glyph('#fa6d20', '视'),
    x: glyph('#15202b', 'X'),
    youtube: `<svg width="${size}" height="${size}" viewBox="0 0 24 24">
      <rect width="24" height="24" rx="5.5" fill="#f00"/>
      <polygon points="9.8,7.8 17,12 9.8,16.2" fill="#fff"/></svg>`,
  };
  return svgs[p]
    ? `<span class="plat-logo" title="${PLAT_NAME(p)}">${svgs[p]}</span>`
    : `<span class="plat other">${esc(PLAT_NAME(p))}</span>`;
};
const MODELS_PROC = ['anthropic/claude-sonnet-4-6','google/gemini-3.1-flash-lite'];
const MODELS_TOOL = ['google/gemini-3.1-flash-lite','anthropic/claude-sonnet-4-6'];
const scoreCls = v => v == null ? 's0' : v >= 9 ? 's9' : v >= 8 ? 's8' : v >= 6 ? 's6' : 's0';

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

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

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

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

  const list = visiblePosts();
  $('#p-count').textContent = all.length
    ? ((state.platFilter==='all' && !state.doneFilter) ? `${all.length} 帖` : `${list.length} / ${all.length} 帖`) : '';
  if (!all.length){
    $('#post-list').innerHTML = '<div class="empty">该 query 暂无帖子</div>'; return;
  }
  if (!list.length){
    $('#post-list').innerHTML = `<div class="empty">${state.doneFilter ? '该筛选下暂无已解构帖子' : '该渠道暂无帖子'}</div>`; return;
  }
  $('#post-list').innerHTML = list.map(p => {
    const done = state.mode === 'process' ? p.has_process : p.has_tools;
    const kt = (p.knowledge_type || []).map(k => `<span class="pill">${esc(k)}</span>`).join('');
    const sb = p.overall_score != null
      ? `<span class="score-badge ${scoreCls(p.overall_score)} num"
              onclick="event.stopPropagation();openPostDetail('${esc(p.case_id)}')">${p.overall_score}</span>`
      : '';
    return `<div class="post ${p.case_id===state.caseId?'on':''}" onclick="selectPost('${esc(p.case_id)}')">
      <div style="flex:1;min-width:0">
        <div class="pt">${esc(p.title || '(无标题)')}</div>
        <div class="pm">
          ${PLAT_LOGO(p.platform)}
          ${p.adopted ? '<span class="pill green">采纳</span>' : ''}
          ${kt}
          ${done ? '<span class="done-dot">● 已解构</span>' : ''}
        </div>
      </div>
      ${sb}
    </div>`;
  }).join('');
}
function toggleSel(cid, on){ on ? state.selected.add(cid) : state.selected.delete(cid); updateBatchBtn(); }
function updateBatchBtn(){
  const b = $('#btn-batch');
  b.disabled = !state.selected.size;
  b.textContent = state.selected.size ? `批量解构(${state.selected.size})` : '批量解构';
}
$('#btn-batch').onclick = () => state.selected.size && startExtract([...state.selected]);

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

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

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

/* ── 判定理由弹层:点击 ⓘ 浮现,符合当前页面样式 ── */
let _scorePop = null;
function closeScorePop(){
  if (_scorePop){ _scorePop.remove(); _scorePop = null; }
  document.removeEventListener('mousedown', _scorePopOutside, true);
}
function _scorePopOutside(e){
  if (_scorePop && !_scorePop.contains(e.target) && !e.target.classList.contains('info')) closeScorePop();
}
function showScorePop(el){
  const reopen = _scorePop && _scorePop._anchor === el;
  closeScorePop();
  if (reopen) return;                          // 再次点击同一图标 → 收起
  const score = el.dataset.score;
  const pop = document.createElement('div');
  pop.className = 'score-pop';
  pop._anchor = el;
  pop.innerHTML = `<div class="sp-head">
      <span class="sp-tag">判定理由</span>
      <span class="sp-name">${esc(el.dataset.label || '')}</span>
      ${score !== '' && score != null ? `<span class="sp-score">${esc(score)}</span>` : ''}
    </div>
    <div class="sp-body">${esc(el.dataset.reason || '')}</div>`;
  // 挂在 dialog 内,确保位于 showModal 顶层之上
  (document.getElementById('post-dialog') || document.body).appendChild(pop);
  _scorePop = pop;
  // 定位:图标下方右对齐;越界则上翻 / 收边
  const r = el.getBoundingClientRect();
  let top = r.bottom + 8, left = r.right - pop.offsetWidth;
  if (left < 12) left = 12;
  if (top + pop.offsetHeight > window.innerHeight - 12) top = r.top - pop.offsetHeight - 8;
  if (top < 12) top = 12;
  pop.style.top = top + 'px';
  pop.style.left = left + 'px';
  setTimeout(() => document.addEventListener('mousedown', _scorePopOutside, true), 0);
}
document.getElementById('post-dialog')?.addEventListener('close', closeScorePop);
function openPostDetail(cid){
  const p = state.posts.find(x => x.case_id === cid);
  if (!p) return;
  const e = p.llm_evaluation || {};
  const meta = [];
  meta.push(`${PLAT_LOGO(p.platform)}<span style="font-weight:600">${esc(PLAT_NAME(p.platform))}</span>`);
  meta.push(p.adopted ? '<span class="pill green">采纳/命中</span>' : '<span class="pill">未采纳</span>');
  if (p.publish_time) meta.push(`<span>${esc(String(p.publish_time).slice(0,16))}</span>`);
  if (p.like_count != null) meta.push(`<span>👍 ${p.like_count}</span>`);
  if (p.quality_grade) meta.push(`<span>质量 ${esc(p.quality_grade)} ${p.quality_score ?? ''}</span>`);
  if (p.url) meta.push(`<a href="${esc(p.url)}" target="_blank">原文 ↗</a>`);
  $('#pd-meta').innerHTML = meta.join('');
  $('#pd-title').textContent = p.title || '(无标题)';
  const verdict = e['判定理由'] || e['理由'] || '';
  $('#pd-verdict').innerHTML = verdict ? `<div class="pd-verdict">${esc(verdict)}</div>` : '';
  $('#pd-text').textContent = p.body || '(无正文)';
  const imgs = (p.images || []).filter(Boolean);
  $('#pd-images').innerHTML = imgs.length
    ? imgs.map(s => `<img src="${esc(s)}" referrerpolicy="no-referrer" loading="lazy"
        onclick="window.open(this.src)" onerror="this.style.opacity=.25">`).join('')
    : '<p style="color:var(--ink-faint);font-size:12px">搜索详情未返回图片。</p>';
  $('#pd-tags').innerHTML = [
    ...(p.knowledge_type || []).map(t => '类型:' + t),
    ...(p.found_by || []).map(q => '命中:' + q),
  ].map(t => `<span class="pill">${esc(t)}</span>`).join('');
  $('#pd-overall').innerHTML = p.overall_score != null
    ? `${p.overall_score}<span style="font-size:11px;color:var(--ink-faint);font-weight:500"> /10</span>` : '—';
  /* 评分卡:相关性 + 质量(均分 + 各维度,ⓘ hover 看理由) */
  $('#pd-scores').innerHTML = [['01','相关性'],['02','质量']].map(([no, key], i) => {
    const node = e[key];
    if (!node) return '';
    const vs = collectScores(node);
    const avg = vs.length ? (vs.reduce((a,b)=>a+b,0)/vs.length).toFixed(1) : 'N/A';
    return `<div class="sc-card">
      <div class="sc-card-head">
        <span><span class="badge">${no}</span>${esc(key)}</span>
        <span class="avg">均分 <b>${avg}</b>/10</span>
      </div>
      <div class="sc-card-body">${(key === '质量' ? renderQuality(node) : walkScores(node)) || '<span style="color:var(--ink-faint)">无评分</span>'}</div>
    </div>`;
  }).join('') || '<div class="empty">无评估数据</div>';
  $('#post-dialog').showModal();
}

/* ════ Dataset:右栏解构结果 ════ */
function renderExtractEmpty(){
  $('#xp-head').innerHTML = '<span class="st">解构结果</span>';
  $('#xp-body').innerHTML = '<div class="empty"><span class="glyph">←</span>选择一个帖子查看解构结果</div>';
}
async function selectPost(cid){
  state.caseId = cid; state.version = null;
  state.post = state.posts.find(p => p.case_id === cid) || null;
  renderPosts();
  await loadExtract();
}
async function loadExtract(){
  if (!state.caseId) return renderExtractEmpty();
  const isProc = state.mode === 'process';
  const vURL = `/api/${isProc?'process':'tools'}_versions?case_id=` + encodeURIComponent(state.caseId);
  const dURL = `/api/${isProc?'process':'tools'}?case_id=` + encodeURIComponent(state.caseId)
             + (state.version ? '&version=' + encodeURIComponent(state.version) : '');
  let versions = [], data = null, missing = false;
  try { versions = await api(vURL); } catch(e){}
  try { data = await api(dURL); } catch(e){ if (e.status === 404) missing = true; else throw e; }
  renderExtractHead(versions, data, missing);
  const body = $('#xp-body');
  if (missing || !data){
    body.innerHTML = `<div class="empty">该帖暂无${isProc?'工序':'工具'}解构<br><br>
      <button class="btn primary" onclick="startExtract(['${esc(state.caseId)}'])">开始解构</button></div>`;
    return;
  }
  state.version = data.version;
  syncVersionSelect();
  body.innerHTML = isProc ? renderProcedures(data) : renderTools(data);
  if (!isProc) requestAnimationFrame(markClampedCells);
}
function renderExtractHead(versions, data, missing){
  const isProc = state.mode === 'process';
  const title = state.post ? esc(state.post.title || state.caseId) : esc(state.caseId || '');
  const opts = versions.map((v,i) =>
    `<option value="${esc(v.version)}">${esc(v.version)}${i===0?' (最新)':''} · ${v.n}${isProc?'工序':'工具'}</option>`).join('');
  const models = (isProc ? MODELS_PROC : MODELS_TOOL).map(m => `<option>${m}</option>`).join('');
  $('#xp-head').innerHTML = `
    <span class="st">大模型${isProc?'工序':'工具'}:<em>${missing?'未提取':'已提取'}</em></span>
    <span style="font-size:12px;color:var(--ink-faint);max-width:330px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap" title="${title}">${title}</span>
    <span class="spacer"></span>
    ${versions.length ? `<select id="ver-sel">${opts}</select>` : ''}
    <select id="model-sel" title="解构模型">${models}</select>
    <button class="btn sm primary" onclick="startExtract(['${esc(state.caseId||'')}'])">${missing?'提取':'♻ 重新生成'}</button>
    <button class="btn sm" onclick="showTaskPanel()" title="重新打开任务日志面板">📋 操作日志</button>`;
  const vs = $('#ver-sel');
  if (vs) vs.onchange = () => { state.version = vs.value; loadExtract(); };
}
function syncVersionSelect(){ const vs = $('#ver-sel'); if (vs && state.version) vs.value = state.version; }

/* ── 工序渲染 ── */
function renderProcedures(data){
  const src = data.source || {};
  const srcLine = src.title ? `<div class="pill" style="margin-bottom:14px">▸ 原文:${esc(src.title)}</div>` : '';
  return srcLine + (data.procedures || []).map(p => {
    const d = p.declarations || {};
    const ins = (d.inputs || []).map(x =>
      `<span class="pill amber">${esc(x.type || '')}</span> ${x.name?`<b>${esc(x.name)}</b>`:''} ${x.desc?`<span style="color:var(--ink-faint)">— ${esc(x.desc)}</span>`:''}`).join('<br>') || '<span style="color:var(--ink-faint)">无</span>';
    const ret = d.returns ? `<span class="pill teal">${esc(d.returns.type || '')}</span>` : '<span style="color:var(--ink-faint)">无</span>';
    return `<div class="proc">
      <div class="proc-head">
        <div class="nm"><span class="pid">工序 ${esc(p.id || '')}</span>${esc(p.name || '')}</div>
        ${p.purpose ? `<div class="pp">#目的:${esc(p.purpose)}</div>` : ''}
        <div class="meta">
          ${p.category ? `<span class="pill red">类别:${esc(p.category)}</span>` : ''}
          ${src.platform ? `<span class="pill">#平台:${esc(src.platform)}</span>` : ''}
          ${src.author ? `<span class="pill">#作者:${esc(src.author)}</span>` : ''}
          <span class="pill">case:${esc(data.case_id)}</span>
          ${(p.tools_used||[]).map(t=>`<span class="pill teal">${esc(t)}</span>`).join('')}
        </div>
      </div>
      <div class="decl">
        <div><div class="dl">输入</div><div class="di">${ins}</div></div>
        <div><div class="dl">返回</div><div class="di">${ret}</div></div>
      </div>
      ${renderSteps(p.steps || [])}
    </div>`;
  }).join('') || '<div class="empty">本版本无工序</div>';
}
function renderSteps(steps){
  if (!steps.length) return '<div class="empty">无步骤</div>';
  let rows = '';
  for (const s of steps){
    const ins = (s.inputs && s.inputs.length) ? s.inputs : [null];
    const outs = (s.outputs && s.outputs.length) ? s.outputs : [null];
    const n = Math.max(ins.length, outs.length);
    for (let i = 0; i < n; i++){
      rows += '<tr>';
      if (i === 0){
        rows += `<td rowspan="${n}" class="sid">${esc(s.id||'')}</td>
          <td rowspan="${n}">${esc(s.directive || s.intent || '')}</td>
          <td rowspan="${n}">${s.effect?`<span class="pill navy">${esc(s.effect)}</span>`:''}</td>
          <td rowspan="${n}">${esc(fmtSF(s.substance))}</td>
          <td rowspan="${n}">${esc(fmtSF(s.form))}</td>`;
      }
      rows += ioCell(ins[i], 'in');
      if (i === 0){
        rows += `<td rowspan="${n}">${s.via?`<span class="pill teal">${esc(s.via)}</span>`:''}</td>
          <td rowspan="${n}" class="vtxt">${esc(s.action||'')}</td>`;
      }
      rows += ioCell(outs[i], 'out');
      rows += '</tr>';
    }
  }
  return `<div style="overflow-x:auto"><table class="steps">
    <colgroup>
      <col style="width:44px"><col style="width:200px"><col style="width:92px">
      <col style="width:112px"><col style="width:100px">
      <col style="width:112px"><col style="width:330px"><col style="width:92px">
      <col style="width:118px"><col style="width:130px">
      <col style="width:112px"><col style="width:360px"><col style="width:110px">
    </colgroup>
    <thead>
      <tr><th class="h-req" colspan="5">需 求</th><th class="h-in" colspan="3">输 入</th><th class="h-im" colspan="2">实 现</th><th class="h-out" colspan="3">输 出</th></tr>
      <tr>
        <th class="h-req2">#</th><th class="h-req2">目的</th><th class="h-req2">作用</th><th class="h-req2">实质</th><th class="h-req2">形式</th>
        <th class="h-in2">类型</th><th class="h-in2">值</th><th class="h-in2">来源</th>
        <th class="h-im2">外部工具</th><th class="h-im2">动作</th>
        <th class="h-out2">类型</th><th class="h-out2">值</th><th class="h-out2">去处</th>
      </tr>
    </thead><tbody>${rows}</tbody></table></div>`;
}
function fmtSF(v){ return v == null ? '' : (Array.isArray(v) ? v.join('、') : v); }
function ioCell(x, kind){
  const cls = kind === 'in' ? 'c-in' : 'c-out';
  if (!x) return `<td class="${cls}"></td><td class="${cls}"></td><td class="${cls}"></td>`;
  const inf = x.inferred ? ` inf" title="推断理由:${esc(x.inferred_reason || '模型推断补全')}` : '';
  const badge = x.inferred ? '<span class="ib">推</span>' : '';
  return `<td class="${cls}"><span class="pill ${kind==='in'?'amber':'teal'}">${esc(x.type||'')}</span></td>
    <td class="${cls}${inf}">${badge}<span class="vtxt">${esc(x.value||'')}</span></td>
    <td class="${cls}"><span class="anchor">${esc(x.anchor||'')}</span></td>`;
}

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

/* ════ 解构任务 ════ */
async function startExtract(caseIds){
  if (!state.queryId || !caseIds.length) return;
  const isProc = state.mode === 'process';
  const model = $('#model-sel')?.value || (isProc ? MODELS_PROC[0] : MODELS_TOOL[0]);
  try {
    const r = await api(`/api/extract_${isProc?'process':'tools'}`, {
      method:'POST', body: JSON.stringify({query_id: state.queryId, case_ids: caseIds, model})});
    showTask(`${isProc?'工序':'工具'}解构 · ${caseIds.length} 帖`, r.task_id, async () => {
      state.selected.clear();
      await selectQuery(state.queryId);
      if (caseIds.includes(state.caseId)) { /* selectQuery 清了 caseId,恢复选中 */ }
      if (caseIds.length === 1){ state.caseId = caseIds[0]; state.version = null; renderPosts(); await loadExtract(); }
    });
  } catch(e){ alert('任务启动失败:' + (e.body?.error || e.status)); }
}

/* ════ 任务面板(✕ 只隐藏;「操作日志」按钮可随时唤回)════ */
let pollTimer = null, hasTask = false;
function showTask(title, taskId, onDone){
  hasTask = true;
  $('#task-panel').hidden = false;
  $('#task-title').textContent = title;
  $('#task-dot').className = 'dot';
  $('#task-log').textContent = '启动中…';
  clearTimeout(pollTimer);
  const poll = async () => {
    let t;
    try { t = await api('/api/task_status?task_id=' + encodeURIComponent(taskId)); }
    catch(e){ $('#task-log').textContent = '状态查询失败'; return; }
    const log = $('#task-log');
    log.textContent = t.log_tail || '(暂无日志)';
    log.scrollTop = log.scrollHeight;
    if (t.status === 'running'){ pollTimer = setTimeout(poll, 2000); return; }
    $('#task-dot').className = 'dot ' + t.status;
    $('#task-title').textContent = title + (t.status === 'done' ? ' · 完成' : ' · 失败');
    if (t.status === 'done' && onDone) onDone();
  };
  poll();
}
/* ✕ 只隐藏面板,轮询照跑(任务完成后回调依然触发) */
function hideTask(){ $('#task-panel').hidden = true; }
function showTaskPanel(){
  if (!hasTask) return alert('本次会话还没有任务日志');
  $('#task-panel').hidden = false;
  const log = $('#task-log'); log.scrollTop = log.scrollHeight;
}

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

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

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