heyiam 0.2.29 → 0.3.1

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

@@ -0,0 +1,255 @@
+<div class="heyiam-portfolio grid" data-render-version="2" data-template="grid" data-username="{{ user.username }}">
+
+  <div class="container">
+    <div class="bento" aria-label="Portfolio dashboard">
+
+      {%- comment -%} Cell 1: Identity (2-wide) {%- endcomment -%}
+      {% if hasProfile %}
+      <div class="bento-cell cell-identity">
+        <div class="identity-top">
+          {% if user.photoUrl %}
+          <img src="{{ user.photoUrl }}" alt="{{ user.displayName }}" class="profile-photo portfolio-photo" data-portfolio-field="photoBase64"{% unless user.photoUrl %} data-portfolio-empty="true"{% endunless %}>
+          {% endif %}
+          <div class="identity-text">
+            {% if user.displayName != blank %}
+            <h1 data-portfolio-field="displayName">{{ user.displayName }}</h1>
+            {% endif %}
+            {% if user.location != blank %}
+            <p class="location portfolio-location">
+              <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" 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>
+              <span data-portfolio-field="location">{{ user.location }}</span>
+            </p>
+            {% endif %}
+            {% if user.bio != blank %}
+            <p class="bio portfolio-bio" data-portfolio-field="bio">{{ user.bio }}</p>
+            {% endif %}
+          </div>
+        </div>
+        <div class="contact-row">
+          <a href="{% if user.email %}mailto:{{ user.email }}{% endif %}" data-portfolio-field="email"{% unless user.email %} data-portfolio-empty="true"{% endunless %}><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>
+          <a href="{% if user.linkedinUrl %}{{ user.linkedinUrl }}{% endif %}" target="_blank" rel="noopener" data-portfolio-field="linkedinUrl"{% unless user.linkedinUrl %} data-portfolio-empty="true"{% endunless %}><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>
+          <a href="{% if user.githubUrl %}{{ user.githubUrl }}{% endif %}" target="_blank" rel="noopener" data-portfolio-field="githubUrl"{% unless user.githubUrl %} data-portfolio-empty="true"{% endunless %}><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>
+          <a href="{% if user.twitterHandle %}https://x.com/{{ user.twitterHandle }}{% endif %}" target="_blank" rel="noopener" data-portfolio-field="twitterHandle"{% unless user.twitterHandle %} data-portfolio-empty="true"{% endunless %}><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>
+          <a href="{% if user.websiteUrl %}{{ user.websiteUrl }}{% endif %}" target="_blank" rel="noopener" data-portfolio-field="websiteUrl"{% unless user.websiteUrl %} data-portfolio-empty="true"{% endunless %}>{{ user.websiteUrl | stripProtocol }}</a>
+          {% if user.resumeUrl %}
+          <a href="{{ user.resumeUrl }}" class="resume-btn" download><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> Resume (PDF)</a>
+          {% endif %}
+        </div>
+      </div>
+      {% endif %}
+
+      {%- comment -%} Cell 2: Stat -- Projects {%- endcomment -%}
+      <section class="bento-cell cell-stat" aria-label="Projects count">
+        <div class="stat-icon" aria-hidden="true">
+          <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M22 19a2 2 0 0 1-2 2H4a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h5l2 3h9a2 2 0 0 1 2 2z"/></svg>
+        </div>
+        <div>
+          <div class="stat-number" data-target="{{ projects.size }}">0</div>
+          <div class="stat-label">Projects</div>
+        </div>
+      </section>
+
+      {%- comment -%} Cell 3: Stat -- Sessions {%- endcomment -%}
+      <section class="bento-cell cell-stat" aria-label="Sessions count">
+        <div class="stat-icon" aria-hidden="true">
+          <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><rect x="3" y="4" width="18" height="18" rx="2" ry="2"/><line x1="16" y1="2" x2="16" y2="6"/><line x1="8" y1="2" x2="8" y2="6"/><line x1="3" y1="10" x2="21" y2="10"/></svg>
+        </div>
+        <div>
+          <div class="stat-number" data-target="{{ totalSessions }}">0</div>
+          <div class="stat-label">Sessions</div>
+        </div>
+      </section>
+
+      {%- comment -%} Cell 4: Stat -- Human Time {%- endcomment -%}
+      {% if efficiencyMultiplier %}
+      <section class="bento-cell cell-stat" aria-label="Human time">
+        <div class="stat-icon" aria-hidden="true">
+          <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M20 21v-2a4 4 0 0 0-4-4H8a4 4 0 0 0-4 4v2"/><circle cx="12" cy="7" r="4"/></svg>
+        </div>
+        <div>
+          <div class="stat-number">{{ totalDurationMinutes | formatDuration }}</div>
+          <div class="stat-label">You</div>
+        </div>
+      </section>
+
+      {%- comment -%} Cell 4b: Stat -- Agent Time {%- endcomment -%}
+      <section class="bento-cell cell-stat" aria-label="Agent time">
+        <div class="stat-icon" aria-hidden="true">
+          <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><rect x="4" y="4" width="16" height="16" rx="2"/><line x1="9" y1="9" x2="9" y2="9.01"/><line x1="15" y1="9" x2="15" y2="9.01"/><path d="M8 14s1.5 2 4 2 4-2 4-2"/></svg>
+        </div>
+        <div>
+          <div class="stat-number" style="color: var(--accent);">{{ totalAgentDurationMinutes | formatDuration }}</div>
+          <div class="stat-label">Agents</div>
+        </div>
+      </section>
+
+      {%- comment -%} Cell 4c: Stat -- Multiplier {%- endcomment -%}
+      <section class="bento-cell cell-stat" aria-label="Multiplier">
+        <div class="stat-icon" aria-hidden="true">
+          <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><polyline points="23 6 13.5 15.5 8.5 10.5 1 18"/><polyline points="17 6 23 6 23 12"/></svg>
+        </div>
+        <div>
+          <div class="stat-number">{{ efficiencyMultiplier }}</div>
+          <div class="stat-label">Multiplier</div>
+        </div>
+      </section>
+      {% else %}
+      <section class="bento-cell cell-stat" aria-label="Total time">
+        <div class="stat-icon" aria-hidden="true">
+          <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="10"/><polyline points="12 6 12 12 16 14"/></svg>
+        </div>
+        <div>
+          <div class="stat-number">{{ totalDurationMinutes | formatDuration }}</div>
+          <div class="stat-label">Total Time</div>
+        </div>
+      </section>
+      {% endif %}
+
+      {%- comment -%} Cell 5: Stat -- LOC {%- endcomment -%}
+      <section class="bento-cell cell-stat" aria-label="Lines changed">
+        <div class="stat-icon" aria-hidden="true">
+          <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><polyline points="16 18 22 12 16 6"/><polyline points="8 6 2 12 8 18"/></svg>
+        </div>
+        <div>
+          <div class="stat-number" data-target="{{ totalLoc }}" data-format="comma">0</div>
+          <div class="stat-label">Lines Changed</div>
+        </div>
+      </section>
+
+      {%- comment -%} Cell 6: Source Mix (2-wide) {%- endcomment -%}
+      {% if sourceCounts.size > 0 %}
+      <section class="bento-cell cell-source" aria-label="Source breakdown">
+        <h2>Source Mix</h2>
+        <div class="source-bars">
+          {% assign totalSourceSessions = 0 %}
+          {% for src in sourceCounts %}
+            {% assign totalSourceSessions = totalSourceSessions | plus: src.count %}
+          {% endfor %}
+          {% for src in sourceCounts %}
+          <div class="source-item">
+            <span class="source-name">{{ src.tool }}</span>
+            <div class="source-bar-track">
+              {% if totalSourceSessions > 0 %}
+              {% assign srcPct = src.count | times: 100.0 | divided_by: totalSourceSessions | round %}
+              <div class="source-bar-fill{% unless forloop.first %} source-bar-fill--secondary{% endunless %}" style="width: {{ srcPct }}%" role="progressbar" aria-valuenow="{{ srcPct }}" aria-valuemin="0" aria-valuemax="100" aria-label="{{ src.tool }} usage"></div>
+              {% endif %}
+            </div>
+            {% if totalSourceSessions > 0 %}
+            {% assign srcPctDisplay = src.count | times: 100.0 | divided_by: totalSourceSessions | round %}
+            <span class="source-pct">{{ srcPctDisplay }}%</span>
+            {% endif %}
+          </div>
+          {% endfor %}
+        </div>
+      </section>
+      {% endif %}
+
+      {%- comment -%} Cell 7: Project Cards (2-wide each) {%- endcomment -%}
+      {% for p in projects %}
+      <a href="/{{ user.username }}/{{ p.slug }}" class="bento-cell cell-project project-card" aria-label="View {{ p.title }} project">
+        <div class="project-header">
+          <h2 class="project-title">{{ p.title }}</h2>
+          <svg class="project-arrow" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><line x1="7" y1="17" x2="17" y2="7"/><polyline points="7 7 17 7 17 17"/></svg>
+        </div>
+        {% if p.narrative %}
+        <p class="project-narrative">{{ p.narrative | truncate: 120 }}</p>
+        {% endif %}
+        <div class="project-meta">
+          <span class="project-meta-item"><strong>{{ p.totalSessions }}</strong> sessions</span>
+          <span class="project-meta-item"><strong>{{ p.totalDurationMinutes | formatDuration }}</strong></span>
+          <span class="project-meta-item"><strong>{{ p.totalLoc | formatLoc }}</strong> LOC</span>
+        </div>
+        {% if p.skills.size > 0 %}
+        <div class="project-skills">
+          {% for skill in p.skills %}
+          <span class="skill-chip 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="project-source-bar" aria-label="Source breakdown">
+          {% for src in p.sourceCounts %}
+          {% assign pSrcPct = src.count | times: 100.0 | divided_by: pTotalSrc | round: 1 %}
+          <div class="project-source-segment" style="width: {{ pSrcPct }}%; background: var(--accent{% unless forloop.first %}-light{% endunless %});"></div>
+          {% endfor %}
+        </div>
+        {% endif %}
+        {% endif %}
+      </a>
+      {% endfor %}
+
+      {%- comment -%} Cell: Activity Heatmap (2-wide) {%- endcomment -%}
+      {% if activityByDay.size > 0 %}
+      <section class="bento-cell cell-activity" aria-label="Activity over time">
+        <h2>
+          <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><rect x="3" y="4" width="18" height="18" rx="2" ry="2"/><line x1="16" y1="2" x2="16" y2="6"/><line x1="8" y1="2" x2="8" y2="6"/><line x1="3" y1="10" x2="21" y2="10"/></svg>
+          Activity
+        </h2>
+        <div class="heatmap" role="img" aria-label="Activity heatmap showing session density over time">
+          {% for day in activityByDay %}
+          {% if day.count >= 4 %}{% assign level = 4 %}
+          {% elsif day.count >= 3 %}{% assign level = 3 %}
+          {% elsif day.count >= 2 %}{% assign level = 2 %}
+          {% elsif day.count >= 1 %}{% assign level = 1 %}
+          {% else %}{% assign level = 0 %}{% endif %}
+          <div class="heatmap-cell{% if level > 0 %} heatmap-cell--l{{ level }}{% endif %}" title="{{ day.date }}: {{ day.count }} sessions" aria-hidden="true"></div>
+          {% endfor %}
+        </div>
+        <div class="heatmap-legend">
+          <span class="heatmap-legend-label">Less</span>
+          <span class="heatmap-legend-cell" aria-hidden="true"></span>
+          <span class="heatmap-legend-cell heatmap-cell--l1" aria-hidden="true"></span>
+          <span class="heatmap-legend-cell heatmap-cell--l2" aria-hidden="true"></span>
+          <span class="heatmap-legend-cell heatmap-cell--l3" aria-hidden="true"></span>
+          <span class="heatmap-legend-cell heatmap-cell--l4" aria-hidden="true"></span>
+          <span class="heatmap-legend-label">More</span>
+        </div>
+      </section>
+      {% endif %}
+
+      {%- comment -%} Cell: All Skills (2-wide) {%- endcomment -%}
+      {% if allSkills.size > 0 %}
+      <section class="bento-cell cell-all-skills" aria-label="All skills across projects">
+        <h2>
+          <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><polygon points="12 2 15.09 8.26 22 9.27 17 14.14 18.18 21.02 12 17.77 5.82 21.02 7 14.14 2 9.27 8.91 8.26 12 2"/></svg>
+          Skills
+        </h2>
+        <div class="all-skills-grid">
+          {% for skill in allSkills %}
+          <span class="skill-chip">{{ skill }}</span>
+          {% endfor %}
+        </div>
+      </section>
+      {% endif %}
+
+      {%- comment -%} Cell: Recent Sessions (4-wide) {%- endcomment -%}
+      {% if recentSessions.size > 0 %}
+      <section class="bento-cell cell-recent" aria-label="Recent sessions">
+        <h2>
+          <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><polyline points="22 12 18 12 15 21 9 3 6 12 2 12"/></svg>
+          Recent Sessions
+        </h2>
+        <div class="recent-list" role="table" aria-label="Recent sessions list">
+          {% for rs in recentSessions %}
+          <div class="recent-row" role="row">
+            <span class="recent-title" role="cell">{{ rs.title }}</span>
+            <span class="recent-project" role="cell">{{ rs.projectTitle }}</span>
+            <span class="recent-date" role="cell">{% if rs.recordedAt %}{{ rs.recordedAt | formatDate: "short" }}{% endif %}</span>
+            <span class="recent-duration" role="cell">{{ rs.durationMinutes }}m</span>
+          </div>
+          {% endfor %}
+        </div>
+      </section>
+      {% endif %}
+
+    </div>
+  </div>
+
+  {%- comment -%} Stat counter animation {%- endcomment -%}
+
+</div>

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

