heyiam 0.2.28 → 0.3.0

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

@@ -0,0 +1,318 @@
+<div class="heyiam-portfolio ember" data-render-version="2" data-template="ember" data-username="{{ user.username }}">
+
+  {%- comment -%} Hero: Asymmetric Split {%- endcomment -%}
+  {% if hasProfile %}
+  <section class="hero ember-section" aria-label="Profile">
+    <div class="hero-split">
+      <div class="hero-content">
+        {% if user.displayName != blank %}
+        <h1 class="hero-name">{{ user.displayName }}</h1>
+        {% endif %}
+        {% if user.location %}
+        <p class="hero-location">{{ user.location }}</p>
+        {% endif %}
+        {% if user.bio %}
+        <p class="hero-bio">{{ user.bio }}</p>
+        {% endif %}
+        <ul class="hero-contact" aria-label="Contact and social links">
+          {% if user.email %}
+          <li><a href="mailto:{{ user.email }}"><svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" aria-hidden="true"><rect x="2" y="4" width="20" height="16" rx="2"/><path d="m2 4 10 8 10-8"/></svg>{{ user.email }}</a></li>
+          {% endif %}
+          {% if user.linkedinUrl %}
+          <li><a href="{{ user.linkedinUrl }}" target="_blank" rel="noopener"><svg width="16" height="16" viewBox="0 0 24 24" fill="currentColor" aria-hidden="true"><path d="M20.5 2h-17A1.5 1.5 0 002 3.5v17A1.5 1.5 0 003.5 22h17a1.5 1.5 0 001.5-1.5v-17A1.5 1.5 0 0020.5 2zM8 19H5v-9h3zM6.5 8.25A1.75 1.75 0 118.3 6.5a1.78 1.78 0 01-1.8 1.75zM19 19h-3v-4.74c0-1.42-.6-1.93-1.38-1.93A1.74 1.74 0 0013 14.19V19h-3v-9h2.9v1.3a3.11 3.11 0 012.7-1.4c1.55 0 3.36.86 3.36 3.66z"/></svg>LinkedIn</a></li>
+          {% endif %}
+          {% if user.githubUrl %}
+          <li><a href="{{ user.githubUrl }}" target="_blank" rel="noopener"><svg width="16" height="16" viewBox="0 0 24 24" fill="currentColor" aria-hidden="true"><path d="M12 2C6.477 2 2 6.484 2 12.017c0 4.425 2.865 8.18 6.839 9.504.5.092.682-.217.682-.483 0-.237-.008-.868-.013-1.703-2.782.605-3.369-1.343-3.369-1.343-.454-1.158-1.11-1.466-1.11-1.466-.908-.62.069-.608.069-.608 1.003.07 1.531 1.032 1.531 1.032.892 1.53 2.341 1.088 2.91.832.092-.647.35-1.088.636-1.338-2.22-.253-4.555-1.113-4.555-4.951 0-1.093.39-1.988 1.029-2.688-.103-.253-.446-1.272.098-2.65 0 0 .84-.27 2.75 1.026A9.564 9.564 0 0112 6.844c.85.004 1.705.115 2.504.337 1.909-1.296 2.747-1.027 2.747-1.027.546 1.379.202 2.398.1 2.651.64.7 1.028 1.595 1.028 2.688 0 3.848-2.339 4.695-4.566 4.943.359.309.678.92.678 1.855 0 1.338-.012 2.419-.012 2.747 0 .268.18.58.688.482A10.019 10.019 0 0022 12.017C22 6.484 17.522 2 12 2z"/></svg>GitHub</a></li>
+          {% endif %}
+          {% if user.twitterHandle %}
+          <li><a href="https://x.com/{{ user.twitterHandle }}" target="_blank" rel="noopener"><svg width="16" height="16" viewBox="0 0 24 24" fill="currentColor" aria-hidden="true"><path d="M18.244 2.25h3.308l-7.227 8.26 8.502 11.24H16.17l-5.214-6.817L4.99 21.75H1.68l7.73-8.835L1.254 2.25H8.08l4.713 6.231zm-1.161 17.52h1.833L7.084 4.126H5.117z"/></svg>@{{ user.twitterHandle }}</a></li>
+          {% endif %}
+          {% if user.websiteUrl %}
+          <li><a href="{{ user.websiteUrl }}" target="_blank" rel="noopener">{{ user.websiteUrl | stripProtocol }}</a></li>
+          {% endif %}
+          {% if user.phone %}
+          <li><a href="tel:{{ user.phone }}">{{ user.phone }}</a></li>
+          {% endif %}
+        </ul>
+        {% if user.resumeUrl %}
+        <a href="{{ user.resumeUrl }}" class="hero-resume-btn"><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>Download Resume</a>
+        {% endif %}
+      </div>
+      {% if user.photoUrl %}
+      <div class="hero-photo-order hero-photo-wrapper">
+        <img src="{{ user.photoUrl }}" alt="{{ user.displayName }}" class="hero-photo" width="350" height="440" loading="eager">
+      </div>
+      {% endif %}
+    </div>
+  </section>
+  {% endif %}
+
+  {%- comment -%} Stats {%- endcomment -%}
+  <section class="ember-section" aria-label="Aggregate statistics">
+    <div class="stats-bar" role="list">
+      <div class="stat-cell" role="listitem">
+        <span class="stat-value ember-glow">{{ projects.size }}</span>
+        <span class="stat-label">Projects</span>
+      </div>
+      <div class="stat-cell" role="listitem">
+        <span class="stat-value ember-glow">{{ totalSessions }}</span>
+        <span class="stat-label">Sessions</span>
+      </div>
+      <div class="stat-cell" role="listitem">
+        <span class="stat-value ember-glow">{{ totalLoc | localeNumber }}</span>
+        <span class="stat-label">Lines Changed</span>
+      </div>
+      <div class="stat-cell" role="listitem">
+        <span class="stat-value ember-glow">{{ totalDurationMinutes | formatDuration }}</span>
+        <span class="stat-label">{{ durationLabel }}</span>
+      </div>
+    </div>
+  </section>
+
+  {%- comment -%} Leverage {%- endcomment -%}
+  {% if efficiencyMultiplier %}
+  <section class="ember-section" aria-label="AI leverage" role="figure">
+    <div class="ember-leverage">
+      <div class="ember-leverage__main">
+        <span class="ember-leverage__multi">{{ efficiencyMultiplier }}</span>
+        <div class="ember-leverage__detail">
+          <span>{{ totalDurationMinutes | formatDuration }} <small>you</small></span>
+          <span style="color:var(--accent)">{{ totalAgentDurationMinutes | formatDuration }} <small>agents</small></span>
+        </div>
+      </div>
+      {% assign totalCombined = totalDurationMinutes | plus: totalAgentDurationMinutes %}
+      {% if totalCombined > 0 %}
+      {% assign agentPct = totalAgentDurationMinutes | times: 100 | divided_by: totalCombined %}
+      <div class="ember-leverage__bar"><div class="ember-leverage__fill" style="width:{{ agentPct }}%"></div></div>
+      {% endif %}
+    </div>
+  </section>
+  {% endif %}
+
+  {%- comment -%} Projects {%- endcomment -%}
+  {% if projects.size > 0 %}
+  <section class="ember-section" aria-label="Projects">
+    <h2 class="section-header"><span class="ember-icon" aria-hidden="true"></span>Projects</h2>
+    <div class="projects-grid">
+      {% for p in projects %}
+      <a href="/{{ user.username }}/{{ p.slug }}" class="project-card" aria-label="{{ p.title }} project">
+        <div class="project-card-header">
+          <h3 class="project-card-title">{{ p.title }}</h3>
+          <span class="project-card-arrow" aria-hidden="true">&rarr;</span>
+        </div>
+        {% if p.narrative %}
+        <p class="project-card-narrative">{{ p.narrative }}</p>
+        {% endif %}
+        {% if p.skills.size > 0 %}
+        <div class="project-card-skills">
+          {% for skill in p.skills %}
+          <span class="skill-chip">{{ skill }}</span>
+          {% endfor %}
+        </div>
+        {% endif %}
+        <div class="project-card-stats">
+          <span>{{ p.totalSessions }} session{% if p.totalSessions != 1 %}s{% endif %}</span>
+          <span>{{ p.totalDurationMinutes | formatDuration }}</span>
+          <span>{{ p.totalLoc | localeNumber }} LOC</span>
+        </div>
+        {% if p.sourceCounts.size > 0 %}
+        {% assign pTotalSrc = 0 %}
+        {% for src in p.sourceCounts %}{% assign pTotalSrc = pTotalSrc | plus: src.count %}{% endfor %}
+        {% if pTotalSrc > 0 %}
+        <div class="source-bar" role="img" aria-label="Source breakdown">
+          {% for src in p.sourceCounts %}
+          {% assign pSrcPct = src.count | times: 100.0 | divided_by: pTotalSrc | round %}
+          <div class="source-bar-segment{% if forloop.first %} claude{% else %} cursor{% endif %}" style="width: {{ pSrcPct }}%"></div>
+          {% endfor %}
+        </div>
+        <div class="source-legend">
+          {% for src in p.sourceCounts %}
+          {% assign pSrcPct = src.count | times: 100.0 | divided_by: pTotalSrc | round %}
+          <span><span class="source-legend-dot{% if forloop.first %} claude{% else %} cursor{% endif %}" aria-hidden="true"></span>{{ src.tool }} {{ pSrcPct }}%</span>
+          {% endfor %}
+        </div>
+        {% endif %}
+        {% endif %}
+      </a>
+      {% endfor %}
+    </div>
+  </section>
+  {% endif %}
+
+  {%- comment -%} Activity {%- endcomment -%}
+  {% if activityByMonth.size > 0 %}
+  {% assign maxSessions = 0 %}
+  {% for m in activityByMonth %}
+    {% if m.sessions > maxSessions %}{% assign maxSessions = m.sessions %}{% endif %}
+  {% endfor %}
+  <section class="activity-section ember-section" aria-label="Session activity">
+    <h2 class="section-header"><span class="ember-icon" aria-hidden="true"></span>Session Activity</h2>
+    <div class="activity-chart" role="img" aria-label="Monthly session activity bar chart">
+      {% for m in activityByMonth %}
+        {% if maxSessions > 0 %}
+          {% assign barPct = m.sessions | times: 100 | divided_by: maxSessions %}
+        {% else %}
+          {% assign barPct = 0 %}
+        {% endif %}
+        <div class="activity-bar" style="height: {{ barPct }}%" data-label="{{ m.month }}"></div>
+      {% endfor %}
+    </div>
+    <div class="activity-labels">
+      {% for m in activityByMonth %}
+      <span>{{ m.month }}</span>
+      {% endfor %}
+    </div>
+  </section>
+  {% endif %}
+
+  {%- comment -%} Growth Line Chart {%- endcomment -%}
+  {% if activityByDay.size > 0 %}
+  {% assign cumLoc = 0 %}
+  {% assign maxCumLoc = 0 %}
+  {% for d in activityByDay %}
+    {% assign cumLoc = cumLoc | plus: d.loc %}
+    {% if cumLoc > maxCumLoc %}{% assign maxCumLoc = cumLoc %}{% endif %}
+  {% endfor %}
+  <section class="ember-section" aria-label="Cumulative lines of code" style="margin-top: 2.5rem;">
+    <h2 class="section-header"><span class="ember-icon" aria-hidden="true"></span>Growth</h2>
+    <div style="background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); padding: 1.5rem;">
+      <svg viewBox="0 0 500 180" width="100%" height="180" role="img" aria-label="Cumulative LOC growth line chart">
+        <line x1="40" y1="20" x2="40" y2="150" stroke="rgba(250,245,240,0.06)" stroke-width="1"/>
+        <line x1="40" y1="150" x2="480" y2="150" stroke="rgba(250,245,240,0.06)" stroke-width="1"/>
+        <line x1="40" y1="117.5" x2="480" y2="117.5" stroke="rgba(250,245,240,0.04)" stroke-width="1" stroke-dasharray="4,4"/>
+        <line x1="40" y1="85" x2="480" y2="85" stroke="rgba(250,245,240,0.04)" stroke-width="1" stroke-dasharray="4,4"/>
+        <line x1="40" y1="52.5" x2="480" y2="52.5" stroke="rgba(250,245,240,0.04)" stroke-width="1" stroke-dasharray="4,4"/>
+        <line x1="40" y1="20" x2="480" y2="20" stroke="rgba(250,245,240,0.04)" stroke-width="1" stroke-dasharray="4,4"/>
+        <text x="35" y="154" fill="rgba(250,245,240,0.4)" font-family="JetBrains Mono, monospace" font-size="10" text-anchor="end">0</text>
+        {% if maxCumLoc > 0 %}
+        {% assign yLabel2 = maxCumLoc | divided_by: 2 %}
+        <text x="35" y="88" fill="rgba(250,245,240,0.4)" font-family="JetBrains Mono, monospace" font-size="10" text-anchor="end">{{ yLabel2 | formatLoc }}</text>
+        <text x="35" y="24" fill="rgba(250,245,240,0.4)" font-family="JetBrains Mono, monospace" font-size="10" text-anchor="end">{{ maxCumLoc | formatLoc }}</text>
+        {% endif %}
+        <defs>
+          <linearGradient id="emberGradFill" x1="0" y1="0" x2="0" y2="1">
+            <stop offset="0%" stop-color="#f97316" stop-opacity="0.15"/>
+            <stop offset="100%" stop-color="#f97316" stop-opacity="0.01"/>
+          </linearGradient>
+          <linearGradient id="emberGradLine" x1="0" y1="0" x2="1" y2="0">
+            <stop offset="0%" stop-color="#f97316"/>
+            <stop offset="100%" stop-color="#ef4444"/>
+          </linearGradient>
+        </defs>
+        {% assign fillPath = "M 40 150" %}
+        {% assign polyPoints = "" %}
+        {% assign cumLoc = 0 %}
+        {% assign dayCount = activityByDay.size | minus: 1 %}
+        {% assign lastPx = 40 %}
+        {% for d in activityByDay %}
+          {% assign cumLoc = cumLoc | plus: d.loc %}
+          {% if dayCount > 0 %}
+            {% assign px = forloop.index0 | times: 440 | divided_by: dayCount | plus: 40 %}
+          {% else %}
+            {% assign px = 260 %}
+          {% endif %}
+          {% if maxCumLoc > 0 %}
+            {% assign pyOff = cumLoc | times: 130 | divided_by: maxCumLoc %}
+            {% assign py = 150 | minus: pyOff %}
+          {% else %}
+            {% assign py = 150 %}
+          {% endif %}
+          {% assign fillPath = fillPath | append: " L " | append: px | append: " " | append: py %}
+          {% assign polyPoints = polyPoints | append: px | append: "," | append: py | append: " " %}
+          {% assign lastPx = px %}
+        {% endfor %}
+        {% assign fillPath = fillPath | append: " L " | append: lastPx | append: " 150 Z" %}
+        <path d="{{ fillPath }}" fill="url(#emberGradFill)"/>
+        <polyline points="{{ polyPoints }}" fill="none" stroke="url(#emberGradLine)" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"/>
+        {% assign cumLoc = 0 %}
+        {% for d in activityByDay %}
+          {% assign cumLoc = cumLoc | plus: d.loc %}
+          {% if dayCount > 0 %}
+            {% assign px = forloop.index0 | times: 440 | divided_by: dayCount | plus: 40 %}
+          {% else %}
+            {% assign px = 260 %}
+          {% endif %}
+          {% if maxCumLoc > 0 %}
+            {% assign pyOff = cumLoc | times: 130 | divided_by: maxCumLoc %}
+            {% assign py = 150 | minus: pyOff %}
+          {% else %}
+            {% assign py = 150 %}
+          {% endif %}
+          <circle cx="{{ px }}" cy="{{ py }}" r="4" fill="var(--bg)" stroke="#f97316" stroke-width="2"/>
+        {% endfor %}
+      </svg>
+    </div>
+  </section>
+  {% endif %}
+
+  {%- comment -%} Skills Overview {%- endcomment -%}
+  {% if allSkills.size > 0 %}
+  <section class="ember-section" aria-label="Skills overview">
+    <h2 class="section-header"><span class="ember-icon" aria-hidden="true"></span>Skills</h2>
+    <div style="background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); padding: 1.5rem;">
+      <div style="display: flex; flex-wrap: wrap; gap: 8px;">
+        {% for skill in allSkills %}
+        <span class="skill-chip">{{ skill.name }}</span>
+        {% endfor %}
+      </div>
+      {% if topSkills.size > 0 %}
+      <div style="margin-top: 1.25rem; display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 1rem;">
+        {% assign maxSkillCount = topSkills[0].projectCount %}
+        {% for skill in topSkills %}
+        <div>
+          <div style="font-family: var(--font-mono); font-size: 11px; color: var(--text-muted); margin-bottom: 6px;">{{ skill.name }}</div>
+          <div style="height: 6px; background: var(--surface-high); border-radius: 3px; overflow: hidden;">
+            {% if maxSkillCount > 0 %}
+            {% assign skillPct = skill.projectCount | times: 100 | divided_by: maxSkillCount %}
+            {% else %}
+            {% assign skillPct = 0 %}
+            {% endif %}
+            <div style="width: {{ skillPct }}%; height: 100%; background: linear-gradient(90deg, var(--accent), var(--accent-secondary)); border-radius: 3px;"></div>
+          </div>
+        </div>
+        {% endfor %}
+      </div>
+      {% endif %}
+    </div>
+  </section>
+  {% endif %}
+
+  {%- comment -%} Source Overview {%- endcomment -%}
+  {% if sourceCounts.size > 0 %}
+  <section class="ember-section" aria-label="Overall source breakdown">
+    <h2 class="section-header"><span class="ember-icon" aria-hidden="true"></span>Source Breakdown</h2>
+    <div style="background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); padding: 1.5rem;">
+      <div style="display: grid; grid-template-columns: repeat({{ sourceCounts.size }}, 1fr); gap: 1.5rem;">
+        {% for src in sourceCounts %}
+        {% if totalSourceSessions > 0 %}
+        {% assign srcPct = src.count | times: 100 | divided_by: totalSourceSessions %}
+        {% else %}
+        {% assign srcPct = 0 %}
+        {% endif %}
+        <div style="text-align: center; padding: 1rem; background: {% if forloop.first %}var(--accent-glow){% else %}var(--border-subtle){% endif %}; border-radius: var(--radius-sm); border: 1px solid {% if forloop.first %}var(--accent-border){% else %}var(--border-subtle){% endif %};">
+          <div style="font-family: var(--font-display); font-size: 1.5rem; font-weight: 700; color: {% if forloop.first %}var(--accent){% else %}var(--text-secondary){% endif %};">{{ srcPct }}%</div>
+          <div style="font-family: var(--font-mono); font-size: 11px; color: var(--text-muted); margin-top: 4px;">{{ src.tool }}</div>
+          <div style="font-family: var(--font-mono); font-size: 11px; color: var(--text-faint); margin-top: 2px;">{{ src.count }} sessions</div>
+        </div>
+        {% endfor %}
+      </div>
+      {% if totalSourceSessions > 0 %}
+      <div style="margin-top: 1rem; height: 8px; background: var(--surface-high); border-radius: 4px; overflow: hidden; display: flex;">
+        {% for src in sourceCounts %}
+        {% assign srcPct = src.count | times: 100 | divided_by: totalSourceSessions %}
+        <div style="width: {{ srcPct }}%; height: 100%; background: {% if forloop.first %}linear-gradient(90deg, var(--accent), var(--accent-secondary)){% else %}var(--text-muted){% endif %};"></div>
+        {% endfor %}
+      </div>
+      {% endif %}
+    </div>
+  </section>
+  {% endif %}
+
+  {%- comment -%} Footer {%- endcomment -%}
+  <footer class="footer">
+    <p>Built with <a href="https://heyi.am">heyi.am</a></p>
+  </footer>
+
+  {%- comment -%} Section fade-in animation {%- endcomment -%}
+
+</div>

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

