heyiam 0.2.29 → 0.3.1

package/dist/render/templates/zen/portfolio.liquid

@@ -0,0 +1,124 @@
+<div class="zen-portfolio" data-render-version="2" data-template="zen" data-username="{{ user.username }}">
+
+  <main class="zen-container">
+
+    {% if hasProfile %}
+    <!-- Section 1: Profile Header -->
+    <section class="zen-section zen-fade" aria-label="Profile">
+      <div class="zen-header-profile">
+        {% if user.photoUrl %}
+        <img src="{{ user.photoUrl }}" alt="{{ user.displayName }}" class="zen-header-photo" data-portfolio-field="photoBase64"{% unless user.photoUrl %} data-portfolio-empty="true"{% endunless %}>
+        {% endif %}
+        <div class="zen-header-info">
+          {% if user.displayName != blank %}
+          <h1 class="zen-display zen-header-name" data-portfolio-field="displayName">{{ user.displayName }}</h1>
+          {% endif %}
+          {% if user.bio != blank %}
+          <p class="zen-header-bio" data-portfolio-field="bio">{{ user.bio }}</p>
+          {% endif %}
+          {% if user.location != blank %}
+          <p class="zen-header-location" data-portfolio-field="location">{{ user.location }}</p>
+          {% endif %}
+          {% if user.email != blank or user.linkedinUrl != blank or user.githubUrl != blank or user.twitterHandle != blank or user.websiteUrl != blank %}
+          <ul class="zen-header-contact" aria-label="Contact and social links">
+            <li data-portfolio-field="email"{% unless user.email %} data-portfolio-empty="true"{% endunless %}><a href="{% if user.email %}mailto:{{ user.email }}{% endif %}"><svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><rect x="2" y="4" width="20" height="16" rx="2"/><path d="m2 4 10 8 10-8"/></svg>{{ user.email }}</a></li>
+            <li data-portfolio-field="phone"{% unless user.phone %} data-portfolio-empty="true"{% endunless %}><a href="{% if user.phone %}tel:{{ user.phone }}{% endif %}"><svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M22 16.92v3a2 2 0 0 1-2.18 2 19.79 19.79 0 0 1-8.63-3.07 19.5 19.5 0 0 1-6-6 19.79 19.79 0 0 1-3.07-8.67A2 2 0 0 1 4.11 2h3a2 2 0 0 1 2 1.72c.127.96.361 1.903.7 2.81a2 2 0 0 1-.45 2.11L8.09 9.91a16 16 0 0 0 6 6l1.27-1.27a2 2 0 0 1 2.11-.45c.907.339 1.85.573 2.81.7A2 2 0 0 1 22 16.92z"/></svg>{{ user.phone }}</a></li>
+            <li data-portfolio-field="linkedinUrl"{% unless user.linkedinUrl %} data-portfolio-empty="true"{% endunless %}><a href="{% if user.linkedinUrl %}{{ user.linkedinUrl }}{% endif %}"><svg width="16" height="16" viewBox="0 0 24 24" fill="currentColor"><path d="M20.5 2h-17A1.5 1.5 0 002 3.5v17A1.5 1.5 0 003.5 22h17a1.5 1.5 0 001.5-1.5v-17A1.5 1.5 0 0020.5 2zM8 19H5v-9h3zM6.5 8.25A1.75 1.75 0 118.3 6.5a1.78 1.78 0 01-1.8 1.75zM19 19h-3v-4.74c0-1.42-.6-1.93-1.38-1.93A1.74 1.74 0 0013 14.19V19h-3v-9h2.9v1.3a3.11 3.11 0 012.7-1.4c1.55 0 3.36.86 3.36 3.66z"/></svg>LinkedIn</a></li>
+            <li data-portfolio-field="githubUrl"{% unless user.githubUrl %} data-portfolio-empty="true"{% endunless %}><a href="{% if user.githubUrl %}{{ user.githubUrl }}{% endif %}"><svg width="16" height="16" viewBox="0 0 24 24" fill="currentColor"><path d="M12 2C6.477 2 2 6.484 2 12.017c0 4.425 2.865 8.18 6.839 9.504.5.092.682-.217.682-.483 0-.237-.008-.868-.013-1.703-2.782.605-3.369-1.343-3.369-1.343-.454-1.158-1.11-1.466-1.11-1.466-.908-.62.069-.608.069-.608 1.003.07 1.531 1.032 1.531 1.032.892 1.53 2.341 1.088 2.91.832.092-.647.35-1.088.636-1.338-2.22-.253-4.555-1.113-4.555-4.951 0-1.093.39-1.988 1.029-2.688-.103-.253-.446-1.272.098-2.65 0 0 .84-.27 2.75 1.026A9.564 9.564 0 0112 6.844c.85.004 1.705.115 2.504.337 1.909-1.296 2.747-1.027 2.747-1.027.546 1.379.202 2.398.1 2.651.64.7 1.028 1.595 1.028 2.688 0 3.848-2.339 4.695-4.566 4.943.359.309.678.92.678 1.855 0 1.338-.012 2.419-.012 2.747 0 .268.18.58.688.482A10.019 10.019 0 0022 12.017C22 6.484 17.522 2 12 2z"/></svg>GitHub</a></li>
+            <li data-portfolio-field="twitterHandle"{% unless user.twitterHandle %} data-portfolio-empty="true"{% endunless %}><a href="{% if user.twitterHandle %}https://x.com/{{ user.twitterHandle }}{% endif %}"><svg width="16" height="16" viewBox="0 0 24 24" fill="currentColor"><path d="M18.244 2.25h3.308l-7.227 8.26 8.502 11.24H16.17l-5.214-6.817L4.99 21.75H1.68l7.73-8.835L1.254 2.25H8.08l4.713 6.231zm-1.161 17.52h1.833L7.084 4.126H5.117z"/></svg>@{{ user.twitterHandle }}</a></li>
+            <li data-portfolio-field="websiteUrl"{% unless user.websiteUrl %} data-portfolio-empty="true"{% endunless %}><a href="{% if user.websiteUrl %}{{ user.websiteUrl }}{% endif %}"><svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><circle cx="12" cy="12" r="10"/><line x1="2" y1="12" x2="22" y2="12"/><path d="M12 2a15.3 15.3 0 0 1 4 10 15.3 15.3 0 0 1-4 10 15.3 15.3 0 0 1-4-10 15.3 15.3 0 0 1 4-10z"/></svg>{{ user.websiteUrl | stripProtocol }}</a></li>
+          </ul>
+          {% endif %}
+          {% if user.resumeUrl != blank %}
+          <a href="{{ user.resumeUrl }}" class="zen-header-resume"><svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z"/><polyline points="14 2 14 8 20 8"/><line x1="12" y1="18" x2="12" y2="12"/><polyline points="9 15 12 18 15 15"/></svg>Download Resume</a>
+          {% endif %}
+        </div>
+      </div>
+    </section>
+    {% endif %}
+
+    <hr class="zen-rule zen-fade" aria-hidden="true">
+
+    <!-- Section 2: Aggregate Stats -->
+    <section class="zen-section zen-fade" aria-label="Portfolio statistics">
+      <h2 class="zen-heading">Overview</h2>
+      <p class="zen-stats">
+        <span class="zen-stat-value">{{ projects.size }}</span> projects across
+        <span class="zen-stat-value">{{ totalSessions | localeNumber }}</span> sessions.
+        <span class="zen-stat-value">{{ totalLoc | localeNumber }}</span> lines changed.
+        {% if efficiencyMultiplier %}
+        I spent <span class="zen-stat-value">{{ totalDurationMinutes | formatDuration }}</span> directing
+        <span class="zen-stat-value" style="font-weight:500">{{ totalAgentDurationMinutes | formatDuration }}</span> of agent work &mdash;
+        a <span class="zen-stat-value" style="font-size:1.375rem;font-weight:600">{{ efficiencyMultiplier }}&times;</span> multiplier.
+        {% else %}
+        <span class="zen-stat-value">{{ totalDurationMinutes | formatDuration }}</span> of work.
+        {% endif %}
+      </p>
+    </section>
+
+    <hr class="zen-rule zen-fade" aria-hidden="true">
+
+    <!-- Section 3: Projects -->
+    {% if projects.size > 0 %}
+    <section class="zen-section zen-fade" aria-label="Projects">
+      <h2 class="zen-heading">Projects</h2>
+
+      {% for p in projects %}
+      {% if forloop.index > 1 %}
+      <hr class="zen-project-divider" aria-hidden="true">
+      {% endif %}
+      <article class="zen-project zen-fade" aria-label="{{ p.title }} project">
+        <h3 class="zen-project-title">
+          <a href="/{{ user.username }}/{{ p.slug }}">{{ p.title }}</a>
+        </h3>
+        {% if p.narrative != blank %}
+        <p class="zen-project-narrative">{{ p.narrative }}</p>
+        {% endif %}
+        <p class="zen-project-meta">
+          {{ p.totalSessions }} sessions &middot; {{ p.totalDurationMinutes | formatDuration }} &middot; {{ p.totalLoc | localeNumber }} lines changed
+        </p>
+        {% if p.skills.size > 0 %}
+        <p class="zen-project-skills">
+          {{ p.skills | join: ", " }}
+        </p>
+        {% endif %}
+        {% if p.sourceCounts.size > 0 %}
+        <p class="zen-project-source">
+          {% for sc in p.sourceCounts %}{% assign pct = sc.count | times: 100 | divided_by: p.totalSessions %}{{ sc.tool }} {{ pct }}%{% unless forloop.last %}, {% endunless %}{% endfor %}
+        </p>
+        {% endif %}
+      </article>
+      {% endfor %}
+    </section>
+
+    <hr class="zen-rule zen-fade" aria-hidden="true">
+    {% endif %}
+
+    <!-- Source Summary -->
+    {% if sourceCounts.size > 0 %}
+    <section class="zen-section zen-fade" aria-label="Source breakdown">
+      <h2 class="zen-heading">Source Tools</h2>
+      <div class="zen-source-summary">
+        {% for sc in sourceCounts %}
+        {% assign pct = sc.count | times: 100 | divided_by: totalSourceSessions %}
+        <div class="zen-source-row">
+          <span class="zen-source-label">{{ sc.tool }}</span>
+          <span class="zen-source-value">{{ pct }}% ({{ sc.count }} sessions)</span>
+        </div>
+        {% endfor %}
+      </div>
+    </section>
+
+    <hr class="zen-rule zen-fade" aria-hidden="true">
+    {% endif %}
+
+    <!-- Footer -->
+    <footer class="zen-footer zen-fade" role="contentinfo">
+      <div class="zen-footer-inner">
+        <p class="zen-footer-text">heyi.am</p>
+      </div>
+    </footer>
+
+  </main>
+
+</div>

