heyiam 0.2.28 → 0.3.0

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

@@ -0,0 +1,271 @@
+<div class="heyiam-portfolio glacier" data-render-version="2" data-template="glacier" data-username="{{ user.username }}">
+
+  {%- comment -%} Header {%- endcomment -%}
+  {% if hasProfile %}
+  <header class="header container">
+    {% if user.photoUrl %}
+    <img src="{{ user.photoUrl }}" alt="{{ user.displayName }}" class="header-photo">
+    {% elsif user.displayName != blank %}
+    <div class="header-avatar" aria-hidden="true">{{ user.displayName | slice: 0 }}</div>
+    {% endif %}
+    {% if user.displayName != blank %}
+    <h1>{{ user.displayName }}</h1>
+    {% endif %}
+    {% if user.bio %}
+    <p class="header-bio">{{ user.bio }}</p>
+    {% endif %}
+    {% if user.location %}
+    <p class="header-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="header-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 }}"><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 %}
+  </header>
+  {% endif %}
+
+  {%- comment -%} Stats {%- endcomment -%}
+  <section class="container" aria-label="Aggregate statistics">
+    <div class="stats">
+      <div class="stat-card frost fade-up">
+        <span class="stat-value">{{ projects.size }}</span>
+        <span class="stat-label">Projects</span>
+      </div>
+      <div class="stat-card frost fade-up">
+        <span class="stat-value">{{ totalSessions }}</span>
+        <span class="stat-label">Sessions</span>
+      </div>
+      <div class="stat-card frost fade-up">
+        <span class="stat-value">{{ totalLoc | localeNumber }}</span>
+        <span class="stat-label">Lines Changed</span>
+      </div>
+      {% if efficiencyMultiplier %}
+      <div class="stat-card frost fade-up">
+        <span class="stat-value">{{ totalDurationMinutes | formatDuration }}</span>
+        <span class="stat-label">{{ durationLabel }}</span>
+      </div>
+      {% else %}
+      <div class="stat-card frost fade-up">
+        <span class="stat-value">{{ totalDurationMinutes | formatDuration }}</span>
+        <span class="stat-label">Time</span>
+      </div>
+      {% endif %}
+    </div>
+
+    {% if efficiencyMultiplier %}
+    {% assign totalCombined = totalDurationMinutes | plus: totalAgentDurationMinutes %}
+    {% if totalCombined > 0 %}
+    {% assign humanPct = totalDurationMinutes | times: 100 | divided_by: totalCombined %}
+    {% assign agentPct = 100 | minus: humanPct %}
+    <div class="gl-leverage frost fade-up" role="figure" aria-label="Leverage: {{ efficiencyMultiplier }} multiplier">
+      <svg width="64" height="64" viewBox="0 0 64 64">
+        <circle cx="32" cy="32" r="26" fill="none" stroke="rgba(56,189,248,0.12)" stroke-width="5"/>
+        <circle cx="32" cy="32" r="26" fill="none" stroke="var(--accent)" stroke-width="5" stroke-dasharray="{{ humanPct | times: 163 | divided_by: 100 }} 163" stroke-dashoffset="-33" stroke-linecap="round"/>
+        <text x="32" y="36" text-anchor="middle" font-family="var(--font-display)" font-size="14" font-weight="700" fill="var(--accent-dark)">{{ efficiencyMultiplier }}</text>
+      </svg>
+      <div class="gl-leverage__values">
+        <span class="gl-leverage__human">{{ totalDurationMinutes | formatDuration }} <small>you</small></span>
+        <span class="gl-leverage__agent">{{ totalAgentDurationMinutes | formatDuration }} <small>agents</small></span>
+      </div>
+    </div>
+    {% endif %}
+    {% endif %}
+  </section>
+
+  {%- comment -%} Projects {%- endcomment -%}
+  {% if projects.size > 0 %}
+  <section class="projects container" aria-label="Projects">
+    <h2 class="section-heading">Projects</h2>
+    <div class="project-list">
+      {% for p in projects %}
+      <article class="project-card frost fade-up">
+        <div class="project-card-header">
+          <a href="/{{ user.username }}/{{ p.slug }}" class="project-name">{{ p.title }}</a>
+        </div>
+        {% if p.narrative %}
+        <p class="project-narrative">{{ p.narrative }}</p>
+        {% endif %}
+        {% if p.skills.size > 0 %}
+        <div class="project-skills">
+          {% for skill in p.skills %}
+          <span class="skill-chip">{{ skill }}</span>
+          {% endfor %}
+        </div>
+        {% endif %}
+        <div class="project-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 %}
+        {% assign pFirstPct = p.sourceCounts[0].count | times: 100.0 | divided_by: pTotalSrc | round %}
+        <div class="source-bar" role="img" aria-label="Source mix">
+          <div class="source-bar-fill" style="width: {{ pFirstPct }}%"></div>
+        </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" style="background: {% if forloop.first %}var(--accent){% else %}#e2e8f0{% endif %}"></span>{{ src.tool }} {{ pSrcPct }}%</span>
+          {% endfor %}
+        </div>
+        {% endif %}
+        {% endif %}
+      </article>
+      {% endfor %}
+    </div>
+  </section>
+  {% endif %}
+
+  {%- comment -%} Activity Chart {%- endcomment -%}
+  {% if activityByMonth.size > 0 %}
+  {% assign maxLoc = 0 %}
+  {% for m in activityByMonth %}
+    {% for proj in m.projects %}
+      {% if proj.loc > maxLoc %}{% assign maxLoc = proj.loc %}{% endif %}
+    {% endfor %}
+  {% endfor %}
+  <section class="container fade-up" aria-label="Activity overview" style="margin-bottom: 48px;">
+    <h2 class="section-heading">Activity</h2>
+    <div class="frost" style="padding: 24px;">
+      <svg viewBox="0 0 900 220" role="img" aria-label="Monthly activity chart showing lines of code per project" style="width: 100%; height: auto;">
+        <line x1="60" y1="20" x2="60" y2="170" stroke="rgba(56,189,248,0.1)" stroke-width="1"/>
+        <line x1="60" y1="170" x2="880" y2="170" stroke="rgba(56,189,248,0.1)" stroke-width="1"/>
+        <line x1="60" y1="110" x2="880" y2="110" stroke="rgba(56,189,248,0.06)" stroke-width="1"/>
+        <line x1="60" y1="50" x2="880" y2="50" stroke="rgba(56,189,248,0.06)" stroke-width="1"/>
+        <text x="50" y="174" fill="#64748b" font-family="IBM Plex Mono, monospace" font-size="11" text-anchor="end">0</text>
+        {% if maxLoc > 0 %}
+        {% assign halfMax = maxLoc | divided_by: 2 %}
+        <text x="50" y="114" fill="#64748b" font-family="IBM Plex Mono, monospace" font-size="11" text-anchor="end">{{ halfMax | formatLoc }}</text>
+        <text x="50" y="54" fill="#64748b" font-family="IBM Plex Mono, monospace" font-size="11" text-anchor="end">{{ maxLoc | formatLoc }}</text>
+        {% endif %}
+        {% assign monthSpacing = 820 | divided_by: activityByMonth.size %}
+        {% for m in activityByMonth %}
+          {% assign outerIdx = forloop.index0 %}
+          {% assign groupX = outerIdx | times: monthSpacing | plus: 80 %}
+          {% for proj in m.projects %}
+            {% if maxLoc > 0 %}
+              {% assign barH = proj.loc | times: 150 | divided_by: maxLoc %}
+            {% else %}
+              {% assign barH = 0 %}
+            {% endif %}
+            {% assign barY = 170 | minus: barH %}
+            {% assign barX = forloop.index0 | times: 70 | plus: groupX %}
+            {% if forloop.index0 == 0 %}{% assign barFill = "#38bdf8" %}{% assign barOp = "0.8" %}
+            {% elsif forloop.index0 == 1 %}{% assign barFill = "#7dd3fc" %}{% assign barOp = "0.7" %}
+            {% else %}{% assign barFill = "#bae6fd" %}{% assign barOp = "0.8" %}
+            {% endif %}
+            <rect x="{{ barX }}" y="{{ barY }}" width="60" height="{{ barH }}" rx="6" fill="{{ barFill }}" opacity="{{ barOp }}" aria-label="{{ proj.name }} {{ m.month }}: {{ proj.loc }} LOC"/>
+          {% endfor %}
+          {% assign labelX = groupX | plus: 35 %}
+          <text x="{{ labelX }}" y="192" fill="#64748b" font-family="IBM Plex Mono, monospace" font-size="11" text-anchor="middle">{{ m.month }}</text>
+        {% endfor %}
+        {% assign legendX = 560 %}
+        {% assign legendY = 20 %}
+        {% for p in projects %}
+          {% if forloop.index0 == 0 %}{% assign dotFill = "#38bdf8" %}{% assign dotOp = "0.8" %}
+          {% elsif forloop.index0 == 1 %}{% assign dotFill = "#7dd3fc" %}{% assign dotOp = "0.7" %}
+          {% else %}{% assign dotFill = "#bae6fd" %}{% assign dotOp = "0.8" %}
+          {% endif %}
+          {% assign dotY = forloop.index0 | times: 20 | plus: legendY %}
+          <rect x="{{ legendX }}" y="{{ dotY }}" width="12" height="12" rx="3" fill="{{ dotFill }}" opacity="{{ dotOp }}"/>
+          {% assign textX = legendX | plus: 20 %}
+          {% assign textY = dotY | plus: 11 %}
+          <text x="{{ textX }}" y="{{ textY }}" fill="#64748b" font-family="IBM Plex Mono, monospace" font-size="11">{{ p.title }}</text>
+          {% if forloop.index0 >= 2 %}{% break %}{% endif %}
+        {% endfor %}
+      </svg>
+    </div>
+  </section>
+  {% endif %}
+
+  {%- comment -%} Skills Overview {%- endcomment -%}
+  {% if allSkills.size > 0 %}
+  <section class="container fade-up" aria-label="All skills">
+    <h2 class="section-heading">Skills</h2>
+    <div class="frost" style="padding: 28px;">
+      <div style="display: flex; flex-wrap: wrap; gap: 10px; margin-bottom: 24px;">
+        {% for skill in allSkills %}
+        <span class="skill-chip">{{ skill.name }}</span>
+        {% endfor %}
+      </div>
+      {% if topSkills.size > 0 %}
+      <div style="display: flex; flex-direction: column; gap: 12px;">
+        {% assign maxSkillCount = topSkills[0].projectCount %}
+        {% for skill in topSkills %}
+        <div>
+          <div style="display: flex; justify-content: space-between; margin-bottom: 4px;">
+            <span style="font-family: var(--font-mono); font-size: 13px; color: var(--fg);">{{ skill.name }}</span>
+            <span style="font-family: var(--font-mono); font-size: 12px; color: var(--fg-muted);">{{ skill.projectCount }} project{% if skill.projectCount != 1 %}s{% endif %}</span>
+          </div>
+          <div style="height: 6px; border-radius: 3px; background: rgba(56,189,248,0.1); overflow: hidden;">
+            {% if maxSkillCount > 0 %}
+            {% assign skillPct = skill.projectCount | times: 100 | divided_by: maxSkillCount %}
+            {% else %}
+            {% assign skillPct = 0 %}
+            {% endif %}
+            <div style="height: 100%; width: {{ skillPct }}%; border-radius: 3px; background: linear-gradient(90deg, var(--accent), #7dd3fc);"></div>
+          </div>
+        </div>
+        {% endfor %}
+      </div>
+      {% endif %}
+    </div>
+  </section>
+  {% endif %}
+
+  {%- comment -%} Source Overview {%- endcomment -%}
+  {% if sourceCounts.size > 0 %}
+  <section class="container fade-up" aria-label="Overall source breakdown">
+    <h2 class="section-heading">Source Breakdown</h2>
+    <div class="frost" style="padding: 28px;">
+      <div style="display: grid; grid-template-columns: repeat({{ sourceCounts.size }}, 1fr); gap: 24px; margin-bottom: 20px;">
+        {% 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;">
+          <div style="font-family: var(--font-display); font-size: 1.5rem; font-weight: 700; color: {% if forloop.first %}var(--accent){% else %}var(--fg-muted){% endif %};">{{ srcPct }}%</div>
+          <div style="font-family: var(--font-mono); font-size: 12px; color: var(--fg-muted); margin-top: 4px;">{{ src.tool }}</div>
+          <div style="font-family: var(--font-mono); font-size: 11px; color: var(--fg-muted); margin-top: 2px;">{{ src.count }} sessions</div>
+        </div>
+        {% endfor %}
+      </div>
+      {% if totalSourceSessions > 0 %}
+      <div style="height: 8px; border-radius: 4px; overflow: hidden; display: flex; background: rgba(56,189,248,0.1);">
+        {% for src in sourceCounts %}
+        {% assign srcPct = src.count | times: 100 | divided_by: totalSourceSessions %}
+        <div style="width: {{ srcPct }}%; height: 100%; background: {% if forloop.first %}var(--accent){% else %}#e2e8f0{% endif %};"></div>
+        {% endfor %}
+      </div>
+      {% endif %}
+    </div>
+  </section>
+  {% endif %}
+
+  {%- comment -%} Fade-up animation {%- endcomment -%}
+
+</div>

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

@@ -0,0 +1,288 @@
+<div class="heyiam-project glacier" data-render-version="2" data-template="glacier"{% if sessionBaseUrl %} data-session-base-url="{{ sessionBaseUrl }}"{% endif %} data-username="{{ user.username }}" data-project-slug="{{ project.slug }}">
+
+  {%- comment -%} Breadcrumb {%- endcomment -%}
+  <div class="container">
+    <nav class="breadcrumb" aria-label="Breadcrumb">
+      <a href="/{{ user.username }}">{{ user.username }}</a>
+      <span class="breadcrumb-sep">/</span>
+      <span aria-current="page">{{ project.slug }}</span>
+    </nav>
+
+    {%- comment -%} Header {%- endcomment -%}
+    <header class="project-header">
+      <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 %}
+    <div class="screenshot fade-up" role="img" aria-label="{{ project.title }} screenshot" data-editable="screenshot">
+      <div class="screenshot-chrome">
+        <span class="screenshot-dot"></span>
+        <span class="screenshot-dot"></span>
+        <span class="screenshot-dot"></span>
+        <span class="screenshot-url">Preview</span>
+      </div>
+      <div class="screenshot-body">
+        <img src="{{ project.screenshotUrl }}" alt="{{ project.title }} screenshot" style="width: 100%; display: block;">
+      </div>
+    </div>
+    {% endif %}
+
+    {%- comment -%} Narrative {%- endcomment -%}
+    {% if project.narrative %}
+    <section class="narrative fade-up" aria-label="Project narrative">
+      <h2 class="section-heading">Narrative</h2>
+      <p>{{ project.narrative }}</p>
+    </section>
+    {% endif %}
+
+    {%- comment -%} Stats {%- endcomment -%}
+    <section class="fade-up" aria-label="Project statistics">
+      <div class="stats">
+        <div class="stat-card frost">
+          <span class="stat-value">{{ project.totalSessions }}</span>
+          <span class="stat-label">Sessions</span>
+        </div>
+        <div class="stat-card frost">
+          <span class="stat-value">{{ project.totalLoc | localeNumber }}</span>
+          <span class="stat-label">LOC</span>
+        </div>
+        <div class="stat-card frost">
+          <span class="stat-value">{{ project.totalFilesChanged }}</span>
+          <span class="stat-label">Files</span>
+        </div>
+        {% if project.totalTokens %}
+        <div class="stat-card frost">
+          <span class="stat-value">{{ project.totalTokens | formatTokens }}</span>
+          <span class="stat-label">Tokens</span>
+        </div>
+        {% endif %}
+        {% if efficiencyMultiplier %}
+        <div class="stat-card frost">
+          <span class="stat-value">{{ project.totalDurationMinutes | formatDuration }}</span>
+          <span class="stat-label">{{ durationLabel }}</span>
+        </div>
+        {% else %}
+        <div class="stat-card frost">
+          <span class="stat-value">{{ project.totalDurationMinutes | formatDuration }}</span>
+          <span class="stat-label">Time</span>
+        </div>
+        {% endif %}
+      </div>
+
+      {% if efficiencyMultiplier %}
+      {% 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="gl-leverage frost" role="figure" aria-label="Leverage: {{ efficiencyMultiplier }} multiplier">
+        <svg width="64" height="64" viewBox="0 0 64 64">
+          <circle cx="32" cy="32" r="26" fill="none" stroke="rgba(56,189,248,0.12)" stroke-width="5"/>
+          <circle cx="32" cy="32" r="26" fill="none" stroke="var(--accent)" stroke-width="5" stroke-dasharray="{{ humanPct | times: 163 | divided_by: 100 }} 163" stroke-dashoffset="-33" stroke-linecap="round"/>
+          <text x="32" y="36" text-anchor="middle" font-family="var(--font-display)" font-size="14" font-weight="700" fill="var(--accent-dark)">{{ efficiencyMultiplier }}</text>
+        </svg>
+        <div class="gl-leverage__values">
+          <span class="gl-leverage__human">{{ project.totalDurationMinutes | formatDuration }} <small>you</small></span>
+          <span class="gl-leverage__agent">{{ project.totalAgentDurationMinutes | formatDuration }} <small>agents</small></span>
+        </div>
+      </div>
+      {% endif %}
+      {% endif %}
+    </section>
+
+    {%- comment -%} Work timeline chart (CSS-only SVG bar chart) {%- endcomment -%}
+    {% if featuredSessions.size > 0 %}
+    <section class="chart-section fade-up" aria-label="Work timeline">
+      <h2 class="section-heading">Work Timeline</h2>
+      <div class="chart-container frost">
+        {% assign maxLoc = 1 %}
+        {% for s in featuredSessions %}
+          {% if s.locChanged > maxLoc %}{% assign maxLoc = s.locChanged %}{% endif %}
+        {% endfor %}
+        {% assign barCount = featuredSessions.size %}
+        {% assign barWidth = 80 %}
+        {% assign barGap = 100 %}
+        {% assign chartW = barCount | times: barGap | plus: 60 %}
+        {% assign chartH = 200 %}
+        <svg class="chart-svg" viewBox="0 0 {{ chartW }} {{ chartH }}" role="img" aria-label="Bar chart of sessions by lines of code">
+          <line x1="60" y1="20" x2="60" y2="160" class="chart-grid-line"/>
+          <line x1="60" y1="160" x2="{{ chartW | minus: 20 }}" y2="160" class="chart-grid-line"/>
+          <line x1="60" y1="100" x2="{{ chartW | minus: 20 }}" y2="100" class="chart-grid-line"/>
+          <line x1="60" y1="40" x2="{{ chartW | minus: 20 }}" y2="40" class="chart-grid-line"/>
+          <text x="50" y="164" class="chart-label" text-anchor="end">0</text>
+          {% assign halfMax = maxLoc | divided_by: 2 %}
+          <text x="50" y="104" class="chart-label" text-anchor="end">{{ halfMax }}</text>
+          <text x="50" y="44" class="chart-label" text-anchor="end">{{ maxLoc }}</text>
+          {% for s in featuredSessions %}
+            {% assign barX = forloop.index0 | times: barGap | plus: 80 %}
+            {% assign barH = s.locChanged | times: 140 | divided_by: maxLoc %}
+            {% assign barY = 160 | minus: barH %}
+            {% assign labelX = barX | plus: 40 %}
+            {% assign labelY = barY | minus: 7 %}
+            <rect x="{{ barX }}" y="{{ barY }}" width="{{ barWidth }}" height="{{ barH }}" class="chart-bar" aria-label="{{ s.title }}: {{ s.locChanged }} LOC"/>
+            <text x="{{ labelX }}" y="{{ labelY }}" class="chart-value" text-anchor="middle">{{ s.locChanged }}</text>
+            <text x="{{ labelX }}" y="180" class="chart-label" text-anchor="middle">{{ s.recordedAt | formatDateShort }}</text>
+          {% endfor %}
+        </svg>
+      </div>
+    </section>
+    {% endif %}
+
+    {%- comment -%} Phases {%- endcomment -%}
+    {% if arc.size > 0 %}
+    <section class="phases fade-up" aria-label="Project phases">
+      <h2 class="section-heading">Phases</h2>
+      <div class="phase-list">
+        {% for item in arc %}
+        <div class="phase-item frost">
+          <span class="phase-number">{{ item.phase }}</span>
+          <div class="phase-content">
+            <div class="phase-name">{{ item.title }}</div>
+            {% if item.dates %}
+            <div class="phase-dates">{{ item.dates }}</div>
+            {% endif %}
+            {% if item.description %}
+            <div class="phase-desc">{{ item.description }}</div>
+            {% endif %}
+          </div>
+        </div>
+        {% endfor %}
+      </div>
+    </section>
+    {% endif %}
+
+    {%- comment -%} Skills {%- endcomment -%}
+    {% if project.skills.size > 0 %}
+    <section class="skills-section fade-up" aria-label="Technologies used">
+      <h2 class="section-heading">Skills</h2>
+      <div class="skills-grid">
+        {% 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="decisions fade-up" aria-label="Key decisions">
+      <h2 class="section-heading">Key Decisions</h2>
+      <div class="decision-list">
+        {% for item in arc %}
+        <div class="decision-item frost">
+          <span class="decision-number">{{ item.phase }}</span>
+          <p class="decision-text">{{ item.description }}</p>
+        </div>
+        {% endfor %}
+      </div>
+    </section>
+    {% endif %}
+
+    {%- comment -%} Source breakdown {%- endcomment -%}
+    {% if sourceCounts.size > 0 %}
+    <section class="source-section fade-up" aria-label="Source breakdown">
+      <h2 class="section-heading">Source Breakdown</h2>
+      <div class="source-card frost">
+        {% assign totalSourceSessions = 0 %}
+        {% for src in sourceCounts %}
+          {% assign totalSourceSessions = totalSourceSessions | plus: src.count %}
+        {% endfor %}
+        {% if totalSourceSessions > 0 %}
+        {% assign firstPct = sourceCounts[0].count | times: 100.0 | divided_by: totalSourceSessions | round %}
+        <div class="source-bar" role="img" aria-label="Source mix">
+          <div class="source-bar-fill" style="width: {{ firstPct }}%"></div>
+        </div>
+        <div class="source-legend">
+          {% for src in sourceCounts %}
+          {% assign srcPct = src.count | times: 100.0 | divided_by: totalSourceSessions | round %}
+          <span><span class="source-legend-dot" style="background: {% if forloop.first %}var(--accent){% else %}#e2e8f0{% endif %}"></span>{{ src.tool }} {{ srcPct }}% ({{ src.count }} session{% if src.count != 1 %}s{% endif %})</span>
+          {% endfor %}
+        </div>
+        {% endif %}
+      </div>
+    </section>
+    {% endif %}
+
+    {%- comment -%} Sessions table {%- endcomment -%}
+    {% if featuredSessions.size > 0 %}
+    <section class="sessions-section fade-up" aria-label="All sessions">
+      <h2 class="section-heading">Sessions</h2>
+      <div class="sessions-table-wrap frost">
+        <table class="sessions-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>
+            {% for s in featuredSessions %}
+            <tr>
+              <td>{{ forloop.index }}</td>
+              <td><a href="{{ sessionBaseUrl }}/{{ s.slug }}{{ sessionSuffix }}" class="session-title-link">{{ s.title }}</a></td>
+              <td>{{ s.recordedAt | formatDateShort }}</td>
+              <td>{{ s.durationMinutes | formatDuration }}</td>
+              <td>{{ s.locChanged | localeNumber }}</td>
+              <td>{% if s.sourceTool %}<span class="session-source-badge">{{ s.sourceTool }}</span>{% endif %}</td>
+              <td>
+                {% if s.agentSummary %}
+                <div class="agent-dots" aria-label="{{ s.agentSummary.agents.size }} agents">
+                  {% for agent in s.agentSummary.agents %}
+                  <span class="agent-dot" style="background:{{ agent.color }}" title="{{ agent.role }}"></span>
+                  {% endfor %}
+                </div>
+                {% else %}
+                <span style="font-family:var(--font-mono);font-size:12px;color:var(--fg-muted)">--</span>
+                {% endif %}
+              </td>
+            </tr>
+            {% endfor %}
+          </tbody>
+        </table>
+      </div>
+    </section>
+    {% endif %}
+
+    {%- comment -%} Featured sessions {%- endcomment -%}
+    {% if featuredSessions.size > 0 %}
+    <section class="featured-section fade-up" aria-label="Featured sessions">
+      <h2 class="section-heading">Featured Sessions</h2>
+      <div class="featured-grid">
+        {% for s in featuredSessions %}
+        <a href="{{ sessionBaseUrl }}/{{ s.slug }}{{ sessionSuffix }}" class="featured-card frost">
+          {% if s.skills.size > 0 %}
+          <span class="featured-tag">{{ s.skills | first }}</span>
+          {% endif %}
+          <span class="featured-name">{{ s.title }}</span>
+          <div class="featured-stats">
+            <span>{{ s.durationMinutes | formatDuration }}</span>
+            <span>{{ s.locChanged | localeNumber }} LOC</span>
+            {% if s.agentSummary %}
+            <span>{{ s.agentSummary.agents.size }} agents</span>
+            {% endif %}
+          </div>
+        </a>
+        {% endfor %}
+      </div>
+    </section>
+    {% endif %}
+  </div>
+
+  {%- comment -%} Fade-up animation {%- endcomment -%}
+
+</div>