Smarter Sidebar Navigation: Badges & Progressive Disclosure

Released in v1.0.79

The product-scoped sidebar is the primary navigation layer inside every SaaS Factory product. As products grow, so does the number of active sections — and a flat list of 20+ items creates real friction, especially for users who are new to a product and don't yet have a mental model of which sections matter most.

v1.0.79 addresses this with two targeted changes: notification badges that surface state without requiring navigation, and section consolidation that reduces visual noise.

Notification Badges

Three types of badges now appear directly on sidebar items:

Badge	Location	Meaning
🔴 Red dot	Health → Failures	One or more pipeline or runtime failures exist
🟡 Amber badge	Approvals	Items are waiting for review/approval
🔢 Numeric count	Queue	Number of items currently pending in the work queue

Badges are rendered on the section header so they remain visible even when the section is collapsed. This means a user can see at a glance that failures exist without having to expand the Health section first.

Behaviour

Badges disappear automatically when the underlying condition clears (e.g. all failures resolved, queue drains to zero).
The numeric queue count updates in real time as items are added or completed.
The amber Approvals badge is shown whenever at least one item awaits a decision, regardless of item type.

Section Consolidation: Health

The previous sidebar structure had separate Observability and Failures sections. These have been merged into a single Health section.

Before:

▾ Observability
    Metrics
    Logs
    Traces
▾ Failures
    Pipeline Failures
    Error Log

After:

▾ Health  🔴
    Metrics
    Logs
    Traces
    Pipeline Failures
    Error Log

This change reduces the number of top-level collapsible sections and keeps all monitoring-related items under one heading. The red dot badge on the Health section header means a failure is visible even when the section is collapsed.

Progressive Disclosure in Practice

Progressive disclosure means the interface presents only what's necessary by default, and reveals more detail on demand. In the context of the sidebar:

Collapsed by default — sections start closed; badges communicate whether they contain anything urgent.
Badges as the first signal — users scan badges before expanding sections, routing attention efficiently.
Expand on intent — users open a section only when a badge (or their own intent) indicates it's relevant.

This pattern is particularly valuable for users who are onboarding to a new product and don't yet know which sections to visit first. Instead of clicking through everything, they can follow the badges.

File Reference

The changes in this release are scoped to:

src/components/product-sidebar.tsx