\n \n \n \n",[18,67],"5ac16b84-3765-11f1-98cd-42b51c65c3df",["D",1776104387895],[18,91],"pulls","branches",1,"forks","envVars",{"_194":26,"_196":26},"connections",{"_194":26,"_195":26},"count","unfilledCount","emptyCount",{"_35":164,"_13":18,"_65":93,"_45":-5,"_37":38,"_165":166,"_167":24,"_39":231,"_41":26,"_68":92,"_169":-5,"_69":30,"_170":-5,"_211":232,"_17":233},{"_35":183,"_13":91,"_65":90,"_45":93,"_37":38,"_165":85,"_167":24,"_39":228,"_41":26,"_68":92,"_169":-5,"_69":30,"_170":-5,"_211":229,"_17":230},{"_35":220,"_13":221,"_65":222,"_45":90,"_37":38,"_165":129,"_167":24,"_39":223,"_41":224,"_68":82,"_169":225,"_69":30,"_170":-5,"_211":226,"_17":227},{"_35":179,"_13":67,"_65":66,"_45":93,"_37":38,"_165":42,"_167":24,"_39":217,"_41":26,"_68":21,"_169":181,"_69":30,"_170":-5,"_211":218,"_17":219},{"_35":175,"_13":81,"_65":80,"_45":93,"_37":38,"_165":75,"_167":24,"_39":214,"_41":26,"_68":82,"_169":177,"_69":30,"_170":-5,"_211":215,"_17":216},{"_35":203,"_13":204,"_65":205,"_45":-5,"_37":38,"_165":206,"_167":24,"_39":207,"_41":208,"_68":209,"_169":210,"_69":30,"_170":-5,"_211":212,"_17":213},"538e5458-3765-11f1-8ab5-42b51c65c3df","main.ts","06b6cfe8-3765-11f1-b445-42b51c65c3df",4,["D",1776104375813],3,"http","import { serveFile, parseVal } from \"https://esm.town/v/std/utils/index.ts\";\nimport { Hono } from \"npm:hono\";\n\nconst app = new Hono();\n\napp.get(\"/\", () => serveFile(\"/frontend/index.html\"));\napp.get(\"/frontend/**/*\", (c) => serveFile(c.req.path));\napp.get(\"/source\", (c) => c.redirect(parseVal().links.self.val));\n\napp.onError((err) => Promise.reject(err));\n\nexport default app.fetch;","children",[],[204],["D",1776104387770],[],[18,81],["D",1776104385887],[],[18,67],"5c9b12aa-3767-11f1-8d01-42b51c65c3df","PruningCalculator.tsx","94748096-3765-11f1-b60f-42b51c65c3df",["D",1776105249985],2,"/** @jsxImportSource https://esm.sh/react@18.2.0 */\nimport { useState, useMemo } from \"https://esm.sh/react@18.2.0\";\n\nconst PROVIDERS: Record = {\n anthropic_sonnet: {\n name: \"Anthropic Sonnet 4.6\",\n input: 3.0,\n cacheWrite: 3.75,\n cacheRead: 0.30,\n hasWritePremium: true,\n contextLimit: 1000000,\n },\n anthropic_opus: {\n name: \"Anthropic Opus 4.6\",\n input: 5.0,\n cacheWrite: 6.25,\n cacheRead: 0.50,\n hasWritePremium: true,\n contextLimit: 1000000,\n },\n openai_gpt5: {\n name: \"OpenAI GPT-5.4\",\n input: 2.50,\n cacheWrite: 2.50,\n cacheRead: 0.25,\n hasWritePremium: false,\n contextLimit: 1000000,\n },\n deepseek_v3: {\n name: \"DeepSeek V3.2\",\n input: 0.28,\n cacheWrite: 0.28,\n cacheRead: 0.028,\n hasWritePremium: false,\n contextLimit: 128000,\n },\n gemini_31_pro: {\n name: \"Gemini 3.1 Pro\",\n input: 2.00,\n cacheWrite: 2.00,\n cacheRead: 0.20,\n hasWritePremium: false,\n contextLimit: 1000000,\n },\n};\n\nfunction cost(tokens: number, ratePerMTok: number) {\n return (tokens / 1_000_000) * ratePerMTok;\n}\n\nfunction formatDollars(val: number) {\n if (val < 0.001) return `$${val.toFixed(5)}`;\n if (val < 0.01) return `$${val.toFixed(4)}`;\n if (val < 1) return `$${val.toFixed(3)}`;\n return `$${val.toFixed(2)}`;\n}\n\nfunction formatTokens(val: number) {\n if (val >= 1_000_000) return `${(val / 1_000_000).toFixed(1)}M`;\n if (val >= 1_000) return `${(val / 1_000).toFixed(0)}K`;\n return `${val}`;\n}\n\nfunction SliderInput({ label, value, onChange, min, max, step, format, sublabel }: {\n label: string;\n value: number;\n onChange: (v: number) => void;\n min: number;\n max: number;\n step: number;\n format?: (v: number) => string;\n sublabel?: string;\n}) {\n return (\n

