heyiam 0.2.28 → 0.3.0

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

@@ -0,0 +1,210 @@
+<div class="heyiam-session showcase" data-render-version="2" data-template="showcase">
+
+  <div class="sc-page">
+    <main id="main-content">
+
+      <!-- Breadcrumb -->
+      <div class="sc-breadcrumb" aria-label="Breadcrumb">
+        <a href="/@{{ user.username }}">{{ user.username }}</a>
+        {% if projectSlug %}
+        <span class="sc-breadcrumb__sep" aria-hidden="true">/</span>
+        <a href="/@{{ user.username }}/p/{{ projectSlug }}">{{ projectSlug }}</a>
+        {% endif %}
+        <span class="sc-breadcrumb__sep" aria-hidden="true">/</span>
+        <span aria-current="page">{{ session.title }}</span>
+      </div>
+
+      <!-- Title + Meta -->
+      <section class="sc-section section-gap" style="transition-delay: 100ms;" aria-label="Session header">
+        <h1 class="sc-session-title">{{ session.title }}</h1>
+        <div class="sc-meta-row">
+          {% if session.recordedAt != blank %}
+          <div class="sc-meta-item">
+            <span class="sc-meta-item__label">Date</span>
+            <span class="sc-meta-item__value">{{ session.recordedAt | formatDate }}</span>
+          </div>
+          {% endif %}
+          {% if session.sourceTool != blank %}
+          <span class="sc-meta-pill">{{ session.sourceTool }}</span>
+          {% endif %}
+          {% if session.durationMinutes %}
+          <div class="sc-meta-item">
+            <span class="sc-meta-item__label">Duration</span>
+            <span class="sc-meta-item__value">{{ session.durationMinutes | formatDuration }}</span>
+          </div>
+          {% endif %}
+          {% if session.turns %}
+          <div class="sc-meta-item">
+            <span class="sc-meta-item__label">Turns</span>
+            <span class="sc-meta-item__value">{{ session.turns }}</span>
+          </div>
+          {% endif %}
+          {% if session.locChanged %}
+          <div class="sc-meta-item">
+            <span class="sc-meta-item__label">LOC</span>
+            <span class="sc-meta-item__value">{{ session.locChanged | localeNumber }}</span>
+          </div>
+          {% endif %}
+          {% if session.filesChanged %}
+          <div class="sc-meta-item">
+            <span class="sc-meta-item__label">Files</span>
+            <span class="sc-meta-item__value">{{ session.filesChanged }}</span>
+          </div>
+          {% endif %}
+        </div>
+      </section>
+
+      <!-- Dev Take -->
+      {% if session.devTake != blank %}
+      <section class="sc-section section-gap" aria-label="Developer take">
+        <div class="sc-dev-take">
+          <p>{{ session.devTake }}</p>
+        </div>
+      </section>
+      {% endif %}
+
+      <!-- Two-Column Layout: main + sidebar -->
+      <div class="sc-session-layout section-gap-lg">
+        <!-- Main Column -->
+        <div>
+          <!-- Execution Path (Beats) -->
+          {% if session.beats.size > 0 %}
+          <section class="sc-section section-gap-lg" aria-label="Execution path">
+            <div class="sc-section-header">
+              <h2>Execution Path</h2>
+              <span class="sc-section-label">{{ session.beats.size }} beats</span>
+            </div>
+            <ol class="sc-beats-list">
+              {% for beat in session.beats %}
+              <li class="sc-beat-item sc-stagger">
+                <span class="sc-beat-number" aria-hidden="true">{{ beat.stepNumber }}</span>
+                <div class="sc-beat-title">{{ beat.title }}</div>
+                <div class="sc-beat-desc">{{ beat.body }}</div>
+              </li>
+              {% endfor %}
+            </ol>
+          </section>
+          {% endif %}
+
+          <!-- Q&A -->
+          {% if session.qaPairs.size > 0 %}
+          <section class="sc-section section-gap-lg" aria-label="Questions and answers">
+            <div class="sc-section-header">
+              <h2>Q&amp;A</h2>
+              <span class="sc-section-label">{{ session.qaPairs.size }} questions</span>
+            </div>
+            {% for qa in session.qaPairs %}
+            <div class="sc-qa-item sc-stagger">
+              <div class="sc-qa-question">
+                <span class="sc-qa-question__marker" aria-hidden="true">Q</span>
+                <span>{{ qa.question }}</span>
+              </div>
+              <div class="sc-qa-answer">{{ qa.answer }}</div>
+            </div>
+            {% endfor %}
+          </section>
+          {% endif %}
+
+          <!-- Agent Summary -->
+          {% if session.agentSummary %}
+          <section class="sc-section section-gap-lg" aria-label="Agent summary">
+            <div class="sc-section-header">
+              <h2>Agent Activity</h2>
+              <span class="sc-section-label">{{ session.agentSummary.agents.size }} agents</span>
+            </div>
+            <div class="sc-agent-timeline">
+              {% assign max_dur = 0 %}
+              {% for agent in session.agentSummary.agents %}
+                {% if agent.duration_minutes > max_dur %}
+                  {% assign max_dur = agent.duration_minutes %}
+                {% endif %}
+              {% endfor %}
+              {% for agent in session.agentSummary.agents %}
+              <div class="sc-agent-row">
+                <div class="sc-agent-row__dot" aria-hidden="true"></div>
+                <span class="sc-agent-row__name">{{ agent.role }}</span>
+                <span class="sc-agent-row__dur">{{ agent.duration_minutes }}m</span>
+                <div class="sc-agent-bar-track">
+                  {% if max_dur > 0 %}
+                  {% assign pct = agent.duration_minutes | times: 100.0 | divided_by: max_dur | round %}
+                  <div class="sc-agent-bar-fill" style="width: {{ pct }}%;"></div>
+                  {% endif %}
+                </div>
+                <span class="sc-agent-row__loc">{{ agent.loc_changed }} LOC</span>
+              </div>
+              {% endfor %}
+            </div>
+          </section>
+          {% endif %}
+
+          <!-- Highlights -->
+          {% if session.highlights.size > 0 %}
+          <section class="sc-section section-gap-lg" aria-label="Highlights">
+            <div class="sc-section-header">
+              <h2>Highlights</h2>
+            </div>
+            <ul class="sc-highlights-list">
+              {% for h in session.highlights %}
+              <li class="sc-stagger">{{ h }}</li>
+              {% endfor %}
+            </ul>
+          </section>
+          {% endif %}
+        </div>
+
+        <!-- Sidebar -->
+        <aside class="sc-sidebar" aria-label="Session details">
+          {% if session.toolBreakdown.size > 0 %}
+          <div class="sc-sidebar-card">
+            <h4>Tools Used</h4>
+            <table class="sc-tools-table" aria-label="Tool usage counts">
+              <tbody>
+                {% for t in session.toolBreakdown %}
+                <tr>
+                  <td>{{ t.tool }}</td>
+                  <td>{{ t.count }}</td>
+                </tr>
+                {% endfor %}
+              </tbody>
+            </table>
+          </div>
+          {% endif %}
+
+          {% if session.topFiles.size > 0 %}
+          <div class="sc-sidebar-card">
+            <h4>Files Changed</h4>
+            <table class="sc-files-table" aria-label="Changed files">
+              <tbody>
+                {% for f in session.topFiles %}
+                <tr>
+                  <td>{{ f.path }}</td>
+                  <td>+{{ f.additions }}{% if f.deletions > 0 %} -{{ f.deletions }}{% endif %}</td>
+                </tr>
+                {% endfor %}
+              </tbody>
+            </table>
+          </div>
+          {% endif %}
+
+          {% if session.skills.size > 0 %}
+          <div class="sc-sidebar-card">
+            <h4>Skills</h4>
+            <div class="sc-sidebar-skills">
+              {% for skill in session.skills %}
+              <span class="sc-skill-chip">{{ skill }}</span>
+              {% endfor %}
+            </div>
+          </div>
+          {% endif %}
+        </aside>
+      </div>
+
+    </main>
+
+    <footer class="sc-footer">
+      <span>built with <a href="https://heyi.am">heyi.am</a></span>
+    </footer>
+  </div>
+
+
+</div>