heyiam 0.2.29 → 0.3.1

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

@@ -0,0 +1,137 @@
+<div class="noir-page" data-render-version="2" data-template="noir" data-username="{{ user.username }}">
+
+  <!-- Hero Profile -->
+  {% if hasProfile %}
+  <section class="noir-section noir-hero" aria-label="Profile">
+    {% if user.photoUrl %}
+    <img
+      src="{{ user.photoUrl }}"
+      alt="{{ user.displayName }}"
+      class="noir-hero__photo"
+      width="400"
+      height="500"
+     data-portfolio-field="photoBase64"{% unless user.photoUrl %} data-portfolio-empty="true"{% endunless %}>
+    {% endif %}
+    <div class="noir-hero__content">
+      {% if user.displayName != blank %}
+      <h1 class="noir-hero__name" data-portfolio-field="displayName">{{ user.displayName }}</h1>
+      {% endif %}
+      {% if user.bio != blank %}
+      <p class="noir-hero__bio" data-portfolio-field="bio">{{ user.bio }}</p>
+      {% endif %}
+      {% if user.location != blank %}
+      <p class="noir-hero__location" data-portfolio-field="location">{{ user.location }}</p>
+      {% endif %}
+      <p class="noir-hero__contact">
+        <a href="{% if user.email %}mailto:{{ user.email }}{% endif %}" data-portfolio-field="email"{% unless user.email %} data-portfolio-empty="true"{% endunless %}><span data-portfolio-text>{{ user.email }}</span></a><span class="noir-middot" data-portfolio-field="linkedinUrl"{% unless user.linkedinUrl %} data-portfolio-empty="true"{% endunless %}>&middot;</span><a href="{% if user.linkedinUrl %}{{ user.linkedinUrl }}{% endif %}" data-portfolio-field="linkedinUrl"{% unless user.linkedinUrl %} data-portfolio-empty="true"{% endunless %}>LinkedIn</a><span class="noir-middot" data-portfolio-field="githubUrl"{% unless user.githubUrl %} data-portfolio-empty="true"{% endunless %}>&middot;</span><a href="{% if user.githubUrl %}{{ user.githubUrl }}{% endif %}" data-portfolio-field="githubUrl"{% unless user.githubUrl %} data-portfolio-empty="true"{% endunless %}>GitHub</a><span class="noir-middot" data-portfolio-field="twitterHandle"{% unless user.twitterHandle %} data-portfolio-empty="true"{% endunless %}>&middot;</span><a href="{% if user.twitterHandle %}https://x.com/{{ user.twitterHandle }}{% endif %}" data-portfolio-field="twitterHandle"{% unless user.twitterHandle %} data-portfolio-empty="true"{% endunless %}><span data-portfolio-text>{% if user.twitterHandle %}@{{ user.twitterHandle }}{% endif %}</span></a><span class="noir-middot" data-portfolio-field="websiteUrl"{% unless user.websiteUrl %} data-portfolio-empty="true"{% endunless %}>&middot;</span><a href="{% if user.websiteUrl %}{{ user.websiteUrl }}{% endif %}" data-portfolio-field="websiteUrl"{% unless user.websiteUrl %} data-portfolio-empty="true"{% endunless %}><span data-portfolio-text>{{ user.websiteUrl | stripProtocol }}</span></a>
+      </p>
+      {% if user.resumeUrl != blank %}
+      <a href="{{ user.resumeUrl }}" class="noir-hero__resume">
+        <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" aria-hidden="true"><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>
+        Resume (PDF)
+      </a>
+      {% endif %}
+    </div>
+  </section>
+  {% endif %}
+
+  <hr class="noir-rule">
+
+  <!-- Aggregate Stats -->
+  <section class="noir-section" aria-label="Portfolio statistics">
+    <div class="noir-stats-row" role="list">
+      <div class="noir-stats-row__item" role="listitem">
+        <span class="noir-stats-row__value">{{ projects.size }}</span>
+        <span class="noir-stats-row__label">Projects</span>
+      </div>
+      <div class="noir-stats-row__item" role="listitem">
+        <span class="noir-stats-row__value">{{ totalSessions | localeNumber }}</span>
+        <span class="noir-stats-row__label">Sessions</span>
+      </div>
+      <div class="noir-stats-row__item" role="listitem">
+        <span class="noir-stats-row__value">{{ totalLoc | formatLoc }}</span>
+        <span class="noir-stats-row__label">Lines Changed</span>
+      </div>
+    </div>
+  </section>
+
+  {% if efficiencyMultiplier %}
+  <!-- Leverage -->
+  <section aria-label="AI leverage" role="figure">
+    <hr class="noir-rule">
+    <div class="noir-leverage">
+      <span class="noir-leverage__multi">{{ efficiencyMultiplier }}</span>
+      <span class="noir-leverage__sep" aria-hidden="true">&mdash;</span>
+      <span class="noir-leverage__detail">{{ totalDurationMinutes | formatDuration }} you{% if totalAgentDurationMinutes %}, {{ totalAgentDurationMinutes | formatDuration }} agents{% endif %}</span>
+    </div>
+    <hr class="noir-rule">
+  </section>
+  {% endif %}
+
+  <!-- Work Timeline -->
+  {% if projects.size > 0 %}
+  <section class="noir-section" aria-label="Work timeline">
+    <h2 class="noir-heading">Work Timeline</h2>
+    <div class="noir-timeline" role="list">
+      {% for p in projects %}
+      <div class="noir-timeline__row" role="listitem">
+        <span class="noir-timeline__label">{{ p.title }}</span>
+        <div class="noir-timeline__bar-track">
+          <div class="noir-timeline__bar" style="width: {% if projects[0].totalDurationMinutes > 0 %}{{ p.totalDurationMinutes | times: 100 | divided_by: projects[0].totalDurationMinutes }}%{% else %}0%{% endif %};"></div>
+        </div>
+        <span class="noir-timeline__value">{{ p.totalDurationMinutes | formatDuration }}</span>
+      </div>
+      {% endfor %}
+    </div>
+  </section>
+
+  <hr class="noir-rule">
+  {% endif %}
+
+  <!-- Projects -->
+  {% if projects.size > 0 %}
+  <section class="noir-section" aria-label="Projects">
+    <h2 class="noir-heading">Projects</h2>
+    <div class="noir-projects">
+      {% for p in projects %}
+      <a href="/{{ user.username }}/{{ p.slug }}" class="noir-project" aria-label="{{ p.title }} project">
+        <div>
+          <h3 class="noir-project__title">{{ p.title }}</h3>
+          {% if p.narrative != blank %}
+          <p class="noir-project__narrative">{{ p.narrative }}</p>
+          {% endif %}
+          {% if p.skills.size > 0 %}
+          <div class="noir-project__skills" aria-label="Skills">
+            {% for skill in p.skills %}
+            <span class="noir-chip">{{ skill }}</span>
+            {% endfor %}
+          </div>
+          {% endif %}
+          <p class="noir-project__meta">{{ p.totalSessions }} sessions &middot; {{ p.totalDurationMinutes | formatDuration }} &middot; {{ p.totalLoc | formatLoc }} LOC</p>
+        </div>
+        <div class="noir-project__sidebar">
+          <div>
+            <span class="noir-project__stat-num">{{ p.totalLoc | formatLoc }}</span>
+            <span class="noir-project__stat-label">LOC</span>
+          </div>
+          {% if p.sourceCounts.size > 0 %}
+          <div class="noir-source-bar" aria-label="Source mix: {% for sc in p.sourceCounts %}{{ sc.tool }} {% assign pct = sc.count | times: 100 | divided_by: p.totalSessions %}{{ pct }}%{% unless forloop.last %}, {% endunless %}{% endfor %}">
+            {% for sc in p.sourceCounts %}
+            {% assign pct = sc.count | times: 100 | divided_by: p.totalSessions %}
+            <div class="noir-source-bar__fill{% if forloop.index > 1 %}--secondary{% endif %}" style="width: {{ pct }}%;"></div>
+            {% endfor %}
+          </div>
+          {% endif %}
+        </div>
+      </a>
+      {% endfor %}
+    </div>
+  </section>
+  {% endif %}
+
+  <!-- Footer -->
+  <footer class="noir-footer">
+    <p class="noir-footer__text">Built with heyi.am</p>
+  </footer>
+
+</div>

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

