Six ideas for charts on your buttons
2:52 · 7 chapters ·
Six ideas for lpm's action buttons, each with a live number on the button and a chart when you point at it, and how to build one with Claude Code from a single prompt.
Transcript
The narration, chapter by chapter. Pick a time to play from there.
Intro
Six buttons that show what's happening in your project: a live number on the button, and a full chart when you point at it. Here's storefront, a small online coffee shop, with five of those buttons already in its header. We'll build the sixth one together at the end. Every button here has two parts: the face, which shows one number and keeps it current, and a popup, a small page that opens when you rest your pointer on it.
Bundle size
Bundle size shows how big your app is, right on the button. Point at it, and a popup shows the size of each commit and your largest packages. The dashed line is your budget. Now add a heavy package, and watch the button. It jumps past the budget and turns red, and the popup names the package that did it, so you catch it before it ships.
Orders today
Orders today counts your sales as they come in. Point at it to see the whole week and your best sellers. Here comes a new order. The count goes up by itself, and the popup shows what sold. There's nothing to reload.
Tests
Tests draws one square for each run: green passed, red failed, so you can tell at a glance whether the last run broke something. Point at it to see what failed, where it failed, and which tests are slowing you down.
Server health
Server health shows how fast your dev server answers, with a line behind the number. The popup lists each route. Ship a slow query, and watch what happens. The button turns red, and the route that caused it stands out.
Open issues
Open issues keeps the count in front of you. Point at it, and they're sorted by label and age, newest first, so you can see what's waiting right from your project, without opening a browser.
Build one with Claude Code
Now let's build the sixth one: commit activity. It reads your Git history, so it works in any repo. Open Claude Code, and describe the button you want. Say what goes on the button, and what goes in the popup. Here it's a bar for each day this week, and six months of commits. Claude writes a short script for the numbers and a small web page for the chart, then adds the button. And there's the sixth button, drawn from this repo's real history. Point at it, and the popup opens with six months of commits and the busiest folders. That's all it takes, in Claude Code or Codex. Each button is a short script and a small web page, and lpm keeps them current. Pick the number you check most, and put it on a button.
