feat(ui): package fingerprint visualization across config surfaces#29
Merged
Conversation
Follow the updated OpenBoot Redesign design file (v2): replace the flat "DNA segment bar" with an animated "package fingerprint" — tall vertical bars colored by package type (cli = green, cask = amber, npm = blue), with heights seeded deterministically per config so a given config renders the same shape everywhere, rising on mount via a shared `ob-rise` keyframe. New shared pieces: - src/lib/fingerprint.ts — countPackageTypes + buildFingerprint (seeded LCG) - PackageFingerprint.svelte — renders the bars + defines the global keyframe Applied to the four surfaces the design touches: - explore: header restyled to a "community registry / N public" pill badge with a larger title and new copy; each card gains a fingerprint - profile: each card gains a fingerprint (matches the same config on explore) - dashboard (ConfigRow): flat DNA bar -> fingerprint (hidden for 0-pkg configs) - config detail (ConfigDetail): hero reworked into a bordered card with the fingerprint as a faded background, meta count-swatches, and an install-rail glow Verified explore/detail/dashboard/profile in light and dark via Playwright. Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
Codecov Report✅ All modified and coverable lines are covered by tests. 📢 Thoughts on this report? Let us know! |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
Summary
Follows the updated OpenBoot Redesign design file (v2): the flat "DNA segment bar" is replaced everywhere by an animated package fingerprint — tall vertical bars colored by package type (cli = green, cask = amber, npm = blue), with heights seeded deterministically per config so a given config renders the same shape on every page, rising on mount via a shared
ob-risekeyframe.New shared pieces
src/lib/fingerprint.ts—countPackageTypes+buildFingerprint(seeded LCG for stable per-config heights)src/lib/components/PackageFingerprint.svelte— renders the bars + defines the globalob-risekeyframeApplied to the four surfaces the design touches
ConfigRow) — flat DNA bar → fingerprint (hidden for 0-package configs)ConfigDetail) — hero reworked into a bordered card with the fingerprint as a faded background, meta count-swatches, and an install-rail glowDeliberate deviations from the static mock (it's a live, data-driven app)
::beforeinstead of two extra wrapper divs (identical look)Test plan
npm run validatepasses (lint + type-check + tests + build); svelte-check 0 errors🤖 Generated with Claude Code