<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="color-scheme" content="light dark">
<title>Handoff List</title>
<style>
* { box-sizing: border-box; margin: 0; padding: 0; }
body {
font-family: system-ui, -apple-system, sans-serif;
background: var(--bg, #1a1a1a);
color: var(--fg, #e0e0e0);
padding: 16px;
}
.header {
display: flex;
justify-content: space-between;
align-items: center;
margin-bottom: 16px;
}
h1 { font-size: 18px; font-weight: 600; }
#status { font-size: 12px; color: #888; }
#list { display: flex; flex-direction: column; gap: 8px; }
.card {
background: #2a2a2a;
border-radius: 8px;
padding: 12px;
cursor: pointer;
transition: background 0.2s;
}
.card:hover { background: #333; }
.card-header { display: flex; justify-content: space-between; align-items: flex-start; gap: 8px; }
.card-content { flex: 1; min-width: 0; }
.title { font-weight: 500; margin-bottom: 4px; }
.meta { font-size: 12px; color: #888; }
.empty { color: #666; text-align: center; padding: 32px; }
.btn-delete {
background: transparent;
border: 1px solid #666;
color: #888;
padding: 4px 8px;
border-radius: 4px;
cursor: pointer;
font-size: 12px;
flex-shrink: 0;
transition: all 0.2s;
}
.btn-delete:hover { border-color: #e53935; color: #e53935; }
.btn-expand {
background: transparent;
border: 1px solid #666;
color: #888;
padding: 4px 8px;
border-radius: 4px;
cursor: pointer;
font-size: 12px;
flex-shrink: 0;
transition: all 0.2s;
}
.btn-expand:hover { border-color: #4a9eff; color: #4a9eff; }
.card.expanded .btn-expand { border-color: #4a9eff; color: #4a9eff; }
.card-actions { display: flex; gap: 6px; }
.card-details { display: none; margin-top: 12px; padding-top: 12px; border-top: 1px solid #444; }
.card.expanded .card-details { display: block; }
.summary { color: #aaa; font-size: 13px; margin-bottom: 12px; }
.conversation { background: #222; border-radius: 6px; padding: 12px; max-height: 300px; overflow-y: auto; }
.message { margin-bottom: 12px; }
.message:last-child { margin-bottom: 0; }
.message-role { font-size: 11px; font-weight: 600; margin-bottom: 4px; color: #888; }
.message-role.user { color: #4a9eff; }
.message-role.assistant { color: #10b981; }
.message-content { font-size: 13px; line-height: 1.5; white-space: pre-wrap; }
.loading { color: #888; font-style: italic; }
</style>
</head>
<body>
<div class="header">
<h1>Handoff List</h1>
<span id="status">Loading...</span>
</div>
<div id="list"></div>
<script type="module" src="./viewer.ts"></script>
</body>
</html>
