Strona główna Odkrywaj Pomoc
Zarejestruj się Zaloguj się
zeroleap
/
Multi-Agent
1
0
Forkuj 0
Pliki Problemy 0 Oczekujące zmiany 0 Wiki
Drzewo: bcf9eba7a5
Gałęzie Tagi
Multi-Agent
/
index.html

index.html 21 KB
Historia Czysty

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554555556557558559560561562563564565566567568569570 
  1. <!DOCTYPE html>
    2. 

  2. <html lang="zh-CN">
    3. 

  3. <head>
    4. 

  4. <meta charset="UTF-8">
    5. 

  5. <meta name="viewport" content="width=device-width, initial-scale=1.0">
    6. 

  6. <title>Multi-Agent 实战演示</title>
    7. 

  7. <style>
    8. 

  8. :root {
    9. 

  9.   --bg: #0a0a12;
    10. 

  10.   --glass: rgba(255,255,255,0.06);
    11. 

  11.   --glass-border: rgba(255,255,255,0.1);
    12. 

  12.   --glass-highlight: rgba(255,255,255,0.15);
    13. 

  13.   --text: #e8eaed;
    14. 

  14.   --text-dim: #8a8d93;
    15. 

  15.   --accent: #00E5A0;
    16. 

  16.   --accent-dim: rgba(0,229,160,0.15);
    17. 

  17.   --blue: #58a6ff;
    18. 

  18.   --purple: #bc8cff;
    19. 

  19.   --yellow: #d29922;
    20. 

  20.   --red: #f85149;
    21. 

  21.   --radius: 20px;
    22. 

  22.   --blur: 40px;
    23. 

  23. }
    24. 

  24. 

  25. * { margin:0; padding:0; box-sizing:border-box; }
    26. 

  26. body {
    27. 

  27.   font-family: -apple-system, BlinkMacSystemFont, 'SF Pro Display', 'SF Pro Text', 'Helvetica Neue', sans-serif;
    28. 

  28.   background: var(--bg);
    29. 

  29.   color: var(--text);
    30. 

  30.   min-height: 100vh;
    31. 

  31.   overflow-x: hidden;
    32. 

  32.   -webkit-font-smoothing: antialiased;
    33. 

  33. }
    34. 

  34. 

  35. /* ── Animated Background Orbs ── */
    36. 

  36. .bg-orbs { position: fixed; inset: 0; pointer-events: none; z-index: 0; overflow: hidden; }
    37. 

  37. .orb {
    38. 

  38.   position: absolute; border-radius: 50%;
    39. 

  39.   filter: blur(120px); opacity: 0.4;
    40. 

  40.   animation: float 20s ease-in-out infinite;
    41. 

  41. }
    42. 

  42. .orb-1 { width: 600px; height: 600px; background: #00E5A0; top: -15%; left: -10%; animation-delay: 0s; }
    43. 

  43. .orb-2 { width: 500px; height: 500px; background: #58a6ff; bottom: -10%; right: -8%; animation-delay: -7s; }
    44. 

  44. .orb-3 { width: 400px; height: 400px; background: #bc8cff; top: 50%; left: 50%; transform: translate(-50%,-50%); animation-delay: -14s; }
    45. 

  45. @keyframes float {
    46. 

  46.   0%, 100% { transform: translate(0, 0) scale(1); }
    47. 

  47.   33% { transform: translate(30px, -40px) scale(1.05); }
    48. 

  48.   66% { transform: translate(-20px, 30px) scale(0.95); }
    49. 

  49. }
    50. 

  50. 

  51. /* ── Liquid Glass Card ── */
    52. 

  52. .glass {
    53. 

  53.   position: relative;
    54. 

  54.   background: var(--glass);
    55. 

  55.   backdrop-filter: blur(var(--blur)) saturate(2) brightness(1.08);
    56. 

  56.   -webkit-backdrop-filter: blur(var(--blur)) saturate(2) brightness(1.08);
    57. 

  57.   border-radius: var(--radius);
    58. 

  58.   overflow: hidden;
    59. 

  59.   box-shadow:
    60. 

  60.     inset 0 1px 0 rgba(255,255,255,0.15),
    61. 

  61.     inset 0 -0.5px 0 rgba(255,255,255,0.05),
    62. 

  62.     0 0 0 0.5px rgba(255,255,255,0.06),
    63. 

  63.     0 8px 32px rgba(0,0,0,0.3);
    64. 

  64. }
    65. 

  65. .glass::before {
    66. 

  66.   content: '';
    67. 

  67.   position: absolute; inset: 0;
    68. 

  68.   background: linear-gradient(
    69. 

  69.     160deg,
    70. 

  70.     rgba(255,255,255,0.12) 0%,
    71. 

  71.     rgba(255,255,255,0.04) 25%,
    72. 

  72.     transparent 50%,
    73. 

  73.     rgba(255,255,255,0.02) 75%,
    74. 

  74.     rgba(255,255,255,0.06) 100%
    75. 

  75.   );
    76. 

  76.   border-radius: inherit;
    77. 

  77.   pointer-events: none;
    78. 

  78.   z-index: 1;
    79. 

  79. }
    80. 

  80. 

  81. /* ── Refraction Highlight (animated) ── */
    82. 

  82. .glass::after {
    83. 

  83.   content: '';
    84. 

  84.   position: absolute; inset: -50%;
    85. 

  85.   background: conic-gradient(
    86. 

  86.     from 0deg,
    87. 

  87.     transparent 0deg,
    88. 

  88.     rgba(255,255,255,0.08) 60deg,
    89. 

  89.     transparent 120deg,
    90. 

  90.     rgba(0,229,160,0.04) 180deg,
    91. 

  91.     transparent 240deg,
    92. 

  92.     rgba(88,166,255,0.06) 300deg,
    93. 

  93.     transparent 360deg
    94. 

  94.   );
    95. 

  95.   animation: refract 12s linear infinite;
    96. 

  96.   pointer-events: none;
    97. 

  97.   z-index: 1;
    98. 

  98.   opacity: 0.6;
    99. 

  99. }
    100. 

  100. @keyframes refract { to { transform: rotate(360deg); } }
    101. 

  101. 

  102. .glass > * { position: relative; z-index: 2; }
    103. 

  103. 

  104. /* ── Layout ── */
    105. 

  105. .container { max-width: 1080px; margin: 0 auto; padding: 40px 24px; position: relative; z-index: 1; }
    106. 

  106. 

  107. /* ── Header ── */
    108. 

  108. .header { text-align: center; margin-bottom: 40px; }
    109. 

  109. .header h1 {
    110. 

  110.   font-size: 36px; font-weight: 800; letter-spacing: -1px;
    111. 

  111.   background: linear-gradient(135deg, #fff 0%, #00E5A0 50%, #58a6ff 100%);
    112. 

  112.   -webkit-background-clip: text; -webkit-text-fill-color: transparent;
    113. 

  113.   background-clip: text;
    114. 

  114. }
    115. 

  115. .header p { color: var(--text-dim); font-size: 15px; margin-top: 8px; }
    116. 

  116. 

  117. /* ── Mode Tabs ── */
    118. 

  118. .mode-tabs {
    119. 

  119.   display: flex; gap: 6px; margin-bottom: 28px;
    120. 

  120.   padding: 6px; border-radius: 16px;
    121. 

  121. }
    122. 

  122. .mode-tab {
    123. 

  123.   flex: 1; padding: 14px 10px; border: none; border-radius: 12px;
    124. 

  124.   background: transparent; color: var(--text-dim); cursor: pointer;
    125. 

  125.   font-size: 13px; font-weight: 600; transition: all .25s ease;
    126. 

  126.   display: flex; flex-direction: column; align-items: center; gap: 5px;
    127. 

  127. }
    128. 

  128. .mode-tab .m-icon { font-size: 22px; }
    129. 

  129. .mode-tab:hover { color: var(--text); background: rgba(255,255,255,0.04); }
    130. 

  130. .mode-tab.active {
    131. 

  131.   background: rgba(0,229,160,0.12);
    132. 

  132.   color: var(--accent);
    133. 

  133.   box-shadow: inset 0 1px 0 rgba(0,229,160,0.2), 0 0 0 0.5px rgba(0,229,160,0.15);
    134. 

  134. }
    135. 

  135. .mode-tab .m-desc { font-size: 10px; font-weight: 400; opacity: 0.6; }
    136. 

  136. 

  137. /* ── Mode Info ── */
    138. 

  138. .mode-info {
    139. 

  139.   padding: 20px 24px; margin-bottom: 20px;
    140. 

  140.   display: flex; align-items: flex-start; gap: 16px; font-size: 14px; line-height: 1.7;
    141. 

  141. }
    142. 

  142. .mode-info .mi-icon { font-size: 36px; flex-shrink: 0; }
    143. 

  143. .mode-info .mi-title { font-weight: 700; font-size: 16px; margin-bottom: 4px; }
    144. 

  144. .mode-info .mi-flow {
    145. 

  145.   margin-top: 10px; font-family: 'SF Mono', 'Fira Code', monospace;
    146. 

  146.   font-size: 12px; color: var(--accent); padding: 8px 12px;
    147. 

  147.   background: rgba(0,0,0,0.3); border-radius: 8px;
    148. 

  148.   white-space: pre; overflow-x: auto;
    149. 

  149. }
    150. 

  150. 

  151. /* ── Presets ── */
    152. 

  152. .presets { display: flex; gap: 8px; margin-bottom: 16px; flex-wrap: wrap; }
    153. 

  153. .preset-btn {
    154. 

  154.   padding: 8px 16px; border-radius: 10px; border: none;
    155. 

  155.   background: rgba(255,255,255,0.04); color: var(--text-dim);
    156. 

  156.   font-size: 12px; cursor: pointer; transition: all .2s;
    157. 

  157.   box-shadow: inset 0 0.5px 0 rgba(255,255,255,0.08), 0 0 0 0.5px rgba(255,255,255,0.05);
    158. 

  158. }
    159. 

  159. .preset-btn:hover { color: var(--accent); background: rgba(0,229,160,0.06); border-color: rgba(0,229,160,0.2); }
    160. 

  160. .preset-btn.active { color: var(--accent); background: rgba(0,229,160,0.08); }
    161. 

  161. 

  162. /* ── Input ── */
    163. 

  163. .input-area { display: flex; gap: 10px; margin-bottom: 32px; }
    164. 

  164. .input-area textarea {
    165. 

  165.   flex: 1; padding: 16px 18px; border-radius: 14px; border: none;
    166. 

  166.   background: rgba(255,255,255,0.06);
    167. 

  167.   color: var(--text); font-size: 14px; font-family: inherit;
    168. 

  168.   resize: none; height: 56px; outline: none;
    169. 

  169.   box-shadow: inset 0 0.5px 0 rgba(255,255,255,0.1), 0 0 0 0.5px rgba(255,255,255,0.06);
    170. 

  170.   backdrop-filter: blur(20px);
    171. 

  171.   transition: all .2s;
    172. 

  172. }
    173. 

  173. .input-area textarea:focus {
    174. 

  174.   box-shadow: inset 0 0.5px 0 rgba(255,255,255,0.1), 0 0 0 2px rgba(0,229,160,0.2), 0 0 0 0.5px rgba(0,229,160,0.3);
    175. 

  175. }
    176. 

  176. .run-btn {
    177. 

  177.   padding: 0 32px; border-radius: 14px; border: none;
    178. 

  178.   background: linear-gradient(180deg, #00E5A0 0%, #00C98A 100%);
    179. 

  179.   color: #0a0a12; font-size: 14px; font-weight: 700; cursor: pointer;
    180. 

  180.   transition: all .2s; white-space: nowrap;
    181. 

  181.   box-shadow: inset 0 0.5px 0 rgba(255,255,255,0.3), 0 2px 12px rgba(0,229,160,0.3);
    182. 

  182. }
    183. 

  183. .run-btn:hover { transform: translateY(-1px); box-shadow: inset 0 0.5px 0 rgba(255,255,255,0.3), 0 4px 20px rgba(0,229,160,0.4); }
    184. 

  184. .run-btn:disabled { opacity: 0.4; cursor: not-allowed; transform: none; }
    185. 

  185. 

  186. /* ── Trace Area ── */
    187. 

  187. .trace-area { display: none; margin-bottom: 28px; }
    188. 

  188. .trace-area.visible { display: block; animation: fadeUp .4s ease; }
    189. 

  189. @keyframes fadeUp { from { opacity: 0; transform: translateY(16px); } }
    190. 

  190. 

  191. .trace-header {
    192. 

  192.   display: flex; align-items: center; gap: 8px; margin-bottom: 16px;
    193. 

  193.   font-size: 14px; font-weight: 700;
    194. 

  194. }
    195. 

  195. .trace-header .th-dot {
    196. 

  196.   width: 8px; height: 8px; border-radius: 50%; background: var(--accent);
    197. 

  197.   animation: pulse 1.5s ease infinite;
    198. 

  198. }
    199. 

  199. @keyframes pulse { 0%, 100% { opacity: 1; } 50% { opacity: 0.3; } }
    200. 

  200. 

  201. /* ── Step Card ── */
    202. 

  202. .step-cards { display: flex; flex-direction: column; gap: 12px; }
    203. 

  203. 

  204. .step {
    205. 

  205.   padding: 18px 20px;
    206. 

  206.   animation: stepIn .35s ease both;
    207. 

  207. }
    208. 

  208. @keyframes stepIn { from { opacity: 0; transform: translateX(-12px); } }
    209. 

  209. 

  210. .step-head { display: flex; align-items: center; gap: 10px; margin-bottom: 10px; }
    211. 

  211. .step-icon { font-size: 20px; }
    212. 

  212. .step-agent { font-weight: 700; font-size: 14px; }
    213. 

  213. .step-action { font-size: 13px; color: var(--text-dim); flex: 1; text-align: right; }
    214. 

  214. 

  215. .step-events { display: flex; flex-direction: column; gap: 8px; }
    216. 

  216. 

  217. .event {
    218. 

  218.   padding: 10px 14px; border-radius: 10px;
    219. 

  219.   background: rgba(0,0,0,0.2);
    220. 

  220.   font-size: 12px; line-height: 1.6;
    221. 

  221. }
    222. 

  222. .event-header { display: flex; align-items: center; gap: 6px; margin-bottom: 4px; }
    223. 

  223. .event-tag {
    224. 

  224.   font-size: 10px; font-weight: 600; padding: 2px 6px; border-radius: 4px;
    225. 

  225.   text-transform: uppercase; letter-spacing: 0.5px;
    226. 

  226. }
    227. 

  227. .event-tag.llm { background: rgba(88,166,255,0.15); color: var(--blue); }
    228. 

  228. .event-tag.tool { background: rgba(188,140,255,0.15); color: var(--purple); }
    229. 

  229. .event-tag.answer { background: rgba(0,229,160,0.15); color: var(--accent); }
    230. 

  230. .event-meta { font-size: 11px; color: var(--text-dim); margin-left: auto; }
    231. 

  231. .event-body { color: var(--text-dim); font-size: 12px; max-height: 120px; overflow: hidden; position: relative; }
    232. 

  232. .event-body.expanded { max-height: none; }
    233. 

  233. .event-expand {
    234. 

  234.   display: inline-block; margin-top: 4px; font-size: 11px; color: var(--accent);
    235. 

  235.   cursor: pointer; background: none; border: none;
    236. 

  236. }
    237. 

  237. 

  238. /* ── Final Answer ── */
    239. 

  239. .final-answer {
    240. 

  240.   padding: 24px; margin-top: 20px;
    241. 

  241.   border: 1px solid rgba(0,229,160,0.15);
    242. 

  242. }
    243. 

  243. .final-answer .fa-label {
    244. 

  244.   font-size: 12px; font-weight: 700; color: var(--accent);
    245. 

  245.   text-transform: uppercase; letter-spacing: 1px; margin-bottom: 12px;
    246. 

  246. }
    247. 

  247. .final-answer .fa-content {
    248. 

  248.   font-size: 14px; line-height: 1.8; white-space: pre-wrap;
    249. 

  249. }
    250. 

  250. 

  251. /* ── Stats Bar ── */
    252. 

  252. .stats-bar {
    253. 

  253.   display: flex; gap: 16px; flex-wrap: wrap; margin-top: 16px; padding: 16px 20px;
    254. 

  254. }
    255. 

  255. .stat { text-align: center; min-width: 80px; }
    256. 

  256. .stat-val { font-size: 24px; font-weight: 800; color: var(--accent); }
    257. 

  257. .stat-label { font-size: 11px; color: var(--text-dim); margin-top: 2px; }
    258. 

  258. 

  259. /* ── Loading ── */
    260. 

  260. .loading-dots { display: inline-flex; gap: 4px; align-items: center; }
    261. 

  261. .loading-dots span {
    262. 

  262.   width: 4px; height: 4px; border-radius: 50%; background: var(--accent);
    263. 

  263.   animation: dotBounce 1.2s ease infinite;
    264. 

  264. }
    265. 

  265. .loading-dots span:nth-child(2) { animation-delay: 0.2s; }
    266. 

  266. .loading-dots span:nth-child(3) { animation-delay: 0.4s; }
    267. 

  267. @keyframes dotBounce { 0%,80%,100% { opacity: 0.2; } 40% { opacity: 1; } }
    268. 

  268. 

  269. /* ── Responsive ── */
    270. 

  270. @media (max-width: 768px) {
    271. 

  271.   .header h1 { font-size: 26px; }
    272. 

  272.   .mode-tabs { flex-wrap: wrap; }
    273. 

  273.   .input-area { flex-direction: column; }
    274. 

  274.   .stats-bar { justify-content: center; }
    275. 

  275. }
    276. 

  276. 

  277. ::-webkit-scrollbar { width: 6px; }
    278. 

  278. ::-webkit-scrollbar-track { background: transparent; }
    279. 

  279. ::-webkit-scrollbar-thumb { background: rgba(255,255,255,0.08); border-radius: 3px; }
    280. 

  280. </style>
    281. 

  281. </head>
    282. 

  282. <body>
    283. 

  283. 

  284. <div class="bg-orbs">
    285. 

  285.   <div class="orb orb-1"></div>
    286. 

  286.   <div class="orb orb-2"></div>
    287. 

  287.   <div class="orb orb-3"></div>
    288. 

  288. </div>
    289. 

  289. 

  290. <div class="container">
    291. 

  291.   <div class="header">
    292. 

  292.     <h1>Multi-Agent 实战演示</h1>
    293. 

  293.     <p>DeepSeek API 真实调用 · 工具真实执行 · 全链路 trace</p>
    294. 

  294.   </div>
    295. 

  295. 

  296.   <!-- Mode Tabs -->
    297. 

  297.   <div class="glass mode-tabs" id="modeTabs">
    298. 

  298.     <button class="mode-tab active" data-mode="supervisor" onclick="switchMode('supervisor')">
    299. 

  299.       <span class="m-icon">👔</span>Supervisor<span class="m-desc">总控 + 专家</span>
    300. 

  300.     </button>
    301. 

  301.     <button class="mode-tab" data-mode="pipeline" onclick="switchMode('pipeline')">
    302. 

  302.       <span class="m-icon">🔗</span>Pipeline<span class="m-desc">线性流水线</span>
    303. 

  303.     </button>
    304. 

  304.     <button class="mode-tab" data-mode="debate" onclick="switchMode('debate')">
    305. 

  305.       <span class="m-icon">⚖️</span>Debate<span class="m-desc">正反方辩论</span>
    306. 

  306.     </button>
    307. 

  307.   </div>
    308. 

  308. 

  309.   <!-- Mode Info -->
    310. 

  310.   <div class="glass mode-info" id="modeInfo"></div>
    311. 

  311. 

  312.   <!-- Presets -->
    313. 

  313.   <div class="presets" id="presets"></div>
    314. 

  314. 

  315.   <!-- Input -->
    316. 

  316.   <div class="input-area">
    317. 

  317.     <textarea id="queryInput" placeholder="输入任务描述，或点击上方预设场景..." rows="2"></textarea>
    318. 

  318.     <button class="run-btn" id="runBtn" onclick="execute()">▶ 执行</button>
    319. 

  319.   </div>
    320. 

  320. 

  321.   <!-- Trace -->
    322. 

  322.   <div class="trace-area" id="traceArea">
    323. 

  323.     <div class="trace-header">
    324. 

  324.       <div class="th-dot" id="traceDot"></div>
    325. 

  325.       <span id="traceTitle">执行中...</span>
    326. 

  326.       <span style="margin-left:auto;font-size:12px;color:var(--text-dim)" id="traceTimer"></span>
    327. 

  327.     </div>
    328. 

  328.     <div class="step-cards" id="stepCards"></div>
    329. 

  329.     <div id="finalSection"></div>
    330. 

  330.   </div>
    331. 

  331. </div>
    332. 

  332. 

  333. <script>
    334. 

  334. const MODE_INFO = {
    335. 

  335.   supervisor: {
    336. 

  336.     icon: '👔', title: 'Supervisor 模式',
    337. 

  337.     desc: '总控 Agent 拆解任务，路由给研究专家和代码专家，最后整合结果。职责清晰，易调试，可扩展。',
    338. 

  338.     flow: 'User → Supervisor(拆任务) → Researcher(搜索) → Coder(分析) → Supervisor(整合) → Answer',
    339. 

  339.   },
    340. 

  340.   pipeline: {
    341. 

  341.     icon: '🔗', title: 'Pipeline 管道模式',
    342. 

  342.     desc: '线性流水线：搜索 Agent 采集信息 → 分析 Agent 处理数据 → 报告 Agent 生成最终报告。流程固定，确定性高。',
    343. 

  343.     flow: 'User → 搜索Agent(web_search) → 分析Agent(python) → 报告Agent(python) → Answer',
    344. 

  344.   },
    345. 

  345.   debate: {
    346. 

  346.     icon: '⚖️', title: 'Debate 对抗模式',
    347. 

  347.     desc: '正方 Agent 和反方 Agent 各自搜索论据，经过两轮交锋后，裁判 Agent 综合评判给出结论。',
    348. 

  348.     flow: 'User → 正方(搜索+立论) ⟷ 反方(搜索+反驳) → 裁判(评判) → Verdict',
    349. 

  349.   },
    350. 

  350. };
    351. 

  351. 

  352. let currentMode = 'supervisor';
    353. 

  353. let presets = {};
    354. 

  354. let isRunning = false;
    355. 

  355. let timerInterval = null;
    356. 

  356. 

  357. async function init() {
    358. 

  358.   const resp = await fetch('/api/presets');
    359. 

  359.   presets = await resp.json();
    360. 

  360.   switchMode('supervisor');
    361. 

  361. }
    362. 

  362. 

  363. function switchMode(mode) {
    364. 

  364.   currentMode = mode;
    365. 

  365.   document.querySelectorAll('.mode-tab').forEach(t => t.classList.remove('active'));
    366. 

  366.   document.querySelector(`.mode-tab[data-mode="${mode}"]`).classList.add('active');
    367. 

  367. 

  368.   const info = MODE_INFO[mode];
    369. 

  369.   document.getElementById('modeInfo').innerHTML = `
    370. 

  370.     <span class="mi-icon">${info.icon}</span>
    371. 

  371.     <div>
    372. 

  372.       <div class="mi-title">${info.title}</div>
    373. 

  373.       <div>${info.desc}</div>
    374. 

  374.       <div class="mi-flow">${info.flow}</div>
    375. 

  375.     </div>`;
    376. 

  376. 

  377.   // Presets
    378. 

  378.   const p = presets[mode];
    379. 

  379.   document.getElementById('presets').innerHTML = p
    380. 

  380.     ? `<button class="preset-btn active" onclick="fillPreset('${mode}')">${p.title}</button>`
    381. 

  381.     : '';
    382. 

  382.   if (p) document.getElementById('queryInput').value = p.query;
    383. 

  383. }
    384. 

  384. 

  385. function fillPreset(mode) {
    386. 

  386.   const p = presets[mode];
    387. 

  387.   if (p) document.getElementById('queryInput').value = p.query;
    388. 

  388. }
    389. 

  389. 

  390. async function execute() {
    391. 

  391.   const query = document.getElementById('queryInput').value.trim();
    392. 

  392.   if (!query || isRunning) return;
    393. 

  393. 

  394.   isRunning = true;
    395. 

  395.   const btn = document.getElementById('runBtn');
    396. 

  396.   btn.disabled = true;
    397. 

  397.   btn.textContent = '⏳ 执行中...';
    398. 

  398. 

  399.   const traceArea = document.getElementById('traceArea');
    400. 

  400.   const stepCards = document.getElementById('stepCards');
    401. 

  401.   const finalSection = document.getElementById('finalSection');
    402. 

  402.   const traceDot = document.getElementById('traceDot');
    403. 

  403.   const traceTitle = document.getElementById('traceTitle');
    404. 

  404.   const traceTimer = document.getElementById('traceTimer');
    405. 

  405. 

  406.   traceArea.classList.add('visible');
    407. 

  407.   stepCards.innerHTML = '';
    408. 

  408.   finalSection.innerHTML = '';
    409. 

  409.   traceDot.style.background = 'var(--accent)';
    410. 

  410.   traceDot.style.animation = 'pulse 1.5s ease infinite';
    411. 

  411.   traceTitle.textContent = `${MODE_INFO[currentMode].title} — 执行中`;
    412. 

  412. 

  413.   // Timer
    414. 

  414.   let startTime = Date.now();
    415. 

  415.   timerInterval = setInterval(() => {
    416. 

  416.     traceTimer.textContent = `${((Date.now() - startTime) / 1000).toFixed(1)}s`;
    417. 

  417.   }, 100);
    418. 

  418. 

  419.   try {
    420. 

  420.     const resp = await fetch('/api/execute', {
    421. 

  421.       method: 'POST',
    422. 

  422.       headers: { 'Content-Type': 'application/json' },
    423. 

  423.       body: JSON.stringify({ mode: currentMode, query }),
    424. 

  424.     });
    425. 

  425. 

  426.     const reader = resp.body.getReader();
    427. 

  427.     const decoder = new TextDecoder();
    428. 

  428.     let buffer = '';
    429. 

  429.     let currentStepEl = null;
    430. 

  430.     let totalLlmCalls = 0;
    431. 

  431.     let totalToolCalls = 0;
    432. 

  432.     let totalTokens = 0;
    433. 

  433. 

  434.     while (true) {
    435. 

  435.       const { done, value } = await reader.read();
    436. 

  436.       if (done) break;
    437. 

  437.       buffer += decoder.decode(value, { stream: true });
    438. 

  438.       const lines = buffer.split('\n');
    439. 

  439.       buffer = lines.pop();
    440. 

  440. 

  441.       for (const line of lines) {
    442. 

  442.         if (!line.startsWith('data: ')) continue;
    443. 

  443.         const event = JSON.parse(line.slice(6));
    444. 

  444. 

  445.         if (event.type === 'step_start') {
    446. 

  446.           currentStepEl = createStepCard(event);
    447. 

  447.           stepCards.appendChild(currentStepEl);
    448. 

  448.           currentStepEl.scrollIntoView({ behavior: 'smooth', block: 'nearest' });
    449. 

  449.         }
    450. 

  450.         else if (event.type === 'agent_event' && currentStepEl) {
    451. 

  451.           if (event.tool) {
    452. 

  452.             totalToolCalls++;
    453. 

  453.             appendEvent(currentStepEl, event);
    454. 

  454.           } else if (event.answer) {
    455. 

  455.             appendEvent(currentStepEl, event);
    456. 

  456.           } else {
    457. 

  457.             totalLlmCalls++;
    458. 

  458.             if (event.tokens) totalTokens += event.tokens;
    459. 

  459.             appendEvent(currentStepEl, event);
    460. 

  460.           }
    461. 

  461.         }
    462. 

  462.         else if (event.type === 'step_end' && currentStepEl) {
    463. 

  463.           // Mark step complete
    464. 

  464.           const head = currentStepEl.querySelector('.step-action');
    465. 

  465.           if (head) head.textContent = '✅ 完成';
    466. 

  466.         }
    467. 

  467.         else if (event.type === 'final') {
    468. 

  468.           traceDot.style.background = 'var(--accent)';
    469. 

  469.           traceDot.style.animation = 'none';
    470. 

  470.           traceTitle.textContent = `${MODE_INFO[currentMode].title} — 完成`;
    471. 

  471. 

  472.           finalSection.innerHTML = `
    473. 

  473.             <div class="glass final-answer">
    474. 

  474.               <div class="fa-label">📋 最终结果</div>
    475. 

  475.               <div class="fa-content">${escHtml(event.answer)}</div>
    476. 

  476.             </div>
    477. 

  477.             <div class="glass stats-bar">
    478. 

  478.               <div class="stat"><div class="stat-val">${totalLlmCalls}</div><div class="stat-label">LLM 调用</div></div>
    479. 

  479.               <div class="stat"><div class="stat-val">${totalToolCalls}</div><div class="stat-label">工具调用</div></div>
    480. 

  480.               <div class="stat"><div class="stat-val">${totalTokens.toLocaleString()}</div><div class="stat-label">Tokens</div></div>
    481. 

  481.               <div class="stat"><div class="stat-val">${(event.total_ms / 1000).toFixed(1)}s</div><div class="stat-label">总耗时</div></div>
    482. 

  482.             </div>`;
    483. 

  483.           finalSection.scrollIntoView({ behavior: 'smooth', block: 'nearest' });
    484. 

  484.         }
    485. 

  485.         else if (event.type === 'error') {
    486. 

  486.           traceDot.style.background = 'var(--red)';
    487. 

  487.           traceTitle.textContent = '执行出错';
    488. 

  488.           finalSection.innerHTML = `<div class="glass final-answer" style="border-color:rgba(248,81,73,0.3)"><div class="fa-label" style="color:var(--red)">❌ 错误</div><div class="fa-content">${escHtml(event.message)}</div></div>`;
    489. 

  489.         }
    490. 

  490.       }
    491. 

  491.     }
    492. 

  492.   } catch (e) {
    493. 

  493.     traceTitle.textContent = '连接失败';
    494. 

  494.     finalSection.innerHTML = `<div class="glass final-answer" style="border-color:rgba(248,81,73,0.3)"><div class="fa-label" style="color:var(--red)">❌ 网络错误</div><div class="fa-content">${escHtml(e.message)}</div></div>`;
    495. 

  495.   } finally {
    496. 

  496.     clearInterval(timerInterval);
    497. 

  497.     isRunning = false;
    498. 

  498.     btn.disabled = false;
    499. 

  499.     btn.textContent = '▶ 执行';
    500. 

  500.   }
    501. 

  501. }
    502. 

  502. 

  503. function createStepCard(event) {
    504. 

  504.   const el = document.createElement('div');
    505. 

  505.   el.className = 'glass step';
    506. 

  506.   el.innerHTML = `
    507. 

  507.     <div class="step-head">
    508. 

  508.       <span class="step-icon">${event.icon || '🤖'}</span>
    509. 

  509.       <span class="step-agent">${escHtml(event.agent)}</span>
    510. 

  510.       <span class="step-action">${escHtml(event.action)} <span class="loading-dots"><span></span><span></span><span></span></span></span>
    511. 

  511.     </div>
    512. 

  512.     <div class="step-events"></div>`;
    513. 

  513.   return el;
    514. 

  514. }
    515. 

  515. 

  516. function appendEvent(stepEl, event) {
    517. 

  517.   const container = stepEl.querySelector('.step-events');
    518. 

  518.   const el = document.createElement('div');
    519. 

  519.   el.className = 'event';
    520. 

  520. 

  521.   if (event.tool) {
    522. 

  522.     const fullResult = escHtml(event.result || '');
    523. 

  523.     const hasMore = fullResult.length > 150;
    524. 

  524.     const shortResult = hasMore ? fullResult.slice(0, 150) + '...' : fullResult;
    525. 

  525.     el.innerHTML = `
    526. 

  526.       <div class="event-header">
    527. 

  527.         <span class="event-tag tool">🔧 ${escHtml(event.tool)}</span>
    528. 

  528.         <span class="event-meta">${event.latency_ms || 0}ms</span>
    529. 

  529.       </div>
    530. 

  530.       <div class="event-body">${shortResult}</div>
    531. 

  531.       ${hasMore ? '<button class="event-expand" onclick="toggleExpand(this)">展开</button>' : ''}`;
    532. 

  532.     if (hasMore) {
    533. 

  533.       el.dataset.fullResult = fullResult;
    534. 

  534.     }
    535. 

  535.   } else {
    536. 

  536.     el.innerHTML = `
    537. 

  537.       <div class="event-header">
    538. 

  538.         <span class="event-tag llm">🧠 ${escHtml(event.model || 'LLM')}</span>
    539. 

  539.         <span class="event-meta">${event.latency_ms || 0}ms · ${(event.tokens || 0).toLocaleString()} tokens</span>
    540. 

  540.       </div>`;
    541. 

  541.   }
    542. 

  542.   container.appendChild(el);
    543. 

  543. }
    544. 

  544. 

  545. function toggleExpand(btn) {
    546. 

  546.   const body = btn.previousElementSibling;
    547. 

  547.   const eventEl = btn.closest('.event');
    548. 

  548.   if (body.classList.contains('expanded')) {
    549. 

  549.     body.classList.remove('expanded');
    550. 

  550.     body.innerHTML = body.dataset.shortResult || body.textContent.slice(0, 150) + '...';
    551. 

  551.     btn.textContent = '展开';
    552. 

  552.   } else {
    553. 

  553.     body.dataset.shortResult = body.innerHTML;
    554. 

  554.     body.innerHTML = eventEl.dataset.fullResult || body.textContent;
    555. 

  555.     body.classList.add('expanded');
    556. 

  556.     btn.textContent = '收起';
    557. 

  557.   }
    558. 

  558. }
    559. 

  559. 

  560. function escHtml(s) {
    561. 

  561.   if (!s) return '';
    562. 

  562.   const d = document.createElement('div');
    563. 

  563.   d.textContent = s;
    564. 

  564.   return d.innerHTML;
    565. 

  565. }
    566. 

  566. 

  567. init();
    568. 

  568. </script>
    569. 

  569. </body>
    570. 

  570. </html>
    571.