# LogStream

A live log tail that renders only what is in view: it follows new lines until you scroll away, counts what you missed, and searches, filters and opens any line whole.

- Family: Signature, imported from `mizu-ui` or `mizu-ui/signature`
- Docs: https://mizu.user64bit.world/components/log-stream
- Source: https://github.com/0xuser64bit/mizu/blob/main/packages/mizu/src/signature/LogStream.tsx

## Usage

```tsx
import { LogStream } from "mizu-ui";

export function Example() {
  const t = Date.UTC(2026, 0, 12, 9, 30);
  return (
    <LogStream
      label="deploy #214"
      utc
      lines={[
        {
          id: 1,
          time: t,
          level: "info",
          source: "build",
          message: "Build started on runner-3",
        },
        {
          id: 2,
          time: t + 4200,
          level: "warn",
          source: "cache",
          message: "Cache cold: restoring 312 files",
        },
        {
          id: 3,
          time: t + 9100,
          level: "error",
          source: "migrate",
          message: "Step migrate failed: lock timeout after 30 s",
          fields: { step: "migrate", exit: 1 },
        },
      ]}
    />
  );
}
```

## Copy it with the shadcn CLI

```sh
npx shadcn@latest init 0xuser64bit/mizu/preset # once, where there is no components.json
npx shadcn@latest add 0xuser64bit/mizu/log-stream
```

## Props

- `label / lines`: `string / LogLine[]`. Oldest first: id, time (ms), level (debug, info, warn, error), message, with optional source and fields. Append as lines arrive and trim to bound memory.
- `selected / defaultSelected / onSelectedChange`: `id | null`. The line open in the detail panel, for syncing with a chart or timeline.
- `loading / empty`: `boolean / ReactNode`. Skeleton rows with a scan line, or what an empty log says.
- `utc`: `boolean` (default `false`). Show times in UTC instead of local time.
- `--mizu-log-height`: `CSS length`. Height of the scrolling lines (420px).

## Keyboard

- ↑ ↓ PageUp PageDown: Select a line (pauses following)
- Home End: First line, or back to the live tail
- Esc: Close the selected line
- Enter Shift+Enter: Next or previous match, in the search field

## Accessibility

The lines are a listbox with one tab stop; arrows, Page keys, Home and End move the selection, which is announced through aria-activedescendant, and only rendered lines are ever referenced. Levels are toggle buttons with counts, the search reports its matches as they change, and while you are paused, missed lines are announced at most every five seconds rather than line by line.

## Motion

New lines glow briefly as they arrive at the tail. Scrolling away pauses the follow and a count of missed lines springs up from the bottom; choosing it drops you back to the live tail. The overview strip marks the stretch in view as you scroll. Reduced motion keeps every state without the travel.