From ebac9b9c7b8d28c97b2e4b09e8dee374361c8392 Mon Sep 17 00:00:00 2001
From: widal001 <billy.daly@agile6.com>
Date: Wed, 25 Mar 2026 01:31:58 -0400
Subject: [PATCH 1/6] ci: Removes cleanup Not necessary with PR previews

---
 .github/workflows/preview-cleanup.yml | 28 ---------------------------
 1 file changed, 28 deletions(-)
 delete mode 100644 .github/workflows/preview-cleanup.yml

diff --git a/.github/workflows/preview-cleanup.yml b/.github/workflows/preview-cleanup.yml
deleted file mode 100644
index 6c84822..0000000
--- a/.github/workflows/preview-cleanup.yml
+++ /dev/null
@@ -1,28 +0,0 @@
-name: Preview Cleanup
-
-on:
-  pull_request:
-    types: [closed]
-
-jobs:
-  cleanup:
-    runs-on: ubuntu-latest
-    steps:
-      - uses: actions/checkout@v6
-
-      - uses: pnpm/action-setup@v5
-        with:
-          version: 10
-
-      - uses: actions/setup-node@v6
-        with:
-          node-version: 22
-          cache: pnpm
-
-      - run: pnpm install --frozen-lockfile
-
-      - name: Delete preview alias
-        run: pnpm exec wrangler versions delete-alias pr-${{ github.event.pull_request.number }}
-        env:
-          CLOUDFLARE_API_TOKEN: ${{ secrets.CLOUDFLARE_API_TOKEN }}
-          CLOUDFLARE_ACCOUNT_ID: ${{ secrets.CLOUDFLARE_ACCOUNT_ID }}

From 8d76f6263cd9889cd342dd5ee369a3730649daed Mon Sep 17 00:00:00 2001
From: widal001 <billy.daly@agile6.com>
Date: Wed, 25 Mar 2026 01:32:09 -0400
Subject: [PATCH 2/6] fix: Repo filter

---
 src/lib/utils/filters.spec.ts | 6 ++++++
 src/lib/utils/filters.ts      | 3 ++-
 2 files changed, 8 insertions(+), 1 deletion(-)

