feat(date-nav): add month picker widget replacing native date picker

- Add month-picker.js with heat map support via data provider registration
- Date-nav arrows switch between day/month navigation when picker is open
- Calendar app registers provider to show per-facet event counts
- Remove calendar month view (_month.html) - picker replaces it
- Remove calendar app_bar.html - month nav now in date-nav
- Calendar index redirects to yesterday instead of showing month view
- Update APPS.md with month picker documentation

🤖 Generated with [Claude Code](https://claude.com/claude-code)

Co-Authored-By: Claude <[e-mail]>

APPS.md

···
 {% include 'date_nav.html' %}
 ```
 
-This provides a unified `← 🗓️ Today →` control with:
+This provides a unified `← Date →` control with:
 - Previous/next day buttons
-- Native date picker (calendar icon)
-- Today button (disabled when viewing current day)
+- Month picker dropdown (click date label)
 - Keyboard shortcuts: ←/→ arrows, `t` for today
 
 The component reads `day` and `app` from template context to construct navigation URLs.
 
+**Month Picker:**
+
+Apps with `date_nav: true` get a month picker dropdown when clicking the date label. To show day-level data indicators (heat map):
+
+```javascript
+MonthPicker.registerDataProvider('my_app', async (month, facet) => {
+  // Return {YYYYMMDD: count} for days with data
+  const resp = await fetch(`/app/my_app/api/stats/${month}`);
+  return resp.json();
+});
+```
+
+Without a provider, the picker shows a plain calendar grid.
+
 **Reference implementations:**
-- Date navigation: `apps/todos/app_bar.html`, `apps/tokens/app_bar.html`, `apps/calendar/app_bar.html`
+- Date navigation: `apps/todos/app_bar.html`, `apps/tokens/app_bar.html`
 
-**Implementation source:** `convey/templates/date_nav.html`
+**Implementation source:** `convey/templates/date_nav.html`, `convey/static/month-picker.js`
 
 ### 5. `background.html` - Background Service
 

apps/calendar/_month.html

···
-{# Calendar month overview - integrated with app facet system #}
-
-<style>
-.calendar-container {
-  display: flex;
-  flex-direction: column;
-  /* Fill viewport minus facet bar (48px) and app bar (60px + 12px gap) */
-  height: calc(100vh - var(--facet-bar-height, 48px) - var(--app-bar-height, 60px) - 24px);
-  padding: 12px;
-  box-sizing: border-box;
-}
-
-#calendar {
-  width: 100%;
-  border-collapse: collapse;
-  flex: 1;
-  display: flex;
-  flex-direction: column;
-}
-
-#calendar thead {
-  flex-shrink: 0;
-}
-
-#calendar tbody {
-  flex: 1;
-  display: flex;
-  flex-direction: column;
-}
-
-#calendar tr {
-  display: flex;
-  flex: 1;
-}
-
-#calendar th, #calendar td {
-  flex: 1;
-  border: 1px solid #e0e0e0;
-  vertical-align: top;
-  padding: 4px;
-  position: relative;
-  min-height: 60px;
-  /* Heat map: intensity 0-1 controls facet color opacity */
-  background: color-mix(in srgb, var(--facet-color) calc(var(--intensity, 0) * 25%), transparent);
-}
-
-#calendar th {
-  background: #f8f9fa;
-  text-align: center;
-  padding: 8px 4px;
-  flex: 1;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-}
-
-#calendar td.today {
-  /* Layer blue tint on top of heat map */
-  background:
-    linear-gradient(rgba(0,123,255,0.15), rgba(0,123,255,0.15)),
-    color-mix(in srgb, var(--facet-color) calc(var(--intensity, 0) * 25%), transparent);
-  box-shadow: inset 0 0 0 2px #007bff;
-}
-
-.day-number {
-  font-weight: bold;
-  text-decoration: none;
-  color: inherit;
-  display: inline-block;
-}
-
-/* Empty/disabled day cells (zero events or no journal data) */
-#calendar td.empty {
-  background:
-    repeating-linear-gradient(45deg, transparent, transparent 4px, rgba(0,0,0,0.03) 4px, rgba(0,0,0,0.03) 8px),
-    color-mix(in srgb, var(--facet-color) calc(var(--intensity, 0) * 25%), transparent);
-}
-#calendar td.empty .day-number { opacity: 0.4; color: #999; }
-
-.event-count {
-  position: absolute;
-  bottom: 4px;
-  right: 6px;
-  font-size: 0.85em;
-  color: #666;
-}
-</style>
-
-<div class="calendar-container">
-  <table id="calendar">
-    <thead>
-      <tr><th>Sun</th><th>Mon</th><th>Tue</th><th>Wed</th><th>Thu</th><th>Fri</th><th>Sat</th></tr>
-    </thead>
-    <tbody></tbody>
-  </table>
-</div>
-
-<script>
-let dayStats = {};
-let availableDays = new Set();
-const dayBase = '/app/calendar/';
-let months = [];
-let currentIndex = 0;
-const now = new Date();
-const CURRENT_YEAR_MONTH = generateYearMonth(now.getFullYear(), now.getMonth());
-const TODAY_DATE_STRING = CURRENT_YEAR_MONTH + String(now.getDate()).padStart(2,'0');
-
-// App bar controls
-const monthLabel = document.getElementById('month-nav-label');
-const prevBtn = document.getElementById('month-nav-prev');
-const nextBtn = document.getElementById('month-nav-next');
-const todayBtn = document.getElementById('month-nav-today');
-
-// Track current displayed month for re-rendering on facet change
-let currentMonth = null;
-
-// Listen for facet changes from facet-bar - just re-render, no refetch needed
-window.addEventListener('facet.switch', () => {
-  if (currentMonth) {
-    renderMonth(currentMonth);
-  }
-});
-
-function loadDays() {
-  // Fetch available days list (for month navigation and day links)
-  fetch('/app/calendar/api/days')
-    .then(r => {
-      if (!r.ok) throw new Error('Failed to fetch days');
-      return r.json();
-    })
-    .then(days => {
-      availableDays = new Set(days || []);
-      const monthSet = new Set(Array.from(availableDays).map(d => d.slice(0,6)));
-      monthSet.add(CURRENT_YEAR_MONTH);
-      months = Array.from(monthSet).sort();
-      currentIndex = months.indexOf(CURRENT_YEAR_MONTH);
-      if (currentIndex === -1) {
-        currentIndex = months.length - 1;
-      }
-      showMonth(months[currentIndex]);
-    })
-    .catch(err => {
-      console.error('Error loading calendar data:', err);
-      months = [CURRENT_YEAR_MONTH];
-      currentIndex = 0;
-      showMonth(months[currentIndex]);
-    });
-}
-
-function loadMonthStats(ym) {
-  // Fetch stats for specific month (returns facet counts per day)
-  fetch(`/app/calendar/api/stats/${ym}`)
-    .then(r => {
-      if (!r.ok) throw new Error('Failed to fetch stats');
-      return r.json();
-    })
-    .then(stats => {
-      dayStats = stats || {};
-      currentMonth = ym;
-      renderMonth(ym);
-    })
-    .catch(err => {
-      console.error('Error loading month stats:', err);
-      dayStats = {};
-      currentMonth = ym;
-      renderMonth(ym);
-    });
-}
-
-// Get event count for a day based on selected facet
-function getDayCount(dateStr) {
-  const facetCounts = dayStats[dateStr] || {};
-  if (window.selectedFacet) {
-    return facetCounts[window.selectedFacet] || 0;
-  } else {
-    return Object.values(facetCounts).reduce((sum, c) => sum + c, 0);
-  }
-}
-
-function createDayContent(dateStr, day) {
-  const exists = availableDays.has(dateStr);
-  const count = getDayCount(dateStr);
-
-  let html = '';
-  // Only link to days that exist AND have events
-  if (exists && count > 0) {
-    html += `<a class='day-number' href='${dayBase}${dateStr}'>${day}</a>`;
-    html += `<span class='event-count'>${count}</span>`;
-  } else {
-    html += `<span class='day-number'>${day}</span>`;
-  }
-
-  return html;
-}
-
-function showMonth(ym) {
-  // Update app bar label
-  const year = parseInt(ym.slice(0,4));
-  const month = parseInt(ym.slice(4)) - 1;
-  const first = new Date(year, month, 1);
-  if (monthLabel) {
-    monthLabel.textContent = first.toLocaleString('default', {month: 'long', year: 'numeric'});
-  }
-
-  // Show/hide Today button based on current month
-  if (todayBtn) {
-    todayBtn.classList.toggle('hidden', ym === CURRENT_YEAR_MONTH);
-  }
-
-  // Load stats for this month (will call renderMonth when done)
-  loadMonthStats(ym);
-}
-
-function renderMonth(ym) {
-  const year = parseInt(ym.slice(0,4));
-  const month = parseInt(ym.slice(4)) - 1;
-  const daysInMonth = new Date(year, month+1, 0).getDate();
-
-  // Calculate max count for heat map scaling
-  let maxCount = 0;
-  for (let day = 1; day <= daysInMonth; day++) {
-    const dateStr = ym + String(day).padStart(2, '0');
-    maxCount = Math.max(maxCount, getDayCount(dateStr));
-  }
-
-  const tbody = document.querySelector('#calendar tbody');
-  tbody.innerHTML='';
-  const startDay = new Date(year, month, 1).getDay();
-  let row = document.createElement('tr');
-
-  // Empty cells for days before month starts
-  for(let i=0; i<startDay; i++){
-    const td = document.createElement('td');
-    td.classList.add('empty');
-    row.appendChild(td);
-  }
-
-  // Days of the month
-  for(let day=1; day<=daysInMonth; day++){
-    if((startDay+day-1)%7===0 && day!==1){
-      tbody.appendChild(row);
-      row=document.createElement('tr');
-    }
-    const td = document.createElement('td');
-    const dateStr = ym + String(day).padStart(2,'0');
-    const count = getDayCount(dateStr);
-
-    // Set heat map intensity (0.2-1 for days with events, 0 for empty)
-    const rawIntensity = maxCount > 0 ? count / maxCount : 0;
-    const intensity = count > 0 ? 0.2 + (rawIntensity * 0.8) : 0;
-    td.style.setProperty('--intensity', intensity);
-
-    // Mark empty cells (no events or no journal data)
-    const exists = availableDays.has(dateStr);
-    if (count === 0 || !exists) {
-      td.classList.add('empty');
-    }
-
-    td.innerHTML = createDayContent(dateStr, day);
-
-    if (dateStr === TODAY_DATE_STRING) {
-      td.classList.add('today');
-    }
-
-    row.appendChild(td);
-  }
-
-  // Fill remaining cells in last row
-  while(row.children.length<7){
-    const td = document.createElement('td');
-    td.classList.add('empty');
-    row.appendChild(td);
-  }
-  tbody.appendChild(row);
-}
-
-
-function generateYearMonth(year, month) {
-  return year + String(month + 1).padStart(2, '0');
-}
-
-function navigateMonth(direction) {
-  const newIndex = currentIndex + direction;
-
-  if (newIndex >= 0 && newIndex < months.length) {
-    currentIndex = newIndex;
-    showMonth(months[currentIndex]);
-    return;
-  }
-
-  // Generate new month if at boundaries
-  const isNext = direction > 0;
-  const referenceYm = months[isNext ? months.length - 1 : 0];
-  const year = parseInt(referenceYm.slice(0,4));
-  const month = parseInt(referenceYm.slice(4)) - 1;
-  const newDate = new Date(year, month + direction, 1);
-  const newYm = generateYearMonth(newDate.getFullYear(), newDate.getMonth());
-
-  if (isNext) {
-    months.push(newYm);
-    currentIndex = months.length - 1;
-  } else {
-    months.unshift(newYm);
-    currentIndex = 0;
-  }
-  showMonth(months[currentIndex]);
-}
-
-
-// Wire up app bar buttons
-if (prevBtn) prevBtn.onclick = () => navigateMonth(-1);
-if (nextBtn) nextBtn.onclick = () => navigateMonth(1);
-if (todayBtn) {
-  todayBtn.onclick = () => {
-    currentIndex = months.indexOf(CURRENT_YEAR_MONTH);
-    if (currentIndex === -1) {
-      months.push(CURRENT_YEAR_MONTH);
-      months.sort();
-      currentIndex = months.indexOf(CURRENT_YEAR_MONTH);
-    }
-    showMonth(CURRENT_YEAR_MONTH);
-  };
-}
-
-// Keyboard shortcuts
-document.addEventListener('keydown', (e) => {
-  if (e.target.matches('input, textarea, select')) return;
-
-  if (e.key === 'ArrowLeft') {
-    e.preventDefault();
-    navigateMonth(-1);
-  }
-  if (e.key === 'ArrowRight') {
-    e.preventDefault();
-    navigateMonth(1);
-  }
-  if (e.key === 't' || e.key === 'T') {
-    e.preventDefault();
-    if (todayBtn) todayBtn.click();
-  }
-});
-
-// Load calendar data on page load
-loadDays();
-</script>

apps/calendar/app_bar.html

···
-{% set current_view = view|default('month') %}
-
-{% if current_view == 'month' %}
-{# Month navigation for calendar month view #}
-<style>
-.month-nav {
-  display: flex;
-  align-items: center;
-  gap: 0.5rem;
-}
-
-.month-nav-btn {
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  padding: 0.5rem 0.75rem;
-  background: #f3f4f6;
-  border: 1px solid #d1d5db;
-  border-radius: 6px;
-  color: #374151;
-  font-size: 1rem;
-  cursor: pointer;
-  text-decoration: none;
-  transition: background 0.15s, border-color 0.15s;
-}
-
-.month-nav-btn:hover {
-  background: #e5e7eb;
-  border-color: #9ca3af;
-}
-
-.month-nav-btn:active {
-  transform: scale(0.98);
-}
-
-.month-nav-btn.today {
-  background: #2563eb;
-  border-color: #2563eb;
-  color: white;
-  font-weight: 600;
-}
-
-.month-nav-btn.today:hover {
-  background: #1d4ed8;
-  border-color: #1d4ed8;
-}
-
-.month-nav-btn.today.hidden {
-  display: none;
-}
-
-.month-nav-label {
-  font-size: 1.1rem;
-  font-weight: 600;
-  color: #374151;
-  min-width: 160px;
-  text-align: center;
-}
-</style>
-
-<div class="month-nav" id="month-nav">
-  <button class="month-nav-btn prev" id="month-nav-prev" title="Previous month (←)">←</button>
-  <span class="month-nav-label" id="month-nav-label"></span>
-  <button class="month-nav-btn next" id="month-nav-next" title="Next month (→)">→</button>
-  <button class="month-nav-btn today hidden" id="month-nav-today" title="Today (t)">Today</button>
-</div>
-
-{% endif %}

apps/calendar/routes.py

···
 import json
 import os
 import re
+from datetime import datetime
 from typing import Any
 
-from flask import Blueprint, jsonify, render_template
+from flask import Blueprint, jsonify, redirect, render_template, url_for
 
 from convey import state
 from convey.utils import DATE_RE, adjacent_days, format_date, format_date_short
···
     __name__,
     url_prefix="/app/calendar",
 )
+
+
+@calendar_bp.route("/")
+def index():
+    """Redirect to yesterday's calendar view."""
+    from datetime import timedelta
+
+    yesterday = (datetime.now() - timedelta(days=1)).strftime("%Y%m%d")
+    return redirect(url_for("app:calendar.calendar_day", day=yesterday))
 
 
 @calendar_bp.route("/<day>")

apps/calendar/workspace.html

···
 {# Calendar app workspace - routes to different views based on view parameter #}
 
-{% set view = view|default('month') %}
+{% set view = view|default('day') %}
 
-{% if view == 'month' %}
-  {% include 'calendar/_month.html' %}
-{% elif view == 'day' %}
+{% if view == 'day' %}
   {% include 'calendar/_day.html' %}
 {% elif view == '_dev_screens_list' %}
   {% include 'calendar/_dev_screens_list.html' %}

convey/static/app.css

···
   top: var(--facet-bar-height);  /* Sits directly below facet bar */
   left: 50%;
   transform: translateX(-50%);
-  width: 210px;
-  height: 36px;
+  width: 300px;
+  height: 40px;
   display: flex;
   align-items: center;
   justify-content: space-between;
···
 ::view-transition-old(date-nav),
 ::view-transition-new(date-nav) {
   animation: none;
+}
+
+/* When picker is open, remove bottom border radius for seamless connection */
+.date-nav.picker-open {
+  border-radius: 0;
+  box-shadow: none;
+}
+
+.date-nav.picker-open::before {
+  border-radius: 0;
+}
+
+/* Month Picker Dropdown */
+.month-picker {
+  position: absolute;
+  top: 100%;
+  left: 0;
+  right: 0;
+  background: white;
+  border: 1px solid var(--facet-border, #e0e0e0);
+  border-top: none;
+  border-radius: 0 0 12px 12px;
+  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
+  overflow: hidden;
+  z-index: 1;
+
+  /* Closed state */
+  max-height: 0;
+  opacity: 0;
+  pointer-events: none;
+  transition: max-height 0.2s ease, opacity 0.15s ease;
+}
+
+/* Facet tint background */
+.month-picker::before {
+  content: '';
+  position: absolute;
+  inset: 0;
+  background: var(--facet-bg, transparent);
+  border-radius: 0 0 12px 12px;
+  pointer-events: none;
+  z-index: -1;
+}
+
+.month-picker.open {
+  max-height: 280px;
+  opacity: 1;
+  pointer-events: auto;
+}
+
+.mp-weekdays {
+  display: grid;
+  grid-template-columns: repeat(7, 1fr);
+  padding: 8px 8px 4px;
+  font-size: 11px;
+  font-weight: 600;
+  color: #9ca3af;
+  text-align: center;
+}
+
+.mp-grid {
+  display: grid;
+  grid-template-columns: repeat(7, 1fr);
+  gap: 3px;
+  padding: 4px 8px 8px;
+}
+
+.mp-day {
+  aspect-ratio: 1;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  font-size: 13px;
+  border-radius: 6px;
+  cursor: pointer;
+  transition: background 0.1s;
+
+  /* Heat map: intensity controls facet color opacity */
+  background: color-mix(in srgb, var(--facet-color) calc(var(--intensity, 0) * 30%), transparent);
+}
+
+.mp-day:hover:not(.mp-other) {
+  background: color-mix(in srgb, var(--facet-color) 40%, transparent);
+}
+
+/* Empty days - striped pattern */
+.mp-day.mp-empty {
+  background:
+    repeating-linear-gradient(45deg, transparent, transparent 2px, rgba(0,0,0,0.03) 2px, rgba(0,0,0,0.03) 4px),
+    color-mix(in srgb, var(--facet-color) calc(var(--intensity, 0) * 30%), transparent);
+  color: #999;
+}
+
+/* Other month days (leading/trailing) */
+.mp-day.mp-other {
+  visibility: hidden;
+}
+
+/* Today indicator */
+.mp-day.mp-today {
+  box-shadow: inset 0 0 0 2px #007bff;
+}
+
+/* Selected day */
+.mp-day.mp-selected {
+  background: var(--facet-color, #3b82f6);
+  color: white;
+  font-weight: 600;
+}
+
+.mp-day.mp-selected:hover {
+  background: var(--facet-color, #3b82f6);
 }
 
 /* Status Pane */

convey/static/month-picker.js

···
+/**
+ * Month Picker Widget
+ * Dropdown calendar for date navigation with per-app heat map support.
+ */
+window.MonthPicker = (function() {
+  // State
+  let container = null;
+  let currentMonth = null;      // YYYYMM being displayed
+  let selectedDay = null;       // YYYYMMDD from date-nav
+  let dayLabel = null;          // Original day label text
+  let app = null;               // Current app name
+  let availableDays = new Set();
+  let isVisible = false;
+
+  // External elements (set during init)
+  let labelEl = null;
+  let prevBtn = null;
+  let nextBtn = null;
+
+  // Cache: {YYYYMM: {data, facet}}
+  const cache = {};
+  const providers = {};
+
+  // Constants
+  const TODAY = getToday();
+  const CURRENT_MONTH = TODAY.slice(0, 6);
+  const WEEKDAYS = ['S', 'M', 'T', 'W', 'T', 'F', 'S'];
+
+  function getToday() {
+    const now = new Date();
+    return now.getFullYear() +
+      String(now.getMonth() + 1).padStart(2, '0') +
+      String(now.getDate()).padStart(2, '0');
+  }
+
+  function parseYM(ym) {
+    return {
+      year: parseInt(ym.slice(0, 4)),
+      month: parseInt(ym.slice(4)) - 1
+    };
+  }
+
+  function formatYM(year, month) {
+    const d = new Date(year, month, 1);
+    return d.getFullYear() + String(d.getMonth() + 1).padStart(2, '0');
+  }
+
+  function adjacentMonth(ym, delta) {
+    const { year, month } = parseYM(ym);
+    return formatYM(year, month + delta);
+  }
+
+  function getMonthLabel(ym) {
+    const { year, month } = parseYM(ym);
+    const d = new Date(year, month, 1);
+    const monthName = d.toLocaleString('default', { month: 'short' });
+    const yearShort = String(year).slice(2);
+    return `${monthName} '${yearShort}`;
+  }
+
+  function getDaysInMonth(ym) {
+    const { year, month } = parseYM(ym);
+    return new Date(year, month + 1, 0).getDate();
+  }
+
+  function getStartDayOfWeek(ym) {
+    const { year, month } = parseYM(ym);
+    return new Date(year, month, 1).getDay();
+  }
+
+  // Data fetching
+  async function fetchAvailableDays() {
+    try {
+      const resp = await fetch('/app/calendar/api/days');
+      if (resp.ok) {
+        const days = await resp.json();
+        availableDays = new Set(days || []);
+      }
+    } catch (e) {
+      console.warn('[MonthPicker] Failed to fetch available days:', e);
+    }
+  }
+
+  async function fetchMonthData(ym) {
+    const provider = providers[app];
+    if (!provider) return null;
+
+    try {
+      const facet = window.selectedFacet || null;
+      return await provider(ym, facet);
+    } catch (e) {
+      console.warn(`[MonthPicker] Provider error for ${ym}:`, e);
+      return null;
+    }
+  }
+
+  async function getMonthData(ym) {
+    const facet = window.selectedFacet || null;
+    const cacheKey = ym;
+
+    if (cache[cacheKey]?.facet === facet) {
+      return cache[cacheKey].data;
+    }
+
+    const data = await fetchMonthData(ym);
+    cache[cacheKey] = { data, facet };
+    return data;
+  }
+
+  function preloadAdjacentMonths(ym) {
+    const prev = adjacentMonth(ym, -1);
+    const next = adjacentMonth(ym, 1);
+    getMonthData(prev);
+    getMonthData(next);
+  }
+
+  // Rendering
+  function render() {
+    if (!container) return;
+
+    const data = cache[currentMonth]?.data || {};
+    const daysInMonth = getDaysInMonth(currentMonth);
+    const startDay = getStartDayOfWeek(currentMonth);
+
+    // Calculate max for heat map scaling
+    let maxCount = 0;
+    for (let d = 1; d <= daysInMonth; d++) {
+      const dateStr = currentMonth + String(d).padStart(2, '0');
+      maxCount = Math.max(maxCount, data[dateStr] || 0);
+    }
+
+    // Build HTML (no header - nav is in date-nav bar)
+    let html = `
+      <div class="mp-weekdays">
+        ${WEEKDAYS.map(d => `<span>${d}</span>`).join('')}
+      </div>
+      <div class="mp-grid">
+    `;
+
+    // Leading empty cells
+    for (let i = 0; i < startDay; i++) {
+      html += `<div class="mp-day mp-other"></div>`;
+    }
+
+    // Days of month
+    for (let d = 1; d <= daysInMonth; d++) {
+      const dateStr = currentMonth + String(d).padStart(2, '0');
+      const count = data[dateStr] || 0;
+      const exists = availableDays.has(dateStr);
+
+      const classes = ['mp-day'];
+      if (dateStr === TODAY) classes.push('mp-today');
+      if (dateStr === selectedDay) classes.push('mp-selected');
+      if (count === 0 || !exists) classes.push('mp-empty');
+
+      const rawIntensity = maxCount > 0 ? count / maxCount : 0;
+      const intensity = count > 0 ? 0.2 + (rawIntensity * 0.8) : 0;
+
+      html += `<div class="${classes.join(' ')}" data-day="${dateStr}" style="--intensity: ${intensity}">${d}</div>`;
+    }
+
+    // Trailing empty cells
+    const totalCells = startDay + daysInMonth;
+    const remainder = totalCells % 7;
+    if (remainder > 0) {
+      for (let i = 0; i < 7 - remainder; i++) {
+        html += `<div class="mp-day mp-other"></div>`;
+      }
+    }
+
+    html += '</div>';
+    container.innerHTML = html;
+
+    // Update the date-nav label to show month
+    if (labelEl) {
+      labelEl.textContent = getMonthLabel(currentMonth);
+    }
+  }
+
+  async function showMonth(ym) {
+    currentMonth = ym;
+    await getMonthData(ym);
+    render();
+    preloadAdjacentMonths(ym);
+  }
+
+  function navigateMonth(delta) {
+    if (!currentMonth) return;
+    showMonth(adjacentMonth(currentMonth, delta));
+  }
+
+  // Event handlers
+  function handleClick(e) {
+    const day = e.target.closest('.mp-day');
+    if (day && !day.classList.contains('mp-other')) {
+      const dateStr = day.dataset.day;
+      if (dateStr) {
+        window.location.href = `/app/${app}/${dateStr}`;
+      }
+    }
+  }
+
+  function handleKeydown(e) {
+    if (!isVisible) return;
+
+    if (e.key === 'Escape') {
+      e.preventDefault();
+      hide();
+    }
+  }
+
+  function handleClickOutside(e) {
+    if (!isVisible) return;
+    const dateNav = document.querySelector('.date-nav');
+    if (dateNav && !dateNav.contains(e.target)) {
+      hide();
+    }
+  }
+
+  function handleFacetSwitch() {
+    if (isVisible && currentMonth) {
+      showMonth(currentMonth);
+    }
+  }
+
+  // Public API
+  function init(options) {
+    app = options.app;
+    selectedDay = options.currentDay;
+    currentMonth = selectedDay ? selectedDay.slice(0, 6) : CURRENT_MONTH;
+
+    container = document.querySelector(options.container || '.month-picker');
+    labelEl = document.getElementById('date-nav-label');
+    prevBtn = document.getElementById('date-nav-prev');
+    nextBtn = document.getElementById('date-nav-next');
+
+    if (labelEl) {
+      dayLabel = labelEl.textContent;
+    }
+
+    if (!container) {
+      console.warn('[MonthPicker] Container not found');
+      return;
+    }
+
+    container.addEventListener('click', handleClick);
+    document.addEventListener('keydown', handleKeydown);
+    document.addEventListener('click', handleClickOutside);
+    window.addEventListener('facet.switch', handleFacetSwitch);
+
+    // Prefetch data
+    fetchAvailableDays().then(() => {
+      getMonthData(currentMonth);
+    });
+  }
+
+  function show() {
+    if (!container) return;
+    isVisible = true;
+    container.classList.add('open');
+    document.querySelector('.date-nav')?.classList.add('picker-open');
+    showMonth(currentMonth);
+  }
+
+  function hide() {
+    if (!container) return;
+    isVisible = false;
+    container.classList.remove('open');
+    document.querySelector('.date-nav')?.classList.remove('picker-open');
+
+    // Restore day label
+    if (labelEl && dayLabel) {
+      labelEl.textContent = dayLabel;
+    }
+  }
+
+  function toggle() {
+    isVisible ? hide() : show();
+  }
+
+  function registerDataProvider(appName, fn) {
+    providers[appName] = fn;
+  }
+
+  return {
+    init,
+    show,
+    hide,
+    toggle,
+    isOpen: () => isVisible,
+    navigateMonth,
+    registerDataProvider
+  };
+})();

