// Optimisation page — informational recommendations, scoped to project + person // No "Apply" buttons — these are advisories with savings estimates and how-to guides. const REC_KINDS = { "model-swap": { label:"Model swap", icon:"refresh", color:"#5b50ee", bg:"rgba(91,80,238,0.10)", line:"rgba(91,80,238,0.28)" }, "prompt-cache": { label:"Prompt cache", icon:"chip", color:"#0f8a4f", bg:"rgba(15,138,79,0.10)", line:"rgba(15,138,79,0.28)" }, "batch-async": { label:"Batch API", icon:"layers", color:"#b9710d", bg:"rgba(185,113,13,0.10)", line:"rgba(185,113,13,0.28)" }, "output-cap": { label:"Output cap", icon:"target", color:"#d97757", bg:"rgba(217,119,87,0.10)", line:"rgba(217,119,87,0.30)" }, "context-trim": { label:"Context trim", icon:"tokens", color:"#4285f4", bg:"rgba(66,133,244,0.10)", line:"rgba(66,133,244,0.28)" }, "tool-budget": { label:"Tool budget", icon:"cube", color:"#9b5cf6", bg:"rgba(155,92,246,0.10)", line:"rgba(155,92,246,0.30)" }, "embedding": { label:"Embedding swap", icon:"sparkles",color:"#10a37f", bg:"rgba(16,163,127,0.10)", line:"rgba(16,163,127,0.28)" }, }; const RECOMMENDATIONS = [ { id:"r1", kind:"model-swap", title:"Switch claude-opus-4-7 → Sonnet 4.6 on contract-ai", project:"contract-ai", members:["vk"], savingsGBP:51.13, saveBasis:"per month", requests:1972, confidence:"high", effort:"low", qualityRisk:"low", why:"65% of these requests are short prompts (<800 input tokens) with simple outputs. Sonnet 4.6 matches Opus quality on this profile in our calibration set, at 1/5 the price.", how:[ { title:"Set model per request", code:'await client.messages.create({\n model: "claude-sonnet-4-6", // was opus-4-7\n max_tokens: 1024,\n messages: [...]\n})' }, { title:"Or route via .haltonrc", code:'# .haltonrc\n[routing]\nshort_prompts = "claude-sonnet-4-6"\nlong_reasoning = "claude-opus-4-7"' }, ], docs:"docs.anthropic.com/models", tradeoffs:"Sonnet's tool-use accuracy is ~3% lower on multi-step reasoning. Not recommended for /contract-ai where complex refactors run.", }, { id:"r2", kind:"prompt-cache", title:"Enable prompt caching on contract-ai", project:"contract-ai", members:["vk"], savingsGBP:21.91, saveBasis:"per month", requests:1972, confidence:"high", effort:"low", qualityRisk:"none", why:"We see repeated long prefixes (~6,400 tokens) across 84% of requests in this project — likely system prompt + tool definitions. Caching reduces input cost by ~90% on hits.", how:[ { title:"Add cache_control breakpoints", code:'messages: [{\n role: "user",\n content: [\n { type: "text", text: SYSTEM_PROMPT,\n cache_control: { type: "ephemeral" } },\n { type: "text", text: userMessage }\n ]\n}]' }, ], docs:"docs.anthropic.com/prompt-caching", tradeoffs:"5-minute cache TTL. If prefix changes more than every 5 min, savings will be lower than estimated.", }, { id:"r3", kind:"batch-async", title:"Batch claude-opus-4-7 requests on contract-ai", project:"contract-ai", members:["vk"], savingsGBP:60.87, saveBasis:"per month", requests:1972, confidence:"medium", effort:"high", qualityRisk:"none", why:"1,640 of these requests don't need real-time responses (overnight or background jobs). Message Batches API gives a flat 50% discount with <24h SLA.", how:[ { title:"Use Message Batches API", code:'const batch = await client.messages.batches.create({\n requests: tasks.map(t => ({\n custom_id: t.id,\n params: { model, messages: [...] }\n }))\n})' }, ], docs:"docs.anthropic.com/message-batches", tradeoffs:"Up to 24h latency. Re-architect required for code that synchronously consumes responses.", }, { id:"r4", kind:"model-swap", title:"Switch claude-opus-4-7 → Sonnet 4.6 on contract-ai", project:"contract-ai", members:["vk","sm"], savingsGBP:47.39, saveBasis:"per month", requests:2078, confidence:"high", effort:"low", qualityRisk:"medium", why:"65% of requests are short-context lookups (avg 920 input / 240 output tokens). Sonnet 4.6 likely sufficient. Reserve Opus for the 35% multi-file refactor flows.", how:[ { title:"Tag requests by intent", code:'// Tag with X-Halton-Intent header so the\n// router can pick the right model per call.\nheaders: { "X-Halton-Intent": "lookup" }' }, ], docs:"docs.halton.dev/routing", tradeoffs:"Quality risk: multi-step tool use 3-5% worse on Sonnet. Suggest A/B test first.", }, { id:"r5", kind:"prompt-cache", title:"Enable prompt caching on contract-ai", project:"contract-ai", members:["vk","sm"], savingsGBP:20.31, saveBasis:"per month", requests:2078, confidence:"high", effort:"medium", qualityRisk:"none", why:"Codebase context (~22k tokens) is re-sent in 76% of requests. Caching this prefix reduces input cost ~90% on cache hits.", how:[ { title:"Cache the codebase prefix", code:'messages: [\n { role: "user", content: [\n { type: "text", text: codebaseDigest,\n cache_control: { type: "ephemeral" } },\n { type: "text", text: userQuery }\n ]}\n]' }, ], docs:"docs.anthropic.com/prompt-caching", tradeoffs:"Refresh strategy needed when codebase mutates. Recommend triggering cache rebuild on git push.", }, { id:"r6", kind:"batch-async", title:"Batch claude-opus-4-7 requests on contract-ai", project:"contract-ai", members:["vk"], savingsGBP:56.42, saveBasis:"per month", requests:2078, confidence:"medium", effort:"high", qualityRisk:"none", why:"Nightly evaluation runs (~870 requests/week) and report generation jobs are batchable. 50% discount on those alone is ≈£56/mo.", how:[ { title:"Split sync / async pipelines", code:'// Move report-gen + eval to a worker that\n// uses /v1/messages/batches with custom_id\n// per task. Poll status, store outputs.' }, ], docs:"docs.anthropic.com/message-batches", tradeoffs:"Adds latency for nightly jobs (irrelevant) and worker orchestration complexity.", }, { id:"r7", kind:"output-cap", title:"Cap max_tokens on lookup-style requests", project:"document-processor", members:["sm"], savingsGBP:8.20, saveBasis:"per month", requests:446, confidence:"high", effort:"low", qualityRisk:"none", why:"Lookup-style requests have avg output of 180 tokens but max_tokens is currently 4096. The model can over-generate when not capped — costs paid on every generated token.", how:[ { title:"Lower max_tokens for lookups", code:'await client.messages.create({\n model: "claude-sonnet-4-6",\n max_tokens: 512, // was 4096\n stop_sequences: ["\\n\\n---"],\n messages: [...]\n})' }, ], docs:"docs.anthropic.com/api/messages", tradeoffs:"None for lookup tasks. Don't apply on long-form generation flows.", }, { id:"r8", kind:"context-trim", title:"Trim context on /unattributed", project:"unattributed", members:[], savingsGBP:6.40, saveBasis:"per month", requests:422, confidence:"low", effort:"high", qualityRisk:"medium", why:"Unattributed requests average 11k input tokens — suspiciously high for 525 calls. Likely whole-file dumps where summaries would do.", how:[ { title:"First, tag the project", code:'# Add a .haltonrc to the working folder\n[project]\nslug = "your-project"\nname = "Your Project"' }, { title:"Then use a context budget", code:'// Cap context at 4k tokens\n// Summarize anything larger before sending' }, ], docs:"docs.halton.dev/attribution", tradeoffs:"Need to know which project these belong to first. Hard to recommend without scope.", }, { id:"r9", kind:"embedding", title:"Use embeddings for invoice classification", project:"meridian-studio", members:["vk"], savingsGBP:4.80, saveBasis:"per month", requests:327, confidence:"medium", effort:"medium", qualityRisk:"low", why:"327 requests are short classification tasks (label invoice line items). An embedding-based classifier costs <1% of an Opus call and runs locally.", how:[ { title:"Swap to embeddings", code:'// Use voyage-3 + a small classifier\nconst emb = await voyage.embed(text)\nconst label = await classifier.predict(emb)' }, ], docs:"docs.halton.dev/embeddings", tradeoffs:"Need to train + maintain the classifier. Worth it only if classification volume grows.", }, ]; const ADOPTED = [ { id:"a1", title:"Switched gpt-4-turbo → gpt-4o on Frontend 3", project:"frontend-3", at:"13 May", est:0.0124, actual:0.0119, delta:-0.04 }, { id:"a2", title:"Enabled prompt caching on Analytics 1", project:"analytics-1", at:"6 May", est:0.0087, actual:0.0092, delta:+0.06 }, ]; function Optimisation(){ const [groupBy, setGroupBy] = useState("type"); // project | type | member | none const [view, setView] = useState("list"); // list | cards const [filterType, setFilterType] = useState("all"); const [filterProject, setFilterProject] = useState("all"); const [filterMember, setFilterMember] = useState("all"); const [sort, setSort] = useState("savings"); const [collapsed, setCollapsed] = useState({}); // groupKey -> bool let recs = RECOMMENDATIONS; if (filterType !== "all") recs = recs.filter(r => r.kind === filterType); if (filterProject !== "all") recs = recs.filter(r => r.project === filterProject); if (filterMember !== "all") recs = recs.filter(r => r.members.includes(filterMember)); recs = [...recs].sort((a,b) => sort === "savings" ? b.savingsGBP - a.savingsGBP : (a.effort==="low"?-1:1)); const totalSavings = RECOMMENDATIONS.reduce((s,r)=>s+r.savingsGBP, 0); const filteredSavings = recs.reduce((s,r)=>s+r.savingsGBP, 0); const byKind = {}; RECOMMENDATIONS.forEach(r => { if (!byKind[r.kind]) byKind[r.kind] = { count:0, savings:0 }; byKind[r.kind].count++; byKind[r.kind].savings += r.savingsGBP; }); const groups = groupBy === "none" ? [{ key:"_all", label:"All recommendations", sub:`${recs.length} item${recs.length!==1?"s":""}`, swatch:"var(--accent)", savings: filteredSavings, items: recs }] : groupRecs(recs, groupBy); return (
{/* Header */}
Workspace

