refrakt.md

Docs Runes Plan Blog Changelog

note

This rune is part of @refrakt-md/plan. Install with npm install @refrakt-md/plan and add "@refrakt-md/plan" to the packages array in your refrakt.config.json.

Plan Progress

Renders a compact progress summary showing status counts per entity type. Each count is color-coded using the plan status palette. Useful at the top of dashboards to give a project health overview at a glance.

This is a self-closing aggregation rune — it produces a sentinel that the pipeline resolves with live entity data from the registry.

All entity types

Show progress for all tracked entity types (work items, bugs, specs, decisions).

{% plan-progress /%}
<section data-rune="plan-progress">
  <meta content="all" data-field="show">
  <meta data-field="__plan-progress-sentinel" content="true">
  <div data-name="items"></div>
</section>
10 work items1 done2 in-progress1 review4 ready1 blocked1 draft
6 bugs1 fixed1 in-progress2 confirmed2 reported
6 specs2 accepted1 review2 draft1 superseded
5 decisions3 accepted2 proposed
3 milestones1 complete1 active1 planning
<section class="rf-plan-progress" data-show="all" data-rune="plan-progress" data-density="full">
  <div data-name="items" class="rf-plan-progress__items">
    <div class="rf-plan-progress__row" data-type="work">
      <span class="rf-plan-progress__label">10 work items</span>
      <span class="rf-plan-progress__counts">
        <span class="rf-plan-progress__count" data-status="done">1 done</span>
        <span class="rf-plan-progress__count" data-status="in-progress">2 in-progress</span>
        <span class="rf-plan-progress__count" data-status="review">1 review</span>
        <span class="rf-plan-progress__count" data-status="ready">4 ready</span>
        <span class="rf-plan-progress__count" data-status="blocked">1 blocked</span>
        <span class="rf-plan-progress__count" data-status="draft">1 draft</span>
      </span>
    </div>
    <div class="rf-plan-progress__row" data-type="bug">
      <span class="rf-plan-progress__label">6 bugs</span>
      <span class="rf-plan-progress__counts">
        <span class="rf-plan-progress__count" data-status="fixed">1 fixed</span>
        <span class="rf-plan-progress__count" data-status="in-progress">1 in-progress</span>
        <span class="rf-plan-progress__count" data-status="confirmed">2 confirmed</span>
        <span class="rf-plan-progress__count" data-status="reported">2 reported</span>
      </span>
    </div>
    <div class="rf-plan-progress__row" data-type="spec">
      <span class="rf-plan-progress__label">6 specs</span>
      <span class="rf-plan-progress__counts">
        <span class="rf-plan-progress__count" data-status="accepted">2 accepted</span>
        <span class="rf-plan-progress__count" data-status="review">1 review</span>
        <span class="rf-plan-progress__count" data-status="draft">2 draft</span>
        <span class="rf-plan-progress__count" data-status="superseded">1 superseded</span>
      </span>
    </div>
    <div class="rf-plan-progress__row" data-type="decision">
      <span class="rf-plan-progress__label">5 decisions</span>
      <span class="rf-plan-progress__counts">
        <span class="rf-plan-progress__count" data-status="accepted">3 accepted</span>
        <span class="rf-plan-progress__count" data-status="proposed">2 proposed</span>
      </span>
    </div>
    <div class="rf-plan-progress__row" data-type="milestone">
      <span class="rf-plan-progress__label">3 milestones</span>
      <span class="rf-plan-progress__counts">
        <span class="rf-plan-progress__count" data-status="complete">1 complete</span>
        <span class="rf-plan-progress__count" data-status="active">1 active</span>
        <span class="rf-plan-progress__count" data-status="planning">1 planning</span>
      </span>
    </div>
  </div>
</section>

Filtered by type

Show progress for specific entity types only.

{% plan-progress show="work,bug" /%}
<section data-rune="plan-progress">
  <meta content="work,bug" data-field="show">
  <meta data-field="__plan-progress-sentinel" content="true">
  <div data-name="items"></div>
</section>
10 work items1 done2 in-progress1 review4 ready1 blocked1 draft
6 bugs1 fixed1 in-progress2 confirmed2 reported
<section class="rf-plan-progress" data-show="work,bug" data-rune="plan-progress" data-density="full">
  <div data-name="items" class="rf-plan-progress__items">
    <div class="rf-plan-progress__row" data-type="work">
      <span class="rf-plan-progress__label">10 work items</span>
      <span class="rf-plan-progress__counts">
        <span class="rf-plan-progress__count" data-status="done">1 done</span>
        <span class="rf-plan-progress__count" data-status="in-progress">2 in-progress</span>
        <span class="rf-plan-progress__count" data-status="review">1 review</span>
        <span class="rf-plan-progress__count" data-status="ready">4 ready</span>
        <span class="rf-plan-progress__count" data-status="blocked">1 blocked</span>
        <span class="rf-plan-progress__count" data-status="draft">1 draft</span>
      </span>
    </div>
    <div class="rf-plan-progress__row" data-type="bug">
      <span class="rf-plan-progress__label">6 bugs</span>
      <span class="rf-plan-progress__counts">
        <span class="rf-plan-progress__count" data-status="fixed">1 fixed</span>
        <span class="rf-plan-progress__count" data-status="in-progress">1 in-progress</span>
        <span class="rf-plan-progress__count" data-status="confirmed">2 confirmed</span>
        <span class="rf-plan-progress__count" data-status="reported">2 reported</span>
      </span>
    </div>
  </div>
</section>

Attributes

AttributeTypeDefaultDescription
showstringallEntity types to include: all, or comma-separated list of work, bug, spec, decision

Output structure

The rune resolves to a series of rows, one per entity type, each containing:

  • A label with the total count (e.g. "35 work items")
  • Color-coded status count badges using [data-status] attribute selectors

The progress summary is generated automatically from the entity registry — no manual counting required.