convey/templates/date_nav.html

···
 {# Requires: day (YYYYMMDD), day_formatted ("Sat Nov 29"), app (app name) #}
 {% if day %}
 <div class="date-nav">
-  <button class="date-nav-arrow" id="date-nav-prev" title="Previous day (&#8592)">&#8249;</button>
+  <button class="date-nav-arrow" id="date-nav-prev" title="Previous day (←)">‹</button>
   <span class="date-nav-label" id="date-nav-label" title="Pick date">{{ day_formatted }}</span>
-  <input type="date" id="date-nav-input">
-  <button class="date-nav-arrow" id="date-nav-next" title="Next day (&#8594)">&#8250;</button>
+  <button class="date-nav-arrow" id="date-nav-next" title="Next day (→)">›</button>
+  <div class="month-picker"></div>
 </div>
 
+<script src="{{ url_for('root.static', filename='month-picker.js') }}"></script>
 <script>
 (function() {
   const currentDay = '{{ day }}';
   const app = '{{ app }}';
   const baseUrl = `/app/${app}/`;
-
-  function toInputFormat(day) {
-    return `${day.substring(0, 4)}-${day.substring(4, 6)}-${day.substring(6, 8)}`;
-  }
-
-  function fromInputFormat(str) {
-    return str.replace(/-/g, '');
-  }
 
   function adjustDay(day, delta) {
     const year = parseInt(day.substring(0, 4));
···
     window.location.href = `${baseUrl}${day}`;
   }
 
-  const picker = document.getElementById('date-nav-input');
-  const label = document.getElementById('date-nav-label');
+  // Register calendar data provider (if calendar app)
+  if (app === 'calendar') {
+    MonthPicker.registerDataProvider('calendar', async (month, facet) => {
+      const resp = await fetch(`/app/calendar/api/stats/${month}`);
+      if (!resp.ok) return {};
+      const raw = await resp.json();
+      const result = {};
+      for (const [day, facetCounts] of Object.entries(raw)) {
+        result[day] = facet
+          ? (facetCounts[facet] || 0)
+          : Object.values(facetCounts).reduce((a, b) => a + b, 0);
+      }
+      return result;
+    });
+  }
 
-  // Set initial picker value
-  picker.value = toInputFormat(currentDay);
+  // Initialize month picker
+  MonthPicker.init({
+    app: app,
+    currentDay: currentDay,
+    container: '.month-picker'
+  });
 
-  // Click label to open date picker
-  label.addEventListener('click', () => picker.showPicker());
+  // Click label to toggle month picker
+  document.getElementById('date-nav-label').addEventListener('click', () => {
+    MonthPicker.toggle();
+  });
 
-  // Date picker change handler
-  picker.addEventListener('change', (e) => {
-    const newDay = fromInputFormat(e.target.value);
-    if (newDay && newDay !== currentDay) {
-      navigate(newDay);
+  // Arrow buttons: day nav when closed, month nav when open
+  document.getElementById('date-nav-prev').addEventListener('click', () => {
+    if (MonthPicker.isOpen()) {
+      MonthPicker.navigateMonth(-1);
+    } else {
+      navigate(adjustDay(currentDay, -1));
     }
   });
 
-  // Button handlers
-  document.getElementById('date-nav-prev').addEventListener('click', () => navigate(adjustDay(currentDay, -1)));
-  document.getElementById('date-nav-next').addEventListener('click', () => navigate(adjustDay(currentDay, 1)));
+  document.getElementById('date-nav-next').addEventListener('click', () => {
+    if (MonthPicker.isOpen()) {
+      MonthPicker.navigateMonth(1);
+    } else {
+      navigate(adjustDay(currentDay, 1));
+    }
+  });
 
   // Keyboard shortcuts
   document.addEventListener('keydown', (e) => {
···
 
     if (e.key === 'ArrowLeft') {
       e.preventDefault();
-      navigate(adjustDay(currentDay, -1));
+      if (MonthPicker.isOpen()) {
+        MonthPicker.navigateMonth(-1);
+      } else {
+        navigate(adjustDay(currentDay, -1));
+      }
     }
     if (e.key === 'ArrowRight') {
       e.preventDefault();
-      navigate(adjustDay(currentDay, 1));
+      if (MonthPicker.isOpen()) {
+        MonthPicker.navigateMonth(1);
+      } else {
+        navigate(adjustDay(currentDay, 1));
+      }
     }
     if (e.key === 't' || e.key === 'T') {
       e.preventDefault();