start{ y: number; m: number }Requiredpastnumber[]Requiredplannumber[]RequiredscenariosScenario[]Requiredrecognise(text: string) => Token[]planLabelstring'The plan'volatilitynumber0.35defaultViewForecastView'line'look'print' | 'plain''print'suggestionsstring[]SUGGESTIONSonAsk(text: string, run: { status: (text: string) => void; signal: AbortSignal }) => Promise<Scenario | Question | null>RequiredonToggle(id: string) => voidRequiredonRemove(id: string) => voidRequiredonAdopt() => voidThrough a ref: ask(), type(), point(), choose(), adopt(), view(), fan()
usage.tsx
<CashForecaststart={start}past={past}plan={plan}scenarios={scenarios}onAsk={onAsk}onToggle={onToggle}onRemove={onRemove}/>
A whole page, ready to paste.
page.tsx
"use client"
import { useState } from "react"
import { CashForecast } from "@/components/detent/components/forecast/CashForecast"
import type { Scenario } from "@/components/detent/components/forecast/CashForecast"
const past = [1_400_000, 1_330_000, 1_265_000, 1_190_000, 1_120_000, 1_050_000]
const plan = Array.from({ length: 18 }, () => -60_000)
export default function Page() {
const [scenarios, setScenarios] = useState<Scenario[]>([])
return (
<main className="flex min-h-screen items-center justify-center p-6">
<CashForecast
start={{ y: 2026, m: 4 }}
past={past}
plan={plan}
scenarios={scenarios}
planLabel="FY27 plan"
suggestions={["Hire 2 engineers from January"]}
// Swap this for a call to your own model or route.
onAsk={async (text) => {
const scenario: Scenario = {
id: String(Date.now()),
kind: "hire",
read: text,
from: 7,
monthly: -24_000,
on: true,
}
setScenarios((all) => [scenario, ...all])
return scenario
}}
onToggle={(id) => setScenarios((all) => all.map((s) => (s.id === id ? { ...s, on: !s.on } : s)))}
onRemove={(id) => setScenarios((all) => all.filter((s) => s.id !== id))}
/>
</main>
)
}