46 lines
2.5 KiB
Markdown
46 lines
2.5 KiB
Markdown
# LLM Browser — Agent View (Northstar design system)
|
|
|
|
## Audience & purpose
|
|
A validator tool for people who publish sites for LLM agents: enter a domain,
|
|
see exactly what a text-only agent sees. Three surfaces per inspection:
|
|
rendered markdown, the `llms.txt` family (raw + parsed), and the
|
|
agent-readiness checks. Shared with the Northstar showcase app (routes,
|
|
primitives), so all components come from `src/components/ui`.
|
|
|
|
## Visual character
|
|
Inherited from the host system: lab()-based tokens, quiet surfaces, mono for
|
|
machine output (URLs, raw files, source), sans for prose. Nothing on the
|
|
agent-view page introduces new colours — every shade is a token or a
|
|
`color-mix()` of one, so dark/light parity is automatic.
|
|
|
|
## Layout
|
|
- Single-column app pattern: form card → status header → tabbed results.
|
|
- `?url=<domain>` in the address bar is the source of truth for what is being
|
|
inspected; link clicks rewrite it (the agent loop), so any view is a link.
|
|
- Tabs: Markdown (rendered), Source (raw markdown + copy), llms.txt (one card
|
|
per candidate path: `/llms.txt`, `/llms-full.txt`, `/.well-known/llms.txt`),
|
|
robots.txt, Meta (definition list), Checks (badge + label + detail rows).
|
|
|
|
## Component patterns
|
|
- Status: `Badge` variants carry state — positive/ok, primary/warn,
|
|
destructive/error, secondary/info. No extra colours for severities.
|
|
- File cards: `Card` + `CardHeader`, status badge, absolute URL in mono,
|
|
parsed doc first, raw content in a `<details>` below.
|
|
- Markdown output renders through `src/components/markdown/MarkdownView`
|
|
(React elements, no HTML injection); links are intercepted and re-enter the
|
|
viewer instead of navigating away.
|
|
- Empty, loading (Skeleton), and error states are explicit — an inspection can
|
|
fail at the network, the site, or validation, and each gets its own copy.
|
|
|
|
## Accepted decisions
|
|
- The light theme's `--destructive` stays at the default red
|
|
(`lab(48.4493% 77.4328 61.5452)`): its brighter variant failed the 4.5:1
|
|
pair with `--destructive-foreground`. Dark keeps the brighter red (passes on
|
|
dark surfaces). Theme rules in `src/tokens.css` use explicit selectors only
|
|
(no `:not([data-theme='light'])` fallback) so tooling resolves them cleanly.
|
|
- Agent-view styles live in `src/App.css` under "Agent view"; they override
|
|
`.markdown-body`'s article metrics (`.agent-doc`) and add link, list, table,
|
|
quote and code styling the showcase never needed.
|
|
- Severity mapping: ok→positive, info→secondary, warn→primary,
|
|
error→destructive. Uppercase mono badges in the checks list.
|