heyiam 0.2.29 → 0.3.0

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

@@ -0,0 +1,233 @@
+<div class="heyiam-portfolio radar" data-render-version="2" data-template="radar" data-username="{{ user.username }}">
+
+  {% if hasProfile %}
+  {%- comment -%} Header {%- endcomment -%}
+  <section class="radar-section" aria-label="Profile">
+    <div class="portfolio-header">
+      {% if user.photoUrl %}
+      <img src="{{ user.photoUrl }}" alt="{{ user.displayName }}" class="portfolio-photo">
+      {% endif %}
+      <div class="portfolio-info">
+        {% if user.displayName != blank %}
+        <h1 class="portfolio-name">{{ user.displayName }}</h1>
+        {% endif %}
+        <div class="portfolio-handle">@{{ user.username }}</div>
+        {% if user.bio != blank %}
+        <div class="portfolio-bio">{{ user.bio }}</div>
+        {% endif %}
+        {% if user.location != blank %}
+        <div class="portfolio-location">
+          <svg viewBox="0 0 24 24" stroke-linecap="round" stroke-linejoin="round"><path d="M21 10c0 7-9 13-9 13s-9-6-9-13a9 9 0 0118 0z"/><circle cx="12" cy="10" r="3"/></svg>
+          {{ user.location }}
+        </div>
+        {% endif %}
+        {% if user.email != blank or user.linkedinUrl != blank or user.githubUrl != blank or user.twitterHandle != blank or user.websiteUrl != blank or user.resumeUrl != blank %}
+        <div class="contact-row">
+          {% if user.email != blank %}
+          <a href="mailto:{{ user.email }}"><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>
+          {% endif %}
+          {% if user.linkedinUrl != blank %}
+          <a href="{{ user.linkedinUrl }}" target="_blank" rel="noopener"><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>
+          {% endif %}
+          {% if user.githubUrl != blank %}
+          <a href="{{ user.githubUrl }}" target="_blank" rel="noopener"><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>
+          {% endif %}
+          {% if user.twitterHandle != blank %}
+          <a href="https://x.com/{{ user.twitterHandle }}" target="_blank" rel="noopener"><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>
+          {% endif %}
+          {% if user.websiteUrl != blank %}
+          <a href="{{ user.websiteUrl }}" target="_blank" rel="noopener">{{ user.websiteUrl | stripProtocol }}</a>
+          {% endif %}
+          {% if user.resumeUrl != blank %}
+          <a href="{{ user.resumeUrl }}" class="resume-btn"><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> Resume (PDF)</a>
+          {% endif %}
+        </div>
+        {% endif %}
+      </div>
+    </div>
+  </section>
+  {% endif %}
+
+  {%- comment -%} Aggregate Stats {%- endcomment -%}
+  <section class="radar-section" aria-label="Aggregate statistics" id="stats-section">
+    <div class="radar-label">Metrics</div>
+    <div class="portfolio-stats">
+      <div class="portfolio-stat">
+        <div class="portfolio-stat__value">{{ projects.size }}</div>
+        <div class="portfolio-stat__label">Projects</div>
+      </div>
+      <div class="portfolio-stat">
+        <div class="portfolio-stat__value">{{ totalSessions }}</div>
+        <div class="portfolio-stat__label">Sessions</div>
+      </div>
+      <div class="portfolio-stat">
+        <div class="portfolio-stat__value">{{ totalDurationMinutes | formatDuration }}</div>
+        <div class="portfolio-stat__label">You</div>
+      </div>
+      {% if totalAgentDurationMinutes %}
+      <div class="portfolio-stat portfolio-stat--cyan">
+        <div class="portfolio-stat__value">{{ totalAgentDurationMinutes | formatDuration }}</div>
+        <div class="portfolio-stat__label">Agents</div>
+      </div>
+      {% endif %}
+      {% if efficiencyMultiplier %}
+      <div class="portfolio-stat portfolio-stat--cyan">
+        <div class="portfolio-stat__value">{{ efficiencyMultiplier }}</div>
+        <div class="portfolio-stat__label">Multiplier</div>
+      </div>
+      {% endif %}
+      <div class="portfolio-stat">
+        <div class="portfolio-stat__value">{{ totalLoc | formatLoc }}</div>
+        <div class="portfolio-stat__label">LOC</div>
+      </div>
+    </div>
+  </section>
+
+  {%- comment -%} Projects {%- endcomment -%}
+  {% if projects.size > 0 %}
+  <section class="radar-section" aria-label="Projects">
+    <div class="radar-label">Projects</div>
+    <div class="portfolio-projects">
+      {% for p in projects %}
+      <a class="portfolio-card" href="/{{ user.username }}/{{ p.slug }}">
+        <div class="portfolio-card__bar portfolio-card__bar--cyan"></div>
+        <div class="portfolio-card__title">{{ p.title }}</div>
+        {% if p.narrative != blank %}
+        <div class="portfolio-card__desc">{{ p.narrative }}</div>
+        {% endif %}
+        <div class="portfolio-card__meta">{{ p.totalSessions }} sessions &middot; {{ p.totalDurationMinutes | formatDuration }} &middot; {{ p.totalLoc | formatLoc }} LOC</div>
+        {% if p.skills.size > 0 %}
+        <div class="portfolio-card__skills">
+          {% for skill in p.skills %}
+          <span class="chip">{{ skill }}</span>
+          {% endfor %}
+        </div>
+        {% endif %}
+        {% if p.sourceCounts.size > 0 %}
+        <div class="source-mix" 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="source-mix__segment--{{ sc.tool | downcase | replace: ' ', '-' }}" style="width: {{ pct }}%"></div>
+          {% endfor %}
+        </div>
+        {% endif %}
+      </a>
+      {% endfor %}
+    </div>
+  </section>
+  {% endif %}
+
+  {%- comment -%} All Skills {%- endcomment -%}
+  {% assign allSkills = "" %}
+  {% for p in projects %}
+    {% for skill in p.skills %}
+      {% unless allSkills contains skill %}
+        {% if allSkills != "" %}{% assign allSkills = allSkills | append: "|||" %}{% endif %}
+        {% assign allSkills = allSkills | append: skill %}
+      {% endunless %}
+    {% endfor %}
+  {% endfor %}
+  {% if allSkills != "" %}
+  <section class="radar-section" aria-label="Technologies">
+    <div class="radar-label">Technologies</div>
+    <div class="chip-list">
+      {% assign skillArray = allSkills | split: "|||" %}
+      {% for skill in skillArray %}
+      <span class="chip">{{ skill }}</span>
+      {% endfor %}
+    </div>
+  </section>
+  {% endif %}
+
+  {%- comment -%} Activity Chart {%- endcomment -%}
+  {% if activityByMonth.size > 0 %}
+  <section class="radar-section" aria-label="Activity overview" id="activity-chart-section">
+    <div class="radar-label">Activity</div>
+    <div style="background: var(--surface-lowest); border: 1px solid var(--ghost); border-radius: var(--radius-sm); padding: 1rem; overflow: hidden;">
+      {% assign maxSessions = 0 %}
+      {% for m in activityByMonth %}
+        {% if m.sessions > maxSessions %}{% assign maxSessions = m.sessions %}{% endif %}
+      {% endfor %}
+      <svg viewBox="0 0 820 160" xmlns="http://www.w3.org/2000/svg" role="img" aria-label="Activity chart showing sessions per month">
+        <line x1="48" y1="10" x2="48" y2="130" stroke="rgba(34,211,238,0.08)" stroke-width="1"/>
+        <line x1="48" y1="130" x2="800" y2="130" stroke="rgba(34,211,238,0.08)" stroke-width="1"/>
+        <line x1="48" y1="90" x2="800" y2="90" stroke="rgba(34,211,238,0.04)" stroke-width="1" stroke-dasharray="4 4"/>
+        <line x1="48" y1="50" x2="800" y2="50" stroke="rgba(34,211,238,0.04)" stroke-width="1" stroke-dasharray="4 4"/>
+        {% assign barWidth = 750 | divided_by: activityByMonth.size %}
+        {% for m in activityByMonth %}
+          {% if maxSessions > 0 %}
+            {% assign barHeight = m.sessions | times: 100 | divided_by: maxSessions %}
+          {% else %}
+            {% assign barHeight = 0 %}
+          {% endif %}
+          {% assign barY = 130 | minus: barHeight %}
+          {% assign barX = forloop.index0 | times: barWidth | plus: 60 %}
+          {% assign barW = barWidth | minus: 20 %}
+          <rect class="wt-bar" x="{{ barX }}" y="{{ barY }}" width="{{ barW }}" height="{{ barHeight }}" rx="2" fill="#22d3ee" opacity="0.7"/>
+          {% assign labelX = barX | plus: barW | divided_by: 2 | plus: barX | divided_by: 2 %}
+          <text x="{{ barX }}" y="146" fill="#64748b" font-family="'IBM Plex Mono', monospace" font-size="8" dx="{{ barW | divided_by: 2 }}">{{ m.month }}</text>
+          {% assign valueY = barY | minus: 4 %}
+          <text x="{{ barX }}" y="{{ valueY }}" fill="#64748b" font-family="'IBM Plex Mono', monospace" font-size="7" dx="{{ barW | divided_by: 2 }}">{{ m.sessions }}</text>
+        {% endfor %}
+      </svg>
+    </div>
+  </section>
+  {% endif %}
+
+  {%- comment -%} Footer {%- endcomment -%}
+  <section class="radar-section" aria-label="Footer" data-radar-section="footer">
+    <footer class="radar-footer">
+      <div class="radar-footer__text">Built with heyi.am</div>
+    </footer>
+  </section>
+
+{%- comment -%} Radar Floating Nav {%- endcomment -%}
+<nav class="radar-nav" aria-label="Section navigation">
+  <div class="radar-nav__ring"></div>
+  <div class="radar-nav__sweep"></div>
+  <div class="radar-nav__center"></div>
+</nav>
+<script>
+(function() {
+  'use strict';
+  var nav = document.querySelector('.radar-nav');
+  if (!nav) return;
+  var sections = document.querySelectorAll('.radar-section');
+  var dots = [];
+  sections.forEach(function(sec, i) {
+    sec.setAttribute('data-radar-section', i);
+    var label = sec.getAttribute('aria-label') || 'Section ' + (i + 1);
+    var btn = document.createElement('button');
+    btn.className = 'radar-nav__dot';
+    btn.setAttribute('data-radar-dot', i);
+    btn.setAttribute('aria-label', 'Navigate to ' + label);
+    nav.appendChild(btn);
+    dots.push(btn);
+  });
+  var total = dots.length;
+  dots.forEach(function(dot, i) {
+    var angle = (i / total) * 2 * Math.PI - Math.PI / 2;
+    var r = 54;
+    dot.style.left = (60 + r * Math.cos(angle) - 3) + 'px';
+    dot.style.top  = (60 + r * Math.sin(angle) - 3) + 'px';
+  });
+  var observer = new IntersectionObserver(function(entries) {
+    entries.forEach(function(entry) {
+      var idx = entry.target.getAttribute('data-radar-section');
+      var dot = nav.querySelector('[data-radar-dot="' + idx + '"]');
+      if (dot) dot.classList.toggle('radar-nav__dot--active', entry.isIntersecting);
+    });
+  }, { threshold: 0.3 });
+  sections.forEach(function(s) { observer.observe(s); });
+  dots.forEach(function(dot) {
+    dot.addEventListener('click', function() {
+      var idx = this.getAttribute('data-radar-dot');
+      var target = document.querySelector('[data-radar-section="' + idx + '"]');
+      if (target) target.scrollIntoView({ behavior: 'smooth', block: 'start' });
+    });
+  });
+})();
+</script>
+
+</div>
+

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