@@ -0,0 +1,306 @@
+<div class="heyiam-project grid" data-render-version="2" data-template="grid"{% if sessionBaseUrl %} data-session-base-url="{{ sessionBaseUrl }}"{% endif %} data-username="{{ user.username }}" data-project-slug="{{ project.slug }}">
+
+  <div class="container">
+    <div class="breadcrumb" aria-label="Breadcrumb">
+      <a href="/{{ user.username }}">{{ user.username }}</a>
+      <span class="breadcrumb-sep" aria-hidden="true">/</span>
+      <span aria-current="page">{{ project.slug }}</span>
+    </div>
+
+    <div class="bento" aria-label="Project dashboard">
+
+      {%- comment -%} Cell 1: Title (3-wide) {%- endcomment -%}
+      <div class="bento-cell cell-title">
+        <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">
+            <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" 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 viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" 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 %}
+      </div>
+
+      {%- comment -%} Cell 2: Screenshot (spans 2 rows) {%- endcomment -%}
+      {% if project.screenshotUrl %}
+      <div class="bento-cell cell-screenshot">
+        <div class="browser-chrome">
+          <span class="browser-dot" aria-hidden="true"></span>
+          <span class="browser-dot" aria-hidden="true"></span>
+          <span class="browser-dot" aria-hidden="true"></span>
+          {% if project.projectUrl %}
+          <span class="browser-bar">{{ project.projectUrl | stripProtocol }}</span>
+          {% else %}
+          <span class="browser-bar">{{ project.slug }}</span>
+          {% endif %}
+        </div>
+        <div class="browser-viewport">
+          <img src="{{ project.screenshotUrl }}" alt="{{ project.title }} screenshot" style="width: 100%; height: 100%; object-fit: cover; border-radius: 0 0 var(--radius-sm) var(--radius-sm);">
+        </div>
+      </div>
+      {% endif %}
+
+      {%- comment -%} Cell 3: Stat -- Sessions {%- endcomment -%}
+      <section class="bento-cell cell-stat" aria-label="Sessions count">
+        <div class="stat-icon" aria-hidden="true">
+          <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><rect x="3" y="4" width="18" height="18" rx="2" ry="2"/><line x1="16" y1="2" x2="16" y2="6"/><line x1="8" y1="2" x2="8" y2="6"/><line x1="3" y1="10" x2="21" y2="10"/></svg>
+        </div>
+        <div>
+          <div class="stat-number" data-target="{{ project.totalSessions }}">0</div>
+          <div class="stat-label">Sessions</div>
+        </div>
+      </section>
+
+      {%- comment -%} Cell 4: Stat -- Human Time {%- endcomment -%}
+      {% if efficiencyMultiplier %}
+      <section class="bento-cell cell-stat" aria-label="Human time">
+        <div class="stat-icon" aria-hidden="true">
+          <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M20 21v-2a4 4 0 0 0-4-4H8a4 4 0 0 0-4 4v2"/><circle cx="12" cy="7" r="4"/></svg>
+        </div>
+        <div>
+          <div class="stat-number">{{ project.totalDurationMinutes | formatDuration }}</div>
+          <div class="stat-label">You</div>
+        </div>
+      </section>
+
+      {%- comment -%} Cell 4b: Stat -- Agent Time {%- endcomment -%}
+      <section class="bento-cell cell-stat" aria-label="Agent time">
+        <div class="stat-icon" aria-hidden="true">
+          <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><rect x="4" y="4" width="16" height="16" rx="2"/><line x1="9" y1="9" x2="9" y2="9.01"/><line x1="15" y1="9" x2="15" y2="9.01"/><path d="M8 14s1.5 2 4 2 4-2 4-2"/></svg>
+        </div>
+        <div>
+          <div class="stat-number" style="color: var(--accent);">{{ project.totalAgentDurationMinutes | formatDuration }}</div>
+          <div class="stat-label">Agents</div>
+        </div>
+      </section>
+
+      {%- comment -%} Cell 4c: Stat -- Multiplier {%- endcomment -%}
+      <section class="bento-cell cell-stat" aria-label="Multiplier">
+        <div class="stat-icon" aria-hidden="true">
+          <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><polyline points="23 6 13.5 15.5 8.5 10.5 1 18"/><polyline points="17 6 23 6 23 12"/></svg>
+        </div>
+        <div>
+          <div class="stat-number">{{ efficiencyMultiplier }}</div>
+          <div class="stat-label">Multiplier</div>
+        </div>
+      </section>
+      {% else %}
+      <section class="bento-cell cell-stat" aria-label="Total time">
+        <div class="stat-icon" aria-hidden="true">
+          <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="10"/><polyline points="12 6 12 12 16 14"/></svg>
+        </div>
+        <div>
+          <div class="stat-number">{{ project.totalDurationMinutes | formatDuration }}</div>
+          <div class="stat-label">Time</div>
+        </div>
+      </section>
+      {% endif %}
+
+      {%- comment -%} Cell 5: Stat -- LOC {%- endcomment -%}
+      <section class="bento-cell cell-stat" aria-label="Lines changed">
+        <div class="stat-icon" aria-hidden="true">
+          <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><polyline points="16 18 22 12 16 6"/><polyline points="8 6 2 12 8 18"/></svg>
+        </div>
+        <div>
+          <div class="stat-number" data-target="{{ project.totalLoc }}" data-format="comma">0</div>
+          <div class="stat-label">Lines Changed</div>
+        </div>
+      </section>
+
+      {%- comment -%} Cell 6: Stat -- Files {%- endcomment -%}
+      <section class="bento-cell cell-stat" aria-label="Files changed">
+        <div class="stat-icon" aria-hidden="true">
+          <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><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"/></svg>
+        </div>
+        <div>
+          <div class="stat-number" data-target="{{ project.totalFilesChanged }}">0</div>
+          <div class="stat-label">Files</div>
+        </div>
+      </section>
+
+      {%- comment -%} Cell 7: Stat -- Tokens {%- endcomment -%}
+      {% if project.totalTokens %}
+      <section class="bento-cell cell-stat" aria-label="Tokens used">
+        <div class="stat-icon" aria-hidden="true">
+          <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="10"/><path d="M12 6v6l4 2"/></svg>
+        </div>
+        <div>
+          <div class="stat-number">{{ project.totalTokens | formatTokens }}</div>
+          <div class="stat-label">Tokens</div>
+        </div>
+      </section>
+      {% endif %}
+
+      {%- comment -%} Narrative (3-wide) {%- endcomment -%}
+      {% if project.narrative %}
+      <section class="bento-cell cell-narrative" aria-label="Project narrative">
+        <h2 class="cell-heading">
+          <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M12 20h9"/><path d="M16.5 3.5a2.121 2.121 0 0 1 3 3L7 19l-4 1 1-4L16.5 3.5z"/></svg>
+          Narrative
+        </h2>
+        <p>{{ project.narrative }}</p>
+      </section>
+      {% endif %}
+
+      {%- comment -%} Phases (2-wide) {%- endcomment -%}
+      {% if arc.size > 0 %}
+      <section class="bento-cell cell-phases" aria-label="Project phases">
+        <h2 class="cell-heading">
+          <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><polyline points="22 12 18 12 15 21 9 3 6 12 2 12"/></svg>
+          Phases
+        </h2>
+        <ol class="phase-list" role="list">
+          {% for item in arc %}
+          <li class="phase-item">
+            <span class="phase-number" aria-hidden="true">{{ 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 %}
+              <div class="phase-desc">{{ item.description }}</div>
+            </div>
+          </li>
+          {% endfor %}
+        </ol>
+      </section>
+      {% endif %}
+
+      {%- comment -%} Skills (2-wide) {%- endcomment -%}
+      {% if project.skills.size > 0 %}
+      <section class="bento-cell cell-skills" aria-label="Skills used">
+        <h2 class="cell-heading">
+          <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><polygon points="12 2 15.09 8.26 22 9.27 17 14.14 18.18 21.02 12 17.77 5.82 21.02 7 14.14 2 9.27 8.91 8.26 12 2"/></svg>
+          Skills
+        </h2>
+        <div class="skills-grid">
+          {% for skill in project.skills %}
+          <span class="skill-chip chip">{{ skill }}</span>
+          {% endfor %}
+        </div>
+      </section>
+      {% endif %}
+
+      {%- comment -%} Key Decisions (2-wide) {%- endcomment -%}
+      {% if arc.size > 0 %}
+      <section class="bento-cell cell-decisions" aria-label="Key decisions">
+        <h2 class="cell-heading">
+          <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><circle cx="12" cy="12" r="10"/><line x1="12" y1="16" x2="12" y2="12"/><line x1="12" y1="8" x2="12.01" y2="8"/></svg>
+          Key Decisions
+        </h2>
+        <ol class="decision-list" role="list">
+          {% for item in arc %}
+          <li class="decision-item">
+            <span class="decision-text">{{ item.description }}</span>
+          </li>
+          {% endfor %}
+        </ol>
+      </section>
+      {% endif %}
+
+      {%- comment -%} Source Breakdown (2-wide) {%- endcomment -%}
+      {% if sourceCounts.size > 0 %}
+      <section class="bento-cell cell-source" aria-label="Source breakdown">
+        <h2 class="cell-heading">
+          <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><rect x="3" y="3" width="18" height="18" rx="2" ry="2"/><line x1="3" y1="9" x2="21" y2="9"/><line x1="9" y1="21" x2="9" y2="9"/></svg>
+          Source Breakdown
+        </h2>
+        <div class="source-bars">
+          {% assign totalSourceSessions = 0 %}
+          {% for src in sourceCounts %}
+            {% assign totalSourceSessions = totalSourceSessions | plus: src.count %}
+          {% endfor %}
+          {% for src in sourceCounts %}
+          <div class="source-item">
+            <span class="source-name">{{ src.tool }}</span>
+            <div class="source-bar-track">
+              {% if totalSourceSessions > 0 %}
+              {% assign srcPct = src.count | times: 100.0 | divided_by: totalSourceSessions | round: 1 %}
+              <div class="source-bar-fill{% unless forloop.first %} source-bar-fill--secondary{% endunless %}" style="width: {{ srcPct }}%"></div>
+              {% endif %}
+            </div>
+            {% if totalSourceSessions > 0 %}
+            {% assign srcPctDisplay = src.count | times: 100.0 | divided_by: totalSourceSessions | round: 1 %}
+            <span class="source-pct">{{ srcPctDisplay }}%</span>
+            {% endif %}
+          </div>
+          {% endfor %}
+        </div>
+      </section>
+      {% endif %}
+
+      {%- comment -%} Work Timeline table (4-wide) -- CSS-only, no JS charts {%- endcomment -%}
+      {% if featuredSessions.size > 0 %}
+      <section class="bento-cell cell-timeline" aria-label="Work timeline">
+        <h2 class="cell-heading">
+          <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><line x1="12" y1="20" x2="12" y2="10"/><line x1="18" y1="20" x2="18" y2="4"/><line x1="6" y1="20" x2="6" y2="16"/></svg>
+          Work Timeline
+        </h2>
+        <div class="timeline-chart" role="table" aria-label="Session timeline">
+          <div class="timeline-row timeline-header" role="row">
+            <span role="columnheader">#</span>
+            <span role="columnheader">Session</span>
+            <span role="columnheader" style="text-align:end">Date</span>
+            <span role="columnheader" style="text-align:end">Time</span>
+            <span role="columnheader" style="text-align:end">LOC</span>
+          </div>
+          {% for s in featuredSessions %}
+          <div class="timeline-row" role="row">
+            <span class="timeline-num" role="cell">{{ forloop.index }}</span>
+            <span class="timeline-title" role="cell">{{ s.title }}</span>
+            <span class="timeline-date" role="cell">{% if s.recordedAt %}{{ s.recordedAt | formatDate: "short" }}{% endif %}</span>
+            <span class="timeline-duration" role="cell">{{ s.durationMinutes }}m</span>
+            <span class="timeline-loc" role="cell">{{ s.locChanged | localeNumber }}</span>
+          </div>
+          {% endfor %}
+        </div>
+      </section>
+      {% endif %}
+
+      {%- comment -%} Featured Session Cards (2-wide each) {%- endcomment -%}
+      {% if featuredSessions.size > 0 %}
+      {% for s in featuredSessions %}
+      <a href="{{ sessionBaseUrl }}/{{ s.slug }}{{ sessionSuffix }}" class="bento-cell cell-session session-card" aria-label="View session: {{ s.title }}">
+        <div class="session-header">
+          <span class="session-title">{{ s.title }}</span>
+          {% if s.skills.size > 0 %}
+          <span class="session-tag">{{ s.skills | first }}</span>
+          {% endif %}
+        </div>
+        <div class="session-meta">
+          <span>{{ s.durationMinutes | formatDuration }}</span>
+          <span>{{ s.locChanged | localeNumber }} LOC</span>
+          {% if s.agentSummary and s.agentSummary.agents.size > 0 %}
+          <span>{{ s.agentSummary.agents.size }} agents</span>
+          {% elsif s.filesChanged %}
+          <span>{{ s.filesChanged }} files</span>
+          {% endif %}
+        </div>
+        {% if s.agentSummary and s.agentSummary.agents.size > 0 %}
+        <div class="session-agents" aria-label="Agent roles used">
+          {% assign agent_colors = '#7c3aed,#0891b2,#059669,#475569,#e11d48,#d97706' | split: ',' %}
+          {% for agent in s.agentSummary.agents %}
+          {% assign colorIdx = forloop.index0 | modulo: 6 %}
+          <span class="agent-dot" style="background: {{ agent_colors[colorIdx] }};" title="{{ agent.role }}"></span>
+          {% endfor %}
+        </div>
+        {% endif %}
+      </a>
+      {% endfor %}
+      {% endif %}
+
+    </div>
+  </div>
+
+  {%- comment -%} Stat counter animation {%- endcomment -%}
+
+</div>