horizontwo/marymary PR #15 — Project Usage Dashboard — PR #15
horizontwo/marymary · pull request #15 ·
Transcript
PlainEnglish
Let's walk through PR 15, which brings the usage and cost tracking data to life on the project dashboard. This is Phase 4 of the cost tracking initiative, and it's all about visibility.
PlainEnglish
Here's what we're building. The main goal is adding a usage dashboard to the project detail page. That means implementing daily aggregation, a token trend chart, and a breakdown table showing which agents are consuming the most. We're also making sure errors don't break the page, and we're sticking with the existing project color scheme for visual consistency.
PlainEnglish
The usage service already existed from earlier phases, collecting token counts and cost data, but there was no way to see it. This PR adds the first dashboard UI, so project managers and engineers can finally get visibility into how much their agents are costing and where tokens are being spent.
Architecture
The changes touch five files. We extend the server page to fetch usage data, wire new props through ProjectDetailView, and add two brand-new components: UsagePanel for the dashboard layout and UsageTokensChart for the trend visualization. The usage service gets a new daily aggregation function.
Architecture
On the server side, we import the two new usage service functions and call them in a try-catch inside Promise.all. If either throws, we default to null and an empty array, so the page still renders. This mirrors the existing pattern for timeStripSpec, keeping the page resilient.
Architecture
The daily aggregation function queries all task executions for the project in chronological order, then loops through them bucketing by UTC calendar day. We use a Map to accumulate token counts per day, and return the buckets as an array. No custom SQL, just in-process grouping.
Architecture
UsagePanel is the main dashboard component. It checks if there are zero executions and shows a fallback if so. Otherwise, it renders a stat grid with totals, the time-series chart, and a table of per-agent usage sorted by token count. Everything uses the design token system for colors and spacing.
Architecture
The chart component requires at least two days of data to render. It maps the daily buckets to recharts format and stacks three area series: input, output, and cache-read. The gradient and stroke colors come from the project color, just like the existing uplift chart, so the visual identity stays consistent.
Architecture
We slot the new Usage and Cost section into the project detail view, right between Uplift Score and Review Stage. If the server fetch succeeded and we have a summary, we render UsagePanel. Otherwise, we show a simple unavailable message. The page stays intact either way.
PlainEnglish
After this PR lands, the project detail page gains a full usage dashboard. Project managers can see total cost and run counts. Engineers can spot token trends over time with the chart. The per-agent table shows who's using what. And if the service ever throws, the page degrades gracefully.
PlainEnglish
That's PR 15. It brings the usage tracking foundation to life with a polished dashboard, clean error handling, and tight integration into the existing project detail view. The code examined error paths, date handling, and design token usage — all looking solid.
How this was made
Lenzon read horizontwo/marymary at pull request #15 and generated this walkthrough automatically. The narration above is the transcript of what it says.
Explain a pull request from your own repo
Point Lenzon at a repo or a pull request and get a narrated walkthrough like this one.
Try it