diff --git a/src/lib/utils/filters.spec.ts b/src/lib/utils/filters.spec.ts
index 2405a67..13b4c0e 100644
--- a/src/lib/utils/filters.spec.ts
+++ b/src/lib/utils/filters.spec.ts
@@ -79,6 +79,12 @@ describe('filterByRepos', () => {
 	it('returns empty for no match', () => {
 		expect(filterByRepos(items, ['org/missing'])).toHaveLength(0);
 	});
+
+	it('matches case-insensitively', () => {
+		const result = filterByRepos(items, ['Org/Alpha']);
+		expect(result).toHaveLength(1);
+		expect(result[0].id).toBe('1');
+	});
 });
 
 describe('filterByLabels', () => {
diff --git a/src/lib/utils/filters.ts b/src/lib/utils/filters.ts
index 6c38d5e..c6fcfc5 100644
--- a/src/lib/utils/filters.ts
+++ b/src/lib/utils/filters.ts
@@ -21,7 +21,8 @@ export function filterByDateRange(
 
 export function filterByRepos(items: ActivityItem[], repos: string[]): ActivityItem[] {
 	if (repos.length === 0) return items;
-	return items.filter((i) => repos.includes(i.repo));
+	const lower = repos.map((r) => r.toLowerCase());
+	return items.filter((i) => lower.includes(i.repo.toLowerCase()));
 }
 
 export function filterByLabels(items: ActivityItem[], labels: string[]): ActivityItem[] {

From 3c4f22a1ab90f3a46f243e419e429007c9e49885 Mon Sep 17 00:00:00 2001
From: widal001 <billy.daly@agile6.com>
Date: Wed, 25 Mar 2026 01:32:22 -0400
Subject: [PATCH 3/6] build: Adds .dev.vars to .gitignore

---
 .gitignore | 1 +
 1 file changed, 1 insertion(+)

diff --git a/.gitignore b/.gitignore
index 3b462cb..c2044c0 100644
--- a/.gitignore
+++ b/.gitignore
@@ -17,6 +17,7 @@ Thumbs.db
 .env.*
 !.env.example
 !.env.test
+.dev.vars
 
 # Vite
 vite.config.js.timestamp-*

From be930dc137ad18b232fd034d849503e11cb326d0 Mon Sep 17 00:00:00 2001
From: widal001 <billy.daly@agile6.com>
Date: Wed, 25 Mar 2026 08:52:10 -0400
Subject: [PATCH 4/6] feat: Adds bar chart and multi-select for activity types

---
 src/lib/components/ActivityBarChart.svelte    | 345 ++++++++++++++++++
 src/lib/components/ActivityTabs.svelte        | 141 ++++---
 .../components/toolbar/FilterStatus.svelte    |   7 +-
 src/lib/server/github.ts                      |   2 +-
 src/lib/stores/activity-filter-store.spec.ts  |   8 +-
 src/lib/stores/activity-filter-store.ts       |  37 +-
 src/lib/stores/dashboard-store.spec.ts        |   4 +-
 src/lib/stores/dashboard-store.ts             |   6 +-
 src/lib/types.ts                              |  16 +-
 src/lib/utils/export.spec.ts                  |   4 +-
 src/lib/utils/export.ts                       |   4 +-
 src/lib/utils/filters.spec.ts                 |  15 +-
 src/lib/utils/filters.ts                      |   9 +-
 src/routes/results/+page.svelte               |  45 ++-
 14 files changed, 499 insertions(+), 144 deletions(-)
 create mode 100644 src/lib/components/ActivityBarChart.svelte

diff --git a/src/lib/components/ActivityBarChart.svelte b/src/lib/components/ActivityBarChart.svelte
new file mode 100644
index 0000000..9d44ca4
--- /dev/null
+++ b/src/lib/components/ActivityBarChart.svelte
@@ -0,0 +1,345 @@
+<script lang="ts">
+	import type { ActivityItem, ActivityType } from '$lib/types';
+	import {
+		ACTIVITY_TYPE_SHORT_LABELS,
+		ACTIVITY_TYPE_CATEGORY,
+		ACTIVITY_CATEGORY_LABELS,
+		ACTIVITY_TYPE_LABELS
+	} from '$lib/types';
+	import type { ActivityCategory } from '$lib/types';
+
+	interface Props {
+		items: ActivityItem[];
+		allItems: ActivityItem[];
+		repos: string[];
+	}
+
+	let { items, allItems, repos }: Props = $props();
+
+	// Green scale for Issues (light → dark), Blue scale for PRs (light → dark)
+	const TYPE_COLORS: Record<ActivityType, string> = {
+		issues_opened: '#aff5b4',
+		issue_comments: '#3fb950',
+		issues_closed: '#196c2e',
+		prs_opened: '#b6d9ff',
+		pr_reviews: '#388bfd',
+		prs_merged: '#1158c7'
+	};
+
+	// Segment order: opened, commented, closed for issues; opened, reviewed, merged for PRs
+	const SEGMENT_ORDER: ActivityType[] = [
+		'issues_opened',
+		'issue_comments',
+		'issues_closed',
+		'prs_opened',
+		'pr_reviews',
+		'prs_merged'
+	];
+
+	interface RepoBar {
+		repo: string;
+		label: string;
+		total: number;
+		segments: { type: ActivityType; count: number; width: number }[];
+	}
+
+	// Tooltip state
+	let tooltip = $state<{ repo: string; line: string; x: number; y: number } | null>(null);
+
+	function showSegmentTooltip(repo: string, type: ActivityType, count: number, event: MouseEvent) {
+		tooltip = {
+			repo,
+			line: `${ACTIVITY_TYPE_LABELS[type]}: ${count}`,
+			x: event.clientX,
+			y: event.clientY - 8
+		};
+	}
+
+	function moveTooltip(event: MouseEvent) {
+		if (tooltip) {
+			tooltip = { ...tooltip, x: event.clientX, y: event.clientY - 8 };
+		}
+	}
+
+	function hideTooltip() {
+		tooltip = null;
+	}
+
+	// Fixed scale based on ALL items (not filtered), so bars grow as types are selected
+	let maxCount = $derived(
+		Math.max(
+			1,
+			...repos.map((r) => {
+				const lower = r.toLowerCase();
+				return allItems.filter((i) => i.repo.toLowerCase() === lower).length;
+			})
+		)
+	);
+
+	// Compute nice tick marks for the scale
+	let scaleTicks = $derived.by((): number[] => {
+		if (maxCount <= 5) return Array.from({ length: maxCount + 1 }, (_, i) => i);
+		const step = Math.ceil(maxCount / 4);
+		const rounded = Math.ceil(step / 5) * 5;
+		const ticks: number[] = [0];
+		let v = rounded;
+		while (v < maxCount) {
+			ticks.push(v);
+			v += rounded;
+		}
+		ticks.push(maxCount);
+		return ticks;
+	});
+
+	let bars = $derived.by((): RepoBar[] => {
+		return repos.map((repo) => {
+			const lower = repo.toLowerCase();
+			const repoItems = items.filter((i) => i.repo.toLowerCase() === lower);
+			const total = repoItems.length;
+
+			const segments: RepoBar['segments'] = [];
+			for (const type of SEGMENT_ORDER) {
+				const count = repoItems.filter((i) => i.type === type).length;
+				if (count > 0) {
+					const width = (count / maxCount) * 100;
+					segments.push({ type, count, width });
+				}
+			}
+
+			return { repo, label: repo, total, segments };
+		});
+	});
+
+	// Group active types by category for the legend
+	const LEGEND_ORDER: ActivityCategory[] = ['issues', 'pull_requests'];
+
+	let legendGroups = $derived.by(() => {
+		const activeTypes = SEGMENT_ORDER.filter((type) => items.some((i) => i.type === type));
+		return LEGEND_ORDER.map((cat) => ({
+			label: ACTIVITY_CATEGORY_LABELS[cat],
+			types: activeTypes.filter((t) => ACTIVITY_TYPE_CATEGORY[t] === cat)
+		})).filter((g) => g.types.length > 0);
+	});
+</script>
+
+{#if allItems.length > 0}
+	<div class="bar-chart">
+		<div class="chart-area">
+			<div class="bars">
+				{#each bars as bar (bar.repo)}
+					<div class="bar-row">
+						<span class="bar-label" title={bar.repo}>{bar.label}</span>
+						<div
+							class="bar-track"
+							role="img"
+							aria-label="{bar.repo}: {bar.total} activities"
+							onmouseleave={hideTooltip}
+						>
+							{#each bar.segments as seg (seg.type)}
+								<div
+									class="bar-segment"
+									role="presentation"
+									style="width: {seg.width}%; background: {TYPE_COLORS[seg.type]};"
+									onmouseenter={(e) => showSegmentTooltip(bar.repo, seg.type, seg.count, e)}
+									onmousemove={moveTooltip}
+								></div>
+							{/each}
+						</div>
+						<span class="bar-count">{bar.total}</span>
+					</div>
+				{/each}
+			</div>
+			<div class="scale">
+				{#each scaleTicks as tick (tick)}
+					<span class="tick" style="left: {(tick / maxCount) * 100}%;">{tick}</span>
+				{/each}
+			</div>
+		</div>
+		<div class="legend">
+			{#each legendGroups as group (group.label)}
+				<div class="legend-group">
+					<span class="legend-group-label">{group.label}</span>
+					<div class="legend-group-items">
+						{#each group.types as type (type)}
+							<span class="legend-item">
+								<span class="legend-swatch" style="background: {TYPE_COLORS[type]};"></span>
+								{ACTIVITY_TYPE_SHORT_LABELS[type]}
+							</span>
+						{/each}
+					</div>
+				</div>
+			{/each}
+		</div>
+	</div>
+{/if}
+
+{#if tooltip}
+	<div class="tooltip" style="left: {tooltip.x}px; top: {tooltip.y}px;">
+		<div class="tooltip-repo">{tooltip.repo}</div>
+		<div class="tooltip-detail">{tooltip.line}</div>
+	</div>
+{/if}
+
+<style>
+	.bar-chart {
+		display: flex;
+		flex-direction: column;
+		gap: 12px;
+	}
+
+	.chart-area {
+		display: flex;
+		flex-direction: column;
+	}
+
+	.bars {
+		display: flex;
+		flex-direction: column;
+		gap: 6px;
+	}
+
+	.bar-row {
+		display: flex;
+		align-items: center;
+		gap: 8px;
+	}
+
+	.bar-label {
+		flex-shrink: 0;
+		width: 160px;
+		font-size: 12px;
+		font-family: var(--font-mono);
+		color: var(--color-text-secondary);
+		text-align: right;
+		overflow: hidden;
+		text-overflow: ellipsis;
+		white-space: nowrap;
+	}
+
+	.bar-track {
+		flex: 1;
+		display: flex;
+		height: 18px;
+		background: var(--color-bg-secondary);
+		border-radius: var(--radius-sm);
+		overflow: hidden;
+		cursor: default;
+	}
+
+	.bar-segment {
+		height: 100%;
+		transition: width 0.2s ease;
+	}
+
+	.bar-segment:first-child {
+		border-radius: var(--radius-sm) 0 0 var(--radius-sm);
+	}
+
+	.bar-segment:last-child {
+		border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
+	}
+
+	.bar-segment:only-child {
+		border-radius: var(--radius-sm);
+	}
+
+	.bar-count {
+		flex-shrink: 0;
+		width: 32px;
+		font-size: 12px;
+		color: var(--color-text-secondary);
+		font-weight: 600;
+	}
+
+	/* Scale axis */
+	.scale {
+		position: relative;
+		height: 20px;
+		margin-left: 168px; /* label width + gap */
+		margin-right: 40px; /* count width + gap */
+		border-top: 1px solid var(--color-border);
+	}
+
+	.tick {
+		position: absolute;
+		top: 4px;
+		transform: translateX(-50%);
+		font-size: 10px;
+		color: var(--color-text-secondary);
+	}
+
+	/* Tooltip */
+	.tooltip {
+		position: fixed;
+		pointer-events: none;
+		transform: translate(-50%, -100%);
+		background: var(--color-text);
+		color: var(--color-bg);
+		font-size: 12px;
+		padding: 6px 10px;
+		border-radius: var(--radius-sm);
+		white-space: nowrap;
+		z-index: 10;
+		line-height: 1.4;
+	}
+
+	.tooltip-repo {
+		font-weight: 600;
+	}
+
+	.tooltip-detail {
+		opacity: 0.85;
+	}
+
+	/* Legend */
+	.legend {
+		display: flex;
+		flex-wrap: wrap;
+		gap: 16px;
+	}
+
+	.legend-group {
+		display: flex;
+		flex-direction: column;
+		gap: 4px;
+	}
+
+	.legend-group-label {
+		font-size: 10px;
+		font-weight: 600;
+		color: var(--color-text-secondary);
+		text-transform: uppercase;
+		letter-spacing: 0.03em;
+	}
+
+	.legend-group-items {
+		display: flex;
+		gap: 8px;
+	}
+
+	.legend-item {
+		display: inline-flex;
+		align-items: center;
+		gap: 4px;
+		font-size: 11px;
+		color: var(--color-text-secondary);
+	}
+
+	.legend-swatch {
+		width: 10px;
+		height: 10px;
+		border-radius: 2px;
+		flex-shrink: 0;
+	}
+
+	@media (max-width: 640px) {
+		.bar-label {
+			width: 100px;
+			font-size: 11px;
+		}
+
+		.scale {
+			margin-left: 108px;
+		}
+	}
+</style>
diff --git a/src/lib/components/ActivityTabs.svelte b/src/lib/components/ActivityTabs.svelte
index 933e76f..fe4ae18 100644
--- a/src/lib/components/ActivityTabs.svelte
+++ b/src/lib/components/ActivityTabs.svelte
@@ -1,20 +1,22 @@
 <script lang="ts">
 	import type { ActivityType } from '$lib/types';
+	import { ACTIVITY_TYPE_SHORT_LABELS, ACTIVITY_TYPE_LABELS } from '$lib/types';
+	import { useStore } from '$lib/stores/use-store.svelte';
+	import { selectedTypes } from '$lib/stores/dashboard-store';
+	import { toggleActivityType, clearActivityTypes } from '$lib/stores/activity-filter-store';
 
 	interface Props {
-		activeTab: 'all' | ActivityType;
 		countsByType: Record<ActivityType, number>;
 		totalCount: number;
-		onchange: (tab: 'all' | ActivityType) => void;
 	}
 
-	let { activeTab, countsByType, totalCount, onchange }: Props = $props();
+	let { countsByType, totalCount }: Props = $props();
 
-	type TabKey = 'all' | ActivityType;
+	const types = useStore(selectedTypes);
 
 	interface TabGroup {
 		label: string | null;
-		tabs: { key: TabKey; label: string; fullLabel: string }[];
+		tabs: { key: ActivityType | 'all'; label: string; fullLabel: string }[];
 	}
 
 	const groups: TabGroup[] = [
@@ -25,34 +27,65 @@
 		{
 			label: 'Issues',
 			tabs: [
-				{ key: 'issues_opened', label: 'Opened', fullLabel: 'Issues Opened' },
-				{ key: 'issue_comments', label: 'Comments', fullLabel: 'Issue Comments' },
-				{ key: 'issues_closed', label: 'Closed', fullLabel: 'Issues Closed' }
+				{
+					key: 'issues_opened' as const,
+					label: ACTIVITY_TYPE_SHORT_LABELS.issues_opened,
+					fullLabel: ACTIVITY_TYPE_LABELS.issues_opened
+				},
+				{
+					key: 'issue_comments' as const,
+					label: ACTIVITY_TYPE_SHORT_LABELS.issue_comments,
+					fullLabel: ACTIVITY_TYPE_LABELS.issue_comments
+				},
+				{
+					key: 'issues_closed' as const,
+					label: ACTIVITY_TYPE_SHORT_LABELS.issues_closed,
+					fullLabel: ACTIVITY_TYPE_LABELS.issues_closed
+				}
 			]
 		},
 		{
 			label: 'Pull Requests',
 			tabs: [
-				{ key: 'prs_opened', label: 'Opened', fullLabel: 'PRs Opened' },
-				{ key: 'pr_reviews', label: 'Reviews', fullLabel: 'PR Reviews' },
-				{ key: 'prs_merged', label: 'Merged', fullLabel: 'PRs Merged' }
+				{
+					key: 'prs_opened' as const,
+					label: ACTIVITY_TYPE_SHORT_LABELS.prs_opened,
+					fullLabel: ACTIVITY_TYPE_LABELS.prs_opened
+				},
+				{
+					key: 'pr_reviews' as const,
+					label: ACTIVITY_TYPE_SHORT_LABELS.pr_reviews,
+					fullLabel: ACTIVITY_TYPE_LABELS.pr_reviews
+				},
+				{
+					key: 'prs_merged' as const,
+					label: ACTIVITY_TYPE_SHORT_LABELS.prs_merged,
+					fullLabel: ACTIVITY_TYPE_LABELS.prs_merged
+				}
 			]
 		}
 	];
 
-	function getCount(key: TabKey): number {
+	function getCount(key: ActivityType | 'all'): number {
 		if (key === 'all') return totalCount;
 		return countsByType[key] || 0;
 	}
 
-	function handleSelectChange(e: Event) {
-		const value = (e.target as HTMLSelectElement).value;
-		onchange(value as TabKey);
+	function isActive(key: ActivityType | 'all'): boolean {
+		if (key === 'all') return types.value.length === 0;
+		return types.value.includes(key);
+	}
+
+	function handleClick(key: ActivityType | 'all') {
+		if (key === 'all') {
+			clearActivityTypes();
+		} else {
+			toggleActivityType(key);
+		}
 	}
 </script>
 
-<!-- Desktop: grouped pills -->
-<nav class="tabs-desktop" aria-label="Activity type filter">
+<nav class="tabs" aria-label="Activity type filter">
 	{#each groups as group (group.label ?? 'all')}
 		<div class="group" role="group" aria-label={group.label ?? 'All'}>
 			{#if group.label}
@@ -62,11 +95,11 @@
 				{#each group.tabs as tab (tab.key)}
 					<button
 						class="pill"
-						class:active={activeTab === tab.key}
-						onclick={() => onchange(tab.key)}
+						class:active={isActive(tab.key)}
+						onclick={() => handleClick(tab.key)}
 						type="button"
 						aria-label="{tab.fullLabel} ({getCount(tab.key)})"
-						aria-pressed={activeTab === tab.key}
+						aria-pressed={isActive(tab.key)}
 					>
 						{tab.label}
 						<span class="count" aria-hidden="true">{getCount(tab.key)}</span>
@@ -77,30 +110,8 @@
 	{/each}
 </nav>
 
-<!-- Mobile: grouped dropdown + count badge -->
-<div class="tabs-mobile">
-	<select value={activeTab} onchange={handleSelectChange} aria-label="Activity type filter">
-		{#each groups as group (group.label ?? 'all')}
-			{#if group.label}
-				<optgroup label={group.label}>
-					{#each group.tabs as tab (tab.key)}
-						<option value={tab.key}>{tab.fullLabel} ({getCount(tab.key)})</option>
-					{/each}
-				</optgroup>
-			{:else}
-				{#each group.tabs as tab (tab.key)}
-					<option value={tab.key}>{tab.fullLabel} ({getCount(tab.key)})</option>
-				{/each}
-			{/if}
-		{/each}
-	</select>
-	<span class="mobile-count" aria-live="polite" aria-label="Count for selected filter">
-		{getCount(activeTab)}
-	</span>
-</div>
-
 <style>
-	.tabs-desktop {
+	.tabs {
 		display: flex;
 		gap: 16px;
 		align-items: flex-end;
@@ -127,6 +138,7 @@
 	.group-pills {
 		display: flex;
 		gap: 4px;
+		flex-wrap: wrap;
 	}
 
 	.pill {
@@ -165,42 +177,19 @@
 		background: color-mix(in srgb, var(--color-link) 15%, transparent);
 	}
 
-	/* Mobile dropdown */
-	.tabs-mobile {
-		display: none;
-		align-items: center;
-		gap: 10px;
-		padding-bottom: 12px;
-		border-bottom: 1px solid var(--color-border);
-	}
-
-	.tabs-mobile select {
-		flex: 1;
-		padding: 6px 10px;
-		border: 1px solid var(--color-border);
-		border-radius: var(--radius-md);
-		font-size: 14px;
-		background: var(--color-bg);
-		color: var(--color-text);
-	}
-
-	.mobile-count {
-		font-size: 13px;
-		font-weight: 700;
-		padding: 3px 10px;
-		background: color-mix(in srgb, var(--color-link) 12%, transparent);
-		color: var(--color-link);
-		border-radius: 10px;
-		white-space: nowrap;
-	}
-
 	@media (max-width: 640px) {
-		.tabs-desktop {
-			display: none;
+		.tabs {
+			gap: 12px;
+		}
+
+		.pill {
+			padding: 4px 10px;
+			font-size: 12px;
 		}
 
-		.tabs-mobile {
-			display: flex;
+		.count {
+			font-size: 10px;
+			padding: 1px 5px;
 		}
 	}
 </style>
diff --git a/src/lib/components/toolbar/FilterStatus.svelte b/src/lib/components/toolbar/FilterStatus.svelte
index f6c3620..a859503 100644
--- a/src/lib/components/toolbar/FilterStatus.svelte
+++ b/src/lib/components/toolbar/FilterStatus.svelte
@@ -3,7 +3,7 @@
 	import { filteredItems, hasActiveFilters, clearFilters } from '$lib/stores/activity-filter-store';
 	import {
 		dashboard as dashboardStore,
-		activeTab as activeTabStore
+		selectedTypes as selectedTypesStore
 	} from '$lib/stores/dashboard-store';
 	import { searchQuery, selectedRepos, selectedLabels } from '$lib/stores/activity-filter-store';
 	import { effectiveDateFilter } from '$lib/stores/date-filter';
@@ -14,14 +14,13 @@
 	const items = useStore(filteredItems);
 	const active = useStore(hasActiveFilters);
 	const dashboard = useStore(dashboardStore);
-	const activeTab = useStore(activeTabStore);
 
 	function handleExport() {
 		const dash = dashboard.value;
 		if (!dash) return;
 
 		const dateFilter = effectiveDateFilter.get();
-		const tab = activeTab.value;
+		const types = selectedTypesStore.get();
 
 		const meta: ExportMetadata = {
 			user: dash.query.user,
@@ -30,7 +29,7 @@
 			to: dash.query.to,
 			types: dash.query.types,
 			exportedAt: new Date().toISOString(),
-			activeTab: tab === 'all' ? 'All Activity' : ACTIVITY_TYPE_LABELS[tab],
+			selectedTypes: types.map((t) => ACTIVITY_TYPE_LABELS[t]),
 			filters: {
 				searchQuery: searchQuery.get(),
 				selectedRepos: selectedRepos.get(),
diff --git a/src/lib/server/github.ts b/src/lib/server/github.ts
index 6cf72ce..e346de2 100644
--- a/src/lib/server/github.ts
+++ b/src/lib/server/github.ts
@@ -327,7 +327,7 @@ async function fetchPrReviews(
 						title: `${formatReviewState(review.state)} on #${pr.number}: ${pr.title}`,
 						repo,
 						date: reviewDate,
-						url: review.html_url,
+						url: review.html_url || pr.html_url,
 						state: pr.pull_request?.merged_at ? 'merged' : pr.state,
 						labels: pr.labels.map((l) => (typeof l === 'string' ? l : l.name || '')),
 						number: pr.number,
diff --git a/src/lib/stores/activity-filter-store.spec.ts b/src/lib/stores/activity-filter-store.spec.ts
index 559aced..d9d0de5 100644
--- a/src/lib/stores/activity-filter-store.spec.ts
+++ b/src/lib/stores/activity-filter-store.spec.ts
@@ -1,6 +1,6 @@
 import { describe, it, expect, beforeEach } from 'vitest';
 import type { DashboardData } from '$lib/types';
-import { dashboard, activeTab } from './dashboard-store';
+import { dashboard, selectedTypes } from './dashboard-store';
 import { filterFrom, filterTo } from './date-filter';
 import {
 	searchQuery,
@@ -65,7 +65,7 @@ describe('activity-filter-store', () => {
 	beforeEach(() => {
 		// Reset all atoms
 		dashboard.set(null);
-		activeTab.set('all');
+		selectedTypes.set([]);
 		searchQuery.set('');
 		selectedRepos.set([]);
 		selectedLabels.set([]);
@@ -86,7 +86,7 @@ describe('activity-filter-store', () => {
 
 	it('filters by activity type tab', () => {
 		dashboard.set(mockDashboard);
-		activeTab.set('prs_opened');
+		selectedTypes.set(['prs_opened']);
 		expect(filteredItems.get()).toHaveLength(1);
 		expect(filteredItems.get()[0].id).toBe('2');
 	});
@@ -122,7 +122,7 @@ describe('activity-filter-store', () => {
 
 	it('chains multiple filters', () => {
 		dashboard.set(mockDashboard);
-		activeTab.set('issues_opened');
+		selectedTypes.set(['issues_opened']);
 		selectedRepos.set(['org/alpha']);
 		searchQuery.set('docs');
 		expect(filteredItems.get()).toHaveLength(1);
diff --git a/src/lib/stores/activity-filter-store.ts b/src/lib/stores/activity-filter-store.ts
index edbc85b..49affcd 100644
--- a/src/lib/stores/activity-filter-store.ts
+++ b/src/lib/stores/activity-filter-store.ts
@@ -8,7 +8,7 @@ import {
 	filterByActivityType,
 	groupByCategory
 } from '$lib/utils/filters';
-import { dashboard, activeTab } from './dashboard-store';
+import { dashboard, selectedTypes } from './dashboard-store';
 import { effectiveDateFilter, clearDateFilter } from './date-filter';
 
 const PAGE_SIZE = 100;
@@ -27,19 +27,19 @@ export const collapsedSections = atom<Record<string, boolean>>({});
 // Computed stores
 // =======================================================================
 
-// Computed: items filtered only by activity type tab (for heatmap — no date/repo/label/search)
-export const tabFilteredItems = computed([dashboard, activeTab], (dash, tab) => {
+// Computed: items filtered only by activity types (for heatmap — no date/repo/label/search)
+export const typeFilteredItems = computed([dashboard, selectedTypes], (dash, types) => {
 	if (!dash) return [];
-	return filterByActivityType(dash.items, tab);
+	return filterByActivityType(dash.items, types);
 });
 
 // Computed: filtered items (chains all filters)
 export const filteredItems = computed(
-	[dashboard, activeTab, effectiveDateFilter, selectedRepos, selectedLabels, searchQuery],
-	(dash, tab, dateFilter, repos, labels, query) => {
+	[dashboard, selectedTypes, effectiveDateFilter, selectedRepos, selectedLabels, searchQuery],
+	(dash, types, dateFilter, repos, labels, query) => {
 		if (!dash) return [];
 		let items: ActivityItem[] = dash.items;
-		items = filterByActivityType(items, tab);
+		items = filterByActivityType(items, types);
 		if (dateFilter) {
 			items = filterByDateRange(items, dateFilter.from, dateFilter.to);
 		}
@@ -95,6 +95,17 @@ export function toggleLabel(label: string) {
 	);
 }
 
+export function toggleActivityType(type: ActivityType) {
+	const current = selectedTypes.get();
+	selectedTypes.set(
+		current.includes(type) ? current.filter((t) => t !== type) : [...current, type]
+	);
+}
+
+export function clearActivityTypes() {
+	selectedTypes.set([]);
+}
+
 export function clearFilters() {
 	searchQuery.set('');
 	selectedRepos.set([]);
@@ -102,10 +113,6 @@ export function clearFilters() {
 	clearDateFilter();
 }
 
-export function setActiveTab(tab: 'all' | ActivityType) {
-	activeTab.set(tab);
-}
-
 export function toggleSection(category: string) {
 	const current = collapsedSections.get();
 	collapsedSections.set({ ...current, [category]: !current[category] });
@@ -130,7 +137,13 @@ function setupAutoReset() {
 	};
 
 	// Listen to filter changes, but skip the first emission
-	for (const store of [searchQuery, selectedRepos, selectedLabels, effectiveDateFilter]) {
+	for (const store of [
+		searchQuery,
+		selectedRepos,
+		selectedLabels,
+		selectedTypes,
+		effectiveDateFilter
+	]) {
 		let first = true;
 		store.listen(() => {
 			if (first) {
diff --git a/src/lib/stores/dashboard-store.spec.ts b/src/lib/stores/dashboard-store.spec.ts
index a79da39..4770e0c 100644
--- a/src/lib/stores/dashboard-store.spec.ts
+++ b/src/lib/stores/dashboard-store.spec.ts
@@ -7,7 +7,7 @@ import {
 	fromCache,
 	errors,
 	rateLimitInfo,
-	activeTab,
+	selectedTypes,
 	fetchDashboard,
 	resetDashboard
 } from './dashboard-store';
@@ -164,6 +164,6 @@ describe('dashboard-store', () => {
 		expect(fromCache.get()).toBe(false);
 		expect(errors.get()).toEqual([]);
 		expect(rateLimitInfo.get()).toBeUndefined();
-		expect(activeTab.get()).toBe('all');
+		expect(selectedTypes.get()).toEqual([]);
 	});
 });
diff --git a/src/lib/stores/dashboard-store.ts b/src/lib/stores/dashboard-store.ts
index b638ebb..dcfa889 100644
--- a/src/lib/stores/dashboard-store.ts
+++ b/src/lib/stores/dashboard-store.ts
@@ -19,7 +19,7 @@ export const loadError = atom<string | null>(null);
 export const fromCache = atom(false);
 export const errors = atom<FetchError[]>([]);
 export const rateLimitInfo = atom<GitHubRateLimitInfo | undefined>(undefined);
-export const activeTab = atom<'all' | ActivityType>('all');
+export const selectedTypes = atom<ActivityType[]>([]);
 
 // =======================================================================
 // Types
@@ -61,7 +61,7 @@ export async function fetchDashboard(
 
 	loading.set(true);
 	loadError.set(null);
-	activeTab.set('all');
+	selectedTypes.set([]);
 
 	const queryString = encodeQueryParams(params);
 	let url = `/api/activity?${queryString}`;
@@ -113,5 +113,5 @@ export function resetDashboard() {
 	fromCache.set(false);
 	errors.set([]);
 	rateLimitInfo.set(undefined);
-	activeTab.set('all');
+	selectedTypes.set([]);
 }
diff --git a/src/lib/types.ts b/src/lib/types.ts
index 169350b..e90535e 100644
--- a/src/lib/types.ts
+++ b/src/lib/types.ts
@@ -10,12 +10,12 @@ export const ACTIVITY_TYPES = [
 export type ActivityType = (typeof ACTIVITY_TYPES)[number];
 
 export const ACTIVITY_TYPE_LABELS: Record<ActivityType, string> = {
-	issues_opened: 'Issues Opened',
-	issues_closed: 'Issues Closed',
-	issue_comments: 'Issue Comments',
-	prs_opened: 'PRs Opened',
-	pr_reviews: 'PR Reviews',
-	prs_merged: 'PRs Merged'
+	issues_opened: 'Issues opened',
+	issues_closed: 'Issues closed',
+	issue_comments: 'Issue comments',
+	prs_opened: 'PRs created',
+	pr_reviews: 'PR reviews',
+	prs_merged: 'PRs merged'
 };
 
 export type ActivityCategory = 'issues' | 'pull_requests';
@@ -38,9 +38,9 @@ export const ACTIVITY_CATEGORY_LABELS: Record<ActivityCategory, string> = {
 export const ACTIVITY_TYPE_SHORT_LABELS: Record<ActivityType, string> = {
 	issues_opened: 'Opened',
 	issues_closed: 'Closed',
-	issue_comments: 'Comment',
+	issue_comments: 'Comments',
 	prs_opened: 'Opened',
-	pr_reviews: 'Review',
+	pr_reviews: 'Reviews',
 	prs_merged: 'Merged'
 };
 
diff --git a/src/lib/utils/export.spec.ts b/src/lib/utils/export.spec.ts
index 4e59a56..c621b3e 100644
--- a/src/lib/utils/export.spec.ts
+++ b/src/lib/utils/export.spec.ts
@@ -84,7 +84,7 @@ describe('buildMetadataRows', () => {
 		to: '2025-03-20',
 		types: ['issues_opened', 'prs_opened'],
 		exportedAt: '2025-03-20T12:00:00Z',
-		activeTab: 'All Activity',
+		selectedTypes: [],
 		filters: {
 			searchQuery: '',
 			selectedRepos: [],
@@ -108,7 +108,7 @@ describe('buildMetadataRows', () => {
 		expect(fields).toContain('Repos');
 		expect(fields).toContain('Date Range');
 		expect(fields).toContain('Activity Types');
-		expect(fields).toContain('Active Tab');
+		expect(fields).toContain('Selected Types');
 		expect(fields).toContain('Total Items');
 		expect(fields).toContain('Filtered Items');
 		expect(fields).toContain('Exported At');
diff --git a/src/lib/utils/export.ts b/src/lib/utils/export.ts
index 1a0a89a..dd6c0fd 100644
--- a/src/lib/utils/export.ts
+++ b/src/lib/utils/export.ts
@@ -13,7 +13,7 @@ export interface ExportMetadata {
 	to: string;
 	types: ActivityType[];
 	exportedAt: string;
-	activeTab: string;
+	selectedTypes: string[];
 	filters: {
 		searchQuery: string;
 		selectedRepos: string[];
@@ -68,7 +68,7 @@ export function buildMetadataRows(meta: ExportMetadata): { headers: string[]; ro
 		['Repos', meta.repos.join(', ')],
 		['Date Range', `${meta.from} to ${meta.to}`],
 		['Activity Types', meta.types.map((t) => ACTIVITY_TYPE_LABELS[t]).join(', ')],
-		['Active Tab', meta.activeTab],
+		['Selected Types', meta.selectedTypes.length > 0 ? meta.selectedTypes.join(', ') : '(all)'],
 		['Search Query', meta.filters.searchQuery || '(none)'],
 		[
 			'Filtered Repos',
diff --git a/src/lib/utils/filters.spec.ts b/src/lib/utils/filters.spec.ts
index 13b4c0e..8e9689c 100644
--- a/src/lib/utils/filters.spec.ts
+++ b/src/lib/utils/filters.spec.ts
@@ -161,18 +161,23 @@ describe('filterByActivityType', () => {
 		makeItem({ id: '3', type: 'issues_opened' })
 	];
 
-	it('returns all items for "all" tab', () => {
-		expect(filterByActivityType(items, 'all')).toHaveLength(3);
+	it('returns all items when types is empty (all)', () => {
+		expect(filterByActivityType(items, [])).toHaveLength(3);
 	});
 
-	it('filters to specific type', () => {
-		const result = filterByActivityType(items, 'prs_opened');
+	it('filters to a single type', () => {
+		const result = filterByActivityType(items, ['prs_opened']);
 		expect(result).toHaveLength(1);
 		expect(result[0].id).toBe('2');
 	});
 
+	it('filters to multiple types', () => {
+		const result = filterByActivityType(items, ['issues_opened', 'prs_opened']);
+		expect(result).toHaveLength(3);
+	});
+
 	it('returns empty for no match', () => {
-		expect(filterByActivityType(items, 'prs_merged')).toHaveLength(0);
+		expect(filterByActivityType(items, ['prs_merged'])).toHaveLength(0);
 	});
 });
 
diff --git a/src/lib/utils/filters.ts b/src/lib/utils/filters.ts
index c6fcfc5..11887bf 100644
--- a/src/lib/utils/filters.ts
+++ b/src/lib/utils/filters.ts
@@ -41,12 +41,9 @@ export function filterBySearch(items: ActivityItem[], query: string): ActivityIt
 	);
 }
 
-export function filterByActivityType(
-	items: ActivityItem[],
-	tab: 'all' | ActivityType
-): ActivityItem[] {
-	if (tab === 'all') return items;
-	return items.filter((i) => i.type === tab);
+export function filterByActivityType(items: ActivityItem[], types: ActivityType[]): ActivityItem[] {
+	if (types.length === 0) return items;
+	return items.filter((i) => types.includes(i.type));
 }
 
 // =======================================================================
diff --git a/src/routes/results/+page.svelte b/src/routes/results/+page.svelte
index d8b408b..9b8d9ed 100644
--- a/src/routes/results/+page.svelte
+++ b/src/routes/results/+page.svelte
@@ -1,5 +1,4 @@
 <script lang="ts">
-	import { ACTIVITY_TYPE_LABELS } from '$lib/types';
 	import {
 		buildHeatmapData,
 		computeSummaryStats,
@@ -8,6 +7,7 @@
 		parseQueryParams
 	} from '$lib/utils';
 	import { useStore } from '$lib/stores/use-store.svelte';
+	import { ACTIVITY_TYPE_LABELS } from '$lib/types';
 	import {
 		dashboard as dashboardStore,
 		loading as loadingStore,
@@ -15,7 +15,7 @@
 		fromCache as fromCacheStore,
 		errors as errorsStore,
 		rateLimitInfo as rateLimitInfoStore,
-		activeTab as activeTabStore,
+		selectedTypes as selectedTypesStore,
 		fetchDashboard,
 		resetDashboard
 	} from '$lib/stores/dashboard-store';
@@ -28,9 +28,10 @@
 		showCopyFeedback,
 		setStickyVisible
 	} from '$lib/stores/ui-store';
-	import { tabFilteredItems as tabFilteredItemsStore } from '$lib/stores/activity-filter-store';
+	import { typeFilteredItems as typeFilteredItemsStore } from '$lib/stores/activity-filter-store';
 	import ActivityHeatmap from '$lib/components/ActivityHeatmap.svelte';
 	import ActivityTabs from '$lib/components/ActivityTabs.svelte';
+	import ActivityBarChart from '$lib/components/ActivityBarChart.svelte';
 	import ActivityList from '$lib/components/ActivityList.svelte';
 	import SummaryStats from '$lib/components/SummaryStats.svelte';
 	import { goto } from '$app/navigation';
@@ -44,14 +45,20 @@
 	const fromCache = useStore(fromCacheStore);
 	const errors = useStore(errorsStore);
 	const rateLimitInfo = useStore(rateLimitInfoStore);
-	const activeTab = useStore(activeTabStore);
 	const menuOpen = useStore(menuOpenStore);
 	const copyFeedback = useStore(copyFeedbackStore);
 	const stickyVisible = useStore(stickyVisibleStore);
-	const tabFilteredItems = useStore(tabFilteredItemsStore);
+	const typeFilteredItems = useStore(typeFilteredItemsStore);
+	const selectedTypesVal = useStore(selectedTypesStore);
 
 	let headerRef = $state<HTMLElement | null>(null);
 
+	let activeTypesLabel = $derived(
+		selectedTypesVal.value.length === 0
+			? 'All Activity'
+			: selectedTypesVal.value.map((t) => ACTIVITY_TYPE_LABELS[t]).join(', ')
+	);
+
 	// Parse query from URL
 	let queryParams = $derived(parseQueryParams(page.url.searchParams));
 
@@ -79,11 +86,11 @@
 		});
 	});
 
-	// Derived from stores — heatmap and stats use tab-filtered items
+	// Derived from stores — heatmap and stats use type-filtered items
 	let heatmapEntries = $derived(
 		dashboard.value
 			? buildHeatmapData(
-					tabFilteredItems.value,
+					typeFilteredItems.value,
 					dashboard.value.query.from,
 					dashboard.value.query.to
 				)
@@ -92,10 +99,6 @@
 
 	let stats = $derived(dashboard.value ? computeSummaryStats(dashboard.value.items) : null);
 
-	let activeTabLabel = $derived(
-		activeTab.value === 'all' ? 'All Activity' : ACTIVITY_TYPE_LABELS[activeTab.value]
-	);
-
 	let newQueryUrl = $derived.by(() => {
 		if (!dashboard.value) return resolve('/');
 		const qs = encodeQueryParams(dashboard.value.query);
@@ -173,7 +176,7 @@
 					&middot;
 					{dashboard.value.query.from} &ndash; {dashboard.value.query.to}
 				</div>
-				<div class="sticky-tab">{activeTabLabel}</div>
+				<div class="sticky-types">{activeTypesLabel}</div>
 			</div>
 			<div class="sticky-actions-desktop">
 				<button class="btn btn-secondary btn-sm" onclick={handleRefresh}>Refresh</button>
@@ -265,15 +268,16 @@
 		<SummaryStats {stats} />
 
 		<section class="activity-section">
-			<ActivityTabs
-				activeTab={activeTab.value}
-				countsByType={stats.countsByType}
-				totalCount={stats.totalItems}
-				onchange={(tab) => activeTabStore.set(tab)}
-			/>
+			<ActivityTabs countsByType={stats.countsByType} totalCount={stats.totalItems} />
 
 			<ActivityHeatmap entries={heatmapEntries} />
 
+			<ActivityBarChart
+				items={typeFilteredItems.value}
+				allItems={dashboard.value.items}
+				repos={dashboard.value.query.repos}
+			/>
+
 			<ActivityList />
 		</section>
 	</main>
@@ -396,10 +400,13 @@
 		text-overflow: ellipsis;
 	}
 
-	.sticky-tab {
+	.sticky-types {
 		font-size: 12px;
 		font-weight: 600;
 		color: var(--color-link);
+		white-space: nowrap;
+		overflow: hidden;
+		text-overflow: ellipsis;
 	}
 
 	/* Desktop action buttons in sticky header */

From a8718b2930f014da56424b3e3fa37143a5a73f9f Mon Sep 17 00:00:00 2001
From: widal001 <billy.daly@agile6.com>
Date: Wed, 25 Mar 2026 09:21:20 -0400
Subject: [PATCH 5/6] test: Fix broken tests

---
 src/lib/types.ts             | 2 +-
 src/lib/utils/export.spec.ts | 4 ++--
 2 files changed, 3 insertions(+), 3 deletions(-)

diff --git a/src/lib/types.ts b/src/lib/types.ts
index e90535e..5092bad 100644
--- a/src/lib/types.ts
+++ b/src/lib/types.ts
@@ -13,7 +13,7 @@ export const ACTIVITY_TYPE_LABELS: Record<ActivityType, string> = {
 	issues_opened: 'Issues opened',
 	issues_closed: 'Issues closed',
 	issue_comments: 'Issue comments',
-	prs_opened: 'PRs created',
+	prs_opened: 'PRs opened',
 	pr_reviews: 'PR reviews',
 	prs_merged: 'PRs merged'
 };
diff --git a/src/lib/utils/export.spec.ts b/src/lib/utils/export.spec.ts
index c621b3e..4721a38 100644
--- a/src/lib/utils/export.spec.ts
+++ b/src/lib/utils/export.spec.ts
@@ -49,7 +49,7 @@ describe('buildActivityRows', () => {
 		expect(rows).toHaveLength(1);
 
 		const [type, number, title, repo, state, date, assignees, labels, url] = rows[0];
-		expect(type).toBe('Issues Opened');
+		expect(type).toBe('Issues opened');
 		expect(number).toBe('#42');
 		expect(title).toBe('Test issue');
 		expect(repo).toBe('org/repo');
@@ -120,7 +120,7 @@ describe('buildMetadataRows', () => {
 		expect(toMap['User']).toBe('octocat');
 		expect(toMap['Repos']).toBe('org/repo1, org/repo2');
 		expect(toMap['Date Range']).toBe('2025-01-01 to 2025-03-20');
-		expect(toMap['Activity Types']).toBe('Issues Opened, PRs Opened');
+		expect(toMap['Activity Types']).toBe('Issues opened, PRs opened');
 		expect(toMap['Total Items']).toBe('100');
 		expect(toMap['Filtered Items']).toBe('50');
 	});

From 7bc285ba2e81d529592c00426d5ebcde111a6719 Mon Sep 17 00:00:00 2001
From: widal001 <billy.daly@agile6.com>
Date: Wed, 25 Mar 2026 09:31:36 -0400
Subject: [PATCH 6/6] refactor: Makes heatmap legend sticky

---
 src/lib/components/ActivityHeatmap.svelte | 89 ++++++++++++-----------
 1 file changed, 45 insertions(+), 44 deletions(-)

diff --git a/src/lib/components/ActivityHeatmap.svelte b/src/lib/components/ActivityHeatmap.svelte
index 628051a..ee1a605 100644
--- a/src/lib/components/ActivityHeatmap.svelte
+++ b/src/lib/components/ActivityHeatmap.svelte
@@ -64,47 +64,48 @@
 	}
 </script>
 
-<div class="heatmap-container">
-	<svg width={svgWidth} height={svgHeight}>
-		{#each grid.monthLabels as label (label.col)}
-			<text x={dayLabelWidth + label.col * cellStep} y={12} class="label month-label">
-				{label.text}
-			</text>
-		{/each}
-
-		{#each dayLabels as label, i (i)}
-			<text x={0} y={monthLabelHeight + i * cellStep + cellSize - 2} class="label day-label">
-				{label}
-			</text>
-		{/each}
-
-		{#each grid.cells as cell (cell.entry.date)}
-			<rect
-				x={dayLabelWidth + cell.col * cellStep}
-				y={monthLabelHeight + cell.row * cellStep}
-				width={cellSize}
-				height={cellSize}
-				rx="2"
-				fill={getHeatmapColor(cell.entry.count, maxCount)}
-				opacity={hasFilter && !isSelected(cell.entry.date) ? 0.3 : 1}
-				onmouseenter={(e) => showTooltip(cell.entry, e)}
-				onmouseleave={hideTooltip}
-				onclick={() => handleCellClick(cell.entry)}
-				role="button"
-				tabindex={0}
-				onkeydown={(e) => {
-					if (e.key === 'Enter' || e.key === ' ') {
-						e.preventDefault();
-						handleCellClick(cell.entry);
-					}
-				}}
-				aria-label={`${cell.entry.count} activit${cell.entry.count === 1 ? 'y' : 'ies'} on ${formatDisplayDate(cell.entry.date)}`}
-				aria-pressed={isSelected(cell.entry.date)}
-			/>
-		{/each}
-	</svg>
-
-	<div class="legend">
+<div class="heatmap-container-wrapper">
+	<div class="heatmap-container">
+		<svg width={svgWidth} height={svgHeight}>
+			{#each grid.monthLabels as label (label.col)}
+				<text x={dayLabelWidth + label.col * cellStep} y={12} class="label month-label">
+					{label.text}
+				</text>
+			{/each}
+
+			{#each dayLabels as label, i (i)}
+				<text x={0} y={monthLabelHeight + i * cellStep + cellSize - 2} class="label day-label">
+					{label}
+				</text>
+			{/each}
+
+			{#each grid.cells as cell (cell.entry.date)}
+				<rect
+					x={dayLabelWidth + cell.col * cellStep}
+					y={monthLabelHeight + cell.row * cellStep}
+					width={cellSize}
+					height={cellSize}
+					rx="2"
+					fill={getHeatmapColor(cell.entry.count, maxCount)}
+					opacity={hasFilter && !isSelected(cell.entry.date) ? 0.3 : 1}
+					onmouseenter={(e) => showTooltip(cell.entry, e)}
+					onmouseleave={hideTooltip}
+					onclick={() => handleCellClick(cell.entry)}
+					role="button"
+					tabindex={0}
+					onkeydown={(e) => {
+						if (e.key === 'Enter' || e.key === ' ') {
+							e.preventDefault();
+							handleCellClick(cell.entry);
+						}
+					}}
+					aria-label={`${cell.entry.count} activit${cell.entry.count === 1 ? 'y' : 'ies'} on ${formatDisplayDate(cell.entry.date)}`}
+					aria-pressed={isSelected(cell.entry.date)}
+				/>
+			{/each}
+		</svg>
+	</div>
+	<div class="heatmap-legend">
 		<span class="legend-label">Less</span>
 		<span class="legend-cell" style="background: var(--heatmap-0)"></span>
 		<span class="legend-cell" style="background: var(--heatmap-1)"></span>
@@ -152,12 +153,12 @@
 		z-index: 10;
 	}
 
-	.legend {
+	.heatmap-legend {
 		display: flex;
 		align-items: center;
 		gap: 3px;
-		margin-top: 8px;
-		justify-content: flex-end;
+		margin-top: 6px;
+		margin-bottom: 8px;
 	}
 
 	.legend-label {