@@ -0,0 +1,220 @@
+<div class="noir-page" data-render-version="2" data-template="noir"{% if sessionBaseUrl %} data-session-base-url="{{ sessionBaseUrl }}"{% endif %} data-username="{{ user.username }}" data-project-slug="{{ project.slug }}">
+
+  <!-- Breadcrumb -->
+  <nav class="noir-breadcrumb" aria-label="Breadcrumb">
+    <a href="/{{ user.username }}">{{ user.username }}</a>
+    <span class="noir-breadcrumb__sep">/</span>
+    <span>{{ project.slug }}</span>
+  </nav>
+
+  <!-- Project Header -->
+  <section class="noir-section noir-project-header" aria-label="Project header">
+    <h1 class="noir-project-header__title" data-editable="title">{{ project.title }}</h1>
+    {% if project.repoUrl != blank or project.projectUrl != blank %}
+    <div class="noir-project-header__links">
+      {% if project.repoUrl != blank %}
+      <a href="{{ project.repoUrl }}" aria-label="GitHub repository">{{ project.repoUrl | stripProtocol }}</a>
+      {% endif %}
+      {% if project.projectUrl != blank %}
+      <a href="{{ project.projectUrl }}" aria-label="Live site">{{ project.projectUrl | stripProtocol }}</a>
+      {% endif %}
+    </div>
+    {% endif %}
+  </section>
+
+  <!-- Screenshot -->
+  {% if project.screenshotUrl != blank %}
+  <section class="noir-section" aria-label="Project screenshot">
+    <div class="noir-screenshot" role="img" aria-label="{{ project.title }} screenshot">
+      <div class="noir-screenshot__chrome">
+        <span class="noir-screenshot__dot"></span>
+        <span class="noir-screenshot__dot"></span>
+        <span class="noir-screenshot__dot"></span>
+      </div>
+      <img src="{{ project.screenshotUrl }}" alt="{{ project.title }}" class="noir-screenshot__img">
+    </div>
+  </section>
+  {% endif %}
+
+  <hr class="noir-rule">
+
+  <!-- Stats -->
+  <section class="noir-section" aria-label="Project statistics">
+    <div class="noir-stats-grid" role="list">
+      <div class="noir-stat-cell" role="listitem">
+        <span class="noir-stat-cell__value">{{ project.totalSessions }}</span>
+        <span class="noir-stat-cell__label">Sessions</span>
+      </div>
+      <div class="noir-stat-cell" role="listitem">
+        <span class="noir-stat-cell__value">{{ project.totalLoc | formatLoc }}</span>
+        <span class="noir-stat-cell__label">LOC</span>
+      </div>
+      <div class="noir-stat-cell" role="listitem">
+        <span class="noir-stat-cell__value">{{ project.totalFilesChanged | localeNumber }}</span>
+        <span class="noir-stat-cell__label">Files</span>
+      </div>
+      {% if project.totalTokens %}
+      <div class="noir-stat-cell" role="listitem">
+        <span class="noir-stat-cell__value">{{ project.totalTokens | formatTokens }}</span>
+        <span class="noir-stat-cell__label">Tokens</span>
+      </div>
+      {% endif %}
+    </div>
+  </section>
+
+  {% if efficiencyMultiplier %}
+  <!-- Leverage -->
+  <section aria-label="AI leverage" role="figure">
+    <hr class="noir-rule">
+    <div class="noir-leverage">
+      <span class="noir-leverage__multi">{{ efficiencyMultiplier }}</span>
+      <span class="noir-leverage__sep" aria-hidden="true">&mdash;</span>
+      <span class="noir-leverage__detail">{{ project.totalDurationMinutes | formatDuration }} you{% if project.totalAgentDurationMinutes %}, {{ project.totalAgentDurationMinutes | formatDuration }} agents{% endif %}</span>
+    </div>
+    <hr class="noir-rule">
+  </section>
+  {% endif %}
+
+  <!-- Narrative -->
+  {% if project.narrative != blank %}
+  <section class="noir-section" aria-label="Project narrative">
+    <h2 class="noir-heading">Narrative</h2>
+    <div class="noir-narrative">
+      <p>{{ project.narrative }}</p>
+    </div>
+  </section>
+
+  <hr class="noir-rule">
+  {% endif %}
+
+  <!-- Sessions -->
+  {% if featuredSessions.size > 0 %}
+  <section class="noir-section" aria-label="Sessions timeline">
+    <h2 class="noir-heading">Sessions</h2>
+    <div class="noir-session-timeline" role="list">
+      {% for s in featuredSessions %}
+      <div class="noir-session-row" role="listitem" style="--bar-width: {% if featuredSessions[0].locChanged > 0 %}{{ s.locChanged | times: 100 | divided_by: featuredSessions[0].locChanged }}%{% else %}0%{% endif %};">
+        <span class="noir-session-row__num">{{ forloop.index | prepend: '00' | slice: -2, 2 }}</span>
+        <a href="{{ sessionBaseUrl }}/{{ s.slug }}{{ sessionSuffix }}" class="noir-session-row__title">{{ s.title }}</a>
+        <div class="noir-session-row__bar-wrap">
+          <div class="noir-session-row__bar-track">
+            <div class="noir-session-row__bar"></div>
+          </div>
+          <span class="noir-session-row__loc">{{ s.locChanged | formatLoc }} LOC</span>
+        </div>
+        <span class="noir-session-row__date">{{ s.recordedAt | formatDateShort }}</span>
+      </div>
+      {% endfor %}
+    </div>
+  </section>
+
+  <hr class="noir-rule">
+  {% endif %}
+
+  <!-- Phases -->
+  {% if arc.size > 0 %}
+  <section class="noir-section" aria-label="Project phases">
+    <h2 class="noir-heading">Phases</h2>
+    <div class="noir-phases">
+      {% for phase in arc %}
+      <article class="noir-phase">
+        <span class="noir-phase__number">{{ phase.phase | prepend: '00' | slice: -2, 2 }}</span>
+        <div>
+          <h3 class="noir-phase__name">{{ phase.title }}</h3>
+          {% if phase.dates != blank %}
+          <p class="noir-phase__dates">{{ phase.dates }}</p>
+          {% endif %}
+          {% if phase.description != blank %}
+          <p class="noir-phase__desc">{{ phase.description }}</p>
+          {% endif %}
+        </div>
+      </article>
+      {% endfor %}
+    </div>
+  </section>
+
+  <hr class="noir-rule">
+  {% endif %}
+
+  <!-- Skills -->
+  {% if project.skills.size > 0 %}
+  <section class="noir-section" aria-label="Technologies used">
+    <h2 class="noir-heading">Skills</h2>
+    <div class="noir-chips">
+      {% for skill in project.skills %}
+      <span class="noir-chip">{{ skill }}</span>
+      {% endfor %}
+    </div>
+  </section>
+
+  <hr class="noir-rule">
+  {% endif %}
+
+  <!-- Key Decisions -->
+  {% if arc.size > 0 %}
+  <section class="noir-section" aria-label="Key decisions">
+    <h2 class="noir-heading">Key Decisions</h2>
+    <ol class="noir-decisions">
+      {% for item in arc %}
+      <li class="noir-decision">
+        <span class="noir-decision__num">{{ forloop.index }}</span>
+        <p class="noir-decision__text">{{ item.description }}</p>
+      </li>
+      {% endfor %}
+    </ol>
+  </section>
+
+  <hr class="noir-rule">
+  {% endif %}
+
+  <!-- Source Breakdown -->
+  {% if sourceCounts.size > 0 %}
+  <section class="noir-section" aria-label="Source breakdown">
+    <h2 class="noir-heading">Source Breakdown</h2>
+    <div class="noir-source-breakdown">
+      {% if sourceBarSegments.size > 0 %}
+      <div class="noir-source-bar-large" aria-label="Source distribution">
+        {% for seg in sourceBarSegments %}
+        <div class="noir-source-bar-large__fill{% unless forloop.first %}--secondary{% endunless %}" style="width: {{ seg.percent }}%;"></div>
+        {% endfor %}
+      </div>
+      {% endif %}
+      <div class="noir-source-legend">
+        {% for sc in sourceCounts %}
+        <span class="noir-source-legend__item">
+          <span class="noir-source-legend__swatch {% if forloop.first %}noir-source-legend__swatch--primary{% else %}noir-source-legend__swatch--secondary{% endif %}"></span>
+          {{ sc.tool }} &mdash; {{ sc.count }} sessions
+        </span>
+        {% endfor %}
+      </div>
+    </div>
+  </section>
+
+  <hr class="noir-rule">
+  {% endif %}
+
+  <!-- Featured Session Cards -->
+  {% if featuredSessions.size > 0 %}
+  <section class="noir-section" aria-label="Featured sessions">
+    <h2 class="noir-heading">Featured Sessions</h2>
+    <div class="noir-featured-sessions">
+      {% for s in featuredSessions %}
+      <a href="{{ sessionBaseUrl }}/{{ s.slug }}{{ sessionSuffix }}" class="noir-featured-card">
+        <span class="noir-featured-card__tag">{{ s.sourceTool }}</span>
+        <h3 class="noir-featured-card__title">{{ s.title }}</h3>
+        <span class="noir-featured-card__meta">{{ s.durationMinutes | formatDuration }} &middot; {{ s.locChanged | formatLoc }} LOC</span>
+        {% if s.agentSummary.agents.size > 0 %}
+        <span class="noir-featured-card__agents">{{ s.agentSummary.agents.size }} agents</span>
+        {% endif %}
+      </a>
+      {% endfor %}
+    </div>
+  </section>
+  {% endif %}
+
+  <!-- Footer -->
+  <footer class="noir-footer">
+    <p class="noir-footer__text">Built with heyi.am</p>
+  </footer>
+
+</div>

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

