heyiam 0.2.29 → 0.3.1

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

@@ -0,0 +1,203 @@
+<div class="heyiam-portfolio canvas" data-render-version="2" data-template="canvas" data-username="{{ user.username }}">
+
+  {%- comment -%} Hero Split: Magazine Spread {%- endcomment -%}
+  {% if hasProfile %}
+  <section class="hero-split fade-in" aria-label="Introduction">
+    {% if user.photoUrl %}
+    <div class="hero-photo-container">
+      <img
+        src="{{ user.photoUrl }}"
+        alt="{{ user.displayName }}"
+        class="hero-photo"
+        loading="eager"
+       data-portfolio-field="photoBase64"{% unless user.photoUrl %} data-portfolio-empty="true"{% endunless %}>
+    </div>
+    {% endif %}
+
+    <div class="hero-content">
+      {% if user.displayName != blank %}
+      <h1 class="hero__name" data-portfolio-field="displayName">{{ user.displayName }}</h1>
+      {% endif %}
+      {% if user.location %}
+      <p class="hero__location" data-portfolio-field="location">{{ user.location }}</p>
+      {% endif %}
+
+      {% if user.bio %}
+      <p class="hero__bio" data-portfolio-field="bio">{{ user.bio }}</p>
+      {% endif %}
+
+      {%- comment -%} Contact Links {%- endcomment -%}
+      <ul class="hero__links" aria-label="Contact and social links">
+        <li data-portfolio-field="email"{% unless user.email %} data-portfolio-empty="true"{% endunless %}>
+          <a href="{% if user.email %}mailto:{{ user.email }}{% endif %}">
+            <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>
+            <span data-portfolio-text>{{ user.email }}</span>
+          </a>
+        </li>
+        <li data-portfolio-field="linkedinUrl"{% unless user.linkedinUrl %} data-portfolio-empty="true"{% endunless %}>
+          <a href="{% if user.linkedinUrl %}{{ user.linkedinUrl }}{% endif %}" 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>
+        </li>
+        <li data-portfolio-field="githubUrl"{% unless user.githubUrl %} data-portfolio-empty="true"{% endunless %}>
+          <a href="{% if user.githubUrl %}{{ user.githubUrl }}{% endif %}" 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>
+        </li>
+        <li data-portfolio-field="twitterHandle"{% unless user.twitterHandle %} data-portfolio-empty="true"{% endunless %}>
+          <a href="{% if user.twitterHandle %}https://x.com/{{ user.twitterHandle }}{% endif %}" 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>
+            <span data-portfolio-text>{% if user.twitterHandle %}@{{ user.twitterHandle }}{% endif %}</span>
+          </a>
+        </li>
+        <li data-portfolio-field="websiteUrl"{% unless user.websiteUrl %} data-portfolio-empty="true"{% endunless %}>
+          <a href="{% if user.websiteUrl %}{{ user.websiteUrl }}{% endif %}" target="_blank" rel="noopener">
+            <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" aria-hidden="true"><circle cx="12" cy="12" r="10"/><path d="M2 12h20M12 2a15.3 15.3 0 0 1 4 10 15.3 15.3 0 0 1-4 10 15.3 15.3 0 0 1-4-10 15.3 15.3 0 0 1 4-10z"/></svg>
+            <span data-portfolio-text>{{ user.websiteUrl | stripProtocol }}</span>
+          </a>
+        </li>
+        {% if user.resumeUrl %}
+        <li>
+          <a href="{{ user.resumeUrl }}">
+            <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>
+        </li>
+        {% endif %}
+      </ul>
+
+      <hr class="hero-divider" aria-hidden="true">
+
+      {%- comment -%} Hero Stats {%- endcomment -%}
+      <div class="hero-stats" aria-label="Portfolio statistics">
+        <div class="hero-stat">
+          <div class="hero-stat__number">{{ projects.size }}</div>
+          <div class="hero-stat__label">Projects</div>
+        </div>
+        <div class="hero-stat">
+          <div class="hero-stat__number">{{ totalSessions }}</div>
+          <div class="hero-stat__label">Sessions</div>
+        </div>
+        <div class="hero-stat">
+          <div class="hero-stat__number">{{ totalLoc | formatLoc }}</div>
+          <div class="hero-stat__label">Lines Changed</div>
+        </div>
+        {% if efficiencyMultiplier %}
+        <div class="hero-stat">
+          <div class="hero-stat__number">{{ totalDurationMinutes | formatDuration }}</div>
+          <div class="hero-stat__label">{{ durationLabel }}</div>
+        </div>
+        {% else %}
+        <div class="hero-stat">
+          <div class="hero-stat__number">{{ totalDurationMinutes | formatDuration }}</div>
+          <div class="hero-stat__label">Time</div>
+        </div>
+        {% endif %}
+      </div>
+    </div>
+  </section>
+  {% endif %}
+
+  {%- comment -%} Below the fold: gallery content {%- endcomment -%}
+  <div class="page-content">
+
+    {%- comment -%} Leverage {%- endcomment -%}
+    {% if efficiencyMultiplier %}
+    <section class="canvas-leverage" aria-label="AI leverage" role="figure">
+      <div class="canvas-leverage__multi">{{ efficiencyMultiplier }}&times;</div>
+      <div class="canvas-leverage__context">{{ totalDurationMinutes | formatDuration }} you &middot; <span style="color:var(--canvas-accent)">{{ totalAgentDurationMinutes | formatDuration }} agents</span></div>
+      <div class="canvas-leverage__underline"></div>
+    </section>
+    {% endif %}
+
+    {%- comment -%} Projects {%- endcomment -%}
+    {% if projects.size > 0 %}
+    <section class="projects-section" aria-label="Projects">
+      <h2 class="section-title fade-in fade-in-d2">Projects</h2>
+
+      <div class="projects-grid">
+        {% for p in projects %}
+        <a href="/{{ user.username }}/{{ p.slug }}" class="project-card fade-in fade-in-d3">
+          <div class="project-card__header">
+            <h3 class="project-card__title">{{ p.title }}</h3>
+            <span class="project-card__stats">{{ p.totalSessions }} sessions &middot; {{ p.totalDurationMinutes | formatDuration }} &middot; {{ p.totalLoc | formatLoc }} LOC</span>
+          </div>
+          {% if p.narrative %}
+          <p class="project-card__narrative">{{ p.narrative }}</p>
+          {% endif %}
+          <div class="project-card__footer">
+            {% if p.skills.size > 0 %}
+            <div class="project-card__skills">
+              {% for skill in p.skills %}
+              <span class="skill-pill">{{ skill }}</span>
+              {% endfor %}
+            </div>
+            {% endif %}
+            {% 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">
+              <div class="source-bar__track">
+                {% assign pFirstPct = p.sourceCounts[0].count | times: 100.0 | divided_by: pTotalSrc | round %}
+                <div class="source-bar__fill" style="width: {{ pFirstPct }}%"></div>
+              </div>
+              <span>{{ p.sourceCounts[0].tool }} {{ pFirstPct }}%</span>
+            </div>
+            {% endif %}
+            {% endif %}
+          </div>
+        </a>
+        {% endfor %}
+      </div>
+    </section>
+    {% endif %}
+
+    {%- comment -%} Skills Overview {%- endcomment -%}
+    {% if allSkills.size > 0 %}
+    <section class="skills-overview fade-in fade-in-d3" aria-label="All skills">
+      <h2 class="section-title" style="text-align: center;">Skills</h2>
+      <div class="skills-cloud">
+        {% for skill in allSkills %}
+        {% if skill.projectCount > 1 %}
+        <span class="skill-pill skill-pill--lg">{{ skill.name }}</span>
+        {% else %}
+        <span class="skill-pill skill-pill--lg skill-pill--secondary">{{ skill.name }}</span>
+        {% endif %}
+        {% endfor %}
+      </div>
+    </section>
+    {% endif %}
+
+    {%- comment -%} Source Breakdown {%- endcomment -%}
+    {% if sourceCounts.size > 0 %}
+    <section class="source-overview fade-in fade-in-d4" aria-label="Source tool breakdown">
+      <h2 class="section-title" style="text-align: center;">Source Breakdown</h2>
+      <div class="source-overview__visual">
+        <div class="source-bar" style="height: 20px; border-radius: 10px; overflow: hidden; display: flex;">
+          {% for src in sourceCounts %}
+          {% assign srcPct = src.count | times: 100.0 | divided_by: totalSourceSessions | round %}
+          <div class="source-bar__fill" style="width: {{ srcPct }}%; {% if forloop.index > 1 %}background: var(--canvas-gray, #d4d4d8);{% endif %}"></div>
+          {% endfor %}
+        </div>
+        <div class="source-legend">
+          {% for src in sourceCounts %}
+          {% assign srcPct = src.count | times: 100.0 | divided_by: totalSourceSessions | round %}
+          <div class="source-legend__item">
+            <span class="source-legend__dot" style="background: {% if forloop.first %}var(--canvas-accent){% else %}var(--canvas-gray, #d4d4d8){% endif %}"></span>
+            <div>
+              <div class="source-legend__value">{{ srcPct }}%</div>
+              <div class="source-legend__label">{{ src.tool }}</div>
+            </div>
+          </div>
+          {% endfor %}
+        </div>
+      </div>
+    </section>
+    {% endif %}
+
+  </div>
+
+</div>

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

@@ -0,0 +1,235 @@
+<div class="heyiam-project canvas" data-render-version="2" data-template="canvas"{% if sessionBaseUrl %} data-session-base-url="{{ sessionBaseUrl }}"{% endif %} data-username="{{ user.username }}" data-project-slug="{{ project.slug }}">
+
+  <div class="page-wrapper">
+
+    {%- comment -%} Breadcrumb {%- endcomment -%}
+    <nav class="breadcrumb fade-in" aria-label="Breadcrumb">
+      <a href="/{{ user.username }}">{{ user.username }}</a>
+      <span class="breadcrumb__sep">/</span>
+      <span>{{ project.slug }}</span>
+    </nav>
+
+    {%- comment -%} Project Hero {%- endcomment -%}
+    <section class="project-hero fade-in fade-in-d1" aria-label="Project overview">
+      <h1 class="project-hero__title" data-editable="title">{{ project.title }}</h1>
+      {% if project.repoUrl or project.projectUrl %}
+      <div class="project-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 %}
+    </section>
+
+    {%- comment -%} Screenshot {%- endcomment -%}
+    {% if project.screenshotUrl %}
+    <div class="screenshot fade-in fade-in-d2" data-editable="screenshot">
+      <div class="screenshot__bar" aria-hidden="true">
+        <div class="screenshot__dot"></div>
+        <div class="screenshot__dot"></div>
+        <div class="screenshot__dot"></div>
+        <div class="screenshot__url">Preview</div>
+      </div>
+      <div class="screenshot__viewport">
+        <img src="{{ project.screenshotUrl }}" alt="{{ project.title }} screenshot" class="screenshot__image">
+      </div>
+    </div>
+    {% endif %}
+
+    {%- comment -%} Narrative {%- endcomment -%}
+    {% if project.narrative %}
+    <section class="narrative fade-in fade-in-d3" aria-label="Project narrative">
+      <h2 class="section-title">The Story</h2>
+      <p>{{ project.narrative }}</p>
+    </section>
+    {% endif %}
+
+    {%- comment -%} Stats {%- endcomment -%}
+    <section class="project-stats fade-in fade-in-d4" aria-label="Project statistics">
+      <div class="stat">
+        <div class="stat__number">{{ project.totalSessions }}</div>
+        <div class="stat__label">Sessions</div>
+      </div>
+      <div class="stat">
+        <div class="stat__number">{{ project.totalLoc | localeNumber }}</div>
+        <div class="stat__label">Lines Changed</div>
+      </div>
+      <div class="stat">
+        <div class="stat__number">{{ project.totalFilesChanged }}</div>
+        <div class="stat__label">Files</div>
+      </div>
+      {% if project.totalTokens %}
+      <div class="stat">
+        <div class="stat__number">{{ project.totalTokens | formatTokens }}</div>
+        <div class="stat__label">Tokens</div>
+      </div>
+      {% endif %}
+      {% if efficiencyMultiplier %}
+      <div class="stat">
+        <div class="stat__number">{{ project.totalDurationMinutes | formatDuration }}</div>
+        <div class="stat__label">{{ durationLabel }}</div>
+      </div>
+      {% else %}
+      <div class="stat">
+        <div class="stat__number">{{ project.totalDurationMinutes | formatDuration }}</div>
+        <div class="stat__label">Time</div>
+      </div>
+      {% endif %}
+    </section>
+
+    {%- comment -%} Leverage {%- endcomment -%}
+    {% if efficiencyMultiplier %}
+    <section class="canvas-leverage" aria-label="AI leverage" role="figure">
+      <div class="canvas-leverage__multi">{{ efficiencyMultiplier }}&times;</div>
+      <div class="canvas-leverage__context">{{ project.totalDurationMinutes | formatDuration }} you &middot; <span style="color:var(--canvas-accent)">{{ project.totalAgentDurationMinutes | formatDuration }} agents</span></div>
+      <div class="canvas-leverage__underline"></div>
+    </section>
+    {% endif %}
+
+    {%- comment -%} Phase Timeline {%- endcomment -%}
+    {% if arc.size > 0 %}
+    <section class="phases-section fade-in fade-in-d5" aria-label="Project phases">
+      <h2 class="section-title">Phases</h2>
+      <div class="phases-scroll" role="list">
+        {% for item in arc %}
+        <div class="phase-card" role="listitem">
+          <div class="phase-card__number">{% if item.phase < 10 %}0{% endif %}{{ item.phase }}</div>
+          <div class="phase-card__name">{{ item.title }}</div>
+          {% if item.dates %}
+          <div class="phase-card__dates">{{ item.dates }}</div>
+          {% endif %}
+          <div class="phase-card__desc">{{ item.description }}</div>
+        </div>
+        {% endfor %}
+      </div>
+    </section>
+    {% endif %}
+
+    {%- comment -%} Work Timeline Chart (CSS-only SVG) {%- endcomment -%}
+    {% if featuredSessions.size > 0 %}
+    <section class="timeline-section fade-in fade-in-d5" aria-label="Work timeline">
+      <h2 class="section-title">Work Timeline</h2>
+      <div class="chart-container">
+        {% assign maxLoc = 0 %}
+        {% for s in featuredSessions %}
+          {% if s.locChanged > maxLoc %}{% assign maxLoc = s.locChanged %}{% endif %}
+        {% endfor %}
+        {% assign barCount = featuredSessions.size %}
+        {% assign chartWidth = barCount | times: 80 | plus: 60 %}
+        {% assign chartHeight = 260 %}
+        {% assign barMaxHeight = 200 %}
+        <svg viewBox="0 0 {{ chartWidth }} {{ chartHeight }}" aria-label="Bar chart showing lines of code per session">
+          <title>Work timeline chart showing LOC per session</title>
+          {%- comment -%} Grid lines {%- endcomment -%}
+          <line x1="40" y1="25" x2="{{ chartWidth | minus: 20 }}" y2="25" stroke="#f4f4f5" stroke-width="1"/>
+          <line x1="40" y1="75" x2="{{ chartWidth | minus: 20 }}" y2="75" stroke="#f4f4f5" stroke-width="1"/>
+          <line x1="40" y1="125" x2="{{ chartWidth | minus: 20 }}" y2="125" stroke="#f4f4f5" stroke-width="1"/>
+          <line x1="40" y1="175" x2="{{ chartWidth | minus: 20 }}" y2="175" stroke="#f4f4f5" stroke-width="1"/>
+          <line x1="40" y1="225" x2="{{ chartWidth | minus: 20 }}" y2="225" stroke="#e4e4e7" stroke-width="1"/>
+          {%- comment -%} Bars {%- endcomment -%}
+          {% for s in featuredSessions %}
+            {% if maxLoc > 0 %}
+              {% assign barHeight = s.locChanged | times: barMaxHeight | divided_by: maxLoc %}
+            {% else %}
+              {% assign barHeight = 0 %}
+            {% endif %}
+            {% assign barY = 225 | minus: barHeight %}
+            {% assign barX = forloop.index0 | times: 80 | plus: 55 %}
+            {% assign labelX = barX | plus: 28 %}
+            <rect x="{{ barX }}" y="{{ barY }}" width="56" height="{{ barHeight }}" rx="8" fill="var(--canvas-accent)"/>
+            <text x="{{ labelX }}" y="245" font-family="IBM Plex Mono, monospace" font-size="9" fill="#a1a1aa" text-anchor="middle">S{{ forloop.index }}</text>
+          {% endfor %}
+        </svg>
+      </div>
+    </section>
+    {% endif %}
+
+    {%- comment -%} Skills {%- endcomment -%}
+    {% if project.skills.size > 0 %}
+    <section class="skills-section fade-in fade-in-d6" aria-label="Technologies used">
+      <h2 class="section-title">Skills</h2>
+      <div class="skills-list">
+        {% for skill in project.skills %}
+        <span class="skill-pill skill-pill--lg">{{ skill }}</span>
+        {% endfor %}
+      </div>
+    </section>
+    {% endif %}
+
+    {%- comment -%} Key Decisions {%- endcomment -%}
+    {% if arc.size > 0 %}
+    <section class="decisions-section fade-in fade-in-d6" aria-label="Key decisions">
+      <h2 class="section-title">Key Decisions</h2>
+      <ol class="decisions-list">
+        {% for item in arc %}
+        <li>
+          <span class="decision-num">{{ item.phase }}</span>
+          <span class="decision-text">{{ item.description }}</span>
+        </li>
+        {% endfor %}
+      </ol>
+    </section>
+    {% endif %}
+
+    {%- comment -%} Source Breakdown {%- endcomment -%}
+    {% if sourceCounts.size > 0 %}
+    <section class="source-section fade-in fade-in-d7" aria-label="Source breakdown">
+      <h2 class="section-title">Source Breakdown</h2>
+      <div class="source-visual">
+        {% if sourceCounts.size > 0 %}
+        <div class="source-bar-large">
+          {% assign firstSrc = sourceCounts | first %}
+          {% assign firstPct = firstSrc.count | times: 100.0 | divided_by: project.totalSessions | round %}
+          <div class="source-bar-large__fill" style="width: {{ firstPct }}%"></div>
+        </div>
+        {% endif %}
+        <div class="source-legend">
+          {% for src in sourceCounts %}
+          <div class="source-legend__item">
+            {% if forloop.first %}
+            <span class="source-legend__dot" style="background: var(--canvas-accent)"></span>
+            {% else %}
+            <span class="source-legend__dot" style="background: var(--canvas-gray)"></span>
+            {% endif %}
+            {% assign srcPct = src.count | times: 100.0 | divided_by: project.totalSessions | round %}
+            {{ src.tool }} {{ srcPct }}%
+          </div>
+          {% endfor %}
+        </div>
+      </div>
+    </section>
+    {% endif %}
+
+    {%- comment -%} Featured Sessions {%- endcomment -%}
+    {% if featuredSessions.size > 0 %}
+    <section class="sessions-section fade-in fade-in-d7" aria-label="Featured sessions">
+      <h2 class="section-title">Sessions</h2>
+      <div class="sessions-grid">
+        {% for s in featuredSessions %}
+        <a href="{{ sessionBaseUrl }}/{{ s.slug }}{{ sessionSuffix }}" class="session-card">
+          {% if s.skills.size > 0 %}
+          <span class="session-card__tag">{{ s.skills | first }}</span>
+          {% endif %}
+          <h3 class="session-card__title">{{ s.title }}</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>
+          <div class="session-card__preview">
+            <div class="session-card__preview-fill" style="width: {{ s.durationMinutes | times: 100 | divided_by: 120 | at_most: 100 }}%; background: var(--canvas-accent)"></div>
+          </div>
+        </a>
+        {% endfor %}
+      </div>
+    </section>
+    {% endif %}
+
+  </div>
+
+</div>

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

@@ -0,0 +1,223 @@
+<div class="heyiam-session canvas" data-render-version="2" data-template="canvas">
+
+  <div class="page-wrapper">
+
+    {%- comment -%} Breadcrumb {%- endcomment -%}
+    <nav class="breadcrumb fade-in" 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>
+    </nav>
+
+    {%- comment -%} Session Header {%- endcomment -%}
+    <header class="session-header fade-in fade-in-d1">
+      <h1 class="session-header__title">{{ session.title }}</h1>
+      <div class="session-header__meta">
+        {% if session.recordedAt %}
+        <span class="session-header__meta-item">
+          <span class="session-header__meta-dot"></span>
+          {{ session.recordedAt | formatDate }}
+        </span>
+        {% endif %}
+        {% if session.sourceTool %}
+        <span class="session-header__meta-item">{{ session.sourceTool }}</span>
+        {% endif %}
+        <span class="session-header__meta-item">{{ session.durationMinutes | formatDuration }}</span>
+        <span class="session-header__meta-item">{{ session.turns }} turns</span>
+        <span class="session-header__meta-item">{{ session.locChanged | localeNumber }} LOC</span>
+        <span class="session-header__meta-item">{{ session.filesChanged }} files</span>
+      </div>
+    </header>
+
+    {%- comment -%} Dev Take {%- endcomment -%}
+    {% if session.devTake %}
+    <section class="dev-take fade-in fade-in-d2" aria-label="Developer reflection">
+      <div class="dev-take__label">Dev Take</div>
+      <p class="dev-take__text">{{ session.devTake }}</p>
+    </section>
+    {% endif %}
+
+    {%- comment -%} Two-column layout: main + sidebar {%- endcomment -%}
+    <div class="content-layout">
+      {%- comment -%} Main content column {%- endcomment -%}
+      <div class="main-content">
+
+        {%- comment -%} Session Stats {%- endcomment -%}
+        <section class="session-stats fade-in fade-in-d3" aria-label="Session statistics">
+          <div class="stat">
+            <div class="stat__number">{{ session.durationMinutes }}</div>
+            <div class="stat__label">Minutes</div>
+          </div>
+            {% if session.wallClockMinutes %}
+            <div class="stat">
+              <div class="stat__number">{{ session.wallClockMinutes }}</div>
+              <div class="stat__label">Wall clock</div>
+            </div>
+            {% endif %}
+          <div class="stat">
+            <div class="stat__number">{{ session.locChanged | localeNumber }}</div>
+            <div class="stat__label">Lines of code</div>
+          </div>
+          <div class="stat">
+            <div class="stat__number">{{ session.turns }}</div>
+            <div class="stat__label">Turns</div>
+          </div>
+          <div class="stat">
+            <div class="stat__number">{{ session.filesChanged }}</div>
+            <div class="stat__label">Files</div>
+          </div>
+        </section>
+
+        {%- comment -%} Narrative {%- endcomment -%}
+        {% if session.narrative %}
+        <section class="narrative-section fade-in fade-in-d3" aria-label="Session narrative">
+          <h2 class="section-title">Narrative</h2>
+          <p class="narrative-text">{{ session.narrative }}</p>
+        </section>
+        {% endif %}
+
+        {%- comment -%} Highlights {%- endcomment -%}
+        {% if session.highlights.size > 0 %}
+        <section class="highlights-section fade-in fade-in-d3" aria-label="Highlights">
+          <h2 class="section-title">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="beats-section fade-in fade-in-d4" aria-label="Execution path">
+          <h2 class="section-title">Execution Path</h2>
+          <ol class="beats-list">
+            {% for beat in session.beats %}
+            <li class="beat-item">
+              <span class="beat-dot">{{ beat.stepNumber }}</span>
+              <div class="beat-content">
+                <h3 class="beat-content__title">{{ beat.title }}</h3>
+                <p class="beat-content__desc">{{ beat.body }}</p>
+              </div>
+            </li>
+            {% endfor %}
+          </ol>
+        </section>
+        {% endif %}
+
+        {%- comment -%} Q&A {%- endcomment -%}
+        {% if session.qaPairs.size > 0 %}
+        <section class="qa-section fade-in fade-in-d5" aria-label="Questions and answers">
+          <h2 class="section-title">Q&amp;A</h2>
+          <div class="qa-list">
+            {% for qa in session.qaPairs %}
+            <article class="qa-item">
+              <h3 class="qa-question">{{ qa.question }}</h3>
+              <p class="qa-answer">{{ qa.answer }}</p>
+            </article>
+            {% endfor %}
+          </div>
+        </section>
+        {% endif %}
+
+        {%- comment -%} Agent Summary {%- endcomment -%}
+        {% if session.agentSummary %}
+        <section class="agents-section fade-in fade-in-d6" aria-label="Agent roles">
+          <h2 class="section-title">Agent Summary</h2>
+          <div class="agents-chart">
+            {% assign agent_colors = '#0891b2,#059669,#7c3aed,#475569,#e11d48,#d97706' | split: ',' %}
+            {% assign maxAgentLoc = 0 %}
+            {% for agent in session.agentSummary.agents %}
+              {% if agent.loc_changed > maxAgentLoc %}
+                {% assign maxAgentLoc = agent.loc_changed %}
+              {% endif %}
+            {% endfor %}
+
+            {% 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 %}
+
+            <div class="agents-legend">
+              {% for agent in session.agentSummary.agents %}
+              {% assign colorIdx = forloop.index0 | modulo: 6 %}
+              <div class="agent-legend-item">
+                <span class="agent-legend-dot" style="background: {{ agent_colors[colorIdx] }}"></span>
+                {{ agent.role }}
+              </div>
+              {% endfor %}
+            </div>
+          </div>
+        </section>
+        {% endif %}
+      </div>
+
+      {%- comment -%} Sidebar {%- endcomment -%}
+      <aside class="sidebar fade-in fade-in-d3" aria-label="Session details">
+        {%- comment -%} Tools Used {%- endcomment -%}
+        {% if session.toolBreakdown.size > 0 %}
+        <div class="sidebar-section">
+          <h2 class="sidebar-title">Tools Used</h2>
+          <ul class="tools-list">
+            {% for t in session.toolBreakdown %}
+            <li>
+              <span class="tool-name">{{ t.tool }}</span>
+              <span class="tool-count">{{ t.count }}</span>
+            </li>
+            {% endfor %}
+          </ul>
+        </div>
+        {% endif %}
+
+        {%- comment -%} Files Changed {%- endcomment -%}
+        {% if session.topFiles.size > 0 %}
+        <div class="sidebar-section">
+          <h2 class="sidebar-title">Files Changed</h2>
+          <ul class="files-list">
+            {% for f in session.topFiles %}
+            <li>
+              <span class="file-path">{{ f.path }}</span>
+              <span class="file-diff">+{{ f.additions }}{% if f.deletions > 0 %} -{{ f.deletions }}{% endif %}</span>
+            </li>
+            {% endfor %}
+          </ul>
+        </div>
+        {% endif %}
+
+        {%- comment -%} Skills {%- endcomment -%}
+        {% if session.skills.size > 0 %}
+        <div class="sidebar-section">
+          <h2 class="sidebar-title">Skills</h2>
+          <div class="sidebar-skills">
+            {% for skill in session.skills %}
+            <span class="sidebar-skill">{{ skill }}</span>
+            {% endfor %}
+          </div>
+        </div>
+        {% endif %}
+      </aside>
+    </div>
+
+  </div>
+
+  {%- comment -%} Agent bar animation script {%- endcomment -%}
+  {% if session.agentSummary %}
+  {% endif %}
+
+</div>