# LogViewer

> A CI job's log: one native `<details>` per step (the failed one open), numbered lines whose numbers are links painted from attributes so a copy skips them, `##[group]` folds, ANSI colours as toned spans, a live step that streams its lines, and an island for log search.

```ts
import { LogViewer } from "@sdxc/ui/app";
```

Every line is in the page from the start, so find-in-page and line links work without script;
mapping `@sdxc/ui/app/log-viewer` runs LogViewerController for search, streaming and
tail-follow. Set `--ui-log-viewer-height` for the scroll box, `--ui-log-chunk-lines` per chunk.

## Examples

```tsx
<LogViewer steps={job.steps} lineHref={(step, n) => `#step:${step}:${n}`} timestamps={ts} timestampsHref={ts ? "?" : "?ts=1"} labels={labels} />
```

## Props

| Prop | Type | Description |
| --- | --- | --- |
| `steps` | `Step[]` | The job's steps in run order; each becomes one collapsible section. |
| `lineHref` | `(step: number, n: number) => string` | A line's link, e.g. `(step, n) => "#step:" + step + ":" + n`; its fragment becomes the line's id. |
| `timestamps?` | `boolean` | Draws each line's time beside its number. |
| `timestampsHref?` | `string` | The page with timestamps toggled, e.g. `?ts=1`; omitted, the toggle is not drawn. |
| `labels` | `Labels` | Every string the viewer shows or announces, so it reads in any language. |

Also accepts everything in `Omit<TagProps<"section">, "children">`.


### LogViewer.Stream

Renders the step the viewer draws for a running step: the lines so far, then each line the stream answers appended in place while the log follows its tail.

| Prop | Type | Description |
| --- | --- | --- |
| `index` | `number` | The step's position in the job, from 1, as `lineHref` receives it. |
| `step` | `Step & { stream: StreamSource }` | The running step, with the stream its further lines come from. |
| `lineHref` | `(step: number, n: number) => string` | The viewer's `lineHref`, so streamed lines link like drawn ones. |
| `labels` | `Labels` | The viewer's strings. |


## Types

| Name | Values | What it decides |
| --- | --- | --- |
| `State` | `"success" \| "failure" \| "running" \| "queued" \| "skipped" \| "cancelled"` | Where a step stands. |