按design_summary规范重构群总结卡片模板

- gemini_summary_card 调整为 420px 固定宽度与高密度小字号布局,贴合 Clean Technical 规范\n- 话题卡片严格采用 Background/Key Points/Conclusion 三段论结构并保留结论高亮块\n- 个人雷达标签改为药丸样式并增加彩色高亮逻辑,未命中维持 Slate 背景\n- 新增资源库列表的 GitHub 风格行结构(左图标、中标题、右箭头)\n- 双栏挂件恢复 Marketplace 与 Unresolved Pool 并排展示,节省纵向空间\n- 核心知识点改为深色高反差模块,强化长图视觉焦点\n- main.py 新增模板命名模块与资源库结构化提取,保障模板字段与数据一致
This commit is contained in:
liuwei
2026-04-23 11:02:45 +08:00
parent 93e86f98e8
commit c4f29084bc
3 changed files with 265 additions and 187 deletions

View File

@@ -1133,6 +1133,47 @@ class MessageSummaryPlugin(MessagePluginInterface):
modules["top_contributors"] = modules["top_contributors"][:3] modules["top_contributors"] = modules["top_contributors"][:3]
return modules return modules
@classmethod
def _build_resource_hub_items(cls, resources: List[str]) -> List[Dict[str, str]]:
"""把资源文本转换为“资源库列表”展示数据。
设计说明:
1. 该方法只做轻量规则分类,不依赖额外模型推理,保证稳定与速度;
2. 输出包含 icon/type/title模板可直接渲染“左图标-中标题-右箭头”结构;
3. 资源条目数量限制在 6 条,避免长图膨胀。
"""
items: List[Dict[str, str]] = []
for raw in resources or []:
text = cls._strip_markdown_inline(str(raw or "").strip())
if not text:
continue
lower = text.lower()
# 说明:以关键词做资源类型判断,优先覆盖仓库、文档、链接、附件四类。
if "github.com" in lower or "gitlab" in lower or "仓库" in text:
icon = ""
kind = "Repo"
elif "http://" in lower or "https://" in lower or "链接" in text:
icon = ""
kind = "Link"
elif any(k in lower for k in [".pdf", ".doc", ".ppt", "文档", "手册", "白皮书"]):
icon = ""
kind = "Doc"
else:
icon = ""
kind = "Item"
items.append(
{
"icon": icon,
"type": kind,
"title": text[:72],
}
)
if len(items) >= 6:
break
return items
def _render_summary_template_html( def _render_summary_template_html(
self, self,
group_name: str, group_name: str,
@@ -1156,6 +1197,7 @@ class MessageSummaryPlugin(MessagePluginInterface):
topic_titles = [card.get("title", "") for card in topic_cards] topic_titles = [card.get("title", "") for card in topic_cards]
auxiliary_sections = self._build_auxiliary_sections(sections, topic_titles) auxiliary_sections = self._build_auxiliary_sections(sections, topic_titles)
named_modules = self._build_template_named_modules(sections) named_modules = self._build_template_named_modules(sections)
resource_hub_items = self._build_resource_hub_items(named_modules.get("shared_resources", []))
# 说明: # 说明:
# 1. 这里注入“本地字体 CSS”到模板避免依赖 Google Fonts 等外网资源; # 1. 这里注入“本地字体 CSS”到模板避免依赖 Google Fonts 等外网资源;
# 2. 字体文件统一从仓库根目录 fonts/ 下读取,便于部署时统一管理; # 2. 字体文件统一从仓库根目录 fonts/ 下读取,便于部署时统一管理;
@@ -1178,6 +1220,7 @@ class MessageSummaryPlugin(MessagePluginInterface):
"summary_unresolved_pool": named_modules.get("unresolved_pool", []), "summary_unresolved_pool": named_modules.get("unresolved_pool", []),
"summary_core_points": named_modules.get("core_points", []), "summary_core_points": named_modules.get("core_points", []),
"summary_top_contributors": named_modules.get("top_contributors", []), "summary_top_contributors": named_modules.get("top_contributors", []),
"summary_resource_hub": resource_hub_items,
"summary_fallback_text": layout_data.get("fallback_text", ""), "summary_fallback_text": layout_data.get("fallback_text", ""),
"summary_metrics": metrics_data, "summary_metrics": metrics_data,
"local_font_css": Markup(local_font_css), "local_font_css": Markup(local_font_css),

View File

@@ -8,370 +8,400 @@
{{ local_font_css }} {{ local_font_css }}
:root { :root {
--slate-50: #f8fafc; --bg: #F8FAFC;
--slate-100: #f1f5f9; --surface: #FFFFFF;
--slate-200: #e2e8f0; --text: #334155;
--slate-300: #cbd5e1; --heading: #0F172A;
--slate-400: #94a3b8; --line: #F1F5F9;
--slate-500: #64748b; --blue: #2563EB;
--slate-600: #475569; --green: #22C55E;
--slate-700: #334155; --rose: #F43F5E;
--slate-900: #0f172a; --shadow-sm: 0 1px 3px rgba(15, 23, 42, 0.05);
--blue-50: #eff6ff;
--blue-100: #dbeafe;
--blue-600: #2563eb;
--indigo-50: #eef2ff;
--indigo-600: #4f46e5;
--emerald-50: #ecfdf5;
--emerald-100: #d1fae5;
--emerald-600: #059669;
--emerald-800: #065f46;
--shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.05);
} }
* { box-sizing: border-box; } * { box-sizing: border-box; }
body { body {
margin: 0; margin: 0;
padding: 22px 0; padding: 10px 0;
background-color: var(--slate-50); background: var(--bg);
color: var(--slate-700); color: var(--text);
font-family: var(--abot-font-sans, 'Inter', 'PingFang SC', -apple-system, sans-serif); font-family: var(--abot-font-sans, 'Inter', 'PingFang SC', system-ui, sans-serif);
-webkit-font-smoothing: antialiased; -webkit-font-smoothing: antialiased;
} }
.report-container { .report-container {
width: min(720px, calc(100vw - 14px)); width: 420px;
margin: 0 auto; margin: 0 auto;
background: #ffffff; background: var(--surface);
box-shadow: var(--shadow); border: 1px solid var(--line);
border: 1px solid var(--slate-200); box-shadow: var(--shadow-sm);
} }
.label-tiny { .label-tiny {
display: block;
font-size: 9px; font-size: 9px;
line-height: 1.2;
font-weight: 800; font-weight: 800;
text-transform: uppercase; text-transform: uppercase;
letter-spacing: .08em; letter-spacing: 0.08em;
color: var(--slate-400); color: #94a3b8;
margin-bottom: 2px; margin-bottom: 3px;
display: block;
} }
.mono { font-family: var(--abot-font-code, 'JetBrains Mono', monospace); } .mono { font-family: var(--abot-font-code, 'JetBrains Mono', 'SF Mono', monospace); }
.header { .header {
padding: 20px; padding: 12px;
border-bottom: 1px solid var(--slate-100); border-bottom: 1px solid var(--line);
} }
.header-row { .header-top {
display: flex; display: flex;
justify-content: space-between; justify-content: space-between;
align-items: flex-start; align-items: flex-start;
gap: 10px; gap: 8px;
margin-bottom: 13px; margin-bottom: 8px;
} }
.header-title { .header-title {
margin: 0; margin: 0;
font-size: 16px; font-size: 13px;
line-height: 1.25;
font-weight: 900; font-weight: 900;
color: var(--heading);
letter-spacing: -0.02em; letter-spacing: -0.02em;
color: var(--slate-900);
} }
.header-title .accent { color: var(--blue-600); font-weight: 600; } .header-title .accent { color: var(--blue); font-weight: 600; }
.header-id { .header-id {
margin: 4px 0 0; margin: 3px 0 0;
font-size: 10px; font-size: 9px;
color: var(--slate-400); color: #94a3b8;
font-weight: 600; letter-spacing: 0.03em;
letter-spacing: .03em;
} }
.header-tag { .header-tag {
padding: 4px 8px; padding: 2px 6px;
background: var(--slate-100);
border-radius: 4px; border-radius: 4px;
background: #f1f5f9;
border: 1px solid #e2e8f0;
font-size: 9px; font-size: 9px;
color: #64748b;
font-weight: 700; font-weight: 700;
color: var(--slate-500);
text-transform: uppercase;
white-space: nowrap; white-space: nowrap;
text-transform: uppercase;
} }
.meta-grid { .kpi-grid {
display: grid; display: grid;
grid-template-columns: repeat(4, minmax(0, 1fr)); grid-template-columns: repeat(4, minmax(0, 1fr));
gap: 8px; gap: 6px;
}
.kpi {
background: #f8fafc;
border: 1px solid var(--line);
border-radius: 4px;
padding: 5px 4px;
text-align: center; text-align: center;
} }
.meta-item { .kpi .value {
background: var(--slate-50); font-size: 11px;
border-radius: 4px;
padding: 8px 6px;
}
.meta-value {
font-size: 12px;
font-weight: 800; font-weight: 800;
color: var(--slate-700); color: #475569;
} }
.meta-value.is-blue { color: var(--blue-600); } .kpi .value.is-blue { color: var(--blue); }
.meta-value.is-indigo { color: var(--indigo-600); } .kpi .value.is-indigo { color: #4f46e5; }
.meta-value.is-emerald { color: var(--emerald-600); } .kpi .value.is-emerald { color: #059669; }
.radar { .radar {
padding: 0 20px 16px; padding: 10px 12px;
border-bottom: 1px solid var(--slate-100); border-bottom: 1px solid var(--line);
} }
.radar-tags { .radar-tags {
margin-top: 8px;
display: flex; display: flex;
flex-wrap: wrap; flex-wrap: wrap;
gap: 8px; gap: 6px;
margin-top: 2px;
} }
.radar-tag { .radar-tag {
font-size: 10px; font-size: 9px;
padding: 2px 8px; line-height: 1.2;
border-radius: 6px; padding: 2px 7px;
border-radius: 999px;
border: 1px solid #e2e8f0;
background: #f1f5f9;
color: #64748b;
font-weight: 700; font-weight: 700;
border: 1px solid transparent;
} }
.radar-tag.tone-blue { background: var(--blue-50); color: var(--blue-600); border-color: var(--blue-100); font-style: italic; } .radar-tag.hit-blue { background: #eff6ff; border-color: #dbeafe; color: #2563eb; }
.radar-tag.tone-indigo { background: var(--indigo-50); color: var(--indigo-600); border-color: #dbeafe; font-style: italic; } .radar-tag.hit-indigo { background: #eef2ff; border-color: #e0e7ff; color: #4f46e5; }
.radar-tag.tone-emerald { background: var(--emerald-50); color: var(--emerald-600); border-color: var(--emerald-100); font-style: italic; } .radar-tag.hit-emerald { background: #ecfdf5; border-color: #d1fae5; color: #059669; }
.radar-tag.tone-slate { background: var(--slate-100); color: var(--slate-500); }
.content { padding: 20px; } .content {
padding: 12px;
}
.lead { .lead {
margin: 0 0 14px; margin: 0 0 10px;
background-color: #f0fdf4; background: #f0fdf4;
border-left: 2px solid #22c55e; border-left: 2px solid var(--green);
padding: 8px;
border-radius: 0 4px 4px 0; border-radius: 0 4px 4px 0;
padding: 7px 8px;
font-size: 11px; font-size: 11px;
color: var(--emerald-800); line-height: 1.55;
line-height: 1.7; color: #166534;
font-weight: 700; font-weight: 700;
} }
.topic-list { .topic-list {
display: flex; display: flex;
flex-direction: column; flex-direction: column;
gap: 14px; gap: 8px;
} }
.topic-card { .topic-card {
border: 1px solid var(--slate-200); border: 1px solid #e2e8f0;
border-radius: 8px; border-radius: 6px;
padding: 10px; padding: 8px;
background: #fff; background: #fff;
} }
.topic-title-row { .topic-title-row {
display: flex; display: flex;
align-items: center; align-items: center;
gap: 8px; gap: 7px;
margin-bottom: 8px; margin-bottom: 6px;
} }
.topic-title { .topic-title {
margin: 0; margin: 0;
font-size: 12px; font-size: 13px;
font-weight: 800; font-weight: 800;
color: var(--slate-900); color: var(--heading);
line-height: 1.3;
} }
.topic-divider { .topic-divider {
height: 1px;
flex: 1; flex: 1;
background: var(--slate-100); height: 1px;
background: var(--line);
} }
.topic-meta { .topic-meta {
margin: 0 0 8px; margin: 0 0 6px;
padding: 8px; font-size: 10px;
color: #64748b;
line-height: 1.45;
padding: 5px 6px;
border: 1px dashed #e2e8f0;
border-radius: 4px; border-radius: 4px;
background: var(--slate-50); background: #f8fafc;
border: 1px dashed var(--slate-200);
font-size: 11px;
color: var(--slate-600);
line-height: 1.6;
} }
.topic-block { margin-bottom: 8px; } .topic-block { margin-bottom: 6px; }
.topic-block:last-child { margin-bottom: 0; } .topic-block:last-child { margin-bottom: 0; }
.topic-text { .topic-text {
margin: 0; margin: 0;
font-size: 11px; font-size: 11px;
color: var(--slate-600); color: #475569;
line-height: 1.7; line-height: 1.55;
} }
.topic-bullets { .topic-bullets {
margin: 0; margin: 0;
padding-left: 14px; padding-left: 10px;
color: var(--slate-600);
font-size: 11px; font-size: 11px;
line-height: 1.68; color: #475569;
line-height: 1.5;
} }
.topic-bullets li { margin: 2px 0; } .topic-bullets li { margin: 1px 0; }
.conclusion-area { .conclusion-area {
background-color: #f0fdf4; background: #f0fdf4;
border-left: 2px solid #22c55e; border-left: 2px solid var(--green);
padding: 8px;
border-radius: 0 4px 4px 0; border-radius: 0 4px 4px 0;
padding: 6px 7px;
} }
.conclusion-text { .conclusion-text {
margin: 0; margin: 0;
font-size: 11px; font-size: 11px;
line-height: 1.5;
font-weight: 700; font-weight: 700;
color: var(--emerald-800); color: #166534;
line-height: 1.6;
font-style: italic; font-style: italic;
} }
.resource-wrap { .resource-wrap {
margin-top: 14px; margin-top: 10px;
padding: 14px 0; padding: 10px 0;
border-top: 1px solid var(--slate-100); border-top: 1px solid var(--line);
border-bottom: 1px solid var(--slate-100); border-bottom: 1px solid var(--line);
background: rgba(248,250,252,0.5); background: rgba(248, 250, 252, 0.5);
} }
.resource-list { .resource-list {
display: flex; display: flex;
flex-direction: column; flex-direction: column;
gap: 6px; gap: 4px;
padding: 0 10px; padding: 0 8px;
} }
.resource-item { .resource-item {
border: 1px solid var(--slate-100); border: 1px solid var(--line);
border-radius: 4px; border-radius: 4px;
padding: 7px 8px; padding: 5px 6px;
font-size: 10px;
color: var(--slate-600);
line-height: 1.6;
background: #fff; background: #fff;
display: flex;
align-items: center;
justify-content: space-between;
gap: 6px;
min-height: 24px;
} }
.market-grid { .resource-left {
margin-top: 14px; display: flex;
align-items: center;
gap: 5px;
min-width: 0;
}
.resource-icon {
width: 14px;
text-align: center;
font-size: 10px;
color: #94a3b8;
flex-shrink: 0;
}
.resource-title {
font-size: 10px;
color: #475569;
line-height: 1.2;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.resource-arrow {
font-size: 9px;
color: #cbd5e1;
flex-shrink: 0;
}
.widget-grid {
margin-top: 10px;
display: grid; display: grid;
grid-template-columns: repeat(2, minmax(0,1fr)); grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 12px; gap: 8px;
} }
.market-card { .widget {
border: 1px solid var(--slate-100); border: 1px solid var(--line);
border-radius: 6px; border-radius: 4px;
padding: 8px; padding: 6px;
background: #fff; background: #fff;
min-height: 62px;
} }
.market-item { .widget-item {
margin: 0 0 6px; margin: 0 0 4px;
font-size: 10px; font-size: 10px;
color: var(--slate-600); line-height: 1.45;
line-height: 1.6; color: #475569;
} }
.market-item:last-child { margin-bottom: 0; } .widget-item:last-child { margin-bottom: 0; }
.core-wrap { margin-top: 14px; } .widget-item.trade { color: var(--rose); font-weight: 700; }
.core-wrap { margin-top: 10px; }
.core-card { .core-card {
border-radius: 6px; border-radius: 4px;
background: #0f172a; background: #0F172A;
color: #e2e8f0;
padding: 10px;
border: 1px solid #1e293b; border: 1px solid #1e293b;
padding: 8px;
} }
.core-item { .core-item {
margin: 0 0 6px; margin: 0 0 5px;
font-size: 10px; font-size: 10px;
line-height: 1.65; line-height: 1.5;
color: #cbd5e1; color: #cbd5e1;
} }
.core-item:last-child { margin-bottom: 0; } .core-item:last-child { margin-bottom: 0; }
.footer-main { .contributors {
margin-top: 14px; margin-top: 10px;
padding: 12px 10px; padding: 8px;
background: var(--slate-50); background: #f8fafc;
border-top: 1px solid var(--slate-100); border-top: 1px solid var(--line);
border-bottom: 1px solid var(--line);
display: flex; display: flex;
justify-content: space-between; justify-content: space-between;
align-items: center; align-items: center;
gap: 12px; gap: 8px;
} }
.avatar-list { display: flex; margin-left: auto; } .avatar-list {
display: flex;
margin-left: auto;
}
.avatar { .avatar {
width: 24px; width: 22px;
height: 24px; height: 22px;
border-radius: 50%; border-radius: 50%;
border: 2px solid #fff; border: 2px solid #fff;
display: inline-flex; display: inline-flex;
align-items: center; align-items: center;
justify-content: center; justify-content: center;
margin-left: -5px;
font-size: 9px; font-size: 9px;
font-weight: 700; font-weight: 800;
margin-left: -6px;
} }
.avatar:nth-child(1) { background: var(--blue-100); color: var(--blue-600); } .avatar:nth-child(1) { background: #dbeafe; color: #2563eb; }
.avatar:nth-child(2) { background: #e0e7ff; color: var(--indigo-600); } .avatar:nth-child(2) { background: #e0e7ff; color: #4f46e5; }
.avatar:nth-child(3) { background: #e2e8f0; color: var(--slate-500); } .avatar:nth-child(3) { background: #e2e8f0; color: #64748b; }
.footer-note { .footer-note {
padding: 8px 0 10px;
text-align: center; text-align: center;
margin-top: 10px;
font-size: 9px; font-size: 9px;
color: var(--slate-400); color: #94a3b8;
letter-spacing: .03em; letter-spacing: 0.03em;
text-transform: uppercase; text-transform: uppercase;
} }
@media (max-width: 760px) {
.meta-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.market-grid { grid-template-columns: 1fr; }
}
</style> </style>
</head> </head>
<body> <body>
<div class="report-container"> <div class="report-container">
<header class="header"> <header class="header">
<div class="header-row"> <div class="header-top">
<div> <div>
<h1 class="header-title">CHAT INSIGHTS <span class="accent">REPORT</span></h1> <h1 class="header-title">CHAT INSIGHTS <span class="accent">REPORT</span></h1>
<p class="header-id mono">ID: {{ generated_at }}</p> <p class="header-id mono">ID: {{ generated_at }}</p>
</div> </div>
<div class="header-tag">{{ summary_metrics.activity_badge or "Daily Archive" }}</div> <div class="header-tag">{{ summary_metrics.activity_badge or "Daily Archive" }}</div>
</div> </div>
<div class="kpi-grid">
<div class="meta-grid">
{% for card in summary_metrics.kpi_cards|default([]) %} {% for card in summary_metrics.kpi_cards|default([]) %}
<div class="meta-item"> <div class="kpi">
<span class="label-tiny">{{ card.label }}</span> <span class="label-tiny">{{ card.label }}</span>
<span class="meta-value {% if card.tone == 'blue' %}is-blue{% elif card.tone == 'violet' %}is-indigo{% elif card.tone == 'emerald' %}is-emerald{% endif %}">{{ card.value }}</span> <span class="value {% if card.tone == 'blue' %}is-blue{% elif card.tone == 'violet' %}is-indigo{% elif card.tone == 'emerald' %}is-emerald{% endif %}">{{ card.value }}</span>
</div> </div>
{% endfor %} {% endfor %}
</div> </div>
@@ -381,10 +411,10 @@
<span class="label-tiny"># Personal Interest Radar</span> <span class="label-tiny"># Personal Interest Radar</span>
<div class="radar-tags"> <div class="radar-tags">
{% for tag in summary_metrics.topic_tags|default([]) %} {% for tag in summary_metrics.topic_tags|default([]) %}
<span class="radar-tag {% if loop.index0 % 4 == 0 %}tone-blue{% elif loop.index0 % 4 == 1 %}tone-indigo{% elif loop.index0 % 4 == 2 %}tone-emerald{% else %}tone-slate{% endif %}">{{ tag }}</span> <span class="radar-tag {% if loop.index0 % 4 == 0 %}hit-blue{% elif loop.index0 % 4 == 1 %}hit-indigo{% elif loop.index0 % 4 == 2 %}hit-emerald{% else %}{% endif %}">{{ tag }}</span>
{% endfor %} {% endfor %}
{% if not (summary_metrics.topic_tags|default([])) %} {% if not (summary_metrics.topic_tags|default([])) %}
<span class="radar-tag tone-slate">暂无热点标签</span> <span class="radar-tag">暂无热点标签</span>
{% endif %} {% endif %}
</div> </div>
</section> </section>
@@ -438,38 +468,43 @@
</div> </div>
{% if not (summary_topics|default([])) %} {% if not (summary_topics|default([])) %}
<p class="topic-text">{{ summary_fallback_text }}</p> <p class="widget-item">{{ summary_fallback_text }}</p>
{% endif %} {% endif %}
{% if summary_shared_resources|default([]) %} {% if summary_resource_hub|default([]) %}
<section class="resource-wrap"> <section class="resource-wrap">
<span class="label-tiny" style="padding:0 10px 6px;"># Shared Resources</span> <span class="label-tiny" style="padding: 0 8px 4px;"># Shared Resources</span>
<div class="resource-list"> <div class="resource-list">
{% for line in summary_shared_resources %} {% for item in summary_resource_hub %}
<p class="resource-item">{{ line }}</p> <div class="resource-item">
<div class="resource-left">
<span class="resource-icon">{{ item.icon }}</span>
<span class="resource-title">{{ item.title }}</span>
</div>
<span class="resource-arrow"></span>
</div>
{% endfor %} {% endfor %}
</div> </div>
</section> </section>
{% endif %} {% endif %}
<section class="market-grid"> <section class="widget-grid">
<article class="market-card"> <article class="widget">
<span class="label-tiny"># Marketplace</span> <span class="label-tiny"># Marketplace</span>
{% for line in summary_marketplace|default([]) %} {% for line in summary_marketplace|default([]) %}
<p class="market-item">{{ line }}</p> <p class="widget-item trade">{{ line }}</p>
{% endfor %} {% endfor %}
{% if not (summary_marketplace|default([])) %} {% if not (summary_marketplace|default([])) %}
<p class="market-item">暂无交易信息</p> <p class="widget-item">暂无交易信息</p>
{% endif %} {% endif %}
</article> </article>
<article class="widget">
<article class="market-card">
<span class="label-tiny"># Unresolved Pool</span> <span class="label-tiny"># Unresolved Pool</span>
{% for line in summary_unresolved_pool|default([]) %} {% for line in summary_unresolved_pool|default([]) %}
<p class="market-item">{{ line }}</p> <p class="widget-item">{{ line }}</p>
{% endfor %} {% endfor %}
{% if not (summary_unresolved_pool|default([])) %} {% if not (summary_unresolved_pool|default([])) %}
<p class="market-item">暂无待解问题</p> <p class="widget-item">暂无待解问题</p>
{% endif %} {% endif %}
</article> </article>
</section> </section>
@@ -486,7 +521,7 @@
</div> </div>
</section> </section>
<footer class="footer-main"> <div class="contributors">
<span class="label-tiny" style="margin:0;">Top Contributors</span> <span class="label-tiny" style="margin:0;">Top Contributors</span>
<div class="avatar-list"> <div class="avatar-list">
{% for name in summary_top_contributors|default([]) %} {% for name in summary_top_contributors|default([]) %}
@@ -496,7 +531,7 @@
<span class="avatar">A</span><span class="avatar">B</span><span class="avatar">C</span> <span class="avatar">A</span><span class="avatar">B</span><span class="avatar">C</span>
{% endif %} {% endif %}
</div> </div>
</footer> </div>
<div class="footer-note">Engine: Playwright · Tokens: {{ summary_metrics.token_total }} · Latency: {{ summary_metrics.latency_text }}</div> <div class="footer-note">Engine: Playwright · Tokens: {{ summary_metrics.token_total }} · Latency: {{ summary_metrics.latency_text }}</div>
</section> </section>