@hanzlaa/rcode 4.1.2 → 4.3.0

package/server/lib/html/client/components/Sidebar.js

@@ -1,86 +1,131 @@
 /**
- * Sidebar component — project label, nav sections, 12 nav-link buttons.
+ * Sidebar component — redesigned chrome to match the mockup.
  *
- * Reuses existing CSS classes from css.js: sidebar, nav-section, nav-link,
- * data-view, active. Emoji replaced with SVG icons from icons-client.js.
+ * Public API is UNCHANGED — App.js still calls:
+ *   <${Sidebar} activeView=${view} projectName=${storeState.projectName} />
+ *
+ * Layout (top → bottom):
+ *   1. rcode logo badge
+ *   2. project switcher (shows project.name)
+ *   3. vertical nav with per-item icons (Overview active by default)
+ *   4. Project Health mini-card (ProjectHealth.js)
+ *   5. user profile footer (avatar initials + name + email)
+ *
+ * Reads `project { name, user { name, email } }` from the store; falls back to
+ * the projectName prop. No sample data — when no user is configured the
+ * profile footer is hidden, and a missing project name shows "No project".
+ * No inline style= attributes — all styling via .sb-* classes in css.js.
  */
 
 import { html } from '../preact.js';
 import { Icon } from '../icons-client.js';
 import { useStore } from '../store.js';
-import { allSprints, allTasks } from '../util.js';
-import { AGENTS } from '../agents-data.js';
+import { ProjectHealth } from './dashboard/ProjectHealth.js';
 
