heyiam 0.2.28 → 0.3.0

package/dist/render/templates/parchment/portfolio.liquid

@@ -0,0 +1,290 @@
+<div class="heyiam-portfolio parchment" data-render-version="2" data-template="parchment" data-username="{{ user.username }}">
+  <a href="#main-content" class="skip-link">Skip to content</a>
+
+  <div class="page-wrapper">
+
+    {% if hasProfile %}
+    {%- comment -%} Masthead / Title Page {%- endcomment -%}
+    <header class="masthead fade-in" role="banner">
+      {% if user.photoUrl %}
+      <img src="{{ user.photoUrl }}" alt="{{ user.displayName }}" class="masthead__photo" width="120" height="120">
+      {% endif %}
+      {% if user.displayName != blank %}
+      <h1 class="masthead__title">{{ user.displayName }}</h1>
+      {% endif %}
+      {% if user.bio %}
+      <p class="masthead__subtitle">{{ user.bio }}</p>
+      {% endif %}
+      {% if user.location %}
+      <p class="masthead__location">{{ user.location }}</p>
+      {% endif %}
+      {% if user.email or user.linkedinUrl or user.githubUrl or user.twitterHandle or user.websiteUrl or user.resumeUrl %}
+      <div class="masthead__links">
+        {% if user.email %}
+        <a href="mailto:{{ user.email }}">
+          <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" aria-hidden="true"><rect x="2" y="4" width="20" height="16" rx="2"/><path d="m2 4 10 8 10-8"/></svg>
+          {{ user.email }}
+        </a>
+        {% endif %}
+        {% if user.linkedinUrl %}
+        <a href="{{ user.linkedinUrl }}" target="_blank" rel="noopener">
+          <svg width="16" height="16" viewBox="0 0 24 24" fill="currentColor" aria-hidden="true"><path d="M20.5 2h-17A1.5 1.5 0 002 3.5v17A1.5 1.5 0 003.5 22h17a1.5 1.5 0 001.5-1.5v-17A1.5 1.5 0 0020.5 2zM8 19H5v-9h3zM6.5 8.25A1.75 1.75 0 118.3 6.5a1.78 1.78 0 01-1.8 1.75zM19 19h-3v-4.74c0-1.42-.6-1.93-1.38-1.93A1.74 1.74 0 0013 14.19V19h-3v-9h2.9v1.3a3.11 3.11 0 012.7-1.4c1.55 0 3.36.86 3.36 3.66z"/></svg>
+          LinkedIn
+        </a>
+        {% endif %}
+        {% if user.githubUrl %}
+        <a href="{{ user.githubUrl }}" target="_blank" rel="noopener">
+          <svg width="16" height="16" viewBox="0 0 24 24" fill="currentColor" aria-hidden="true"><path d="M12 2C6.477 2 2 6.484 2 12.017c0 4.425 2.865 8.18 6.839 9.504.5.092.682-.217.682-.483 0-.237-.008-.868-.013-1.703-2.782.605-3.369-1.343-3.369-1.343-.454-1.158-1.11-1.466-1.11-1.466-.908-.62.069-.608.069-.608 1.003.07 1.531 1.032 1.531 1.032.892 1.53 2.341 1.088 2.91.832.092-.647.35-1.088.636-1.338-2.22-.253-4.555-1.113-4.555-4.951 0-1.093.39-1.988 1.029-2.688-.103-.253-.446-1.272.098-2.65 0 0 .84-.27 2.75 1.026A9.564 9.564 0 0112 6.844c.85.004 1.705.115 2.504.337 1.909-1.296 2.747-1.027 2.747-1.027.546 1.379.202 2.398.1 2.651.64.7 1.028 1.595 1.028 2.688 0 3.848-2.339 4.695-4.566 4.943.359.309.678.92.678 1.855 0 1.338-.012 2.419-.012 2.747 0 .268.18.58.688.482A10.019 10.019 0 0022 12.017C22 6.484 17.522 2 12 2z"/></svg>
+          GitHub
+        </a>
+        {% endif %}
+        {% if user.twitterHandle %}
+        <a href="https://x.com/{{ user.twitterHandle }}" target="_blank" rel="noopener">
+          <svg width="16" height="16" viewBox="0 0 24 24" fill="currentColor" aria-hidden="true"><path d="M18.244 2.25h3.308l-7.227 8.26 8.502 11.24H16.17l-5.214-6.817L4.99 21.75H1.68l7.73-8.835L1.254 2.25H8.08l4.713 6.231zm-1.161 17.52h1.833L7.084 4.126H5.117z"/></svg>
+          @{{ user.twitterHandle }}
+        </a>
+        {% endif %}
+        {% if user.websiteUrl %}
+        <a href="{{ user.websiteUrl }}" target="_blank" rel="noopener">{{ user.websiteUrl | stripProtocol }}</a>
+        {% endif %}
+        {% if user.resumeUrl %}
+        <a href="{{ user.resumeUrl }}" target="_blank" rel="noopener">
+          <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" aria-hidden="true"><path d="M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z"/><polyline points="14 2 14 8 20 8"/><line x1="12" y1="18" x2="12" y2="12"/><polyline points="9 15 12 18 15 15"/></svg>
+          Resume (PDF)
+        </a>
+        {% endif %}
+      </div>
+      {% endif %}
+    </header>
+    {% endif %}
+
+    <div class="hr-triple" role="separator">
+      <span class="hr-triple-inner"></span>
+    </div>
+
+    {%- comment -%} Aggregate Stats {%- endcomment -%}
+    <section class="margin-stats fade-in fade-in-delay-1" aria-label="Portfolio statistics">
+      <div class="margin-stat">
+        <div class="margin-stat__value">{{ projects.size }}</div>
+        <div class="margin-stat__label">Projects</div>
+      </div>
+      <div class="margin-stat">
+        <div class="margin-stat__value">{{ totalSessions }}</div>
+        <div class="margin-stat__label">Sessions</div>
+      </div>
+      {% if efficiencyMultiplier %}
+      <div class="margin-stat">
+        <div class="margin-stat__label">the author</div>
+        <div class="margin-stat__value" style="opacity:0.7">{{ totalDurationMinutes | formatDuration }}</div>
+        <div class="margin-stat__label" style="margin-top:0.25rem">the machines</div>
+        <div class="margin-stat__value" style="color:var(--parch-accent)">{{ totalAgentDurationMinutes | formatDuration }}</div>
+      </div>
+      <div class="margin-stat margin-stat--featured">
+        <div class="margin-stat__value" style="font-size:1.5rem;color:var(--parch-accent)">{{ efficiencyMultiplier }}&times;</div>
+        <div class="margin-stat__label">leverage</div>
+      </div>
+      {% else %}
+      <div class="margin-stat">
+        <div class="margin-stat__value">{{ totalDurationMinutes | formatDuration }}</div>
+        <div class="margin-stat__label">Time</div>
+      </div>
+      {% endif %}
+      <div class="margin-stat">
+        <div class="margin-stat__value">{{ totalLoc | formatLoc }}</div>
+        <div class="margin-stat__label">Lines Changed</div>
+      </div>
+    </section>
+
+    <div class="hr-triple" role="separator">
+      <span class="hr-triple-inner"></span>
+    </div>
+
+    {%- comment -%} Main Content {%- endcomment -%}
+    <main id="main-content">
+
+      {%- comment -%} Chapter I: Works {%- endcomment -%}
+      {% if projects.size > 0 %}
+      <section aria-label="Projects">
+        <h2 class="chapter-heading fade-in fade-in-delay-2">
+          <span class="chapter-heading__number">Chapter I</span>
+          Works
+        </h2>
+
+        {% for p in projects %}
+        <article class="project-card fade-in fade-in-delay-2">
+          <span class="project-card__page-number">p. {{ forloop.index }}</span>
+          <h3 class="project-card__title">
+            <a href="/{{ user.username }}/{{ p.slug }}">{{ p.title }}</a>
+          </h3>
+          {% if p.narrative %}
+          <p class="project-card__narrative">{{ p.narrative }}</p>
+          {% endif %}
+          {% if p.skills.size > 0 %}
+          <div class="project-card__skills">
+            {% for skill in p.skills %}
+            <span class="skill-tag">{{ skill }}</span>
+            {% endfor %}
+          </div>
+          {% endif %}
+          <div class="project-card__meta">
+            <span class="project-card__meta-item">{{ p.totalSessions }} session{% if p.totalSessions != 1 %}s{% endif %}</span>
+            <span class="project-card__meta-item">{{ p.totalDurationMinutes | formatDuration }}</span>
+            <span class="project-card__meta-item">{{ p.totalLoc | localeNumber }} LOC</span>
+          </div>
+          {% if p.sourceCounts.size > 0 %}
+          {% assign pTotalSrc = 0 %}
+          {% for src in p.sourceCounts %}
+            {% assign pTotalSrc = pTotalSrc | plus: src.count %}
+          {% endfor %}
+          {% if pTotalSrc > 0 %}
+          <div class="source-bar" role="img" aria-label="Source mix">
+            {% for src in p.sourceCounts %}
+            {% assign pSrcPct = src.count | times: 100.0 | divided_by: pTotalSrc | round %}
+            <div class="source-bar__segment{% if forloop.first %} source-bar__segment--claude{% else %} source-bar__segment--cursor{% endif %}" style="width: {{ pSrcPct }}%"></div>
+            {% endfor %}
+          </div>
+          <div class="source-bar__labels">
+            {% for src in p.sourceCounts %}
+            {% assign pSrcPct = src.count | times: 100.0 | divided_by: pTotalSrc | round %}
+            <span>{{ src.tool }} {{ pSrcPct }}%</span>
+            {% endfor %}
+          </div>
+          {% endif %}
+          {% endif %}
+        </article>
+        {% endfor %}
+      </section>
+
+      <div class="hr-triple" role="separator">
+        <span class="hr-triple-inner"></span>
+      </div>
+      {% endif %}
+
+      {%- comment -%} Chapter II: Skills Compendium {%- endcomment -%}
+      {% if allSkills.size > 0 %}
+      <section class="skills-overview" aria-label="Skills compendium">
+        <h2 class="chapter-heading fade-in fade-in-delay-3">
+          <span class="chapter-heading__number">Chapter II</span>
+          Skills Compendium
+        </h2>
+        <div class="skills-grid">
+          {% for skill in allSkills %}
+          <div class="skills-grid__item">
+            <div class="skills-grid__name">{{ skill.name }}</div>
+            <div class="skills-grid__count">{{ skill.projectCount }} project{% if skill.projectCount != 1 %}s{% endif %}</div>
+          </div>
+          {% endfor %}
+        </div>
+      </section>
+
+      <div class="hr-triple" role="separator">
+        <span class="hr-triple-inner"></span>
+      </div>
+      {% endif %}
+
+      {%- comment -%} Chapter III: Recent Activity {%- endcomment -%}
+      {% if recentSessions.size > 0 %}
+      <section aria-label="Recent activity">
+        <h2 class="chapter-heading fade-in fade-in-delay-3">
+          <span class="chapter-heading__number">Chapter III</span>
+          Recent Activity
+        </h2>
+        <div style="overflow-x: auto;">
+          <table class="activity-table">
+            <thead>
+              <tr>
+                <th scope="col">Date</th>
+                <th scope="col">Session</th>
+                <th scope="col">Project</th>
+                <th scope="col">Duration</th>
+                <th scope="col">LOC</th>
+              </tr>
+            </thead>
+            <tbody>
+              {% for rs in recentSessions %}
+              <tr>
+                <td>{% if rs.recordedAt %}{{ rs.recordedAt | formatDateShort }}{% endif %}</td>
+                <td>{{ rs.title }}</td>
+                <td><span class="activity-table__project">{{ rs.projectTitle | default: rs.projectSlug }}</span></td>
+                <td>{{ rs.durationMinutes | formatDuration }}</td>
+                <td>{{ rs.locChanged | localeNumber }}</td>
+              </tr>
+              {% endfor %}
+            </tbody>
+          </table>
+        </div>
+      </section>
+
+      <div class="hr-triple" role="separator">
+        <span class="hr-triple-inner"></span>
+      </div>
+      {% endif %}
+
+      {%- comment -%} Chapter IV: Source Overview {%- endcomment -%}
+      {% if sourceCounts.size > 0 %}
+      <section aria-label="Source overview">
+        <h2 class="chapter-heading fade-in fade-in-delay-3">
+          <span class="chapter-heading__number">Chapter IV</span>
+          Source
+        </h2>
+        {% assign totalPortSrc = 0 %}
+        {% for src in sourceCounts %}
+          {% assign totalPortSrc = totalPortSrc | plus: src.count %}
+        {% endfor %}
+        {% if totalPortSrc > 0 %}
+        <div class="source-overview">
+          {% for src in sourceCounts %}
+          {% assign portSrcPct = src.count | times: 100.0 | divided_by: totalPortSrc | round %}
+          <div class="source-overview__item">
+            <div class="source-overview__value">{{ portSrcPct }}%</div>
+            <div class="source-overview__label">{{ src.tool }}</div>
+          </div>
+          {% endfor %}
+        </div>
+        <div class="source-overview__bar" style="margin-top: 1rem;">
+          <div class="source-overview__bar-track" role="img" aria-label="Overall source mix">
+            {% for src in sourceCounts %}
+            {% assign portSrcPct = src.count | times: 100.0 | divided_by: totalPortSrc | round %}
+            <div class="source-overview__bar-fill--{% if forloop.first %}claude{% else %}cursor{% endif %}" style="width: {{ portSrcPct }}%;"></div>
+            {% endfor %}
+          </div>
+          <div class="source-overview__bar-labels">
+            {% for src in sourceCounts %}
+            <span>{{ src.tool }}</span>
+            {% endfor %}
+          </div>
+        </div>
+        {% endif %}
+      </section>
+
+      <div class="hr-triple" role="separator">
+        <span class="hr-triple-inner"></span>
+      </div>
+      {% endif %}
+
+      {%- comment -%} Epilogue: About This Collection {%- endcomment -%}
+      {% if user.bio %}
+      <section class="about-section" aria-label="About this collection">
+        <h2 class="chapter-heading fade-in fade-in-delay-3">
+          <span class="chapter-heading__number">Epilogue</span>
+          About This Collection
+        </h2>
+        <p class="about-section__text">{{ user.bio }}</p>
+      </section>
+      {% endif %}
+    </main>
+
+    <div class="hr-triple" role="separator">
+      <span class="hr-triple-inner"></span>
+    </div>
+
+    {%- comment -%} Colophon {%- endcomment -%}
+    <footer class="colophon" role="contentinfo">
+      <div class="colophon__mark" aria-hidden="true">&sect;</div>
+      <p>Set in Crimson Pro &amp; IBM Plex Mono</p>
+      <p>Composed with AI-assisted development tools</p>
+      <p>Published on heyi.am</p>
+    </footer>
+  </div>
+
+</div>

