heyiam 0.2.29 → 0.3.0

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

@@ -0,0 +1,295 @@
+<div class="heyiam-session parallax" data-render-version="2" data-template="parallax">
+
+  <a href="#main-content" class="skip-link">Skip to content</a>
+
+  <!-- Background Shapes -->
+  <div class="bg-shapes" aria-hidden="true">
+    <div class="bg-shape bg-shape--1"></div>
+    <div class="bg-shape bg-shape--2"></div>
+    <div class="bg-shape bg-shape--3"></div>
+    <div class="bg-shape bg-shape--4"></div>
+    <div class="bg-shape bg-shape--5"></div>
+    <div class="bg-shape bg-shape--6"></div>
+    <div class="bg-shape bg-shape--7"></div>
+  </div>
+
+  <!-- Session Header -->
+  <header class="session-header" aria-label="Session overview">
+    <div class="session-header__breadcrumb">
+      <a href="/{{ user.username }}">{{ user.username }}</a>
+      {% if projectSlug != blank %}
+      <span class="session-header__breadcrumb-sep" aria-hidden="true">/</span>
+      <a href="/{{ user.username }}/{{ projectSlug }}">{{ projectSlug }}</a>
+      {% endif %}
+      <span class="session-header__breadcrumb-sep" aria-hidden="true">/</span>
+      <span>{{ session.title }}</span>
+    </div>
+
+    <h1 class="session-header__title">{{ session.title }}</h1>
+
+    <div class="session-header__meta">
+      {% if session.recordedAt != blank %}
+      <div class="session-header__meta-item">
+        <span class="session-header__meta-label">Date</span>
+        <span class="session-header__meta-value">{{ session.recordedAt | formatDate }}</span>
+      </div>
+      {% endif %}
+      {% if session.sourceTool != blank %}
+      <div class="session-header__meta-item">
+        <span class="session-header__meta-label">Source</span>
+        <span class="session-header__meta-value">{{ session.sourceTool }}</span>
+      </div>
+      {% endif %}
+      <div class="session-header__meta-item">
+        <span class="session-header__meta-label">Duration</span>
+        <span class="session-header__meta-value">{{ session.durationMinutes | formatDuration }}{% if session.wallClockMinutes %} ({{ session.wallClockMinutes | formatDuration }} wall){% endif %}</span>
+      </div>
+      {% if session.turns > 0 %}
+      <div class="session-header__meta-item">
+        <span class="session-header__meta-label">Turns</span>
+        <span class="session-header__meta-value">{{ session.turns }}</span>
+      </div>
+      {% endif %}
+      <div class="session-header__meta-item">
+        <span class="session-header__meta-label">LOC</span>
+        <span class="session-header__meta-value">{{ session.locChanged | formatLoc }}</span>
+      </div>
+      {% if session.filesChanged > 0 %}
+      <div class="session-header__meta-item">
+        <span class="session-header__meta-label">Files</span>
+        <span class="session-header__meta-value">{{ session.filesChanged }}</span>
+      </div>
+      {% endif %}
+    </div>
+  </header>
+
+  <!-- Main Content -->
+  <main id="main-content">
+    <div class="page-layout">
+
+      <!-- Primary Column -->
+      <div>
+
+        <!-- Dev Take -->
+        {% if session.devTake != blank %}
+        <div class="dev-take reveal">
+          <div class="dev-take__label">Dev Take</div>
+          <p class="dev-take__text">{{ session.devTake }}</p>
+        </div>
+        {% endif %}
+
+        <!-- Context -->
+        {% if session.context != blank %}
+        <section aria-label="Context" class="reveal" style="margin-block-end: 3rem;">
+          <h2 class="section-label">Context</h2>
+          <p style="font-size: 0.9375rem; color: var(--px-text-secondary); line-height: 1.7;">{{ session.context }}</p>
+        </section>
+        {% endif %}
+
+        <!-- Narrative -->
+        {% if session.narrative != blank %}
+        <section aria-label="Narrative" class="reveal" style="margin-block-end: 3rem;">
+          <h2 class="section-label">Narrative</h2>
+          <div class="narrative">
+            <p>{{ session.narrative }}</p>
+          </div>
+        </section>
+        {% endif %}
+
+        <!-- Execution Path (Beats) -->
+        {% if session.beats.size > 0 %}
+        <section aria-label="Execution path">
+          <h2 class="section-label reveal">Execution Path</h2>
+          <ol class="beats-list" data-beats>
+            {% for beat in session.beats %}
+            <li class="beat-item" data-beat-index="{{ forloop.index0 }}">
+              <div class="beat-item__dot" aria-hidden="true"></div>
+              <div class="beat-item__num">Beat {{ beat.stepNumber }}</div>
+              <h3 class="beat-item__title">{{ beat.title }}</h3>
+              {% if beat.body != blank %}
+              <p class="beat-item__desc">{{ beat.body }}</p>
+              {% endif %}
+            </li>
+            {% endfor %}
+          </ol>
+        </section>
+        {% endif %}
+
+        <!-- Q&A -->
+        {% if session.qaPairs.size > 0 %}
+        <section aria-label="Questions and answers">
+          <h2 class="section-label reveal">Q&amp;A</h2>
+          <div class="qa-list" data-qa-list>
+            {% for qa in session.qaPairs %}
+            <article class="qa-card" data-qa-index="{{ forloop.index0 }}">
+              <h3 class="qa-card__q">{{ qa.question }}</h3>
+              <p class="qa-card__a">{{ qa.answer }}</p>
+            </article>
+            {% endfor %}
+          </div>
+        </section>
+        {% endif %}
+
+        <!-- Highlights -->
+        {% if session.highlights.size > 0 %}
+        <section aria-label="Highlights" class="reveal" style="margin-block-end: 3rem;">
+          <h2 class="section-label">Highlights</h2>
+          <ol class="decisions-list">
+            {% for h in session.highlights %}
+            <li>{{ h }}</li>
+            {% endfor %}
+          </ol>
+        </section>
+        {% endif %}
+
+        <!-- Agent Summary -->
+        {% if session.agentSummary %}
+        <section class="agent-section" aria-label="Agent summary">
+          <h2 class="section-label reveal">Agent Summary</h2>
+          {% if session.agentSummary.agents.size > 0 %}
+          <p style="font-family: var(--font-mono); font-size: 0.8125rem; color: var(--px-text-secondary); margin-block-end: 1.5rem;">{{ session.agentSummary.agents.size }} sub-sessions across {{ session.agentSummary.agents.size }} roles</p>
+          <div class="agent-bars" data-agent-bars>
+            {% for agent in session.agentSummary.agents %}
+            <div class="agent-bar reveal">
+              <span class="agent-bar__role">{{ agent.role }}</span>
+              <div class="agent-bar__track">
+                {% assign role = agent.role | downcase %}
+                {% if role contains "frontend" or role contains "ux" %}{% assign barColor = "var(--clr-frontend)" %}
+                {% elsif role contains "backend" %}{% assign barColor = "var(--clr-backend)" %}
+                {% elsif role contains "qa" or role contains "test" %}{% assign barColor = "var(--clr-qa)" %}
+                {% elsif role contains "security" %}{% assign barColor = "var(--clr-security)" %}
+                {% elsif role contains "review" %}{% assign barColor = "var(--clr-reviewer)" %}
+                {% else %}{% assign barColor = "var(--px-accent-blue)" %}
+                {% endif %}
+                <div class="agent-bar__fill" data-bar-width="{{ agent.percentage | default: 50 }}" style="width: 0%; background: {{ barColor }};"></div>
+              </div>
+              {% if agent.duration_minutes %}
+              <span class="agent-bar__duration">{{ agent.duration_minutes | formatDuration }}</span>
+              {% endif %}
+              {% if agent.loc_changed %}
+              <span class="agent-bar__loc">{{ agent.loc_changed }}</span>
+              {% endif %}
+            </div>
+            {% endfor %}
+          </div>
+          {% endif %}
+        </section>
+        {% endif %}
+
+      </div>
+
+      <!-- Sidebar -->
+      <aside class="sidebar" aria-label="Session details">
+
+        {% if session.toolBreakdown.size > 0 %}
+        <div class="sidebar-card">
+          <h2 class="sidebar-card__title">Tools Used</h2>
+          <ul class="tool-list">
+            {% for tool in session.toolBreakdown %}
+            <li class="tool-item">
+              <span class="tool-item__name">{{ tool.tool }}</span>
+              <span class="tool-item__count">{{ tool.count }}</span>
+            </li>
+            {% endfor %}
+          </ul>
+        </div>
+        {% endif %}
+
+        {% if session.topFiles.size > 0 %}
+        <div class="sidebar-card">
+          <h2 class="sidebar-card__title">Files Changed</h2>
+          <ul class="file-list">
+            {% for file in session.topFiles %}
+            <li class="file-item">
+              <span class="file-item__path">{{ file.path }}</span>
+              <span class="file-item__diff">+{{ file.additions }}</span>
+            </li>
+            {% endfor %}
+          </ul>
+        </div>
+        {% endif %}
+
+        {% if session.skills.size > 0 %}
+        <div class="sidebar-card">
+          <h2 class="sidebar-card__title">Skills</h2>
+          <div class="sidebar-skills">
+            {% for skill in session.skills %}
+            <span class="sidebar-skill">{{ skill }}</span>
+            {% endfor %}
+          </div>
+        </div>
+        {% endif %}
+
+        {% if session.toolBreakdown.size > 0 %}
+        <div class="sidebar-card">
+          <h2 class="sidebar-card__title">Tool Usage Chart</h2>
+          {% assign maxToolCount = 1 %}
+          {% for tool in session.toolBreakdown %}
+            {% if tool.count > maxToolCount %}{% assign maxToolCount = tool.count %}{% endif %}
+          {% endfor %}
+          <div class="tool-chart" aria-label="Tool usage distribution">
+            <svg viewBox="0 0 200 {{ session.toolBreakdown.size | times: 20 }}" preserveAspectRatio="xMidYMid meet" role="img" aria-hidden="true">
+              {% for tool in session.toolBreakdown %}
+              {% assign yPos = forloop.index0 | times: 20 | plus: 6 %}
+              {% assign barWidth = tool.count | times: 140 | divided_by: maxToolCount %}
+              <text x="0" y="{{ yPos | plus: 9 }}" fill="rgba(255,255,255,0.5)" font-size="9" font-family="JetBrains Mono, monospace">{{ tool.tool }}</text>
+              <rect x="40" y="{{ yPos }}" width="140" height="12" rx="3" fill="rgba(255,255,255,0.03)" />
+              <rect x="40" y="{{ yPos }}" width="{{ barWidth }}" height="12" rx="3" fill="rgba(96, 165, 250, 0.35)" />
+              <text x="{{ 40 | plus: barWidth | plus: 4 }}" y="{{ yPos | plus: 9 }}" fill="rgba(255,255,255,0.3)" font-size="8" font-family="JetBrains Mono, monospace">{{ tool.count }}</text>
+              {% endfor %}
+            </svg>
+          </div>
+        </div>
+        {% endif %}
+
+        <div class="sidebar-card">
+          <h2 class="sidebar-card__title">Session Info</h2>
+          <dl class="session-info-list">
+            {% if session.wallClockMinutes %}
+            <div class="session-info-row">
+              <dt class="session-info-label">Wall clock</dt>
+              <dd class="session-info-value">{{ session.wallClockMinutes | formatDuration }}</dd>
+            </div>
+            {% endif %}
+            <div class="session-info-row">
+              <dt class="session-info-label">Active time</dt>
+              <dd class="session-info-value">{{ session.durationMinutes | formatDuration }}</dd>
+            </div>
+            {% if session.wallClockMinutes and session.wallClockMinutes > 0 %}
+            <div class="session-info-row">
+              <dt class="session-info-label">Efficiency</dt>
+              {% assign effPctWhole = session.durationMinutes | times: 1000 | divided_by: session.wallClockMinutes %}
+              {% assign effInt = effPctWhole | divided_by: 10 %}
+              {% assign effDec = effPctWhole | modulo: 10 %}
+              <dd class="session-info-value">{{ effInt }}.{{ effDec }}%</dd>
+            </div>
+            {% endif %}
+            {% if session.durationMinutes > 0 %}
+            <div class="session-info-row">
+              <dt class="session-info-label">LOC / hour</dt>
+              {% assign locPerHour = session.locChanged | times: 60 | divided_by: session.durationMinutes %}
+              <dd class="session-info-value">{{ locPerHour | localeNumber }}</dd>
+            </div>
+            {% endif %}
+            {% if session.agentSummary %}
+            <div class="session-info-row">
+              <dt class="session-info-label">Sub-sessions</dt>
+              <dd class="session-info-value">{{ session.agentSummary.agents.size }}</dd>
+            </div>
+            {% endif %}
+          </dl>
+        </div>
+
+      </aside>
+
+    </div>
+  </main>
+
+  <!-- Footer -->
+  <footer class="site-footer">
+    <p>Built with <a href="https://heyi.am">heyi.am</a> &mdash; signal over noise.</p>
+  </footer>
+
+  <!-- JavaScript: Parallax, Entrance Animations -->
+
+</div>