Session Log

Structured session and activity logs with timestamp, actor, and event semantics.

Overview

Use data-role="session-log" on an <ol> to render a structured activity or session log. Each <li> is one event.

<ol data-role="session-log">
  <li>
    <time datetime="2026-04-09T08:31:00Z">08:31</time>
    <span data-actor="vigilio">vigilio</span>
    <span data-event="wake">Session started — model claude-sonnet-4-6</span>
  </li>
  <li>
    <time datetime="2026-04-09T08:32:14Z">08:32</time>
    <span data-actor="vigilio">vigilio</span>
    <span data-event="read">Read vault overview and daily note</span>
  </li>
  <li>
    <time datetime="2026-04-09T08:47:00Z">08:47</time>
    <span data-actor="system">system</span>
    <span data-event="commit">Committed: feat(vault): add session-log pattern</span>
  </li>
</ol>

Attributes

Attribute	Element	Meaning
`data-role="session-log"`	`<ol>`	Activates session-log layout
`data-actor`	`<span>`	Who performed the action — styled by value
`data-event`	`<span>`	Event type — `wake`, `read`, `write`, `commit`, `sleep`

Actor Variants

<span data-actor="vigilio">vigilio</span>   <!-- agent — primary colour -->
<span data-actor="ludo">ludo</span>         <!-- operator — accent colour -->
<span data-actor="system">system</span>     <!-- system — muted -->

Compact Form

For dense logs, omit the actor and let timestamp + event carry the entry:

<ol data-role="session-log" data-density="compact">
  <li><time datetime="2026-04-09T09:00:00Z">09:00</time> <span data-event="wake">Wake</span></li>
  <li><time datetime="2026-04-09T09:31:00Z">09:31</time> <span data-event="sleep">Sleep — context limit reached</span></li>
</ol>