import React from "react" import { callAI } from "call-ai" import * as d3 from "d3" import { useFireproof } from "use-fireproof" import { useViewer } from "use-vibes" function ReportSection({ c, can, useLiveQuery, database }) { const { docs: targets } = useLiveQuery("type", { key: "target" }); const { docs: projects } = useLiveQuery("type", { key: "project" }); const { docs: inventory } = useLiveQuery("type", { key: "inventory" }); const { docs: reports } = useLiveQuery("type", { key: "report", descending: true }); const [loading, setLoading] = React.useState(false); async function draft() { setLoading(true); try { const ctx = `Targets: ${targets.map(t => `${t.name} (${t.sector})`).join("; ")}. Projects: ${projects.map(p => `${p.name} [${p.status}]`).join("; ")}. Inventory: ${inventory.map(i => `${i.sector}=${i.mtco2e}`).join(", ")}.`; const r = await callAI(`Draft a concise council-ready climate action summary based on: ${ctx}`, { schema: { properties: { title: { type: "string" }, narrative: { type: "string" } } } }); const p = JSON.parse(r); await database.put({ type: "report", title: p.title, narrative: p.narrative, createdAt: Date.now() }); } finally { setLoading(false); } } return (

Council Reports ({reports.length})

{can("write") && ( )} {reports.length === 0 &&

No reports yet.

} {reports.map((r) => (

{r.title}

{r.narrative}

{new Date(r.createdAt).toLocaleString()}

))}

); } function InventorySection({ c, can, useDocument, useLiveQuery }) { const year = new Date().getFullYear(); const { doc, merge, submit } = useDocument({ type: "inventory", year, sector: "Buildings", mtco2e: 0 }); const { docs } = useLiveQuery("type", { key: "inventory" }); const thisYear = docs.filter((d) => d.year === year); const total = thisYear.reduce((s, d) => s + (d.mtco2e || 0), 0); return (

GHG Inventory {year}

{can("write") && ( )}

Total {year}: {total.toLocaleString()} MTCO2e

{thisYear.map((d) => (

{d.sector}

{d.mtco2e?.toLocaleString()} MTCO2e

))}

); } function ProjectsSection({ c, can, useDocument, useLiveQuery, database }) { const { doc, merge, submit } = useDocument({ type: "project", name: "", lead: "", budget: 0, status: "Planned", target: "" }); const { docs } = useLiveQuery("type", { key: "project", descending: true }); const { docs: targets } = useLiveQuery("type", { key: "target" }); const [loading, setLoading] = React.useState(false); async function suggest() { setLoading(true); try { const r = await callAI("Suggest a realistic municipal climate project with name, department lead role, budget USD, and a target sector.", { schema: { properties: { name: { type: "string" }, lead: { type: "string" }, budget: { type: "number" }, target: { type: "string" } } } }); const p = JSON.parse(r); merge({ name: p.name, lead: p.lead, budget: p.budget, target: p.target }); } finally { setLoading(false); } } return (

Project Portfolio ({docs.length})

{can("write") && ( )}

{docs.length === 0 &&

No projects yet.

} {docs.map((d) => (

{d.name}

Lead: {d.lead} · ${d.budget?.toLocaleString()} · {d.target || "unlinked"}

{d.status} {can("write") && ( )}

))}

); } function TargetsSection({ c, can, useDocument, useLiveQuery }) { const { doc, merge, submit } = useDocument({ type: "target", name: "", sector: "Buildings", value: 0 }); const { docs } = useLiveQuery("type", { key: "target", descending: true }); return (

Climate Targets ({docs.length})

{can("write") && ( )}

{docs.length === 0 &&

No targets yet.

} {docs.map((d) => (

{d.name}

{d.sector} · Target: {d.value}

))}

); } export default function App() { const { viewer, can } = useViewer(); const { database, useLiveQuery, useDocument } = useFireproof("civic-climate"); const c = { page: "min-h-screen bg-[oklch(0.10_0.003_264)] text-[oklch(0.93_0.005_264)] font-mono", header: "sticky top-0 z-10 bg-[oklch(0.16_0.003_264)] border-b border-[oklch(0.24_0.003_264)] px-4 py-3 flex items-center justify-between", title: "text-lg font-bold tracking-wide", tagline: "text-xs text-[oklch(0.63_0.008_264)]", main: "px-4 py-4 space-y-4 max-w-3xl mx-auto pb-24", section: "bg-[oklch(0.16_0.003_264)] border border-[oklch(0.24_0.003_264)] rounded p-4", h2: "text-sm uppercase tracking-widest text-[oklch(0.63_0.008_264)] mb-3", btn: "min-h-[44px] px-4 py-2 bg-[oklch(0.53_0.22_25)] hover:bg-[oklch(0.45_0.19_25)] text-white rounded font-semibold text-sm", btnGhost: "min-h-[44px] px-3 py-2 border border-[oklch(0.24_0.003_264)] rounded text-sm hover:bg-[oklch(0.19_0.003_264)]", input: "w-full min-h-[44px] px-3 py-2 bg-[oklch(0.20_0.005_264)] border border-[oklch(0.24_0.003_264)] rounded text-sm focus:outline-none focus:border-[oklch(0.53_0.22_25)]", row: "p-3 bg-[oklch(0.19_0.003_264)] border border-[oklch(0.24_0.003_264)] rounded mb-2", muted: "text-[oklch(0.63_0.008_264)] text-xs", avatar: "w-8 h-8 rounded-full border border-[oklch(0.24_0.003_264)]", badge: "inline-block px-2 py-0.5 text-xs rounded bg-[oklch(0.20_0.005_264)] border border-[oklch(0.24_0.003_264)]", }; return (

); }

Climate Targets (0)

Project Portfolio (0)

GHG Inventory 2026

Council Reports (0)