---
id: S06
parent: M006
milestone: M006
provides:
  - AppFooter component with build metadata rendering
  - Vite build-time constant injection pattern
requires:
  []
affects:
  []
key_files:
  - frontend/src/components/AppFooter.tsx
  - frontend/vite.config.ts
  - frontend/src/App.tsx
  - frontend/src/App.css
  - frontend/src/vite-env.d.ts
  - docker/Dockerfile.web (on ub01)
  - docker-compose.yml (on ub01)
key_decisions:
  - Vite define with JSON.stringify for build-time constant injection
  - execSync for local git SHA with VITE_GIT_COMMIT env var fallback for Docker builds
  - ARG+ENV pattern in Dockerfile.web matching existing API service pattern
  - Read package.json via fs.readFileSync to avoid TS module resolution issues in Vite config
patterns_established:
  - Vite build-time constants via define + JSON.stringify + TypeScript declare const for type safety
  - Docker ARG → ENV passthrough for build-time environment variables consumed by Node/Vite
observability_surfaces:
  - App footer displays version, build date, and commit SHA — immediate visual verification of deployed build
drill_down_paths:
  - .gsd/milestones/M006/slices/S06/tasks/T01-SUMMARY.md
  - .gsd/milestones/M006/slices/S06/tasks/T02-SUMMARY.md
duration: ""
verification_result: passed
completed_at: 2026-03-30T12:07:16.783Z
blocker_discovered: false
---

# S06: App Footer with Version Info

**Added a persistent app footer showing version, build date, commit SHA link, and GitHub repo link — wired through Vite build-time constants with Docker ARG/ENV passthrough for production builds.**

## What Happened

Created an AppFooter component rendering four pieces of build metadata: app version (from package.json), build date (ISO timestamp at build time), git commit SHA (linked to GitHub commit), and a repo link. The build-time constants (__APP_VERSION__, __BUILD_DATE__, __GIT_COMMIT__) are injected via Vite's `define` config using JSON.stringify wrapping.

For local dev, the git SHA is resolved via child_process.execSync('git rev-parse --short HEAD'). For Docker builds, the SHA comes from the VITE_GIT_COMMIT environment variable (set via ARG + ENV in Dockerfile.web, passed as a build arg from docker-compose.yml using GIT_COMMIT_SHA).

App.tsx was updated to include the footer, and App.css got flex-column layout with min-height: 100vh to push the footer to the bottom on short pages. The footer uses subtle styling consistent with the dark theme.

On ub01, Dockerfile.web was updated with `ARG VITE_GIT_COMMIT=dev` and `ENV VITE_GIT_COMMIT=$VITE_GIT_COMMIT` before the npm run build step. docker-compose.yml got `VITE_GIT_COMMIT: ${GIT_COMMIT_SHA:-dev}` in the web service's build args, matching the existing API service pattern. The stack was rebuilt and deployed — footer is visible at http://ub01:8096 with v0.1.0, build date, commit 08d7d19, and GitHub link.

## Verification

Verified locally: `npm run build` succeeds (48 modules, 769ms). Built JS bundle contains substituted values (0.1.0, build date, GitHub URL). All file-existence and grep checks pass.

Verified on ub01 via SSH: VITE_GIT_COMMIT present in both docker/Dockerfile.web and docker-compose.yml. Web container running and healthy. Deployed JS bundle contains version 0.1.0 and GitHub repo URL.

## Requirements Advanced

None.

## Requirements Validated

None.

## New Requirements Surfaced

None.

## Requirements Invalidated or Re-scoped

None.

## Deviations

Files synced to ub01 via SCP rather than git push (avoiding outward-facing git actions without user confirmation). AdminDropdown.tsx also had to be copied — it was missing on ub01.

## Known Limitations

Docker files on ub01 are uncommitted working changes. Local workspace lacks docker/ directory — Docker verification must run via SSH. Commit SHA shows 'dev' when GIT_COMMIT_SHA env var isn't set during build.

## Follow-ups

Commit Docker file changes on ub01. Consider setting GIT_COMMIT_SHA in a deploy script or CI so it's always populated.

## Files Created/Modified

- `frontend/src/components/AppFooter.tsx` — New component displaying version, build date, commit SHA link, and GitHub repo link
- `frontend/vite.config.ts` — Added define block with __APP_VERSION__, __BUILD_DATE__, __GIT_COMMIT__ build-time constants
- `frontend/src/App.tsx` — Added AppFooter import and render at bottom of app layout
- `frontend/src/App.css` — Added flex-column layout with min-height:100vh to push footer to bottom
- `frontend/src/vite-env.d.ts` — Added TypeScript declarations for build-time constants
- `docker/Dockerfile.web` — Added ARG VITE_GIT_COMMIT=dev and ENV VITE_GIT_COMMIT (on ub01)
- `docker-compose.yml` — Added VITE_GIT_COMMIT build arg to web service (on ub01)