Optimisation

Reduce spend without changing what you ship · 9 advisories from your last 30 days of usage
Last scanned 1m ago
{/* Hero — potential savings + breakdown */} {/* Spotlight rec */} b.savingsGBP-a.savingsGBP)[0]}/> {/* Two-column main */}
{/* Left column */}
{/* Filter row */}
Filter ({id:k,label:v.label,dot:v.color}))]}/> r.project))).map(p=>({id:p,label:"/"+p}))]}/>
Group by
View
{recs.length} of {RECOMMENDATIONS.length} · {fmtGBP(filteredSavings)} potential
{/* Recommendation groups */} {groups.map((g, gi) => { const isCollapsed = collapsed[g.key] ?? (gi >= 3 && groups.length > 3); const toggle = () => setCollapsed({ ...collapsed, [g.key]: !isCollapsed }); return (
{groupBy !== "none" && ( )} {!isCollapsed && ( view === "cards" ? (
{g.items.map(r => )}
) : (
{g.items.map((r, i) => 0}/>)}
) )}
); })} {groups.length === 0 && (
No recommendations match those filters
)} {/* Adopted log */}
{/* Sidebar */}
); } function groupRecs(recs, by){ const m = {}; recs.forEach(r => { let key; if (by === "project") key = r.project; else if (by === "type") key = r.kind; else key = r.members[0] || "_unassigned"; if (!m[key]) m[key] = []; m[key].push(r); }); return Object.entries(m).map(([k, items]) => { const savings = items.reduce((s,r)=>s+r.savingsGBP, 0); if (by === "project") { const p = PROJECTS.find(p => p.slug === k); return { key:k, label:k, sub:`${items.length} recommendation${items.length!==1?"s":""}${p?` · ${fmtGBP(p.spend)} period spend`:""}`, swatch: p ? PROVIDERS[MODELS[p.primaryModel].provider].color : "var(--fg-3)", savings, items, }; } if (by === "type") { const def = REC_KINDS[k]; return { key:k, label:def.label, sub:`${items.length} recommendation${items.length!==1?"s":""}`, swatch:def.color, savings, items }; } const name = k === "vk" ? "Alex Pemberton" : k === "sm" ? "Jamie Lowe" : "Unassigned"; return { key:k, label:name, sub:`${items.length} recommendation${items.length!==1?"s":""}`, swatch:"var(--accent)", savings, items }; }).sort((a,b)=>b.savings-a.savings); } // ── Savings hero ─────────────────────────────────────────── function SavingsHero({ total, byKind }){ const items = Object.entries(byKind).map(([k,v])=>({ k, ...v, def:REC_KINDS[k] })).sort((a,b)=>b.savings-a.savings); return (
{/* Left: total */}
Potential monthly savings
£{total.toFixed(2)}
Across {RECOMMENDATIONS.length} opportunities in your workspace. If everything were adopted, May 2026 spend would drop from £277.88 to {fmtGBP(277.88 - total*0.36)} at this period's pace.
{/* Right: category breakdown */}
Where savings come from
{/* Stacked bar */}
{items.map(it => (
))}
{/* Legend grid */}
{items.map(it => (
{it.def.label} {it.count} {fmtGBP(it.savings)}
))}
); } // ── Spotlight: single biggest opportunity with rich context ─ function SpotlightRec({ rec }){ const kind = REC_KINDS[rec.kind]; const project = PROJECTS.find(p => p.slug === rec.project); return (
Biggest opportunity this period
{rec.members.map(mid => )}

