heyiam 0.2.28 → 0.3.0

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

@@ -0,0 +1,170 @@
+<div class="heyiam-portfolio carbon" data-render-version="2" data-template="carbon" data-username="{{ user.username }}">
+
+  {%- comment -%} Profile Header {%- endcomment -%}
+  {% if hasProfile %}
+  <header class="profile fade-in" aria-label="Profile">
+    {% if user.photoUrl %}
+    <img src="{{ user.photoUrl }}" alt="{{ user.displayName }}" class="profile__photo" width="120" height="120">
+    {% endif %}
+    {% if user.displayName != blank %}
+    <h1 class="profile__name">{{ user.displayName }}</h1>
+    {% endif %}
+    {% if user.bio != blank %}
+    <p class="profile__bio">{{ user.bio }}</p>
+    {% endif %}
+    {% if user.location != blank %}
+    <p class="profile__location">{{ user.location }}</p>
+    {% endif %}
+    <div class="profile__links">
+      {% if user.email != blank %}
+      <a href="mailto:{{ user.email }}">{{ user.email }}</a>
+      {% endif %}
+      {% if user.linkedinUrl != blank %}
+      <a href="{{ user.linkedinUrl }}" target="_blank" rel="noopener">LinkedIn</a>
+      {% endif %}
+      {% if user.githubUrl != blank %}
+      <a href="{{ user.githubUrl }}" target="_blank" rel="noopener">GitHub</a>
+      {% endif %}
+      {% if user.twitterHandle != blank %}
+      <a href="https://x.com/{{ user.twitterHandle }}" target="_blank" rel="noopener">@{{ user.twitterHandle }}</a>
+      {% endif %}
+      {% if user.websiteUrl != blank %}
+      <a href="{{ user.websiteUrl }}" target="_blank" rel="noopener">{{ user.websiteUrl | stripProtocol }}</a>
+      {% endif %}
+      {% if user.resumeUrl != blank %}
+      <a href="{{ user.resumeUrl }}" class="profile__link--resume" download>Resume (PDF)</a>
+      {% endif %}
+    </div>
+  </header>
+  {% endif %}
+
+  {%- comment -%} Aggregate Stats Bar {%- endcomment -%}
+  <section class="stats-bar fade-in" aria-label="Portfolio statistics">
+    <div class="stat-cell">
+      <div class="stat-cell__value">{{ projects.size }}</div>
+      <div class="stat-cell__label">Projects</div>
+    </div>
+    <div class="stat-cell">
+      <div class="stat-cell__value">{{ totalSessions }}</div>
+      <div class="stat-cell__label">Sessions</div>
+    </div>
+    {% if efficiencyMultiplier %}
+    <div class="stat-cell stat-cell--leverage">
+      <div class="leverage-cell">
+        <div class="leverage-cell__value">{{ totalDurationMinutes | formatDuration }}</div>
+        <div class="leverage-cell__label">You</div>
+      </div>
+      <div class="leverage-cell">
+        <div class="leverage-cell__value leverage-cell__value--accent">{{ totalAgentDurationMinutes | formatDuration }}</div>
+        <div class="leverage-cell__label">Agents</div>
+      </div>
+      <div class="leverage-cell">
+        <div class="leverage-cell__value leverage-cell__value--accent">{{ efficiencyMultiplier }}</div>
+        <div class="leverage-cell__label">Multiplier</div>
+      </div>
+    </div>
+    {% else %}
+    <div class="stat-cell">
+      <div class="stat-cell__value">{{ totalDurationMinutes | formatDuration }}</div>
+      <div class="stat-cell__label">Total Time</div>
+    </div>
+    {% endif %}
+    <div class="stat-cell">
+      <div class="stat-cell__value">{{ totalLoc | formatLoc }}</div>
+      <div class="stat-cell__label">Lines Changed</div>
+    </div>
+  </section>
+
+  {%- comment -%} Projects {%- endcomment -%}
+  {% if projects.size > 0 %}
+  <section aria-label="Projects">
+    <h2 class="section-heading">Projects</h2>
+    <div class="projects-grid">
+      {% for p in projects %}
+      <article class="card fade-in">
+        <div class="card__header brushed-header">
+          <h3 class="card__title"><a href="/{{ user.username }}/{{ p.slug }}">{{ p.title }}</a></h3>
+        </div>
+        <div class="card__body">
+          {% if p.narrative != blank %}
+          <p class="card__narrative">{{ p.narrative | truncate: 120 }}</p>
+          {% endif %}
+          {% if p.skills.size > 0 %}
+          <ul class="skill-list" aria-label="Skills used in {{ p.title }}">
+            {% for skill in p.skills limit: 6 %}
+            <li class="skill-chip">{{ skill }}</li>
+            {% endfor %}
+          </ul>
+          {% endif %}
+          <div class="card-stats">
+            <span><span class="card-stats__value">{{ p.totalSessions }}</span> sessions</span>
+            <span><span class="card-stats__value">{{ p.totalDurationMinutes | formatDuration }}</span> time</span>
+            <span><span class="card-stats__value">{{ p.totalLoc | formatLoc }}</span> 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 breakdown for {{ p.title }}">
+            {% for src in p.sourceCounts %}
+            {% assign srcPct = src.count | times: 100.0 | divided_by: pTotalSrc | round %}
+            <div class="source-bar__segment source-bar__segment--{{ src.tool | downcase | replace: ' ', '-' }}" style="width: {{ srcPct }}%"></div>
+            {% endfor %}
+          </div>
+          <div class="source-legend">
+            {% for src in p.sourceCounts %}
+            {% assign srcPct = src.count | times: 100.0 | divided_by: pTotalSrc | round %}
+            <span><span class="source-legend__dot source-legend__dot--{{ src.tool | downcase | replace: ' ', '-' }}"></span>{{ src.tool }} {{ srcPct }}%</span>
+            {% endfor %}
+          </div>
+          {% endif %}
+          {% endif %}
+        </div>
+      </article>
+      {% endfor %}
+    </div>
+  </section>
+  {% endif %}
+
+  {%- comment -%} Aggregate Source Chart {%- endcomment -%}
+  {% if sourceCounts.size > 0 %}
+  <section class="source-overview fade-in" aria-label="Source breakdown across all projects">
+    <h2 class="section-heading">Source Overview</h2>
+    <div class="source-bar" role="img" aria-label="Aggregate source breakdown">
+      {% for src in sourceCounts %}
+      {% assign srcPct = src.count | times: 100.0 | divided_by: totalSourceSessions | round %}
+      <div class="source-bar__segment source-bar__segment--{{ src.tool | downcase | replace: ' ', '-' }}" style="width: {{ srcPct }}%"></div>
+      {% endfor %}
+    </div>
+    <div class="source-overview__legend">
+      {% for src in sourceCounts %}
+      {% assign srcPct = src.count | times: 100.0 | divided_by: totalSourceSessions | round %}
+      <span><span class="source-overview__dot source-overview__dot--{{ src.tool | downcase | replace: ' ', '-' }}"></span>{{ src.tool }} {{ srcPct }}%</span>
+      {% endfor %}
+    </div>
+  </section>
+  {% endif %}
+
+  {%- comment -%} Aggregate Skills {%- endcomment -%}
+  {% if allSkills.size > 0 %}
+  <section class="all-skills fade-in" aria-label="All skills across projects">
+    <h2 class="section-heading">Skills</h2>
+    <ul class="all-skills__list">
+      {% for skill in allSkills %}
+      <li class="all-skills__chip">{{ skill.name }}</li>
+      {% endfor %}
+    </ul>
+  </section>
+  {% endif %}
+
+  {%- comment -%} Footer {%- endcomment -%}
+  <footer class="carbon-footer">
+    <span>Built with <a href="https://heyiam.com" target="_blank" rel="noopener noreferrer">heyi.am</a></span>
+    <span>Carbon template</span>
+  </footer>
+
+  {%- comment -%} Fade-in animation {%- endcomment -%}
+
+</div>

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

