heyiam 0.2.28 → 0.3.0

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

@@ -0,0 +1,199 @@
+<div class="heyiam-portfolio chalk" data-render-version="2" data-template="chalk" data-username="{{ user.username }}">
+
+  {%- comment -%} SVG filters {%- endcomment -%}
+  <svg class="svg-filters" aria-hidden="true">
+    <defs>
+      <filter id="chalk-rough">
+        <feTurbulence type="turbulence" baseFrequency="0.03" numOctaves="4" seed="1" result="noise" />
+        <feDisplacementMap in="SourceGraphic" in2="noise" scale="1.2" xChannelSelector="R" yChannelSelector="G" />
+      </filter>
+    </defs>
+  </svg>
+
+  {%- comment -%} Hero {%- endcomment -%}
+  {% if hasProfile %}
+  <section class="hero" aria-label="Profile">
+    {% if user.photoUrl %}
+    <img src="{{ user.photoUrl }}" alt="{{ user.displayName }}" class="hero-photo portfolio-photo" width="120" height="120">
+    {% 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 %}
+    <div class="profile-links">
+      {% if user.email %}
+      <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>
+      {% endif %}
+      {% if user.linkedinUrl %}
+      <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>
+      {% endif %}
+      {% if user.githubUrl %}
+      <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>
+      {% endif %}
+      {% if user.twitterHandle %}
+      <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>
+      {% endif %}
+      {% if user.websiteUrl %}
+      <a href="{{ user.websiteUrl }}" target="_blank" rel="noopener">{{ user.websiteUrl | stripProtocol }}</a>
+      {% endif %}
+      {% if user.resumeUrl %}
+      <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>
+      {% endif %}
+    </div>
+  </section>
+  {% endif %}
+
+  {%- comment -%} Stats {%- endcomment -%}
+  <section class="stats-section" aria-label="Aggregate statistics">
+    <h2 class="section-heading"><span class="sketch-underline">The Numbers</span></h2>
+    <div class="stats-grid" role="list">
+      <div class="stat-card" role="listitem">
+        <div class="stat-value" data-target="{{ projects.size }}">0</div>
+        <div class="stat-label">Projects</div>
+      </div>
+      <div class="stat-card" role="listitem">
+        <div class="stat-value" data-target="{{ totalSessions }}">0</div>
+        <div class="stat-label">Sessions</div>
+      </div>
+      <div class="stat-card" role="listitem">
+        <div class="stat-value" data-target="{{ totalLoc }}">0</div>
+        <div class="stat-label">Lines Changed</div>
+      </div>
+    </div>
+    {% if efficiencyMultiplier %}
+    <div class="leverage-annotation" role="img" aria-label="Leverage multiplier">
+      <div class="leverage-annotation__numbers">
+        <span class="leverage-annotation__human">{{ totalDurationMinutes | formatDuration }} <small>you</small></span>
+        <span class="leverage-annotation__arrow">&rarr;</span>
+        <span class="leverage-annotation__agent">{{ totalAgentDurationMinutes | formatDuration }} <small>agents</small></span>
+        <span class="leverage-annotation__arrow">=</span>
+        <span class="leverage-annotation__multiplier">{{ efficiencyMultiplier }}</span>
+      </div>
+    </div>
+    {% else %}
+    <div class="leverage-annotation" role="img" aria-label="Total time">
+      <div class="leverage-annotation__numbers">
+        <span class="leverage-annotation__human">{{ totalDurationMinutes | formatDuration }}</span>
+        <small class="leverage-annotation__arrow">Total Time</small>
+      </div>
+    </div>
+    {% endif %}
+  </section>
+
+  {%- comment -%} Projects {%- endcomment -%}
+  {% if projects.size > 0 %}
+  <section class="projects-section" aria-label="Projects">
+    <h2 class="section-heading"><span class="sketch-underline">Projects</span></h2>
+
+    {% for p in projects %}
+    <article class="chalk-card fade-in">
+      <h3 class="project-name"><a href="/{{ user.username }}/{{ p.slug }}">{{ p.title }}</a></h3>
+      {% if p.narrative %}
+      <p class="project-narrative">{{ p.narrative | truncate: 120 }}</p>
+      {% endif %}
+      <div class="project-meta" aria-label="Project statistics">
+        <span>{{ p.totalSessions }} sessions</span>
+        <span>{{ p.totalDurationMinutes | formatDuration }}</span>
+        <span>{{ p.totalLoc | formatLoc }} LOC</span>
+      </div>
+      {% if p.skills.size > 0 %}
+      <ul class="skills-list" aria-label="Skills">
+        {% for skill in p.skills %}
+        <li class="skill-chip">{{ skill }}</li>
+        {% endfor %}
+      </ul>
+      {% endif %}
+    </article>
+    {% endfor %}
+  </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="activity-section" aria-label="Activity overview">
+    <h2 class="section-heading"><span class="sketch-underline">Activity</span></h2>
+    <div class="activity-chart" role="img" aria-label="Monthly session activity">
+      <svg viewBox="0 0 800 200" preserveAspectRatio="xMidYMid meet">
+        <line x1="60" y1="30" x2="60" y2="150" stroke="#e2e8f0" stroke-width="1" stroke-dasharray="6 4" />
+        <line x1="60" y1="150" x2="780" y2="150" stroke="#e2e8f0" stroke-width="1" stroke-dasharray="6 4" />
+        {% assign spacing = 720 | divided_by: activityByMonth.size %}
+        {% for m in activityByMonth %}
+          {% if maxSessions > 0 %}
+            {% assign barH = m.sessions | times: 120 | divided_by: maxSessions %}
+          {% else %}
+            {% assign barH = 0 %}
+          {% endif %}
+          {% assign halfSpace = spacing | divided_by: 2 %}
+          {% assign centerX = forloop.index0 | times: spacing | plus: 60 | plus: halfSpace %}
+          {% assign barX = centerX | minus: 20 %}
+          {% assign barY = 150 | minus: barH %}
+          <rect x="{{ barX }}" y="{{ barY }}" width="40" height="{{ barH }}" rx="3" fill="#334155" opacity="0.7" filter="url(#chalk-rough)"/>
+          <text x="{{ centerX }}" y="170" text-anchor="middle" font-family="'Caveat', cursive" font-size="14" fill="#334155">{{ m.month }}</text>
+          {% assign labelY = barY | minus: 8 %}
+          <text x="{{ centerX }}" y="{{ labelY }}" text-anchor="middle" font-family="'IBM Plex Mono', monospace" font-size="10" fill="#64748b">{{ m.sessions }}</text>
+        {% endfor %}
+      </svg>
+    </div>
+  </section>
+  {% endif %}
+
+  {%- comment -%} Source Overview {%- endcomment -%}
+  {% if sourceCounts.size > 0 %}
+  <section class="source-overview" aria-label="Overall source breakdown">
+    <h2 class="section-heading"><span class="sketch-underline">Source Mix</span></h2>
+    <div class="source-bar-lg" role="img" aria-label="Overall source breakdown">
+      {% assign firstSrcPct = sourceCounts[0].count | times: 100.0 | divided_by: totalSourceSessions | round %}
+      <div class="source-fill-lg" style="width: {{ firstSrcPct }}%"></div>
+    </div>
+    <div class="source-legend-lg">
+      {% for src in sourceCounts %}
+      {% assign srcPct = src.count | times: 100.0 | divided_by: totalSourceSessions | round %}
+      <span><span class="dot-{{ src.tool | downcase | replace: ' ', '-' }}-lg"></span> {{ src.tool }} {{ srcPct }}%</span>
+      {% endfor %}
+    </div>
+  </section>
+  {% endif %}
+
+  {%- comment -%} Skills Overview {%- endcomment -%}
+  {% if allSkills.size > 0 %}
+  <section class="skills-overview" aria-label="All skills">
+    <h2 class="section-heading"><span class="sketch-underline">Skills</span></h2>
+    <div class="skills-grid" role="list">
+      {% for skill in topSkills %}
+      <div class="skill-card" role="listitem">
+        <div class="skill-card-name">{{ skill.name }}</div>
+        <div class="skill-card-count">{{ skill.projectCount }}</div>
+        <div class="skill-card-label">project{% if skill.projectCount != 1 %}s{% endif %}</div>
+      </div>
+      {% endfor %}
+    </div>
+  </section>
+  {% endif %}
+
+  {%- comment -%} Counter animation script {%- endcomment -%}
+
+</div>

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

