heyiam 0.2.29 → 0.3.1

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

@@ -0,0 +1,300 @@
+<div class="heyiam-session radar" data-render-version="2" data-template="radar">
+
+  {%- comment -%} Breadcrumb {%- endcomment -%}
+  <nav class="radar-breadcrumb" aria-label="Breadcrumb">
+    <a href="/{{ user.username }}">{{ user.username }}</a>
+    <span class="radar-breadcrumb__sep">/</span>
+    <a href="/{{ user.username }}/{{ projectSlug }}">{{ projectSlug }}</a>
+    <span class="radar-breadcrumb__sep">/</span>
+    <span>{{ session.slug }}</span>
+  </nav>
+
+  {%- comment -%} Title {%- endcomment -%}
+  <section class="radar-section" aria-label="Session title">
+    <h1 class="radar-title">{{ session.title }}</h1>
+  </section>
+
+  {%- comment -%} Session Meta {%- endcomment -%}
+  <section class="radar-section" aria-label="Session metadata" id="stats-section">
+    <div class="radar-label">Session Data</div>
+    <div class="stat-grid-inline">
+      {% if session.recordedAt %}
+      <div class="stat-card-sm">
+        <div class="stat-card-sm__label">Date</div>
+        <div class="stat-card-sm__value" style="font-size: 0.875rem;">{{ session.recordedAt | formatDateShort }}</div>
+      </div>
+      {% endif %}
+      {% if session.sourceTool %}
+      <div class="stat-card-sm">
+        <div class="stat-card-sm__label">Source</div>
+        <div class="stat-card-sm__value" style="font-size: 0.875rem;">{{ session.sourceTool }}</div>
+      </div>
+      {% endif %}
+      {% if session.durationMinutes %}
+      <div class="stat-card-sm">
+        <div class="stat-card-sm__label">Duration</div>
+        <div class="stat-card-sm__value">{{ session.durationMinutes | formatDuration }}</div>
+      </div>
+      {% endif %}
+      {% if session.wallClockMinutes %}
+      <div class="stat-card-sm">
+        <div class="stat-card-sm__label">Wall Clock</div>
+        <div class="stat-card-sm__value">{{ session.wallClockMinutes | formatDuration }}</div>
+      </div>
+      {% endif %}
+      {% if session.turns %}
+      <div class="stat-card-sm">
+        <div class="stat-card-sm__label">Turns</div>
+        <div class="stat-card-sm__value">{{ session.turns }}</div>
+      </div>
+      {% endif %}
+      {% if session.locChanged %}
+      <div class="stat-card-sm">
+        <div class="stat-card-sm__label">LOC</div>
+        <div class="stat-card-sm__value">{{ session.locChanged | formatLoc }}</div>
+      </div>
+      {% endif %}
+      {% if session.filesChanged %}
+      <div class="stat-card-sm">
+        <div class="stat-card-sm__label">Files</div>
+        <div class="stat-card-sm__value">{{ session.filesChanged }}</div>
+      </div>
+      {% endif %}
+    </div>
+  </section>
+
+  {%- comment -%} Dev Take {%- endcomment -%}
+  {% if session.devTake != blank %}
+  <section class="radar-section" aria-label="Developer commentary">
+    <div class="radar-label">Dev Take</div>
+    <div class="dev-take">
+      <p>&ldquo;{{ session.devTake }}&rdquo;</p>
+    </div>
+  </section>
+  {% endif %}
+
+  {%- comment -%} Main Content + Sidebar {%- endcomment -%}
+  <section class="radar-section" aria-label="Session details">
+    <div class="session-layout">
+
+      {%- comment -%} Main Column {%- endcomment -%}
+      <div>
+        {%- comment -%} Execution Path / Beats {%- endcomment -%}
+        {% if session.beats.size > 0 %}
+        <div class="radar-label">Execution Path</div>
+        <ol class="beat-list" role="list">
+          <div class="beat-list__line"></div>
+          {% for beat in session.beats %}
+          <li class="beat-item">
+            <div class="beat-item__dot"></div>
+            <div class="beat-item__number">Beat {{ beat.stepNumber }}</div>
+            <div class="beat-item__title">{{ beat.title }}</div>
+            {% if beat.body != blank %}
+            <div class="beat-item__desc">{{ beat.body }}</div>
+            {% endif %}
+          </li>
+          {% endfor %}
+        </ol>
+        {% endif %}
+
+        {%- comment -%} Narrative {%- endcomment -%}
+        {% if session.narrative != blank %}
+        <div style="margin-top: 2rem;">
+          <div class="radar-label">Narrative</div>
+          <div class="radar-narrative">
+            {{ session.narrative }}
+          </div>
+        </div>
+        {% endif %}
+
+        {%- comment -%} Highlights {%- endcomment -%}
+        {% if session.highlights.size > 0 %}
+        <div style="margin-top: 2rem;">
+          <div class="radar-label">Highlights</div>
+          <ul class="decision-list">
+            {% for h in session.highlights %}
+            <li class="decision-item">
+              <div class="decision-bullet">
+                <div>
+                  <div class="decision-desc">{{ h }}</div>
+                </div>
+              </div>
+            </li>
+            {% endfor %}
+          </ul>
+        </div>
+        {% endif %}
+      </div>
+
+      {%- comment -%} Sidebar {%- endcomment -%}
+      <aside aria-label="Session sidebar">
+
+        {%- comment -%} Tools Used {%- endcomment -%}
+        {% if session.toolBreakdown.size > 0 %}
+        <div class="sidebar-card">
+          <div class="radar-label">Tools Used</div>
+          <table class="tools-table">
+            <thead>
+              <tr><th>Tool</th><th style="text-align: right;">Count</th></tr>
+            </thead>
+            <tbody>
+              {% for t in session.toolBreakdown %}
+              <tr><td>{{ t.tool }}</td><td>{{ t.count }}</td></tr>
+              {% endfor %}
+            </tbody>
+          </table>
+        </div>
+        {% endif %}
+
+        {%- comment -%} Files Changed {%- endcomment -%}
+        {% if session.topFiles.size > 0 %}
+        <div class="sidebar-card">
+          <div class="radar-label">Files Changed</div>
+          <table class="files-table">
+            <thead>
+              <tr><th>File</th><th style="text-align: right;">+/-</th></tr>
+            </thead>
+            <tbody>
+              {% for f in session.topFiles %}
+              <tr><td>{{ f.path }}</td><td>+{{ f.additions }}{% if f.deletions > 0 %}/&minus;{{ f.deletions }}{% endif %}</td></tr>
+              {% endfor %}
+            </tbody>
+          </table>
+        </div>
+        {% endif %}
+
+        {%- comment -%} Skills {%- endcomment -%}
+        {% if session.skills.size > 0 %}
+        <div class="sidebar-card">
+          <div class="radar-label">Skills</div>
+          <div class="chip-list">
+            {% for skill in session.skills %}
+            <span class="chip">{{ skill }}</span>
+            {% endfor %}
+          </div>
+        </div>
+        {% endif %}
+
+      </aside>
+    </div>
+  </section>
+
+  {%- comment -%} Q&A {%- endcomment -%}
+  {% if session.qaPairs.size > 0 %}
+  <section class="radar-section" aria-label="Questions and answers">
+    <div class="radar-label">Q&amp;A</div>
+    <div>
+      {% for qa in session.qaPairs %}
+      <div class="qa-item">
+        <div class="qa-question">{{ qa.question }}</div>
+        <div class="qa-answer">{{ qa.answer }}</div>
+      </div>
+      {% endfor %}
+    </div>
+  </section>
+  {% endif %}
+
+  {%- comment -%} Agent Summary {%- endcomment -%}
+  {% if session.agentSummary != blank or session.agents.size > 0 %}
+  <section class="radar-section" aria-label="Agent summary" id="agent-section">
+    <div class="radar-label">Agent Summary</div>
+    {% if session.agents.size > 0 %}
+    <div class="agent-layout">
+      <div>
+        <table class="agent-table">
+          <thead>
+            <tr><th>Role</th><th style="text-align: right;">Duration</th><th style="text-align: right;">LOC</th></tr>
+          </thead>
+          <tbody>
+            {% for agent in session.agents %}
+            <tr>
+              <td><span class="agent-dot agent-dot--{{ agent.role | downcase }}"></span>{{ agent.role }}</td>
+              <td>{{ agent.durationMinutes | formatDuration }}</td>
+              <td>{{ agent.locChanged | formatLoc }}</td>
+            </tr>
+            {% endfor %}
+          </tbody>
+        </table>
+      </div>
+      <div>
+        <div class="agent-bar-chart">
+          {% assign maxAgentDuration = session.agents[0].durationMinutes %}
+          {% for agent in session.agents %}
+          {% if agent.durationMinutes > maxAgentDuration %}{% assign maxAgentDuration = agent.durationMinutes %}{% endif %}
+          {% endfor %}
+          {% for agent in session.agents %}
+          <div class="agent-bar-row">
+            <div class="agent-bar-row__label">{{ agent.role }}</div>
+            <div class="agent-bar-row__bar" style="width: {{ agent.durationMinutes | times: 100.0 | divided_by: maxAgentDuration | round }}%; background: var(--accent);"></div>
+            <div class="agent-bar-row__value">{{ agent.durationMinutes | formatDuration }}</div>
+          </div>
+          {% endfor %}
+        </div>
+      </div>
+    </div>
+    {% endif %}
+    {% if session.agentSummary != blank %}
+    <div class="radar-narrative" {% if session.agents.size > 0 %}style="margin-top: 1.5rem;"{% endif %}>
+      {{ session.agentSummary }}
+    </div>
+    {% endif %}
+  </section>
+  {% endif %}
+
+  {%- comment -%} Footer {%- endcomment -%}
+  <section class="radar-section" aria-label="Footer" data-radar-section="footer">
+    <footer class="radar-footer">
+      <div class="radar-footer__text">Built with heyi.am</div>
+    </footer>
+  </section>
+
+{%- comment -%} Radar Floating Nav {%- endcomment -%}
+<nav class="radar-nav" aria-label="Section navigation">
+  <div class="radar-nav__ring"></div>
+  <div class="radar-nav__sweep"></div>
+  <div class="radar-nav__center"></div>
+</nav>
+<script>
+(function() {
+  'use strict';
+  var nav = document.querySelector('.radar-nav');
+  if (!nav) return;
+  var sections = document.querySelectorAll('.radar-section');
+  var dots = [];
+  sections.forEach(function(sec, i) {
+    sec.setAttribute('data-radar-section', i);
+    var label = sec.getAttribute('aria-label') || 'Section ' + (i + 1);
+    var btn = document.createElement('button');
+    btn.className = 'radar-nav__dot';
+    btn.setAttribute('data-radar-dot', i);
+    btn.setAttribute('aria-label', 'Navigate to ' + label);
+    nav.appendChild(btn);
+    dots.push(btn);
+  });
+  var total = dots.length;
+  dots.forEach(function(dot, i) {
+    var angle = (i / total) * 2 * Math.PI - Math.PI / 2;
+    var r = 54;
+    dot.style.left = (60 + r * Math.cos(angle) - 3) + 'px';
+    dot.style.top  = (60 + r * Math.sin(angle) - 3) + 'px';
+  });
+  var observer = new IntersectionObserver(function(entries) {
+    entries.forEach(function(entry) {
+      var idx = entry.target.getAttribute('data-radar-section');
+      var dot = nav.querySelector('[data-radar-dot="' + idx + '"]');
+      if (dot) dot.classList.toggle('radar-nav__dot--active', entry.isIntersecting);
+    });
+  }, { threshold: 0.3 });
+  sections.forEach(function(s) { observer.observe(s); });
+  dots.forEach(function(dot) {
+    dot.addEventListener('click', function() {
+      var idx = this.getAttribute('data-radar-dot');
+      var target = document.querySelector('[data-radar-section="' + idx + '"]');
+      if (target) target.scrollIntoView({ behavior: 'smooth', block: 'start' });
+    });
+  });
+})();
+</script>
+
+</div>
+