@@ -0,0 +1,249 @@
+<div class="heyiam-project carbon" data-render-version="2" data-template="carbon"{% if sessionBaseUrl %} data-session-base-url="{{ sessionBaseUrl }}"{% endif %} data-username="{{ user.username }}" data-project-slug="{{ project.slug }}">
+
+  {%- comment -%} Breadcrumb {%- endcomment -%}
+  <nav class="breadcrumb" aria-label="Breadcrumb">
+    <a href="/{{ user.username }}">{{ user.username }}</a>
+    <span class="breadcrumb__sep">/</span>
+    <span aria-current="page">{{ project.slug }}</span>
+  </nav>
+
+  {%- comment -%} Project Header {%- endcomment -%}
+  <header class="project-header fade-in">
+    <h1 class="project-header__title" data-editable="title">{{ project.title }}</h1>
+    {% if project.repoUrl or project.projectUrl %}
+    <div class="project-header__links">
+      {% if project.repoUrl %}
+      <a href="{{ project.repoUrl }}" target="_blank" rel="noopener" aria-label="GitHub repository">{{ project.repoUrl | stripProtocol }}</a>
+      {% endif %}
+      {% if project.projectUrl %}
+      <a href="{{ project.projectUrl }}" target="_blank" rel="noopener" aria-label="Live site">{{ project.projectUrl | stripProtocol }}</a>
+      {% endif %}
+    </div>
+    {% endif %}
+  </header>
+
+  {%- comment -%} Screenshot {%- endcomment -%}
+  {% if project.screenshotUrl %}
+  <figure class="screenshot fade-in" aria-label="Application screenshot">
+    <div class="screenshot__chrome">
+      <span class="screenshot__dot"></span>
+      <span class="screenshot__dot"></span>
+      <span class="screenshot__dot"></span>
+    </div>
+    <div class="screenshot__body">
+      <img src="{{ project.screenshotUrl }}" alt="{{ project.title }} screenshot" class="screenshot__img">
+    </div>
+  </figure>
+  {% endif %}
+
+  {%- comment -%} Stats Bar {%- endcomment -%}
+  <section class="stats-bar stats-bar--project fade-in" aria-label="Project statistics">
+    <div class="stat-cell">
+      <div class="stat-cell__value">{{ project.totalSessions }}</div>
+      <div class="stat-cell__label">Sessions</div>
+    </div>
+    {% if efficiencyMultiplier %}
+    <div class="stat-cell stat-cell--leverage">
+      <div class="leverage-cell">
+        <div class="leverage-cell__value">{{ project.totalDurationMinutes | formatDuration }}</div>
+        <div class="leverage-cell__label">You</div>
+      </div>
+      <div class="leverage-cell">
+        <div class="leverage-cell__value leverage-cell__value--accent">{{ project.totalAgentDurationMinutes | formatDuration }}</div>
+        <div class="leverage-cell__label">Agents</div>
+      </div>
+      <div class="leverage-cell">
+        <div class="leverage-cell__value leverage-cell__value--accent">{{ efficiencyMultiplier }}</div>
+        <div class="leverage-cell__label">Multiplier</div>
+      </div>
+    </div>
+    {% else %}
+    <div class="stat-cell">
+      <div class="stat-cell__value">{{ project.totalDurationMinutes | formatDuration }}</div>
+      <div class="stat-cell__label">Time</div>
+    </div>
+    {% endif %}
+    <div class="stat-cell">
+      <div class="stat-cell__value">{{ project.totalLoc | formatLoc }}</div>
+      <div class="stat-cell__label">LOC</div>
+    </div>
+    <div class="stat-cell">
+      <div class="stat-cell__value">{{ project.totalFilesChanged }}</div>
+      <div class="stat-cell__label">Files</div>
+    </div>
+    {% if project.totalTokens %}
+    <div class="stat-cell">
+      <div class="stat-cell__value">{{ project.totalTokens | formatTokens }}</div>
+      <div class="stat-cell__label">Tokens</div>
+    </div>
+    {% endif %}
+  </section>
+
+  {%- comment -%} Narrative {%- endcomment -%}
+  {% if project.narrative != blank %}
+  <section class="narrative fade-in" aria-label="Project narrative">
+    <h2 class="section-heading">Narrative</h2>
+    <p>{{ project.narrative }}</p>
+  </section>
+  {% endif %}
+
+  {%- comment -%} Phases Timeline {%- endcomment -%}
+  {% if arc.size > 0 %}
+  <section class="fade-in" aria-label="Project phases">
+    <h2 class="section-heading">Phases</h2>
+    <div class="phase-timeline">
+      {% for item in arc %}
+      <div class="phase-item">
+        <div class="phase-item__title">{{ item.phase }}. {{ item.title }}</div>
+        {% if item.dates %}
+        <div class="phase-item__dates">{{ item.dates }}</div>
+        {% endif %}
+        <div class="phase-item__desc">{{ item.description }}</div>
+      </div>
+      {% endfor %}
+    </div>
+  </section>
+  {% endif %}
+
+  {%- comment -%} Work Timeline Chart (CSS-only SVG) {%- endcomment -%}
+  {% if featuredSessions.size > 0 %}
+  <section class="timeline-chart fade-in" aria-label="Work timeline">
+    <h2 class="section-heading">Work Timeline</h2>
+    <div class="timeline-chart__canvas">
+      {% assign maxDur = 1 %}
+      {% for s in featuredSessions %}
+        {% if s.durationMinutes > maxDur %}{% assign maxDur = s.durationMinutes %}{% endif %}
+      {% endfor %}
+      {% assign chartW = 800 %}
+      {% assign chartH = 200 %}
+      {% assign padL = 50 %}
+      {% assign padR = 30 %}
+      {% assign padT = 20 %}
+      {% assign padB = 30 %}
+      {% assign plotW = chartW | minus: padL | minus: padR %}
+      {% assign plotH = chartH | minus: padT | minus: padB %}
+      <svg viewBox="0 0 {{ chartW }} {{ chartH }}" aria-label="Chart showing session duration over time">
+        {%- comment -%} Grid lines {%- endcomment -%}
+        <line x1="{{ padL }}" y1="{{ padT }}" x2="{{ padL }}" y2="{{ chartH | minus: padB }}" stroke="rgba(148,163,184,0.08)" stroke-width="1"/>
+        <line x1="{{ padL }}" y1="{{ chartH | minus: padB }}" x2="{{ chartW | minus: padR }}" y2="{{ chartH | minus: padB }}" stroke="rgba(148,163,184,0.15)" stroke-width="1"/>
+        {% assign midY = plotH | divided_by: 2 | plus: padT %}
+        <line x1="{{ padL }}" y1="{{ midY }}" x2="{{ chartW | minus: padR }}" y2="{{ midY }}" stroke="rgba(148,163,184,0.06)" stroke-width="1" stroke-dasharray="4,4"/>
+
+        {%- comment -%} Y-axis labels {%- endcomment -%}
+        <text x="{{ padL | minus: 6 }}" y="{{ chartH | minus: padB | plus: 4 }}" text-anchor="end" fill="#71717a" font-family="IBM Plex Mono, monospace" font-size="9">0</text>
+        {% assign halfDur = maxDur | divided_by: 2 %}
+        <text x="{{ padL | minus: 6 }}" y="{{ midY | plus: 4 }}" text-anchor="end" fill="#71717a" font-family="IBM Plex Mono, monospace" font-size="9">{{ halfDur }}m</text>
+        <text x="{{ padL | minus: 6 }}" y="{{ padT | plus: 4 }}" text-anchor="end" fill="#71717a" font-family="IBM Plex Mono, monospace" font-size="9">{{ maxDur }}m</text>
+
+        {%- comment -%} Duration line + points {%- endcomment -%}
+        {% assign points = '' %}
+        {% assign sessionCount = featuredSessions.size %}
+        {% for s in featuredSessions %}
+          {% assign idx = forloop.index0 %}
+          {% if sessionCount > 1 %}
+            {% assign stepX = plotW | times: idx | divided_by: sessionCount | minus: 1 | plus: padL %}
+          {% else %}
+            {% assign stepX = padL | plus: plotW | divided_by: 2 %}
+          {% endif %}
+          {% assign ratio = s.durationMinutes | times: 1000 | divided_by: maxDur %}
+          {% assign yOff = ratio | times: plotH | divided_by: 1000 %}
+          {% assign cy = chartH | minus: padB | minus: yOff %}
+          {% if points != '' %}{% assign points = points | append: ' ' %}{% endif %}
+          {% assign points = points | append: stepX | append: ',' | append: cy %}
+        {% endfor %}
+
+        <polyline fill="none" stroke="#94a3b8" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" points="{{ points }}"/>
+
+        {% for s in featuredSessions %}
+          {% assign idx = forloop.index0 %}
+          {% if sessionCount > 1 %}
+            {% assign stepX = plotW | times: idx | divided_by: sessionCount | minus: 1 | plus: padL %}
+          {% else %}
+            {% assign stepX = padL | plus: plotW | divided_by: 2 %}
+          {% endif %}
+          {% assign ratio = s.durationMinutes | times: 1000 | divided_by: maxDur %}
+          {% assign yOff = ratio | times: plotH | divided_by: 1000 %}
+          {% assign cy = chartH | minus: padB | minus: yOff %}
+          <circle cx="{{ stepX }}" cy="{{ cy }}" r="5" fill="var(--carbon-bg)" stroke="#94a3b8" stroke-width="2"/>
+          <text x="{{ stepX }}" y="{{ chartH | minus: 4 }}" text-anchor="middle" fill="#71717a" font-family="IBM Plex Mono, monospace" font-size="8">{{ s.recordedAt | formatDateShort }}</text>
+        {% endfor %}
+      </svg>
+    </div>
+  </section>
+  {% endif %}
+
+  {%- comment -%} Key Decisions {%- endcomment -%}
+  {% if arc.size > 0 %}
+  <section class="decisions fade-in" aria-label="Key decisions">
+    <h2 class="section-heading">Key Decisions</h2>
+    {% for item in arc %}
+    <div class="decision-item">
+      <span class="decision-item__num">{{ item.phase | prepend: '0' | slice: -2, 2 }}</span>
+      <span>{{ item.description }}</span>
+    </div>
+    {% endfor %}
+  </section>
+  {% endif %}
+
+  {%- comment -%} Skills {%- endcomment -%}
+  {% if project.skills.size > 0 %}
+  <section class="fade-in" aria-label="Technologies used">
+    <h2 class="section-heading">Skills</h2>
+    <ul class="skill-list">
+      {% for skill in project.skills %}
+      <li class="skill-chip">{{ skill }}</li>
+      {% endfor %}
+    </ul>
+  </section>
+  {% endif %}
+
+  {%- comment -%} Source Breakdown {%- endcomment -%}
+  {% if sourceCounts.size > 0 %}
+  <section class="source-breakdown fade-in" aria-label="Source breakdown">
+    <h2 class="section-heading">Source Breakdown</h2>
+    {% assign totalSourceSessions = 0 %}
+    {% for src in sourceCounts %}
+      {% assign totalSourceSessions = totalSourceSessions | plus: src.count %}
+    {% endfor %}
+    {% if totalSourceSessions > 0 %}
+    <div class="source-bar-lg" role="img" aria-label="Source distribution bar">
+      {% for src in sourceCounts %}
+      {% assign srcPct = src.count | times: 100.0 | divided_by: totalSourceSessions | round %}
+      <div class="source-bar-lg__segment source-bar-lg__segment--{{ src.tool | downcase | replace: ' ', '-' }}" style="width: {{ srcPct }}%"></div>
+      {% endfor %}
+    </div>
+    {% endif %}
+    <div class="source-labels">
+      {% for src in sourceCounts %}
+      {% assign srcPct = src.count | times: 100.0 | divided_by: totalSourceSessions | round %}
+      <span><span class="source-labels__dot source-labels__dot--{{ src.tool | downcase | replace: ' ', '-' }}"></span>{{ src.tool }} {{ srcPct }}% ({{ src.count }} session{% if src.count != 1 %}s{% endif %})</span>
+      {% endfor %}
+    </div>
+  </section>
+  {% endif %}
+
+  {%- comment -%} Sessions Table {%- endcomment -%}
+  {% if featuredSessions.size > 0 %}
+  <section class="sessions-table fade-in" aria-label="Sessions">
+    <h2 class="section-heading">Sessions</h2>
+    {% for s in featuredSessions %}
+    <a href="{{ sessionBaseUrl }}/{{ s.slug }}{{ sessionSuffix }}" class="session-row">
+      <span class="session-row__num">{{ forloop.index }}</span>
+      <span class="session-row__title">{{ s.title }}</span>
+      <span class="session-row__date">{{ s.recordedAt | formatDateShort }}</span>
+      <span class="session-row__dur">{{ s.durationMinutes | formatDuration }}</span>
+      <span class="session-row__loc">{{ s.locChanged | localeNumber }} LOC</span>
+    </a>
+    {% endfor %}
+  </section>
+  {% endif %}
+
+  {%- comment -%} Footer {%- endcomment -%}
+  <footer class="carbon-footer">
+    <span>Built with <a href="https://heyiam.com" target="_blank" rel="noopener noreferrer">heyi.am</a></span>
+    <span>Carbon template</span>
+  </footer>
+
+  {%- comment -%} Fade-in animation {%- endcomment -%}
+
+</div>

