heyiam 0.2.28 → 0.3.0

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

@@ -0,0 +1,232 @@
+<div class="heyiam-portfolio cosmos" data-render-version="2" data-template="cosmos" data-username="{{ user.username }}">
+
+  <div class="starfield" aria-hidden="true"></div>
+
+  <div class="cos-page">
+
+    {%- comment -%} Constellation SVG {%- endcomment -%}
+    <svg class="cos-constellation" aria-hidden="true">
+      <circle class="cos-constellation-dot" cx="80" cy="120" r="2" />
+      <circle class="cos-constellation-dot" cx="200" cy="80" r="1.5" />
+      <circle class="cos-constellation-dot" cx="340" cy="160" r="2" />
+      <circle class="cos-constellation-dot" cx="500" cy="100" r="1.5" />
+      <circle class="cos-constellation-dot" cx="650" cy="200" r="2" />
+      <circle class="cos-constellation-dot" cx="780" cy="140" r="1.5" />
+      <circle class="cos-constellation-dot" cx="150" cy="400" r="2" />
+      <circle class="cos-constellation-dot" cx="420" cy="480" r="1.5" />
+      <circle class="cos-constellation-dot" cx="700" cy="520" r="2" />
+      <circle class="cos-constellation-dot" cx="300" cy="700" r="1.5" />
+      <circle class="cos-constellation-dot" cx="600" cy="750" r="2" />
+      <circle class="cos-constellation-dot" cx="850" cy="680" r="1.5" />
+      <path class="cos-constellation-line" d="M80,120 Q140,90 200,80" />
+      <path class="cos-constellation-line" d="M200,80 Q270,120 340,160" />
+      <path class="cos-constellation-line" d="M340,160 Q420,120 500,100" />
+      <path class="cos-constellation-line" d="M500,100 Q575,160 650,200" />
+      <path class="cos-constellation-line" d="M650,200 Q715,160 780,140" />
+      <path class="cos-constellation-line" d="M150,400 Q285,430 420,480" />
+      <path class="cos-constellation-line" d="M420,480 Q560,490 700,520" />
+      <path class="cos-constellation-line" d="M300,700 Q450,720 600,750" />
+      <path class="cos-constellation-line" d="M600,750 Q725,710 850,680" />
+    </svg>
+
+    <main id="main-content">
+
+      {%- comment -%} Hero / Profile {%- endcomment -%}
+      {% if hasProfile %}
+      <section class="cos-section cos-hero" aria-label="Profile">
+        {% if user.photoUrl %}
+        <img src="{{ user.photoUrl }}" alt="{{ user.displayName }}" class="cos-hero-photo" width="120" height="150">
+        {% endif %}
+        {% if user.displayName != blank %}
+        <h1>{{ user.displayName }}</h1>
+        {% endif %}
+        <p class="cos-hero-handle">@{{ user.username }}</p>
+        {% if user.bio %}
+        <p class="cos-hero-bio">{{ user.bio }}</p>
+        {% endif %}
+        {% if user.location %}
+        <p class="cos-hero-location">
+          <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" aria-hidden="true"><path d="M21 10c0 7-9 13-9 13s-9-6-9-13a9 9 0 0 1 18 0z"/><circle cx="12" cy="10" r="3"/></svg>
+          {{ user.location }}
+        </p>
+        {% endif %}
+        {% if user.email or user.linkedinUrl or user.githubUrl or user.twitterHandle or user.websiteUrl %}
+        <ul class="cos-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"><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"><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"><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"><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"><circle cx="12" cy="12" r="10"/><path d="M2 12h20"/><path d="M12 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 %}
+        </ul>
+        {% endif %}
+        {% if user.resumeUrl %}
+        <a href="{{ user.resumeUrl }}" class="cos-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 %}
+      </section>
+      {% endif %}
+
+      {%- comment -%} Stats {%- endcomment -%}
+      <section class="cos-section" aria-label="Aggregate statistics">
+        <div class="cos-stats">
+          <div class="cos-stat-card">
+            <span class="stat-value" data-target="{{ projects.size }}">0</span>
+            <span class="stat-label">Projects</span>
+          </div>
+          <div class="cos-stat-card">
+            <span class="stat-value" data-target="{{ totalSessions }}">0</span>
+            <span class="stat-label">Sessions</span>
+          </div>
+          <div class="cos-stat-card">
+            <span class="stat-value" data-target="{{ totalLoc }}" data-format="comma">0</span>
+            <span class="stat-label">Lines Changed</span>
+          </div>
+        </div>
+        {% if efficiencyMultiplier %}
+        <div class="cos-leverage" role="figure" aria-label="Leverage multiplier">
+          <div class="cos-leverage__ring">
+            {% assign totalCombined = totalDurationMinutes | plus: totalAgentDurationMinutes %}
+            {% if totalCombined > 0 %}
+            {% assign agentPct = totalAgentDurationMinutes | times: 163 | divided_by: totalCombined %}
+            {% assign humanPct = 163 | minus: agentPct %}
+            {% endif %}
+            <svg width="64" height="64" viewBox="0 0 64 64">
+              <circle cx="32" cy="32" r="26" fill="none" stroke="rgba(255,255,255,0.08)" stroke-width="5"/>
+              <circle cx="32" cy="32" r="26" fill="none" stroke="var(--cos-accent)" stroke-width="5" stroke-dasharray="{{ agentPct }} {{ humanPct }}" stroke-dashoffset="-33" stroke-linecap="round" style="filter:drop-shadow(0 0 4px var(--cos-accent))"/>
+              <text x="32" y="36" text-anchor="middle" font-family="var(--font-display)" font-size="14" font-weight="700" fill="var(--cos-accent)">{{ efficiencyMultiplier }}</text>
+            </svg>
+          </div>
+          <div class="cos-leverage__labels">
+            <span class="cos-leverage__human">{{ totalDurationMinutes | formatDuration }} <small>you</small></span>
+            <span class="cos-leverage__agent">{{ totalAgentDurationMinutes | formatDuration }} <small>agents</small></span>
+          </div>
+        </div>
+        {% else %}
+        <div class="cos-leverage">
+          <div class="cos-leverage__labels">
+            <span class="cos-leverage__human">{{ totalDurationMinutes | formatDuration }} <small>total</small></span>
+          </div>
+        </div>
+        {% endif %}
+      </section>
+
+      {%- comment -%} Projects {%- endcomment -%}
+      {% if projects.size > 0 %}
+      <section class="cos-section" aria-label="Projects">
+        <h2 class="cos-section-title">Projects</h2>
+        <div class="cos-projects">
+          {% for p in projects %}
+          <article class="cos-project-card">
+            <div class="cos-project-card-header">
+              <h3><a href="/{{ user.username }}/{{ p.slug }}">{{ p.title }}</a></h3>
+            </div>
+            {% if p.narrative %}
+            <p class="cos-project-card-narrative">{{ p.narrative }}</p>
+            {% endif %}
+            <div class="cos-project-card-meta">
+              <span><strong>{{ p.totalSessions }}</strong> sessions</span>
+              <span><strong>{{ p.totalDurationMinutes | formatDuration }}</strong></span>
+              <span><strong>{{ p.totalLoc | localeNumber }}</strong> LOC</span>
+            </div>
+            {% if p.skills.size > 0 %}
+            <div class="cos-skill-chips">
+              {% for skill in p.skills %}
+              <span class="cos-skill-chip">{{ skill }}</span>
+              {% endfor %}
+            </div>
+            {% endif %}
+            {% if p.sourceCounts.size > 0 %}
+            {% assign pTotalSrc = 0 %}
+            {% for src in p.sourceCounts %}{% assign pTotalSrc = pTotalSrc | plus: src.count %}{% endfor %}
+            {% if pTotalSrc > 0 %}
+            <div class="cos-source-bar">
+              <div class="cos-source-track">
+                {% for src in p.sourceCounts %}
+                {% assign srcPct = src.count | times: 100.0 | divided_by: pTotalSrc | round %}
+                <div class="cos-source-fill-{{ src.tool | downcase | replace: ' ', '-' }}" style="width: {{ srcPct }}%"></div>
+                {% endfor %}
+              </div>
+              <div class="cos-source-labels">
+                {% for src in p.sourceCounts %}
+                {% assign srcPct = src.count | times: 100.0 | divided_by: pTotalSrc | round %}
+                <span><span class="cos-source-dot {{ src.tool | downcase | replace: ' ', '-' }}" aria-hidden="true"></span>{{ src.tool }} {{ srcPct }}%</span>
+                {% endfor %}
+              </div>
+            </div>
+            {% endif %}
+            {% endif %}
+          </article>
+          {% endfor %}
+        </div>
+      </section>
+      {% endif %}
+
+      {%- comment -%} Skills Overview {%- endcomment -%}
+      {% if allSkills.size > 0 %}
+      <section class="cos-section cos-skills-overview" aria-label="Skills overview">
+        <h2 class="cos-section-title">Skills</h2>
+        <div class="cos-skill-overview-grid">
+          {% for skill in allSkills %}
+          <span class="cos-skill-overview-chip">{{ skill.name }}</span>
+          {% endfor %}
+        </div>
+      </section>
+      {% endif %}
+
+      {%- comment -%} Activity Chart {%- endcomment -%}
+      {% if activityByMonth.size > 0 %}
+      {% assign maxSessions = 0 %}
+      {% for m in activityByMonth %}
+        {% if m.sessions > maxSessions %}{% assign maxSessions = m.sessions %}{% endif %}
+      {% endfor %}
+      <section class="cos-section cos-activity" aria-label="Monthly activity">
+        <h2 class="cos-section-title">Activity</h2>
+        <div class="cos-activity-chart">
+          <svg class="cos-activity-svg" viewBox="0 0 600 180" role="img" aria-label="Monthly session activity bar chart">
+            <line class="cos-activity-grid" x1="60" y1="20" x2="560" y2="20" />
+            <line class="cos-activity-grid" x1="60" y1="55" x2="560" y2="55" />
+            <line class="cos-activity-grid" x1="60" y1="90" x2="560" y2="90" />
+            <line class="cos-activity-grid" x1="60" y1="125" x2="560" y2="125" />
+            {% assign spacing = 500 | divided_by: activityByMonth.size %}
+            {% for m in activityByMonth %}
+              {% if maxSessions > 0 %}
+                {% assign barH = m.sessions | times: 105 | divided_by: maxSessions %}
+              {% else %}
+                {% assign barH = 0 %}
+              {% endif %}
+              {% assign barY = 125 | minus: barH %}
+              {% assign halfSpace = spacing | divided_by: 2 %}
+              {% assign centerX = forloop.index0 | times: spacing | plus: 60 | plus: halfSpace %}
+              {% assign barX = centerX | minus: 40 %}
+              <g class="cos-activity-bar">
+                <rect x="{{ barX }}" y="{{ barY }}" width="80" height="{{ barH }}" rx="4" fill="#fbbf24" opacity="0.7" />
+                {% assign valY = barY | minus: 6 %}
+                <text class="cos-activity-value" x="{{ centerX }}" y="{{ valY }}" text-anchor="middle">{{ m.sessions }}</text>
+                <text class="cos-activity-label" x="{{ centerX }}" y="148" text-anchor="middle">{{ m.month }}</text>
+              </g>
+            {% endfor %}
+          </svg>
+        </div>
+      </section>
+      {% endif %}
+
+    </main>
+
+    <footer class="cos-footer">
+      <p>Built with <a href="https://heyi.am">heyi.am</a></p>
+    </footer>
+
+  </div>
+
+  {%- comment -%} Animation scripts {%- endcomment -%}
+
+</div>

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

