heyiam 0.2.28 → 0.3.0

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

@@ -0,0 +1,346 @@
+<div class="heyiam-session parchment" data-render-version="2" data-template="parchment">
+  <a href="#main-content" class="skip-link">Skip to content</a>
+
+  <div class="page-wrapper">
+
+    {%- comment -%} Breadcrumb {%- endcomment -%}
+    <div class="breadcrumb" aria-label="Breadcrumb">
+      <a href="/{{ user.username }}">{{ user.username }}</a>
+      {% if projectSlug %}
+      <span class="breadcrumb__sep" aria-hidden="true">/</span>
+      <a href="/{{ user.username }}/{{ projectSlug }}">{{ projectSlug }}</a>
+      {% endif %}
+      <span class="breadcrumb__sep" aria-hidden="true">/</span>
+      <span>{{ session.title }}</span>
+    </div>
+
+    {%- comment -%} Session Header {%- endcomment -%}
+    <header class="session-header fade-in" role="banner">
+      <h1 class="session-header__title">{{ session.title }}</h1>
+      <div class="session-header__meta">
+        {% if session.recordedAt %}
+        <span class="session-header__meta-item">{{ session.recordedAt | formatDate }}</span>
+        {% endif %}
+        {% if session.sourceTool %}
+        <span class="session-header__meta-item">{{ session.sourceTool }}</span>
+        {% endif %}
+        <span class="session-header__meta-item">{{ session.durationMinutes | formatDuration }}{% if session.wallClockMinutes %} ({{ session.wallClockMinutes | formatDuration }} wall){% endif %}</span>
+        <span class="session-header__meta-item">{{ session.turns }} turns</span>
+        <span class="session-header__meta-item">{{ session.locChanged | localeNumber }} LOC</span>
+        <span class="session-header__meta-item">{{ session.filesChanged }} file{% if session.filesChanged != 1 %}s{% endif %}</span>
+      </div>
+    </header>
+
+    {%- comment -%} Dev Take (Epigraph) {%- endcomment -%}
+    {% if session.devTake %}
+    <div class="dev-take fade-in fade-in-d1" role="note" aria-label="Developer commentary">
+      {{ session.devTake }}
+    </div>
+    {% endif %}
+
+    <div class="hr-triple" role="separator">
+      <span class="hr-triple-inner"></span>
+    </div>
+
+    {%- comment -%} Session Stats {%- endcomment -%}
+    <section class="session-stats-row fade-in fade-in-d1" aria-label="Session statistics">
+      <div class="session-stats-row__item">
+        <div class="session-stats-row__value">{{ session.durationMinutes | formatDuration }}</div>
+        <div class="session-stats-row__label">Duration</div>
+      </div>
+        {% if session.wallClockMinutes %}
+        <div class="session-stats-row__item">
+          <div class="session-stats-row__value">{{ session.wallClockMinutes | formatDuration }}</div>
+          <div class="session-stats-row__label">Wall Clock</div>
+        </div>
+        {% endif %}
+      <div class="session-stats-row__item">
+        <div class="session-stats-row__value">{{ session.turns }}</div>
+        <div class="session-stats-row__label">Turns</div>
+      </div>
+      <div class="session-stats-row__item">
+        <div class="session-stats-row__value">{{ session.locChanged | localeNumber }}</div>
+        <div class="session-stats-row__label">LOC</div>
+      </div>
+      <div class="session-stats-row__item">
+        <div class="session-stats-row__value">{{ session.filesChanged }}</div>
+        <div class="session-stats-row__label">Files</div>
+      </div>
+      {% if session.agentSummary %}
+      <div class="session-stats-row__item">
+        <div class="session-stats-row__value">{{ session.agentSummary.agents.size }}</div>
+        <div class="session-stats-row__label">Agents</div>
+      </div>
+      {% endif %}
+    </section>
+
+    {%- comment -%} Two Column Layout {%- endcomment -%}
+    <div class="content-layout">
+
+      {%- comment -%} Main Content {%- endcomment -%}
+      <main id="main-content">
+
+        {%- comment -%} Narrative {%- endcomment -%}
+        {% if session.narrative %}
+        <section class="narrative" aria-label="Session narrative">
+          <p>{{ session.narrative }}</p>
+        </section>
+
+        <div class="hr-triple" role="separator">
+          <span class="hr-triple-inner"></span>
+        </div>
+        {% endif %}
+
+        {%- comment -%} Chapter I: Execution Path (Beats) {%- endcomment -%}
+        {% if session.beats.size > 0 %}
+        <section aria-label="Execution path">
+          <h2 class="chapter-heading fade-in fade-in-d2">
+            <span class="chapter-heading__number">Chapter I</span>
+            Execution Path
+          </h2>
+          <ol class="beats">
+            {% for beat in session.beats %}
+            <li class="beat">
+              <span class="beat__number">{{ beat.stepNumber }}</span>
+              <div>
+                <h3 class="beat__title">{{ beat.title }}</h3>
+                <p class="beat__desc">{{ beat.body }}</p>
+              </div>
+            </li>
+            {% endfor %}
+          </ol>
+        </section>
+
+        <div class="hr-triple" role="separator">
+          <span class="hr-triple-inner"></span>
+        </div>
+        {% endif %}
+
+        {%- comment -%} Chapter II: Q&A {%- endcomment -%}
+        {% if session.qaPairs.size > 0 %}
+        <section aria-label="Questions and answers">
+          <h2 class="chapter-heading fade-in fade-in-d3">
+            <span class="chapter-heading__number">Chapter II</span>
+            Questions &amp; Answers
+          </h2>
+          <div class="qa-list">
+            {% for qa in session.qaPairs %}
+            <div class="qa-item">
+              <p class="qa-question">{{ qa.question }}</p>
+              <p class="qa-answer">{{ qa.answer }}</p>
+            </div>
+            {% endfor %}
+          </div>
+        </section>
+
+        <div class="hr-triple" role="separator">
+          <span class="hr-triple-inner"></span>
+        </div>
+        {% endif %}
+
+        {%- comment -%} Chapter III: Agent Summary {%- endcomment -%}
+        {% if session.agentSummary %}
+        <section aria-label="Agent summary">
+          <h2 class="chapter-heading fade-in fade-in-d4">
+            <span class="chapter-heading__number">Chapter III</span>
+            Agent Summary
+          </h2>
+
+          <table class="agent-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><span class="agent-dot agent-dot--{{ agent.role | slugify }}" aria-hidden="true"></span>{{ agent.role }}</td>
+                <td>{{ agent.duration_minutes | formatDuration }}</td>
+                <td>{{ agent.loc_changed | localeNumber }}</td>
+              </tr>
+              {% endfor %}
+            </tbody>
+          </table>
+
+          {%- comment -%} Agent time distribution bar {%- endcomment -%}
+          {% assign totalAgentDur = 0 %}
+          {% for agent in session.agentSummary.agents %}
+            {% assign totalAgentDur = totalAgentDur | plus: agent.duration_minutes %}
+          {% endfor %}
+          {% if totalAgentDur > 0 %}
+          <div class="agent-bar" role="img" aria-label="Agent time distribution">
+            {% for agent in session.agentSummary.agents %}
+            {% assign agentPct = agent.duration_minutes | times: 100.0 | divided_by: totalAgentDur | round %}
+            <div class="agent-bar__seg" style="width: {{ agentPct }}%; background: var(--agent-{{ agent.role | slugify }});" title="{{ agent.role }} {{ agent.duration_minutes | formatDuration }}"></div>
+            {% endfor %}
+          </div>
+          {% endif %}
+        </section>
+
+        <div class="hr-triple" role="separator">
+          <span class="hr-triple-inner"></span>
+        </div>
+        {% endif %}
+
+        {%- comment -%} Highlights {%- endcomment -%}
+        {% if session.highlights.size > 0 %}
+        <section aria-label="Highlights">
+          <h2 class="chapter-heading fade-in fade-in-d4">
+            <span class="chapter-heading__number">Chapter IV</span>
+            Highlights
+          </h2>
+          <ol class="decisions-list">
+            {% for h in session.highlights %}
+            <li>{{ h }}</li>
+            {% endfor %}
+          </ol>
+        </section>
+
+        <div class="hr-triple" role="separator">
+          <span class="hr-triple-inner"></span>
+        </div>
+        {% endif %}
+
+        {%- comment -%} Turn Distribution (tool usage as proportional segmented bar) {%- endcomment -%}
+        {% if session.toolBreakdown.size > 0 %}
+        <section class="turn-distribution" aria-label="Turn distribution">
+          <h2 class="chapter-heading fade-in fade-in-d4">
+            <span class="chapter-heading__number">Chapter {% if session.agentSummary %}IV{% elsif session.highlights.size > 0 %}V{% else %}IV{% endif %}</span>
+            Turn Distribution
+          </h2>
+          {% assign totalToolUses = 0 %}
+          {% for tb in session.toolBreakdown %}
+            {% assign totalToolUses = totalToolUses | plus: tb.count %}
+          {% endfor %}
+          {% if totalToolUses > 0 %}
+          <div class="turn-bar" role="img" aria-label="Tool usage distribution: {% for tb in session.toolBreakdown %}{{ tb.tool }} {{ tb.count | times: 100.0 | divided_by: totalToolUses | round }}%{% unless forloop.last %}, {% endunless %}{% endfor %}">
+            {% for tb in session.toolBreakdown %}
+            {% assign tbPct = tb.count | times: 100.0 | divided_by: totalToolUses | round %}
+            {% if tbPct > 3 %}
+            {% case forloop.index0 %}
+              {% when 0 %}{% assign segBg = "var(--parch-accent)" %}
+              {% when 1 %}{% assign segBg = "var(--parch-text-secondary)" %}
+              {% when 2 %}{% assign segBg = "var(--parch-text-tertiary)" %}
+              {% when 3 %}{% assign segBg = "var(--parch-border-light)" %}
+              {% else %}{% assign segBg = "var(--parch-border-faint)" %}
+            {% endcase %}
+            <div class="turn-bar__seg" style="width: {{ tbPct }}%; background: {{ segBg }};">{{ tb.tool }}</div>
+            {% else %}
+            <div class="turn-bar__seg" style="width: {{ tbPct }}%; background: var(--parch-border-faint);"></div>
+            {% endif %}
+            {% endfor %}
+          </div>
+          <div class="turn-legend">
+            {% for tb in session.toolBreakdown %}
+            {% case forloop.index0 %}
+              {% when 0 %}{% assign legendBg = "var(--parch-accent)" %}
+              {% when 1 %}{% assign legendBg = "var(--parch-text-secondary)" %}
+              {% when 2 %}{% assign legendBg = "var(--parch-text-tertiary)" %}
+              {% when 3 %}{% assign legendBg = "var(--parch-border-light)" %}
+              {% else %}{% assign legendBg = "var(--parch-border-faint)" %}
+            {% endcase %}
+            <span class="turn-legend__item">
+              <span class="turn-legend__dot" style="background: {{ legendBg }};" aria-hidden="true"></span>
+              {{ tb.tool }} ({{ tb.count }})
+            </span>
+            {% endfor %}
+          </div>
+          {% endif %}
+        </section>
+
+        <div class="hr-triple" role="separator">
+          <span class="hr-triple-inner"></span>
+        </div>
+        {% endif %}
+
+        {%- comment -%} Beat Timeline Table {%- endcomment -%}
+        {% if session.beats.size > 0 %}
+        <section aria-label="Beat timeline">
+          <h2 class="chapter-heading fade-in fade-in-d4">
+            <span class="chapter-heading__number">Chapter {% if session.toolBreakdown.size > 0 %}{% if session.highlights.size > 0 %}VI{% else %}V{% endif %}{% else %}{% if session.highlights.size > 0 %}V{% else %}IV{% endif %}{% endif %}</span>
+            Beat Timeline
+          </h2>
+          <table class="timeline-mini">
+            <thead>
+              <tr>
+                <th scope="col">Beat</th>
+                <th scope="col">Phase</th>
+                <th scope="col">Primary Tool</th>
+                <th scope="col">Files Touched</th>
+              </tr>
+            </thead>
+            <tbody>
+              {% for beat in session.beats %}
+              <tr>
+                <td><span class="timeline-mini__beat-num">{{ beat.stepNumber }}</span></td>
+                <td>{{ beat.title }}</td>
+                <td>{{ beat.primaryTools | default: "—" }}</td>
+                <td>{{ beat.filesTouched | default: "—" }}</td>
+              </tr>
+              {% endfor %}
+            </tbody>
+          </table>
+        </section>
+        {% endif %}
+      </main>
+
+      {%- comment -%} Sidebar (Margin Annotations) {%- endcomment -%}
+      <aside class="sidebar fade-in fade-in-d2" aria-label="Session details">
+        {%- comment -%} Tools Used {%- endcomment -%}
+        {% if session.toolBreakdown.size > 0 %}
+        <div class="sidebar-section">
+          <h2 class="sidebar-section__title">Tools Used</h2>
+          <ul class="tool-list">
+            {% for tb in session.toolBreakdown %}
+            <li><span>{{ tb.tool }}</span> <span class="tool-list__count">{{ tb.count }}</span></li>
+            {% endfor %}
+          </ul>
+        </div>
+        {% endif %}
+
+        {%- comment -%} Files Changed {%- endcomment -%}
+        {% if session.topFiles.size > 0 %}
+        <div class="sidebar-section">
+          <h2 class="sidebar-section__title">Files Changed</h2>
+          <ul class="file-list">
+            {% for f in session.topFiles %}
+            <li>
+              <span class="file-list__name" title="{{ f.path }}">{{ f.path }}</span>
+              <span class="file-list__diff">+{{ f.additions }}</span>
+            </li>
+            {% endfor %}
+          </ul>
+        </div>
+        {% endif %}
+
+        {%- comment -%} Skills {%- endcomment -%}
+        {% if session.skills.size > 0 %}
+        <div class="sidebar-section">
+          <h2 class="sidebar-section__title">Skills</h2>
+          <div class="sidebar-skills">
+            {% for skill in session.skills %}
+            <span class="skill-tag">{{ skill }}</span>
+            {% endfor %}
+          </div>
+        </div>
+        {% endif %}
+      </aside>
+    </div>
+
+    <div class="hr-triple" role="separator">
+      <span class="hr-triple-inner"></span>
+    </div>
+
+    {%- comment -%} Colophon {%- endcomment -%}
+    <footer class="colophon" role="contentinfo">
+      <div class="colophon__mark" aria-hidden="true">&sect;</div>
+      <p>Set in Crimson Pro &amp; IBM Plex Mono</p>
+      <p>Composed with AI-assisted development tools</p>
+      <p>Published on heyi.am</p>
+    </footer>
+  </div>
+
+</div>