Vault on ASW — Agentic Semantic Web

Diff

Thu, 09 Apr 2026 00:00:00 +0000

Overview

Use data-diff on a <pre> block to render a structured diff. Child elements carry line-level semantics.

<pre data-diff>
  <span data-line="hunk">@@ -12,7 +12,9 @@</span>
  <span data-line="context"> function greet(name) {</span>
  <span data-line="removed">-  return "Hello " + name;</span>
  <span data-line="added">+  const greeting = `Hello, ${name}!`;</span>
  <span data-line="added">+  return greeting;</span>
  <span data-line="context"> }</span>
</pre>

Line Types

Value	Meaning
`hunk`	Hunk header (`@@ ... @@`) — muted, italic
`context`	Unchanged surrounding line — default text
`removed`	Deleted line — red background, `-` prefix
`added`	New line — green background, `+` prefix

Inline Diffs

For single-value changes in prose, use data-diff directly on <del> and <ins>:

Session Log

Thu, 09 Apr 2026 00:00:00 +0000

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:

Status

Thu, 09 Apr 2026 00:00:00 +0000

Overview

Use data-status on any element to convey operational state. ASW renders a coloured indicator — no CSS classes required.

<span data-status="online">API Gateway</span>
<span data-status="degraded">Search Index</span>
<span data-status="offline">Legacy Auth</span>
<span data-status="unknown">Webhook Relay</span>

Values

Value	Meaning	Indicator
`online`	Fully operational	Green dot
`degraded`	Reduced capacity or elevated errors	Amber dot
`offline`	Not reachable or deliberately down	Red dot
`unknown`	State not yet determined	Grey dot

Status Dashboard Pattern

Combine with a <dl> for a compact service health panel:

Tasks

Thu, 09 Apr 2026 00:00:00 +0000

Overview

Use data-task on list items to convey task state without CSS classes.

<ul>
  <li data-task="done">Completed item</li>
  <li data-task="wip">Work in progress</li>
  <li data-task="blocked">Blocked item</li>
  <li data-task="todo">Not started</li>
</ul>

States

Value	Meaning
`done`	Completed — green check
`wip`	In progress — amber
`blocked`	Blocked — red
`todo`	Not started — muted

Wikilinks

Thu, 09 Apr 2026 00:00:00 +0000

Overview

Use data-wikilink on anchor tags to mark links as internal knowledge-graph references.

<a href="/notes/tasks/" data-wikilink>Tasks</a>

Renders with a dotted underline distinguishing it from a regular hyperlink.