shadcn.io is not affiliated with official shadcn/ui
AI Commit Analyzer Changelog Block for Svelte
A release's commits as one segmented bar by category with counts and shares, over a table of the five highest-impact commits with an impact meter, a risk word and a How it's scored popover.
Installation
Overview
An AI commit analyzer changelog for Svelte with Ark UI, written for Hunkwise, a fictional commit-analysis tool. A header counts the 86 commits Hunkwise read in v5.8.0, and a framed figure draws them as one segmented bar by category (Feature, Fix, Refactor, Docs) with four cells under it giving each count and share. Below, a band holds a table of the five highest-impact commits: hash and message, a five-step impact meter with its score, a risk word, and the lines added and removed. A How it's scored popover prints the formula. It's built from Guides, Button and Popover, with CSS transitions for the entrance. For release notes that show where the risk in a release sits. The commits are example data.
FAQ
Where does the impact score come from?
It is a plain formula over typed numbers: points for each file touched, one point for every fifteen lines changed, and a bonus when a public API changes, capped at 100. The table, the meter, the risk word and the How it's scored popover all read the same constants at the top of the file, so changing one changes all of them.
What does the model do, and what is a person's job?
In this demo the model's only job is to sort each commit into a category, and the block says so in a note under the table. The score is not a model's guess. Nothing here calls a model: the categories are typed example data.
Why do the shares always add to 100?
The four shares are rounded by largest remainder: each category gets its whole per cent, and the leftover points go to the largest remainders. Four separately rounded numbers could add to 99 or 101.
Why is the bar hidden from screen readers?
The four cells under it give every category, its count and its share, so the bar would only repeat them. The segments also differ by weight and the lightest has an outline, so the bar reads in greyscale.
How does the popover work on each base?
It is a Popover opened from an outline Button: it opens on click or Enter, closes on Escape or a click outside, and returns focus to the button. It is not modal, so the page behind stays reachable.
How does the table fit a phone and a right-to-left layout?
On a phone the risk word and the lines added and removed move under each message and the impact meter stays; the table also scrolls sideways in a focusable region. Hashes, scores and line counts keep their left-to-right order inside a right-to-left page.