heyiam 0.2.28 → 0.3.0

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

@@ -0,0 +1,217 @@
+<div class="heyiam-portfolio neon" data-render-version="2" data-template="neon" data-username="{{ user.username }}">
+
+  <div class="grid-bg" aria-hidden="true"></div>
+
+  {%- comment -%} Hero {%- endcomment -%}
+  {% if hasProfile %}
+  <section class="hero fade-in" aria-label="Profile">
+    {% if user.photoUrl %}
+    <img src="{{ user.photoUrl }}" alt="{{ user.displayName }}" class="hero-photo portfolio-photo">
+    {% endif %}
+    {% if user.displayName != blank %}
+    <h1>{{ user.displayName }}</h1>
+    {% endif %}
+    {% if user.bio != blank %}
+    <p class="hero-bio portfolio-bio">{{ user.bio }}</p>
+    {% endif %}
+    {% if user.location != blank %}
+    <p class="hero-location portfolio-location">{{ user.location }}</p>
+    {% endif %}
+    {% if user.email or user.linkedinUrl or user.githubUrl or user.twitterHandle or user.websiteUrl or user.resumeUrl %}
+    <ul class="hero-links" 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"><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>{{ user.websiteUrl | stripProtocol }}</a></li>
+      {% endif %}
+      {% if user.resumeUrl %}
+      <li><a href="{{ user.resumeUrl }}" download><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>
+    {% endif %}
+  </section>
+  {% endif %}
+
+  {%- comment -%} Aggregate Stats {%- endcomment -%}
+  <section class="stats-section fade-in" aria-label="Aggregate statistics">
+    <div class="stats-grid">
+      <div class="stat-card" role="figure" aria-label="{{ projects.size }} projects">
+        <div class="stat-value pink" data-target="{{ projects.size }}">0</div>
+        <div class="stat-label">Projects</div>
+      </div>
+      <div class="stat-card" role="figure" aria-label="{{ totalSessions }} sessions">
+        <div class="stat-value cyan" data-target="{{ totalSessions }}">0</div>
+        <div class="stat-label">Sessions</div>
+      </div>
+      <div class="stat-card" role="figure" aria-label="{{ totalLoc }} lines changed">
+        <div class="stat-value cyan" data-target="{{ totalLoc }}" data-format="comma">0</div>
+        <div class="stat-label">Lines Changed</div>
+      </div>
+      {% if efficiencyMultiplier %}
+      <div class="stat-card" role="figure" aria-label="{{ efficiencyMultiplier }} leverage">
+        <div class="stat-value pink">{{ efficiencyMultiplier }}</div>
+        <div class="stat-label">Leverage</div>
+      </div>
+      {% else %}
+      <div class="stat-card" role="figure" aria-label="{{ totalDurationMinutes | formatDuration }} total time">
+        <div class="stat-value pink">{{ totalDurationMinutes | formatDuration }}</div>
+        <div class="stat-label">Total Time</div>
+      </div>
+      {% endif %}
+    </div>
+  </section>
+
+  {%- comment -%} Leverage {%- endcomment -%}
+  {% if efficiencyMultiplier %}
+  <section class="fade-in" aria-label="AI leverage" role="figure">
+    <div class="neon-leverage">
+      <div class="neon-leverage__multi">{{ efficiencyMultiplier }}</div>
+      <div class="neon-leverage__context">{{ totalDurationMinutes | formatDuration }} you &middot; <span>{{ totalAgentDurationMinutes | formatDuration }} agents</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="neon-leverage__bar"><div class="neon-leverage__human" style="width:{{ humanPct }}%"></div><div class="neon-leverage__agent" style="width:{{ agentPct }}%"></div></div>
+      {% endif %}
+    </div>
+  </section>
+  {% endif %}
+
+  {%- comment -%} Projects {%- endcomment -%}
+  {% if projects.size > 0 %}
+  <section class="projects-section" aria-label="Projects">
+    <h2 class="section-heading">Projects</h2>
+
+    {% for p in projects %}
+    <article class="project-card fade-in">
+      <a href="/{{ user.username }}/{{ p.slug }}" class="project-title">{{ p.title }}</a>
+      {% if p.narrative != blank %}
+      <p class="project-narrative">{{ p.narrative | truncate: 120 }}</p>
+      {% endif %}
+      {% if p.skills.size > 0 %}
+      <ul class="skills-list" aria-label="Skills used in {{ p.title }}">
+        {% for skill in p.skills %}
+        <li class="skill-chip">{{ skill }}</li>
+        {% endfor %}
+      </ul>
+      {% endif %}
+      <div class="project-meta">
+        <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 pTotalSource = 0 %}
+      {% for src in p.sourceCounts %}
+        {% assign pTotalSource = pTotalSource | plus: src.count %}
+      {% endfor %}
+      <div class="source-bar-container">
+        <div class="source-bar-label">Source mix</div>
+        <div class="source-bar" role="img">
+          {% for src in p.sourceCounts %}
+          {% if pTotalSource > 0 %}
+          {% assign pSrcPct = src.count | times: 100.0 | divided_by: pTotalSource | round %}
+          {% endif %}
+          <div class="{% if forloop.first %}claude{% else %}cursor{% endif %}" style="width: 0%" data-width="{{ pSrcPct }}"></div>
+          {% endfor %}
+        </div>
+        <div class="source-legend">
+          {% for src in p.sourceCounts %}
+          {% if pTotalSource > 0 %}
+          {% assign pSrcPctDisplay = src.count | times: 100.0 | divided_by: pTotalSource | round %}
+          {% endif %}
+          <span class="{% if forloop.first %}claude-label{% else %}cursor-label{% endif %}">{{ src.tool }} {{ pSrcPctDisplay }}%</span>
+          {% endfor %}
+        </div>
+      </div>
+      {% endif %}
+    </article>
+    {% endfor %}
+  </section>
+  {% endif %}
+
+  {%- comment -%} Contribution Overview {%- endcomment -%}
+  {% if sourceCounts.size > 0 %}
+  <section class="chart-section fade-in" aria-label="Contribution overview">
+    <h2 class="section-heading">Contribution Overview</h2>
+    <div class="contrib-chart">
+      <div style="display: flex; align-items: flex-end; gap: 2rem; justify-content: center; padding: 1.5rem 1rem;">
+        {% assign maxSourceCount = 0 %}
+        {% for src in sourceCounts %}
+        {% if src.count > maxSourceCount %}{% assign maxSourceCount = src.count %}{% endif %}
+        {% endfor %}
+        {% for src in sourceCounts %}
+        <div style="display: flex; flex-direction: column; align-items: center; gap: 0.5rem;">
+          {% if maxSourceCount > 0 %}
+          {% assign barHeight = src.count | times: 120 | divided_by: maxSourceCount %}
+          {% else %}
+          {% assign barHeight = 0 %}
+          {% endif %}
+          <div style="font-family: var(--font-mono); font-size: 0.75rem; color: {% if forloop.first %}var(--neon-pink){% else %}var(--neon-cyan){% endif %};">{{ src.count }}</div>
+          <div style="width: 80px; height: {{ barHeight }}px; background: {% if forloop.first %}var(--neon-pink){% else %}var(--neon-cyan){% endif %}; border-radius: 4px 4px 0 0; min-height: 8px;"></div>
+          <div style="font-family: var(--font-mono); font-size: 0.75rem; color: var(--neon-muted);">{{ src.tool }}</div>
+        </div>
+        {% endfor %}
+      </div>
+      <div class="chart-legend">
+        {% for src in sourceCounts %}
+        <span class="{% if forloop.first %}pink-label{% else %}cyan-label{% endif %}">{{ src.tool }} sessions</span>
+        {% endfor %}
+      </div>
+    </div>
+  </section>
+  {% endif %}
+
+  {%- comment -%} All Skills {%- endcomment -%}
+  {% assign allSkills = '' %}
+  {% for p in projects %}
+    {% for skill in p.skills %}
+      {% unless allSkills contains skill %}
+        {% if allSkills != '' %}{% assign allSkills = allSkills | append: ',' %}{% endif %}
+        {% assign allSkills = allSkills | append: skill %}
+      {% endunless %}
+    {% endfor %}
+  {% endfor %}
+  {% assign skillsArray = allSkills | split: ',' %}
+  {% if skillsArray.size > 0 %}
+  <section class="all-skills-section fade-in" aria-label="All skills across projects">
+    <h2 class="section-heading">All Skills</h2>
+    <ul class="skills-grid">
+      {% for skill in skillsArray %}
+      <li class="skill-chip">{{ skill }}</li>
+      {% endfor %}
+    </ul>
+  </section>
+  {% endif %}
+
+  {%- comment -%} Recent Activity {%- endcomment -%}
+  {% if recentSessions.size > 0 %}
+  <section class="activity-section fade-in" aria-label="Recent activity timeline">
+    <h2 class="section-heading">Recent Activity</h2>
+    <ol class="activity-list">
+      {% for s in recentSessions %}
+      <li class="activity-item">
+        {% if s.recordedAt %}
+        <div class="activity-date">{{ s.recordedAt | formatDate }}</div>
+        {% endif %}
+        <div class="activity-title"><a href="/{{ user.username }}/{{ s.projectSlug }}/{{ s.slug }}">{{ s.title }}</a></div>
+        <div class="activity-detail">{{ s.projectTitle }} &middot; {{ s.durationMinutes | formatDuration }} &middot; {{ s.locChanged | localeNumber }} LOC</div>
+      </li>
+      {% endfor %}
+    </ol>
+  </section>
+  {% endif %}
+
+  {%- comment -%} Scroll + counter animations {%- endcomment -%}
+
+</div>

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

