LogStream

Live, levelled log viewer.

A terminal-style log viewer. Pass controlled `lines` to render exactly those, or let the built-in `demo` ticker simulate a live feed. Includes a controls toolbar (filters, search, wrap, copy, clear) you can replace, a `loading` indicator, a custom `empty` slot, and a `role="log"` region with configurable aria-live announcements.

Demo

live · storybook Open in Storybook

Demo loads from https://dssoca-storybook.vercel.app/. Run pnpm storybook for it to render locally.

Usage

svelte

<script>
  import { LogStream } from 'dssoca';

  const lines = [
    { t: '12:00:01', lvl: 'info', svc: '[hub]', msg: 'session refresh' },
    { t: '12:00:02', lvl: 'err',  svc: '[tasks]', msg: 'EADDRINUSE :3004' },
  ];
</script>

<LogStream {lines} />
<LogStream demo />

Exports the `LogLevel` (`info | warn | err | ok`) and `LogLine` types from `dssoca`. The viewport min/max heights and the timestamp/level column widths are overridable, size-aware tokens: `--ss-log-min-h`, `--ss-log-max-h`, `--ss-log-t-w`, `--ss-log-lvl-w` (md defaults 160/240/58/38px).

HTML

CSS only — static markup The exact markup the component renders, generated at build time. Use it with dssoca/vanilla.css — see Plain HTML & CSS.

html

<div class="ss-logs">
  <div class="bar">
    <div class="filters" role="group" aria-label="Filter by level">
      <button type="button" class="chip info" aria-pressed="true">INFO</button>
      <button type="button" class="chip warn" aria-pressed="true">WARN</button>
      <button type="button" class="chip err" aria-pressed="true">ERR</button>
      <button type="button" class="chip ok" aria-pressed="true">OK</button>
    </div>
    <input class="search" type="text" placeholder="Filter…" aria-label="Filter log text" value=""/>
    <button type="button" class="chip" aria-pressed="true">WRAP</button>
    <button type="button" class="chip">COPY</button>
  </div>
  <div class="viewport">
    <div class="scroll" role="log" aria-label="Log output" aria-live="polite" aria-busy="false">
      <div class="ln">
        <span class="t">12:00:01</span>
        <span class="lvl info">INFO</span>
        <span class="svc">api</span>
        <span class="msg">listening on :8080</span>
      </div>
      <div class="ln">
        <span class="t">12:00:02</span>
        <span class="lvl warn">WARN</span>
        <span class="svc">db</span>
        <span class="msg">slow query (412ms)</span>
      </div>
      <div class="ln">
        <span class="t">12:00:03</span>
        <span class="lvl ok">OK</span>
        <span class="svc">api</span>
        <span class="msg">healthy</span>
      </div>
    </div>
  </div>
</div>

Static log lines; the filter chips, copy and follow-tail need the Svelte component.

Props

Prop	Type	Default	Description
`lines`	`LogLine[]`	—	Controlled lines. When provided, renders exactly these (capped to `maxLines`); demo off.
`initialLines`	`Omit<LogLine, 'id'>[]`	—	Seed lines for the built-in demo stream (used when `lines` is undefined).
`demo`	`boolean`	—	Generate a random demo stream. Defaults true ONLY when `lines` is not supplied.
`live`	`boolean`	—	Back-compat alias for `demo`.
`maxLines`	`number`	`30`	Max lines kept in the buffer (oldest dropped).
`controls`	`boolean`	`true`	Show the controls toolbar (filters, search, wrap, copy, clear).
`toolbar`	`Snippet`	—	Replace the built-in toolbar entirely.
`wrap`	`boolean`	`true`	Wrap long messages (pre-wrap) vs. horizontal scroll (pre).
`announce`	`'off' \| 'polite' \| 'assertive'`	`'polite'`	aria-live politeness for the log region.
`ariaLabel`	`string`	`'Log output'`	Accessible label for the log region.
`loading`	`boolean`	`false`	Show a connecting/loading indicator.
`empty`	`Snippet`	—	Custom empty state.
`size`	`'sm' \| 'md' \| 'lg'`	—	Per-instance size override; inherits the ancestor `data-size-variant` when unset.