Spaces:

josephrw
/

chat-viewer

Paused

App Files Files Community

chat-viewer / index.html

josephrw

Upload index.html with huggingface_hub

9ccf269 verified 30 days ago

Raw

History Blame Contribute Delete

31.8 kB

	<!DOCTYPE html>
	<html lang="en">

	<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>ChatScope — Export Viewer</title>
	<script src="https://cdn.jsdelivr.net/npm/marked/marked.min.js"></script>
	<style>
	:root {
	--bg: #0a0a0b;
	--bg-secondary: #131316;
	--bg-tertiary: #1c1c21;
	--bg-hover: #25252b;
	--bg-card: #16161a;
	--border: #2a2a30;
	--border-light: #353540;
	--text: #e8e8ec;
	--text-dim: #8a8a96;
	--text-faint: #50505a;
	--accent: #6c5ce7;
	--accent-light: #8b7ff0;
	--accent-dim: #4a3fb0;
	--accent-glow: rgba(108, 92, 231, 0.15);
	--green: #00d4a0;
	--green-dim: #00a07a;
	--orange: #ff9f43;
	--red: #ee5253;
	--blue: #54a0ff;
	--radius: 10px;
	--radius-sm: 6px;
	--sidebar-w: 300px;
	--header-h: 52px;
	}

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

	html,
	body {
	height: 100%;
	overflow: hidden;
	}

	body {
	font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
	background: var(--bg);
	color: var(--text);
	font-size: 14px;
	line-height: 1.6;
	}

	/* ===== Layout ===== */
	.app {
	display: flex;
	height: 100vh;
	}

	.sidebar {
	width: var(--sidebar-w);
	min-width: var(--sidebar-w);
	background: var(--bg-secondary);
	border-right: 1px solid var(--border);
	display: flex;
	flex-direction: column;
	overflow: hidden;
	}

	.main {
	flex: 1;
	display: flex;
	flex-direction: column;
	overflow: hidden;
	}

	/* ===== Logo / Brand ===== */
	.logo {
	display: flex;
	align-items: center;
	gap: 10px;
	padding: 14px 16px 10px;
	flex-shrink: 0;
	}

	.logo-mark {
	width: 32px;
	height: 32px;
	border-radius: 8px;
	background: linear-gradient(135deg, var(--accent), var(--green));
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 18px;
	font-weight: 800;
	color: #fff;
	flex-shrink: 0;
	box-shadow: 0 2px 12px var(--accent-glow);
	}

	.logo-text {
	font-size: 16px;
	font-weight: 700;
	letter-spacing: -0.3px;
	}

	.logo-text span {
	color: var(--accent-light);
	}

	/* ===== Top nav tabs ===== */
	.nav-tabs {
	display: flex;
	gap: 2px;
	padding: 0 12px 10px;
	flex-shrink: 0;
	}

	.nav-tab {
	padding: 6px 14px;
	border-radius: var(--radius-sm);
	font-size: 13px;
	font-weight: 500;
	cursor: pointer;
	transition: all 0.2s;
	border: none;
	background: transparent;
	color: var(--text-dim);
	}

	.nav-tab:hover {
	background: var(--bg-hover);
	color: var(--text);
	}

	.nav-tab.active {
	background: var(--accent);
	color: #fff;
	}

	/* ===== Sidebar header ===== */
	.sidebar-header {
	padding: 0 16px 12px;
	border-bottom: 1px solid var(--border);
	flex-shrink: 0;
	}

	.search-box {
	width: 100%;
	padding: 8px 12px 8px 34px;
	background: var(--bg-tertiary);
	border: 1px solid var(--border);
	border-radius: var(--radius-sm);
	color: var(--text);
	font-size: 13px;
	outline: none;
	transition: all 0.2s;
	}

	.search-box:focus {
	border-color: var(--accent);
	box-shadow: 0 0 0 3px var(--accent-glow);
	}

	.search-box::placeholder {
	color: var(--text-faint);
	}

	.search-wrap {
	position: relative;
	}

	.search-wrap .search-icon {
	position: absolute;
	left: 10px;
	top: 50%;
	transform: translateY(-50%);
	color: var(--text-faint);
	font-size: 14px;
	pointer-events: none;
	}

	/* ===== Conversation list ===== */
	.convo-list {
	flex: 1;
	overflow-y: auto;
	padding: 8px;
	}

	.convo-item {
	padding: 10px 12px;
	border-radius: var(--radius-sm);
	cursor: pointer;
	transition: all 0.15s;
	margin-bottom: 2px;
	border: 1px solid transparent;
	position: relative;
	}

	.convo-item:hover {
	background: var(--bg-hover);
	}

	.convo-item.active {
	background: var(--bg-tertiary);
	border-color: var(--accent-dim);
	}

	.convo-item.active::before {
	content: '';
	position: absolute;
	left: 0;
	top: 50%;
	transform: translateY(-50%);
	width: 3px;
	height: 60%;
	background: var(--accent);
	border-radius: 0 3px 3px 0;
	}

	.convo-item .title {
	font-size: 13px;
	font-weight: 500;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
	margin-bottom: 3px;
	}

	.convo-item .meta {
	font-size: 11px;
	color: var(--text-dim);
	display: flex;
	gap: 6px;
	align-items: center;
	}

	.convo-item .meta .model {
	background: var(--bg);
	padding: 1px 6px;
	border-radius: 4px;
	font-size: 10px;
	text-transform: uppercase;
	letter-spacing: 0.3px;
	}

	/* ===== Main area ===== */
	.chat-header {
	padding: 12px 20px;
	border-bottom: 1px solid var(--border);
	flex-shrink: 0;
	display: flex;
	align-items: center;
	justify-content: space-between;
	background: var(--bg-secondary);
	min-height: var(--header-h);
	}

	.chat-header .title {
	font-size: 15px;
	font-weight: 600;
	}

	.chat-header .info {
	font-size: 12px;
	color: var(--text-dim);
	margin-top: 2px;
	}

	.chat-body {
	flex: 1;
	overflow-y: auto;
	padding: 24px 0;
	}

	.chat-empty {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	height: 100%;
	color: var(--text-faint);
	gap: 12px;
	}

	.chat-empty .icon {
	font-size: 48px;
	opacity: 0.3;
	}

	.chat-empty .text {
	font-size: 15px;
	}

	/* ===== Messages ===== */
	.message {
	max-width: 820px;
	margin: 0 auto;
	padding: 6px 24px;
	display: flex;
	gap: 14px;
	margin-bottom: 2px;
	}

	.message .avatar {
	width: 30px;
	height: 30px;
	border-radius: 7px;
	flex-shrink: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 13px;
	font-weight: 700;
	margin-top: 2px;
	}

	.message.user .avatar {
	background: var(--accent);
	color: #fff;
	}

	.message.assistant .avatar {
	background: var(--green-dim);
	color: #fff;
	}

	.message.system .avatar {
	background: var(--orange);
	color: #fff;
	}

	.message.tool .avatar {
	background: #6b4fa0;
	color: #fff;
	}

	.message .content {
	flex: 1;
	min-width: 0;
	}

	.message .role-label {
	font-size: 12px;
	font-weight: 600;
	margin-bottom: 3px;
	color: var(--text-dim);
	text-transform: capitalize;
	}

	.message .text {
	font-size: 14px;
	line-height: 1.7;
	word-wrap: break-word;
	}

	.message .text p {
	margin-bottom: 10px;
	}

	.message .text p:last-child {
	margin-bottom: 0;
	}

	.message .text pre {
	background: var(--bg-tertiary);
	border: 1px solid var(--border);
	border-radius: var(--radius-sm);
	padding: 14px 16px;
	overflow-x: auto;
	font-size: 13px;
	line-height: 1.5;
	margin: 10px 0;
	}

	.message .text code {
	font-family: 'SF Mono', 'Fira Code', 'Consolas', monospace;
	font-size: 13px;
	}

	.message .text :not(pre)>code {
	background: var(--bg-tertiary);
	padding: 2px 6px;
	border-radius: 4px;
	}

	.message .text ul,
	.message .text ol {
	margin: 8px 0 10px 20px;
	}

	.message .text li {
	margin-bottom: 3px;
	}

	.message .text table {
	border-collapse: collapse;
	margin: 10px 0;
	width: 100%;
	}

	.message .text th,
	.message .text td {
	border: 1px solid var(--border);
	padding: 6px 10px;
	text-align: left;
	}

	.message .text th {
	background: var(--bg-tertiary);
	}

	.message .text img {
	max-width: 100%;
	border-radius: var(--radius-sm);
	margin: 10px 0;
	}

	.message .text a {
	color: var(--accent-light);
	text-decoration: none;
	}

	.message .text a:hover {
	text-decoration: underline;
	}

	.message .text blockquote {
	border-left: 3px solid var(--accent-dim);
	padding-left: 14px;
	margin: 10px 0;
	color: var(--text-dim);
	}

	.message .meta-row {
	font-size: 10px;
	color: var(--text-faint);
	margin-top: 4px;
	text-transform: uppercase;
	letter-spacing: 0.3px;
	}

	/* ===== KPI Dashboard ===== */
	.kpi-view {
	flex: 1;
	overflow-y: auto;
	padding: 24px 32px;
	}

	.kpi-grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
	gap: 16px;
	max-width: 900px;
	margin: 0 auto 32px;
	}

	.kpi-card {
	background: var(--bg-card);
	border: 1px solid var(--border);
	border-radius: var(--radius);
	padding: 20px;
	transition: all 0.2s;
	}

	.kpi-card:hover {
	border-color: var(--border-light);
	transform: translateY(-2px);
	}

	.kpi-card .label {
	font-size: 11px;
	text-transform: uppercase;
	letter-spacing: 0.5px;
	color: var(--text-dim);
	margin-bottom: 8px;
	}

	.kpi-card .value {
	font-size: 28px;
	font-weight: 700;
	letter-spacing: -0.5px;
	}

	.kpi-card .sub {
	font-size: 11px;
	color: var(--text-faint);
	margin-top: 4px;
	}

	.kpi-card.accent .value {
	color: var(--accent-light);
	}

	.kpi-card.green .value {
	color: var(--green);
	}

	.kpi-card.orange .value {
	color: var(--orange);
	}

	.kpi-card.blue .value {
	color: var(--blue);
	}

	/* Charts */
	.kpi-charts {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 16px;
	max-width: 900px;
	margin: 0 auto 32px;
	}

	.chart-card {
	background: var(--bg-card);
	border: 1px solid var(--border);
	border-radius: var(--radius);
	padding: 20px;
	}

	.chart-card .chart-title {
	font-size: 13px;
	font-weight: 600;
	margin-bottom: 16px;
	color: var(--text-dim);
	text-transform: uppercase;
	letter-spacing: 0.3px;
	}

	.bar-chart {
	display: flex;
	flex-direction: column;
	gap: 6px;
	}

	.bar-row {
	display: flex;
	align-items: center;
	gap: 8px;
	font-size: 12px;
	}

	.bar-row .bar-label {
	width: 80px;
	text-align: right;
	color: var(--text-dim);
	flex-shrink: 0;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
	}

	.bar-row .bar-track {
	flex: 1;
	height: 20px;
	background: var(--bg-tertiary);
	border-radius: 4px;
	overflow: hidden;
	}

	.bar-row .bar-fill {
	height: 100%;
	border-radius: 4px;
	transition: width 0.6s ease;
	}

	.bar-row .bar-value {
	width: 40px;
	color: var(--text-dim);
	flex-shrink: 0;
	}

	/* Timeline */
	.timeline-chart {
	display: flex;
	align-items: flex-end;
	gap: 3px;
	height: 120px;
	padding-top: 10px;
	}

	.timeline-bar {
	flex: 1;
	min-width: 4px;
	background: var(--accent-dim);
	border-radius: 3px 3px 0 0;
	transition: all 0.3s;
	position: relative;
	cursor: pointer;
	}

	.timeline-bar:hover {
	background: var(--accent);
	}

	.timeline-bar:hover::after {
	content: attr(data-label);
	position: absolute;
	bottom: 100%;
	left: 50%;
	transform: translateX(-50%);
	background: var(--bg);
	border: 1px solid var(--border);
	padding: 4px 8px;
	border-radius: 4px;
	font-size: 11px;
	white-space: nowrap;
	z-index: 10;
	}

	.timeline-labels {
	display: flex;
	gap: 3px;
	margin-top: 6px;
	}

	.timeline-label {
	flex: 1;
	text-align: center;
	font-size: 9px;
	color: var(--text-faint);
	overflow: hidden;
	text-overflow: ellipsis;
	}

	/* Model distribution */
	.model-bars .bar-fill {
	background: var(--accent);
	}

	/* Hour heatmap */
	.hour-chart {
	display: flex;
	gap: 2px;
	height: 60px;
	align-items: flex-end;
	}

	.hour-bar {
	flex: 1;
	background: var(--green-dim);
	border-radius: 2px 2px 0 0;
	min-height: 2px;
	transition: all 0.3s;
	}

	.hour-bar:hover {
	background: var(--green);
	}

	.hour-labels {
	display: flex;
	gap: 2px;
	margin-top: 4px;
	}

	.hour-label {
	flex: 1;
	text-align: center;
	font-size: 8px;
	color: var(--text-faint);
	}

	@media (max-width: 768px) {
	.kpi-charts {
	grid-template-columns: 1fr;
	}

	.sidebar {
	position: absolute;
	z-index: 10;
	height: 100%;
	transform: translateX(-100%);
	transition: transform 0.3s;
	}

	.sidebar.open {
	transform: translateX(0);
	}

	.main {
	width: 100%;
	}

	.message {
	padding: 6px 16px;
	}

	.kpi-view {
	padding: 16px;
	}
	}

	/* ===== Loading ===== */
	.loading {
	display: flex;
	align-items: center;
	justify-content: center;
	height: 100%;
	}

	.spinner {
	width: 32px;
	height: 32px;
	border: 3px solid var(--bg-tertiary);
	border-top-color: var(--accent);
	border-radius: 50%;
	animation: spin 0.8s linear infinite;
	}

	@keyframes spin {
	to {
	transform: rotate(360deg);
	}
	}

	/* Scrollbars */
	::-webkit-scrollbar {
	width: 6px;
	height: 6px;
	}

	::-webkit-scrollbar-track {
	background: transparent;
	}

	::-webkit-scrollbar-thumb {
	background: var(--border);
	border-radius: 3px;
	}

	::-webkit-scrollbar-thumb:hover {
	background: var(--border-light);
	}

	/* View toggle */
	.view {
	display: none;
	flex: 1;
	flex-direction: column;
	overflow: hidden;
	}

	.view.active {
	display: flex;
	}
	</style>
	</head>

	<body>
	<div class="app">
	<div class="sidebar" id="sidebar">
	<div class="logo">
	<div class="logo-mark">C</div>
	<div class="logo-text">Chat<span>Scope</span></div>
	</div>
	<div class="nav-tabs">
	<button class="nav-tab active" data-view="chats" id="tabChats">Chats</button>
	<button class="nav-tab" data-view="kpi" id="tabKpi">Analytics</button>
	</div>
	<div class="sidebar-header">
	<div class="search-wrap">
	<span class="search-icon">🔍</span>
	<input class="search-box" id="search" placeholder="Search conversations..." type="text">
	</div>
	</div>
	<div class="convo-list" id="convoList"></div>
	</div>
	<div class="main">
	<!-- Chat View -->
	<div class="view active" id="chatView">
	<div class="chat-header" id="chatHeader" style="display:none;">
	<div>
	<div class="title" id="chatTitle"></div>
	<div class="info" id="chatInfo"></div>
	</div>
	</div>
	<div class="chat-body" id="chatBody">
	<div class="chat-empty">
	<div class="icon">💬</div>
	<div class="text">Select a conversation from the sidebar</div>
	</div>
	</div>
	</div>
	<!-- KPI View -->
	<div class="view" id="kpiView">
	<div class="kpi-view" id="kpiContent">
	<div class="loading">
	<div class="spinner"></div>
	</div>
	</div>
	</div>
	</div>
	</div>

	<script>
	let allConvos = [];
	let currentConvoId = null;
	let kpiData = null;
	let kpiLoaded = false;

	const convoList = document.getElementById('convoList');
	const chatBody = document.getElementById('chatBody');
	const chatHeader = document.getElementById('chatHeader');
	const chatTitle = document.getElementById('chatTitle');
	const chatInfo = document.getElementById('chatInfo');
	const searchInput = document.getElementById('search');
	const chatView = document.getElementById('chatView');
	const kpiView = document.getElementById('kpiView');
	const kpiContent = document.getElementById('kpiContent');

	// ===== Tab switching =====
	document.querySelectorAll('.nav-tab').forEach(tab => {
	tab.addEventListener('click', () => {
	document.querySelectorAll('.nav-tab').forEach(t => t.classList.remove('active'));
	tab.classList.add('active');
	const view = tab.dataset.view;
	document.querySelectorAll('.view').forEach(v => v.classList.remove('active'));
	if (view === 'chats') {
	chatView.classList.add('active');
	} else {
	kpiView.classList.add('active');
	if (!kpiLoaded) loadKPIs();
	}
	});
	});

	// ===== Load conversation index =====
	async function loadIndex() {
	try {
	const res = await fetch('/api/conversations');
	allConvos = await res.json();
	renderList(allConvos);
	} catch (e) {
	convoList.innerHTML = '<div style="padding:20px;color:var(--text-faint)">Failed to load</div>';
	console.error(e);
	}
	}

	function formatDate(ts) {
	if (!ts) return '';
	const d = new Date(ts * 1000);
	return d.toLocaleDateString('en-US', { year: 'numeric', month: 'short', day: 'numeric' });
	}

	function formatNum(n) {
	if (n >= 1e6) return (n / 1e6).toFixed(1) + 'M';
	if (n >= 1e3) return (n / 1e3).toFixed(1) + 'K';
	return n.toString();
	}

	function renderList(convos) {
	convoList.innerHTML = convos.map(c => `
	<div class="convo-item ${c.id === currentConvoId ? 'active' : ''}" data-id="${c.id}">
	<div class="title">${escapeHtml(c.title)}</div>
	<div class="meta">
	<span>${formatDate(c.create_time)}</span>
	${c.model ? `<span class="model">${escapeHtml(c.model)}</span>` : ''}
	</div>
	</div>
	`).join('');
	convoList.querySelectorAll('.convo-item').forEach(el => {
	el.addEventListener('click', () => loadConversation(el.dataset.id));
	});
	}

	searchInput.addEventListener('input', () => {
	const q = searchInput.value.toLowerCase();
	if (!q) { renderList(allConvos); return; }
	const filtered = allConvos.filter(c =>
	c.title.toLowerCase().includes(q) \|\|
	(c.model && c.model.toLowerCase().includes(q))
	);
	renderList(filtered);
	});

	// ===== Load single conversation =====
	async function loadConversation(id) {
	currentConvoId = id;
	convoList.querySelectorAll('.convo-item').forEach(el => {
	el.classList.toggle('active', el.dataset.id === id);
	});
	// Switch to chat view
	document.querySelectorAll('.nav-tab').forEach(t => t.classList.remove('active'));
	document.getElementById('tabChats').classList.add('active');
	document.querySelectorAll('.view').forEach(v => v.classList.remove('active'));
	chatView.classList.add('active');

	chatBody.innerHTML = '<div class="loading"><div class="spinner"></div></div>';
	chatHeader.style.display = 'flex';

	try {
	const res = await fetch(`/api/conversation/${id}`);
	const data = await res.json();
	chatTitle.textContent = data.title;
	const dateStr = formatDate(data.create_time);
	const msgCount = data.messages.length;
	chatInfo.textContent = `${dateStr} · ${msgCount} messages${data.model ? ' · ' + data.model : ''}`;
	if (data.messages.length === 0) {
	chatBody.innerHTML = '<div class="chat-empty"><div class="text">No messages</div></div>';
	return;
	}
	chatBody.innerHTML = data.messages.map(m => renderMessage(m)).join('');
	chatBody.scrollTop = 0;
	} catch (e) {
	chatBody.innerHTML = '<div class="chat-empty"><div class="text">Failed to load</div></div>';
	console.error(e);
	}
	}

	function renderMessage(m) {
	const role = m.role \|\| 'unknown';
	const avatarText = role === 'user' ? 'U' : role === 'assistant' ? 'A' : role === 'system' ? 'S' : 'T';
	const roleLabel = role.charAt(0).toUpperCase() + role.slice(1);
	let textHtml;
	if (role === 'user') {
	textHtml = escapeHtml(m.text).replace(/\n/g, '<br>');
	} else {
	try { textHtml = marked.parse(m.text); }
	catch { textHtml = escapeHtml(m.text).replace(/\n/g, '<br>'); }
	}
	textHtml = textHtml.replace(/\[image:([^\]]+)\]/g, (match, assetId) => {
	return `<img src="/${assetId}.dat" alt="image" loading="lazy">`;
	});
	const metaRow = m.model ? `<div class="meta-row">${escapeHtml(m.model)}</div>` : '';
	return `
	<div class="message ${role}">
	<div class="avatar">${avatarText}</div>
	<div class="content">
	<div class="role-label">${roleLabel}</div>
	<div class="text">${textHtml}</div>
	${metaRow}
	</div>
	</div>
	`;
	}

	// ===== KPI Dashboard =====
	async function loadKPIs() {
	try {
	const res = await fetch('/api/kpi');
	kpiData = await res.json();
	kpiLoaded = true;
	renderKPIs(kpiData);
	} catch (e) {
	kpiContent.innerHTML = '<div class="chat-empty"><div class="text">Failed to load analytics</div></div>';
	console.error(e);
	}
	}

	function renderKPIs(d) {
	const dateRange = d.earliest_timestamp && d.latest_timestamp
	? `${formatDate(d.earliest_timestamp)} — ${formatDate(d.latest_timestamp)}`
	: 'N/A';

	const tlMax = Math.max(...d.activity_timeline.map(t => t.count), 1);
	const modelMax = Math.max(...d.model_distribution.map(m => m.count), 1);
	const hourMax = Math.max(...d.hour_distribution.map(h => h.count), 1);
	const wdMax = Math.max(...d.weekday_distribution.map(w => w.count), 1);
	const promptMax = Math.max(...d.prompt_length_distribution.map(p => p.count), 1);
	const responseMax = Math.max(...d.response_length_distribution.map(r => r.count), 1);

	const colors = ['var(--accent)', 'var(--green)', 'var(--orange)', 'var(--blue)', 'var(--red)', '#6b4fa0', '#e17055'];

	kpiContent.innerHTML = `
	<div class="kpi-grid">
	<div class="kpi-card accent">
	<div class="label">Conversations</div>
	<div class="value">${formatNum(d.total_conversations)}</div>
	<div class="sub">${dateRange}</div>
	</div>
	<div class="kpi-card green">
	<div class="label">Total Messages</div>
	<div class="value">${formatNum(d.total_messages)}</div>
	<div class="sub">${formatNum(d.total_user_messages)} user · ${formatNum(d.total_assistant_messages)} assistant</div>
	</div>
	<div class="kpi-card orange">
	<div class="label">Total Tokens</div>
	<div class="value">${formatNum(d.estimated_tokens)}</div>
	<div class="sub">${formatNum(d.total_chars_user)} + ${formatNum(d.total_chars_assistant)} chars</div>
	</div>
	<div class="kpi-card blue">
	<div class="label">Avg Msgs / Convo</div>
	<div class="value">${d.avg_messages_per_convo}</div>
	<div class="sub">${d.model_distribution.length} models · ${d.total_image_assets} images</div>
	</div>
	</div>

	<div class="kpi-grid" style="margin-bottom:24px;">
	<div class="kpi-card">
	<div class="label">Median Prompt Length</div>
	<div class="value" style="font-size:22px;color:var(--accent-light)">${formatNum(d.median_prompt_chars)}</div>
	<div class="sub">P90: ${formatNum(d.p90_prompt_chars)} chars · Avg: ${formatNum(d.avg_user_chars)}</div>
	</div>
	<div class="kpi-card">
	<div class="label">Median Response Length</div>
	<div class="value" style="font-size:22px;color:var(--green)">${formatNum(d.median_response_chars)}</div>
	<div class="sub">P90: ${formatNum(d.p90_response_chars)} chars · Avg: ${formatNum(d.avg_assistant_chars)}</div>
	</div>
	<div class="kpi-card">
	<div class="label">System / Tool Messages</div>
	<div class="value" style="font-size:22px;color:var(--orange)">${formatNum(d.total_system_messages + d.total_tool_messages)}</div>
	<div class="sub">${d.total_system_messages} system · ${d.total_tool_messages} tool</div>
	</div>
	</div>

	<div class="kpi-charts">
	<!-- Activity Timeline -->
	<div class="chart-card" style="grid-column: 1 / -1;">
	<div class="chart-title">Activity Timeline — Conversations per Month</div>
	<div class="timeline-chart">
	${d.activity_timeline.map(t => `
	<div class="timeline-bar"
	style="height: ${(t.count / tlMax * 100)}%"
	data-label="${t.month}: ${t.count} chats"></div>
	`).join('')}
	</div>
	<div class="timeline-labels">
	${d.activity_timeline.map(t => `<div class="timeline-label">${t.month.slice(2)}</div>`).join('')}
	</div>
	</div>

	<!-- Prompt Length Distribution -->
	<div class="chart-card">
	<div class="chart-title">Prompt Length Distribution (User)</div>
	<div class="bar-chart">
	${d.prompt_length_distribution.map((p, i) => `
	<div class="bar-row">
	<div class="bar-label">${p.bucket}</div>
	<div class="bar-track">
	<div class="bar-fill" style="width: ${(p.count / promptMax * 100)}%; background: var(--accent)"></div>
	</div>
	<div class="bar-value">${p.count}</div>
	</div>
	`).join('')}
	</div>
	</div>

	<!-- Response Length Distribution -->
	<div class="chart-card">
	<div class="chart-title">Response Length Distribution (Assistant)</div>
	<div class="bar-chart">
	${d.response_length_distribution.map((r, i) => `
	<div class="bar-row">
	<div class="bar-label">${r.bucket}</div>
	<div class="bar-track">
	<div class="bar-fill" style="width: ${(r.count / responseMax * 100)}%; background: var(--green)"></div>
	</div>
	<div class="bar-value">${r.count}</div>
	</div>
	`).join('')}
	</div>
	</div>

	<!-- Model Distribution -->
	<div class="chart-card">
	<div class="chart-title">Model Distribution</div>
	<div class="bar-chart model-bars">
	${d.model_distribution.slice(0, 8).map((m, i) => `
	<div class="bar-row">
	<div class="bar-label">${escapeHtml(m.model)}</div>
	<div class="bar-track">
	<div class="bar-fill" style="width: ${(m.count / modelMax * 100)}%; background: ${colors[i % colors.length]}"></div>
	</div>
	<div class="bar-value">${m.count}</div>
	</div>
	`).join('')}
	</div>
	</div>

	<!-- Weekday Pattern -->
	<div class="chart-card">
	<div class="chart-title">Weekday Pattern</div>
	<div class="bar-chart">
	${d.weekday_distribution.map((w, i) => `
	<div class="bar-row">
	<div class="bar-label">${w.day}</div>
	<div class="bar-track">
	<div class="bar-fill" style="width: ${(w.count / wdMax * 100)}%; background: ${colors[i % colors.length]}"></div>
	</div>
	<div class="bar-value">${w.count}</div>
	</div>
	`).join('')}
	</div>
	</div>

	<!-- Hour of Day -->
	<div class="chart-card" style="grid-column: 1 / -1;">
	<div class="chart-title">Activity by Hour of Day</div>
	<div class="hour-chart">
	${d.hour_distribution.map(h => `
	<div class="hour-bar" style="height: ${(h.count / hourMax * 100)}%" title="${h.hour}:00 — ${h.count} chats"></div>
	`).join('')}
	</div>
	<div class="hour-labels">
	${d.hour_distribution.map(h => `<div class="hour-label">${h.hour % 6 === 0 ? h.hour + 'h' : ''}</div>`).join('')}
	</div>
	</div>

	<!-- Model Stats Table -->
	<div class="chart-card" style="grid-column: 1 / -1;">
	<div class="chart-title">Model Performance Breakdown</div>
	<table style="width:100%;border-collapse:collapse;font-size:12px;">
	<thead>
	<tr style="border-bottom:1px solid var(--border);text-align:left;color:var(--text-dim);">
	<th style="padding:6px 10px;">Model</th>
	<th style="padding:6px 10px;">Conversations</th>
	<th style="padding:6px 10px;">Messages</th>
	<th style="padding:6px 10px;">Avg Msgs/Convo</th>
	<th style="padding:6px 10px;">Total Chars</th>
	</tr>
	</thead>
	<tbody>
	${d.model_stats.map(m => `
	<tr style="border-bottom:1px solid var(--border);">
	<td style="padding:6px 10px;font-weight:500;">${escapeHtml(m.model)}</td>
	<td style="padding:6px 10px;">${m.conversations}</td>
	<td style="padding:6px 10px;">${formatNum(m.messages)}</td>
	<td style="padding:6px 10px;">${m.avg_msgs_per_convo}</td>
	<td style="padding:6px 10px;">${formatNum(m.chars)}</td>
	</tr>
	`).join('')}
	</tbody>
	</table>
	</div>

	<!-- Top Conversations -->
	<div class="chart-card" style="grid-column: 1 / -1;">
	<div class="chart-title">Top 10 Longest Conversations</div>
	<div style="display:flex;flex-direction:column;gap:4px;">
	${d.top_conversations.map((c, i) => `
	<div style="display:flex;align-items:center;gap:10px;padding:6px 0;border-bottom:1px solid var(--border);">
	<div style="width:24px;height:24px;border-radius:50%;background:var(--bg-tertiary);display:flex;align-items:center;justify-content:center;font-size:11px;font-weight:600;color:var(--text-dim);flex-shrink:0;">${i + 1}</div>
	<div style="flex:1;min-width:0;">
	<div style="font-size:13px;font-weight:500;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;">${escapeHtml(c.title)}</div>
	<div style="font-size:11px;color:var(--text-faint);">${escapeHtml(c.model)} · ${formatDate(c.create_time)}</div>
	</div>
	<div style="font-size:14px;font-weight:600;color:var(--accent-light);flex-shrink:0;">${c.msg_count} msgs</div>
	<button onclick="loadConversation('${c.id}')" style="padding:4px 10px;border-radius:4px;border:1px solid var(--border);background:var(--bg-tertiary);color:var(--text-dim);font-size:11px;cursor:pointer;flex-shrink:0;">Open</button>
	</div>
	`).join('')}
	</div>
	</div>
	</div>
	`;
	}

	function escapeHtml(str) {
	const div = document.createElement('div');
	div.textContent = str;
	return div.innerHTML;
	}

	// Init
	loadIndex();
	</script>
	</body>

	</html>