@@ -0,0 +1,225 @@
+<div class="heyiam-project neon" data-render-version="2" data-template="neon"{% if sessionBaseUrl %} data-session-base-url="{{ sessionBaseUrl }}"{% endif %} data-username="{{ user.username }}" data-project-slug="{{ project.slug }}">
+
+  <div class="grid-bg" aria-hidden="true"></div>
+
+  <div class="container">
+
+    {%- comment -%} Breadcrumb {%- endcomment -%}
+    <div class="breadcrumb" aria-label="Breadcrumb">
+      <a href="/{{ user.username }}">{{ user.username }}</a> /
+      <span>{{ project.slug }}</span>
+    </div>
+
+    {%- comment -%} Project Header {%- endcomment -%}
+    <header class="project-header fade-in">
+      <h1 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 %}
+    <div class="screenshot fade-in browser-chrome" role="img" aria-label="{{ project.title }} screenshot">
+      <div class="screenshot-chrome">
+        <span class="screenshot-dot"></span>
+        <span class="screenshot-dot"></span>
+        <span class="screenshot-dot"></span>
+      </div>
+      <img src="{{ project.screenshotUrl }}" alt="{{ project.title }} screenshot" class="screenshot-img">
+    </div>
+    {% endif %}
+
+    {%- comment -%} Narrative {%- endcomment -%}
+    {% if project.narrative != blank %}
+    <section class="narrative fade-in" aria-label="Project narrative">
+      <p>{{ project.narrative }}</p>
+    </section>
+    {% endif %}
+
+    {%- comment -%} Stats {%- endcomment -%}
+    <section class="fade-in" aria-label="Project statistics">
+      <div class="stats-row">
+        <div class="stat-item" role="figure" aria-label="{{ project.totalSessions }} sessions">
+          <div class="value" data-target="{{ project.totalSessions }}">0</div>
+          <div class="label">Sessions</div>
+        </div>
+        <div class="stat-item" role="figure" aria-label="{{ project.totalLoc }} lines of code">
+          <div class="value" data-target="{{ project.totalLoc }}" data-format="comma">0</div>
+          <div class="label">LOC</div>
+        </div>
+        <div class="stat-item" role="figure" aria-label="{{ project.totalFilesChanged }} files">
+          <div class="value" data-target="{{ project.totalFilesChanged }}">0</div>
+          <div class="label">Files</div>
+        </div>
+        {% if project.totalTokens %}
+        <div class="stat-item" role="figure" aria-label="{{ project.totalTokens | formatTokens }} tokens">
+          <div class="value">{{ project.totalTokens | formatTokens }}</div>
+          <div class="label">Tokens</div>
+        </div>
+        {% endif %}
+        {% if efficiencyMultiplier %}
+        <div class="stat-item" role="figure" aria-label="{{ efficiencyMultiplier }} leverage">
+          <div class="value">{{ efficiencyMultiplier }}</div>
+          <div class="label">Leverage</div>
+        </div>
+        {% else %}
+        <div class="stat-item" role="figure" aria-label="{{ project.totalDurationMinutes | formatDuration }} duration">
+          <div class="value">{{ project.totalDurationMinutes | formatDuration }}</div>
+          <div class="label">{{ durationLabel }}</div>
+        </div>
+        {% endif %}
+      </div>
+    </section>
+
+    {%- comment -%} Leverage {%- endcomment -%}
+    {% if efficiencyMultiplier %}
+    <section class="fade-in" aria-label="AI leverage" role="figure">
+      <div class="neon-leverage">
+        <div class="neon-leverage__multi">{{ efficiencyMultiplier }}</div>
+        <div class="neon-leverage__context">{{ project.totalDurationMinutes | formatDuration }} you &middot; <span>{{ project.totalAgentDurationMinutes | formatDuration }} agents</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="neon-leverage__bar"><div class="neon-leverage__human" style="width:{{ humanPct }}%"></div><div class="neon-leverage__agent" style="width:{{ agentPct }}%"></div></div>
+        {% endif %}
+      </div>
+    </section>
+    {% endif %}
+
+    {%- comment -%} Work Timeline Chart (CSS-only) {%- endcomment -%}
+    {% if featuredSessions.size > 0 %}
+    {% assign maxDuration = 1 %}
+    {% for s in featuredSessions %}
+      {% if s.durationMinutes > maxDuration %}
+        {% assign maxDuration = s.durationMinutes %}
+      {% endif %}
+    {% endfor %}
+    <section class="timeline-section fade-in" aria-label="Work timeline">
+      <h2 class="section-heading">Work Timeline</h2>
+      <div class="timeline-chart" role="img" aria-label="Session durations chart showing {{ featuredSessions.size }} sessions">
+        {% for s in featuredSessions %}
+        <div class="timeline-row">
+          <span class="timeline-num">{{ forloop.index }}</span>
+          <div class="timeline-bar-track">
+            {% assign barPct = s.durationMinutes | times: 100 | divided_by: maxDuration %}
+            <div class="timeline-bar {% if s.sourceTool == 'Cursor' %}cursor{% else %}claude{% endif %}" data-width="{{ barPct }}" title="{{ s.title }}">{{ s.title }}</div>
+          </div>
+          <span class="timeline-duration">{{ s.durationMinutes }}m</span>
+        </div>
+        {% endfor %}
+      </div>
+    </section>
+    {% endif %}
+
+    {%- comment -%} Phases {%- endcomment -%}
+    {% if arc.size > 0 %}
+    <section class="phases-section fade-in" aria-label="Project phases">
+      <h2 class="section-heading">Phases</h2>
+      <ol class="phase-list">
+        {% for item in arc %}
+        <li class="phase-item">
+          <span class="phase-num">{{ item.phase }}</span>
+          <div>
+            <div class="phase-name">{{ item.title }}</div>
+            {% if item.dates %}
+            <div class="phase-dates">{{ item.dates }}</div>
+            {% endif %}
+            <div class="phase-desc">{{ item.description }}</div>
+          </div>
+        </li>
+        {% endfor %}
+      </ol>
+    </section>
+    {% endif %}
+
+    {%- comment -%} Skills {%- endcomment -%}
+    {% if project.skills.size > 0 %}
+    <section class="skills-section fade-in" aria-label="Technologies used">
+      <h2 class="section-heading">Skills</h2>
+      <ul class="skills-list">
+        {% for skill in project.skills %}
+        <li class="skill-chip">{{ skill }}</li>
+        {% endfor %}
+      </ul>
+    </section>
+    {% endif %}
+
+    {%- comment -%} Key Decisions {%- endcomment -%}
+    {% if arc.size > 0 %}
+    <section class="decisions-section fade-in" aria-label="Key decisions">
+      <h2 class="section-heading">Key Decisions</h2>
+      <ol class="decision-list">
+        {% for item in arc %}
+        <li class="decision-item">{{ item.description }}</li>
+        {% endfor %}
+      </ol>
+    </section>
+    {% endif %}
+
+    {%- comment -%} Source Breakdown {%- endcomment -%}
+    {% if sourceCounts.size > 0 %}
+    <section class="source-section fade-in" aria-label="Source breakdown">
+      <h2 class="section-heading">Source Breakdown</h2>
+      {% assign totalSourceSessions = 0 %}
+      {% for src in sourceCounts %}
+        {% assign totalSourceSessions = totalSourceSessions | plus: src.count %}
+      {% endfor %}
+      <div class="source-bar-container">
+        <div class="source-bar" role="img">
+          {% for src in sourceCounts %}
+          {% if totalSourceSessions > 0 %}
+          {% assign srcPct = src.count | times: 100.0 | divided_by: totalSourceSessions | round %}
+          {% endif %}
+          <div class="{% if forloop.first %}claude{% else %}cursor{% endif %}" style="width: {{ srcPct }}%"></div>
+          {% endfor %}
+        </div>
+        <div class="source-legend">
+          {% for src in sourceCounts %}
+          {% if totalSourceSessions > 0 %}
+          {% assign srcPctDisplay = src.count | times: 100.0 | divided_by: totalSourceSessions | round %}
+          {% endif %}
+          <span class="{% if forloop.first %}claude-label{% else %}cursor-label{% endif %}">{{ src.tool }} {{ srcPctDisplay }}% ({{ src.count }} session{% if src.count != 1 %}s{% endif %})</span>
+          {% endfor %}
+        </div>
+      </div>
+    </section>
+    {% endif %}
+
+    {%- comment -%} Featured Sessions {%- endcomment -%}
+    {% if featuredSessions.size > 0 %}
+    <section class="sessions-section fade-in" aria-label="Featured sessions">
+      <h2 class="section-heading">Featured Sessions</h2>
+      <div class="session-grid">
+        {% for s in featuredSessions %}
+        <article class="session-card">
+          <a href="{{ sessionBaseUrl }}/{{ s.slug }}{{ sessionSuffix }}">{{ s.title }}</a>
+          <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>
+          {% if s.skills.size > 0 %}
+          <span class="session-tag">{{ s.skills | first }}</span>
+          {% endif %}
+        </article>
+        {% endfor %}
+      </div>
+    </section>
+    {% endif %}
+
+  </div>
+
+  {%- comment -%} Animations {%- endcomment -%}
+
+</div>

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

