heyiam 0.2.29 → 0.3.1

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

@@ -0,0 +1,152 @@
+<div class="heyiam-portfolio circuit" data-render-version="2" data-template="circuit" data-username="{{ user.username }}">
+
+  {%- comment -%} Hero {%- endcomment -%}
+  {% if hasProfile %}
+  <section class="hero fade-in" aria-label="Profile">
+    <svg class="hero-trace" viewBox="0 0 200 200" aria-hidden="true">
+      <path d="M200 20 H160 V60 H120 V100 H80 V140 H40 V180"/>
+      <path d="M180 0 V40 H140 V80 H100"/>
+      <circle cx="200" cy="20" r="3"/>
+      <circle cx="120" cy="100" r="3"/>
+      <circle cx="40" cy="180" r="3"/>
+      <circle cx="100" cy="80" r="3"/>
+    </svg>
+    <div class="hero-profile">
+      {% if user.photoUrl %}
+      <div class="hero-photo-wrap">
+        <img src="{{ user.photoUrl }}" alt="{{ user.displayName }}" class="hero-photo" width="120" height="150" data-portfolio-field="photoBase64"{% unless user.photoUrl %} data-portfolio-empty="true"{% endunless %}>
+        <span class="pad-bl" aria-hidden="true"></span>
+        <span class="pad-br" aria-hidden="true"></span>
+      </div>
+      {% endif %}
+      <div class="hero-info">
+        {% if user.displayName != blank %}
+        <h1 data-portfolio-field="displayName">{{ user.displayName }}</h1>
+        {% endif %}
+        {% if user.bio %}
+        <p class="hero-bio" data-portfolio-field="bio">{{ user.bio }}</p>
+        {% endif %}
+        {% if user.location %}
+        <p class="hero-location" data-portfolio-field="location">{{ user.location }}</p>
+        {% endif %}
+        <ul class="hero-contact" 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"><rect x="2" y="4" width="20" height="16" rx="2"/><path d="m2 4 10 8 10-8"/></svg>{{ user.email }}</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"><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"><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"><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></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"><path d="M12 2C8.13 2 5 5.13 5 9c0 5.25 7 13 7 13s7-7.75 7-13c0-3.87-3.13-7-7-7z"/><circle cx="12" cy="9" r="2.5"/></svg>{{ user.websiteUrl | stripProtocol }}</a></li>
+        </ul>
+        {% if user.resumeUrl %}
+        <a href="{{ user.resumeUrl }}" class="hero-resume"><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>Download Resume</a>
+        {% endif %}
+      </div>
+    </div>
+  </section>
+  {% endif %}
+
+  {%- comment -%} Stats {%- endcomment -%}
+  <section class="stat-chips fade-in" aria-label="Aggregate statistics">
+    <div class="stat-chip" role="group" aria-label="Projects">
+      <span class="stat-chip-value">{{ projects.size }}</span>
+      <span class="stat-chip-label">Projects</span>
+    </div>
+    <div class="stat-chip" role="group" aria-label="Sessions">
+      <span class="stat-chip-value">{{ totalSessions }}</span>
+      <span class="stat-chip-label">Sessions</span>
+    </div>
+    {% if efficiencyMultiplier %}
+    <div class="stat-chip stat-chip--leverage" role="group" aria-label="{{ totalDurationMinutes | formatDuration }} you, {{ totalAgentDurationMinutes | formatDuration }} agents, {{ efficiencyMultiplier }} leverage">
+      <div class="leverage-row">
+        <span><span class="lev-val">{{ totalDurationMinutes | formatDuration }}</span> <span class="lev-lbl">you</span></span>
+        <span><span class="lev-val lev-val--agent">{{ totalAgentDurationMinutes | formatDuration }}</span> <span class="lev-lbl">agents</span></span>
+        <span><span class="lev-val lev-val--multi">{{ efficiencyMultiplier }}</span></span>
+      </div>
+      {% assign totalCombined = totalDurationMinutes | plus: totalAgentDurationMinutes %}
+      {% if totalCombined > 0 %}
+      {% assign humanPct = totalDurationMinutes | times: 100 | divided_by: totalCombined | round %}
+      {% assign agentPct = 100 | minus: humanPct %}
+      <div class="circuit-leverage-bar">
+        <div class="circuit-leverage-bar__human" style="width: {{ humanPct }}%"></div>
+        <div class="circuit-leverage-bar__agent" style="width: {{ agentPct }}%"></div>
+      </div>
+      {% endif %}
+    </div>
+    {% else %}
+    <div class="stat-chip" role="group" aria-label="Time">
+      <span class="stat-chip-value">{{ totalDurationMinutes | formatDuration }}</span>
+      <span class="stat-chip-label">Time</span>
+    </div>
+    {% endif %}
+    <div class="stat-chip" role="group" aria-label="Lines changed">
+      <span class="stat-chip-value">{{ totalLoc | formatLoc }}</span>
+      <span class="stat-chip-label">Lines Changed</span>
+    </div>
+  </section>
+
+  <div class="trace-connector" aria-hidden="true"></div>
+
+  {%- comment -%} Source Overview {%- endcomment -%}
+  {% if sourceCounts.size > 0 %}
+  <section class="fade-in" aria-label="Source overview" style="margin-bottom: 24px;">
+    <div class="source-overview">
+      <h3>Source Overview</h3>
+      {% for src in sourceCounts %}
+      {% assign srcPct = src.count | times: 100.0 | divided_by: totalSourceSessions | round %}
+      <div class="source-overview-row">
+        <span class="source-overview-name">{{ src.tool }}</span>
+        <div class="source-overview-bar">
+          <div class="source-overview-fill {% if forloop.first %}claude{% else %}cursor-fill{% endif %}" style="width: {{ srcPct }}%"></div>
+        </div>
+        <span class="source-overview-pct">{{ srcPct }}%</span>
+      </div>
+      {% endfor %}
+    </div>
+  </section>
+  {% endif %}
+
+  {%- comment -%} Aggregate Skills {%- endcomment -%}
+  {% if allSkills.size > 0 %}
+  <section class="all-skills-section fade-in" aria-label="All skills">
+    <h2 class="section-header">Skills</h2>
+    <div class="all-skills-grid">
+      {% for skill in allSkills %}
+      <div class="skill-ic"><span class="skill-ic-dot"></span> {{ skill.name }} <span class="skill-ic-count">{{ skill.projectCount }}</span></div>
+      {% endfor %}
+    </div>
+  </section>
+  {% endif %}
+
+  {%- comment -%} Projects {%- endcomment -%}
+  {% if projects.size > 0 %}
+  <section class="fade-in" aria-label="Projects" style="padding-bottom: 64px;">
+    <h2 class="section-header">Projects</h2>
+    <div class="projects-grid">
+      {% for p in projects %}
+      <article class="project-card pad-corner">
+        <div class="project-card-header">
+          <h3><a href="/{{ user.username }}/{{ p.slug }}">{{ p.title }}</a></h3>
+        </div>
+        {% if p.narrative %}
+        <p class="project-card-narrative">{{ p.narrative }}</p>
+        {% endif %}
+        <div class="project-card-stats">
+          <span><span class="val">{{ p.totalSessions }}</span> sessions</span>
+          <span><span class="val">{{ p.totalDurationMinutes | formatDuration }}</span></span>
+          <span><span class="val">{{ p.totalLoc | formatLoc }}</span> LOC</span>
+        </div>
+        {% if p.skills.size > 0 %}
+        <div class="skill-pins">
+          {% for skill in p.skills %}
+          <span class="skill-pin">{{ skill }}</span>
+          {% endfor %}
+        </div>
+        {% endif %}
+      </article>
+      {% endfor %}
+    </div>
+  </section>
+  {% endif %}
+
+  {%- comment -%} Fade-in animation script {%- endcomment -%}
+
+</div>

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

