[{"_1":2,"_3":-5,"_4":-5},"loaderData",{"_5":6,"_7":8,"_9":10},"actionData","errors","root",{"_207":208,"_209":210},"routes/_app.x.$handle.$name",{"_100":99,"_37":50,"_108":90,"_32":109,"_13":14,"_110":-5,"_11":111,"_112":113,"_114":115,"_116":117,"_118":119,"_26":-5,"_120":-5,"_121":-5,"_122":30,"_123":124,"_125":126,"_127":-5,"_128":-5,"_129":130},"routes/_app.x.$handle.$name.branch.$branch.version.$version.diff",{"_11":12,"_13":14,"_15":16,"_17":18,"_19":-5},"project",{"_48":49,"_37":50,"_43":51,"_52":-5,"_53":30,"_54":55,"_56":55,"_57":58,"_59":-5,"_19":60,"_61":-5,"_62":30,"_63":-5,"_64":-5,"_65":66,"_67":68,"_69":-5,"_70":-5,"_71":-5,"_72":-5,"_73":74,"_75":74,"_76":77,"_78":77,"_79":77,"_80":74,"_81":74,"_82":83,"_84":85,"_86":87,"_88":30},"version",9,"changes",[25],"aiChatInfo",{"_20":21,"_22":-5,"_23":-5,"_24":-5},"userId","aiChatMessageId","542346e3-2f8a-4874-9e2f-e95f951d3a96","aiChatThreadId","aiChatThreadUserId","aiChatThreadTitle",{"_26":27,"_28":-7,"_29":30,"_31":30,"_32":33,"_34":33},"file",{"_35":36,"_37":38,"_39":40,"_41":42,"_43":44,"_45":14,"_46":47,"_29":30},"previous","deleted",false,"deletedHere","path","frontend/components/PruningCalculator.tsx","latestPath","fileId","94748096-3765-11f1-b60f-42b51c65c3df","name","PruningCalculator.tsx","fileType","script","content","/** @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: 15.0,\n cacheWrite: 18.75,\n cacheRead: 1.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: 1.25,\n hasWritePremium: false,\n contextLimit: 200000,\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_pro: {\n name: \"Gemini 2.5 Pro\",\n input: 1.25,\n cacheWrite: 1.25,\n cacheRead: 0.125,\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, noPruneTotalCost, pruneTotalCost, turnsRemaining, provider }: {\n breakEven: number;\n refireInterval: 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, 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, 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, maxTurns }: {\n noPruneCosts: number[];\n pruneCosts: number[];\n breakEvenTurn: 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\n const provider = PROVIDERS[providerKey];\n\n const prunePositionTokens = Math.floor(contextSize * (prunePosition / 100));\n const postPruneContext = contextSize - amountPruned;\n const systemPrefixCached = Math.min(prunePositionTokens, 5000);\n const rewriteTokens = contextSize - systemPrefixCached - 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(systemPrefixCached, 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 // re-fire interval estimate\n const toolOutputPerTurn = tokensPerTurn * 0.6;\n const turnsToAccumulate20K = toolOutputPerTurn > 0 ? Math.ceil(20000 / toolOutputPerTurn) : Infinity;\n const refireInterval = turnsToAccumulate20K;\n\n // cumulative cost comparison over N turns\n const { noPruneCosts, pruneCosts } = useMemo(() => {\n const noPrune: number[] = [];\n const withPrune: 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 - systemPrefixCached - amountPruned;\n pCum += cost(systemPrefixCached, provider.cacheRead) + cost(Math.max(0, rePruneRewrite), provider.cacheWrite);\n currentContext -= amountPruned;\n turnsSinceLastPrune = 0;\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 };\n }, [contextSize, amountPruned, tokensPerTurn, turnsRemaining, provider, pruningTurnCost, postPruneContext, refireInterval, systemPrefixCached]);\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 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 />\n

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

\n Per-turn cost breakdown\n

\n \n \n \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 {/* 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 {/* 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 — earlier positions mean larger cache rewrites.\n Re-fire interval estimated from tool output accumulation rate (60% of tokens/turn) reaching the 20K prune minimum past a 40K protection window.\n No-prune path assumes context grows by tokens/turn each turn with full cache hits. Real-world cache hit rates vary.\n

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

\n view source\n

\n );\n}","createdAt",["D",1776104484689],"branchVersion","branchId","06aeea1c-3765-11f1-b445-42b51c65c3df","id","06ad8424-3765-11f1-b445-42b51c65c3df","pruning-calculator",["D",1776104246844],"deletedAt","legacyEnvVars","privacy","public","httpPrivacy","description","Prompt cache pruning economics calculator","imageUrl","78fb2935-36e6-47ef-8cd6-ee74b5f6b3cb","pinnedFileId","pinPreview","pinMigrated","screenshotVersion","likeCount",0,"orgId","f84525d2-591f-45dc-96a2-c176aceef7a4","tursoName","tursoHostname","tursoMeasuredAt","pinned","userPerm","r","valPerm","blobPerm","rw","emailPerm","sqlitePerm","projectPerm","telemetryPerm","user",{"_100":99,"_107":103},"org",{"_100":99,"_101":-5,"_102":103,"_19":60,"_104":105,"_106":30},"branch",{"_13":89,"_37":90,"_48":47,"_91":49,"_92":-5,"_93":-5,"_94":-5,"_95":-5,"_96":-5,"_97":50,"_98":99},"isOwned",11,"main","projectId","forkedBranchId","forkedBranchVersion","forkedProjectPrivacy","forkedProjectId","forkedProjectOrgId","projectName","userHandle","bl3","handle","displayName","avatar","https://img.clerk.com/eyJ0eXBlIjoiZGVmYXVsdCIsImlpZCI6Imluc18yTm10cGhQUklwU0tqZHNiOHNnNGd2ZjJURFUiLCJyaWQiOiJ1c2VyXzJpaHBiY1Mzc3lUVk5TQnMyS2lXY0Zmd1dlZiJ9","tier","pro","canRestrictVals","profileImageUrl","branchName","","adoptOrgId",{"_48":49,"_37":50,"_43":203,"_52":-5,"_53":30,"_54":55,"_56":55,"_57":58,"_59":-5,"_19":60,"_61":-5,"_62":30,"_63":-5,"_64":-5,"_65":66,"_67":68,"_69":-5,"_70":-5,"_71":-5,"_72":-5,"_73":74,"_75":74,"_76":77,"_78":77,"_79":77,"_80":74,"_81":74,"_82":204,"_84":205,"_86":206,"_88":30},"tree",[163,168],"files",[163,164,165,166,167,168],"counts",{"_152":66,"_153":154,"_155":66,"_156":157,"_158":159},"contents",[131,132],"upstreamProject","upstreamBranch","emptyEnvVars","flags",[],"hasHttpFiles",true,"grants","orgs","customDomains",{},{"_48":145,"_37":146,"_35":147,"_136":-5,"_46":47,"_45":148,"_138":126,"_43":149,"_13":66,"_39":150,"_41":-5,"_29":30,"_143":-5,"_32":151},{"_48":133,"_37":134,"_35":135,"_136":-5,"_46":47,"_45":137,"_138":126,"_43":139,"_13":140,"_39":141,"_41":142,"_29":30,"_143":-5,"_32":144},"538e5458-3765-11f1-8ab5-42b51c65c3df","main.ts","06b6cfe8-3765-11f1-b445-42b51c65c3df","parentId",4,"latest",["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;","label",[134],"53d0090c-3765-11f1-8ab5-42b51c65c3df","frontend","53d009de-3765-11f1-8ab5-42b51c65c3df",5,["D",1776104376248],"directory",[146],"pulls","branches",1,"forks","envVars",{"_160":66,"_162":66},"connections",{"_160":66,"_161":66},"count","unfilledCount","emptyCount",{"_48":145,"_37":146,"_35":147,"_136":-5,"_46":47,"_45":148,"_138":126,"_43":200,"_13":66,"_39":150,"_41":-5,"_29":30,"_143":-5,"_170":201,"_32":202},{"_48":195,"_37":194,"_35":190,"_136":147,"_46":47,"_45":196,"_138":126,"_43":197,"_13":66,"_39":150,"_41":-5,"_29":30,"_143":-5,"_170":198,"_32":199},{"_48":189,"_37":38,"_35":36,"_136":190,"_46":47,"_45":14,"_138":30,"_43":191,"_13":66,"_39":40,"_41":42,"_29":30,"_143":-5,"_170":192,"_32":193},{"_48":181,"_37":182,"_35":183,"_136":147,"_46":47,"_45":184,"_138":126,"_43":185,"_13":66,"_39":26,"_41":186,"_29":30,"_143":-5,"_170":187,"_32":188},{"_48":173,"_37":174,"_35":175,"_136":147,"_46":47,"_45":176,"_138":126,"_43":177,"_13":66,"_39":40,"_41":178,"_29":30,"_143":-5,"_170":179,"_32":180},{"_48":133,"_37":134,"_35":135,"_136":-5,"_46":47,"_45":137,"_138":126,"_43":169,"_13":140,"_39":141,"_41":142,"_29":30,"_143":-5,"_170":171,"_32":172},["D",1776104375813],"children",[],[134],"5aae8442-3765-11f1-98cd-42b51c65c3df","index.tsx","5aae8532-3765-11f1-98cd-42b51c65c3df",7,["D",1776104387770],"/** @jsxImportSource https://esm.sh/react@18.2.0 */\nimport { createRoot } from \"https://esm.sh/react-dom@18.2.0/client\";\nimport PruningCalculator from \"./components/PruningCalculator.tsx\";\n\nconst root = document.getElementById(\"root\");\nif (!root) throw new Error(\"No root element found\");\n\ncreateRoot(root).render();",[],[146,174],"598f6964-3765-11f1-98c8-42b51c65c3df","index.html","598f6a0e-3765-11f1-98c8-42b51c65c3df",6,["D",1776104385887],"\n\n \n \n \n Prompt Cache Pruning Economics\n \n \n \n \n \n \n

\n \n \n \n",[],[146,182],"94747fc4-3765-11f1-b60f-42b51c65c3df","5ac16c4c-3765-11f1-98cd-42b51c65c3df",["D",1776104484689],[],[146,194,38],"components","5ac16b84-3765-11f1-98cd-42b51c65c3df",8,["D",1776104387895],[165],[146,194],["D",1776104376248],[164,166,167],[146],["D",1776104246844],{"_100":99,"_107":103},{"_100":99,"_101":-5,"_102":103,"_19":60,"_104":105,"_106":30},{"_13":89,"_37":90,"_48":47,"_91":49,"_92":-5,"_93":-5,"_94":-5,"_95":-5,"_96":-5,"_97":50,"_98":99},"ctx",{"_82":-5,"_128":240,"_241":242,"_243":244,"_245":30,"_246":30,"_247":30,"_248":126,"_249":-5,"_250":-7,"_251":-7,"_252":66,"_253":30,"_254":30,"_255":-5,"_256":30,"_257":30,"_258":30,"_259":-5},"ENV",{"_211":212,"_213":214,"_215":90,"_216":217,"_218":219,"_220":221,"_222":223,"_224":225,"_226":227,"_228":229,"_230":231,"_232":233,"_234":235,"_236":237,"_238":239},"REACT_APP_SENTRY_DSN","https://586020d86f05489db63a554690acf1e9@o1398359.ingest.sentry.io/6724499","RENDER_GIT_COMMIT","e87eb04e707cf64e7e532c8e8ec395f209e17f15","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"]

Diff · v9