{rec.title}

{rec.why}

Est. savings {fmtGBP(rec.savingsGBP)}/mo
Affected requests{rec.requests.toLocaleString()}
Project spend{project ? fmtGBP(project.spend) : "—"}
Confidence
Effort
Quality risk
); } // ── Recommendation list row (dense, scales to 100s) ─────── function RecRow({ rec, divider }){ const [open, setOpen] = useState(false); const [tab, setTab] = useState(0); const kind = REC_KINDS[rec.kind]; return (
{open && (
{/* Why */}
Why we suggest this

{rec.why}

Trade-offs
{rec.tradeoffs}
{rec.docs}
{/* How */}
How to apply
{rec.how.map((step, i) => ( ))}
)}
); } function MetricInline({ label, value, mono }){ return ( {label} {value} ); } // ── Recommendation card (expandable for how-to) ───────────── function RecCard({ rec }){ const [open, setOpen] = useState(false); const [tab, setTab] = useState(0); const kind = REC_KINDS[rec.kind]; return (
{fmtGBP(rec.savingsGBP)}/mo
estimated

{rec.title}

{rec.members.map(mid => )}

{rec.why}

}/> }/> }/>
{open && (
{rec.how.map((step, i) => ( ))}
Trade-offs
{rec.tradeoffs}
{rec.docs}
)}
); } // ── Pieces ───────────────────────────────────────────────── function KindBadge({ kind }){ const def = REC_KINDS[kind]; return ( {def.label} ); } function ScopeChip({ project }){ return ( /{project} ); } function PersonChip({ id }){ const name = id === "vk" ? "Alex" : id === "sm" ? "Jamie" : id === "jm" ? "Jamie" : id; const hue = id.split("").reduce((s,c)=>s+c.charCodeAt(0),0) % 360; return ( {name[0]} {name} ); } function ConfidencePill({ v, inline }){ const map = { high:{fg:"var(--pos)",bg:"var(--pos-soft)",line:"rgba(15,138,79,0.28)"}, medium:{fg:"var(--warn)",bg:"var(--warn-soft)",line:"rgba(185,113,13,0.28)"}, low:{fg:"var(--fg-3)",bg:"var(--bg-3)",line:"var(--line-2)"} }; const c = map[v] || map.low; return ( {v} ); } function EffortPill({ v, inline }){ const map = { low:{fg:"var(--pos)"}, medium:{fg:"var(--warn)"}, high:{fg:"var(--neg)"} }; const c = map[v] || map.low; return {v}; } function RiskPill({ v, inline }){ const map = { none:{fg:"var(--pos)"}, low:{fg:"var(--pos)"}, medium:{fg:"var(--warn)"}, high:{fg:"var(--neg)"} }; const c = map[v] || map.low; return {v}; } function Metric({ label, value }){ return ( {label} {value} ); } function Sep(){ return ; } function SelectMini({ value, onChange, options, icon }){ return (
); } function CodeBlock({ code }){ return ( 
{code}
); } // ── Sidebar cards ───────────────────────────────────────── function SavingsBreakdownCard({ byKind, total }){ const items = Object.entries(byKind).map(([k,v])=>({ k, ...v, def:REC_KINDS[k] })).sort((a,b)=>b.savings-a.savings); return (

