diff options
| author | Adam Malczewski <[email protected]> | 2026-06-04 21:21:20 +0900 |
|---|---|---|
| committer | Adam Malczewski <[email protected]> | 2026-06-04 21:21:20 +0900 |
| commit | 394f1ed37ce860da6fdc385769bf29f9737105cd (patch) | |
| tree | 4b825dc642cb6eb9a060e54bf8d69288fbee4904 /packages/frontend/src/lib/components/CacheRatePanel.svelte | |
| parent | 81a9cdbadf8c9d940d4fe9a2a0de607dee1f5f1a (diff) | |
| download | dispatch-394f1ed37ce860da6fdc385769bf29f9737105cd.tar.gz dispatch-394f1ed37ce860da6fdc385769bf29f9737105cd.zip | |
chore: genesis — remove all files to rebuild from scratch (arch rewrite)
Diffstat (limited to 'packages/frontend/src/lib/components/CacheRatePanel.svelte')
| -rw-r--r-- | packages/frontend/src/lib/components/CacheRatePanel.svelte | 124 |
1 files changed, 0 insertions, 124 deletions
diff --git a/packages/frontend/src/lib/components/CacheRatePanel.svelte b/packages/frontend/src/lib/components/CacheRatePanel.svelte deleted file mode 100644 index 88985a0..0000000 --- a/packages/frontend/src/lib/components/CacheRatePanel.svelte +++ /dev/null @@ -1,124 +0,0 @@ -<script lang="ts"> -import type { CacheStats } from "../types.js"; - -const { - cacheStats = null, - tabTitle = null, -}: { - cacheStats?: CacheStats | null; - tabTitle?: string | null; -} = $props(); - -// Cache hit rate = cached-read tokens / total prompt tokens. `inputTokens` is -// the TOTAL prompt (fresh + cache read + cache write), so this is the share of -// the prompt that was served from Anthropic's prompt cache. -function rate(read: number, totalInput: number): number { - if (totalInput <= 0) return 0; - return Math.max(0, Math.min(1, read / totalInput)); -} - -// For caching, a HIGH hit rate is GOOD — invert the usual color thresholds. -function rateClass(r: number): string { - if (r >= 0.7) return "progress-success"; - if (r >= 0.3) return "progress-warning"; - return "progress-error"; -} - -function fmt(n: number): string { - return n.toLocaleString(); -} - -const hitRate = $derived(cacheStats ? rate(cacheStats.cacheReadTokens, cacheStats.inputTokens) : 0); -const hitPct = $derived(Math.round(hitRate * 100)); -const uncached = $derived( - cacheStats - ? Math.max(0, cacheStats.inputTokens - cacheStats.cacheReadTokens - cacheStats.cacheWriteTokens) - : 0, -); -const lastHitPct = $derived( - cacheStats?.last - ? Math.round(rate(cacheStats.last.cacheReadTokens, cacheStats.last.inputTokens) * 100) - : 0, -); -</script> - -<div class="flex flex-col gap-3 flex-1 min-h-0 overflow-y-auto"> - {#if !cacheStats || cacheStats.requests === 0} - <p class="text-xs text-base-content/50"> - No cache data yet. Send a message to a Claude model — prompt-cache usage - appears here after the first response. - </p> - {:else} - <div class="bg-base-200 rounded-lg p-2"> - <div class="flex items-center gap-1.5 mb-2"> - <span class="text-xs font-semibold">Cache Hit Rate</span> - {#if tabTitle} - <span class="badge badge-xs badge-ghost">{tabTitle}</span> - {/if} - <span class="badge badge-xs ml-auto whitespace-nowrap">{cacheStats.requests} req</span> - </div> - - <!-- Headline cumulative hit rate --> - <div class="flex flex-col gap-0.5"> - <div class="flex items-center justify-between"> - <span class="text-xs text-base-content/50">Session (this tab)</span> - <span class="text-xs font-mono">{hitPct}%</span> - </div> - <progress - class="progress w-full h-2 {rateClass(hitRate)}" - value={hitPct} - max="100" - ></progress> - </div> - - <!-- Most recent request --> - {#if cacheStats.last} - <div class="flex flex-col gap-0.5 mt-2"> - <div class="flex items-center justify-between"> - <span class="text-xs text-base-content/50">Last request</span> - <span class="text-xs font-mono">{lastHitPct}%</span> - </div> - <progress - class="progress w-full h-2 {rateClass(lastHitPct / 100)}" - value={lastHitPct} - max="100" - ></progress> - </div> - {/if} - </div> - - <!-- Token breakdown (cumulative, this tab) --> - <div class="bg-base-200 rounded-lg p-2"> - <div class="text-xs font-semibold mb-1.5">Tokens (cumulative)</div> - <div class="flex flex-col gap-1 pl-1"> - <div class="flex items-center justify-between"> - <span class="text-xs text-base-content/50"> - <span class="badge badge-xs badge-success badge-soft mr-1">read</span>Cache hits - </span> - <span class="text-xs font-mono">{fmt(cacheStats.cacheReadTokens)}</span> - </div> - <div class="flex items-center justify-between"> - <span class="text-xs text-base-content/50"> - <span class="badge badge-xs badge-warning badge-soft mr-1">write</span>Cache writes - </span> - <span class="text-xs font-mono">{fmt(cacheStats.cacheWriteTokens)}</span> - </div> - <div class="flex items-center justify-between"> - <span class="text-xs text-base-content/50"> - <span class="badge badge-xs badge-error badge-soft mr-1">fresh</span>Uncached input - </span> - <span class="text-xs font-mono">{fmt(uncached)}</span> - </div> - <div class="border-t border-base-300 my-0.5"></div> - <div class="flex items-center justify-between"> - <span class="text-xs text-base-content/50">Total input</span> - <span class="text-xs font-mono">{fmt(cacheStats.inputTokens)}</span> - </div> - <div class="flex items-center justify-between"> - <span class="text-xs text-base-content/50">Output</span> - <span class="text-xs font-mono">{fmt(cacheStats.outputTokens)}</span> - </div> - </div> - </div> - {/if} -</div> |
