heyiam 0.2.29 → 0.3.0

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

@@ -0,0 +1,170 @@
+<div class="heyiam-portfolio kinetic" data-render-version="2" data-template="kinetic" data-username="{{ user.username }}">
+
+  {%- comment -%} Hero {%- endcomment -%}
+  {% if hasProfile %}
+  <section class="hero" aria-label="Developer profile">
+    <div class="hero-bg-text" aria-hidden="true">{{ user.username }}</div>
+    <div class="hero-content">
+      <div class="eyebrow">Developer Portfolio</div>
+      <div class="hero-profile-row">
+        {% if user.photoUrl %}
+        <img src="{{ user.photoUrl }}" alt="{{ user.displayName }}" class="profile-photo">
+        {% endif %}
+        <div>
+          {% if user.displayName != blank %}
+          <h1>{{ user.displayName }}</h1>
+          {% endif %}
+          {% if user.bio %}
+          <p class="hero-bio">{{ user.bio }}</p>
+          {% endif %}
+          {% if user.location %}
+          <span class="hero-location">{{ user.location }}</span>
+          {% endif %}
+          <div class="contact-row">
+            {% 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"><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"><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"><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"><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 }}" class="resume-btn"><svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><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>
+        </div>
+      </div>
+    </div>
+  </section>
+  {% endif %}
+
+  {%- comment -%} Stats row {%- endcomment -%}
+  <div class="stats-row" aria-label="Portfolio statistics">
+    <div class="stat-item">
+      <span class="stat-value"><span class="counter" data-target="{{ projects.size }}">0</span></span>
+      <span class="stat-label">Projects</span>
+    </div>
+    <div class="stat-item">
+      <span class="stat-value"><span class="counter" data-target="{{ totalSessions }}">0</span></span>
+      <span class="stat-label">Sessions</span>
+    </div>
+    <div class="stat-item">
+      <span class="stat-value"><span class="counter" data-target="{{ totalLoc }}" data-format="comma">0</span></span>
+      <span class="stat-label">Lines Changed</span>
+    </div>
+    {% if efficiencyMultiplier %}
+    <div class="stat-item stat-item--leverage">
+      <div class="leverage-row">
+        <span><span class="leverage-num">{{ totalDurationMinutes | formatDuration }}</span> <span class="leverage-sub">/ you</span></span>
+        <span><span class="leverage-num leverage-num--agent">{{ totalAgentDurationMinutes | formatDuration }}</span> <span class="leverage-sub">/ agents</span></span>
+        <span><span class="leverage-num leverage-num--multi">{{ efficiencyMultiplier }}</span> <span class="leverage-sub">leverage</span></span>
+      </div>
+      {% assign totalCombined = totalDurationMinutes | plus: totalAgentDurationMinutes %}
+      {% if totalCombined > 0 %}
+      {% assign humanPct = totalDurationMinutes | times: 100 | divided_by: totalCombined %}
+      {% assign agentPct = 100 | minus: humanPct %}
+      <div class="leverage-bar">
+        <div class="leverage-bar__human" style="width: {{ humanPct }}%;"></div>
+        <div class="leverage-bar__agent" style="width: {{ agentPct }}%;"></div>
+      </div>
+      <div class="leverage-legend">
+        <span>you &middot; {{ humanPct }}%</span>
+        <span>agents &middot; {{ agentPct }}%</span>
+      </div>
+      {% endif %}
+    </div>
+    {% else %}
+    <div class="stat-item">
+      <span class="stat-value">{{ totalDurationMinutes | formatDuration }}</span>
+      <span class="stat-label">Total Time</span>
+    </div>
+    {% endif %}
+  </div>
+
+  {%- comment -%} Projects section {%- endcomment -%}
+  {% if projects.size > 0 %}
+  <section class="section" aria-label="Projects">
+    <div class="section-tag">Projects</div>
+    <h2 class="section-title">{{ projects.size }} project{{ projects.size | minus: 1 | at_least: 1 | times: 0 | plus: projects.size | minus: 1 }}{% if projects.size != 1 %}s{% endif %} built with AI</h2>
+    <p class="section-desc">Each project is a case study with real sessions, real decisions, and real stats.</p>
+
+    <div class="projects-grid">
+      {% for p in projects %}
+      <a href="/{{ user.username }}/{{ p.slug }}" class="project-card">
+        <div class="project-chrome">
+          <div class="project-chrome-dots" aria-hidden="true"><span></span><span></span><span></span></div>
+          <div class="project-chrome-url">heyi.am/{{ user.username }}/{{ p.slug }}</div>
+        </div>
+        <div class="project-body">
+          <h3 class="project-card-title">{{ p.title }}</h3>
+          <div class="project-stats-row">
+            <div class="project-stat-item">
+              <span class="project-stat-value">{{ p.totalSessions }}</span>
+              <span class="project-stat-label">Sessions</span>
+            </div>
+            <div class="project-stat-item">
+              <span class="project-stat-value">{{ p.totalDurationMinutes | formatDuration }}</span>
+              <span class="project-stat-label">Total time</span>
+            </div>
+            <div class="project-stat-item">
+              <span class="project-stat-value">{{ p.totalLoc | localeNumber }}</span>
+              <span class="project-stat-label">Lines changed</span>
+            </div>
+          </div>
+          {% if p.narrative %}
+          <div class="narrative-card">{{ p.narrative }}</div>
+          {% endif %}
+          {% if p.skills.size > 0 %}
+          <div class="chips">
+            {% for skill in p.skills %}
+            <span>{{ skill }}</span>
+            {% endfor %}
+          </div>
+          {% endif %}
+        </div>
+      </a>
+      {% endfor %}
+    </div>
+  </section>
+  {% endif %}
+
+  {%- comment -%} Source Mix {%- endcomment -%}
+  {% if sourceCounts.size > 0 %}
+  <section class="section" aria-label="Source breakdown">
+    <div class="section-tag">Source mix</div>
+    <h2 class="section-title">Tools of the trade</h2>
+    <p class="section-desc">How work is distributed across AI coding tools.</p>
+
+    <div class="split">
+      {% for src in sourceCounts %}
+      <div class="split-panel">
+        <h3>{{ src.tool }}</h3>
+        {% if totalSourceSessions > 0 %}
+        {% assign srcPct = src.count | times: 100 | divided_by: totalSourceSessions %}
+        {% else %}
+        {% assign srcPct = 0 %}
+        {% endif %}
+        <div class="split-stat">
+          <span class="split-stat-value{% if forloop.first %} hl-orange{% endif %}">{{ srcPct }}%</span>
+          <span class="split-stat-label">of sessions</span>
+        </div>
+        <div class="split-detail">
+          <span class="hl-orange">&#8594;</span> {{ src.count }} sessions total
+        </div>
+      </div>
+      {% endfor %}
+    </div>
+  </section>
+  {% endif %}
+
+  {%- comment -%} Counter animation script {%- endcomment -%}
+
+</div>

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