@@ -0,0 +1,278 @@
+<div class="heyiam-project radar" data-render-version="2" data-template="radar"{% if sessionBaseUrl %} data-session-base-url="{{ sessionBaseUrl }}"{% endif %} data-username="{{ user.username }}" data-project-slug="{{ project.slug }}">
+
+  {%- comment -%} Breadcrumb {%- endcomment -%}
+  <nav class="radar-breadcrumb" aria-label="Breadcrumb">
+    <a href="/{{ user.username }}">{{ user.username }}</a>
+    <span class="radar-breadcrumb__sep">/</span>
+    <span>{{ project.slug }}</span>
+  </nav>
+
+  {%- comment -%} Title {%- endcomment -%}
+  <section class="radar-section" aria-label="Project title">
+    <h1 class="radar-title" data-editable="title">{{ project.title }}</h1>
+  </section>
+
+  {%- comment -%} Links {%- endcomment -%}
+  {% if project.repoUrl or project.projectUrl %}
+  <section class="radar-section" style="margin-bottom: 2rem;" aria-label="Project links">
+    <div class="radar-links">
+      {% if project.repoUrl %}
+      <a class="radar-link" href="{{ project.repoUrl }}" target="_blank" rel="noopener">
+        <svg viewBox="0 0 24 24" stroke-linecap="round" stroke-linejoin="round"><path d="M9 19c-5 1.5-5-2.5-7-3m14 6v-3.87a3.37 3.37 0 0 0-.94-2.61c3.14-.35 6.44-1.54 6.44-7A5.44 5.44 0 0 0 20 4.77 5.07 5.07 0 0 0 19.91 1S18.73.65 16 2.48a13.38 13.38 0 0 0-7 0C6.27.65 5.09 1 5.09 1A5.07 5.07 0 0 0 5 4.77a5.44 5.44 0 0 0-1.5 3.78c0 5.42 3.3 6.61 6.44 7A3.37 3.37 0 0 0 9 18.13V22"/></svg>
+        {{ project.repoUrl | stripProtocol }}
+      </a>
+      {% endif %}
+      {% if project.projectUrl %}
+      <a class="radar-link" href="{{ project.projectUrl }}" target="_blank" rel="noopener">
+        <svg viewBox="0 0 24 24" stroke-linecap="round" stroke-linejoin="round"><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>
+        {{ project.projectUrl | stripProtocol }}
+      </a>
+      {% endif %}
+    </div>
+  </section>
+  {% endif %}
+
+  {%- comment -%} Screenshot {%- endcomment -%}
+  {% if project.screenshotUrl %}
+  <section class="radar-section" aria-label="Project screenshot">
+    <div class="browser-chrome">
+      <div class="browser-chrome__bar">
+        <div class="browser-chrome__dot browser-chrome__dot--red"></div>
+        <div class="browser-chrome__dot browser-chrome__dot--yellow"></div>
+        <div class="browser-chrome__dot browser-chrome__dot--green"></div>
+      </div>
+      <div class="browser-chrome__viewport">
+        <img src="{{ project.screenshotUrl }}" alt="{{ project.title }} screenshot" style="width: 100%; height: 100%; object-fit: cover;">
+      </div>
+    </div>
+  </section>
+  {% endif %}
+
+  {%- comment -%} Narrative {%- endcomment -%}
+  {% if project.narrative != blank %}
+  <section class="radar-section" aria-label="Project narrative">
+    <div class="radar-narrative">
+      {{ project.narrative }}
+    </div>
+  </section>
+  {% endif %}
+
+  {%- comment -%} Stats {%- endcomment -%}
+  <section class="radar-section" aria-label="Project statistics" id="stats-section">
+    <div class="radar-label">Metrics</div>
+    <div class="stat-grid">
+      <div class="stat-card">
+        <div class="stat-card__label">Sessions</div>
+        <div class="stat-card__value">{{ project.totalSessions }}</div>
+      </div>
+      <div class="stat-card">
+        <div class="stat-card__label">You</div>
+        <div class="stat-card__value">{{ project.totalDurationMinutes | formatDuration }}</div>
+      </div>
+      {% if project.totalAgentDurationMinutes %}
+      <div class="stat-card stat-card--cyan">
+        <div class="stat-card__label">Agents</div>
+        <div class="stat-card__value">{{ project.totalAgentDurationMinutes | formatDuration }}</div>
+      </div>
+      {% endif %}
+      {% if efficiencyMultiplier %}
+      <div class="stat-card stat-card--cyan">
+        <div class="stat-card__label">Multiplier</div>
+        <div class="stat-card__value">{{ efficiencyMultiplier }}</div>
+      </div>
+      {% endif %}
+      <div class="stat-card">
+        <div class="stat-card__label">Lines Changed</div>
+        <div class="stat-card__value">{{ project.totalLoc | formatLoc }}</div>
+      </div>
+      <div class="stat-card">
+        <div class="stat-card__label">Files Changed</div>
+        <div class="stat-card__value">{{ project.totalFilesChanged | localeNumber }}</div>
+      </div>
+      {% if project.totalTokens %}
+      <div class="stat-card">
+        <div class="stat-card__label">Tokens</div>
+        <div class="stat-card__value">{{ project.totalTokens | formatTokens }}</div>
+      </div>
+      {% endif %}
+    </div>
+  </section>
+
+  {%- comment -%} Work Timeline — React component with radar accent {%- endcomment -%}
+  {% if sessionsJson != blank %}
+  <section class="radar-section" aria-label="Work timeline">
+    <div class="radar-label">Work Timeline</div>
+    <div class="chart-card">
+      <div data-work-timeline data-sessions='{{ sessionsJson | raw }}'></div>
+    </div>
+  </section>
+  {% endif %}
+
+  {%- comment -%} Lines Changed — React component with radar variant + dual positive {%- endcomment -%}
+  {% if sessionsJson != blank %}
+  <section class="radar-section" aria-label="Lines changed">
+    <div class="radar-label">Lines Changed</div>
+    <div class="chart-card">
+      <div data-growth-chart data-variant="radar" data-project-slug="{{ project.slug }}" data-total-loc="{{ project.totalLoc }}" data-total-files="{{ project.totalFilesChanged }}" data-sessions='{{ growthJson | raw }}'></div>
+    </div>
+  </section>
+  {% endif %}
+
+  {%- comment -%} Two-Column: Key Decisions + Source Breakdown {%- endcomment -%}
+  {% if arc.size > 0 or sourceCounts.size > 0 %}
+  <section class="radar-section" aria-label="Key decisions and source breakdown">
+    <div class="two-col">
+      {% if arc.size > 0 %}
+      <div>
+        <div class="radar-label">Key Decisions</div>
+        <ul class="decision-list">
+          {% for item in arc %}
+          <li class="decision-item">
+            <div class="decision-bullet">
+              <div>
+                <div class="decision-title">{{ item.title }}</div>
+                {% if item.description != blank %}
+                <div class="decision-desc">{{ item.description }}</div>
+                {% endif %}
+              </div>
+            </div>
+          </li>
+          {% endfor %}
+        </ul>
+      </div>
+      {% endif %}
+      {% if sourceCounts.size > 0 %}
+      <div>
+        <div class="radar-label">Source Breakdown</div>
+        <table class="source-table">
+          <thead>
+            <tr>
+              <th>Tool</th>
+              <th style="text-align: right;">Sessions</th>
+            </tr>
+          </thead>
+          <tbody>
+            {% for src in sourceCounts %}
+            <tr><td>{{ src.tool }}</td><td>{{ src.count }} ({{ src.count | times: 100.0 | divided_by: project.totalSessions | round }}%)</td></tr>
+            {% endfor %}
+          </tbody>
+        </table>
+      </div>
+      {% endif %}
+    </div>
+  </section>
+  {% endif %}
+
+  {%- comment -%} Phase Timeline {%- endcomment -%}
+  {% if arc.size > 0 %}
+  <section class="radar-section" aria-label="Project phases">
+    <div class="radar-label">Phases</div>
+    <div class="phase-timeline">
+      <div class="phase-timeline__line"></div>
+      {% for phase in arc %}
+      <div class="phase-timeline__item">
+        <div class="phase-timeline__dot"></div>
+        <div class="phase-timeline__title">{{ phase.phase }}. {{ phase.title }}</div>
+        {% if phase.dates != blank %}
+        <div class="phase-timeline__dates">{{ phase.dates }}</div>
+        {% endif %}
+        {% if phase.description != blank %}
+        <div class="phase-timeline__desc">{{ phase.description }}</div>
+        {% endif %}
+      </div>
+      {% endfor %}
+    </div>
+  </section>
+  {% endif %}
+
+  {%- comment -%} Skills {%- endcomment -%}
+  {% if project.skills.size > 0 %}
+  <section class="radar-section" aria-label="Technologies used">
+    <div class="radar-label">Technologies</div>
+    <div class="chip-list">
+      {% for skill in project.skills %}
+      <span class="chip">{{ skill }}</span>
+      {% endfor %}
+    </div>
+  </section>
+  {% endif %}
+
+  {%- comment -%} Featured Sessions {%- endcomment -%}
+  {% if featuredSessions.size > 0 %}
+  <section class="radar-section" aria-label="Featured sessions">
+    <div class="section-header">
+      <div class="radar-label" style="margin-bottom: 0;">Sessions</div>
+      <div class="section-header__meta">{{ project.totalSessions }} total</div>
+    </div>
+    <div class="session-grid">
+      {% for s in featuredSessions %}
+      <a class="session-card" href="{{ sessionBaseUrl }}/{{ s.slug }}{{ sessionSuffix }}">
+        <div class="session-card__bar session-card__bar--cyan"></div>
+        <div class="session-card__title">{{ s.title }}</div>
+        <div class="session-card__meta">{{ s.durationMinutes | formatDuration }} &middot; {{ s.locChanged | formatLoc }} LOC{% if s.agentSummary %} &middot; {{ s.agentSummary.agents.size }} agent{% if s.agentSummary.agents.size != 1 %}s{% endif %}{% else %} &middot; {{ s.turns }} turns{% endif %}</div>
+        {% if s.skills.size > 0 %}
+        <span class="session-card__tag">{{ s.skills[0] }}</span>
+        {% endif %}
+      </a>
+      {% endfor %}
+    </div>
+  </section>
+  {% endif %}
+
+  {%- comment -%} Footer {%- endcomment -%}
+  <section class="radar-section" aria-label="Footer" data-radar-section="footer">
+    <footer class="radar-footer">
+      <div class="radar-footer__text">Built with heyi.am</div>
+    </footer>
+  </section>
+
+{%- comment -%} Radar Floating Nav {%- endcomment -%}
+<nav class="radar-nav" aria-label="Section navigation">
+  <div class="radar-nav__ring"></div>
+  <div class="radar-nav__sweep"></div>
+  <div class="radar-nav__center"></div>
+</nav>
+<script>
+(function() {
+  'use strict';
+  var nav = document.querySelector('.radar-nav');
+  if (!nav) return;
+  var sections = document.querySelectorAll('.radar-section');
+  var dots = [];
+  sections.forEach(function(sec, i) {
+    sec.setAttribute('data-radar-section', i);
+    var label = sec.getAttribute('aria-label') || 'Section ' + (i + 1);
+    var btn = document.createElement('button');
+    btn.className = 'radar-nav__dot';
+    btn.setAttribute('data-radar-dot', i);
+    btn.setAttribute('aria-label', 'Navigate to ' + label);
+    nav.appendChild(btn);
+    dots.push(btn);
+  });
+  var total = dots.length;
+  dots.forEach(function(dot, i) {
+    var angle = (i / total) * 2 * Math.PI - Math.PI / 2;
+    var r = 54;
+    dot.style.left = (60 + r * Math.cos(angle) - 3) + 'px';
+    dot.style.top  = (60 + r * Math.sin(angle) - 3) + 'px';
+  });
+  var observer = new IntersectionObserver(function(entries) {
+    entries.forEach(function(entry) {
+      var idx = entry.target.getAttribute('data-radar-section');
+      var dot = nav.querySelector('[data-radar-dot="' + idx + '"]');
+      if (dot) dot.classList.toggle('radar-nav__dot--active', entry.isIntersecting);
+    });
+  }, { threshold: 0.3 });
+  sections.forEach(function(s) { observer.observe(s); });
+  dots.forEach(function(dot) {
+    dot.addEventListener('click', function() {
+      var idx = this.getAttribute('data-radar-dot');
+      var target = document.querySelector('[data-radar-section="' + idx + '"]');
+      if (target) target.scrollIntoView({ behavior: 'smooth', block: 'start' });
+    });
+  });
+})();
+</script>
+
+</div>
+