heyiam 0.2.28 → 0.3.0

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

@@ -0,0 +1,282 @@
+<div class="heyiam-session signal" data-render-version="2" data-template="signal">
+
+  <a href="#main" class="skip-link">Skip to content</a>
+
+  {%- comment -%} Breadcrumb {%- endcomment -%}
+  <div class="container">
+    <nav class="breadcrumb" aria-label="Breadcrumb">
+      <a href="/{{ user.username }}">{{ user.username }}</a>
+      <span class="sep" aria-hidden="true">/</span>
+      <a href="/{{ user.username }}/{{ projectSlug }}">{{ projectSlug }}</a>
+      <span class="sep" aria-hidden="true">/</span>
+      <span aria-current="page">{{ session.title }}</span>
+    </nav>
+  </div>
+
+  {%- comment -%} Dashboard Strip {%- endcomment -%}
+  <section class="dashboard-strip" aria-label="Session statistics">
+    <div class="container">
+      <div class="stats-row">
+        <div class="stat-cell">
+          <div class="stat-value" data-animate data-target="{{ session.durationMinutes }}" data-suffix="m">0</div>
+          <div class="stat-label">Duration</div>
+        </div>
+        {% if session.wallClockMinutes %}
+        <div class="stat-cell">
+          <div class="stat-value" data-animate data-target="{{ session.wallClockMinutes }}" data-suffix="m">0</div>
+          <div class="stat-label">Wall Clock</div>
+        </div>
+        {% endif %}
+        <div class="stat-cell">
+          <div class="stat-value" data-animate data-target="{{ session.turns }}">0</div>
+          <div class="stat-label">Turns</div>
+        </div>
+        <div class="stat-cell">
+          <div class="stat-value green" data-animate data-target="{{ session.locChanged }}">0</div>
+          <div class="stat-label">LOC</div>
+        </div>
+        <div class="stat-cell">
+          <div class="stat-value" data-animate data-target="{{ session.filesChanged }}">0</div>
+          <div class="stat-label">Files</div>
+        </div>
+        {% if session.agentSessions.size > 0 %}
+        <div class="stat-cell">
+          <div class="stat-value" data-animate data-target="{{ session.agentSessions.size }}">0</div>
+          <div class="stat-label">Agents</div>
+        </div>
+        {% endif %}
+      </div>
+    </div>
+  </section>
+
+  {%- comment -%} Main Content {%- endcomment -%}
+  <main id="main" class="container">
+
+    {%- comment -%} Session Header {%- endcomment -%}
+    <header class="session-header fade-in">
+      <h1>{{ session.title }}</h1>
+      <div class="session-meta">
+        {% if session.recordedAt %}
+        <div class="meta-item">
+          <span class="meta-label">Date</span>
+          <span>{{ session.recordedAt | formatDate }}</span>
+        </div>
+        {% endif %}
+        {% if session.sourceTool %}
+        <div class="meta-item">
+          <span class="meta-label">Source</span>
+          <span class="source-tag {{ session.sourceTool | downcase }}">{{ session.sourceTool }}</span>
+        </div>
+        {% endif %}
+      </div>
+    </header>
+
+    {%- comment -%} Dev Take {%- endcomment -%}
+    {% if session.devTake != blank %}
+    <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 column {%- endcomment -%}
+      <div>
+
+        {%- comment -%} Skills {%- endcomment -%}
+        {% if session.skills.size > 0 %}
+        <section class="fade-in" aria-label="Skills" style="padding-top: 20px;">
+          <div class="skill-badges">
+            {% for skill in session.skills %}
+            <span class="skill-badge strong">{{ skill }}</span>
+            {% endfor %}
+          </div>
+        </section>
+        {% endif %}
+
+        {%- comment -%} Narrative {%- endcomment -%}
+        {% if session.narrative != blank %}
+        <section class="narrative fade-in" aria-label="Session narrative">
+          <div class="section-header">
+            <h2>Narrative</h2>
+            <div class="section-line" aria-hidden="true"></div>
+          </div>
+          <p>{{ session.narrative }}</p>
+        </section>
+        {% endif %}
+
+        {%- comment -%} Highlights {%- endcomment -%}
+        {% if session.highlights.size > 0 %}
+        <section class="fade-in" aria-label="Highlights">
+          <div class="section-header">
+            <h2>Highlights</h2>
+            <div class="section-line" aria-hidden="true"></div>
+          </div>
+          <ul class="highlights-list">
+            {% for h in session.highlights %}
+            <li>{{ h }}</li>
+            {% endfor %}
+          </ul>
+        </section>
+        {% endif %}
+
+        {%- comment -%} Execution Path / Beats {%- endcomment -%}
+        {% if session.beats.size > 0 %}
+        <section class="fade-in" aria-label="Execution path">
+          <div class="section-header">
+            <h2>Execution Path</h2>
+            <span class="section-tag">{{ session.beats.size }} beats</span>
+            <div class="section-line" aria-hidden="true"></div>
+          </div>
+          <div class="beats">
+            {% for beat in session.beats %}
+            <div class="beat">
+              <div class="beat-dot" aria-hidden="true"><div class="beat-dot-inner"></div></div>
+              <div class="beat-title">{{ beat.title }}</div>
+              {% if beat.body != blank %}
+              <div class="beat-desc">{{ beat.body }}</div>
+              {% endif %}
+            </div>
+            {% endfor %}
+          </div>
+        </section>
+        {% endif %}
+
+        {%- comment -%} Q&A {%- endcomment -%}
+        {% if session.qaPairs.size > 0 %}
+        <section class="fade-in" aria-label="Questions and answers">
+          <div class="section-header">
+            <h2>Q&amp;A</h2>
+            <span class="section-tag">{{ session.qaPairs.size }} questions</span>
+            <div class="section-line" aria-hidden="true"></div>
+          </div>
+          <div class="qa-list">
+            {% for qa in session.qaPairs %}
+            <article class="qa-item">
+              <div class="qa-question">
+                <span class="q-mark" aria-hidden="true">Q</span>
+                <span>{{ qa.question }}</span>
+              </div>
+              <div class="qa-answer">
+                <span class="a-mark" aria-hidden="true">A</span>
+                <span>{{ qa.answer }}</span>
+              </div>
+            </article>
+            {% endfor %}
+          </div>
+        </section>
+        {% endif %}
+
+        {%- comment -%} Agent Summary {%- endcomment -%}
+        {% if session.agentSessions.size > 0 %}
+        <section class="fade-in" aria-label="Agent summary">
+          <div class="section-header">
+            <h2>Agent Summary</h2>
+            <span class="section-tag">{{ session.agentSessions.size }} sub-sessions</span>
+            <div class="section-line" aria-hidden="true"></div>
+          </div>
+          <div class="agent-table-wrap" role="region" aria-label="Agent breakdown table" tabindex="0">
+            <table class="agent-table" aria-label="Agent roles and contributions">
+              <thead>
+                <tr>
+                  <th scope="col">Role</th>
+                  <th scope="col">Duration</th>
+                  <th scope="col">LOC</th>
+                </tr>
+              </thead>
+              <tbody>
+                {% for agent in session.agentSessions %}
+                <tr>
+                  <td>
+                    <div class="agent-role">
+                      <span class="agent-dot" style="background: {{ agent.color | default: 'var(--fg-dim)' }};" aria-hidden="true"></span>
+                      <span class="agent-role-name">{{ agent.role }}</span>
+                    </div>
+                  </td>
+                  <td class="stat-mono">{{ agent.durationMinutes | formatDuration }}</td>
+                  <td class="stat-mono stat-green">{{ agent.locChanged | localeNumber }}</td>
+                </tr>
+                {% endfor %}
+              </tbody>
+            </table>
+          </div>
+        </section>
+        {% endif %}
+
+      </div>
+
+      {%- comment -%} Sidebar {%- endcomment -%}
+      <aside class="sidebar" aria-label="Session details">
+
+        {%- comment -%} Tools Used {%- endcomment -%}
+        {% if session.toolBreakdown.size > 0 %}
+        <div class="sidebar-card fade-in">
+          <div class="sidebar-card-header">Tools Used</div>
+          <div class="sidebar-card-body">
+            {% assign maxToolCount = session.toolBreakdown[0].count %}
+            {% for tool in session.toolBreakdown %}
+              {% if tool.count > maxToolCount %}
+                {% assign maxToolCount = tool.count %}
+              {% endif %}
+            {% endfor %}
+            {% for tool in session.toolBreakdown %}
+            <div class="tool-row">
+              <span class="tool-name">{{ tool.tool }}</span>
+              <div class="tool-bar-bg">
+                {% if maxToolCount > 0 %}
+                {% assign toolPct = tool.count | times: 100 | divided_by: maxToolCount %}
+                <div class="tool-bar-fill" style="width: {{ toolPct }}%;"></div>
+                {% endif %}
+              </div>
+              <span class="tool-count">{{ tool.count }}</span>
+            </div>
+            {% endfor %}
+          </div>
+        </div>
+        {% endif %}
+
+        {%- comment -%} Files Changed {%- endcomment -%}
+        {% if session.topFiles.size > 0 %}
+        <div class="sidebar-card fade-in">
+          <div class="sidebar-card-header">Files Changed</div>
+          <div class="sidebar-card-body">
+            {% for file in session.topFiles %}
+            <div class="file-row">
+              <span class="file-name" title="{{ file.path }}">{{ file.path }}</span>
+              <span class="file-diff">+{{ file.additions }}</span>
+            </div>
+            {% endfor %}
+          </div>
+        </div>
+        {% endif %}
+
+        {%- comment -%} Skills {%- endcomment -%}
+        {% if session.skills.size > 0 %}
+        <div class="sidebar-card fade-in">
+          <div class="sidebar-card-header">Skills</div>
+          <div class="sidebar-card-body">
+            <div class="sidebar-skills">
+              {% for skill in session.skills %}
+              <span class="skill-badge strong">{{ skill }}</span>
+              {% endfor %}
+            </div>
+          </div>
+        </div>
+        {% endif %}
+
+      </aside>
+
+    </div>
+  </main>
+
+  {%- comment -%} Footer {%- endcomment -%}
+  <footer class="footer">
+    <div class="container">
+      signal template &middot; heyi.am
+    </div>
+  </footer>
+
+
+</div>