Log Viewer Virtualized
A monospace, line-numbered scrollable viewer that virtualizes (only renders visible rows) for log streams of 100k+ lines. Supports follow-tail, level filtering, regex search, and click-to-pin a line.
$ prime install @community/pattern-log-viewer-virtualized Projection
Always in _index.xml · the agent never has to ask for this.
LogViewerVirtualized [pattern] v1.0.0
A monospace, line-numbered scrollable viewer that virtualizes (only renders visible rows) for log streams of 100k+ lines. Supports follow-tail, level filtering, regex search, and click-to-pin a line.
Loaded when retrieval picks the atom as adjacent / supporting.
LogViewerVirtualized [pattern] v1.0.0
A monospace, line-numbered scrollable viewer that virtualizes (only renders visible rows) for log streams of 100k+ lines. Supports follow-tail, level filtering, regex search, and click-to-pin a line.
Facts
Label
Virtualized Log Viewer
Problem
Rendering a full log stream as DOM nodes is O(n) memory and freezes scroll above ~10k lines. Tailing logs needs sticky scroll-to-bottom unless the user scrolls up to inspect.
Solution
A virtualized list rendering only the visible rows + a small overscan buffer; absolute-positioned line numbers; toolbar for level filter + regex search; auto-follow toggle that sticks to the latest line until user scrolls up.
Structure
<section aria-label="Application logs" class="logs">
<header class="logs-toolbar">
<input
type="search"
aria-label="Filter logs"
placeholder="Search or /regex/"
/>
<fieldset role="group" aria-label="Log level">
<label><input type="checkbox" checked /> Error</label>
<label><input type="checkbox" checked /> Warn</label>
<label><input type="checkbox" checked /> Info</label>
<label><input type="checkbox" /> Debug</label>
</fieldset>
<button aria-pressed="true" aria-label="Follow tail">Follow</button>
<button aria-label="Clear">Clear</button>
</header>
<div
class="logs-viewport"
role="log"
aria-live="polite"
aria-relevant="additions"
tabindex="0"
>
<ol class="logs-virt" style="height: 6400000px">
<li
data-level="error"
data-line="1042"
style="position:absolute; top: 24px"
>
<span class="ln" aria-hidden="true">1042</span>
<time datetime="2026-04-27T14:32:01Z">14:32:01</time>
<span class="lvl" aria-label="Error">ERR</span>
<pre>connect ECONNREFUSED 127.0.0.1:5432</pre>
</li>
</ol>
</div>
<footer class="logs-status">
<span>Showing 1,042 of 124,818</span>
</footer>
</section>
Uses
- @community/method-heuristic-review
Behavior
- Virtualize: render only rows whose offset intersects the scroll viewport plus a small overscan (e.g., 8 rows).
- Follow-tail: when on, auto-scroll to the latest line on every new entry. Disable as soon as user scrolls up; show 'Jump to latest' button.
- Search input treats text as substring; if wrapped in /.../, treat as regex.
- Color rows by level (error=red, warn=amber, info=neutral, debug=muted) but always keep level label visible.
- Click a line to pin it (sticky at top); click again to unpin.
- Cmd/Ctrl+F focuses the filter input; Esc clears it; Cmd/Ctrl+End jumps to latest.
A11y
- Container uses
role='log'witharia-live='polite'andaria-relevant='additions'so screen readers announce new lines without re-reading old ones. - Level badges (ERR/WRN) need
aria-label(e.g., 'Error') so screen readers do not read 'ER R'. - Color is supplemental — every level has a text label, not just background color.
- Follow-tail toggle uses
aria-pressed; announce state changes via live region: 'Following tail' / 'Paused'. - Virtualized rows must keep keyboard focus stable when items reflow — pin focus to the row's data id, not its DOM position.
Loaded when retrieval picks the atom as a focal / direct hit.
LogViewerVirtualized [pattern] v1.0.0
A monospace, line-numbered scrollable viewer that virtualizes (only renders visible rows) for log streams of 100k+ lines. Supports follow-tail, level filtering, regex search, and click-to-pin a line.
Facts
Label
Virtualized Log Viewer
Problem
Rendering a full log stream as DOM nodes is O(n) memory and freezes scroll above ~10k lines. Tailing logs needs sticky scroll-to-bottom unless the user scrolls up to inspect.
Solution
A virtualized list rendering only the visible rows + a small overscan buffer; absolute-positioned line numbers; toolbar for level filter + regex search; auto-follow toggle that sticks to the latest line until user scrolls up.
Structure
<section aria-label="Application logs" class="logs">
<header class="logs-toolbar">
<input
type="search"
aria-label="Filter logs"
placeholder="Search or /regex/"
/>
<fieldset role="group" aria-label="Log level">
<label><input type="checkbox" checked /> Error</label>
<label><input type="checkbox" checked /> Warn</label>
<label><input type="checkbox" checked /> Info</label>
<label><input type="checkbox" /> Debug</label>
</fieldset>
<button aria-pressed="true" aria-label="Follow tail">Follow</button>
<button aria-label="Clear">Clear</button>
</header>
<div
class="logs-viewport"
role="log"
aria-live="polite"
aria-relevant="additions"
tabindex="0"
>
<ol class="logs-virt" style="height: 6400000px">
<li
data-level="error"
data-line="1042"
style="position:absolute; top: 24px"
>
<span class="ln" aria-hidden="true">1042</span>
<time datetime="2026-04-27T14:32:01Z">14:32:01</time>
<span class="lvl" aria-label="Error">ERR</span>
<pre>connect ECONNREFUSED 127.0.0.1:5432</pre>
</li>
</ol>
</div>
<footer class="logs-status">
<span>Showing 1,042 of 124,818</span>
</footer>
</section>
Uses
- @community/method-heuristic-review
Behavior
- Virtualize: render only rows whose offset intersects the scroll viewport plus a small overscan (e.g., 8 rows).
- Follow-tail: when on, auto-scroll to the latest line on every new entry. Disable as soon as user scrolls up; show 'Jump to latest' button.
- Search input treats text as substring; if wrapped in /.../, treat as regex.
- Color rows by level (error=red, warn=amber, info=neutral, debug=muted) but always keep level label visible.
- Click a line to pin it (sticky at top); click again to unpin.
- Cmd/Ctrl+F focuses the filter input; Esc clears it; Cmd/Ctrl+End jumps to latest.
A11y
- Container uses
role='log'witharia-live='polite'andaria-relevant='additions'so screen readers announce new lines without re-reading old ones. - Level badges (ERR/WRN) need
aria-label(e.g., 'Error') so screen readers do not read 'ER R'. - Color is supplemental — every level has a text label, not just background color.
- Follow-tail toggle uses
aria-pressed; announce state changes via live region: 'Following tail' / 'Paused'. - Virtualized rows must keep keyboard focus stable when items reflow — pin focus to the row's data id, not its DOM position.
Examples
- @community/example-vercel-runtime-logs
- @community/example-datadog-log-explorer
Label
Virtualized Log Viewer
Problem
Rendering a full log stream as DOM nodes is O(n) memory and freezes scroll above ~10k lines. Tailing logs needs sticky scroll-to-bottom unless the user scrolls up to inspect.
Solution
A virtualized list rendering only the visible rows + a small overscan buffer; absolute-positioned line numbers; toolbar for level filter + regex search; auto-follow toggle that sticks to the latest line until user scrolls up.
Structure
<section aria-label="Application logs" class="logs">
<header class="logs-toolbar">
<input
type="search"
aria-label="Filter logs"
placeholder="Search or /regex/"
/>
<fieldset role="group" aria-label="Log level">
<label><input type="checkbox" checked /> Error</label>
<label><input type="checkbox" checked /> Warn</label>
<label><input type="checkbox" checked /> Info</label>
<label><input type="checkbox" /> Debug</label>
</fieldset>
<button aria-pressed="true" aria-label="Follow tail">Follow</button>
<button aria-label="Clear">Clear</button>
</header>
<div
class="logs-viewport"
role="log"
aria-live="polite"
aria-relevant="additions"
tabindex="0"
>
<ol class="logs-virt" style="height: 6400000px">
<li
data-level="error"
data-line="1042"
style="position:absolute; top: 24px"
>
<span class="ln" aria-hidden="true">1042</span>
<time datetime="2026-04-27T14:32:01Z">14:32:01</time>
<span class="lvl" aria-label="Error">ERR</span>
<pre>connect ECONNREFUSED 127.0.0.1:5432</pre>
</li>
</ol>
</div>
<footer class="logs-status">
<span>Showing 1,042 of 124,818</span>
</footer>
</section>
Uses
- @community/method-heuristic-review
Behavior
- Virtualize: render only rows whose offset intersects the scroll viewport plus a small overscan (e.g., 8 rows).
- Follow-tail: when on, auto-scroll to the latest line on every new entry. Disable as soon as user scrolls up; show 'Jump to latest' button.
- Search input treats text as substring; if wrapped in /.../, treat as regex.
- Color rows by level (error=red, warn=amber, info=neutral, debug=muted) but always keep level label visible.
- Click a line to pin it (sticky at top); click again to unpin.
- Cmd/Ctrl+F focuses the filter input; Esc clears it; Cmd/Ctrl+End jumps to latest.
A11y
- Container uses
role='log'witharia-live='polite'andaria-relevant='additions'so screen readers announce new lines without re-reading old ones. - Level badges (ERR/WRN) need
aria-label(e.g., 'Error') so screen readers do not read 'ER R'. - Color is supplemental — every level has a text label, not just background color.
- Follow-tail toggle uses
aria-pressed; announce state changes via live region: 'Following tail' / 'Paused'. - Virtualized rows must keep keyboard focus stable when items reflow — pin focus to the row's data id, not its DOM position.
Compatible
- @community/pattern-data-table-dense
Source
prime-system/examples/frontend-design/primes/compiled/@community/pattern-log-viewer-virtualized/atom.yaml