\n \n {label}\n \n \n {format ? format(value) : value}\n \n

\n {sublabel && (\n

\n {sublabel}\n

\n )}\n onChange(Number(e.target.value))}\n style={{ width: \"100%\", accentColor: \"#d4845a\" }}\n />\n

\n );\n}\n\nfunction CostBar({ label, value, maxValue, color, breakdown }: {\n label: string;\n value: number;\n maxValue: number;\n color: string;\n breakdown?: string;\n}) {\n const pct = maxValue > 0 ? Math.min((value / maxValue) * 100, 100) : 0;\n return (\n

\n {label}\n {formatDollars(value)}\n

\n {breakdown && (\n

\n {breakdown}\n

\n )}\n

\n );\n}\n\nfunction Verdict({ breakEven, refireInterval, refireCount, noPruneTotalCost, pruneTotalCost, turnsRemaining, provider }: {\n breakEven: number;\n refireInterval: number;\n refireCount: number;\n noPruneTotalCost: number;\n pruneTotalCost: number;\n turnsRemaining: number;\n provider: typeof PROVIDERS[string];\n}) {\n const isWaste = pruneTotalCost > noPruneTotalCost;\n const netSavings = noPruneTotalCost - pruneTotalCost;\n\n let verdict: string, explanation: string, color: string;\n\n if (isWaste) {\n verdict = \"Pruning is a net cost increase\";\n explanation = `Over ${turnsRemaining} turns (${refireCount} re-fire event${refireCount !== 1 ? \"s\" : \"\"}), pruning costs ${formatDollars(Math.abs(netSavings))} more than leaving context intact. ${\n refireInterval < breakEven\n ? `The re-fire interval (~${refireInterval} turns) is shorter than break-even (~${Math.ceil(breakEven)} turns), so the cache penalty never amortizes.`\n : `Break-even is ${Math.ceil(breakEven)} turns, ${turnsRemaining < breakEven ? \"longer than the remaining session.\" : \"but cumulative re-fire events erode savings.\"}`\n }`;\n color = \"#c75450\";\n } else {\n verdict = \"Pruning saves money here\";\n explanation = `Over ${turnsRemaining} turns (${refireCount} re-fire event${refireCount !== 1 ? \"s\" : \"\"}), pruning saves ${formatDollars(netSavings)}. ${provider.hasWritePremium ? \"Despite Anthropic's cache write premium, \" : \"\"}the per-turn savings from reduced context outweigh the cache penalty${breakEven < 10 ? \" within a few turns.\" : ` after ~${Math.ceil(breakEven)} turns.`}`;\n color = \"#5a9e6f\";\n }\n\n return (\n

\n {verdict}\n

\n {explanation}\n

\n );\n}\n\nfunction CostOverTurns({ noPruneCosts, pruneCosts, breakEvenTurn, refireTurns, maxTurns }: {\n noPruneCosts: number[];\n pruneCosts: number[];\n breakEvenTurn: number;\n refireTurns: number[];\n maxTurns: number;\n}) {\n const width = 520;\n const height = 200;\n const pad = { top: 20, right: 20, bottom: 30, left: 55 };\n const plotW = width - pad.left - pad.right;\n const plotH = height - pad.top - pad.bottom;\n\n const maxCost = Math.max(\n noPruneCosts[noPruneCosts.length - 1] || 0,\n pruneCosts[pruneCosts.length - 1] || 0,\n 0.01\n );\n\n const xScale = (i: number) => pad.left + (i / maxTurns) * plotW;\n const yScale = (v: number) => pad.top + plotH - (v / maxCost) * plotH;\n\n const makePath = (data: number[]) => {\n return data.map((v, i) => `${i === 0 ? \"M\" : \"L\"}${xScale(i).toFixed(1)},${yScale(v).toFixed(1)}`).join(\" \");\n };\n\n const yTicks = [0, maxCost * 0.25, maxCost * 0.5, maxCost * 0.75, maxCost];\n const xTicks = [0, Math.floor(maxTurns * 0.25), Math.floor(maxTurns * 0.5), Math.floor(maxTurns * 0.75), maxTurns];\n\n return (\n \n );\n}\n\nexport default function PruningCalculator() {\n const [providerKey, setProviderKey] = useState(\"anthropic_sonnet\");\n const [contextSize, setContextSize] = useState(200000);\n const [prunePosition, setPrunePosition] = useState(20);\n const [amountPruned, setAmountPruned] = useState(40000);\n const [turnsRemaining, setTurnsRemaining] = useState(50);\n const [tokensPerTurn, setTokensPerTurn] = useState(5000);\n const [toolOutputPct, setToolOutputPct] = useState(60);\n\n const provider = PROVIDERS[providerKey];\n\n const prunePositionTokens = Math.floor(contextSize * (prunePosition / 100));\n const postPruneContext = contextSize - amountPruned;\n\n // Bug 1 fix: entire prefix before prune position survives as cached, not just 5K\n const prefixCached = prunePositionTokens;\n const rewriteTokens = contextSize - prefixCached - amountPruned;\n\n // cost per turn WITHOUT pruning (fully cached conversation)\n const normalTurnCost = cost(contextSize, provider.cacheRead) + cost(tokensPerTurn, provider.cacheWrite);\n\n // cost of THE TURN pruning fires\n const pruningTurnCost = cost(prefixCached, provider.cacheRead) + cost(Math.max(0, rewriteTokens), provider.cacheWrite);\n\n // cost per turn AFTER pruning (new smaller cache established)\n const postPruneTurnCost = cost(postPruneContext, provider.cacheRead) + cost(tokensPerTurn, provider.cacheWrite);\n\n // per-turn savings\n const perTurnSavings = normalTurnCost - postPruneTurnCost;\n\n // break-even\n const cachePenalty = pruningTurnCost - normalTurnCost;\n const breakEvenTurns = perTurnSavings > 0 ? cachePenalty / perTurnSavings : Infinity;\n\n // Bug 2 fix: refire needs 40K protection window + 20K prune minimum = 60K of new tool output\n const toolOutputPerTurn = tokensPerTurn * (toolOutputPct / 100);\n const turnsToRefire = toolOutputPerTurn > 0 ? Math.ceil(60000 / toolOutputPerTurn) : Infinity;\n const refireInterval = turnsToRefire;\n\n // cumulative cost comparison over N turns (accounting for re-fires)\n const { noPruneCosts, pruneCosts, refireTurns } = useMemo(() => {\n const noPrune: number[] = [];\n const withPrune: number[] = [];\n const refires: number[] = [];\n let noCum = 0;\n let pCum = 0;\n let currentContext = contextSize;\n let turnsSinceLastPrune = 0;\n let firstPruneDone = false;\n\n for (let t = 0; t <= turnsRemaining; t++) {\n const noCtx = contextSize + t * tokensPerTurn;\n noCum += cost(noCtx - tokensPerTurn, provider.cacheRead) + cost(tokensPerTurn, provider.cacheWrite);\n noPrune.push(noCum);\n\n if (!firstPruneDone) {\n pCum += pruningTurnCost;\n currentContext = postPruneContext;\n firstPruneDone = true;\n turnsSinceLastPrune = 0;\n } else {\n turnsSinceLastPrune++;\n currentContext += tokensPerTurn;\n\n if (turnsSinceLastPrune >= refireInterval && refireInterval < Infinity) {\n const rePruneRewrite = currentContext - prefixCached - amountPruned;\n pCum += cost(prefixCached, provider.cacheRead) + cost(Math.max(0, rePruneRewrite), provider.cacheWrite);\n currentContext -= amountPruned;\n turnsSinceLastPrune = 0;\n refires.push(t);\n } else {\n pCum += cost(currentContext - tokensPerTurn, provider.cacheRead) + cost(tokensPerTurn, provider.cacheWrite);\n }\n }\n withPrune.push(pCum);\n }\n return { noPruneCosts: noPrune, pruneCosts: withPrune, refireTurns: refires };\n }, [contextSize, amountPruned, tokensPerTurn, turnsRemaining, provider, pruningTurnCost, postPruneContext, refireInterval, prefixCached]);\n\n const noPruneTotalCost = noPruneCosts[noPruneCosts.length - 1] || 0;\n const pruneTotalCost = pruneCosts[pruneCosts.length - 1] || 0;\n const maxBarValue = Math.max(normalTurnCost, pruningTurnCost, postPruneTurnCost);\n\n // compaction deferral: how many extra turns pruning buys before hitting context limit\n const headroomTokens = provider.contextLimit - postPruneContext;\n const deferredTurns = tokensPerTurn > 0 ? Math.floor(headroomTokens / tokensPerTurn) : Infinity;\n\n return (\n

\n {/* header */}\n

\n Prompt Cache Pruning Economics\n

\n When does pruning old tool outputs save money vs. busting your cache prefix?\n
Cache cost is proportional to what follows the mutation, not what was mutated.\n

\n\n {/* provider selector */}\n

\n \n Provider / Model\n \n

\n {Object.entries(PROVIDERS).map(([key, p]) => (\n setProviderKey(key)}\n style={{\n padding: \"6px 12px\",\n fontSize: 11,\n fontFamily: \"inherit\",\n border: `1px solid ${key === providerKey ? \"#d4845a\" : \"#332e28\"}`,\n borderRadius: 4,\n background: key === providerKey ? \"#d4845a18\" : \"transparent\",\n color: key === providerKey ? \"#d4845a\" : \"#a09888\",\n cursor: \"pointer\",\n transition: \"all 0.15s\",\n }}\n >\n {p.name}\n \n ))}\n

\n input: ${provider.input}/MTok · write: ${provider.cacheWrite}/MTok · read: ${provider.cacheRead}/MTok\n {provider.hasWritePremium && · write premium: {((provider.cacheWrite / provider.input - 1) * 100).toFixed(0)}%}\n

\n\n {/* sliders */}\n

\n \n `${v}% (${formatTokens(Math.floor(contextSize * v / 100))} in)`}\n sublabel=\"How far into the conversation the oldest pruned output sits\"\n />\n \n \n `${v}%`}\n sublabel={`${formatTokens(Math.round(tokensPerTurn * toolOutputPct / 100))}/turn is tool output — drives re-fire interval`}\n />\n `${v}`}\n />\n

\n\n {/* per-turn costs */}\n

\n Per-turn cost breakdown\n

\n \n \n \n

\n Per-turn savings: 0 ? \"#5a9e6f\" : \"#c75450\", fontWeight: 600 }}>{formatDollars(perTurnSavings)}\n

\n\n {/* key metrics */}\n

\n {[\n { label: \"Cache penalty\", value: formatDollars(Math.max(0, cachePenalty)), sub: \"one-time cost\" },\n { label: \"Break-even\", value: breakEvenTurns === Infinity ? \"never\" : `${Math.ceil(breakEvenTurns)} turns`, sub: perTurnSavings <= 0 ? \"no per-turn savings\" : `saving ${formatDollars(perTurnSavings)}/turn` },\n { label: \"Est. re-fire\", value: refireInterval === Infinity ? \"never\" : `~${refireInterval} turns`, sub: refireInterval < breakEvenTurns ? \"before break-even ⚠\" : \"after break-even ✓\" },\n ].map((m, i) => (\n

{m.label}

{m.value}

{m.sub}

\n ))}\n

\n\n {/* scenario context banner — visible near chart for screenshots */}\n

\n {provider.name}\n ·\n {formatTokens(contextSize)} ctx\n ·\n prune {formatTokens(amountPruned)} @ {prunePosition}%\n ·\n {formatTokens(tokensPerTurn)}/turn ({toolOutputPct}% tool)\n ·\n read ${provider.cacheRead} · write ${provider.cacheWrite}/MTok\n

\n\n {/* cumulative chart */}\n

\n Cumulative cost over session\n

\n \n

\n No pruning: {formatDollars(noPruneTotalCost)}\n With pruning: {formatDollars(pruneTotalCost)}\n

\n\n {/* verdict */}\n \n\n {/* compaction deferral note */}\n

\n Pruning {formatTokens(amountPruned)} defers compaction by ~{deferredTurns === Infinity ? \"∞\" : deferredTurns} turns at {formatTokens(tokensPerTurn)}/turn ({formatTokens(provider.contextLimit - postPruneContext)} headroom to context limit).\n

\n\n {/* methodology note */}\n

\n Methodology: Assumes prefix-based KV cache where mutation at position N invalidates everything after N.\n \"Prune position\" is where the oldest pruned output sits — everything before it remains cached; everything after is rewritten at cache-write rates.\n Re-fire interval estimated from tool output accumulation rate filling the 40K protection window + 20K prune minimum (60K total).\n No-prune path assumes context grows by tokens/turn each turn with full cache hits — it does not model compaction, which triggers when context exceeds the model limit and is typically more expensive than pruning.\n Real-world cache hit rates vary by provider.\n

\n\n {/* view source */}\n

\n view source\n

\n );\n}",[],[18,91,221],["D",1776104387895],[199],[18,91],["D",1776104376248],[198,200,201],[18],["D",1776104246844],{"_11":12,"_142":72},{"_11":12,"_138":-5,"_71":72,"_31":70,"_139":140,"_141":30},{"_41":129,"_13":16,"_35":38,"_130":95,"_131":-5,"_132":-5,"_133":-5,"_134":-5,"_135":-5,"_136":14,"_137":12},"ctx",{"_55":-5,"_161":271,"_272":273,"_274":275,"_276":30,"_277":30,"_278":30,"_279":24,"_280":-5,"_281":-7,"_282":-7,"_283":26,"_284":30,"_285":30,"_286":-5,"_287":30,"_288":30,"_289":30,"_290":-5},"ENV",{"_242":243,"_244":245,"_246":16,"_247":248,"_249":250,"_251":252,"_253":254,"_255":256,"_257":258,"_259":260,"_261":262,"_263":264,"_265":266,"_267":268,"_269":270},"REACT_APP_SENTRY_DSN","https://586020d86f05489db63a554690acf1e9@o1398359.ingest.sentry.io/6724499","RENDER_GIT_COMMIT","fdb67791413f4386b4dbf18f354029a617f6160f","RENDER_GIT_BRANCH","POSTHOG_API_TOKEN","phc_nmoyuAkStEZuUp69rYlg1DZgrIt19Gx0Y4Hwf8tGgJP","POSTHOG_API_HOST","https://wart.val.town","WEB_API_TEMPLATE","https://{val}.web.val.run","APP_URL","https://www.val.town","MODULE_URL","https://esm.town","VANITY_WEB_API_TEMPLATE","https://{label}.val.run/","DENOLS_URL","https://lsp.val.town","NODE_ENV","production","CLOUDFLARE_TURNSTILE_SITE_KEY","0x4AAAAAACtaIZJH7s9rBMZ6","GOOGLE_CLIENT_ID","875989696899-jtsqkhlbdv5jrlsk8631p7ipjg3c6o62.apps.googleusercontent.com","STRIPE_PUBLISHABLE_KEY","pk_live_51N2zvWEpZTTLipIkVEwXrUG9AT0yeOOEYxszarZT1jpsZV58Ly6wlg3SltZpHN26CUalOBmUSY7adQRQiSkCZz2500qSXNkf8Y","API_URL","https://api.val.town",[],"preferencesKeybindings","default","preferencesTheme","light","preferencesFixers","preferencesCopilot","preferencesSelectionAi","preferencesCloseBrackets","preferencesChatPanelState","preferencesDprint","preferencesDenofmt","notificationCount","flagDenols","isBusinessOrgMember","businessOrgHandle","isBusinessOrgAdmin","isHigherTownieTier","navCollapsed","currentOrgId"]

History · frontend