---
id: BACK-211
title: Add version number display to browser UI
status: Done
assignee: []
created_date: '2025-07-27'
updated_date: '2025-08-03 10:28'
labels:
  - ui
  - frontend
  - enhancement
dependencies: []
---

## Description

Add a subtle version number display to the browser UI for debugging purposes. The version should be displayed on the right side of the Settings item in the sidebar, so it's visible when the sidebar is expanded but hidden when collapsed. The version must come from the same embedded version that the CLI uses (backlog -v), not from package.json.

## Acceptance Criteria

- [x] Version number is displayed on the right side of the Settings item in the sidebar
- [x] Version text is small and muted (subtle gray color)
- [x] Version format shows as 'Backlog.md - v{version}' (e.g. Backlog.md - v1.6.2)
- [x] Version is only visible when sidebar is expanded (not shown when collapsed)
- [x] Version number comes from the embedded version in the compiled binary (same as backlog -v)
- [x] Body tag includes version as data attribute for easy inspection
- [x] Version display does not interfere with user experience or UI elements

## Implementation Notes

Added version display functionality to the browser UI with the following key components:

**Frontend Implementation:**
- Created `src/web/utils/version.ts` utility that fetches version from `/api/version` endpoint
- Modified `src/web/App.tsx` to set version as `data-version` attribute on body tag (`Backlog.md - v{version}`)
- Updated `src/web/components/SideNavigation.tsx` to display version on right side of Settings item when sidebar is expanded

**Backend Implementation:**
- Added `/api/version` endpoint in `src/server/index.ts` with `handleGetVersion()` method
- Leveraged existing `src/utils/version.ts` utility that uses embedded version from compiled binary (same as CLI)

**Key Features:**
- Version displays as "Backlog.md - v{version}" format with small gray text
- Only visible when sidebar is expanded (hidden when collapsed)
- Uses same embedded version source as CLI (`backlog -v`)
- Body tag includes `data-version` attribute for debugging/inspection
- Graceful error handling with empty fallback if version fetch fails

**Files Modified:**
- `src/web/utils/version.ts` (new)
- `src/web/App.tsx`
- `src/web/components/SideNavigation.tsx`
- `src/server/index.ts`