@@ -0,0 +1,247 @@
+<div class="heyiam-project circuit" data-render-version="2" data-template="circuit"{% if sessionBaseUrl %} data-session-base-url="{{ sessionBaseUrl }}"{% endif %} data-username="{{ user.username }}" data-project-slug="{{ project.slug }}">
+
+  {%- comment -%} Breadcrumb {%- endcomment -%}
+  <div class="breadcrumb" aria-label="Breadcrumb">
+    <a href="/{{ user.username }}">{{ user.username }}</a>
+    <span class="sep">/</span>
+    <span aria-current="page">{{ project.slug }}</span>
+  </div>
+
+  {%- comment -%} Hero {%- endcomment -%}
+  <section class="hero fade-in" aria-label="Project header">
+    <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 %}
+  </section>
+
+  {%- comment -%} Screenshot {%- endcomment -%}
+  {% if project.screenshotUrl %}
+  <div class="screenshot fade-in" role="img" aria-label="{{ project.title }} screenshot">
+    <div class="screenshot-chrome" aria-hidden="true">
+      <span class="screenshot-dot"></span>
+      <span class="screenshot-dot"></span>
+      <span class="screenshot-dot"></span>
+    </div>
+    <img src="{{ project.screenshotUrl }}" alt="{{ project.title }}" style="width: 100%; height: 100%; object-fit: cover;">
+  </div>
+  {% endif %}
+
+  {%- comment -%} Stats {%- endcomment -%}
+  <section class="stat-chips fade-in" aria-label="Project statistics">
+    <div class="stat-chip" role="group" aria-label="Sessions">
+      <span class="stat-chip-value">{{ project.totalSessions }}</span>
+      <span class="stat-chip-label">Sessions</span>
+    </div>
+    {% if efficiencyMultiplier %}
+    <div class="stat-chip stat-chip--leverage" role="group" aria-label="{{ project.totalDurationMinutes | formatDuration }} you, {{ project.totalAgentDurationMinutes | formatDuration }} agents, {{ efficiencyMultiplier }} leverage">
+      <div class="leverage-row">
+        <span><span class="lev-val">{{ project.totalDurationMinutes | formatDuration }}</span> <span class="lev-lbl">you</span></span>
+        <span><span class="lev-val lev-val--agent">{{ project.totalAgentDurationMinutes | formatDuration }}</span> <span class="lev-lbl">agents</span></span>
+        <span><span class="lev-val lev-val--multi">{{ efficiencyMultiplier }}</span></span>
+      </div>
+      {% assign totalCombined = project.totalDurationMinutes | plus: project.totalAgentDurationMinutes %}
+      {% if totalCombined > 0 %}
+      {% assign humanPct = project.totalDurationMinutes | times: 100 | divided_by: totalCombined | round %}
+      {% assign agentPct = 100 | minus: humanPct %}
+      <div class="circuit-leverage-bar">
+        <div class="circuit-leverage-bar__human" style="width: {{ humanPct }}%"></div>
+        <div class="circuit-leverage-bar__agent" style="width: {{ agentPct }}%"></div>
+      </div>
+      {% endif %}
+    </div>
+    {% else %}
+    <div class="stat-chip" role="group" aria-label="Time">
+      <span class="stat-chip-value">{{ project.totalDurationMinutes | formatDuration }}</span>
+      <span class="stat-chip-label">Time</span>
+    </div>
+    {% endif %}
+    <div class="stat-chip" role="group" aria-label="Lines of code">
+      <span class="stat-chip-value">{{ project.totalLoc | formatLoc }}</span>
+      <span class="stat-chip-label">LOC</span>
+    </div>
+    <div class="stat-chip" role="group" aria-label="Files">
+      <span class="stat-chip-value">{{ project.totalFilesChanged }}</span>
+      <span class="stat-chip-label">Files</span>
+    </div>
+    {% if project.totalTokens %}
+    <div class="stat-chip" role="group" aria-label="Tokens">
+      <span class="stat-chip-value">{{ project.totalTokens | formatTokens }}</span>
+      <span class="stat-chip-label">Tokens</span>
+    </div>
+    {% endif %}
+  </section>
+
+  <div class="trace-connector" aria-hidden="true"></div>
+
+  {%- comment -%} Narrative {%- endcomment -%}
+  {% if project.narrative %}
+  <section class="narrative fade-in" aria-label="Project narrative">
+    <h2 class="section-header">Narrative</h2>
+    <p>{{ project.narrative }}</p>
+  </section>
+
+  <div class="trace-connector" aria-hidden="true"></div>
+  {% endif %}
+
+  {%- comment -%} Skills {%- endcomment -%}
+  {% if project.skills.size > 0 %}
+  <section class="fade-in" aria-label="Technologies used">
+    <h2 class="section-header">Skills</h2>
+    <div class="skill-pins">
+      {% for skill in project.skills %}
+      <span class="skill-pin">{{ skill }}</span>
+      {% endfor %}
+    </div>
+  </section>
+
+  <div class="trace-connector" aria-hidden="true"></div>
+  {% endif %}
+
+  {%- comment -%} Key Decisions {%- endcomment -%}
+  {% if arc.size > 0 %}
+  <section class="decisions fade-in" aria-label="Key decisions">
+    <h2 class="section-header">Key Decisions</h2>
+    {% for item in arc %}
+    <div class="decision-item">
+      <span class="decision-number">{{ item.phase | prepend: '0' | slice: -2, 2 }}</span>
+      {{ item.description }}
+    </div>
+    {% endfor %}
+  </section>
+
+  <div class="trace-connector" aria-hidden="true"></div>
+  {% endif %}
+
+  {%- comment -%} Phases {%- endcomment -%}
+  {% if arc.size > 0 %}
+  <section class="fade-in" aria-label="Project phases">
+    <h2 class="section-header">Phases</h2>
+    <div class="phase-bus" role="list">
+      {% for item in arc %}
+      <div class="phase-item" role="listitem">
+        <div class="phase-label"><span class="phase-num">{{ item.phase | prepend: '0' | slice: -2, 2 }}</span> {{ item.title }}</div>
+        {% if item.dates %}
+        <div class="phase-dates">{{ item.dates }}</div>
+        {% endif %}
+        <div class="phase-desc">{{ item.description }}</div>
+      </div>
+      {% endfor %}
+    </div>
+  </section>
+
+  <div class="trace-connector" aria-hidden="true"></div>
+  {% endif %}
+
+  {%- comment -%} Source Breakdown {%- endcomment -%}
+  {% if sourceCounts.size > 0 %}
+  <section class="source-section fade-in" aria-label="Source breakdown">
+    <h2 class="section-header">Source Breakdown</h2>
+    <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-label">
+        {% for src in sourceCounts %}
+        {% assign srcPct = src.count | times: 100.0 | divided_by: totalSourceSessions | round %}
+        <span>{{ src.tool }} &mdash; {{ srcPct }}% ({{ src.count }} sessions)</span>
+        {% endfor %}
+      </div>
+      <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-fill{% unless forloop.first %} cursor{% endunless %}" style="width: {{ srcPct }}%"></div>
+        {% endfor %}
+      </div>
+      {% endif %}
+    </div>
+  </section>
+
+  <div class="trace-connector" aria-hidden="true"></div>
+  {% endif %}
+
+  {%- comment -%} Session Table (replaces JS Work Timeline) {%- endcomment -%}
+  {% if featuredSessions.size > 0 %}
+  <section class="fade-in" aria-label="Session timeline">
+    <h2 class="section-header">Sessions</h2>
+    <div class="session-table-wrapper">
+      <table class="session-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>
+            <th scope="col">Agents</th>
+          </tr>
+        </thead>
+        <tbody>
+          {% assign agent_colors = '#0891b2,#059669,#7c3aed,#475569,#e11d48,#d97706' | split: ',' %}
+          {% for s in featuredSessions %}
+          <tr>
+            <td class="num">{{ forloop.index }}</td>
+            <td class="title-cell"><a href="{{ sessionBaseUrl }}/{{ s.slug }}{{ sessionSuffix }}">{{ s.title }}</a></td>
+            <td class="mono">{% if s.recordedAt %}{{ s.recordedAt | formatDate }}{% endif %}</td>
+            <td class="mono">{{ s.durationMinutes | formatDuration }}</td>
+            <td class="mono">{{ s.locChanged | localeNumber }}</td>
+            <td class="mono">{% if s.sourceTool %}{{ s.sourceTool }}{% endif %}</td>
+            <td>
+              {% if s.agentSummary and s.agentSummary.agents.size > 0 %}
+              <div class="agent-dots" aria-label="{{ s.agentSummary.agents.size }} agents">
+                {% for agent in s.agentSummary.agents %}
+                {% assign colorIdx = forloop.index0 | modulo: 6 %}
+                <span class="agent-dot" style="background:{{ agent_colors[colorIdx] }}" title="{{ agent.role }}"></span>
+                {% endfor %}
+              </div>
+              {% else %}
+              <span class="mono" style="font-size:11px;color:var(--fg-muted)">&mdash;</span>
+              {% endif %}
+            </td>
+          </tr>
+          {% endfor %}
+        </tbody>
+      </table>
+    </div>
+  </section>
+
+  <div class="trace-connector" aria-hidden="true"></div>
+  {% endif %}
+
+  {%- comment -%} Featured Sessions {%- endcomment -%}
+  {% if featuredSessions.size > 0 %}
+  <section class="fade-in" aria-label="Featured sessions" style="padding-bottom: 64px;">
+    <h2 class="section-header">Featured Sessions</h2>
+    <div class="featured-grid">
+      {% for s in featuredSessions %}
+      <article class="featured-card">
+        {% if s.skills.size > 0 %}
+        <span class="featured-card-tag">{{ s.skills | first }}</span>
+        {% endif %}
+        <h4><a href="{{ sessionBaseUrl }}/{{ s.slug }}{{ sessionSuffix }}">{{ s.title }}</a></h4>
+        <div class="featured-card-stats">
+          <span><span class="val">{{ s.durationMinutes | formatDuration }}</span></span>
+          <span><span class="val">{{ s.locChanged | localeNumber }}</span> LOC</span>
+          {% if s.agentSummary %}
+          <span><span class="val">{{ s.agentSummary.agents.size }}</span> agents</span>
+          {% endif %}
+        </div>
+      </article>
+      {% endfor %}
+    </div>
+  </section>
+  {% endif %}
+
+  {%- comment -%} Fade-in animation script {%- endcomment -%}
+
+</div>

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

