Skip to content

feat(ui): Changelog browser pilot on the shared design system (U5 B1)#430

Merged
OBenner merged 6 commits into
developfrom
claude/ui-b1-pilot
Jul 19, 2026
Merged

feat(ui): Changelog browser pilot on the shared design system (U5 B1)#430
OBenner merged 6 commits into
developfrom
claude/ui-b1-pilot

Conversation

@OBenner

@OBenner OBenner commented Jul 17, 2026

Copy link
Copy Markdown
Owner

Summary

First screen of the B1 "Code & review" batch (U5), ported from desktop-changelog.html. All five B1 mockups already exist, so the batch goes straight to implementation; Changelog pilots the playbook.

libs/ui (shared design system)

  • ChangelogView: timeline rail grouped by year (semver-type dots, single selection with aria-current, focus rings) + scrollable release feed (mono version, release name, type badge, typed section icons + / ! / ⚠ / d, sha chips) + optional right meta rail on the shared UiMetaSection card family; loading/error/empty states.
  • New shared types: UiRelease / UiReleaseSection / UiReleaseEntry / UiReleaseType / UiReleaseSectionKind. UiRelease.id is required — real CHANGELOG files repeat versions across format blocks.

Electron

  • Pure changelog-releases parser: keep-a-changelog plus the generator's loose/name-suffixed headings; ISO dates formatted in UTC (labels don't shift west of UTC); inline markdown stripped; position-qualified unique ids under duplicate versions.
  • ChangelogPilotView over the existing changelog:readExisting IPC, mounted as "Changelog (new UI)" beside the legacy generator wizard (which stays untouched).

i18n

  • New changelog namespace (en+fr), navigation:items.changelogNext keys.
  • Fix: registers the previously-unregistered kanban namespace — the shipped Kanban pilot was rendering raw kanban:pilot.* keys in live Electron.

Adversarial review (18 agents, find → verify)

6 confirmed defects were fixed during the slice, several verified by executing the parser against this repo's real CHANGELOG.md:

  1. Timezone-shifted date labels + TZ-flaky test (off-by-one west of UTC, Jan 1 filed under the previous year) → UTC formatting, regression pinned under TZ=America/New_York.
  2. Duplicate versions (2.7.5, 2.6.0 appear twice in the real file) broke React keys, the scroll ref map, and produced two aria-current rows → required id, position-qualified.
  3. "Jun 8 (planned)" Date-parsed to year 2001 (RFC-2822 comment quirk) → strict-ISO gate.
  4. Heading regex ate the closing paren of annotations → suffix parsed separately.
  5. Generator name-suffixes (## 2.7.5 - Security & Platform Improvements) rendered as dates → non-ISO suffixes become release names.
  6. Meta-card CSS drift vs the mockup/TaskDetail family (h3 weight/size/margin, kv gap) → aligned.

3 findings refuted with evidence (dot color-only signaling — text badge exists in-feed; ungated smooth scroll — house style in 5 merged files; JSX structural clones — no enforced rule fires).

Verification

  • 15/15 parser tests, run in UTC and TZ=America/New_York; smoke-parsed the repo's real 114KB CHANGELOG.md (unique ids, sane year groups).
  • libs/ui tsc + Electron typecheck (CI-style hoisted node_modules) clean.
  • Storybook rebuilt; ReleaseHistory story verified in light+dark, rail selection exercised in DOM (single --on, single aria-current, aligned card typography).

Next in B1

GitHub PRs / GitHub Issues / Patterns / Context screens on the same playbook.

🤖 Generated with Claude Code

Summary by CodeRabbit

  • New Features
    • Added a new “pilot” changelog experience with timeline navigation, release details, categorized sections, and optional metadata.
    • Loads project changelog content and supports loading, empty, error, and retry states.
    • Added a new sidebar navigation entry for the updated changelog view.
    • Added English and French translations for the changelog UI.
  • Bug Fixes
    • Improved changelog Markdown parsing across multiple heading styles, dates (UTC), duplicates, and inline formatting.
  • Tests
    • Added comprehensive automated tests for changelog parsing and formatting behavior.

First screen of the B1 "Code & review" batch, ported from
desktop-changelog.html:

- libs/ui: new ChangelogView screen — timeline rail grouped by year
  (semver-type dots, position-qualified selection, aria-current),
  release feed (version/name head, type badge, typed section icons,
  sha chips), optional right meta rail on the shared UiMetaSection
  card family; loading/error/empty states. New shared types:
  UiRelease/UiReleaseSection/UiReleaseEntry/UiReleaseType/
  UiReleaseSectionKind (UiRelease.id is required — real CHANGELOG
  files repeat versions across format blocks).
- Electron: pure changelog-releases parser (keep-a-changelog + the
  generator's loose/name-suffixed headings; ISO dates formatted in
  UTC so labels don't shift west of UTC; inline markdown stripped;
  ids unique under duplicate versions) + ChangelogPilotView over the
  existing changelog:readExisting IPC, mounted as "Changelog (new
  UI)" beside the legacy generator wizard.