@@ -0,0 +1,232 @@
+<div class="heyiam-project ember" data-render-version="2" data-template="ember"{% if sessionBaseUrl %} data-session-base-url="{{ sessionBaseUrl }}"{% endif %} data-username="{{ user.username }}" data-project-slug="{{ project.slug }}">
+
+  {%- comment -%} Breadcrumb {%- endcomment -%}
+  <div class="breadcrumb ember-section" aria-label="Breadcrumb">
+    <a href="/{{ user.username }}">{{ user.username }}</a><span class="sep">/</span><span aria-current="page">{{ project.slug }}</span>
+  </div>
+
+  {%- comment -%} Header {%- endcomment -%}
+  <header class="project-header ember-section">
+    <h1 class="project-title" data-editable="title">{{ project.title }}</h1>
+    {% if project.repoUrl or project.projectUrl %}
+    <div class="project-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 %}
+  </header>
+
+  {%- comment -%} Screenshot {%- endcomment -%}
+  {% if project.screenshotUrl %}
+  <section class="ember-section" aria-label="Project screenshot">
+    <div class="screenshot-frame">
+      <div class="screenshot-chrome">
+        <span class="screenshot-dot" aria-hidden="true"></span>
+        <span class="screenshot-dot" aria-hidden="true"></span>
+        <span class="screenshot-dot" aria-hidden="true"></span>
+        {% if project.projectUrl %}
+        <span class="screenshot-url">{{ project.projectUrl | stripProtocol }}</span>
+        {% endif %}
+      </div>
+      <img src="{{ project.screenshotUrl }}" alt="{{ project.title }} screenshot" style="width: 100%; display: block;">
+    </div>
+  </section>
+  {% endif %}
+
+  {%- comment -%} Stats {%- endcomment -%}
+  <section class="ember-section" aria-label="Project statistics">
+    <div class="stats-grid" role="list">
+      <div class="stat-cell" role="listitem">
+        <span class="stat-value">{{ project.totalSessions }}</span>
+        <span class="stat-label">Sessions</span>
+      </div>
+      <div class="stat-cell" role="listitem">
+        <span class="stat-value">{{ project.totalLoc | localeNumber }}</span>
+        <span class="stat-label">LOC</span>
+      </div>
+      <div class="stat-cell" role="listitem">
+        <span class="stat-value">{{ project.totalFilesChanged }}</span>
+        <span class="stat-label">Files</span>
+      </div>
+      {% if project.totalTokens %}
+      <div class="stat-cell" role="listitem">
+        <span class="stat-value">{{ project.totalTokens | formatTokens }}</span>
+        <span class="stat-label">Tokens</span>
+      </div>
+      {% endif %}
+      <div class="stat-cell" role="listitem">
+        <span class="stat-value">{{ project.totalDurationMinutes | formatDuration }}</span>
+        <span class="stat-label">{{ durationLabel }}</span>
+      </div>
+      {% if efficiencyMultiplier %}
+      <div class="stat-cell" role="listitem">
+        <span class="stat-value" style="color: var(--accent);">{{ efficiencyMultiplier }}</span>
+        <span class="stat-label">Leverage</span>
+      </div>
+      {% endif %}
+    </div>
+  </section>
+
+  {%- comment -%} Leverage {%- endcomment -%}
+  {% if efficiencyMultiplier %}
+  <section class="ember-section" aria-label="AI leverage" role="figure">
+    <div class="ember-leverage">
+      <div class="ember-leverage__main">
+        <span class="ember-leverage__multi">{{ efficiencyMultiplier }}</span>
+        <div class="ember-leverage__detail">
+          <span>{{ project.totalDurationMinutes | formatDuration }} <small>you</small></span>
+          <span style="color:var(--accent)">{{ project.totalAgentDurationMinutes | formatDuration }} <small>agents</small></span>
+        </div>
+      </div>
+      {% assign totalCombined = project.totalDurationMinutes | plus: project.totalAgentDurationMinutes %}
+      {% if totalCombined > 0 %}
+      {% assign agentPct = project.totalAgentDurationMinutes | times: 100 | divided_by: totalCombined %}
+      <div class="ember-leverage__bar"><div class="ember-leverage__fill" style="width:{{ agentPct }}%"></div></div>
+      {% endif %}
+    </div>
+  </section>
+  {% endif %}
+
+  {%- comment -%} Narrative {%- endcomment -%}
+  {% if project.narrative %}
+  <section class="ember-section" aria-label="Project narrative">
+    <h2 class="section-header"><span class="ember-icon" aria-hidden="true"></span>Narrative</h2>
+    <div class="narrative">
+      <p>{{ project.narrative }}</p>
+    </div>
+  </section>
+  {% endif %}
+
+  {%- comment -%} Work Timeline Chart (CSS-only bars) {%- endcomment -%}
+  {% if featuredSessions.size > 0 %}
+  <section class="ember-section" aria-label="Session timeline">
+    <h2 class="section-header"><span class="ember-icon" aria-hidden="true"></span>Work Timeline</h2>
+    <div class="timeline-chart">
+      {% assign maxLoc = 1 %}
+      {% for s in featuredSessions %}
+        {% if s.locChanged > maxLoc %}{% assign maxLoc = s.locChanged %}{% endif %}
+      {% endfor %}
+      <div class="chart-bars" role="img" aria-label="Bar chart of lines changed per session for {{ project.title }}">
+        {% for s in featuredSessions %}
+        {% if maxLoc > 0 %}{% assign barPct = s.locChanged | times: 100 | divided_by: maxLoc %}{% else %}{% assign barPct = 0 %}{% endif %}
+        <div class="chart-bar-group">
+          <div class="chart-bar" style="height: {{ barPct }}%">
+            <span class="chart-bar-value">{{ s.locChanged }} LOC</span>
+          </div>
+          <span class="chart-bar-label">S{{ forloop.index }}</span>
+        </div>
+        {% endfor %}
+      </div>
+    </div>
+  </section>
+  {% endif %}
+
+  {%- comment -%} Phases {%- endcomment -%}
+  {% if arc.size > 0 %}
+  <section class="ember-section" aria-label="Project phases">
+    <h2 class="section-header"><span class="ember-icon" aria-hidden="true"></span>Phases</h2>
+    <div class="phases">
+      {% for item in arc %}
+      <div class="phase-item">
+        <div class="phase-dot" aria-hidden="true"></div>
+        <div class="phase-title">{{ 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>
+  {% endif %}
+
+  {%- comment -%} Skills {%- endcomment -%}
+  {% if project.skills.size > 0 %}
+  <section class="ember-section" aria-label="Technologies used">
+    <h2 class="section-header"><span class="ember-icon" aria-hidden="true"></span>Skills</h2>
+    <div class="skills-list">
+      {% for skill in project.skills %}
+      <span class="skill-chip">{{ skill }}</span>
+      {% endfor %}
+    </div>
+  </section>
+  {% endif %}
+
+  {%- comment -%} Key Decisions {%- endcomment -%}
+  {% if arc.size > 0 %}
+  <section class="ember-section" aria-label="Key decisions">
+    <h2 class="section-header"><span class="ember-icon" aria-hidden="true"></span>Key Decisions</h2>
+    <ol class="decisions-list">
+      {% for item in arc %}
+      <li>{{ item.description }}</li>
+      {% endfor %}
+    </ol>
+  </section>
+  {% endif %}
+
+  {%- comment -%} Source Breakdown {%- endcomment -%}
+  {% if sourceCounts.size > 0 %}
+  <section class="ember-section" aria-label="Source breakdown">
+    <h2 class="section-header"><span class="ember-icon" aria-hidden="true"></span>Source Breakdown</h2>
+    <div class="source-breakdown">
+      <div class="source-bar-container">
+        {% assign totalSourceSessions = 0 %}
+        {% for src in sourceCounts %}
+          {% assign totalSourceSessions = totalSourceSessions | plus: src.count %}
+        {% endfor %}
+        {% if totalSourceSessions > 0 %}
+        <div class="source-bar">
+          {% for src in sourceCounts %}
+          {% assign srcPct = src.count | times: 100.0 | divided_by: totalSourceSessions | round %}
+          <div class="source-bar-segment{% if forloop.first %} claude{% else %} cursor{% endif %}" style="width: {{ srcPct }}%"></div>
+          {% endfor %}
+        </div>
+        <div class="source-labels">
+          {% for src in sourceCounts %}
+          {% assign srcPct = src.count | times: 100.0 | divided_by: totalSourceSessions | round %}
+          <span><span class="source-legend-dot{% if forloop.first %} claude{% else %} cursor{% endif %}" aria-hidden="true"></span>{{ src.tool }} {{ srcPct }}% ({{ src.count }} session{% if src.count != 1 %}s{% endif %})</span>
+          {% endfor %}
+        </div>
+        {% endif %}
+      </div>
+    </div>
+  </section>
+  {% endif %}
+
+  {%- comment -%} Featured Sessions {%- endcomment -%}
+  {% if featuredSessions.size > 0 %}
+  <section class="ember-section" aria-label="Featured sessions">
+    <h2 class="section-header"><span class="ember-icon" aria-hidden="true"></span>Featured Sessions</h2>
+    <div class="sessions-grid">
+      {% for s in featuredSessions %}
+      <a href="{{ sessionBaseUrl }}/{{ s.slug }}{{ sessionSuffix }}" class="session-card">
+        <div class="session-card-number">#{{ forloop.index }}</div>
+        <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 }} agent{% if s.agentSummary.agents.size != 1 %}s{% endif %}</span>
+          {% endif %}
+        </div>
+        {% if s.skills.size > 0 %}
+        <span class="session-card-tag">{{ s.skills | first }}</span>
+        {% endif %}
+      </a>
+      {% endfor %}
+    </div>
+  </section>
+  {% endif %}
+
+  {%- comment -%} Footer {%- endcomment -%}
+  <footer class="footer">
+    <p>Built with <a href="https://heyi.am">heyi.am</a></p>
+  </footer>
+
+  {%- comment -%} Section fade-in animation {%- endcomment -%}
+
+</div>