-// Nav structure: [ { section, links: [ { view, icon, label } ] } ]
-const NAV_SECTIONS = [
-  {
-    section: 'Overview',
-    links: [
-      { view: 'overview',      icon: 'home',        label: 'Overview'      },
-      { view: 'orchestration', icon: 'activity',    label: 'Orchestration' },
-      { view: 'roadmap',       icon: 'map',         label: 'Roadmap'       },
-    ],
-  },
-  {
-    section: 'Planning',
-    links: [
-      { view: 'milestones', icon: 'target',      label: 'Milestones' },
-      { view: 'phases',     icon: 'layers',      label: 'Phases'     },
-      { view: 'sprints',    icon: 'zap',         label: 'Sprints'    },
-      { view: 'tasks',      icon: 'checkSquare', label: 'Tasks'      },
-      { view: 'kanban',     icon: 'kanban',      label: 'Kanban'     },
-    ],
-  },
-  {
-    section: 'Workspace',
-    links: [
-      { view: 'files',     icon: 'file',     label: 'Files'     },
-      { view: 'agents',    icon: 'users',    label: 'Agents'    },
-      { view: 'decisions', icon: 'scale',    label: 'Decisions' },
-      { view: 'memory',    icon: 'database', label: 'Memory'    },
-    ],
-  },
+// Single flat nav — one entry per real Preact view (PREACT_VIEWS in App.js).
+// Keep this list in sync with App.js: a view key absent there silently
+// falls back to Overview, so never add a link without a matching view.
+const NAV_LINKS = [
+  { view: 'overview',      icon: 'home',        label: 'Overview'      },
+  { view: 'roadmap',       icon: 'map',         label: 'Roadmap'       },
+  { view: 'milestones',    icon: 'flag',        label: 'Milestones'    },
+  { view: 'phases',        icon: 'layers',      label: 'Phases'        },
+  { view: 'sprints',       icon: 'zap',         label: 'Sprints'       },
+  { view: 'tasks',         icon: 'checkSquare', label: 'Tasks'         },
+  { view: 'kanban',        icon: 'kanban',      label: 'Kanban'        },
+  { view: 'decisions',     icon: 'scale',       label: 'Decisions'     },
+  { view: 'files',         icon: 'file-text',   label: 'Files'         },
+  { view: 'agents',        icon: 'users',       label: 'Agents'        },
+  { view: 'memory',        icon: 'brain',       label: 'Memory'        },
+  { view: 'orchestration', icon: 'terminal',    label: 'Orchestration' },
 ];
 
+/** Two-letter initials from a display name. */
+function initials(name) {
+  const parts = String(name || '').trim().split(/\s+/).filter(Boolean);
+  if (!parts.length) return '?';
+  if (parts.length === 1) return parts[0].slice(0, 2).toUpperCase();
+  return (parts[0][0] + parts[parts.length - 1][0]).toUpperCase();
+}
+
 /**
  * Sidebar component.
  *
  * Props:
- *   activeView  {string}  — currently active view key
- *   projectName {string}  — displayed under the "rcode" label
+ *   activeView  {string}  — currently active view key (drives nav highlight)
+ *   projectName {string}  — fallback project name when store has no project slice
  */
 export function Sidebar({ activeView, projectName }) {
-  const S = useStore();
-  const counts = {
-    phases:    (S.phases || []).length,
-    sprints:   allSprints(S.phases).length,
-    tasks:     allTasks(S.phases).length,
-    decisions: (S.decisions || []).length,
-    agents:    AGENTS.length,
-  };
+  // Slice subscription — Sidebar only re-renders when the project slice
+  // changes, not on every refreshing/sessions tick.
+  const project = useStore(s => s.project) || {};
+  const name = project.name || projectName || 'No project';
+  const user = (project.user && project.user.name) ? project.user : null;
+
+  // Full store subscription for live health badge counts.
+  // Re-renders on every setState (sessions poll every 4 s, state refresh every 30 s).
+  const { activeSessions, blockers } = useStore();
+  const sessionCount = (activeSessions || []).filter(s => s.status === 'running').length;
+  const blockerCount = (blockers || []).length;
 
   return html`
     <aside class="sidebar" id="sidebar">
-      <div class="sidebar-project">
-        <div class="project-label">rcode</div>
-        <span>${projectName || ''}</span>
+      <div class="sb-logo">
+        <span class="sb-logo-badge">r</span>
+        <span class="sb-logo-word">rcode</span>
+      </div>
+
+      <!-- Visually inert: the server scans exactly one project, so there is
+           no switcher menu. Rendered as a plain label, no chevron/affordance. -->
+      <div class="sb-switcher sb-switcher--static" title=${name}>
+        <span class="sb-switcher-dot"></span>
+        <span class="sb-switcher-name">${name}</span>
       </div>
-      <nav>
-        ${NAV_SECTIONS.map(({ section, links }) => html`
-          <div class="nav-section">${section}</div>
-          ${links.map(({ view, icon, label }) => html`
-            <button
-              class=${'nav-link' + (activeView === view ? ' active' : '')}
-              data-view=${view}
-              onClick=${() => { location.hash = view; }}
-            >
-              <${Icon} name=${icon} size=${14} />
-              ${' ' + label}
-              ${counts[view] ? html`<span class="nav-count">${counts[view]}</span>` : null}
-            </button>
-          `)}
+
+      <div class="sidebar-health">
+        <span
+          class=${'health-badge' + (sessionCount === 0 ? ' health-badge--zero' : '')}
+          title=${sessionCount + ' active orchestration session' + (sessionCount === 1 ? '' : 's')}
+        >
+          <${Icon} name="activity" size=${12} />
+          ${sessionCount} active
+        </span>
+        <span
+          class=${'health-badge' + (blockerCount > 0 ? ' health-badge--alert' : ' health-badge--zero')}
+          title=${blockerCount + ' blocker' + (blockerCount === 1 ? '' : 's')}
+        >
+          <${Icon} name="alert-triangle" size=${12} />
+          ${blockerCount} blocked
+        </span>
+      </div>
+
+      <nav class="sb-nav">
+        ${NAV_LINKS.map(({ view, icon, label }) => html`
+          <button
+            class=${'sb-nav-link' + (activeView === view ? ' active' : '')}
+            data-view=${view}
+            aria-current=${activeView === view ? 'page' : undefined}
+            onClick=${() => { location.hash = view; }}
+          >
+            <span class="sb-nav-ic"><${Icon} name=${icon} size=${16} /></span>
+            <span class="sb-nav-label">${label}</span>
+          </button>
         `)}
       </nav>
+
+      <div class="sb-health">
+        <${ProjectHealth} />
+      </div>
+
+      ${user ? html`
+        <div class="sb-profile">
+          <span class="sb-avatar">${initials(user.name)}</span>
+          <span class="sb-profile-meta">
+            <span class="sb-profile-name">${user.name}</span>
+            <span class="sb-profile-email">${user.email || ''}</span>
+          </span>
+        </div>
+      ` : null}
     </aside>
   `;
 }

package/server/lib/html/client/components/StatusSummaryBar.js

@@ -0,0 +1,76 @@
+/**
+ * StatusSummaryBar — aggregate count chips for phases, sprints, and sessions
+ * grouped by status. Reads from the shared store; renders a flex row of
+ * labelled count chips.
+ *
+ * No props required — all data comes from useStore().
+ * Rendered above views in 34.2 once wired into App.js.
+ */
+
+import { html } from '../preact.js';
+import { useStore } from '../store.js';
+import { allSprints, chip } from '../util.js';
+
+/**
+ * Build a `{ [cls]: count }` map from an array of items by normalising each
+ * item's status through `chip()` and incrementing the corresponding cls bucket.
+ *
+ * @param {Array<{ status: string }>} items
+ * @returns {Object.<string, number>}
+ */
+function countByStatus(items) {
+  const map = {};
+  for (const item of items) {
+    const { cls } = chip(item.status || '');
+    map[cls] = (map[cls] || 0) + 1;
+  }
+  return map;
+}
+
+/**
+ * Render a single group of count chips.
+ *
+ * @param {{ label: string, counts: Object.<string, number> }} props
+ */
+function SummaryGroup({ label, counts }) {
+  const entries = Object.entries(counts).filter(([, n]) => n > 0);
+  if (entries.length === 0) return null;
+  return html`
+    <div class="summary-group">
+      <span class="summary-group-label">${label}</span>
+      ${entries.map(([cls, count]) => html`
+        <span class=${'summary-count-chip ' + cls}>${count} ${cls}</span>
+      `)}
+    </div>
+  `;
+}
+
+/**
+ * StatusSummaryBar — row of count chips for phases, sprints, and sessions.
+ * Suppresses a group entirely when its source array is empty.
+ */
+export function StatusSummaryBar() {
+  const S = useStore();
+
+  const phases   = S.phases || [];
+  const sprints  = allSprints(phases);
+  const sessions = S.activeSessions || [];
+
+  const phaseCounts   = countByStatus(phases);
+  const sprintCounts  = countByStatus(sprints);
+  const sessionCounts = countByStatus(sessions);
+
+  const hasPhases   = phases.length > 0;
+  const hasSprints  = sprints.length > 0;
+  const hasSessions = sessions.length > 0;
+
+  if (!hasPhases && !hasSprints && !hasSessions) return null;
+
+  return html`
+    <div class="summary-bar">
+      ${hasPhases   ? html`<${SummaryGroup} label="Phases"   counts=${phaseCounts}   />` : null}
+      ${hasSprints  ? html`<${SummaryGroup} label="Sprints"  counts=${sprintCounts}  />` : null}
+      ${hasSessions ? html`<${SummaryGroup} label="Sessions" counts=${sessionCounts} />` : null}
+    </div>
+  `;
+}

package/server/lib/html/client/components/TaskPipeline.js

@@ -0,0 +1,83 @@
+/**
+ * TaskPipeline — compact horizontal stage stepper for a single task.
+ *
+ * Stages derive from the rcode story lifecycle as seen by the scanner
+ * (todo/planned → in_progress/active → review/verify → done/completed):
+ *   Planned → In Progress → Review → Done.
+ * "blocked" is not a stage — it pins the stepper at In Progress and adds
+ * a red "Blocked" badge (and a red ring on the current node).
+ *
+ * Tolerant of sparse data: a bare status string is enough; overview
+ * `tasks.inProgress` rows have only { title, pct }, so pct is used as a
+ * fallback. Unknown/missing status renders as Planned — never crashes.
+ *
+ * Props:
+ *   task    — { status?, pct?, title? } (anything else ignored)
+ *   mini    — smaller variant for overview card rows
+ *   running — a live orchestrator session exists for this task; pins the
+ *             stepper at In Progress (unless further along) and pulses the
+ *             current node so live work is visible at a glance
+ */
+
+import { html } from '../preact.js';
+
+const STAGES = ['Planned', 'In Progress', 'Review', 'Done'];
+
+/** Current stage index (0–3) for a task; 3 means fully done. */
+export function taskStageIndex(task) {
+  const s = String((task && task.status) || '').toLowerCase();
+  if (/done|complete|shipped/.test(s)) return 3;
+  if (/review|verif|uat/.test(s)) return 2;
+  if (/active|progress|running|blocked/.test(s)) return 1;
+  if (!s && task && Number.isFinite(task.pct)) {
+    return task.pct >= 100 ? 3 : task.pct > 0 ? 1 : 0;
+  }
+  return 0;
+}
+
+export function TaskPipeline({ task, mini, running }) {
+  const t = task || {};
+  // A live session means work is happening NOW — never show it as Planned,
+  // but don't demote a task already at Review/Done.
+  const cur = running ? Math.max(taskStageIndex(t), 1) : taskStageIndex(t);
+  const blocked = /blocked/i.test(String(t.status || ''));
+  // Number of fully-completed stages. When the task is done the Done node
+  // itself is filled, so all four count as complete.
+  const doneCount = cur === 3 ? 4 : cur;
+
+  const parts = [];
+  STAGES.forEach((label, i) => {
+    if (i > 0) {
+      const lineDone = i <= doneCount;
+      parts.push(html`
+        <span key=${'l' + i} class=${'tpipe-line' + (lineDone ? ' tpipe-line--done' : '')}></span>
+      `);
+    }
+    const isDone = i < doneCount;
+    const isCurrent = !isDone && i === cur;
+    let cls = 'tpipe-node';
+    let state = 'upcoming';
+    if (isDone) { cls += ' tpipe-node--done'; state = 'complete'; }
+    else if (isCurrent) {
+      cls += blocked ? ' tpipe-node--current tpipe-node--blocked' : ' tpipe-node--current';
+      if (running && !blocked && cur < 3) cls += ' tpipe-node--live';
+      state = blocked ? 'blocked' : 'current';
+    }
+    parts.push(html`
+      <span key=${'n' + i} class=${cls} title=${label + ' · ' + state}>
+        ${isDone ? '✓' : ''}
+      </span>
+    `);
+  });
+
+  const summary = blocked
+    ? 'Pipeline: blocked at ' + STAGES[cur]
+    : 'Pipeline: ' + (cur === 3 ? 'Done' : STAGES[cur]) + ' (stage ' + (Math.min(cur, 3) + 1) + ' of 4)';
+
+  return html`
+    <span class=${'tpipe' + (mini ? ' tpipe--mini' : '')} role="img" aria-label=${summary}>
+      ${parts}
+      ${blocked ? html`<span class="tpipe-blocked">Blocked</span>` : null}
+    </span>
+  `;
+}

package/server/lib/html/client/components/Topbar.js

@@ -1,55 +1,102 @@
 /**
- * Topbar component — brand, live dot, updated-ago, action buttons.
+ * Topbar component — redesigned header chrome to match the mockup.
  *
- * Reuses existing CSS classes: header-actions, header-btn, live, hamburger-btn.
+ * Public API is UNCHANGED — App.js still calls:
+ *   <${Topbar} projectName updatedAgo refreshing onRefresh
+ *              onToggleTheme onToggleSidebar themeLabel />
  *
- * Props:
- *   projectName   {string}   — shown in the brand subtitle
- *   updatedAgo    {string}   — text for the "updated N ago" span
- *   onRefresh     {function} — called when Refresh button is clicked
- *   onToggleTheme {function} — called when theme button is clicked
- *   onToggleSidebar {function} — called when hamburger is clicked
- *   themeLabel    {string}   — 'light' or 'dark' — controls which icon the theme button shows
+ * Layout:
+ *   - hamburger (mobile sidebar toggle)
+ *   - greeting: "Welcome back, {user.name}! 👋" + subtitle with project name
+ *   - right group: "Auto-synced {ago}" status dot (click = refresh),
+ *     [Ask rcode] (primary, runs /rcode-next via orchestrator), [Share]
+ *     (copy URL + toast), [...] (more / theme toggle)
+ *
+ * Reads `project { name, user { name } }` from the store; falls back to the
+ * projectName prop. No sample data — without a configured user the greeting
+ * is generic, and without a project name the subtitle stays generic too.
+ * No inline style= attributes — all styling via .tb-* classes in css.js.
  */
 
 import { html } from '../preact.js';
 import { Icon } from '../icons-client.js';
+import { useStore } from '../store.js';
+import { runCommandFromUI } from '../orchestrator.js';
+import { showToast } from './shared.js';
+import { BlockedBell } from './NotifyCenter.js';
+
+/**
+ * Ask rcode — reuse the existing orchestrator command runner (token-guarded
+ * POST /api/run via window.__ORCH_TOKEN__). "/rcode-next" asks rcode for the
+ * suggested next action and streams it into the terminal panel. No new endpoint.
+ */
+function askRcode() {
+  runCommandFromUI('/rcode-next');
+}
+
+/** Share — copy the dashboard URL to the clipboard and confirm via toast. */
+function shareDashboard() {
+  const url = location.href;
+  if (navigator.clipboard && navigator.clipboard.writeText) {
+    navigator.clipboard.writeText(url)
+      .then(() => showToast('Dashboard link copied'))
+      .catch(() => showToast(url));
+  } else {
+    showToast(url);
+  }
+}
 
 export function Topbar({ projectName, updatedAgo, refreshing, onRefresh, onToggleTheme, onToggleSidebar, themeLabel }) {
+  const S = useStore();
+  const project = (S && S.project) || {};
+  const name = project.name || projectName || '';
+  const firstName = (project.user && project.user.name) || '';
+
   return html`
-    <header>
-      <div class="topbar-start-group">
+    <header class="topbar">
+      <button
+        class="hamburger-btn"
+        id="hamburger-btn"
+        onClick=${onToggleSidebar}
+        aria-label="Toggle menu"
+      >
+        <span></span><span></span><span></span>
+      </button>
+
+      <div class="tb-greeting">
+        <h1 class="tb-welcome">${firstName ? 'Welcome back, ' + firstName + '!' : 'Welcome back!'} <span class="tb-wave" aria-hidden="true">👋</span></h1>
+        <p class="tb-sub">${name ? "Here's what's happening with " + name : "Here's what's happening with your project"}</p>
+      </div>
+
+      <div class="tb-actions">
         <button
-          class="hamburger-btn"
-          id="hamburger-btn"
-          onClick=${onToggleSidebar}
-          aria-label="Toggle menu"
+          class=${'tb-synced' + (refreshing ? ' tb-synced--busy' : '')}
+          onClick=${onRefresh}
+          title="Click to refresh"
         >
-          <span></span><span></span><span></span>
+          <span class="tb-dot"></span>
+          ${refreshing ? 'Syncing…' : 'Auto-synced ' + (updatedAgo || 'just now')}
+        </button>
+
+        <${BlockedBell} />
+
+        <button class="tb-btn tb-btn--primary" type="button" onClick=${askRcode} title="Ask rcode for the next action">
+          <${Icon} name="brain" size=${15} /> Ask rcode
+        </button>
+
+        <button class="tb-btn tb-btn--share" type="button" onClick=${shareDashboard} title="Copy dashboard link">
+          <${Icon} name="link" size=${15} /> Share
+        </button>
+
+        <button
+          class="tb-btn tb-btn--icon"
+          type="button"
+          onClick=${onToggleTheme}
+          title=${'More — switch to ' + (themeLabel === 'light' ? 'dark' : 'light') + ' theme'}
+          aria-label="More options"
+        >
+          <span class="tb-kebab">⋯</span>
         </button>
-        <div class="brand">
-          <div class="icon"><${Icon} name="building" size=${16} cls="brand-icon"/></div>
-          <div>
-            <h1>Majlis — The Council</h1>
-            <div class="arabic">مجلس · ${projectName || ''}</div>
-          </div>
-        </div>
-      </div>
-      <div class="header-actions">
-        <span class="live" id="live-dot" title="Live"
-          style=${refreshing ? 'animation-duration:0.7s;background:var(--accent-blue);' : ''}></span>
-        <span id="updated-ago" class="updated-ago">
-          ${refreshing ? '⟳ syncing…' : (updatedAgo || 'just now')}
-        </span>
-        <button class="header-btn" id="refresh-btn" onClick=${onRefresh}>↺ Refresh</button>
-        <!-- icon shows TARGET state (not current): dark→sun means "click to go light"; light→moon means "click to go dark" -->
-        <button class="header-btn" id="theme-btn" onClick=${onToggleTheme} title="Toggle theme"><${Icon} name=${themeLabel === 'light' ? 'moon' : 'sun'} size=${14}/></button>
-        <button class="header-btn" onClick=${() => {
-          navigator.clipboard.writeText(location.href);
-          // Show a toast if available
-          const toast = document.getElementById('toast');
-          if (toast) { toast.textContent = 'URL copied!'; toast.classList.add('show'); setTimeout(() => toast.classList.remove('show'), 2500); }
-        }} title="Copy URL">⎘ Link</button>
       </div>
     </header>
   `;

package/server/lib/html/client/components/dashboard/Blockers.js

@@ -0,0 +1,57 @@
+/**
+ * Blockers — Overview redesign, Row 2 Card 3 (Blockers list by severity).
+ *
+ * Reads `blockers[{ title, desc, severity }]` from the store (severity one of
+ * high | medium | low). Each row: warning icon + bold title, a right-aligned
+ * severity pill (High = red, Medium = amber, Low = gray), and a muted one-line
+ * description below. "View all" sits top-right in the card header.
+ * An empty array is the real, good state — rendered as "No blockers 🎉",
+ * never substituted with sample data.
+ * See .planning/campaign/DATA-CONTRACT.md. Reads store only — no fetch.
+ */
+
+import { html } from '../../preact.js';
+import { useStore } from '../../store.js';
+import { rowLink } from '../../util.js';
+
+// Severity → pill label (lowercase enum to human-facing label).
+const SEV_LABEL = { high: 'High', medium: 'Medium', low: 'Low' };
+
+export function Blockers() {
+  const S = useStore();
+  const blockers = Array.isArray(S.blockers) ? S.blockers : [];
+
+  return html`
+    <section class="dash-card">
+      <div class="bk-head">
+        <p class="dash-card-title">Blockers</p>
+        <button class="bk-viewall" type="button"
+          onClick=${() => { location.hash = 'tasks'; }}>View all</button>
+      </div>
+      ${blockers.length === 0
+        ? html`
+          <div class="dash-empty">
+            <span class="dash-empty-emoji" aria-hidden="true">🎉</span>
+            <span>No blockers</span>
+          </div>
+        `
+        : html`
+          <ul class="bk-list">
+            ${blockers.map((b) => {
+              const sev = SEV_LABEL[b.severity] ? b.severity : 'low';
+              return html`
+                <li class="bk-row ovr-link" key=${b.title} ...${rowLink('tasks')}>
+                  <span class=${'bk-icon bk-sev-' + sev} aria-hidden="true">⚠</span>
+                  <div class="bk-body">
+                    <p class="bk-title">${b.title}</p>
+                    <p class="bk-desc">${b.desc}</p>
+                  </div>
+                  <span class=${'bk-pill bk-sev-' + sev}>${SEV_LABEL[sev]}</span>
+                </li>
+              `;
+            })}
+          </ul>
+        `}
+    </section>
+  `;
+}

package/server/lib/html/client/components/dashboard/CompletedTasks.js

@@ -0,0 +1,47 @@
+/**
+ * CompletedTasks — Overview redesign, Row 2 Card 1.
+ *
+ * "Completed Tasks" card with a "View all" link top-right and a list of rows,
+ * each = green check icon + task title + right-aligned date.
+ *
+ * Reads `tasks.completed[{ title, date }]` from the store. Pure — never fetches.
+ * An absent or empty slice renders an honest "No completed tasks yet" state —
+ * never sample data. See .planning/campaign/DATA-CONTRACT.md.
+ */
+
+import { html } from '../../preact.js';
+import { useStore } from '../../store.js';
+import { humanDate } from '../../util.js';
+
+export function CompletedTasks() {
+  const S = useStore();
+  const items = (S.tasks && Array.isArray(S.tasks.completed)) ? S.tasks.completed : [];
+
+  return html`
+    <section class="dash-card ct-card">
+      <div class="ct-head">
+        <p class="dash-card-title">Completed Tasks</p>
+        <button class="ct-viewall" onClick=${() => { location.hash = 'tasks'; }}>
+          View all
+        </button>
+      </div>
+      ${items.length === 0
+        ? html`<p class="dash-card-sub">No completed tasks yet</p>`
+        : html`
+          <ul class="ct-list">
+            ${items.map((t, i) => html`
+              <li class="ct-row" key=${t.title + i}>
+                <svg class="ct-check" width="16" height="16" viewBox="0 0 24 24"
+                  fill="none" stroke="currentColor" stroke-width="2.5"
+                  stroke-linecap="round" stroke-linejoin="round" aria-hidden="true">
+                  <polyline points="20 6 9 17 4 12"/>
+                </svg>
+                <span class="ct-title">${t.title}</span>
+                <span class="ct-date">${humanDate(t.date)}</span>
+              </li>
+            `)}
+          </ul>
+        `}
+    </section>
+  `;
+}