- i18n: new changelog namespace (en+fr), navigation.changelogNext
  keys, and registration of the previously-unregistered kanban
  namespace so the Kanban pilot stops rendering raw keys.

Adversarial review workflow (18 agents) confirmed 6 defects during
the slice — timezone-shifted dates + TZ-flaky test, duplicate-version
React keys/ref-map collisions, "Jun 8" Date-parsing into a bogus 2001
year group, paren-eating heading regex, generator name-suffixes
rendered as dates, meta-card CSS drift — all fixed and pinned by
tests (15 passing, verified under TZ=America/New_York and against
this repo's real CHANGELOG.md).

Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>
@cursor

cursor Bot commented Jul 17, 2026

Copy link
Copy Markdown

Bugbot is not enabled for your account, so this pull request was not reviewed.

Enable Bugbot in the Cursor dashboard to get automatic reviews on future PRs.

@coderabbitai

coderabbitai Bot commented Jul 17, 2026

Copy link
Copy Markdown
Contributor

Review Change Stack

Warning

Review limit reached

@OBenner, you've reached your PR review limit, so we couldn't start this review.

Next review available in: 11 minutes

Enable usage-based reviews in Billing to review now. Otherwise, wait until the next included review is available.
You're only billed for reviews past your plan's rate limits ($0.25/file).

How can I continue?

After more reviews become available, a review can be triggered using the @coderabbitai review command as a PR comment. Alternatively, push new commits to this PR.

To avoid repeated limits, reduce automatic review volume by pausing incremental auto-reviews earlier, using label-based review opt-in, excluding WIP or generated PR titles, or requesting reviews manually when the PR is ready. If your team needs uninterrupted high-volume reviews, an organization admin can enable usage-based reviews.

How do review limits work?

CodeRabbit enforces per-developer PR review limits for each organization. Most developers receive the normal plan review availability.

For paid Pro and Pro+ PR reviews, CodeRabbit uses adaptive limits for sustained high-volume activity. When a developer's recent PR review activity reaches the 95th percentile or higher among CodeRabbit users, additional reviews become available more gradually as earlier reviews age out of the rolling window.

Please refer docs for additional details.

Review details
⚙️ Run configuration

Configuration used: Path: .coderabbit.yaml

Review profile: ASSERTIVE

Plan: Pro

Run ID: 6d23893e-f483-474b-88c1-c048a4f7e224

📥 Commits

Reviewing files that changed from the base of the PR and between 9da4c17 and c0b6e45.

📒 Files selected for processing (1)
  • apps/frontend/src/renderer/lib/changelog-releases.ts
📝 Walkthrough

Walkthrough

Adds a reusable changelog UI and UiRelease model, a defensive Markdown parser with tests, and a frontend pilot route that loads project changelogs through Electron with localized labels and metadata.

Changes

Changelog pilot

Layer / File(s) Summary
Changelog UI contract and screen
libs/ui/src/client/types.ts, libs/ui/src/screens/ChangelogView.*, libs/ui/src/index.ts
Defines release data types and renders timeline, release feed, metadata rail, loading, error, empty, responsive, and Storybook states.
CHANGELOG.md parser
apps/frontend/src/renderer/lib/changelog-releases.ts, apps/frontend/src/renderer/__tests__/changelog-releases.test.ts
Parses release headings, sections, entries, SHAs, dates, versions, Markdown text, duplicate versions, and release classifications with comprehensive tests.
Pilot loading, navigation, and localization
apps/frontend/src/renderer/components/ChangelogPilotView.tsx, apps/frontend/src/renderer/App.tsx, apps/frontend/src/renderer/components/Sidebar.tsx, apps/frontend/src/shared/i18n/...
Adds the changelog-next route, reads and parses the active project changelog, supplies retry and metadata state, and registers English and French translations.

Estimated code review effort: 4 (Complex) | ~45 minutes

Sequence Diagram(s)

sequenceDiagram
  participant Sidebar
  participant App
  participant ChangelogPilotView
  participant ElectronAPI
  participant ChangelogParser
  participant ChangelogView
  Sidebar->>App: select changelog-next
  App->>ChangelogPilotView: provide projectId
  ChangelogPilotView->>ElectronAPI: readExistingChangelog(projectId)
  ElectronAPI-->>ChangelogPilotView: return changelog content
  ChangelogPilotView->>ChangelogParser: parse content and locale
  ChangelogParser-->>ChangelogPilotView: return releases
  ChangelogPilotView->>ChangelogView: render releases and metadata
Loading

Suggested labels: area/fullstack

🚥 Pre-merge checks | ✅ 4 | ❌ 1

❌ Failed checks (1 warning)

Check name Status Explanation Resolution
Docstring Coverage ⚠️ Warning Docstring coverage is 66.67% which is insufficient. The required threshold is 80.00%. Write docstrings for the functions missing them to satisfy the coverage threshold.
✅ Passed checks (4 passed)
Check name Status Explanation
Description Check ✅ Passed Check skipped - CodeRabbit’s high-level summary is enabled.
Title check ✅ Passed The title accurately reflects the main change: introducing the Changelog browser pilot in the shared UI.
Linked Issues check ✅ Passed Check skipped because no linked issues were found for this pull request.
Out of Scope Changes check ✅ Passed Check skipped because no linked issues were found for this pull request.
✨ Finishing Touches
🧪 Generate unit tests (beta)
  • Create PR with unit tests
  • Commit unit tests in branch claude/ui-b1-pilot

Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out.

❤️ Share

Comment @coderabbitai help to get the list of available commands.

Address the 8 SonarCloud findings on the pilot: rewrite the parser
regexes without ambiguous quantifier overlap (S8786 ×5 — heading,
section, entry, trailing-sha, emphasis patterns are now linear-time on
adversarial input), split the emphasis alternation into per-marker
patterns (S6035), and modernize groupByYear (.at(-1) + optional
chain — S7755/S6582). Behavior pinned by the existing 15 tests.

Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>

@coderabbitai coderabbitai Bot left a comment

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Actionable comments posted: 5

🤖 Prompt for all review comments with AI agents
Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.

Inline comments:
In `@apps/frontend/src/renderer/components/ChangelogPilotView.tsx`:
- Around line 45-66: Update the failure handling in the ChangelogPilotView
request flow: in both the !result.success branch and the catch callback, log the
original backend or exception error for diagnostics, but set the state error to
a new Error using the localized changelog:pilot.error translation consistently.
Do not pass raw IPC or exception messages to the user-facing state.

In `@apps/frontend/src/renderer/lib/changelog-releases.ts`:
- Around line 187-194: Update the changelog release mapping around releaseTypeOf
so it searches forward from index for the next semantically different version,
rather than using all[index + 1] directly. Pass that version to releaseTypeOf
while preserving position-qualified IDs, and add a test covering duplicate
entries where the major release type is determined from the next distinct
version.
- Around line 125-135: Update dateLabelsOf to validate the parsed UTC calendar
components against the year, month, and day represented by dateRaw after the
existing timestamp check; return {} when any component differs, and only format
dates that exactly match the input.

In `@libs/ui/src/screens/ChangelogView.tsx`:
- Around line 62-81: Add optional localized label props to ChangelogViewProps
for the loading, retry, and empty states, then replace the hardcoded “Loading…”,
“Retry”, and “No releases yet.” text in ChangelogView with those props. Preserve
sensible English defaults when callers do not provide translations, and use the
retry label for the existing onRetry button.
- Around line 83-89: Update the ChangelogBody invocation in the conditional
rendering block to include a key derived from the first release’s ID. This must
force ChangelogBody to remount when the release dataset changes while preserving
the existing releases, typeLabels, and metaSections props.
🪄 Autofix (Beta)

Fix all unresolved CodeRabbit comments on this PR:

  • Push a commit to this branch (recommended)
  • Create a new PR with the fixes

ℹ️ Review info
⚙️ Run configuration

Configuration used: Path: .coderabbit.yaml

Review profile: ASSERTIVE

Plan: Pro

Run ID: 7152e098-60ad-4273-aadd-ec97a23b1b6e

📥 Commits

Reviewing files that changed from the base of the PR and between 78775d5 and b68336d.

📒 Files selected for processing (15)
  • apps/frontend/src/renderer/App.tsx
  • apps/frontend/src/renderer/__tests__/changelog-releases.test.ts
  • apps/frontend/src/renderer/components/ChangelogPilotView.tsx
  • apps/frontend/src/renderer/components/Sidebar.tsx
  • apps/frontend/src/renderer/lib/changelog-releases.ts
  • apps/frontend/src/shared/i18n/index.ts
  • apps/frontend/src/shared/i18n/locales/en/changelog.json
  • apps/frontend/src/shared/i18n/locales/en/navigation.json
  • apps/frontend/src/shared/i18n/locales/fr/changelog.json
  • apps/frontend/src/shared/i18n/locales/fr/navigation.json
  • libs/ui/src/client/types.ts
  • libs/ui/src/index.ts
  • libs/ui/src/screens/ChangelogView.css
  • libs/ui/src/screens/ChangelogView.stories.tsx
  • libs/ui/src/screens/ChangelogView.tsx

Comment thread apps/frontend/src/renderer/components/ChangelogPilotView.tsx
Comment thread apps/frontend/src/renderer/lib/changelog-releases.ts
Comment thread apps/frontend/src/renderer/lib/changelog-releases.ts Outdated
Comment thread libs/ui/src/screens/ChangelogView.tsx Outdated
Comment thread libs/ui/src/screens/ChangelogView.tsx
- ChangelogView: remount body on dataset change (key on first release
  id) so a stale selection can't survive a project switch; localized
  loading/retry/empty state labels via new stateLabels prop (EN
  defaults preserved).
- Parser: reject impossible calendar dates instead of letting Date()
  roll them forward; classify duplicate-version blocks against the
  next semantically different version (both pinned by new tests —
  17 passing in UTC and America/New_York).
- Pilot: raw IPC/exception errors go to console.error only; the
  screen shows the localized changelog:pilot.error, and state labels
  come from new changelog:pilot.states.* keys (en+fr).

Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>
@OBenner

OBenner commented Jul 17, 2026

Copy link
Copy Markdown
Owner Author

@coderabbitai review

@coderabbitai

coderabbitai Bot commented Jul 17, 2026

Copy link
Copy Markdown
Contributor
✅ Action performed

Review finished.

Note: CodeRabbit is an incremental review system and does not re-review already reviewed commits. This command is applicable only when automatic reviews are paused.

OBenner and others added 3 commits July 18, 2026 11:24
Completes b68336d: RELEASE_HEADING now matches a generic bracket-free
token validated separately by VERSION_SHAPE (no overlapping
quantifiers on user-controlled input), SECTION_HEADING anchors on
non-space, and the link-stripping regex uses bounded character
classes. Behavior pinned by the existing 17-test suite (UTC +
America/New_York).

Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>
The version token class and the trailing `.*` both matched ordinary
characters, which Sonar flags as super-linear backtracking on
user-controlled CHANGELOG.md input. The suffix group now must start
with a character the token class excludes (`]`, `[`, or whitespace),
so adjacent quantifiers never overlap; the leftover closing bracket
moves to parseHeadingSuffix. Behavior unchanged — 17 tests green in
UTC and America/New_York, real-file smoke parse intact.

Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>
The S8786 fix introduced an empty regex alternative; express the
same "suffix absent or boundary-prefixed" contract as an optional
non-capturing group. Still non-overlapping and linear; 17 tests
green in UTC and America/New_York.

Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>
@sonarqubecloud

Copy link
Copy Markdown

@OBenner
OBenner merged commit 52710db into develop Jul 19, 2026
19 checks passed
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Projects

None yet

Development

Successfully merging this pull request may close these issues.

1 participant