Agent Terminal Replay
介绍
深色终端窗口逐行回放智能体的检索、比价与调用过程，右侧对齐每次调用的费用位，顶栏带主色余额标签，播完稍作停顿后循环重播。
拆自整页模板 器枢 智能体工具接入平台首页，可以单独使用，也能和同一模板拆出的其他组件拼回整页。
纯 HTML、CSS 与少量原生 JS，没有框架依赖。复制提示词交给 Claude Code、Cursor、Trae 或 Codex，模型会把 Agent Terminal Replay 加进你的项目并换成你的配色。
适用场景
滚动、悬停与入场动效，给页面增加节奏感；动效只用 transform 和 opacity。
安装
订阅 Builder 后，用 8pt CLI 装进项目，或在已接入 8pt MCP 的编辑器里直接调用。
$ npm i -g @8pt-dev/cli && 8pt add agent-terminal-replay
mcp › 使用 8pt MCP 调用 get_component("agent-terminal-replay")
代码
Agent Terminal Replay 的源码，动效只用 transform 与 opacity，并尊重减少动态效果设置。
<div class="x-qtr"><div class="qs-term" data-qs-term><div class="qs-term__bar"><span class="qs-dots"><i></i><i></i><i></i></span><span class="qs-term__path">~/agents/调研助手</span><span class="qs-term__bal">余额 · ¥ —</span></div><ol class="qs-term__body"><li class="qs-tl qs-tl--cmd" style="--d:0"><span class="qs-tl__p">$</span><span class="qs-tl__t">对比两款云笔记产品：定位、定价、增长</span><span class="qs-tl__c"></span></li><li class="qs-tl qs-tl--dim" style="--d:1"><span class="qs-tl__p">›</span><span class="qs-tl__t">qs.find("竞品对比")</span><span class="qs-tl__c"></span></li><li class="qs-tl qs-tl--dim" style="--d:2"><span class="qs-tl__p">›</span><span class="qs-tl__t">→ 候选若干 · 按匹配度与价格排序</span><span class="qs-tl__c"></span></li><li class="qs-tl qs-tl--dim" style="--d:3"><span class="qs-tl__p">›</span><span class="qs-tl__t">1. 竞品透镜 /compare · ¥—/次</span><span class="qs-tl__c"></span></li><li class="qs-tl qs-tl--dim" style="--d:4"><span class="qs-tl__p">›</span><span class="qs-tl__t">2. 远望 /search · ¥—/次</span><span class="qs-tl__c"></span></li><li class="qs-tl qs-tl--dim" style="--d:5"><span class="qs-tl__p">›</span><span class="qs-tl__t">3. 人脉库 /company/enrich · ¥—/条</span><span class="qs-tl__c"></span></li><li class="qs-tl qs-tl--dim" style="--d:6"><span class="qs-tl__p">›</span><span class="qs-tl__t">qs.inspect("竞品透镜") → 接口结构 · 计价正常</span><span class="qs-tl__c"></span></li><li class="qs-tl qs-tl--run" style="--d:7"><span class="qs-tl__p">→</span><span class="qs-tl__t">qs.call("竞品透镜", "/compare")</span><span class="qs-tl__c">¥—</span></li><li class="qs-tl qs-tl--ok" style="--d:8"><span class="qs-tl__p">✓</span><span class="qs-tl__t">定位 · 定价 · 能力差异 已生成</span><span class="qs-tl__c"></span></li><li class="qs-tl qs-tl--run" style="--d:9"><span class="qs-tl__p">→</span><span class="qs-tl__t">qs.call("远望", "/search")</span><span class="qs-tl__c">¥—</span></li></ol></div></div>
.x-qtr{--acc:#0016D7;--ink:#1c1c1e;--mut:#6e6e73;--line:#ececee;--soft:#fafafa;
--sans:"Inter","PingFang SC","Hiragino Sans GB","Noto Sans CJK SC","Microsoft YaHei",system-ui,sans-serif;
--mono:ui-monospace,"SFMono-Regular","JetBrains Mono",Menlo,Consolas,"DejaVu Sans Mono",monospace;
font-family:var(--sans);color:var(--ink);-webkit-font-smoothing:antialiased;line-height:1.5;width:100%;box-sizing:border-box;text-align:left}.x-qtr *,.x-qtr *::before,.x-qtr *::after{box-sizing:border-box;margin:0;padding:0}.x-qtr a{color:inherit;text-decoration:none}.x-qtr button{font:inherit;color:inherit;background:none;border:0;cursor:pointer}.x-qtr .qs-wrap{max-width:1100px;margin:0 auto;padding:0 24px}.x-qtr .qs-h2{font-size:clamp(30px,4.4vw,52px);font-weight:800;letter-spacing:-.035em;line-height:1.08;text-align:center}.x-qtr .qs-mark{display:inline-grid;grid-template-columns:repeat(2,6px);gap:2px;transform:rotate(45deg);margin:0 2px}.x-qtr .qs-mark i{width:6px;height:6px;border-radius:1.5px;background:currentColor;display:block}.x-qtr .qs-mark i:nth-child(4){opacity:.35}.x-qtr .qs-term{max-width:880px;margin:0 auto;background:#121214;border-radius:14px;box-shadow:0 40px 80px -40px rgba(0,0,30,.55),0 0 0 1px rgba(255,255,255,.04) inset;overflow:hidden;text-align:left}.x-qtr .qs-term__bar{display:flex;align-items:center;gap:16px;padding:14px 16px;border-bottom:1px solid #222226}.x-qtr .qs-dots{display:flex;gap:6px}.x-qtr .qs-dots i{width:9px;height:9px;border-radius:50%;background:#3a3a40;display:block}.x-qtr .qs-term__path{font:12px var(--mono);color:#77777f;flex:1;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.x-qtr .qs-term__bal{font:12px var(--mono);color:#fff;background:var(--acc);padding:5px 10px;border-radius:3px;white-space:nowrap}.x-qtr .qs-term__body{list-style:none;padding:22px 20px 34px;min-height:300px;font:12.5px/1.95 var(--mono);color:#8b8b93}.x-qtr .qs-tl{display:flex;gap:10px;opacity:0;transform:translateY(6px);transition:opacity .4s ease,transform .4s ease;transition-delay:calc(var(--d) * .32s + .3s)}.x-qtr .qs-term.is-in .qs-tl{opacity:1;transform:none}.x-qtr .qs-tl__p{flex:none;width:12px;color:#5d5d66}.x-qtr .qs-tl__t{flex:1;min-width:0;overflow-wrap:anywhere}.x-qtr .qs-tl__c{flex:none;color:#cfcfd6}.x-qtr .qs-tl--cmd .qs-tl__t{color:#d4d4da}.x-qtr .qs-tl--run .qs-tl__t{color:#fff}.x-qtr .qs-tl--ok,.x-qtr .qs-tl--ok .qs-tl__p{color:#34d399}@media (max-width:560px){.x-qtr .qs-term__body{font-size:11.5px;padding:18px 14px 26px}.x-qtr .qs-term__path{display:none}}@media (prefers-reduced-motion:reduce){.x-qtr .qs-tl{opacity:1;transform:none;transition:none}}.x-qtr{padding:64px 24px;min-height:min(860px,96vh);display:flex;flex-direction:column;justify-content:center;background:radial-gradient(rgba(140,150,255,.22) 1px,transparent 1.3px) 0 0/18px 18px;-webkit-mask-image:radial-gradient(75% 85% at 50% 50%,#000 55%,transparent 100%);mask-image:radial-gradient(75% 85% at 50% 50%,#000 55%,transparent 100%)}.x-qtr .qs-term{border:1px solid rgba(255,255,255,.09);box-shadow:0 40px 90px -40px rgba(0,22,215,.45)}
(root) => {
const el = (root.classList && root.classList.contains('x-qtr')) ? root : (root.querySelector('.x-qtr') || root);
const offs = [];
const term = el.querySelector('.qs-term');
const RM = window.matchMedia && matchMedia('(prefers-reduced-motion: reduce)').matches;
let tm = 0;
const play = () => { term.classList.add('is-in'); if (!RM) tm = setTimeout(reset, 9000); };
const reset = () => { term.classList.remove('is-in'); tm = setTimeout(play, 700); };
tm = setTimeout(play, 60);
offs.push(() => clearTimeout(tm));
return () => offs.forEach((f) => f());
}订阅 Builder 查看完整源码。查看价格