103 lines
3.5 KiB
HTML
103 lines
3.5 KiB
HTML
<!doctype html>
|
|
<html>
|
|
<head>
|
|
<meta charset="utf-8">
|
|
<title>CC Sidepanel</title>
|
|
<style>
|
|
:root { color-scheme: dark; }
|
|
body {
|
|
margin: 0; padding: 10px; background: #16141c; color: #eae6f5;
|
|
font: 13px/1.4 ui-monospace, "SF Mono", Menlo, monospace;
|
|
display: flex; flex-direction: column; height: 100vh; box-sizing: border-box;
|
|
}
|
|
select, textarea, button {
|
|
font: inherit; background: #221f2b; color: #eae6f5;
|
|
border: 1px solid #3a3548; border-radius: 6px; padding: 6px;
|
|
}
|
|
#seat-row { display: flex; gap: 6px; margin-bottom: 8px; }
|
|
#seat { flex: 1; }
|
|
#refresh { cursor: pointer; }
|
|
#screen {
|
|
flex: 1; overflow-y: auto; white-space: pre-wrap; word-break: break-word;
|
|
background: #0e0c13; border: 1px solid #2c2836; border-radius: 6px;
|
|
padding: 8px; margin-bottom: 8px; font-size: 12px;
|
|
}
|
|
#input-row { display: flex; gap: 6px; }
|
|
#text { flex: 1; resize: none; height: 44px; }
|
|
#send { cursor: pointer; background: #6b4fd6; border-color: #6b4fd6; padding: 0 14px; }
|
|
#status { font-size: 11px; opacity: .6; margin-bottom: 6px; }
|
|
#ctx {
|
|
font-size: 11px; color: #9d8fd0; margin-bottom: 6px;
|
|
white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
|
|
}
|
|
|
|
/* Parsed blocks */
|
|
.blk { margin: 0 0 8px; padding-left: 8px; border-left: 2px solid transparent; }
|
|
.blk .tag {
|
|
display: block; font-size: 10px; letter-spacing: .05em;
|
|
text-transform: lowercase; opacity: .75; margin-bottom: 2px;
|
|
}
|
|
.blk .body { display: block; }
|
|
|
|
.blk.user {
|
|
border-left-color: #a78bfa;
|
|
background: linear-gradient(90deg, #241d3d 0%, #1b1729 100%);
|
|
border-radius: 0 5px 5px 0; padding: 6px 8px 6px 9px;
|
|
color: #ddd2ff; font-weight: 600;
|
|
}
|
|
.blk.user .tag { color: #b9a5f5; font-weight: 700; opacity: .9; }
|
|
|
|
.blk.assistant { border-left-color: #3f8f7a; }
|
|
.blk.assistant .tag { color: #6ec4a8; }
|
|
|
|
.blk.tool {
|
|
border-left-color: #7a6a3f; background: #191621;
|
|
border-radius: 0 4px 4px 0; padding: 4px 6px 4px 8px;
|
|
font-size: 11px; color: #c8bda2;
|
|
}
|
|
.blk.tool .tag { color: #d6b25f; }
|
|
.blk.tool .body { opacity: .8; }
|
|
|
|
.blk.thinking {
|
|
border-left-color: #4a4459; font-size: 11px; font-style: italic;
|
|
color: #8b83a0; opacity: .8;
|
|
}
|
|
.blk.thinking .tag { color: #6f6885; }
|
|
|
|
.blk.plain { color: #a29ab5; }
|
|
.blk.meta { font-size: 10px; opacity: .35; text-align: right; margin-bottom: 6px; }
|
|
|
|
/* The live heartbeat — the seat is thinking RIGHT NOW. Pure gold, and it
|
|
breathes, so a glance tells you working vs finished without reading it. */
|
|
.blk.pulse {
|
|
color: #ffd700; font-weight: 700; font-size: 11.5px;
|
|
letter-spacing: .02em; text-shadow: 0 0 8px rgba(255, 215, 0, .35);
|
|
animation: pulse-breathe 1.6s ease-in-out infinite;
|
|
margin-bottom: 6px;
|
|
}
|
|
@keyframes pulse-breathe {
|
|
0%, 100% { opacity: 1; }
|
|
50% { opacity: .55; }
|
|
}
|
|
@media (prefers-reduced-motion: reduce) {
|
|
.blk.pulse { animation: none; }
|
|
}
|
|
</style>
|
|
</head>
|
|
<body>
|
|
<div id="seat-row">
|
|
<select id="seat"><option>loading seats…</option></select>
|
|
<button id="refresh" title="refresh seat list">⟳</button>
|
|
<button id="compact-toggle" title="showing parsed blocks — click for raw pane">🧹</button>
|
|
</div>
|
|
<div id="ctx"></div>
|
|
<div id="status">—</div>
|
|
<div id="screen">connecting…</div>
|
|
<div id="input-row">
|
|
<textarea id="text" placeholder="type, enter to send"></textarea>
|
|
<button id="send">send</button>
|
|
</div>
|
|
<script src="sidepanel.js"></script>
|
|
</body>
|
|
</html>
|