@@ -0,0 +1,205 @@
+<div class="heyiam-session circuit" data-render-version="2" data-template="circuit">
+
+  {%- comment -%} Breadcrumb {%- endcomment -%}
+  <div class="breadcrumb" aria-label="Breadcrumb">
+    <a href="/{{ user.username }}">{{ user.username }}</a>
+    {% if projectSlug %}
+    <span class="sep">/</span>
+    <a href="/{{ user.username }}/{{ projectSlug }}">{{ projectSlug }}</a>
+    {% endif %}
+    <span class="sep">/</span>
+    <span aria-current="page">{{ session.title }}</span>
+  </div>
+
+  {%- comment -%} Hero {%- endcomment -%}
+  <section class="hero fade-in" aria-label="Session header">
+    <h1>{{ session.title }}</h1>
+    <div class="hero-meta">
+      {% if session.recordedAt %}
+      <span>Date: <span class="val">{{ session.recordedAt | formatDate }}</span></span>
+      {% endif %}
+      {% if session.sourceTool %}
+      <span>Source: <span class="val">{{ session.sourceTool }}</span></span>
+      {% endif %}
+      <span>Duration: <span class="val">{{ session.durationMinutes | formatDuration }}</span>{% if session.wallClockMinutes %} ({{ session.wallClockMinutes | formatDuration }} wall){% endif %}</span>
+      <span>Turns: <span class="val">{{ session.turns }}</span></span>
+      <span>LOC: <span class="val">{{ session.locChanged | localeNumber }}</span></span>
+      <span>Files: <span class="val">{{ session.filesChanged }}</span></span>
+    </div>
+  </section>
+
+  {%- comment -%} Dev Take {%- endcomment -%}
+  {% if session.devTake %}
+  <div class="dev-take fade-in">
+    <span class="dev-take-label">Dev Take</span>
+    <p>{{ session.devTake }}</p>
+  </div>
+  {% endif %}
+
+  {%- comment -%} Stats {%- endcomment -%}
+  <section class="stat-chips fade-in" aria-label="Session statistics">
+    <div class="stat-chip" role="group" aria-label="Duration">
+      <span class="stat-chip-value">{{ session.durationMinutes | formatDuration }}</span>
+      <span class="stat-chip-label">Duration</span>
+    </div>
+    {% if session.wallClockMinutes %}
+    <div class="stat-chip" role="group" aria-label="Wall clock">
+      <span class="stat-chip-value">{{ session.wallClockMinutes | formatDuration }}</span>
+      <span class="stat-chip-label">Wall Clock</span>
+    </div>
+    {% endif %}
+    <div class="stat-chip" role="group" aria-label="Turns">
+      <span class="stat-chip-value">{{ session.turns }}</span>
+      <span class="stat-chip-label">Turns</span>
+    </div>
+    <div class="stat-chip" role="group" aria-label="Lines of code">
+      <span class="stat-chip-value">{{ session.locChanged | localeNumber }}</span>
+      <span class="stat-chip-label">LOC</span>
+    </div>
+    <div class="stat-chip" role="group" aria-label="Files changed">
+      <span class="stat-chip-value">{{ session.filesChanged }}</span>
+      <span class="stat-chip-label">Files</span>
+    </div>
+  </section>
+
+  <div class="trace-connector" aria-hidden="true"></div>
+
+  <div class="layout-two-col">
+    <div>
+      {%- comment -%} Execution Path (Beats) {%- endcomment -%}
+      {% if session.beats.size > 0 %}
+      <section class="beats fade-in" aria-label="Execution path">
+        <h2 class="section-header">Execution Path</h2>
+        <div class="beat-list" role="list">
+          {% for beat in session.beats %}
+          <div class="beat-item" role="listitem">
+            <div class="beat-title"><span class="beat-num">{{ beat.stepNumber | prepend: '0' | slice: -2, 2 }}</span> {{ beat.title }}</div>
+            <p class="beat-desc">{{ beat.body }}</p>
+          </div>
+          {% endfor %}
+        </div>
+      </section>
+
+      <div class="trace-connector" aria-hidden="true"></div>
+      {% endif %}
+
+      {%- comment -%} Q&A {%- endcomment -%}
+      {% if session.qaPairs.size > 0 %}
+      <section class="qa-section fade-in" aria-label="Questions and answers">
+        <h2 class="section-header">Q&amp;A</h2>
+        {% for qa in session.qaPairs %}
+        <div class="qa-item">
+          <p class="qa-question">{{ qa.question }}</p>
+          <p class="qa-answer">{{ qa.answer }}</p>
+        </div>
+        {% endfor %}
+      </section>
+
+      <div class="trace-connector" aria-hidden="true"></div>
+      {% endif %}
+
+      {%- comment -%} Narrative {%- endcomment -%}
+      {% if session.narrative %}
+      <section class="fade-in" aria-label="Session narrative">
+        <h2 class="section-header">Narrative</h2>
+        <p style="font-size: 15px; color: var(--fg); line-height: 1.75;">{{ session.narrative }}</p>
+      </section>
+
+      <div class="trace-connector" aria-hidden="true"></div>
+      {% endif %}
+
+      {%- comment -%} Highlights {%- endcomment -%}
+      {% if session.highlights.size > 0 %}
+      <section class="fade-in" aria-label="Session highlights">
+        <h2 class="section-header">Highlights</h2>
+        <ul style="list-style: none; padding: 0;">
+          {% for h in session.highlights %}
+          <li style="font-size: 14px; color: var(--fg-muted); line-height: 1.7; padding: 6px 0; border-bottom: 1px solid var(--border);">{{ h }}</li>
+          {% endfor %}
+        </ul>
+      </section>
+
+      <div class="trace-connector" aria-hidden="true"></div>
+      {% endif %}
+
+      {%- comment -%} Agent Summary {%- endcomment -%}
+      {% if session.agentSummary %}
+      <section class="fade-in" aria-label="Agent summary">
+        <h2 class="section-header">Agent Summary</h2>
+        <div class="agent-table-wrapper">
+          <table class="agent-table">
+            <thead>
+              <tr>
+                <th scope="col">Role</th>
+                <th scope="col">Duration</th>
+                <th scope="col">LOC</th>
+              </tr>
+            </thead>
+            <tbody>
+              {% assign agent_colors = '#0891b2,#059669,#7c3aed,#475569,#e11d48,#d97706' | split: ',' %}
+              {% for agent in session.agentSummary.agents %}
+              <tr>
+                <td>
+                  <span class="role-cell">
+                    {% assign colorIdx = forloop.index0 | modulo: 6 %}
+                    <span class="role-dot" style="background:{{ agent_colors[colorIdx] }}"></span>
+                    {{ agent.role }}
+                  </span>
+                </td>
+                <td class="mono">{{ agent.duration_minutes }}m</td>
+                <td class="mono">{{ agent.loc_changed }}</td>
+              </tr>
+              {% endfor %}
+            </tbody>
+          </table>
+        </div>
+      </section>
+      {% endif %}
+    </div>
+
+    {%- comment -%} Sidebar {%- endcomment -%}
+    <aside class="sidebar" aria-label="Session details">
+      {% if session.toolBreakdown.size > 0 %}
+      <div class="sidebar-section">
+        <h3 class="sidebar-title">Tools Used</h3>
+        <ul class="tool-list">
+          {% for t in session.toolBreakdown %}
+          <li class="tool-item">
+            <span class="tool-name">{{ t.tool }}</span>
+            <span class="tool-count">{{ t.count }}</span>
+          </li>
+          {% endfor %}
+        </ul>
+      </div>
+      {% endif %}
+
+      {% if session.topFiles.size > 0 %}
+      <div class="sidebar-section">
+        <h3 class="sidebar-title">Files Changed</h3>
+        <ul class="file-list">
+          {% for f in session.topFiles %}
+          <li class="file-item">
+            <span class="file-name" title="{{ f.path }}">{{ f.path }}</span>
+            <span class="file-diff">+{{ f.additions }}{% if f.deletions > 0 %} -{{ f.deletions }}{% endif %}</span>
+          </li>
+          {% endfor %}
+        </ul>
+      </div>
+      {% endif %}
+
+      {% if session.skills.size > 0 %}
+      <div class="sidebar-section">
+        <h3 class="sidebar-title">Skills</h3>
+        <div class="sidebar-pins">
+          {% for skill in session.skills %}
+          <span class="sidebar-pin">{{ skill }}</span>
+          {% endfor %}
+        </div>
+      </div>
+      {% endif %}
+    </aside>
+  </div>
+
+  {%- comment -%} Fade-in animation script {%- endcomment -%}
+
+</div>