@@ -0,0 +1,245 @@
+<div class="heyiam-project chalk" data-render-version="2" data-template="chalk"{% if sessionBaseUrl %} data-session-base-url="{{ sessionBaseUrl }}"{% endif %} data-username="{{ user.username }}" data-project-slug="{{ project.slug }}">
+
+  {%- comment -%} SVG filters {%- endcomment -%}
+  <svg class="svg-filters" aria-hidden="true">
+    <defs>
+      <filter id="chalk-rough">
+        <feTurbulence type="turbulence" baseFrequency="0.03" numOctaves="4" seed="1" result="noise" />
+        <feDisplacementMap in="SourceGraphic" in2="noise" scale="1.2" xChannelSelector="R" yChannelSelector="G" />
+      </filter>
+    </defs>
+  </svg>
+
+  {%- comment -%} Hero {%- endcomment -%}
+  <section class="hero" aria-label="Project header">
+    <h1 data-editable="title">{{ project.title }}</h1>
+    {% if project.repoUrl or project.projectUrl %}
+    <p class="hero-links">
+      {% if project.repoUrl %}
+      <a href="{{ project.repoUrl }}" target="_blank" rel="noopener">{{ project.repoUrl | stripProtocol }}</a>
+      {% endif %}
+      {% if project.repoUrl and project.projectUrl %}
+      &middot;
+      {% endif %}
+      {% if project.projectUrl %}
+      <a href="{{ project.projectUrl }}" target="_blank" rel="noopener">{{ project.projectUrl | stripProtocol }}</a>
+      {% endif %}
+    </p>
+    {% endif %}
+  </section>
+
+  {%- comment -%} Screenshot {%- endcomment -%}
+  {% if project.screenshotUrl %}
+  <div class="screenshot browser-chrome" role="img" aria-label="{{ project.title }} screenshot">
+    <div class="screenshot-chrome" aria-hidden="true">
+      <span class="chrome-dot"></span>
+      <span class="chrome-dot"></span>
+      <span class="chrome-dot"></span>
+    </div>
+    <img src="{{ project.screenshotUrl }}" alt="{{ project.title }} screenshot" style="width: 100%; display: block; margin-top: 32px;">
+  </div>
+  {% endif %}
+
+  {%- comment -%} Narrative {%- endcomment -%}
+  {% if project.narrative %}
+  <section class="narrative-section" aria-label="Project narrative">
+    <h2 class="section-heading"><span class="sketch-underline">The Story</span></h2>
+    <div class="narrative">
+      <p>{{ project.narrative }}</p>
+    </div>
+  </section>
+  {% endif %}
+
+  {%- comment -%} Stats row {%- endcomment -%}
+  <section aria-label="Project statistics">
+    <div class="stats-row">
+      <div class="stat-item">
+        <div class="stat-item-value">{{ project.totalSessions }}</div>
+        <div class="stat-item-label">Sessions</div>
+      </div>
+      <div class="stat-item">
+        <div class="stat-item-value">{{ project.totalLoc | localeNumber }}</div>
+        <div class="stat-item-label">LOC</div>
+      </div>
+      <div class="stat-item">
+        <div class="stat-item-value">{{ project.totalFilesChanged }}</div>
+        <div class="stat-item-label">Files</div>
+      </div>
+      {% if project.totalTokens %}
+      <div class="stat-item">
+        <div class="stat-item-value">{{ project.totalTokens | formatTokens }}</div>
+        <div class="stat-item-label">Tokens</div>
+      </div>
+      {% endif %}
+    </div>
+    {% if efficiencyMultiplier %}
+    <div class="leverage-annotation" role="img" aria-label="Leverage multiplier">
+      <div class="leverage-annotation__numbers">
+        <span class="leverage-annotation__human">{{ project.totalDurationMinutes | formatDuration }} <small>you</small></span>
+        <span class="leverage-annotation__arrow">&rarr;</span>
+        <span class="leverage-annotation__agent">{{ project.totalAgentDurationMinutes | formatDuration }} <small>agents</small></span>
+        <span class="leverage-annotation__arrow">=</span>
+        <span class="leverage-annotation__multiplier">{{ efficiencyMultiplier }}</span>
+      </div>
+    </div>
+    {% endif %}
+  </section>
+
+  {%- comment -%} Work timeline chart (CSS-only SVG) {%- endcomment -%}
+  {% if featuredSessions.size > 0 %}
+  <section class="timeline-section" aria-label="Work timeline">
+    <h2 class="section-heading"><span class="sketch-underline">Work Timeline</span></h2>
+    <div class="timeline-chart" role="img" aria-label="Bar chart showing session LOC over time">
+      {% assign maxLoc = 1 %}
+      {% for s in featuredSessions %}
+        {% if s.locChanged > maxLoc %}{% assign maxLoc = s.locChanged %}{% endif %}
+      {% endfor %}
+      {% assign barCount = featuredSessions.size %}
+      {% assign chartWidth = barCount | times: 90 | plus: 80 %}
+      {% assign chartHeight = 260 %}
+      <svg viewBox="0 0 {{ chartWidth }} {{ chartHeight }}" preserveAspectRatio="xMidYMid meet">
+        {%- comment -%} Grid lines {%- endcomment -%}
+        <line x1="60" y1="20" x2="60" y2="200" stroke="#e2e8f0" stroke-width="1.5" stroke-dasharray="6 4" />
+        <line x1="60" y1="200" x2="{{ chartWidth | minus: 20 }}" y2="200" stroke="#e2e8f0" stroke-width="1.5" stroke-dasharray="6 4" />
+
+        {%- comment -%} Y-axis labels {%- endcomment -%}
+        <text x="50" y="40" text-anchor="end" font-family="'IBM Plex Mono', monospace" font-size="10" fill="#64748b">{{ maxLoc }}</text>
+        {% assign halfMax = maxLoc | divided_by: 2 %}
+        <text x="50" y="120" text-anchor="end" font-family="'IBM Plex Mono', monospace" font-size="10" fill="#64748b">{{ halfMax }}</text>
+        <text x="50" y="200" text-anchor="end" font-family="'IBM Plex Mono', monospace" font-size="10" fill="#64748b">0</text>
+        <text x="20" y="115" text-anchor="middle" font-family="'IBM Plex Mono', monospace" font-size="10" fill="#64748b" transform="rotate(-90 20 115)">LOC</text>
+
+        {%- comment -%} Bars {%- endcomment -%}
+        {% for s in featuredSessions %}
+          {% assign barX = forloop.index0 | times: 90 | plus: 80 %}
+          {% assign barHeight = s.locChanged | times: 180 | divided_by: maxLoc %}
+          {% assign barY = 200 | minus: barHeight %}
+          {% assign isClaude = s.sourceTool | downcase %}
+          {% if isClaude == "claude code" or isClaude == "claude" %}
+            {% assign barFill = "#334155" %}
+            {% assign barStroke = "#334155" %}
+          {% else %}
+            {% assign barFill = "#94a3b8" %}
+            {% assign barStroke = "#475569" %}
+          {% endif %}
+          <rect x="{{ barX }}" y="{{ barY }}" width="70" height="{{ barHeight }}" rx="4" fill="{{ barFill }}" opacity="0.85" stroke="{{ barStroke }}" stroke-width="1.5" stroke-dasharray="8 2 3 2" />
+          <text x="{{ barX | plus: 35 }}" y="220" text-anchor="middle" font-family="'IBM Plex Mono', monospace" font-size="9" fill="#64748b">{{ s.recordedAt | formatDateShort }}</text>
+        {% endfor %}
+
+        {%- comment -%} Legend {%- endcomment -%}
+        {% assign legendX = chartWidth | divided_by: 2 | minus: 80 %}
+        <rect x="{{ legendX }}" y="240" width="12" height="12" rx="3" fill="#334155" />
+        <text x="{{ legendX | plus: 18 }}" y="251" font-family="'IBM Plex Mono', monospace" font-size="11" fill="#64748b">Claude</text>
+        {% assign legendX2 = legendX | plus: 80 %}
+        <rect x="{{ legendX2 }}" y="240" width="12" height="12" rx="3" fill="#94a3b8" />
+        <text x="{{ legendX2 | plus: 18 }}" y="251" font-family="'IBM Plex Mono', monospace" font-size="11" fill="#64748b">Cursor</text>
+      </svg>
+    </div>
+  </section>
+  {% endif %}
+
+  {%- comment -%} Phases {%- endcomment -%}
+  {% if arc.size > 0 %}
+  <section class="phases-section" aria-label="Project phases">
+    <h2 class="section-heading"><span class="sketch-underline">Phases</span></h2>
+    <ol class="phase-list">
+      {% for item in arc %}
+      <li class="phase-item">
+        <svg class="phase-circle" viewBox="0 0 24 24" aria-hidden="true">
+          <circle cx="12" cy="12" r="10" />
+          <text x="12" y="12">{{ item.phase }}</text>
+        </svg>
+        <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>
+      </li>
+      {% endfor %}
+    </ol>
+  </section>
+  {% endif %}
+
+  {%- comment -%} Key Decisions {%- endcomment -%}
+  {% if arc.size > 0 %}
+  <section class="decisions-section" aria-label="Key decisions">
+    <h2 class="section-heading"><span class="sketch-underline">Key Decisions</span></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" aria-label="Source breakdown">
+    <h2 class="section-heading"><span class="sketch-underline">Source Mix</span></h2>
+    {% 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-lg" role="img" aria-label="Source distribution">
+      <div class="source-fill-lg" style="width: {{ firstPct }}%"></div>
+    </div>
+    <div class="source-legend-lg">
+      {% for src in sourceCounts %}
+      {% assign srcPct = src.count | times: 100.0 | divided_by: totalSourceSessions | round %}
+      <span>{% if forloop.first %}<span class="dot-claude-lg"></span>{% else %}<span class="dot-cursor-lg"></span>{% endif %} {{ src.tool }} {{ srcPct }}% ({{ src.count }} session{% if src.count != 1 %}s{% endif %})</span>
+      {% endfor %}
+    </div>
+    {% endif %}
+  </section>
+  {% endif %}
+
+  {%- comment -%} Skills {%- endcomment -%}
+  {% if project.skills.size > 0 %}
+  <section class="skills-section" aria-label="Skills used">
+    <h2 class="section-heading"><span class="sketch-underline">Skills</span></h2>
+    <ul class="skills-list">
+      {% for skill in project.skills %}
+      <li class="skill-chip">{{ skill }}</li>
+      {% endfor %}
+    </ul>
+  </section>
+  {% endif %}
+
+  {%- comment -%} Sessions {%- endcomment -%}
+  {% if featuredSessions.size > 0 %}
+  <section class="sessions-section" aria-label="Featured sessions">
+    <h2 class="section-heading"><span class="sketch-underline">Sessions</span></h2>
+    <div style="overflow-x: auto;">
+      <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" class="hide-mobile">Source</th>
+            <th scope="col" class="hide-mobile">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 session-card">{{ s.title }}</a></td>
+            <td>{{ s.recordedAt | formatDateShort }}</td>
+            <td>{{ s.durationMinutes | formatDuration }}</td>
+            <td>{{ s.locChanged | localeNumber }}</td>
+            <td class="hide-mobile"><span class="session-source">{{ s.sourceTool }}</span></td>
+            <td class="hide-mobile">{% if s.agentCount %}{{ s.agentCount }}{% else %}0{% endif %}</td>
+          </tr>
+          {% endfor %}
+        </tbody>
+      </table>
+    </div>
+  </section>
+  {% endif %}
+
+  {%- comment -%} Fade-in animation script {%- endcomment -%}
+
+</div>

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

@@ -0,0 +1,215 @@
+<div class="heyiam-session chalk" data-render-version="2" data-template="chalk">
+
+  {%- comment -%} SVG filters {%- endcomment -%}
+  <svg class="svg-filters" aria-hidden="true">
+    <defs>
+      <filter id="chalk-rough">
+        <feTurbulence type="turbulence" baseFrequency="0.03" numOctaves="4" seed="1" result="noise" />
+        <feDisplacementMap in="SourceGraphic" in2="noise" scale="1.2" xChannelSelector="R" yChannelSelector="G" />
+      </filter>
+    </defs>
+  </svg>
+
+  {%- comment -%} Breadcrumb {%- endcomment -%}
+  <nav class="breadcrumb" aria-label="Breadcrumb">
+    <a href="/{{ user.username }}">{{ user.username }}</a>
+    {% if projectSlug %}
+    <span class="breadcrumb-sep" aria-hidden="true">/</span>
+    <a href="/{{ user.username }}/{{ projectSlug }}">{{ projectSlug }}</a>
+    {% endif %}
+    <span class="breadcrumb-sep" aria-hidden="true">/</span>
+    <span aria-current="page">{{ session.title }}</span>
+  </nav>
+
+  {%- comment -%} Hero {%- endcomment -%}
+  <section class="hero" aria-label="Session header">
+    <h1>{{ session.title }}</h1>
+    <div class="hero-meta">
+      {% if session.recordedAt %}
+      <span class="hero-meta-item">{{ session.recordedAt | formatDate }}</span>
+      {% endif %}
+      {% if session.sourceTool %}
+      <span class="hero-meta-item">{{ session.sourceTool }}</span>
+      {% endif %}
+      <span class="hero-meta-item">{{ session.durationMinutes | formatDuration }}{% if session.wallClockMinutes %} ({{ session.wallClockMinutes | formatDuration }} wall){% endif %}</span>
+      <span class="hero-meta-item">{{ session.turns }} turns</span>
+      <span class="hero-meta-item">{{ session.locChanged | localeNumber }} LOC</span>
+      <span class="hero-meta-item">{{ session.filesChanged }} files</span>
+    </div>
+  </section>
+
+  {%- comment -%} Dev Take {%- endcomment -%}
+  {% if session.devTake %}
+  <div class="dev-take fade-in">
+    <div class="dev-take-label">Dev Take</div>
+    <p>{{ session.devTake }}</p>
+  </div>
+  {% endif %}
+
+  {%- comment -%} Two-column layout {%- endcomment -%}
+  <div class="layout-grid">
+    {%- comment -%} Main content {%- endcomment -%}
+    <div>
+
+      {%- comment -%} Execution Path (Beats) {%- endcomment -%}
+      {% if session.beats.size > 0 %}
+      <section class="beats-section" aria-label="Execution path">
+        <h2 class="section-heading"><span class="sketch-underline">Execution Path</span></h2>
+        <ol class="beat-list">
+          {% for beat in session.beats %}
+          <li class="beat-item">
+            <svg class="beat-circle" viewBox="0 0 24 24" aria-hidden="true">
+              <circle cx="12" cy="12" r="10" />
+              <text x="12" y="12">{{ beat.stepNumber }}</text>
+            </svg>
+            <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" aria-label="Questions and answers">
+        <h2 class="section-heading"><span class="sketch-underline">Q&amp;A</span></h2>
+        {% for qa in session.qaPairs %}
+        <div class="qa-item qa-pair">
+          <h3 class="qa-question">{{ qa.question }}</h3>
+          <p class="qa-answer">{{ qa.answer }}</p>
+        </div>
+        {% endfor %}
+      </section>
+      {% endif %}
+
+      {%- comment -%} Narrative {%- endcomment -%}
+      {% if session.narrative %}
+      <section class="narrative-section" aria-label="Session narrative">
+        <h2 class="section-heading"><span class="sketch-underline">Narrative</span></h2>
+        <div class="narrative">
+          <p>{{ session.narrative }}</p>
+        </div>
+      </section>
+      {% endif %}
+
+      {%- comment -%} Highlights {%- endcomment -%}
+      {% if session.highlights.size > 0 %}
+      <section class="beats-section" aria-label="Session highlights">
+        <h2 class="section-heading"><span class="sketch-underline">Highlights</span></h2>
+        <ul class="highlights-list">
+          {% for h in session.highlights %}
+          <li>{{ h }}</li>
+          {% endfor %}
+        </ul>
+      </section>
+      {% endif %}
+
+      {%- comment -%} Agent Summary {%- endcomment -%}
+      {% if session.agentSummary %}
+      <section class="agents-section" aria-label="Agent summary">
+        <h2 class="section-heading"><span class="sketch-underline">Agents</span></h2>
+        <p class="annotation">{{ session.agentSummary.agents.size }} sub-session{% if session.agentSummary.agents.size != 1 %}s{% endif %}</p>
+
+        {% assign maxAgentLoc = 0 %}
+        {% for agent in session.agentSummary.agents %}
+          {% if agent.loc_changed > maxAgentLoc %}
+            {% assign maxAgentLoc = agent.loc_changed %}
+          {% endif %}
+        {% endfor %}
+
+        {% assign agent_colors = 'var(--agent-backend),var(--agent-qa),var(--agent-frontend),var(--agent-security),var(--agent-reviewer),var(--agent-ux)' | split: ',' %}
+        <div class="agent-bar-chart" role="list" aria-label="Agent contribution breakdown">
+          {% for agent in session.agentSummary.agents %}
+          <div class="agent-row" role="listitem">
+            <span class="agent-name">{{ agent.role }}</span>
+            <div class="agent-bar">
+              {% if maxAgentLoc > 0 %}
+              {% assign barPct = agent.loc_changed | times: 100 | divided_by: maxAgentLoc %}
+              {% else %}
+              {% assign barPct = 0 %}
+              {% endif %}
+              {% assign colorIdx = forloop.index0 | modulo: 6 %}
+              <div class="agent-bar-fill" style="width: {{ barPct }}%; background: {{ agent_colors[colorIdx] }};"></div>
+            </div>
+            <span class="agent-stats">{{ agent.duration_minutes }}m / {{ agent.loc_changed }} LOC</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 %}
+      <section class="sidebar-section chalk-card">
+        <h2 class="sidebar-heading">Tools Used</h2>
+        <table class="tools-table tool-list" aria-label="Tool usage counts">
+          <thead>
+            <tr>
+              <th scope="col">Tool</th>
+              <th scope="col">Count</th>
+              <th scope="col" aria-label="Relative usage">Usage</th>
+            </tr>
+          </thead>
+          <tbody>
+            {% assign maxToolCount = 0 %}
+            {% for t in session.toolBreakdown %}
+              {% if t.count > maxToolCount %}
+                {% assign maxToolCount = t.count %}
+              {% endif %}
+            {% endfor %}
+            {% for t in session.toolBreakdown %}
+            <tr>
+              <td>{{ t.tool }}</td>
+              <td>{{ t.count }}</td>
+              <td>
+                {% if maxToolCount > 0 %}
+                {% assign toolPct = t.count | times: 100 | divided_by: maxToolCount %}
+                <div class="tool-bar"><div class="tool-bar-fill" style="width: {{ toolPct }}%"></div></div>
+                {% endif %}
+              </td>
+            </tr>
+            {% endfor %}
+          </tbody>
+        </table>
+      </section>
+      {% endif %}
+
+      {%- comment -%} Files Changed {%- endcomment -%}
+      {% if session.topFiles.size > 0 %}
+      <section class="sidebar-section chalk-card">
+        <h2 class="sidebar-heading">Files Changed</h2>
+        <ul class="files-list file-list" aria-label="Modified files">
+          {% for f in session.topFiles %}
+          <li class="file-item">
+            <span class="file-name">{{ f.path }}</span>
+            <span class="file-diff">+{{ f.additions }}{% if f.deletions > 0 %} -{{ f.deletions }}{% endif %}</span>
+          </li>
+          {% endfor %}
+        </ul>
+      </section>
+      {% endif %}
+
+      {%- comment -%} Skills {%- endcomment -%}
+      {% if session.skills.size > 0 %}
+      <section class="sidebar-section chalk-card">
+        <h2 class="sidebar-heading">Skills</h2>
+        <ul class="skills-list" aria-label="Skills used in session">
+          {% for skill in session.skills %}
+          <li class="skill-chip chip">{{ skill }}</li>
+          {% endfor %}
+        </ul>
+      </section>
+      {% endif %}
+
+    </aside>
+  </div>
+
+  {%- comment -%} Animation scripts {%- endcomment -%}
+
+</div>