@@ -0,0 +1,241 @@
+<div class="noir-page" data-render-version="2" data-template="noir">
+
+  <!-- Breadcrumb -->
+  <nav class="noir-breadcrumb" aria-label="Breadcrumb">
+    {% if user.username != blank %}
+    <a href="/{{ user.username }}">{{ user.username }}</a>
+    <span class="noir-breadcrumb__sep">/</span>
+    {% endif %}
+    {% if projectSlug != blank %}
+    <a href="/{{ user.username }}/{{ projectSlug }}">{{ projectSlug }}</a>
+    <span class="noir-breadcrumb__sep">/</span>
+    {% endif %}
+    <span>{{ session.title }}</span>
+  </nav>
+
+  <!-- Session Header -->
+  <section class="noir-section noir-session-header" aria-label="Session header">
+    <h1 class="noir-session-header__title">{{ session.title }}</h1>
+    <div class="noir-session-header__meta">
+      {% if session.recordedAt != blank %}
+      <span class="noir-session-header__meta-item">
+        <span class="noir-session-header__meta-value">{{ session.recordedAt | formatDate }}</span>
+      </span>
+      {% endif %}
+      {% if session.sourceTool != blank %}
+      <span class="noir-session-header__meta-item">
+        Source: <span class="noir-session-header__meta-value">{{ session.sourceTool }}</span>
+      </span>
+      {% endif %}
+    </div>
+  </section>
+
+  <!-- Dev Take -->
+  {% if session.devTake != blank %}
+  <section class="noir-section" aria-label="Developer take">
+    <div class="noir-dev-take">
+      <p class="noir-dev-take__label">Dev Take</p>
+      <p class="noir-dev-take__text">"{{ session.devTake }}"</p>
+    </div>
+  </section>
+  {% endif %}
+
+  <hr class="noir-rule">
+
+  <!-- Stats -->
+  <section class="noir-section" aria-label="Session statistics">
+    <div class="noir-stats-row-session" role="list">
+      <div class="noir-stat-cell" role="listitem">
+        <span class="noir-stat-cell__value">{{ session.durationMinutes | formatDuration }}</span>
+        <span class="noir-stat-cell__label">Duration</span>
+      </div>
+      <div class="noir-stat-cell" role="listitem">
+        <span class="noir-stat-cell__value">{{ session.turns | localeNumber }}</span>
+        <span class="noir-stat-cell__label">Turns</span>
+      </div>
+      <div class="noir-stat-cell" role="listitem">
+        <span class="noir-stat-cell__value">{{ session.locChanged | formatLoc }}</span>
+        <span class="noir-stat-cell__label">LOC</span>
+      </div>
+      <div class="noir-stat-cell" role="listitem">
+        <span class="noir-stat-cell__value">{{ session.filesChanged }}</span>
+        <span class="noir-stat-cell__label">Files Changed</span>
+      </div>
+    </div>
+  </section>
+
+  <hr class="noir-rule">
+
+  <!-- Main Content + Sidebar -->
+  <div class="noir-layout">
+
+    <!-- Main Column -->
+    <div>
+
+      <!-- Narrative -->
+      {% if session.narrative != blank %}
+      <section class="noir-section" aria-label="Narrative">
+        <h2 class="noir-heading">Narrative</h2>
+        <div class="noir-narrative">
+          <p>{{ session.narrative }}</p>
+        </div>
+      </section>
+
+      <hr class="noir-rule">
+      {% endif %}
+
+      <!-- Context -->
+      {% if session.context != blank %}
+      <section class="noir-section" aria-label="Context">
+        <h2 class="noir-heading">Context</h2>
+        <div class="noir-narrative">
+          <p>{{ session.context }}</p>
+        </div>
+      </section>
+
+      <hr class="noir-rule">
+      {% endif %}
+
+      <!-- Highlights -->
+      {% if session.highlights.size > 0 %}
+      <section class="noir-section" aria-label="Highlights">
+        <h2 class="noir-heading">Highlights</h2>
+        <ul class="noir-highlights">
+          {% for h in session.highlights %}
+          <li>{{ h }}</li>
+          {% endfor %}
+        </ul>
+      </section>
+
+      <hr class="noir-rule">
+      {% endif %}
+
+      <!-- Execution Path -->
+      {% if session.beats.size > 0 %}
+      <section class="noir-section" aria-label="Execution path">
+        <h2 class="noir-heading">Execution Path</h2>
+        <ol class="noir-beats">
+          {% for beat in session.beats %}
+          <li class="noir-beat">
+            <span class="noir-beat__number">{{ beat.stepNumber | prepend: '00' | slice: -2, 2 }}</span>
+            <div>
+              <h3 class="noir-beat__title">{{ beat.title }}</h3>
+              {% if beat.body != blank %}
+              <p class="noir-beat__desc">{{ beat.body }}</p>
+              {% endif %}
+            </div>
+          </li>
+          {% endfor %}
+        </ol>
+      </section>
+
+      <hr class="noir-rule">
+      {% endif %}
+
+      <!-- Q&A -->
+      {% if session.qaPairs.size > 0 %}
+      <section class="noir-section" aria-label="Questions and answers">
+        <h2 class="noir-heading">Q&amp;A</h2>
+        <div class="noir-qa-list">
+          {% for qa in session.qaPairs %}
+          <article class="noir-qa">
+            <h3 class="noir-qa__question">{{ qa.question }}</h3>
+            <p class="noir-qa__answer">{{ qa.answer }}</p>
+          </article>
+          {% endfor %}
+        </div>
+      </section>
+
+      <hr class="noir-rule">
+      {% endif %}
+
+      <!-- Agent Summary -->
+      {% if session.agentSummary.agents.size > 0 %}
+      <section class="noir-section" aria-label="Agent summary">
+        <h2 class="noir-heading">Agent Summary</h2>
+        <p class="noir-agent-count">{{ session.agentSummary.agents.size }} sub-sessions</p>
+
+        <div class="noir-agents" role="table" aria-label="Agent breakdown">
+          {% for sub in session.agentSummary.agents %}
+          <div class="noir-agent-row" role="row">
+            <span class="noir-agent-row__role" role="cell">{{ sub.role }}</span>
+            <span class="noir-agent-row__duration" role="cell">{{ sub.duration_minutes | formatDuration }}</span>
+            <span class="noir-agent-row__loc" role="cell">{{ sub.loc_changed }} LOC</span>
+          </div>
+          {% endfor %}
+        </div>
+
+        <!-- Agent bar chart -->
+        <div class="noir-agent-bars" aria-label="Agent duration chart">
+          {% for sub in session.agentSummary.agents %}
+          <div class="noir-agent-bar-row">
+            <span class="noir-agent-bar-row__label">{{ sub.role }}</span>
+            <div class="noir-agent-bar-row__track">
+              <div class="noir-agent-bar-row__fill" style="width: {% if session.agentSummary.agents[0].duration_minutes > 0 %}{{ sub.duration_minutes | times: 100 | divided_by: session.agentSummary.agents[0].duration_minutes }}%{% else %}0%{% endif %};"></div>
+            </div>
+            <span class="noir-agent-bar-row__value">{{ sub.duration_minutes | formatDuration }}</span>
+          </div>
+          {% endfor %}
+        </div>
+      </section>
+      {% endif %}
+
+    </div>
+
+    <!-- Sidebar -->
+    <aside class="noir-sidebar" aria-label="Session details">
+
+      <!-- Tools Used -->
+      {% if session.toolBreakdown.size > 0 %}
+      <div class="noir-sidebar-section">
+        <h2 class="noir-sidebar-section__title">Tools Used</h2>
+        <table class="noir-tool-table" aria-label="Tool usage counts">
+          <tbody>
+            {% for tool in session.toolBreakdown %}
+            <tr>
+              <td>{{ tool.tool }}</td>
+              <td>{{ tool.count }}</td>
+            </tr>
+            {% endfor %}
+          </tbody>
+        </table>
+      </div>
+      {% endif %}
+
+      <!-- Files Changed -->
+      {% if session.topFiles.size > 0 %}
+      <div class="noir-sidebar-section">
+        <h2 class="noir-sidebar-section__title">Files Changed</h2>
+        <ul class="noir-file-list" aria-label="Changed files">
+          {% for f in session.topFiles %}
+          <li class="noir-file-item">
+            <span class="noir-file-item__name" title="{{ f.path }}">{{ f.path }}</span>
+            <span class="noir-file-item__diff">+{{ f.additions }}{% if f.deletions > 0 %} -{{ f.deletions }}{% endif %}</span>
+          </li>
+          {% endfor %}
+        </ul>
+      </div>
+      {% endif %}
+
+      <!-- Skills -->
+      {% if session.skills.size > 0 %}
+      <div class="noir-sidebar-section">
+        <h2 class="noir-sidebar-section__title">Skills</h2>
+        <div class="noir-chips">
+          {% for skill in session.skills %}
+          <span class="noir-chip">{{ skill }}</span>
+          {% endfor %}
+        </div>
+      </div>
+      {% endif %}
+
+    </aside>
+
+  </div>
+
+  <!-- Footer -->
+  <footer class="noir-footer">
+    <p class="noir-footer__text">Built with heyi.am</p>
+  </footer>
+
+</div>