package/dist/render/templates/parchment/project.liquid

@@ -0,0 +1,289 @@
+<div class="heyiam-project parchment" data-render-version="2" data-template="parchment"{% if sessionBaseUrl %} data-session-base-url="{{ sessionBaseUrl }}"{% endif %} data-username="{{ user.username }}" data-project-slug="{{ project.slug }}">
+  <a href="#main-content" class="skip-link">Skip to content</a>
+
+  <div class="page-wrapper">
+
+    {%- comment -%} Breadcrumb {%- endcomment -%}
+    <div class="breadcrumb" aria-label="Breadcrumb">
+      <a href="/{{ user.username }}">{{ user.username }}</a>
+      <span class="breadcrumb__sep" aria-hidden="true">/</span>
+      <span>{{ project.slug }}</span>
+    </div>
+
+    {%- comment -%} Title Page {%- endcomment -%}
+    <header class="title-page fade-in" role="banner">
+      <h1 class="title-page__heading" data-editable="title">{{ project.title }}</h1>
+      {% if project.repoUrl or project.projectUrl %}
+      <div class="title-page__links">
+        {% if project.repoUrl %}
+        <a href="{{ project.repoUrl }}" target="_blank" rel="noopener noreferrer">{{ project.repoUrl | stripProtocol }}</a>
+        {% endif %}
+        {% if project.projectUrl %}
+        <a href="{{ project.projectUrl }}" target="_blank" rel="noopener noreferrer">{{ project.projectUrl | stripProtocol }}</a>
+        {% endif %}
+      </div>
+      {% endif %}
+    </header>
+
+    {%- comment -%} Screenshot {%- endcomment -%}
+    {% if project.screenshotUrl %}
+    <figure class="screenshot fade-in fade-in-d1" aria-label="Application screenshot">
+      <div class="screenshot__chrome">
+        <span class="screenshot__dot" aria-hidden="true"></span>
+        <span class="screenshot__dot" aria-hidden="true"></span>
+        <span class="screenshot__dot" aria-hidden="true"></span>
+        {% if project.projectUrl %}
+        <span class="screenshot__bar">{{ project.projectUrl | stripProtocol }}</span>
+        {% else %}
+        <span class="screenshot__bar">{{ project.slug }}</span>
+        {% endif %}
+      </div>
+      <img src="{{ project.screenshotUrl }}" alt="{{ project.title }} preview" style="width:100%;display:block;">
+    </figure>
+    {% endif %}
+
+    <div class="hr-triple" role="separator">
+      <span class="hr-triple-inner"></span>
+    </div>
+
+    <main id="main-content">
+
+      {%- comment -%} Narrative with Drop Cap {%- endcomment -%}
+      {% if project.narrative %}
+      <section class="narrative fade-in fade-in-d2" aria-label="Project narrative">
+        <p>{{ project.narrative }}</p>
+      </section>
+
+      <div class="hr-triple" role="separator">
+        <span class="hr-triple-inner"></span>
+      </div>
+      {% endif %}
+
+      {%- comment -%} Stats {%- endcomment -%}
+      <section class="project-stats fade-in fade-in-d2" aria-label="Project statistics">
+        <div class="project-stat">
+          <div class="project-stat__value">{{ project.totalSessions }}</div>
+          <div class="project-stat__label">Sessions</div>
+        </div>
+        {% if efficiencyMultiplier %}
+        <div class="project-stat">
+          <div class="project-stat__label">the author</div>
+          <div class="project-stat__value" style="opacity:0.7">{{ project.totalDurationMinutes | formatDuration }}</div>
+          <div class="project-stat__label" style="margin-top:0.25rem">the machines</div>
+          <div class="project-stat__value" style="color:var(--parch-accent)">{{ project.totalAgentDurationMinutes | formatDuration }}</div>
+        </div>
+        <div class="project-stat project-stat--featured">
+          <div class="project-stat__value" style="font-size:1.5rem;color:var(--parch-accent)">{{ efficiencyMultiplier }}&times;</div>
+          <div class="project-stat__label">leverage</div>
+        </div>
+        {% else %}
+        <div class="project-stat">
+          <div class="project-stat__value">{{ project.totalDurationMinutes | formatDuration }}</div>
+          <div class="project-stat__label">{{ durationLabel }}</div>
+        </div>
+        {% endif %}
+        <div class="project-stat">
+          <div class="project-stat__value">{{ project.totalLoc | localeNumber }}</div>
+          <div class="project-stat__label">Lines Changed</div>
+        </div>
+        <div class="project-stat">
+          <div class="project-stat__value">{{ project.totalFilesChanged | localeNumber }}</div>
+          <div class="project-stat__label">Files</div>
+        </div>
+        {% if project.totalTokens %}
+        <div class="project-stat">
+          <div class="project-stat__value">{{ project.totalTokens | formatTokens }}</div>
+          <div class="project-stat__label">Tokens</div>
+        </div>
+        {% endif %}
+      </section>
+
+      <div class="hr-triple" role="separator">
+        <span class="hr-triple-inner"></span>
+      </div>
+
+      {%- comment -%} Chapter II: Phases {%- endcomment -%}
+      {% if arc.size > 0 %}
+      <section aria-label="Project phases">
+        <h2 class="chapter-heading fade-in fade-in-d3">
+          <span class="chapter-heading__number">Chapter II</span>
+          Phases
+        </h2>
+        <div class="phases">
+          {% for item in arc %}
+          <div class="phase">
+            <div class="phase__number">Phase {{ item.phase }}</div>
+            <h3 class="phase__title">{{ item.title }}</h3>
+            {% if item.dates %}
+            <div class="phase__dates">{{ item.dates }}</div>
+            {% endif %}
+            <p class="phase__desc">{{ item.description }}</p>
+          </div>
+          {% endfor %}
+        </div>
+      </section>
+
+      <div class="hr-triple" role="separator">
+        <span class="hr-triple-inner"></span>
+      </div>
+      {% endif %}
+
+      {%- comment -%} Chapter III: Key Decisions {%- endcomment -%}
+      {% if arc.size > 0 %}
+      <section aria-label="Key decisions">
+        <h2 class="chapter-heading fade-in fade-in-d3">
+          <span class="chapter-heading__number">Chapter III</span>
+          Key Decisions
+        </h2>
+        <ol class="decisions-list">
+          {% for item in arc %}
+          <li>{{ item.description }}</li>
+          {% endfor %}
+        </ol>
+      </section>
+
+      <div class="hr-triple" role="separator">
+        <span class="hr-triple-inner"></span>
+      </div>
+      {% endif %}
+
+      {%- comment -%} Chapter IV: Skills {%- endcomment -%}
+      {% if project.skills.size > 0 %}
+      <section class="skills-section" aria-label="Skills used">
+        <h2 class="chapter-heading fade-in fade-in-d3">
+          <span class="chapter-heading__number">Chapter IV</span>
+          Skills
+        </h2>
+        <div class="skill-list">
+          {% for skill in project.skills %}
+          <span class="skill-tag">{{ skill }}</span>
+          {% endfor %}
+        </div>
+      </section>
+
+      <div class="hr-triple" role="separator">
+        <span class="hr-triple-inner"></span>
+      </div>
+      {% endif %}
+
+      {%- comment -%} Chapter V: Source Breakdown {%- endcomment -%}
+      {% if sourceCounts.size > 0 %}
+      <section aria-label="Source breakdown">
+        <h2 class="chapter-heading fade-in fade-in-d3">
+          <span class="chapter-heading__number">Chapter V</span>
+          Source
+        </h2>
+        <div class="source-breakdown">
+          <div class="source-bar-container">
+            {% assign totalSourceSessions = 0 %}
+            {% for src in sourceCounts %}
+              {% assign totalSourceSessions = totalSourceSessions | plus: src.count %}
+            {% endfor %}
+            {% if totalSourceSessions > 0 %}
+            <div class="source-bar" role="img" aria-label="Source breakdown">
+              {% for src in sourceCounts %}
+              {% assign srcPct = src.count | times: 100.0 | divided_by: totalSourceSessions | round %}
+              <div class="source-bar__segment{% if forloop.first %} source-bar__segment--claude{% else %} source-bar__segment--cursor{% endif %}" style="width: {{ srcPct }}%"></div>
+              {% endfor %}
+            </div>
+            <div class="source-labels">
+              {% for src in sourceCounts %}
+              {% assign srcPct = src.count | times: 100.0 | divided_by: totalSourceSessions | round %}
+              <span>{{ src.tool }} &mdash; {{ src.count }} session{% if src.count != 1 %}s{% endif %} ({{ srcPct }}%)</span>
+              {% endfor %}
+            </div>
+            {% endif %}
+          </div>
+        </div>
+      </section>
+
+      <div class="hr-triple" role="separator">
+        <span class="hr-triple-inner"></span>
+      </div>
+      {% endif %}
+
+      {%- comment -%} Chapter VI: Work Timeline (static table) {%- endcomment -%}
+      {% if featuredSessions.size > 0 %}
+      <section aria-label="Work timeline">
+        <h2 class="chapter-heading fade-in fade-in-d4">
+          <span class="chapter-heading__number">Chapter VI</span>
+          Work Timeline
+        </h2>
+        <div style="overflow-x: auto;">
+          <table class="timeline-table">
+            <thead>
+              <tr>
+                <th scope="col">#</th>
+                <th scope="col">Title</th>
+                <th scope="col">Date</th>
+                <th scope="col">Duration</th>
+                <th scope="col">LOC</th>
+                <th scope="col">Source</th>
+              </tr>
+            </thead>
+            <tbody>
+              {% for s in featuredSessions %}
+              <tr>
+                <td>{{ forloop.index }}</td>
+                <td>{{ s.title }}</td>
+                <td>{% if s.recordedAt %}{{ s.recordedAt | formatDateShort }}{% endif %}</td>
+                <td>{{ s.durationMinutes | formatDuration }}</td>
+                <td>{{ s.locChanged | localeNumber }}</td>
+                <td>{{ s.sourceTool | default: "—" }}</td>
+              </tr>
+              {% endfor %}
+            </tbody>
+          </table>
+        </div>
+      </section>
+
+      <div class="hr-triple" role="separator">
+        <span class="hr-triple-inner"></span>
+      </div>
+      {% endif %}
+
+      {%- comment -%} Chapter VII: Featured Sessions {%- endcomment -%}
+      {% if featuredSessions.size > 0 %}
+      <section class="session-list" aria-label="Featured sessions">
+        <h2 class="chapter-heading fade-in fade-in-d4">
+          <span class="chapter-heading__number">Chapter VII</span>
+          Featured Sessions
+        </h2>
+
+        {% for s in featuredSessions %}
+        <article class="session-card">
+          <span class="session-card__page">p. {{ forloop.index }}</span>
+          <div class="session-card__number">Session {{ forloop.index }}</div>
+          <h3 class="session-card__title">
+            <a href="{{ sessionBaseUrl }}/{{ s.slug }}{{ sessionSuffix }}">{{ s.title }}</a>
+            {% if s.skills.size > 0 %}
+            <span class="session-card__tag">{{ s.skills | first }}</span>
+            {% endif %}
+          </h3>
+          <div class="session-card__meta">
+            <span>{{ s.durationMinutes | formatDuration }}</span>
+            <span>{{ s.locChanged | localeNumber }} LOC</span>
+            {% if s.agentSummary %}
+            <span>{{ s.agentSummary.agents.size }} agents</span>
+            {% endif %}
+          </div>
+        </article>
+        {% endfor %}
+      </section>
+      {% endif %}
+    </main>
+
+    <div class="hr-triple" role="separator">
+      <span class="hr-triple-inner"></span>
+    </div>
+
+    {%- comment -%} Colophon {%- endcomment -%}
+    <footer class="colophon" role="contentinfo">
+      <div class="colophon__mark" aria-hidden="true">&sect;</div>
+      <p>Set in Crimson Pro &amp; IBM Plex Mono</p>
+      <p>Composed with AI-assisted development tools</p>
+      <p>Published on heyi.am</p>
+    </footer>
+  </div>
+
+</div>