# Where does this request go?
> Enter a URL and follow it through TLS, host and path matching, middleware and upstream choice to the demo service that answers.
- Element: `<sv-route-tester>`
- React: `import { SvRouteTester } from "@/components/lumesec/sv-route-tester"`
- Collection: Service Map (https://elements.lumesec.ai/components/service-map)
- Registry item: https://elements.lumesec.ai/r/sv-route-tester.json
- Page: https://elements.lumesec.ai/components/service-map/route-tester



Live preview: https://elements.lumesec.ai/view/sv-route-tester

```html
<sv-route-tester></sv-route-tester>
```

## Installation

```bash
npx shadcn@latest add @lumesec/sv-route-tester
```

First time with the @lumesec registry? Register it once, or install by URL:

```bash
npx shadcn@latest registry add @lumesec=https://elements.lumesec.ai/r/{name}.json
npx shadcn@latest add https://elements.lumesec.ai/r/sv-route-tester.json
```

## Usage

React:

```tsx
import { SvRouteTester } from "@/components/lumesec/sv-route-tester";

export function Example() {
  return (
    <SvRouteTester />
  );
}
```

HTML:

```html
<script type="module" src="https://elements.lumesec.ai/cdn/sv-route-tester.js"></script>

<sv-route-tester></sv-route-tester>
```

## Behaviour

Enter a URL and follow it through TLS, host and path matching, middleware and upstream choice to the service that answers.

## API reference

### Events

Events bubble and cross the shadow boundary unless the description says otherwise.

| Event   | React prop | Detail                                                   | Description                                                                                                                                                                                    |
| ------- | ---------- | -------------------------------------------------------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| `route` | `onRoute`  | `{ status: number \| string, upstream: string \| null }` | Fires when the walkthrough ends. `status` is 200, 302 (sign-in redirect), 404 (no route), 400 (invalid URL) or `'TLS'` for a failed handshake; `upstream` is the answering service id or null. |

### Methods

Call them on the element, for example through a React ref.

| Method   | Description                                                              |
| -------- | ------------------------------------------------------------------------ |
| `send()` | Routes the URL currently in the field and plays the steps, as Send does. |

## Accessibility

* The URL field is labelled Request URL and sits in a form, so Enter sends it.
* The result line is a polite live region: Routing, then the status.
* The step canvas is `aria-hidden`.
* Reduced motion: each step resolves in 0.01 s instead of 0.42 s and no particle travels down the pipeline.

## Theming

The element reads your shadcn theme tokens through its shadow root, so light and dark follow your theme. The accent comes from `--lumesec`. See [Theming](/docs/theming).

This component reads `--border`, `--card`, `--destructive`, `--foreground`, `--input`, `--lumesec`, `--lumesec-success`, `--lumesec-warning` and `--muted-foreground`.

To restyle only LumeSec elements, set the matching `--ui-*` overrides: `--ui-accent`, `--ui-border`, `--ui-border-strong`, `--ui-danger`, `--ui-fg`, `--ui-mono`, `--ui-muted`, `--ui-ok`, `--ui-surface` and `--ui-warn`.

## Notes

* Routes against the demo routes in `INFRA`: hosts outside `*.lumesec.local` fail TLS, unknown hosts get 404, the longest matching path wins, routes with SSO required redirect, and the upstream is picked at random from the route's backends.
* The field starts with [https://api.lumesec.local/v1/infer](https://api.lumesec.local/v1/infer); no attribute sets it. Example buttons fill in and send sample URLs, including docs.lumesec.local, which has no route.