@@ -0,0 +1,242 @@
+<div class="heyiam-project kinetic" data-render-version="2" data-template="kinetic"{% if sessionBaseUrl %} data-session-base-url="{{ sessionBaseUrl }}"{% endif %} data-username="{{ user.username }}" data-project-slug="{{ project.slug }}">
+
+  {%- comment -%} Hero {%- endcomment -%}
+  <section class="hero hero--project" aria-label="Project header">
+    <div class="hero-bg-text" aria-hidden="true">{{ project.slug }}</div>
+    <div class="hero-content">
+      <div class="breadcrumb" aria-label="Breadcrumb">
+        <a href="/{{ user.username }}">{{ user.username }}</a>
+        <span class="breadcrumb-sep">/</span>
+        <span>{{ project.slug }}</span>
+      </div>
+      <div class="eyebrow">Project Case Study</div>
+      <h1 data-editable="title">{{ project.title }}</h1>
+      {% if project.repoUrl or project.projectUrl %}
+      <div class="hero-links">
+        {% if project.repoUrl %}
+        <a href="{{ project.repoUrl }}" target="_blank" rel="noopener">{{ project.repoUrl | stripProtocol }}</a>
+        {% endif %}
+        {% if project.projectUrl %}
+        <a href="{{ project.projectUrl }}" target="_blank" rel="noopener">{{ project.projectUrl | stripProtocol }}</a>
+        {% endif %}
+      </div>
+      {% endif %}
+    </div>
+  </section>
+
+  {%- comment -%} Stats row {%- endcomment -%}
+  <div class="stats-row stats-row--project" role="region" aria-label="Project statistics">
+    <div class="stat-item">
+      <span class="stat-value"><span class="counter" data-target="{{ project.totalSessions }}">0</span></span>
+      <span class="stat-label">Sessions</span>
+    </div>
+    <div class="stat-item">
+      <span class="stat-value"><span class="counter" data-target="{{ project.totalLoc }}" data-format="comma">0</span></span>
+      <span class="stat-label">Lines Changed</span>
+    </div>
+    <div class="stat-item">
+      <span class="stat-value"><span class="counter" data-target="{{ project.totalFilesChanged }}">0</span></span>
+      <span class="stat-label">Files</span>
+    </div>
+    {% if project.totalTokens %}
+    <div class="stat-item">
+      <span class="stat-value">{{ project.totalTokens | formatTokens }}</span>
+      <span class="stat-label">Tokens</span>
+    </div>
+    {% endif %}
+    {% if efficiencyMultiplier %}
+    <div class="stat-item stat-item--leverage">
+      <div class="leverage-row">
+        <span><span class="leverage-num">{{ project.totalDurationMinutes | formatDuration }}</span> <span class="leverage-sub">/ you</span></span>
+        <span><span class="leverage-num" style="color:var(--orange)">{{ project.totalAgentDurationMinutes | formatDuration }}</span> <span class="leverage-sub">/ agents</span></span>
+        <span><span class="leverage-num leverage-num--multi">{{ efficiencyMultiplier }}</span> <span class="leverage-sub">leverage</span></span>
+      </div>
+      {% assign totalCombined = project.totalDurationMinutes | plus: project.totalAgentDurationMinutes %}
+      {% if totalCombined > 0 %}
+      {% assign humanPct = project.totalDurationMinutes | times: 100 | divided_by: totalCombined %}
+      {% assign agentPct = 100 | minus: humanPct %}
+      <div class="leverage-bar">
+        <div class="leverage-bar__human" style="width: {{ humanPct }}%;"></div>
+        <div class="leverage-bar__agent" style="width: {{ agentPct }}%;"></div>
+      </div>
+      <div class="leverage-legend">
+        <span>you</span>
+        <span>agents</span>
+      </div>
+      {% endif %}
+    </div>
+    {% else %}
+    <div class="stat-item">
+      <span class="stat-value">{{ project.totalDurationMinutes | formatDuration }}</span>
+      <span class="stat-label">Time</span>
+    </div>
+    {% endif %}
+  </div>
+
+  {%- comment -%} Screenshot {%- endcomment -%}
+  {% if project.screenshotUrl %}
+  <section class="section section--flush" aria-label="Project screenshot">
+    <div class="browser-frame" data-editable="screenshot">
+      <div class="browser-frame__bar">
+        <div class="browser-frame__dot"></div>
+        <div class="browser-frame__dot"></div>
+        <div class="browser-frame__dot"></div>
+        <div class="browser-frame__url">Preview</div>
+      </div>
+      <div class="browser-frame__viewport">
+        <img src="{{ project.screenshotUrl }}" alt="{{ project.title }} screenshot">
+      </div>
+    </div>
+  </section>
+  {% endif %}
+
+  {%- comment -%} Narrative {%- endcomment -%}
+  {% if project.narrative %}
+  <section class="section" aria-label="Project narrative">
+    <div class="section-tag">Narrative</div>
+    <h2 class="section-title">The build story</h2>
+    <div class="narrative-card">
+      {{ project.narrative }}
+    </div>
+  </section>
+  {% endif %}
+
+  {%- comment -%} Work timeline chart {%- endcomment -%}
+  {% if sessionsJson %}
+  <section class="section section--flush" aria-label="Agent work timeline">
+    <div class="section-tag">Agent work</div>
+    <h2 class="section-title">Work timeline</h2>
+    <div class="timeline-container">
+      <div data-work-timeline data-sessions='{{ sessionsJson | raw }}'></div>
+    </div>
+  </section>
+  {% endif %}
+
+  {%- comment -%} Growth chart {%- endcomment -%}
+  {% if growthJson %}
+  <section class="section section--flush" aria-label="Growth over time">
+    <div class="section-tag">Growth</div>
+    <h2 class="section-title">Lines of code over time</h2>
+    <div class="growth-container">
+      <div data-growth-chart data-project-slug="{{ project.slug }}" data-total-loc="{{ project.totalLoc }}" data-total-files="{{ project.totalFilesChanged }}" data-sessions='{{ growthJson | raw }}'></div>
+    </div>
+  </section>
+  {% endif %}
+
+  {%- comment -%} Key decisions + Source breakdown {%- endcomment -%}
+  {% if arc.size > 0 or sourceCounts.size > 0 %}
+  <section class="section section--flush" aria-label="Decisions and sources">
+    <div class="split">
+      {% if arc.size > 0 %}
+      <div class="split-panel">
+        <h3>Key Decisions</h3>
+        {% for item in arc %}
+        <div class="decision-item">
+          <div class="decision-num">{{ item.phase | prepend: '0' | slice: -2, 2 }}</div>
+          <div class="decision-text">{{ item.description }}</div>
+        </div>
+        {% endfor %}
+      </div>
+      {% endif %}
+      {% if sourceCounts.size > 0 %}
+      <div class="split-panel">
+        <h3>Source Breakdown</h3>
+        {% assign totalSourceSessions = 0 %}
+        {% for src in sourceCounts %}
+          {% assign totalSourceSessions = totalSourceSessions | plus: src.count %}
+        {% endfor %}
+        {% for src in sourceCounts %}
+        <div class="source-item">
+          {% if forloop.first %}
+          <span class="source-name hl-orange">{{ src.tool }}</span>
+          {% else %}
+          <span class="source-name">{{ src.tool }}</span>
+          {% endif %}
+          <div class="source-bar-wrap">
+            {% if totalSourceSessions > 0 %}
+            {% assign srcPct = src.count | times: 100 | divided_by: totalSourceSessions | round %}
+            <div class="source-bar"><div class="source-fill" style="width: {{ srcPct }}%;{% unless forloop.first %} background: var(--text-3);{% endunless %}"></div></div>
+            {% endif %}
+          </div>
+          {% if totalSourceSessions > 0 %}
+          {% assign srcPctDisplay = src.count | times: 100 | divided_by: totalSourceSessions | round %}
+          <span class="source-pct">{{ srcPctDisplay }}%</span>
+          {% endif %}
+        </div>
+        <div style="font-family: var(--font-mono); font-size: 0.625rem; color: var(--text-3); padding-left: 0.25rem;">{{ src.count }} session{% if src.count != 1 %}s{% endif %}</div>
+        {% endfor %}
+      </div>
+      {% endif %}
+    </div>
+  </section>
+  {% endif %}
+
+  {%- comment -%} Phases {%- endcomment -%}
+  {% if arc.size > 0 %}
+  <section class="section section--flush" aria-label="Project phases">
+    <div class="section-tag">Phases</div>
+    <h2 class="section-title">Project arc</h2>
+    <div class="phases phases--large">
+      {% assign dot_colors = 'dot-orange,dot-blue,dot-green,dot-purple' | split: ',' %}
+      {% for item in arc %}
+      <div class="phase-item">
+        {% assign colorIdx = forloop.index0 | modulo: 4 %}
+        <div class="phase-dot {{ dot_colors[colorIdx] }}"></div>
+        <div>
+          <div class="phase-title">{{ item.title }}</div>
+          <div class="phase-desc">{{ item.description }}</div>
+        </div>
+      </div>
+      {% endfor %}
+    </div>
+  </section>
+  {% endif %}
+
+  {%- comment -%} Skills {%- endcomment -%}
+  {% if project.skills.size > 0 %}
+  <section class="section section--flush" aria-label="Skills used">
+    <div class="section-tag">Skills</div>
+    <h2 class="section-title">Technologies</h2>
+    <div class="chips">
+      {% for skill in project.skills %}
+      <span>{{ skill }}</span>
+      {% endfor %}
+    </div>
+  </section>
+  {% endif %}
+
+  {%- comment -%} Session cards {%- endcomment -%}
+  {% if featuredSessions.size > 0 %}
+  <section class="section section--flush" aria-label="Featured sessions">
+    <div class="section-tag">Sessions</div>
+    <h2 class="section-title">{{ featuredSessions.size }} featured session{% if featuredSessions.size != 1 %}s{% endif %}</h2>
+
+    <div class="sessions-grid">
+      {% for s in featuredSessions %}
+      <a href="{{ sessionBaseUrl }}/{{ s.slug }}{{ sessionSuffix }}" class="session-card">
+        <div class="session-chrome">
+          <div class="session-chrome-dots" aria-hidden="true"><span></span><span></span><span></span></div>
+          <div class="session-chrome-url">session {{ forloop.index }}</div>
+        </div>
+        <div class="session-body">
+          <h3 class="session-title">{{ s.title }}</h3>
+          <div class="session-meta">
+            <span class="session-meta-item"><span class="session-meta-value">{{ s.durationMinutes | formatDuration }}</span></span>
+            <span class="session-meta-item"><span class="session-meta-value">{{ s.locChanged | localeNumber }}</span> LOC</span>
+            {% if s.agentSummary %}
+            <span class="session-meta-item"><span class="session-meta-value">{{ s.agentSummary.agents.size }}</span> agents</span>
+            {% endif %}
+          </div>
+          {% if s.skills.size > 0 %}
+          <span class="session-tag">{{ s.skills | first }}</span>
+          {% endif %}
+        </div>
+      </a>
+      {% endfor %}
+    </div>
+  </section>
+  {% endif %}
+
+  {%- comment -%} Counter animation script {%- endcomment -%}
+
+</div>

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

