adr-001 – Version Pill: Unified Format in Default Theme

Status: ACCEPTED Date: 2026-03-10 Author: xPulse

Context

The app displays the current version in several places: sidebar footer, login footer, info page (status pills). In v1.2.0 this was inconsistent – sometimes a rounded pill, sometimes plain text, sometimes just the version number, sometimes with a prefix.

Decision

Unified format for all version pills in the default theme:

1 VERSION: RC-V1.3.0-ABC123

Always uppercase
Prefix VERSION: followed by a space
Value directly from version.json (generated at build time or via generate-version-dev.sh)
No border-radius: 999px – square (border-radius: 2px) consistent with all other UI elements
Font size 10px, letter-spacing: 0.08em, monospace

Technically: shared helper function initVersionPills() in modules/ui.js. All elements with the data-version-pill attribute are automatically populated.

1 // ui.js
2 export async function initVersionPills() {
3     const { version } = await fetch('/version.json').then(r => r.json());
4     const label = `VERSION: ${version.toUpperCase()}`;
5     document.querySelectorAll('[data-version-pill]').forEach(el => el.textContent = label);
6 }

Version format from branch:

Branch	Format	Example
`master`	`v{tag}`	`V1.3.0`
`release/v*`	`rc-v{version}-{hash}`	`RC-V1.3.0-ABC123`
`develop`	`develop-{hash}`	`DEVELOP-ABC123`
`feature/xyz`	`feat-xyz-{hash}`	`FEAT-XYZ-ABC123`
`hotfix/xyz`	`fix-xyz-{hash}`	`FIX-XYZ-ABC123`

Rationale

Consistency: one format, one function, no drift between screens
Square pills match the rest of the design system (all borders are border-radius: 2px)
data-version-pill is declarative – new screens only need the attribute, no JS
Uppercase makes the debug character of the information clear

Consequences

version.json must be generated before dev start → make dev calls generate-version-dev.sh
All previously hardcoded v1.3.0 strings in pills are replaced by data-version-pill
initVersionPills() is called in onShellMount, initLogin and initInfo

Alternatives Rejected

Rounded pill (border-radius: 999px): was used in v1.2.0, does not fit the design system
Version number only without prefix: less clear what the element means
Separate component per screen: leads to drift, no central control

1	// ui.js
2	export async function initVersionPills() {
3	const { version } = await fetch('/version.json').then(r => r.json());
4	const label = `VERSION: ${version.toUpperCase()}`;
5	document.querySelectorAll('[data-version-pill]').forEach(el => el.textContent = label);
6	}