package/dist/render/templates/zen/project.liquid

@@ -0,0 +1,187 @@
+<div class="zen-project-page" data-render-version="2" data-template="zen"{% if sessionBaseUrl %} data-session-base-url="{{ sessionBaseUrl }}"{% endif %} data-username="{{ user.username }}" data-project-slug="{{ project.slug }}">
+
+  <main class="zen-container">
+
+    <!-- Section 1: Project Header -->
+    <section class="zen-section zen-fade" aria-label="Project header">
+      <h1 class="zen-display">{{ project.title }}</h1>
+      {% if project.repoUrl != blank or project.projectUrl != blank %}
+      <div class="zen-project-links">
+        {% if project.repoUrl != blank %}
+        <a href="{{ project.repoUrl }}">{{ project.repoUrl | stripProtocol }}</a>
+        {% endif %}
+        {% if project.projectUrl != blank %}
+        <a href="{{ project.projectUrl }}">{{ project.projectUrl | stripProtocol }}</a>
+        {% endif %}
+      </div>
+      {% endif %}
+
+      {% if project.screenshotUrl != blank %}
+      <div class="zen-screenshot" role="img" aria-label="{{ project.title }} application screenshot">
+        <div class="zen-screenshot-chrome">
+          <span class="zen-screenshot-dot"></span>
+          <span class="zen-screenshot-dot"></span>
+          <span class="zen-screenshot-dot"></span>
+          {% if project.projectUrl != blank %}
+          <span class="zen-screenshot-url">{{ project.projectUrl | stripProtocol }}</span>
+          {% endif %}
+        </div>
+        <img src="{{ project.screenshotUrl }}" alt="{{ project.title }} screenshot" style="width:100%;display:block;">
+      </div>
+      {% endif %}
+    </section>
+
+    <hr class="zen-rule zen-fade" aria-hidden="true">
+
+    <!-- Section 2: Narrative -->
+    {% if project.narrative != blank %}
+    <section class="zen-section zen-fade" aria-label="Project narrative">
+      <h2 class="zen-heading">Narrative</h2>
+      <div class="zen-narrative">
+        <p>{{ project.narrative }}</p>
+      </div>
+    </section>
+
+    <hr class="zen-rule zen-fade" aria-hidden="true">
+    {% endif %}
+
+    <!-- Section 3: Stats -->
+    <section class="zen-section zen-fade" aria-label="Project statistics">
+      <h2 class="zen-heading">Numbers</h2>
+      <p class="zen-stats">
+        <span class="zen-stat-value">{{ project.totalSessions }}</span> sessions.
+        <span class="zen-stat-value">{{ project.totalLoc | localeNumber }}</span> lines changed.
+        {% if efficiencyMultiplier %}
+        I spent <span class="zen-stat-value">{{ project.totalDurationMinutes | formatDuration }}</span> directing
+        <span class="zen-stat-value" style="font-weight:500">{{ project.totalAgentDurationMinutes | formatDuration }}</span> of agent work &mdash;
+        a <span class="zen-stat-value" style="font-size:1.375rem;font-weight:600">{{ efficiencyMultiplier }}&times;</span> multiplier.
+        {% else %}
+        <span class="zen-stat-value">{{ project.totalDurationMinutes | formatDuration }}</span> of work.
+        {% endif %}
+      </p>
+    </section>
+
+    <hr class="zen-rule zen-fade" aria-hidden="true">
+
+    <!-- Section 4: Work Timeline (CSS-only bars) -->
+    {% if featuredSessions.size > 0 %}
+    {% assign maxDuration = 1 %}
+    {% for s in featuredSessions %}
+      {% if s.durationMinutes > maxDuration %}
+        {% assign maxDuration = s.durationMinutes %}
+      {% endif %}
+    {% endfor %}
+    <section class="zen-section zen-fade" aria-label="Work timeline">
+      <h2 class="zen-heading">Work Timeline</h2>
+      <div class="zen-chart" role="img" aria-label="Session duration chart">
+        {% for s in featuredSessions %}
+        {% assign barWidth = s.durationMinutes | times: 100.0 | divided_by: maxDuration | round: 1 %}
+        <div class="zen-chart-row">
+          <span class="zen-chart-label">{{ s.recordedAt | formatDateShort }}</span>
+          <span class="zen-chart-bar-track">
+            <span class="zen-chart-bar" style="width: {{ barWidth }}%"></span>
+          </span>
+          <span class="zen-chart-value">{{ s.durationMinutes }}m</span>
+        </div>
+        {% endfor %}
+      </div>
+    </section>
+
+    <hr class="zen-rule zen-fade" aria-hidden="true">
+    {% endif %}
+
+    <!-- Section 5: Phases -->
+    {% if arc.size > 0 %}
+    <section class="zen-section zen-fade" aria-label="Project phases">
+      <h2 class="zen-heading">Phases</h2>
+      <div class="zen-timeline" role="list" aria-label="Project phase timeline">
+        {% for phase in arc %}
+        <div class="zen-timeline-item" role="listitem">
+          {% if phase.dates != blank %}
+          <p class="zen-timeline-date">{{ phase.dates }}</p>
+          {% endif %}
+          <p class="zen-timeline-title">{{ phase.title }}</p>
+          {% if phase.description != blank %}
+          <p class="zen-timeline-desc">{{ phase.description }}</p>
+          {% endif %}
+        </div>
+        {% endfor %}
+      </div>
+    </section>
+
+    <hr class="zen-rule zen-fade" aria-hidden="true">
+    {% endif %}
+
+    <!-- Section 6: Skills -->
+    {% if project.skills.size > 0 %}
+    <section class="zen-section zen-fade" aria-label="Skills used">
+      <h2 class="zen-heading">Skills</h2>
+      <p class="zen-skills-text">
+        {{ project.skills | join: ", " }}
+      </p>
+    </section>
+
+    <hr class="zen-rule zen-fade" aria-hidden="true">
+    {% endif %}
+
+    <!-- Section 7: Key Decisions -->
+    {% if arc.size > 0 %}
+    <section class="zen-section zen-fade" aria-label="Key decisions">
+      <h2 class="zen-heading">Key Decisions</h2>
+      <ul class="zen-decisions" role="list">
+        {% for phase in arc %}
+        {% if phase.description != blank %}
+        <li class="zen-decision-item">
+          <p class="zen-decision-text">{{ phase.description }}</p>
+        </li>
+        {% endif %}
+        {% endfor %}
+      </ul>
+    </section>
+
+    <hr class="zen-rule zen-fade" aria-hidden="true">
+    {% endif %}
+
+    <!-- Section 8: Source Breakdown -->
+    {% if sourceCounts.size > 0 %}
+    <section class="zen-section zen-fade" aria-label="Source breakdown">
+      <h2 class="zen-heading">Source</h2>
+      <p class="zen-source">
+        {% for sc in sourceCounts %}{% if forloop.index > 1 %} &middot; {% endif %}{{ sc.tool }} {{ sc.count | times: 100.0 | divided_by: project.totalSessions | round }}% ({{ sc.count }} sessions){% endfor %}
+      </p>
+    </section>
+
+    <hr class="zen-rule zen-fade" aria-hidden="true">
+    {% endif %}
+
+    <!-- Section 9: Featured Sessions -->
+    {% if featuredSessions.size > 0 %}
+    <section class="zen-section zen-fade" aria-label="Featured sessions">
+      <h2 class="zen-heading">Sessions</h2>
+
+      {% for s in featuredSessions %}
+      {% if forloop.index > 1 %}
+      <hr class="zen-session-divider" aria-hidden="true">
+      {% endif %}
+      <div class="zen-session-item zen-fade">
+        <p class="zen-session-title">
+          <a href="{{ sessionBaseUrl }}/{{ s.slug }}{{ sessionSuffix }}">{{ s.title }}</a>
+        </p>
+        <p class="zen-session-meta">
+          {{ s.recordedAt | formatDateShort }} &middot; {{ s.durationMinutes | formatDuration }} &middot; {{ s.locChanged | localeNumber }} LOC{% if s.skills.size > 0 %} &middot; {{ s.skills | join: ", " }}{% endif %}
+        </p>
+      </div>
+      {% endfor %}
+    </section>
+    {% endif %}
+
+    <!-- Footer -->
+    <footer class="zen-footer zen-fade" role="contentinfo">
+      <div class="zen-footer-inner">
+        <p class="zen-footer-text">heyi.am</p>
+      </div>
+    </footer>
+
+  </main>
+
+</div>

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

