bowenliang123
0164778f95
AGENTS.md keeps docs/ to end-user-facing files, and a headless Chromium generator plus its HTML template are build tooling. They move to scripts/social-preview/ beside the other maintenance scripts, and the npm script and its usage comment follow.
154 lines
3.9 KiB
HTML
154 lines
3.9 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="en">
|
|
<head>
|
|
<meta charset="UTF-8" />
|
|
<style>
|
|
* { margin: 0; padding: 0; box-sizing: border-box; }
|
|
html, body { width: 1280px; height: 640px; }
|
|
body {
|
|
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
|
|
background: radial-gradient(1200px 800px at 22% 18%, #14294a 0%, #0e1d36 45%, #0a1526 100%);
|
|
color: #fff;
|
|
overflow: hidden;
|
|
position: relative;
|
|
}
|
|
|
|
.left {
|
|
position: absolute;
|
|
left: 56px;
|
|
top: 118px;
|
|
width: 520px;
|
|
}
|
|
.eyebrow {
|
|
color: #5b9dff;
|
|
font-size: 17px;
|
|
font-weight: 700;
|
|
letter-spacing: 3.4px;
|
|
}
|
|
h1 {
|
|
margin-top: 14px;
|
|
font-size: 66px;
|
|
font-weight: 800;
|
|
letter-spacing: -1.5px;
|
|
}
|
|
.subtitle {
|
|
margin-top: 26px;
|
|
font-size: 24px;
|
|
line-height: 1.42;
|
|
color: #c3cfdd;
|
|
font-weight: 500;
|
|
}
|
|
.subtitle .dim { color: #9fb0c3; }
|
|
|
|
.bar {
|
|
margin-top: 30px;
|
|
height: 12px;
|
|
border-radius: 6px;
|
|
background: linear-gradient(90deg,
|
|
#6366f1 0%, #6366f1 8%,
|
|
#f59e0b 8%, #f59e0b 13%,
|
|
#22c55e 13%, #22c55e 18%,
|
|
#a855f7 18%, #a855f7 24%,
|
|
#3b82f6 24%, #3b82f6 42%,
|
|
#14b8a6 42%, #14b8a6 100%);
|
|
}
|
|
.legend {
|
|
margin-top: 12px;
|
|
display: flex;
|
|
flex-wrap: nowrap;
|
|
gap: 14px;
|
|
font-size: 15px;
|
|
color: #c3cfdd;
|
|
font-weight: 600;
|
|
white-space: nowrap;
|
|
}
|
|
.legend .dot {
|
|
display: inline-block;
|
|
width: 11px; height: 11px;
|
|
border-radius: 3px;
|
|
margin-right: 7px;
|
|
vertical-align: -1px;
|
|
}
|
|
|
|
.btn-row { margin-top: 30px; display: flex; gap: 14px; }
|
|
.btn {
|
|
font-size: 17px;
|
|
font-weight: 700;
|
|
padding: 13px 20px;
|
|
border-radius: 13px;
|
|
background: #2f7de1;
|
|
color: #fff;
|
|
}
|
|
.btn .ico { margin-right: 8px; font-weight: 400; }
|
|
|
|
.chip-row { margin-top: 16px; display: flex; gap: 12px; }
|
|
.chip {
|
|
font-size: 16px;
|
|
font-weight: 600;
|
|
color: #b9c6d6;
|
|
border: 1.5px solid #3b587a;
|
|
border-radius: 999px;
|
|
padding: 9px 18px;
|
|
}
|
|
|
|
.card {
|
|
position: absolute;
|
|
left: 622px;
|
|
top: 150px;
|
|
width: 618px;
|
|
background: #fff;
|
|
border-radius: 16px;
|
|
padding: 10px;
|
|
box-shadow: 0 24px 70px rgba(0, 0, 0, 0.45);
|
|
}
|
|
.shot {
|
|
border-radius: 9px;
|
|
overflow: hidden;
|
|
height: 322px;
|
|
background: #fff;
|
|
}
|
|
.shot img {
|
|
width: 100%;
|
|
display: block;
|
|
margin-top: -17px; /* hide the GUI title bar, keep the Chat/Trajectory/Context tabs */
|
|
}
|
|
</style>
|
|
</head>
|
|
<body>
|
|
<div class="left">
|
|
<div class="eyebrow">DEEPSEEK HARNESS PLUGIN</div>
|
|
<h1>dsh-context</h1>
|
|
<div class="subtitle">
|
|
Context Dashboard and /context Command.<br/>
|
|
<span class="dim">See what your agent’s context window is actually made of and how it evolves.</span>
|
|
</div>
|
|
<div class="bar"></div>
|
|
<div class="legend">
|
|
<span><span class="dot" style="background:#6366f1"></span>System</span>
|
|
<span><span class="dot" style="background:#f59e0b"></span>Tools</span>
|
|
<span><span class="dot" style="background:#22c55e"></span>User</span>
|
|
<span><span class="dot" style="background:#a855f7"></span>Injected</span>
|
|
<span><span class="dot" style="background:#3b82f6"></span>Assistant</span>
|
|
<span><span class="dot" style="background:#14b8a6"></span>Tool results</span>
|
|
</div>
|
|
<div class="btn-row">
|
|
<div class="btn"><span class="ico">▤</span>Context Dashboard</div>
|
|
<div class="btn"><span class="ico">⌨</span>/context Command</div>
|
|
</div>
|
|
<div class="chip-row">
|
|
<div class="chip">Composition</div>
|
|
<div class="chip">Turn / Step History</div>
|
|
</div>
|
|
<div class="chip-row">
|
|
<div class="chip">Compaction</div>
|
|
<div class="chip">Context Events</div>
|
|
</div>
|
|
</div>
|
|
<div class="card">
|
|
<div class="shot">
|
|
<img src="../context-overview.png" alt="Context Dashboard" />
|
|
</div>
|
|
</div>
|
|
</body>
|
|
</html>
|