# 2026-01-07-move-status-to-footer

**Status:** Done
**Created:** 2026-01-07
**Tags:** ui, layout, enhancement

## 1. Context & User Story
* **As a:** User of the Web Interface
* **I want to:** see the system status and uptime information in the footer of every page
* **So that:** the main content area is less cluttered and status information is globally available.

## 2. Technical Requirements
### Data Model Changes
- [ ] N/A

### API / Interface
- [x] **Home Page:** Remove the "Status" card from the main content.
- [x] **Layout:** Update `BaseLayout` (or `layout.ts`) to accept or calculate uptime/status information and render it in the `<footer>`.

## 3. Constraints & Validations (CRITICAL)
- **Visuals:** The footer should remain clean and not be overcrowded.
- **Functionality:** The existing client-side uptime counter (via `#uptime-display` in `script.js`) must continue to work. Ensure the ID or data attributes it relies on are preserved in the new location.

## 4. Acceptance Criteria
1. [x] The "Status" card is removed from the Home page content.
2. [x] The Footer displays "System Operational" and the running Uptime counter.
3. [x] navigation to other pages (if any) still shows the status in the footer.

## 5. Implementation Plan
- [x] Edit `src/web/routes/home.ts` to remove the Status card.
- [x] Edit `src/web/views/layout.ts` to add the Status HTML structure to the footer.
- [x] Verify `script.js` selector targets the new element correctly.

## Implementation Notes
- Moved Status/Uptime logic from `home.ts` to `layout.ts` (footer).
- Calculated server-side uptime for initial rendering to prevent flash.
- Preserved `id="uptime-display"` and `data-start-timestamp` for `script.js` compatibility.
- Updated tests to verify uptime presence in global layout.