@@ -0,0 +1,203 @@
+<div class="zen-session-page" data-render-version="2" data-template="zen">
+
+  <main class="zen-container">
+
+    <!-- Breadcrumb -->
+    {% if user.username != blank %}
+    <nav class="zen-breadcrumb zen-fade" aria-label="Breadcrumb">
+      <a href="/{{ user.username }}">{{ user.username }}</a>
+      {% if projectSlug != blank %}
+      <span class="zen-breadcrumb-sep" aria-hidden="true">/</span>
+      <a href="/{{ user.username }}/{{ projectSlug }}">{{ projectSlug }}</a>
+      {% endif %}
+      <span class="zen-breadcrumb-sep" aria-hidden="true">/</span>
+      <span aria-current="page">{{ session.title }}</span>
+    </nav>
+    {% endif %}
+
+    <!-- Section 1: Session Header -->
+    <section class="zen-section zen-fade" aria-label="Session header">
+      <h1 class="zen-display">{{ session.title }}</h1>
+      <div class="zen-session-header-meta">
+        <span class="zen-session-meta-row">{{ session.recordedAt | formatDate }}</span>
+        {% if session.sourceTool != blank %}
+        <span class="zen-session-meta-row"> &middot; {{ session.sourceTool }}</span>
+        {% endif %}
+        <span class="zen-session-meta-row"> &middot; {{ session.durationMinutes | formatDuration }}</span>
+        {% if session.wallClockMinutes %}
+        <span class="zen-session-meta-row"> ({{ session.wallClockMinutes | formatDuration }} wall clock)</span>
+        {% endif %}
+        <br>
+        <span class="zen-session-meta-row">{{ session.turns }} turns</span>
+        <span class="zen-session-meta-row"> &middot; {{ session.locChanged | localeNumber }} LOC</span>
+        <span class="zen-session-meta-row"> &middot; {{ session.filesChanged }} files changed</span>
+      </div>
+    </section>
+
+    <hr class="zen-rule zen-fade" aria-hidden="true">
+
+    <!-- Section 2: Dev Take -->
+    {% if session.devTake != blank %}
+    <section class="zen-section zen-fade" aria-label="Developer commentary">
+      <h2 class="zen-heading">Dev Take</h2>
+      <p class="zen-dev-take">
+        &ldquo;{{ session.devTake }}&rdquo;
+      </p>
+    </section>
+
+    <hr class="zen-rule zen-fade" aria-hidden="true">
+    {% endif %}
+
+    <!-- Context -->
+    {% if session.context != blank %}
+    <section class="zen-section zen-fade" aria-label="Session context">
+      <h2 class="zen-heading">Context</h2>
+      <p class="zen-body">{{ session.context }}</p>
+    </section>
+
+    <hr class="zen-rule zen-fade" aria-hidden="true">
+    {% endif %}
+
+    <!-- Narrative -->
+    {% if session.narrative != blank %}
+    <section class="zen-section zen-fade" aria-label="Session narrative">
+      <h2 class="zen-heading">Narrative</h2>
+      <p class="zen-body">{{ session.narrative }}</p>
+    </section>
+
+    <hr class="zen-rule zen-fade" aria-hidden="true">
+    {% endif %}
+
+    <!-- Highlights -->
+    {% if session.highlights.size > 0 %}
+    <section class="zen-section zen-fade" aria-label="Highlights">
+      <h2 class="zen-heading">Highlights</h2>
+      <ul class="zen-decisions" role="list">
+        {% for h in session.highlights %}
+        <li class="zen-decision-item">
+          <p class="zen-decision-text">{{ h }}</p>
+        </li>
+        {% endfor %}
+      </ul>
+    </section>
+
+    <hr class="zen-rule zen-fade" aria-hidden="true">
+    {% endif %}
+
+    <!-- Section 3: Execution Path / Beats -->
+    {% if session.beats.size > 0 %}
+    <section class="zen-section zen-fade" aria-label="Execution path">
+      <h2 class="zen-heading">Execution Path</h2>
+
+      {% for beat in session.beats %}
+      {% if forloop.index > 1 %}
+      <hr class="zen-beat-divider" aria-hidden="true">
+      {% endif %}
+      <div class="zen-beat zen-fade">
+        <p class="zen-beat-number">{% if forloop.index < 10 %}0{% endif %}{{ forloop.index }}</p>
+        <p class="zen-beat-title">{{ beat.title }}</p>
+        {% if beat.body != blank %}
+        <p class="zen-beat-desc">{{ beat.body }}</p>
+        {% endif %}
+      </div>
+      {% endfor %}
+    </section>
+
+    <hr class="zen-rule zen-fade" aria-hidden="true">
+    {% endif %}
+
+    <!-- Section 4: Q&A -->
+    {% if session.qaPairs.size > 0 %}
+    <section class="zen-section zen-fade" aria-label="Questions and answers">
+      <h2 class="zen-heading">Questions</h2>
+
+      {% for qa in session.qaPairs %}
+      {% if forloop.index > 1 %}
+      <hr class="zen-qa-divider" aria-hidden="true">
+      {% endif %}
+      <div class="zen-qa-item zen-fade">
+        <p class="zen-question">{{ qa.question }}</p>
+        <p class="zen-answer">{{ qa.answer }}</p>
+      </div>
+      {% endfor %}
+    </section>
+
+    <hr class="zen-rule zen-fade" aria-hidden="true">
+    {% endif %}
+
+    <!-- Section 5: Details -->
+    <section class="zen-section zen-fade" aria-label="Session details">
+      <h2 class="zen-heading">Details</h2>
+
+      <!-- Tools Used -->
+      {% if session.toolBreakdown.size > 0 %}
+      <div class="zen-details-group">
+        <p class="zen-details-label" id="tools-heading">Tools Used</p>
+        <div class="zen-tools" role="list" aria-labelledby="tools-heading">
+          {% for tool in session.toolBreakdown %}
+          <div class="zen-tool-row" role="listitem">
+            <span class="zen-tool-name">{{ tool.tool }}</span>
+            <span class="zen-tool-count">{{ tool.count }}</span>
+          </div>
+          {% endfor %}
+        </div>
+      </div>
+      {% endif %}
+
+      <!-- Files Changed -->
+      {% if session.topFiles.size > 0 %}
+      <div class="zen-details-group">
+        <p class="zen-details-label" id="files-heading">Files Changed</p>
+        <ul class="zen-files" role="list" aria-labelledby="files-heading">
+          {% for f in session.topFiles %}
+          <li class="zen-file-item">
+            <span class="zen-file-path">{{ f.path }}</span>
+            <span class="zen-file-diff">+{{ f.additions }}</span>
+          </li>
+          {% endfor %}
+        </ul>
+      </div>
+      {% endif %}
+
+      <!-- Skills -->
+      {% if session.skills.size > 0 %}
+      <div class="zen-details-group">
+        <p class="zen-details-label">Skills</p>
+        <p class="zen-skills-text">{{ session.skills | join: ", " }}</p>
+      </div>
+      {% endif %}
+    </section>
+
+    {% if session.agentSummary %}
+    <hr class="zen-rule zen-fade" aria-hidden="true">
+
+    <!-- Section 6: Agent Summary -->
+    <section class="zen-section zen-fade" aria-label="Agent summary">
+      <h2 class="zen-heading">Agents</h2>
+      {% if session.agentSummary.totalSubSessions %}
+      <p class="zen-agents-count">{{ session.agentSummary.totalSubSessions }} sub-sessions</p>
+      {% endif %}
+
+      {% if session.agentSummary.agents.size > 0 %}
+      <div role="list" aria-label="Agent roles and contributions">
+        {% for agent in session.agentSummary.agents %}
+        <div class="zen-agent-row" role="listitem">
+          <span class="zen-agent-role">{{ agent.role }}</span>
+          <span class="zen-agent-meta">{{ agent.duration_minutes | formatDuration }} &middot; {{ agent.loc_changed | localeNumber }} LOC</span>
+        </div>
+        {% endfor %}
+      </div>
+      {% endif %}
+    </section>
+    {% endif %}
+
+    <!-- Footer -->
+    <footer class="zen-footer zen-fade" role="contentinfo">
+      <div class="zen-footer-inner">
+        <p class="zen-footer-text">heyi.am</p>
+      </div>
+    </footer>
+
+  </main>
+
+</div>