@@ -0,0 +1,195 @@
+<div class="heyiam-session neon" data-render-version="2" data-template="neon">
+
+  <div class="grid-bg" aria-hidden="true"></div>
+
+  <div class="container">
+
+    {%- comment -%} Breadcrumb {%- endcomment -%}
+    <div class="breadcrumb" aria-label="Breadcrumb">
+      <a href="/{{ user.username }}">{{ user.username }}</a>
+      {% if projectSlug %}
+       / <a href="/{{ user.username }}/{{ projectSlug }}">{{ projectSlug }}</a>
+      {% endif %}
+       / <span>{{ session.title }}</span>
+    </div>
+
+    {%- comment -%} Session Header {%- endcomment -%}
+    <header class="session-header fade-in">
+      <h1>{{ session.title }}</h1>
+      <div class="session-meta-row">
+        {% if session.recordedAt %}
+        <span>{{ session.recordedAt | formatDate }}</span>
+        {% endif %}
+        {% if session.sourceTool %}
+        <span class="source-badge">{{ session.sourceTool }}</span>
+        {% endif %}
+        <span>{{ session.durationMinutes | formatDuration }}{% if session.wallClockMinutes %} ({{ session.wallClockMinutes | formatDuration }} wall){% endif %}</span>
+        <span>{{ session.turns }} turns</span>
+      </div>
+      <div class="session-stats-grid">
+        <div class="session-stat" role="figure" aria-label="{{ session.durationMinutes }} minutes duration">
+          <div class="value" data-target="{{ session.durationMinutes }}">0</div>
+          <div class="label">Minutes</div>
+        </div>
+        <div class="session-stat" role="figure" aria-label="{{ session.locChanged }} lines of code">
+          <div class="value" data-target="{{ session.locChanged }}">0</div>
+          <div class="label">LOC</div>
+        </div>
+        <div class="session-stat" role="figure" aria-label="{{ session.turns }} turns">
+          <div class="value" data-target="{{ session.turns }}">0</div>
+          <div class="label">Turns</div>
+        </div>
+        <div class="session-stat" role="figure" aria-label="{{ session.filesChanged }} files changed">
+          <div class="value" data-target="{{ session.filesChanged }}">0</div>
+          <div class="label">Files</div>
+        </div>
+      </div>
+    </header>
+
+    {%- comment -%} Dev Take {%- endcomment -%}
+    {% if session.devTake != blank %}
+    <div class="dev-take fade-in">
+      <div class="dev-take-label">Dev Take</div>
+      <p>{{ session.devTake }}</p>
+    </div>
+    {% endif %}
+
+    {%- comment -%} Main Content + Sidebar {%- endcomment -%}
+    <div class="content-grid">
+
+      {%- comment -%} Main Column {%- endcomment -%}
+      <div>
+
+        {%- comment -%} Narrative {%- endcomment -%}
+        {% if session.narrative != blank %}
+        <section class="fade-in" aria-label="Session narrative" style="margin-bottom: 2.5rem;">
+          <h2 class="section-heading">Narrative</h2>
+          <p style="color: var(--neon-text-secondary); font-size: 0.9375rem; line-height: 1.7;">{{ session.narrative }}</p>
+        </section>
+        {% endif %}
+
+        {%- comment -%} Highlights {%- endcomment -%}
+        {% if session.highlights.size > 0 %}
+        <section class="fade-in" aria-label="Session highlights" style="margin-bottom: 2.5rem;">
+          <h2 class="section-heading">Highlights</h2>
+          <ul class="highlights-list" style="list-style: none; padding: 0;">
+            {% for h in session.highlights %}
+            <li style="font-size: 0.875rem; color: var(--neon-text-secondary); line-height: 1.7; padding: 0.375rem 0; border-bottom: 1px solid rgba(244, 114, 182, 0.08);">{{ h }}</li>
+            {% endfor %}
+          </ul>
+        </section>
+        {% endif %}
+
+        {%- comment -%} Execution Path (Beats) {%- endcomment -%}
+        {% if session.beats.size > 0 %}
+        <section class="beats-section fade-in" aria-label="Execution path">
+          <h2 class="section-heading">Execution Path</h2>
+          <ol class="beats-list beat-list">
+            {% for beat in session.beats %}
+            <li class="beat-item">
+              <div class="beat-title">{{ beat.title }}</div>
+              <div class="beat-desc">{{ beat.body }}</div>
+            </li>
+            {% endfor %}
+          </ol>
+        </section>
+        {% endif %}
+
+        {%- comment -%} Q&A {%- endcomment -%}
+        {% if session.qaPairs.size > 0 %}
+        <section class="qa-section fade-in" aria-label="Questions and answers">
+          <h2 class="section-heading">Q&amp;A</h2>
+          {% for qa in session.qaPairs %}
+          <article class="qa-item qa-pair">
+            <div class="qa-question">{{ qa.question }}</div>
+            <div class="qa-answer">{{ qa.answer }}</div>
+          </article>
+          {% endfor %}
+        </section>
+        {% endif %}
+
+        {%- comment -%} Agent Summary {%- endcomment -%}
+        {% if session.agentSummary %}
+        <section class="agents-section fade-in" aria-label="Agent summary">
+          <h2 class="section-heading">Agent Summary</h2>
+          {% assign maxAgentLoc = 0 %}
+          {% for agent in session.agentSummary.agents %}
+            {% if agent.loc_changed > maxAgentLoc %}
+              {% assign maxAgentLoc = agent.loc_changed %}
+            {% endif %}
+          {% endfor %}
+          <div class="agent-chart" role="img" aria-label="Agent contributions chart">
+            {% for agent in session.agentSummary.agents %}
+            <div class="agent-row">
+              <span class="agent-name">{{ 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 agent_css_classes = 'backend,qa,frontend,security,reviewer' | split: ',' %}
+                {% assign colorIdx = forloop.index0 | modulo: 5 %}
+                <div class="agent-bar {{ agent_css_classes[colorIdx] }}" data-width="{{ barPct }}" title="{{ agent.duration_minutes }}m, {{ agent.loc_changed }} LOC"></div>
+              </div>
+              <span class="agent-duration">{{ agent.duration_minutes }}m</span>
+            </div>
+            {% endfor %}
+          </div>
+        </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">
+          <h3 class="sidebar-heading">Tools Used</h3>
+          <table class="tools-table tool-list" aria-label="Tool usage counts">
+            <tbody>
+              {% for t in session.toolBreakdown %}
+              <tr><td>{{ t.tool }}</td><td>{{ t.count }}</td></tr>
+              {% endfor %}
+            </tbody>
+          </table>
+        </div>
+        {% endif %}
+
+        {%- comment -%} Files Changed {%- endcomment -%}
+        {% if session.topFiles.size > 0 %}
+        <div class="sidebar-card">
+          <h3 class="sidebar-heading">Files Changed</h3>
+          <ul class="files-list file-list" aria-label="Files modified in this session">
+            {% 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 %} <span style="color: #ef4444;">-{{ f.deletions }}</span>{% endif %}</span>
+            </li>
+            {% endfor %}
+          </ul>
+        </div>
+        {% endif %}
+
+        {%- comment -%} Skills {%- endcomment -%}
+        {% if session.skills.size > 0 %}
+        <div class="sidebar-card">
+          <h3 class="sidebar-heading">Skills</h3>
+          <ul class="sidebar-skills" aria-label="Technologies used in this session">
+            {% for skill in session.skills %}
+            <li class="sidebar-skill">{{ skill }}</li>
+            {% endfor %}
+          </ul>
+        </div>
+        {% endif %}
+
+      </aside>
+
+    </div>
+  </div>
+
+  {%- comment -%} Animations {%- endcomment -%}
+
+</div>