@@ -0,0 +1,228 @@
+<div class="heyiam-session kinetic" data-render-version="2" data-template="kinetic">
+
+  {%- comment -%} Hero {%- endcomment -%}
+  <header class="hero hero--session" aria-label="Session header">
+    <div class="hero-content">
+      <div 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>{{ session.title }}</span>
+      </div>
+      <div class="eyebrow">Session Detail</div>
+      <h1>{{ session.title }}</h1>
+      <div class="hero-meta">
+        {% if session.recordedAt %}
+        <span><span class="hero-meta-value">{{ session.recordedAt | formatDate }}</span></span>
+        <span class="hero-meta-sep" aria-hidden="true">&middot;</span>
+        {% endif %}
+        {% if session.sourceTool %}
+        <span><span class="hero-meta-value">{{ session.sourceTool }}</span></span>
+        <span class="hero-meta-sep" aria-hidden="true">&middot;</span>
+        {% endif %}
+        <span><span class="hero-meta-value">{{ session.durationMinutes | formatDuration }}</span></span>
+        <span class="hero-meta-sep" aria-hidden="true">&middot;</span>
+        <span><span class="hero-meta-value">{{ session.turns }}</span> turns</span>
+        <span class="hero-meta-sep" aria-hidden="true">&middot;</span>
+        <span><span class="hero-meta-value">{{ session.locChanged | localeNumber }}</span> LOC</span>
+        <span class="hero-meta-sep" aria-hidden="true">&middot;</span>
+        <span><span class="hero-meta-value">{{ session.filesChanged }}</span> files</span>
+      </div>
+    </div>
+  </header>
+
+  {%- comment -%} Dev Take {%- endcomment -%}
+  {% if session.devTake %}
+  <div class="dev-take-section">
+    <div class="section-tag">Dev take</div>
+    <div class="narrative-card">
+      {{ session.devTake }}
+    </div>
+  </div>
+  {% endif %}
+
+  {%- comment -%} Main + Sidebar layout {%- endcomment -%}
+  <div class="content-layout">
+    {%- comment -%} Main content column {%- endcomment -%}
+    <div>
+      {%- comment -%} Execution Path (Beats) {%- endcomment -%}
+      {% if session.beats.size > 0 %}
+      <section class="execution-path" aria-label="Execution path">
+        <div class="section-tag">Execution path</div>
+        <h2 class="section-title">{{ session.beats.size }} beat{% if session.beats.size != 1 %}s{% endif %}</h2>
+
+        {% for beat in session.beats %}
+        <div class="beat">
+          <div class="beat-number" aria-hidden="true">{{ beat.stepNumber }}</div>
+          <div class="beat-content">
+            <div class="beat-title">{{ beat.title }}</div>
+            <div class="beat-desc">{{ beat.body }}</div>
+          </div>
+        </div>
+        {% endfor %}
+      </section>
+      {% endif %}
+
+      {%- comment -%} Q&A {%- endcomment -%}
+      {% if session.qaPairs.size > 0 %}
+      <section class="qa-section" aria-label="Questions and answers">
+        <div class="section-tag">Decisions</div>
+        <h2 class="section-title">Q&amp;A</h2>
+
+        {% for qa in session.qaPairs %}
+        <div class="qa-split">
+          <div class="qa-panel">
+            <div class="qa-label">Question</div>
+            <div class="qa-text">{{ qa.question }}</div>
+          </div>
+          <div class="qa-panel">
+            <div class="qa-label">Answer</div>
+            <div class="qa-text">{{ qa.answer }}</div>
+          </div>
+        </div>
+        {% endfor %}
+      </section>
+      {% endif %}
+
+      {%- comment -%} Narrative {%- endcomment -%}
+      {% if session.narrative %}
+      <section style="margin-bottom: 3rem;" aria-label="Session narrative">
+        <div class="section-tag">Narrative</div>
+        <div class="narrative-card">
+          {{ session.narrative }}
+        </div>
+      </section>
+      {% endif %}
+
+      {%- comment -%} Highlights {%- endcomment -%}
+      {% if session.highlights.size > 0 %}
+      <section style="margin-bottom: 3rem;" aria-label="Session highlights">
+        <div class="section-tag">Highlights</div>
+        <ul style="list-style: none; padding: 0;">
+          {% for h in session.highlights %}
+          <li style="font-size: 0.8125rem; color: var(--text-2); line-height: 1.7; padding: 0.375rem 0; border-bottom: 1px solid var(--border);">{{ h }}</li>
+          {% endfor %}
+        </ul>
+      </section>
+      {% endif %}
+
+      {%- comment -%} Agent Summary {%- endcomment -%}
+      {% if session.agentSummary %}
+      <section class="agent-section" aria-label="Agent summary">
+        <div class="section-tag">Agents</div>
+        <h2 class="section-title">{{ session.agentSummary.agents.size }} sub-session{% if session.agentSummary.agents.size != 1 %}s{% endif %}</h2>
+
+        {% assign maxAgentLoc = 0 %}
+        {% for agent in session.agentSummary.agents %}
+          {% if agent.loc_changed > maxAgentLoc %}
+            {% assign maxAgentLoc = agent.loc_changed %}
+          {% endif %}
+        {% endfor %}
+
+        {% assign agent_colors = '#0891b2,#059669,#7c3aed,#475569,#e11d48,#d97706' | split: ',' %}
+        {% for agent in session.agentSummary.agents %}
+        <div class="agent-bar-row">
+          <span class="agent-bar-label">{{ agent.role }}</span>
+          <div class="agent-bar-track">
+            {% if maxAgentLoc > 0 %}
+            {% assign barPct = agent.loc_changed | times: 100 | divided_by: maxAgentLoc %}
+            {% else %}
+            {% assign barPct = 0 %}
+            {% endif %}
+            {% assign colorIdx = forloop.index0 | modulo: 6 %}
+            <div class="agent-bar-fill" style="width: {{ barPct }}%; background: {{ agent_colors[colorIdx] }};"></div>
+          </div>
+          <span class="agent-bar-meta">{{ agent.duration_minutes }}m / {{ agent.loc_changed }} LOC</span>
+        </div>
+        {% endfor %}
+      </section>
+      {% endif %}
+    </div>
+
+    {%- comment -%} Sidebar {%- endcomment -%}
+    <aside class="sidebar" aria-label="Session details">
+      {%- comment -%} Tools Used {%- endcomment -%}
+      {% if session.toolBreakdown.size > 0 %}
+      <div class="sidebar-card">
+        <div class="sidebar-card-title">Tools Used</div>
+        <div class="tools-table" role="table" aria-label="Tool usage counts">
+          {% for t in session.toolBreakdown %}
+          <div class="tools-row" role="row">
+            <span class="tools-name" role="cell">{{ t.tool }}</span>
+            <span class="tools-count" role="cell">{{ t.count }}</span>
+          </div>
+          {% endfor %}
+        </div>
+      </div>
+      {% endif %}
+
+      {%- comment -%} Files Changed {%- endcomment -%}
+      {% if session.topFiles.size > 0 %}
+      <div class="sidebar-card">
+        <div class="sidebar-card-title">Files Changed</div>
+        {% for f in session.topFiles %}
+        <div class="files-row">
+          <span class="files-name">{{ f.path }}</span>
+          <span class="files-diff"><span class="files-adds">+{{ f.additions }}</span>{% if f.deletions > 0 %} <span class="files-dels">-{{ f.deletions }}</span>{% endif %}</span>
+        </div>
+        {% endfor %}
+      </div>
+      {% endif %}
+
+      {%- comment -%} Skills {%- endcomment -%}
+      {% if session.skills.size > 0 %}
+      <div class="sidebar-card">
+        <div class="sidebar-card-title">Skills</div>
+        <div class="chips">
+          {% for skill in session.skills %}
+          <span>{{ skill }}</span>
+          {% endfor %}
+        </div>
+      </div>
+      {% endif %}
+
+      {%- comment -%} Session Stats {%- endcomment -%}
+      <div class="sidebar-card">
+        <div class="sidebar-card-title">Stats</div>
+        <div class="tools-table">
+          <div class="tools-row">
+            <span class="tools-name">Duration</span>
+            <span class="tools-count" style="color: var(--text);">{{ session.durationMinutes | formatDuration }}</span>
+          </div>
+          {% if session.wallClockMinutes %}
+          <div class="tools-row">
+            <span class="tools-name">Wall clock</span>
+            <span class="tools-count" style="color: var(--text);">{{ session.wallClockMinutes | formatDuration }}</span>
+          </div>
+          {% endif %}
+          <div class="tools-row">
+            <span class="tools-name">Turns</span>
+            <span class="tools-count" style="color: var(--text);">{{ session.turns }}</span>
+          </div>
+          <div class="tools-row">
+            <span class="tools-name">LOC</span>
+            <span class="tools-count" style="color: var(--text);">{{ session.locChanged | localeNumber }}</span>
+          </div>
+          <div class="tools-row">
+            <span class="tools-name">Files</span>
+            <span class="tools-count" style="color: var(--text);">{{ session.filesChanged }}</span>
+          </div>
+          {% if session.sourceTool %}
+          <div class="tools-row">
+            <span class="tools-name">Source</span>
+            <span class="tools-count">{{ session.sourceTool }}</span>
+          </div>
+          {% endif %}
+        </div>
+      </div>
+    </aside>
+  </div>
+
+  {%- comment -%} Agent bar animation script {%- endcomment -%}
+  {% if session.agentSummary %}
+  {% endif %}
+
+</div>