---
estimated_steps: 12
estimated_files: 5
skills_used: []
---

# T01: Add AppFooter with build-time version constants and Docker build arg plumbing

Create the AppFooter component showing app version, build date, and git commit SHA. Wire build-time constants through Vite define, add TS declarations, update App.tsx and App.css, and update Docker infrastructure to pass the git SHA into the web build.

**Important context:**
- The canonical repo is on ub01 at `/vmPool/r/repos/xpltdco/chrysopedia`. Docker/compose files live there.
- This working directory has the frontend code. Docker files (`docker/Dockerfile.web`, `docker-compose.yml`) must be edited on ub01 via SSH.
- The API Dockerfile already uses `ARG GIT_COMMIT_SHA=unknown` — follow the same pattern for the web Dockerfile.
- Vite `define` does literal text replacement, so string values MUST be wrapped in `JSON.stringify()`.
- `git rev-parse --short HEAD` won't work inside the Docker build (only `frontend/` is copied). Use `ARG VITE_GIT_COMMIT` and `ENV VITE_GIT_COMMIT=$VITE_GIT_COMMIT` so Vite can read it.
- The `.app` div in App.tsx has no CSS — add `display: flex; flex-direction: column; min-height: 100vh` so the footer is pushed to the bottom on short pages.
- The `vite.config.ts` runs in Node context — `child_process.execSync` and `fs.readFileSync` are available for local dev. For Docker builds, read from `process.env.VITE_GIT_COMMIT` with fallback to git command, with fallback to 'dev'.
- Package version comes from `package.json` — import it in vite.config.ts.
- Build date: `new Date().toISOString()` at build time.
- The repo link is `https://github.com/xpltdco/chrysopedia` (private, single-admin tool — fine to show).

## Inputs

- ``frontend/vite.config.ts` — current Vite config (no define block yet)`
- ``frontend/src/vite-env.d.ts` — currently just `/// <reference types="vite/client" />``
- ``frontend/src/App.tsx` — app shell with header + main, no footer`
- ``frontend/src/App.css` — all app styles, `.app` div has no CSS rules`

## Expected Output

- ``frontend/vite.config.ts` — updated with `define` block injecting `__APP_VERSION__`, `__BUILD_DATE__`, `__GIT_COMMIT__``
- ``frontend/src/vite-env.d.ts` — declares the three build-time constants for TypeScript`
- ``frontend/src/components/AppFooter.tsx` — new component rendering version, build date, commit link`
- ``frontend/src/App.tsx` — imports and renders `<AppFooter />` after `</main>``
- ``frontend/src/App.css` — `.app` flex column layout + `.app-footer` styles`

## Verification

cd frontend && npm run build 2>&1 | tail -5 && echo 'Build OK' && grep -q '__APP_VERSION__' vite.config.ts && grep -q 'AppFooter' src/App.tsx && test -f src/components/AppFooter.tsx && echo 'All checks pass'
