Problem
ProbeView has no visual identity. The header is text-only ({siteName} +
"Status"), the favicon is the stock Next.js default (app/favicon.ico), and
there is no social/OG image, apple-touch-icon, or theme-color, so shared links
preview as bare text and the browser tab/mobile chrome are unbranded. The repo
also still carries the default Next.js placeholder SVGs (public/next.svg,
vercel.svg, file.svg, globe.svg, window.svg).
Proposed solution
Introduce a small, hardcoded SVG product mark for ProbeView (not the
deployment's siteName) so it stays white-label / self-host-safe, reused
everywhere it makes sense:
- A dependency-free SVG mark component matching the existing
components/icons.tsx family (viewBox="0 0 24 24", currentColor,
strokeWidth="2", round caps/joins) that adapts to the light/dark theme.
- Place the mark in the header lockup (
app/layout.tsx) beside siteName.
- Favicon via App Router
app/icon.svg, replacing the stock app/favicon.ico.
- Social image via
app/opengraph-image and an app/apple-icon.
theme-color (light/dark) through the viewport export.
- Remove the unused
public/*.svg placeholders.
The exact glyph is left to the implementer, provided it reads clearly at 16px,
works in both themes via currentColor, and keeps the compact status-page feel.
Alternatives considered
- A
siteName-specific logo — rejected because it breaks the white-label /
self-host design; branding should stay portable and env-driven.
- Committing binary
.ico/.png assets — a static SVG (plus generated
opengraph-image/apple-icon) is lighter and theme-aware.
- Making the mark configurable now — deferred; hardcoded is enough for now.
Additional context
- Keep credentials server-only and behavior read-only; this is presentation
only, no new runtime state.
- Palette lives in
app/globals.css (status green #22c55e); the mark should
lean on currentColor rather than coupling to it.
- Update
docs/ if any user-visible branding/config expectations change.
Note: this project is intentionally a read-only live uptime/latency view
with no incidents feature. Proposals that keep it stateless and configurable
by environment are most likely to be accepted.
Problem
ProbeView has no visual identity. The header is text-only (
{siteName}+"Status"), the favicon is the stock Next.js default (
app/favicon.ico), andthere is no social/OG image, apple-touch-icon, or
theme-color, so shared linkspreview as bare text and the browser tab/mobile chrome are unbranded. The repo
also still carries the default Next.js placeholder SVGs (
public/next.svg,vercel.svg,file.svg,globe.svg,window.svg).Proposed solution
Introduce a small, hardcoded SVG product mark for ProbeView (not the
deployment's
siteName) so it stays white-label / self-host-safe, reusedeverywhere it makes sense:
components/icons.tsxfamily (viewBox="0 0 24 24",currentColor,strokeWidth="2", round caps/joins) that adapts to the light/dark theme.app/layout.tsx) besidesiteName.app/icon.svg, replacing the stockapp/favicon.ico.app/opengraph-imageand anapp/apple-icon.theme-color(light/dark) through theviewportexport.public/*.svgplaceholders.The exact glyph is left to the implementer, provided it reads clearly at 16px,
works in both themes via
currentColor, and keeps the compact status-page feel.Alternatives considered
siteName-specific logo — rejected because it breaks the white-label /self-host design; branding should stay portable and env-driven.
.ico/.pngassets — a static SVG (plus generatedopengraph-image/apple-icon) is lighter and theme-aware.Additional context
only, no new runtime state.
app/globals.css(status green#22c55e); the mark shouldlean on
currentColorrather than coupling to it.docs/if any user-visible branding/config expectations change.