heyiam 0.2.29 → 0.3.0

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

@@ -0,0 +1,333 @@
+<div class="heyiam-session bauhaus" data-render-version="2" data-template="bauhaus">
+
+  {%- comment -%} Breadcrumb {%- endcomment -%}
+  <nav class="breadcrumb" aria-label="Breadcrumb">
+    <a href="/{{ user.username }}">{{ user.username }}</a>
+    <span aria-hidden="true">/</span>
+    {% if projectSlug %}
+    <a href="/{{ user.username }}/{{ projectSlug }}">{{ projectSlug }}</a>
+    <span aria-hidden="true">/</span>
+    {% endif %}
+    <strong>{{ session.title }}</strong>
+  </nav>
+
+  <div class="page-layout">
+    {%- comment -%} Main content column {%- endcomment -%}
+    <main class="content-col">
+
+      {%- comment -%} Session hero {%- endcomment -%}
+      <header class="session-hero anim-slide-left">
+        <h1>{{ session.title }}</h1>
+        <div class="session-meta">
+          {% if session.sourceTool %}
+          <span class="meta-badge meta-badge-source">{{ session.sourceTool }}</span>
+          {% endif %}
+          {% if session.recordedAt %}
+          <span class="meta-date">{{ session.recordedAt | formatDate }}</span>
+          {% endif %}
+        </div>
+        <div class="session-hero-shapes anim-scale-in anim-delay-2" aria-hidden="true">
+          <div class="sh-circle"></div>
+          <div class="sh-rect"></div>
+          <div class="sh-sq"></div>
+        </div>
+      </header>
+
+      {%- comment -%} Stats row {%- endcomment -%}
+      <section class="stats-row anim-fade-up anim-delay-1" aria-label="Session statistics">
+        <div class="stats-row-item">
+          <div class="sr-number">{{ session.durationMinutes | formatDuration }}</div>
+          <div class="sr-label">Duration</div>
+        </div>
+        <div class="stats-row-item">
+          <div class="sr-number">{{ session.turns }}</div>
+          <div class="sr-label">Turns</div>
+        </div>
+        <div class="stats-row-item">
+          <div class="sr-number">{{ session.locChanged | localeNumber }}</div>
+          <div class="sr-label">LOC</div>
+        </div>
+        <div class="stats-row-item">
+          <div class="sr-number">{{ session.filesChanged }}</div>
+          <div class="sr-label">Files</div>
+        </div>
+      </section>
+
+      {%- comment -%} Dev take {%- endcomment -%}
+      {% if session.devTake %}
+      <section class="dev-take anim-slide-right anim-delay-2" aria-label="Developer commentary">
+        <div class="dev-take-label">Dev Take</div>
+        <blockquote>{{ session.devTake }}</blockquote>
+      </section>
+      {% endif %}
+
+      {%- comment -%} Context {%- endcomment -%}
+      {% if session.context %}
+      <section class="dev-take anim-slide-left anim-delay-2" aria-label="Session context">
+        <div class="dev-take-label">Context</div>
+        <blockquote>{{ session.context }}</blockquote>
+      </section>
+      {% endif %}
+
+      {%- comment -%} Narrative {%- endcomment -%}
+      {% if session.narrative %}
+      <section class="narrative-section anim-slide-left anim-delay-2" aria-label="Session narrative">
+        <div class="section-heading">
+          <svg width="18" height="18" aria-hidden="true">
+            <rect width="18" height="18" fill="var(--red)" />
+          </svg>
+          <h2>Narrative</h2>
+          <div class="heading-line" aria-hidden="true"></div>
+        </div>
+        <div class="narrative-block">
+          {{ session.narrative }}
+        </div>
+      </section>
+      {% endif %}
+
+      {%- comment -%} Execution path (beats) {%- endcomment -%}
+      {% if session.beats.size > 0 %}
+      <section class="beats-section anim-slide-left anim-delay-2" aria-label="Execution path">
+        <div class="section-heading">
+          <svg width="18" height="18" aria-hidden="true">
+            <rect width="18" height="18" fill="var(--red)" />
+          </svg>
+          <h2>Execution Path</h2>
+          <div class="heading-line" aria-hidden="true"></div>
+        </div>
+        <ol class="beats-list">
+          {% for beat in session.beats %}
+          <li class="beat-item">
+            <div class="beat-number" aria-hidden="true">{{ beat.stepNumber }}</div>
+            <div class="beat-content">
+              <div class="beat-title">{{ beat.title }}</div>
+              <div class="beat-desc">{{ beat.body }}</div>
+            </div>
+          </li>
+          {% endfor %}
+        </ol>
+      </section>
+      {% endif %}
+
+      {%- comment -%} Q&A {%- endcomment -%}
+      {% if session.qaPairs.size > 0 %}
+      <section class="qa-section anim-slide-right anim-delay-3" aria-label="Questions and answers">
+        <div class="section-heading">
+          <svg width="18" height="18" aria-hidden="true">
+            <circle cx="9" cy="9" r="9" fill="var(--blue)" />
+          </svg>
+          <h2>Q&amp;A</h2>
+          <div class="heading-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="qa-q-marker" aria-hidden="true">Q</span>
+              <span>{{ qa.question }}</span>
+            </div>
+            <div class="qa-answer">
+              <span class="qa-a-marker" aria-hidden="true">A</span>
+              <span>{{ qa.answer }}</span>
+            </div>
+          </article>
+          {% endfor %}
+        </div>
+      </section>
+      {% endif %}
+
+      {%- comment -%} Highlights {%- endcomment -%}
+      {% if session.highlights.size > 0 %}
+      <section class="highlights-section anim-slide-left anim-delay-3" aria-label="Highlights">
+        <div class="section-heading">
+          <svg width="18" height="18" aria-hidden="true">
+            <rect width="18" height="18" fill="var(--yellow)" />
+          </svg>
+          <h2>Highlights</h2>
+          <div class="heading-line" aria-hidden="true"></div>
+        </div>
+        <ul class="decisions-list">
+          {% for h in session.highlights %}
+          <li class="decision-item">
+            <div class="decision-number" aria-hidden="true">{{ forloop.index }}</div>
+            <div class="decision-text">{{ h }}</div>
+          </li>
+          {% endfor %}
+        </ul>
+      </section>
+      {% endif %}
+
+      {%- comment -%} Agent summary {%- endcomment -%}
+      {% if session.agentSummary %}
+      <section class="agents-section anim-slide-left anim-delay-3" aria-label="Agent summary">
+        <div class="section-heading">
+          <svg width="18" height="18" aria-hidden="true">
+            <rect width="18" height="18" fill="var(--yellow)" />
+          </svg>
+          <h2>Agent Summary</h2>
+          <div class="heading-line" aria-hidden="true"></div>
+        </div>
+        <div class="agents-table-wrapper">
+          <table class="agents-table">
+            <thead>
+              <tr>
+                <th scope="col">Role</th>
+                <th scope="col">Duration</th>
+                <th scope="col">LOC</th>
+              </tr>
+            </thead>
+            <tbody>
+              {% for agent in session.agentSummary.agents %}
+              <tr>
+                <td>
+                  <div class="agent-role-name">
+                    <span class="agent-role-dot" style="background: {{ agent.color }}"></span>
+                    <span class="agent-role-label">{{ agent.role }}</span>
+                  </div>
+                </td>
+                <td>{{ agent.duration_minutes | formatDuration }}</td>
+                <td>{{ agent.loc_changed | localeNumber }}</td>
+              </tr>
+              {% endfor %}
+            </tbody>
+          </table>
+        </div>
+
+        {%- comment -%} Agent bar chart {%- endcomment -%}
+        {% assign maxAgentDuration = 0 %}
+        {% for agent in session.agentSummary.agents %}
+          {% if agent.duration_minutes > maxAgentDuration %}
+            {% assign maxAgentDuration = agent.duration_minutes %}
+          {% endif %}
+        {% endfor %}
+        {% if maxAgentDuration > 0 %}
+        <div class="agent-bar-chart anim-fade-up anim-delay-4" aria-label="Agent duration visualization">
+          {% for agent in session.agentSummary.agents %}
+          <div class="agent-bar-row">
+            <div class="agent-bar-label">{{ agent.role }}</div>
+            <div class="agent-bar-track">
+              <div class="agent-bar-fill" style="width: {{ agent.duration_minutes | times: 100 | divided_by: maxAgentDuration }}%; background: {{ agent.color }};"></div>
+            </div>
+            <div class="agent-bar-value">{{ agent.duration_minutes | formatDuration }}</div>
+          </div>
+          {% endfor %}
+        </div>
+        {% endif %}
+      </section>
+      {% endif %}
+
+    </main>
+
+    {%- comment -%} Sidebar {%- endcomment -%}
+    <aside class="sidebar anim-slide-right anim-delay-2" aria-label="Session details">
+
+      {%- comment -%} Tools used {%- endcomment -%}
+      {% if session.toolBreakdown.size > 0 %}
+      <div class="sidebar-card">
+        <div class="sidebar-card-header">
+          <svg class="sidebar-card-header-shape" width="14" height="14" aria-hidden="true">
+            <rect width="14" height="14" fill="var(--red)" />
+          </svg>
+          Tools Used
+        </div>
+        <div class="sidebar-card-body">
+          {% for tool in session.toolBreakdown %}
+          <div class="sidebar-row">
+            <span class="sidebar-row-label">{{ tool.tool }}</span>
+            <span class="sidebar-row-value">{{ tool.count }}</span>
+          </div>
+          {% endfor %}
+        </div>
+      </div>
+      {% endif %}
+
+      {%- comment -%} Files changed {%- endcomment -%}
+      {% if session.topFiles.size > 0 %}
+      <div class="sidebar-card">
+        <div class="sidebar-card-header">
+          <svg class="sidebar-card-header-shape" width="14" height="14" aria-hidden="true">
+            <circle cx="7" cy="7" r="7" fill="var(--blue)" />
+          </svg>
+          Files Changed
+        </div>
+        <div class="sidebar-card-body">
+          {% for file in session.topFiles %}
+          <div class="file-row">
+            <span class="file-path" 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">
+        <div class="sidebar-card-header">
+          <svg class="sidebar-card-header-shape" width="14" height="14" aria-hidden="true">
+            <rect width="14" height="14" fill="var(--yellow)" />
+          </svg>
+          Skills
+        </div>
+        <div class="sidebar-card-body">
+          <div class="sidebar-skills">
+            {% for skill in session.skills %}
+            <span class="sidebar-skill">{{ skill }}</span>
+            {% endfor %}
+          </div>
+        </div>
+      </div>
+      {% endif %}
+
+      {%- comment -%} Session info {%- endcomment -%}
+      <div class="sidebar-card">
+        <div class="sidebar-card-header">
+          <svg class="sidebar-card-header-shape" width="14" height="14" aria-hidden="true">
+            <rect width="14" height="14" fill="var(--red)" />
+          </svg>
+          Session Info
+        </div>
+        <div class="sidebar-card-body">
+          <div class="sidebar-row">
+            <span class="sidebar-row-label">Duration</span>
+            <span class="sidebar-row-value">{{ session.durationMinutes | formatDuration }}</span>
+          </div>
+          {% if session.wallClockMinutes %}
+          <div class="sidebar-row">
+            <span class="sidebar-row-label">Wall clock</span>
+            <span class="sidebar-row-value">{{ session.wallClockMinutes | formatDuration }}</span>
+          </div>
+          {% endif %}
+          <div class="sidebar-row">
+            <span class="sidebar-row-label">Turns</span>
+            <span class="sidebar-row-value">{{ session.turns }}</span>
+          </div>
+          <div class="sidebar-row">
+            <span class="sidebar-row-label">Files</span>
+            <span class="sidebar-row-value">{{ session.filesChanged }}</span>
+          </div>
+          <div class="sidebar-row">
+            <span class="sidebar-row-label">LOC</span>
+            <span class="sidebar-row-value">{{ session.locChanged | localeNumber }}</span>
+          </div>
+        </div>
+      </div>
+
+    </aside>
+  </div>
+
+  {%- comment -%} Footer {%- endcomment -%}
+  <footer class="bauhaus-footer">
+    <div class="footer-inner">
+      <span class="footer-text">Built with heyi.am</span>
+      <div class="footer-shapes" aria-hidden="true">
+        <span class="footer-shape footer-sq-red"></span>
+        <span class="footer-shape footer-circle-blue"></span>
+        <span class="footer-shape footer-sq-yellow"></span>
+      </div>
+    </div>
+  </footer>
+
+
+</div>