# Phase 7 — notes

Running record for the visual layer (AUD-149). Each batch states what changed,
what it measures, and what it still needs.

---

## Batch 1 — marks, area icons, client wall, two diagrams

### What is in the tree

| Piece | Where | Note |
|---|---|---|
| Technology marks | `internal/brand/` | 50 Simple Icons paths (CC0), inlined as 16 px `currentColor` SVG. No request, no font, no bundler. |
| Regenerator | `tools/gen_brand_icons.sh` | Development-time only. The generated Go file is committed, so `make build` never needs the network. |
| Area icons | `internal/web/templates/icons.templ` | Six marks drawn for this site, plus one for the evidence index. 24×24, 1.6 px stroke, `aria-hidden`. |
| Client wall | `content/history/l3/history-client-wall.md` + `.client-wall` in `site.css` | 45 names, one typeface, one size, one grid of equal tiles. No client mark is used, because none has been approved. |
| Diagrams | `content/assets/diagrams/` | Homelab topology and RAG pipeline. Both referenced from the page they explain. |
| Image sizing | `internal/content/markdown.go` | Every content image gets intrinsic `width`/`height`, `loading="lazy"`, `decoding="async"`. |
| Guard | `internal/site/site_test.go` | `TestImagesReserveTheirSpace` fails if an image ships without size or alt text. |
| Topbar | `site.css` | Two rows at desktop. One row overlapped the search form once the marks were added; Lighthouse `target-size` caught it. |
| Favicon | `internal/web/static/favicon.svg` | Stops the browser asking for a missing `/favicon.ico` (it was the only console error). |

### Adding a technology mark

1. Add the label → slug pair to `slugs` in `internal/brand/brand.go`.
2. Add the slug to `slugs()` in `tools/gen_brand_icons.sh` and run it.
3. `make dist`, then check the chip on the page.

A technology with no published mark renders as text alone, on purpose: a chip
with a missing image would read as a broken page.

### Adding an image

- File goes under `content/assets/` (published at `/assets/...`).
- SVG needs explicit `width` and `height` on the root element; PNG and JPEG are
  measured with `image.DecodeConfig`. Both give the page its reserved space.
- Alt text describes the thing, not the file name.
- The diagrams carry their own print style, so they print as ink on white.

### Measurements (2026-10-28)

Lighthouse 12.8.2, headless Chrome, against the local server on `127.0.0.1`.

| Page | Mode | Performance | Accessibility | Best practices | SEO | CLS |
|---|---|---|---|---|---|---|
| Landing | mobile | 100 | 100 | 100 | 100 | 0 |
| Landing | desktop | 100 | 100 | 100 | 100 | 0 |
| Platform network (diagram) | mobile | 100 | 100 | 100 | 100 | 0 |
| AI retrieval (diagram) | desktop | 100 | 100 | 100 | 100 | 0 |
| Client wall | mobile | 100 | 100 | 100 | 100 | — |
| Edge audio artefact | mobile | 100 | 100 | 100 | 100 | — |

Total page weight: landing 153 KiB, diagram page 105 KiB. Diagram files are 5.7
KiB and 6.6 KiB; the stylesheet is 24 KiB; htmx is 51 KiB and is the largest
single asset.

Two defects were found by measurement rather than by eye and fixed in this
batch: the desktop topbar overlap, and the missing favicon.

### Still open — needs Sam

| DoD line | State | What is needed |
|---|---|---|
| At least one real photograph in use | Not started | Which photographs may be used (Immich on `.35` is the likely source). Anything used is checked for people, address and screens in shot. |
| Two screenshots in use | Not started | Approval to capture Home Assistant, Gitea, TUIOS with agent panes, or Graphify's `graph.html`. Screens must contain nothing personal. |
| One recording, 30–60 s | Not started | Either Sam records it, or Sam approves a recording of the agent console. |
| Client wall marks | Deliberately absent | Official marks only, with Sam's approval. Nothing invented. |

Nothing above is blocking the site: it ships, measures 100 across the board, and
every page works with the AI services stopped.