@@ -0,0 +1,327 @@
+<div class="heyiam-project cosmos" data-render-version="2" data-template="cosmos"{% if sessionBaseUrl %} data-session-base-url="{{ sessionBaseUrl }}"{% endif %} data-username="{{ user.username }}" data-project-slug="{{ project.slug }}">
+
+  <div class="starfield" aria-hidden="true"></div>
+
+  <div class="cos-page">
+
+    {%- comment -%} Constellation SVG {%- endcomment -%}
+    <svg class="cos-constellation" aria-hidden="true">
+      <circle class="cos-constellation-dot" cx="60" cy="200" r="2" />
+      <circle class="cos-constellation-dot" cx="250" cy="150" r="1.5" />
+      <circle class="cos-constellation-dot" cx="450" cy="220" r="2" />
+      <circle class="cos-constellation-dot" cx="700" cy="180" r="1.5" />
+      <circle class="cos-constellation-dot" cx="150" cy="500" r="2" />
+      <circle class="cos-constellation-dot" cx="400" cy="600" r="1.5" />
+      <circle class="cos-constellation-dot" cx="650" cy="550" r="2" />
+      <circle class="cos-constellation-dot" cx="850" cy="450" r="1.5" />
+      <circle class="cos-constellation-dot" cx="100" cy="850" r="2" />
+      <circle class="cos-constellation-dot" cx="500" cy="900" r="1.5" />
+      <circle class="cos-constellation-dot" cx="800" cy="800" r="2" />
+      <path class="cos-constellation-line" d="M60,200 Q155,165 250,150" />
+      <path class="cos-constellation-line" d="M250,150 Q350,190 450,220" />
+      <path class="cos-constellation-line" d="M450,220 Q575,195 700,180" />
+      <path class="cos-constellation-line" d="M150,500 Q275,555 400,600" />
+      <path class="cos-constellation-line" d="M400,600 Q525,570 650,550" />
+      <path class="cos-constellation-line" d="M650,550 Q750,495 850,450" />
+      <path class="cos-constellation-line" d="M100,850 Q300,880 500,900" />
+      <path class="cos-constellation-line" d="M500,900 Q650,845 800,800" />
+    </svg>
+
+    <main id="main-content">
+
+      {%- comment -%} Breadcrumb {%- endcomment -%}
+      <nav class="cos-breadcrumb" aria-label="Breadcrumb">
+        <a href="/{{ user.username }}">{{ user.username }}</a>
+        <span class="cos-breadcrumb-sep" aria-hidden="true">/</span>
+        <span aria-current="page">{{ project.slug }}</span>
+      </nav>
+
+      {%- comment -%} Project Header {%- endcomment -%}
+      <header class="cos-section cos-project-header">
+        <h1 data-editable="title">{{ project.title }}</h1>
+        {% if project.repoUrl or project.projectUrl %}
+        <div class="cos-project-links">
+          {% if project.repoUrl %}
+          <a href="{{ project.repoUrl }}" target="_blank" rel="noopener">
+            <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" aria-hidden="true"><path d="M9 19c-5 1.5-5-2.5-7-3m14 6v-3.87a3.37 3.37 0 0 0-.94-2.61c3.14-.35 6.44-1.54 6.44-7A5.44 5.44 0 0 0 20 4.77 5.07 5.07 0 0 0 19.91 1S18.73.65 16 2.48a13.38 13.38 0 0 0-7 0C6.27.65 5.09 1 5.09 1A5.07 5.07 0 0 0 5 4.77a5.44 5.44 0 0 0-1.5 3.78c0 5.42 3.3 6.61 6.44 7A3.37 3.37 0 0 0 9 18.13V22"/></svg>
+            {{ project.repoUrl | stripProtocol }}
+          </a>
+          {% endif %}
+          {% if project.projectUrl %}
+          <a href="{{ project.projectUrl }}" target="_blank" rel="noopener">
+            <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" aria-hidden="true"><path d="M18 13v6a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V8a2 2 0 0 1 2-2h6"/><polyline points="15 3 21 3 21 9"/><line x1="10" y1="14" x2="21" y2="3"/></svg>
+            {{ project.projectUrl | stripProtocol }}
+          </a>
+          {% endif %}
+        </div>
+        {% endif %}
+      </header>
+
+      {%- comment -%} Screenshot {%- endcomment -%}
+      {% if project.screenshotUrl %}
+      <div class="cos-section cos-screenshot" data-editable="screenshot">
+        <div class="cos-screenshot-bar" aria-hidden="true">
+          <span class="cos-screenshot-dot"></span>
+          <span class="cos-screenshot-dot"></span>
+          <span class="cos-screenshot-dot"></span>
+          <span class="cos-screenshot-url">Preview</span>
+        </div>
+        <div class="cos-screenshot-viewport">
+          <img src="{{ project.screenshotUrl }}" alt="{{ project.title }} screenshot" style="width: 100%; display: block;">
+        </div>
+      </div>
+      {% endif %}
+
+      {%- comment -%} Stats {%- endcomment -%}
+      <section class="cos-section" aria-label="Project statistics">
+        <div class="cos-stats-row">
+          <div class="cos-stat-pill">
+            <span class="stat-value">{{ project.totalSessions }}</span>
+            <span class="stat-label">Sessions</span>
+          </div>
+          <div class="cos-stat-pill">
+            <span class="stat-value">{{ project.totalLoc | localeNumber }}</span>
+            <span class="stat-label">LOC</span>
+          </div>
+          <div class="cos-stat-pill">
+            <span class="stat-value">{{ project.totalFilesChanged }}</span>
+            <span class="stat-label">Files</span>
+          </div>
+          {% if project.totalTokens %}
+          <div class="cos-stat-pill">
+            <span class="stat-value">{{ project.totalTokens | formatTokens }}</span>
+            <span class="stat-label">Tokens</span>
+          </div>
+          {% endif %}
+        </div>
+        {% if efficiencyMultiplier %}
+        <div class="cos-leverage" role="figure" aria-label="Leverage multiplier">
+          <div class="cos-leverage__ring">
+            {% assign totalCombined = project.totalDurationMinutes | plus: project.totalAgentDurationMinutes %}
+            {% if totalCombined > 0 %}
+            {% assign agentPct = project.totalAgentDurationMinutes | times: 163 | divided_by: totalCombined %}
+            {% assign humanPct = 163 | minus: agentPct %}
+            {% endif %}
+            <svg width="64" height="64" viewBox="0 0 64 64">
+              <circle cx="32" cy="32" r="26" fill="none" stroke="rgba(255,255,255,0.08)" stroke-width="5"/>
+              <circle cx="32" cy="32" r="26" fill="none" stroke="var(--cos-accent)" stroke-width="5" stroke-dasharray="{{ agentPct }} {{ humanPct }}" stroke-dashoffset="-33" stroke-linecap="round" style="filter:drop-shadow(0 0 4px var(--cos-accent))"/>
+              <text x="32" y="36" text-anchor="middle" font-family="var(--font-display)" font-size="14" font-weight="700" fill="var(--cos-accent)">{{ efficiencyMultiplier }}</text>
+            </svg>
+          </div>
+          <div class="cos-leverage__labels">
+            <span class="cos-leverage__human">{{ project.totalDurationMinutes | formatDuration }} <small>you</small></span>
+            <span class="cos-leverage__agent">{{ project.totalAgentDurationMinutes | formatDuration }} <small>agents</small></span>
+          </div>
+        </div>
+        {% else %}
+        <div class="cos-leverage">
+          <div class="cos-leverage__labels">
+            <span class="cos-leverage__human">{{ project.totalDurationMinutes | formatDuration }} <small>total</small></span>
+          </div>
+        </div>
+        {% endif %}
+      </section>
+
+      {%- comment -%} Narrative {%- endcomment -%}
+      {% if project.narrative %}
+      <section class="cos-section cos-narrative" aria-label="Project narrative">
+        <h2 class="cos-section-title">Narrative</h2>
+        <p>{{ project.narrative }}</p>
+      </section>
+      {% endif %}
+
+      {%- comment -%} Work Timeline Chart (CSS-only SVG bars) {%- endcomment -%}
+      {% if featuredSessions.size > 0 %}
+      <section class="cos-section" aria-label="Work timeline chart">
+        <h2 class="cos-section-title">Work Timeline</h2>
+        <div class="cos-chart-container">
+          {% assign maxLoc = 0 %}
+          {% for s in featuredSessions %}
+            {% if s.locChanged > maxLoc %}{% assign maxLoc = s.locChanged %}{% endif %}
+          {% endfor %}
+          {% assign barCount = featuredSessions.size %}
+          {% assign barWidth = 55 %}
+          {% assign barGap = 75 %}
+          {% assign chartLeft = 80 %}
+          {% assign chartHeight = 180 %}
+          {% assign chartTop = 30 %}
+          {% assign chartBottom = 210 %}
+          {% assign svgWidth = chartLeft | plus: barCount | times: barGap | plus: 40 %}
+          <svg class="cos-chart-svg" viewBox="0 0 {{ svgWidth }} 240" role="img" aria-label="Bar chart showing lines of code written per session">
+            <line class="cos-chart-grid-line" x1="60" y1="30" x2="{{ svgWidth | minus: 20 }}" y2="30" />
+            <line class="cos-chart-grid-line" x1="60" y1="75" x2="{{ svgWidth | minus: 20 }}" y2="75" />
+            <line class="cos-chart-grid-line" x1="60" y1="120" x2="{{ svgWidth | minus: 20 }}" y2="120" />
+            <line class="cos-chart-grid-line" x1="60" y1="165" x2="{{ svgWidth | minus: 20 }}" y2="165" />
+            <line class="cos-chart-grid-line" x1="60" y1="210" x2="{{ svgWidth | minus: 20 }}" y2="210" />
+            {% assign yStep = maxLoc | divided_by: 4 %}
+            <text class="cos-chart-label" x="55" y="34" text-anchor="end">{{ maxLoc }}</text>
+            <text class="cos-chart-label" x="55" y="79" text-anchor="end">{{ maxLoc | times: 3 | divided_by: 4 }}</text>
+            <text class="cos-chart-label" x="55" y="124" text-anchor="end">{{ maxLoc | divided_by: 2 }}</text>
+            <text class="cos-chart-label" x="55" y="169" text-anchor="end">{{ maxLoc | divided_by: 4 }}</text>
+            <text class="cos-chart-label" x="55" y="214" text-anchor="end">0</text>
+            {% for s in featuredSessions %}
+            {% assign barX = forloop.index0 | times: barGap | plus: chartLeft %}
+            {% assign barCenterX = barX | plus: 27 %}
+            {% if maxLoc > 0 %}
+              {% assign barH = s.locChanged | times: chartHeight | divided_by: maxLoc %}
+            {% else %}
+              {% assign barH = 0 %}
+            {% endif %}
+            {% assign barY = chartBottom | minus: barH %}
+            <g class="cos-chart-bar">
+              <rect x="{{ barX }}" y="{{ barY }}" width="{{ barWidth }}" height="{{ barH }}" rx="4" fill="var(--cos-accent)" opacity="0.7" />
+              <text class="cos-chart-value" x="{{ barCenterX }}" y="{{ barY | minus: 6 }}" text-anchor="middle">{{ s.locChanged }}</text>
+              <text class="cos-chart-label" x="{{ barCenterX }}" y="228" text-anchor="middle">S{{ forloop.index }}</text>
+            </g>
+            {% endfor %}
+          </svg>
+        </div>
+      </section>
+      {% endif %}
+
+      {%- comment -%} Orbital Timeline {%- endcomment -%}
+      {% if arc.size > 0 %}
+      <section class="cos-section cos-orbit-timeline" aria-label="Project phases orbital timeline">
+        <h2 class="cos-section-title">Orbital Timeline</h2>
+        {% assign nodeCount = arc.size %}
+        {% assign svgWidth = 800 %}
+        <svg class="cos-orbit-svg" viewBox="0 0 {{ svgWidth }} 200" role="img" aria-label="Phase timeline showing {{ nodeCount }} project phases as points along an orbital path">
+          <path class="cos-orbit-path" d="M50,100 C150,30 250,170 400,100 C550,30 650,170 750,100" />
+          <path class="cos-orbit-path-active" d="M50,100 C150,30 250,170 400,100 C550,30 650,170 750,100" />
+          {% for item in arc %}
+          {% assign segWidth = 700 | divided_by: nodeCount %}
+          {% assign nodeX = forloop.index0 | times: segWidth | plus: 50 | plus: segWidth | divided_by: 2 %}
+          {% assign oddPhase = forloop.index0 | modulo: 2 %}
+          {% if oddPhase == 0 %}
+            {% assign nodeY = 65 %}
+            {% assign labelY = 50 %}
+            {% assign textY = 40 %}
+          {% else %}
+            {% assign nodeY = 145 %}
+            {% assign labelY = 170 %}
+            {% assign textY = 190 %}
+          {% endif %}
+          <text class="cos-orbit-phase-label" x="{{ nodeX }}" y="{{ labelY }}">{{ item.title }}</text>
+          <g class="cos-orbit-node">
+            <circle cx="{{ nodeX }}" cy="{{ nodeY }}" r="6" fill="var(--cos-bg, #030712)" stroke="var(--cos-accent)" stroke-width="2" />
+            {% if item.dates != blank %}
+            <text x="{{ nodeX }}" y="{{ textY }}" text-anchor="middle">{{ item.dates }}</text>
+            {% endif %}
+          </g>
+          {% endfor %}
+        </svg>
+      </section>
+      {% endif %}
+
+      {%- comment -%} Phase Cards {%- endcomment -%}
+      {% if arc.size > 0 %}
+      <section class="cos-section" aria-label="Phase details">
+        <h2 class="cos-section-title">Phases</h2>
+        <div class="cos-phases">
+          {% for item in arc %}
+          <div class="cos-phase-card">
+            <div class="cos-phase-number">Phase {{ item.phase }}</div>
+            <h3>{{ item.title }}</h3>
+            <p class="cos-phase-desc">{{ item.description }}</p>
+          </div>
+          {% endfor %}
+        </div>
+      </section>
+      {% endif %}
+
+      {%- comment -%} Key Decisions {%- endcomment -%}
+      {% if arc.size > 0 %}
+      <section class="cos-section cos-decisions" aria-label="Key decisions">
+        <h2 class="cos-section-title">Key Decisions</h2>
+        {% for item in arc %}
+        <div class="cos-decision">
+          <span class="cos-decision-number" aria-hidden="true">{{ item.phase }}</span>
+          <p>{{ item.description }}</p>
+        </div>
+        {% endfor %}
+      </section>
+      {% endif %}
+
+      {%- comment -%} Skills {%- endcomment -%}
+      {% if project.skills.size > 0 %}
+      <section class="cos-section" aria-label="Skills used">
+        <h2 class="cos-section-title">Skills</h2>
+        <div class="cos-skill-chips" style="margin-block-end: 2.5rem;">
+          {% for skill in project.skills %}
+          <span class="cos-skill-chip">{{ skill }}</span>
+          {% endfor %}
+        </div>
+      </section>
+      {% endif %}
+
+      {%- comment -%} Source Breakdown {%- endcomment -%}
+      {% if sourceCounts.size > 0 %}
+      <section class="cos-section cos-source-section" aria-label="Source breakdown">
+        <h2 class="cos-section-title">Source Breakdown</h2>
+        {% assign totalSourceSessions = 0 %}
+        {% for src in sourceCounts %}
+          {% assign totalSourceSessions = totalSourceSessions | plus: src.count %}
+        {% endfor %}
+        {% if totalSourceSessions > 0 %}
+        <div class="cos-source-bar-large">
+          {% for src in sourceCounts %}
+          {% assign srcPct = src.count | times: 100.0 | divided_by: totalSourceSessions | round %}
+          {% if forloop.first %}
+          <div class="cos-source-fill-claude" style="width: {{ srcPct }}%"></div>
+          {% else %}
+          <div class="cos-source-fill-cursor" style="width: {{ srcPct }}%"></div>
+          {% endif %}
+          {% endfor %}
+        </div>
+        <div class="cos-source-labels">
+          {% for src in sourceCounts %}
+          {% assign srcPct = src.count | times: 100.0 | divided_by: totalSourceSessions | round %}
+          <span>
+            {% if forloop.first %}
+            <span class="cos-source-dot claude" aria-hidden="true"></span>
+            {% else %}
+            <span class="cos-source-dot cursor" aria-hidden="true"></span>
+            {% endif %}
+            {{ src.tool }} {{ srcPct }}% ({{ src.count }} session{% if src.count != 1 %}s{% endif %})
+          </span>
+          {% endfor %}
+        </div>
+        {% endif %}
+      </section>
+      {% endif %}
+
+      {%- comment -%} Featured Sessions {%- endcomment -%}
+      {% if featuredSessions.size > 0 %}
+      <section class="cos-section" aria-label="Featured sessions">
+        <h2 class="cos-section-title">Sessions</h2>
+        <div class="cos-sessions">
+          {% for s in featuredSessions %}
+          <article class="cos-session-card">
+            <h3><a href="{{ sessionBaseUrl }}/{{ s.slug }}{{ sessionSuffix }}">{{ s.title }}</a></h3>
+            <div class="cos-session-meta">
+              <span><strong>{{ s.durationMinutes | formatDuration }}</strong></span>
+              <span><strong>{{ s.locChanged | localeNumber }}</strong> LOC</span>
+              {% if s.agentSummary %}
+              <span><strong>{{ s.agentSummary.agents.size }}</strong> agents</span>
+              {% endif %}
+            </div>
+            {% if s.skills.size > 0 %}
+            <span class="cos-session-tag">{{ s.skills | first }}</span>
+            {% endif %}
+          </article>
+          {% endfor %}
+        </div>
+      </section>
+      {% endif %}
+
+    </main>
+
+    <footer class="cos-footer">
+      <p>Built with <a href="https://heyi.am">heyi.am</a></p>
+    </footer>
+
+  </div>
+
+  {%- comment -%} Animation scripts {%- endcomment -%}
+
+</div>