Skip to content

feat(ui): package fingerprint visualization across config surfaces#29

Merged
fullstackjam merged 1 commit into
mainfrom
feat/package-fingerprint
Jun 27, 2026
Merged

feat(ui): package fingerprint visualization across config surfaces#29
fullstackjam merged 1 commit into
mainfrom
feat/package-fingerprint

Conversation

@fullstackjam

Copy link
Copy Markdown
Member

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-rise keyframe.

New shared pieces

  • src/lib/fingerprint.tscountPackageTypes + buildFingerprint (seeded LCG for stable per-config heights)
  • src/lib/components/PackageFingerprint.svelte — renders the bars + defines the global ob-rise 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's explore fingerprint)
  • dashboard (ConfigRow) — flat DNA bar → fingerprint (hidden for 0-package 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

Deliberate deviations from the static mock (it's a live, data-driven app)

  • Fingerprints reflect real package counts, not the mock's hardcoded demo numbers (28/14/6)
  • Unified the design's two bar-height algorithms into one seeded generator
  • Rail glow uses a CSS ::before instead of two extra wrapper divs (identical look)
  • Existing product features the mock omits are preserved (detail Share button, extra package sections, loading/empty states, functional sort select)

Test plan

  • npm run validate passes (lint + type-check + tests + build); svelte-check 0 errors
  • Verified explore, config detail, dashboard, profile in light + dark via Playwright — fingerprints render and are consistent per config across pages
  • 0-package configs correctly omit the fingerprint
  • Surgical diff — 4 modified + 2 new files, no repo-wide reformatting

🤖 Generated with Claude Code

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

codecov Bot commented Jun 27, 2026

Copy link
Copy Markdown

Codecov Report

✅ All modified and coverable lines are covered by tests.

📢 Thoughts on this report? Let us know!

@fullstackjam fullstackjam merged commit da57374 into main Jun 27, 2026
8 checks passed
@fullstackjam fullstackjam deleted the feat/package-fingerprint branch June 27, 2026 17:24
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

1 participant