heyiam 0.2.28 → 0.3.0

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

@@ -0,0 +1,237 @@
+<div class="heyiam-session verdant" data-render-version="2" data-template="verdant">
+
+  <div class="vd-page">
+
+    <main id="main-content">
+
+      {%- comment -%} Breadcrumb {%- endcomment -%}
+      <nav class="vd-breadcrumb" aria-label="Breadcrumb">
+        <a href="/{{ user.username }}">{{ user.username }}</a>
+        {% if projectSlug %}
+        <span class="vd-breadcrumb__sep" aria-hidden="true">/</span>
+        <a href="/{{ user.username }}/{{ projectSlug }}">{{ projectSlug }}</a>
+        {% endif %}
+        <span class="vd-breadcrumb__sep" aria-hidden="true">/</span>
+        <span>{{ session.title }}</span>
+      </nav>
+
+      {%- comment -%} Session Header {%- endcomment -%}
+      <section class="vd-section vd-session-header" aria-label="Session header">
+        <h1>{{ session.title }}</h1>
+        <div class="vd-meta-row">
+          {% if session.recordedAt %}
+          <div class="vd-meta-item">
+            <svg width="14" height="14" 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>
+            <span>{{ session.recordedAt | formatDate }}</span>
+          </div>
+          {% endif %}
+          {% if session.sourceTool %}
+          <div class="vd-meta-item">
+            <span class="vd-badge">
+              <svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M16 18l6-6-6-6"/><path d="M8 6l-6 6 6 6"/></svg>
+              {{ session.sourceTool }}
+            </span>
+          </div>
+          {% endif %}
+          <div class="vd-meta-item">
+            <svg width="14" height="14" 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"/><polyline points="12 6 12 12 16 14"/></svg>
+            <span>{{ session.durationMinutes | formatDuration }}{% if session.wallClockMinutes %} ({{ session.wallClockMinutes | formatDuration }} wall){% endif %}</span>
+          </div>
+          <div class="vd-meta-item">
+            <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M21 15a2 2 0 01-2 2H7l-4 4V5a2 2 0 012-2h14a2 2 0 012 2z"/></svg>
+            <span>{{ session.turns }} turns</span>
+          </div>
+          <div class="vd-meta-item">
+            <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><polyline points="16 18 22 12 16 6"/><polyline points="8 6 2 12 8 18"/></svg>
+            <span>{{ session.locChanged | localeNumber }} LOC</span>
+          </div>
+          <div class="vd-meta-item">
+            <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M14 2H6a2 2 0 00-2 2v16a2 2 0 002 2h12a2 2 0 002-2V8z"/><polyline points="14 2 14 8 20 8"/></svg>
+            <span>{{ session.filesChanged }} files</span>
+          </div>
+        </div>
+      </section>
+
+      {%- comment -%} Dev Take {%- endcomment -%}
+      {% if session.devTake != blank %}
+      <section class="vd-section" aria-label="Developer's take">
+        <div class="vd-dev-take">
+          <div class="vd-dev-take__label">Dev Take</div>
+          <blockquote>{{ session.devTake }}</blockquote>
+        </div>
+      </section>
+      {% endif %}
+
+      {%- comment -%} Leaf Divider {%- endcomment -%}
+      <div class="vd-leaf-divider" role="separator">
+        <div class="vd-leaf-divider__line"></div>
+        <svg class="vd-leaf-divider__icon" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true">
+          <path d="M17 8C8 10 5.9 16.17 3.82 21.34l1.89.66.95-2.3c.48.17.98.3 1.34.3C19 20 22 3 22 3c-1 2-8 2.25-13 3.25S2 11.5 2 13.5s1.75 3.75 1.75 3.75"/>
+        </svg>
+        <div class="vd-leaf-divider__line"></div>
+      </div>
+
+      {%- comment -%} Two Column Layout {%- endcomment -%}
+      <div class="vd-two-col">
+
+        {%- comment -%} Main Content {%- endcomment -%}
+        <div>
+
+          {%- comment -%} Execution Path (Beats) {%- endcomment -%}
+          {% if session.beats.size > 0 %}
+          <section class="vd-section" aria-label="Execution path">
+            <div class="vd-section-header">
+              <div class="vd-section-header__icon" aria-hidden="true">
+                <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><polyline points="22 12 18 12 15 21 9 3 6 12 2 12"/></svg>
+              </div>
+              <h2>Execution Path</h2>
+            </div>
+            <div class="vd-beats" role="list" aria-label="Execution steps">
+              {% for beat in session.beats %}
+              <div class="vd-beat" role="listitem">
+                <div class="vd-beat__node" aria-hidden="true"><span class="vd-beat__node-num">{{ beat.stepNumber }}</span></div>
+                <div class="vd-beat__title">{{ beat.title }}</div>
+                {% if beat.body != blank %}
+                <div class="vd-beat__desc">{{ beat.body }}</div>
+                {% endif %}
+              </div>
+              {% endfor %}
+            </div>
+          </section>
+          {% endif %}
+
+          {%- comment -%} Leaf Divider between beats and Q&A {%- endcomment -%}
+          {% if session.beats.size > 0 and session.qaPairs.size > 0 %}
+          <div class="vd-leaf-divider" role="separator">
+            <div class="vd-leaf-divider__line"></div>
+            <svg class="vd-leaf-divider__icon" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true">
+              <path d="M6.5 21.5s2-3 2-6c0-4-3-6-3-6s3 1 6 1 7-2 7-2-1 4-1 7-1.5 6-1.5 6"/>
+              <path d="M8 14s-1.5-2-1.5-4 2-4.5 2-4.5"/>
+            </svg>
+            <div class="vd-leaf-divider__line"></div>
+          </div>
+          {% endif %}
+
+          {%- comment -%} Q&A {%- endcomment -%}
+          {% if session.qaPairs.size > 0 %}
+          <section class="vd-section" aria-label="Questions and answers">
+            <div class="vd-section-header">
+              <div class="vd-section-header__icon" aria-hidden="true">
+                <svg width="16" height="16" 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="M9.09 9a3 3 0 015.83 1c0 2-3 3-3 3"/><line x1="12" y1="17" x2="12.01" y2="17"/></svg>
+              </div>
+              <h2>Q&amp;A</h2>
+            </div>
+            <div class="vd-qa-list">
+              {% for qa in session.qaPairs %}
+              <article class="vd-qa-item">
+                <div class="vd-qa-item__q">
+                  <span class="vd-qa-item__q-marker" aria-hidden="true">Q</span>
+                  <span>{{ qa.question }}</span>
+                </div>
+                <p class="vd-qa-item__a">{{ qa.answer }}</p>
+              </article>
+              {% endfor %}
+            </div>
+          </section>
+          {% endif %}
+
+          {%- comment -%} Agent Summary {%- endcomment -%}
+          {% if session.agentSummary %}
+          <section class="vd-section" aria-label="Agent summary" style="margin-top: 2.5rem;">
+            <div class="vd-section-header">
+              <div class="vd-section-header__icon" aria-hidden="true">
+                <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M17 21v-2a4 4 0 00-4-4H5a4 4 0 00-4 4v2"/><circle cx="9" cy="7" r="4"/><path d="M23 21v-2a4 4 0 00-3-3.87"/><path d="M16 3.13a4 4 0 010 7.75"/></svg>
+              </div>
+              <h2>Agent Contributions</h2>
+            </div>
+            <div class="vd-agents">
+              {% for agent in session.agentSummary.agents %}
+              <div class="vd-agent-row">
+                <div class="vd-agent-row__info">
+                  <span class="vd-agent-row__name">{{ agent.role }}</span>
+                  <span class="vd-agent-row__meta">{{ agent.duration_minutes | formatDuration }} &middot; {{ agent.loc_changed }} LOC</span>
+                </div>
+                <div class="vd-agent-bar">
+                  <div class="vd-agent-bar-fill" data-width="{{ agent.percentage }}" style="background: var(--color-{{ agent.role | slugify }});" aria-hidden="true"></div>
+                </div>
+              </div>
+              {% endfor %}
+            </div>
+          </section>
+          {% endif %}
+
+        </div>
+
+        {%- comment -%} Sidebar {%- endcomment -%}
+        <aside class="vd-sidebar" aria-label="Session details">
+
+          {%- comment -%} Tools Used {%- endcomment -%}
+          {% if session.toolBreakdown.size > 0 %}
+          <div class="vd-sidebar-card">
+            <div class="vd-sidebar-card__title">Tools Used</div>
+            <table class="vd-tools-table" aria-label="Tool usage counts">
+              <tbody>
+                {% for tool in session.toolBreakdown %}
+                <tr>
+                  <td>{{ tool.tool }}</td>
+                  <td>{{ tool.count }}</td>
+                </tr>
+                {% endfor %}
+              </tbody>
+            </table>
+          </div>
+          {% endif %}
+
+          {%- comment -%} Files Changed {%- endcomment -%}
+          {% if session.topFiles.size > 0 %}
+          <div class="vd-sidebar-card">
+            <div class="vd-sidebar-card__title">Files Changed</div>
+            <div class="vd-files-list" aria-label="Changed files">
+              {% for file in session.topFiles %}
+              <div class="vd-file-item">
+                <span class="vd-file-item__name" title="{{ file.path }}">{{ file.path }}</span>
+                <span class="vd-file-item__diff">+{{ file.additions }}</span>
+              </div>
+              {% endfor %}
+            </div>
+          </div>
+          {% endif %}
+
+          {%- comment -%} Skills {%- endcomment -%}
+          {% if session.skills.size > 0 %}
+          <div class="vd-sidebar-card">
+            <div class="vd-sidebar-card__title">Skills</div>
+            <div class="vd-sidebar-skills">
+              {% for skill in session.skills %}
+              <span class="vd-skill-chip">{{ skill }}</span>
+              {% endfor %}
+            </div>
+          </div>
+          {% endif %}
+
+          {%- comment -%} Highlights {%- endcomment -%}
+          {% if session.highlights.size > 0 %}
+          <div class="vd-sidebar-card">
+            <div class="vd-sidebar-card__title">Highlights</div>
+            <ul style="list-style: none; padding: 0; margin: 0;">
+              {% for h in session.highlights %}
+              <li style="font-size: 0.8125rem; color: var(--vd-on-surface-2); padding: 0.25rem 0; border-bottom: 1px solid var(--vd-border-light);">{{ h }}</li>
+              {% endfor %}
+            </ul>
+          </div>
+          {% endif %}
+
+        </aside>
+
+      </div>
+
+    </main>
+
+    <footer class="vd-footer">
+      <p>Built with <a href="https://heyi.am">heyi.am</a> &mdash; the signal-first portfolio</p>
+    </footer>
+
+  </div>
+
+
+</div>