package/dist/render/templates/carbon/session.liquid

@@ -0,0 +1,190 @@
+<div class="heyiam-session carbon" data-render-version="2" data-template="carbon">
+
+  {%- comment -%} Breadcrumb {%- endcomment -%}
+  <nav class="breadcrumb" aria-label="Breadcrumb">
+    <a href="/{{ user.username }}">{{ user.username }}</a>
+    {% if projectSlug %}
+    <span class="breadcrumb__sep">/</span>
+    <a href="/{{ user.username }}/{{ projectSlug }}">{{ projectSlug }}</a>
+    {% endif %}
+    <span class="breadcrumb__sep">/</span>
+    <span aria-current="page">{{ session.title }}</span>
+  </nav>
+
+  {%- comment -%} Session Header {%- endcomment -%}
+  <header class="session-header fade-in">
+    <h1 class="session-header__title">{{ session.title }}</h1>
+    <div class="session-header__meta">
+      {% if session.recordedAt %}
+      <span>Date: <span class="meta-value">{{ session.recordedAt | formatDate }}</span></span>
+      {% endif %}
+      {% if session.sourceTool %}
+      <span>Source: <span class="meta-value">{{ session.sourceTool }}</span></span>
+      {% endif %}
+      <span>Duration: <span class="meta-value">{{ session.durationMinutes | formatDuration }}</span></span>
+      <span>Turns: <span class="meta-value">{{ session.turns }}</span></span>
+      <span>LOC: <span class="meta-value">{{ session.locChanged | localeNumber }}</span></span>
+      <span>Files: <span class="meta-value">{{ session.filesChanged }}</span></span>
+    </div>
+  </header>
+
+  {%- comment -%} Dev Take {%- endcomment -%}
+  {% if session.devTake != blank %}
+  <div class="dev-take fade-in" aria-label="Developer commentary">
+    <div class="dev-take__label">Dev Take</div>
+    <p class="dev-take__text">{{ session.devTake }}</p>
+  </div>
+  {% endif %}
+
+  {%- comment -%} Main + Sidebar Layout {%- endcomment -%}
+  <div class="session-layout">
+
+    {%- comment -%} Main Content {%- endcomment -%}
+    <div>
+
+      {%- comment -%} Narrative {%- endcomment -%}
+      {% if session.narrative != blank %}
+      <section class="content-section fade-in" aria-label="Session narrative">
+        <h2 class="section-heading">Narrative</h2>
+        <p class="narrative-text">{{ session.narrative }}</p>
+      </section>
+      {% endif %}
+
+      {%- comment -%} Highlights {%- endcomment -%}
+      {% if session.highlights.size > 0 %}
+      <section class="content-section fade-in" aria-label="Session highlights">
+        <h2 class="section-heading">Highlights</h2>
+        <ul class="highlights-list">
+          {% for h in session.highlights %}
+          <li>{{ h }}</li>
+          {% endfor %}
+        </ul>
+      </section>
+      {% endif %}
+
+      {%- comment -%} Execution Path (Beats) {%- endcomment -%}
+      {% if session.beats.size > 0 %}
+      <section class="execution-path fade-in" aria-label="Execution path">
+        <h2 class="section-heading">Execution Path</h2>
+        {% for beat in session.beats %}
+        <div class="beat">
+          <div class="beat__title">{{ beat.title }}</div>
+          <div class="beat__desc">{{ beat.body }}</div>
+        </div>
+        {% endfor %}
+      </section>
+      {% endif %}
+
+      {%- comment -%} Q&A {%- endcomment -%}
+      {% if session.qaPairs.size > 0 %}
+      <section class="qa-section fade-in" aria-label="Questions and answers">
+        <h2 class="section-heading">Q&amp;A</h2>
+        {% for qa in session.qaPairs %}
+        <article class="qa-item">
+          <div class="qa-item__q">
+            <span class="qa-item__q-prefix">Q</span>
+            <span class="qa-item__q-text">{{ qa.question }}</span>
+          </div>
+          <div class="qa-item__a">{{ qa.answer }}</div>
+        </article>
+        {% endfor %}
+      </section>
+      {% endif %}
+
+      {%- comment -%} Agent Summary {%- endcomment -%}
+      {% if session.agentSummary %}
+      <section class="agent-summary fade-in" aria-label="Agent breakdown">
+        <h2 class="section-heading">Agent Breakdown</h2>
+
+        {% assign agent_colors = '#0891b2,#059669,#7c3aed,#475569,#e11d48,#d97706' | split: ',' %}
+        {% assign totalAgentDur = 0 %}
+        {% for agent in session.agentSummary.agents %}
+          {% assign totalAgentDur = totalAgentDur | plus: agent.duration_minutes %}
+        {% endfor %}
+
+        {% if totalAgentDur > 0 %}
+        <div class="agent-bar-chart" role="img" aria-label="Agent time distribution">
+          {% for agent in session.agentSummary.agents %}
+          {% assign pct = agent.duration_minutes | times: 100.0 | divided_by: totalAgentDur | round %}
+          {% assign colorIdx = forloop.index0 | modulo: 6 %}
+          <div class="agent-bar-chart__seg" style="width: {{ pct }}%; background: {{ agent_colors[colorIdx] }};"></div>
+          {% endfor %}
+        </div>
+        {% endif %}
+
+        {% for agent in session.agentSummary.agents %}
+        {% assign colorIdx = forloop.index0 | modulo: 6 %}
+        <div class="agent-row">
+          <span class="agent-row__role">
+            <span class="agent-dot" style="background: {{ agent_colors[colorIdx] }};" aria-hidden="true"></span>
+            {{ agent.role }}
+          </span>
+          <span class="agent-row__dur">{{ agent.duration_minutes }}m</span>
+          <span class="agent-row__loc">{{ agent.loc_changed }} LOC</span>
+        </div>
+        {% endfor %}
+      </section>
+      {% endif %}
+
+    </div>
+
+    {%- comment -%} Sidebar {%- endcomment -%}
+    <aside aria-label="Session details">
+
+      {%- comment -%} Tools Used {%- endcomment -%}
+      {% if session.toolBreakdown.size > 0 %}
+      <div class="sidebar-card fade-in">
+        <div class="sidebar-card__header brushed-header">Tools Used</div>
+        <div class="sidebar-card__body">
+          {% for t in session.toolBreakdown %}
+          <div class="tool-row">
+            <span class="tool-row__name">{{ t.tool }}</span>
+            <span class="tool-row__count">{{ t.count }}</span>
+          </div>
+          {% endfor %}
+        </div>
+      </div>
+      {% endif %}
+
+      {%- comment -%} Files Changed {%- endcomment -%}
+      {% if session.topFiles.size > 0 %}
+      <div class="sidebar-card fade-in">
+        <div class="sidebar-card__header brushed-header">Files Changed</div>
+        <div class="sidebar-card__body">
+          {% for f in session.topFiles %}
+          <div class="file-row">
+            <span class="file-row__name" title="{{ f.path }}">{{ f.path }}</span>
+            <span class="file-row__diff">+{{ f.additions }}{% if f.deletions > 0 %} -{{ f.deletions }}{% endif %}</span>
+          </div>
+          {% endfor %}
+        </div>
+      </div>
+      {% endif %}
+
+      {%- comment -%} Skills {%- endcomment -%}
+      {% if session.skills.size > 0 %}
+      <div class="sidebar-card fade-in">
+        <div class="sidebar-card__header brushed-header">Skills</div>
+        <div class="sidebar-card__body">
+          <ul class="sidebar-skills">
+            {% for skill in session.skills %}
+            <li class="sidebar-skill-chip">{{ skill }}</li>
+            {% endfor %}
+          </ul>
+        </div>
+      </div>
+      {% endif %}
+
+    </aside>
+
+  </div>
+
+  {%- comment -%} Footer {%- endcomment -%}
+  <footer class="carbon-footer">
+    <span>Built with <a href="https://heyiam.com" target="_blank" rel="noopener noreferrer">heyi.am</a></span>
+    <span>Carbon template</span>
+  </footer>
+
+  {%- comment -%} Fade-in animation {%- endcomment -%}
+
+</div>