feat(pxpipe): PXPIPE token saver — multimodal prompt compression (#2465)

Add pxpipe as an experimental fifth Token Saver: Claude-format request
bodies above a configurable size threshold are rendered as dense PNGs
via the pxpipe-proxy library API (transformAnthropicMessages) before
dispatch, cutting estimated input tokens by ~35-60% on token-dense
contexts. Integration follows the Headroom pattern: applied to the final
body in chatCore just before dispatch, fail-open on any error/timeout.

Managed npm install into DATA_DIR/pxpipe, dynamic loader with per-version
cache-bust, JSONL event log with rotation, /api/pxpipe/* endpoints, Token
Saver card (marked experimental) + /dashboard/pxpipe page, and per-request
Activated/Skipped annotation in Request Details. Disabled by default.
This commit is contained in:
Elio Bonfim Júnior
2026-07-10 16:10:42 +07:00
committed by decolua
parent e1f3399b73
commit dcf1927f22
26 changed files with 1324 additions and 7 deletions
@@ -412,7 +412,49 @@ export default function RequestDetailsTab() {
</span>
</div>
</div>
{selectedDetail.pxpipe && (
<div className="rounded-lg border border-black/5 dark:border-white/5 p-4">
<div className="flex items-center gap-2 mb-2">
<span className="material-symbols-outlined text-[18px] text-text-muted">image</span>
<span className="font-semibold text-sm text-text-main">PXPIPE</span>
<span className={cn(
"text-xs px-2 py-0.5 rounded",
selectedDetail.pxpipe.applied
? "bg-green-500/15 text-green-600"
: "bg-amber-500/15 text-amber-600"
)}>
{selectedDetail.pxpipe.applied ? "Activated" : "Skipped"}
</span>
</div>
{selectedDetail.pxpipe.applied ? (
<div className="grid grid-cols-2 gap-2 text-sm sm:grid-cols-4">
<div>
<span className="text-text-muted block text-xs">Original (est.)</span>
<span className="font-mono">{(selectedDetail.pxpipe.tokensBeforeEst || 0).toLocaleString()} tokens</span>
</div>
<div>
<span className="text-text-muted block text-xs">Compressed (est.)</span>
<span className="font-mono">{(selectedDetail.pxpipe.tokensAfterEst || 0).toLocaleString()} tokens</span>
</div>
<div>
<span className="text-text-muted block text-xs">Saved</span>
<span className="font-mono text-green-600">{selectedDetail.pxpipe.savedPct || 0}%</span>
</div>
<div>
<span className="text-text-muted block text-xs">Images</span>
<span className="font-mono">{selectedDetail.pxpipe.imageCount || 0} ({selectedDetail.pxpipe.durationMs || 0}ms)</span>
</div>
</div>
) : (
<p className="text-sm text-text-muted">
Reason: <span className="font-mono">{selectedDetail.pxpipe.reason}</span>
{selectedDetail.pxpipe.detail ? `${selectedDetail.pxpipe.detail}` : ""}
</p>
)}
</div>
)}
<div className="space-y-4">
<CollapsibleSection title="1. Client Request (Input)" defaultOpen={true} icon="input">
<pre className="max-h-[300px] max-w-full overflow-auto rounded-lg border border-black/5 bg-black/5 p-3 font-mono text-xs text-text-main dark:border-white/5 dark:bg-white/5 sm:p-4">