Savings summary

Total potential {fmtGBP(total)}/mo
Recommendations {RECOMMENDATIONS.length}
Reviewed this period 2
By type
{items.map(it => (
{it.def.label} {it.count} {fmtGBP(it.savings)}
))}
); } function MethodologyCard(){ return (

How we recommend

  1. Scan last 30 days of usage by project & member.
  2. Match call patterns against known savings playbooks (caching, batching, model fit).
  3. Estimate savings using published rates + token equivalence.
  4. Bound quality risk per recommendation using our calibration set.
); } function PlaybookCard(){ const links = [ { title:"Prompt caching guide", sub:"~10 min · with code samples", icon:"chip" }, { title:"Message Batches API", sub:"~15 min · async workflows", icon:"layers" }, { title:"Model routing playbook", sub:"~20 min · cost/quality trade-offs", icon:"refresh" }, { title:"Token economics 101", sub:"~5 min · reading", icon:"tokens" }, ]; return (

Optimisation playbook

); } function StatusCard({ total }){ const states = [ { id:"new", label:"New", n:7, color:"var(--accent)" }, { id:"reviewed", label:"Reviewed", n:2, color:"var(--pos)" }, { id:"snoozed", label:"Snoozed", n:0, color:"var(--warn)" }, { id:"na", label:"Not applicable", n:0, color:"var(--fg-3)" }, ]; return (

Status

{states.map(s => (
{s.label} {s.n}
))}
); } // ── Adopted log ─────────────────────────────────────────── function AdoptedLog(){ return (

Adopted recently

Realised savings vs. estimate · last 30 days
{ADOPTED.length} adopted
{ADOPTED.map((a, i) => (
0 ? "1px solid var(--line-1)" : "none", display:"flex", alignItems:"center", gap:12 }}>
{a.title}
Applied {a.at} · /{a.project}
£{a.actual.toFixed(4)} / call
est £{a.est.toFixed(4)} · {a.delta>0?"↑":"↓"}{Math.abs(a.delta*100).toFixed(0)}%
))}
); } Object.assign(window, { Optimisation });