juxtapoandClaude Opus 5
f97ee19f88
The panel should match kitty's font, but extension pages can't reach system
fonts by name — CSP blocks `local()` — so the TTFs ship in the repo:
fonts/JBMono-Regular.ttf 2.5MB weight 400
fonts/JBMono-Bold.ttf 2.5MB weight 700
Copied from /usr/share/fonts/TTF/JetBrainsMonoNerdFontMono-{Regular,Bold}.ttf.
Heavy, but it's local-only — the panel never downloads them.
`@font-face` in sidepanel.html, fallback chain kept (ui-monospace, SF Mono,
Menlo, monospace). Line-height 1.4 -> 1.5 for JBMono's taller glyphs.
The Nerd Font variant means nerd-font glyphs leaking out of the pane render
properly instead of as boxes.
No `web_accessible_resources` needed: the side panel is an extension page on the
same chrome-extension:// origin, so bundled files are directly reachable. That
key is only for files injected into web pages.
Co-Authored-By: Claude Opus 5 (1M context) <noreply@anthropic.com>
155 lines
5.2 KiB
HTML
155 lines
5.2 KiB
HTML
<!doctype html>
|
|
<html>
|
|
<head>
|
|
<meta charset="utf-8">
|
|
<title>CC Sidepanel</title>
|
|
<style>
|
|
@font-face {
|
|
font-family: "JBMono";
|
|
src: url("fonts/JBMono-Regular.ttf") format("truetype");
|
|
font-weight: 400;
|
|
font-style: normal;
|
|
}
|
|
@font-face {
|
|
font-family: "JBMono";
|
|
src: url("fonts/JBMono-Bold.ttf") format("truetype");
|
|
font-weight: 700;
|
|
font-style: normal;
|
|
}
|
|
:root { color-scheme: dark; }
|
|
body {
|
|
margin: 0; padding: 10px; background: #16141c; color: #eae6f5;
|
|
font: 13px/1.5 "JBMono", 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; }
|
|
#emoji-btn { cursor: pointer; padding: 0 9px; font-size: 15px; line-height: 1; }
|
|
|
|
#emoji-pad {
|
|
background: #1b1826; border: 1px solid #3a3548; border-radius: 6px;
|
|
padding: 6px; margin-bottom: 6px;
|
|
}
|
|
/* An ID selector outranks the UA's [hidden]{display:none}, so `hidden` alone
|
|
never closes this pad — it has to be spelled out here. */
|
|
#emoji-pad[hidden] { display: none; }
|
|
|
|
#emoji-cats {
|
|
display: flex; gap: 2px; margin-bottom: 5px;
|
|
border-bottom: 1px solid #2c2836; padding-bottom: 5px;
|
|
}
|
|
#emoji-cats button {
|
|
flex: 1; border: 0; background: transparent; cursor: pointer;
|
|
font-size: 14px; line-height: 1; padding: 4px 0; border-radius: 4px;
|
|
}
|
|
#emoji-cats button:hover { background: #2f2a40; }
|
|
#emoji-cats button.on { background: #3a3155; box-shadow: inset 0 -2px 0 #a78bfa; }
|
|
|
|
#emoji-lbl {
|
|
font-size: 10px; opacity: .45; margin-bottom: 4px;
|
|
text-transform: lowercase; letter-spacing: .04em;
|
|
}
|
|
#emoji-grid {
|
|
display: grid; grid-template-columns: repeat(8, 1fr); gap: 2px;
|
|
max-height: 168px; overflow-y: auto;
|
|
}
|
|
#emoji-grid button {
|
|
border: 0; background: transparent; padding: 4px 0;
|
|
font-size: 17px; line-height: 1.1; cursor: pointer; border-radius: 4px;
|
|
}
|
|
#emoji-grid button:hover { background: #2f2a40; }
|
|
#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="emoji-pad" hidden>
|
|
<div id="emoji-cats"></div>
|
|
<div id="emoji-lbl"></div>
|
|
<div id="emoji-grid"></div>
|
|
</div>
|
|
<div id="input-row">
|
|
<button id="emoji-btn" title="emoji (Esc to close)">🙂</button>
|
|
<textarea id="text" placeholder="type, enter to send"></textarea>
|
|
<button id="send">send</button>
|
|
</div>
|
|
<script src="sidepanel.js"></script>
|
|
</body>
|
|
</html>
|