floq 1.3.0 → 1.3.2

package/dist/calendar/index.d.ts

@@ -14,6 +14,11 @@ export declare function fetchCalendarEvents(url?: string): Promise<CalendarEvent
  * Get cached events or fetch if cache is stale
  */
 export declare function getCalendarEvents(): Promise<CalendarEvent[]>;
+/**
+ * Get events for a specific date from cache (synchronous)
+ * @param dayOffset - Number of days from today (0 = today, -1 = yesterday, 1 = tomorrow)
+ */
+export declare function getEventsForDate(dayOffset?: number): CalendarEvent[];
 /**
  * Get today's events from cache (synchronous)
  */

package/dist/calendar/index.js

@@ -15,11 +15,10 @@ function parseICalData(icalData) {
         const vevents = vcalendar.getAllSubcomponents('vevent');
         for (const vevent of vevents) {
             const event = new ICAL.Event(vevent);
-            // Handle recurring events - get occurrences for today and next 7 days
+            // Handle recurring events - get occurrences for current month and next month
             const now = new Date();
-            const startOfToday = new Date(now.getFullYear(), now.getMonth(), now.getDate());
-            const endOfWeek = new Date(startOfToday);
-            endOfWeek.setDate(endOfWeek.getDate() + 7);
+            const startOfMonth = new Date(now.getFullYear(), now.getMonth(), 1);
+            const endOfNextMonth = new Date(now.getFullYear(), now.getMonth() + 2, 0); // Last day of next month
             if (event.isRecurring()) {
                 try {
                     const iter = event.iterator();
@@ -30,7 +29,7 @@ function parseICalData(icalData) {
                         const occurrenceStart = next.toJSDate();
                         const occurrenceEnd = new Date(occurrenceStart.getTime() + event.duration.toSeconds() * 1000);
                         // Only include occurrences within our time window
-                        if (occurrenceStart >= startOfToday && occurrenceStart < endOfWeek) {
+                        if (occurrenceStart >= startOfMonth && occurrenceStart <= endOfNextMonth) {
                             events.push({
                                 id: `${event.uid}-${occurrenceStart.getTime()}`,
                                 title: event.summary || 'Untitled',
@@ -41,7 +40,7 @@ function parseICalData(icalData) {
                             });
                         }
                         // Stop if we're past our window
-                        if (occurrenceStart >= endOfWeek)
+                        if (occurrenceStart > endOfNextMonth)
                             break;
                         next = iter.next();
                         count++;
@@ -104,11 +103,10 @@ async function fetchEventsViaOAuth() {
         return [];
     }
     const now = new Date();
-    const startOfToday = new Date(now.getFullYear(), now.getMonth(), now.getDate());
-    const endOfWeek = new Date(startOfToday);
-    endOfWeek.setDate(endOfWeek.getDate() + 7);
+    const startOfMonth = new Date(now.getFullYear(), now.getMonth(), 1);
+    const endOfNextMonth = new Date(now.getFullYear(), now.getMonth() + 2, 0); // Last day of next month
     try {
-        return await listGoogleEvents(accessToken, oauthConfig.calendarId, startOfToday, endOfWeek);
+        return await listGoogleEvents(accessToken, oauthConfig.calendarId, startOfMonth, endOfNextMonth);
     }
     catch (error) {
         console.error('Failed to fetch Google Calendar events:', error);
@@ -182,21 +180,23 @@ export async function getCalendarEvents() {
     return fetchCalendarEvents();
 }
 /**
- * Get today's events from cache (synchronous)
+ * Get events for a specific date from cache (synchronous)
+ * @param dayOffset - Number of days from today (0 = today, -1 = yesterday, 1 = tomorrow)
  */
-export function getTodayEvents() {
+export function getEventsForDate(dayOffset = 0) {
     if (!eventsCache) {
         return [];
     }
     const now = new Date();
-    const startOfToday = new Date(now.getFullYear(), now.getMonth(), now.getDate());
-    const endOfToday = new Date(startOfToday);
-    endOfToday.setDate(endOfToday.getDate() + 1);
+    const targetDate = new Date(now.getFullYear(), now.getMonth(), now.getDate());
+    targetDate.setDate(targetDate.getDate() + dayOffset);
+    const endOfTarget = new Date(targetDate);
+    endOfTarget.setDate(endOfTarget.getDate() + 1);
     return eventsCache.events
         .filter(event => {
-        // Event starts today or spans today
-        return (event.start >= startOfToday && event.start < endOfToday) ||
-            (event.start < startOfToday && event.end >= startOfToday);
+        // Event starts on target date or spans target date
+        return (event.start >= targetDate && event.start < endOfTarget) ||
+            (event.start < targetDate && event.end >= targetDate);
     })
         .sort((a, b) => {
         // All-day events first, then by start time
@@ -207,6 +207,12 @@ export function getTodayEvents() {
         return a.start.getTime() - b.start.getTime();
     });
 }
+/**
+ * Get today's events from cache (synchronous)
+ */
+export function getTodayEvents() {
+    return getEventsForDate(0);
+}
 /**
  * Get upcoming events (next event for each hour slot)
  */

package/dist/i18n/en.d.ts

@@ -260,12 +260,25 @@ export declare const en: {
         calendar: {
             label: string;
             noEvents: string;
+            noUpcoming: string;
             allDay: string;
             upcoming: string;
             more: string;
             modalTitle: string;
+            yesterday: string;
+            today: string;
+            tomorrow: string;
+            noEventsForDay: string;
             notConfigured: string;
             setupHint: string;
+            addEvent: string;
+            eventTitle: string;
+            eventStart: string;
+            eventEnd: string;
+            eventAllDay: string;
+            eventCreated: string;
+            eventCreateError: string;
+            addNotSupported: string;
             oauthConfigured: string;
             oauthNotConfigured: string;
             loginRequired: string;
@@ -480,12 +493,25 @@ export type PomodoroTranslations = {
 export type CalendarTranslations = {
     label: string;
     noEvents: string;
+    noUpcoming?: string;
     allDay: string;
     upcoming: string;
     more: string;
     modalTitle?: string;
+    yesterday?: string;
+    today?: string;
+    tomorrow?: string;
+    noEventsForDay?: string;
     notConfigured?: string;
     setupHint?: string;
+    addEvent?: string;
+    eventTitle?: string;
+    eventStart?: string;
+    eventEnd?: string;
+    eventAllDay?: string;
+    eventCreated?: string;
+    eventCreateError?: string;
+    addNotSupported?: string;
     oauthConfigured?: string;
     oauthNotConfigured?: string;
     loginRequired?: string;

package/dist/i18n/en.js

@@ -278,13 +278,27 @@ export const en = {
         calendar: {
             label: '[CAL]',
             noEvents: 'No events today',
+            noUpcoming: 'No more events. Good work today!',
             allDay: 'All day',
             upcoming: 'Next:',
             more: '+{count}',
             // Modal
             modalTitle: "Today's Events",
+            yesterday: 'Yesterday',
+            today: 'Today',
+            tomorrow: 'Tomorrow',
+            noEventsForDay: 'No events',
             notConfigured: 'Calendar not configured.',
             setupHint: 'Run "floq calendar --help" to set up.',
+            // Add event
+            addEvent: 'Add Event',
+            eventTitle: 'Title',
+            eventStart: 'Start',
+            eventEnd: 'End',
+            eventAllDay: 'All day',
+            eventCreated: 'Event created',
+            eventCreateError: 'Failed to create event',
+            addNotSupported: 'Event creation requires OAuth login',
             // OAuth messages
             oauthConfigured: 'OAuth client configured',
             oauthNotConfigured: 'OAuth client not configured',

package/dist/i18n/ja.js

@@ -278,13 +278,27 @@ export const ja = {
         calendar: {
             label: '予定',
             noEvents: '今日の予定はありません',
+            noUpcoming: '次の予定はありません。おつかれさまでした！',
             allDay: '終日',
             upcoming: '次:',
             more: '+{count}',
             // Modal
             modalTitle: '今日の予定',
+            yesterday: '昨日',
+            today: '今日',
+            tomorrow: '明日',
+            noEventsForDay: '予定なし',
             notConfigured: 'カレンダーが設定されていません。',
             setupHint: '"floq calendar --help" で設定方法を確認してください。',
+            // Add event
+            addEvent: '予定を追加',
+            eventTitle: 'タイトル',
+            eventStart: '開始',
+            eventEnd: '終了',
+            eventAllDay: '終日',
+            eventCreated: '予定を作成しました',
+            eventCreateError: '予定の作成に失敗しました',
+            addNotSupported: '予定の追加にはOAuthログインが必要です',
             // OAuth messages
             oauthConfigured: 'OAuthクライアント設定済み',
             oauthNotConfigured: 'OAuthクライアント未設定',

package/dist/ui/components/CalendarEvents.js

@@ -62,8 +62,12 @@ export function CalendarEvents({ maxEvents = 3, showLabel = true, compact = true
     const now = new Date();
     const upcomingEvents = events.filter(e => !e.allDay && e.end > now);
     const nextEvent = upcomingEvents[0];
-    if (compact && nextEvent) {
+    if (compact) {
         // Compact mode: show only the next event with start-end time
+        // If no upcoming events, show a friendly message
+        if (!nextEvent) {
+            return (_jsxs(Box, { children: [showLabel && (_jsxs(Text, { color: theme.colors.secondary, children: [i18n.tui.calendar?.label || '[CAL]', ' '] })), _jsx(Text, { color: theme.colors.textMuted, children: i18n.tui.calendar?.noUpcoming || 'No more events. Good work today!' }), withSeparator && _jsx(Text, { color: theme.colors.textMuted, children: " | " })] }));
+        }
         const isOngoing = isEventOngoing(nextEvent);
         const timeDisplay = `${formatEventTime(nextEvent.start)}-${formatEventTime(nextEvent.end)}`;
         // Truncate title if too long

package/dist/ui/components/CalendarModal.js

@@ -1,20 +1,29 @@
-import { jsxs as _jsxs, jsx as _jsx } from "react/jsx-runtime";
-import { useState, useEffect } from 'react';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useState, useEffect, useMemo } from 'react';
 import { Box, Text, useInput } from 'ink';
 import { t } from '../../i18n/index.js';
 import { useTheme } from '../theme/index.js';
 import { isCalendarEnabled, getCalendarConfig, getCalendarType } from '../../config.js';
-import { getCalendarEvents, getTodayEvents, formatEventTime, isEventOngoing, } from '../../calendar/index.js';
-const VISIBLE_LINES = 12;
+import { getCalendarEvents, getEventsForDate, formatEventTime, isEventOngoing, } from '../../calendar/index.js';
+const WEEKDAYS_EN = ['Sun', 'Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat'];
+const WEEKDAYS_JA = ['日', '月', '火', '水', '木', '金', '土'];
+const VISIBLE_EVENTS = 5;
 export function CalendarModal({ onClose }) {
     const theme = useTheme();
     const i18n = t();
     const [events, setEvents] = useState([]);
+    const [allEvents, setAllEvents] = useState([]);
     const [isLoading, setIsLoading] = useState(true);
     const [scrollOffset, setScrollOffset] = useState(0);
+    const [selectedDate, setSelectedDate] = useState(new Date());
+    const [viewMonth, setViewMonth] = useState(new Date());
+    const [mode, setMode] = useState('calendar');
     const calendarEnabled = isCalendarEnabled();
     const config = getCalendarConfig();
     const calendarType = getCalendarType();
+    const isJapanese = i18n.tui.calendar?.yesterday === '昨日';
+    const weekdays = isJapanese ? WEEKDAYS_JA : WEEKDAYS_EN;
+    // Load all events on mount
     useEffect(() => {
         if (!calendarEnabled) {
             setIsLoading(false);
@@ -23,9 +32,9 @@ export function CalendarModal({ onClose }) {
         let mounted = true;
         const loadEvents = async () => {
             try {
-                await getCalendarEvents();
+                const loadedEvents = await getCalendarEvents();
                 if (mounted) {
-                    setEvents(getTodayEvents());
+                    setAllEvents(loadedEvents);
                     setIsLoading(false);
                 }
             }
@@ -40,17 +49,163 @@ export function CalendarModal({ onClose }) {
             mounted = false;
         };
     }, [calendarEnabled]);
-    const maxScroll = Math.max(0, events.length - VISIBLE_LINES);
+    // Update events when selected date changes
+    useEffect(() => {
+        if (!isLoading) {
+            const today = new Date();
+            today.setHours(0, 0, 0, 0);
+            const selected = new Date(selectedDate);
+            selected.setHours(0, 0, 0, 0);
+            const dayOffset = Math.round((selected.getTime() - today.getTime()) / (1000 * 60 * 60 * 24));
+            setEvents(getEventsForDate(dayOffset));
+            setScrollOffset(0);
+        }
+    }, [selectedDate, isLoading, allEvents]);
+    // Generate calendar grid for the view month
+    const calendarGrid = useMemo(() => {
+        const year = viewMonth.getFullYear();
+        const month = viewMonth.getMonth();
+        const firstDay = new Date(year, month, 1);
+        const lastDay = new Date(year, month + 1, 0);
+        const startDayOfWeek = firstDay.getDay();
+        const daysInMonth = lastDay.getDate();
+        const grid = [];
+        let currentDay = 1;
+        for (let week = 0; week < 6; week++) {
+            const row = [];
+            for (let day = 0; day < 7; day++) {
+                if (week === 0 && day < startDayOfWeek) {
+                    row.push(null);
+                }
+                else if (currentDay > daysInMonth) {
+                    row.push(null);
+                }
+                else {
+                    row.push(currentDay);
+                    currentDay++;
+                }
+            }
+            grid.push(row);
+            if (currentDay > daysInMonth)
+                break;
+        }
+        return grid;
+    }, [viewMonth]);
+    // Check if a date has events
+    const hasEventsOnDay = (day) => {
+        const date = new Date(viewMonth.getFullYear(), viewMonth.getMonth(), day);
+        const nextDate = new Date(viewMonth.getFullYear(), viewMonth.getMonth(), day + 1);
+        return allEvents.some(event => (event.start >= date && event.start < nextDate) ||
+            (event.start < date && event.end >= date));
+    };
+    // Check if a date is today
+    const isToday = (day) => {
+        const today = new Date();
+        return day === today.getDate() &&
+            viewMonth.getMonth() === today.getMonth() &&
+            viewMonth.getFullYear() === today.getFullYear();
+    };
+    // Check if a date is selected
+    const isSelected = (day) => {
+        return day === selectedDate.getDate() &&
+            viewMonth.getMonth() === selectedDate.getMonth() &&
+            viewMonth.getFullYear() === selectedDate.getFullYear();
+    };
+    const maxScroll = Math.max(0, events.length - VISIBLE_EVENTS);
     useInput((input, key) => {
-        if (input === 'j' || key.downArrow) {
-            setScrollOffset(prev => Math.min(prev + 1, maxScroll));
+        // Events mode: scroll through events
+        if (mode === 'events') {
+            if (input === 'j' || key.downArrow) {
+                setScrollOffset(prev => Math.min(prev + 1, maxScroll));
+                return;
+            }
+            if (input === 'k' || key.upArrow) {
+                setScrollOffset(prev => Math.max(prev - 1, 0));
+                return;
+            }
+            if (key.escape || input === 'q') {
+                setMode('calendar');
+                return;
+            }
+            return;
+        }
+        // Calendar mode: navigate dates
+        if (input === 'h' || key.leftArrow) {
+            setSelectedDate(prev => {
+                const newDate = new Date(prev);
+                newDate.setDate(newDate.getDate() - 1);
+                if (newDate.getMonth() !== viewMonth.getMonth()) {
+                    setViewMonth(new Date(newDate.getFullYear(), newDate.getMonth(), 1));
+                }
+                return newDate;
+            });
+            return;
+        }
+        if (input === 'l' || key.rightArrow) {
+            setSelectedDate(prev => {
+                const newDate = new Date(prev);
+                newDate.setDate(newDate.getDate() + 1);
+                if (newDate.getMonth() !== viewMonth.getMonth()) {
+                    setViewMonth(new Date(newDate.getFullYear(), newDate.getMonth(), 1));
+                }
+                return newDate;
+            });
             return;
         }
         if (input === 'k' || key.upArrow) {
-            setScrollOffset(prev => Math.max(prev - 1, 0));
+            setSelectedDate(prev => {
+                const newDate = new Date(prev);
+                newDate.setDate(newDate.getDate() - 7);
+                if (newDate.getMonth() !== viewMonth.getMonth()) {
+                    setViewMonth(new Date(newDate.getFullYear(), newDate.getMonth(), 1));
+                }
+                return newDate;
+            });
+            return;
+        }
+        if (input === 'j' || key.downArrow) {
+            setSelectedDate(prev => {
+                const newDate = new Date(prev);
+                newDate.setDate(newDate.getDate() + 7);
+                if (newDate.getMonth() !== viewMonth.getMonth()) {
+                    setViewMonth(new Date(newDate.getFullYear(), newDate.getMonth(), 1));
+                }
+                return newDate;
+            });
+            return;
+        }
+        // Enter events mode
+        if (key.return && events.length > 0) {
+            setMode('events');
             return;
         }
-        if (key.escape || key.return || input === 'q' || input === ' ') {
+        // Previous/Next month
+        if (input === 'H') {
+            setViewMonth(prev => new Date(prev.getFullYear(), prev.getMonth() - 1, 1));
+            setSelectedDate(prev => {
+                const newDate = new Date(prev);
+                newDate.setMonth(newDate.getMonth() - 1);
+                return newDate;
+            });
+            return;
+        }
+        if (input === 'L') {
+            setViewMonth(prev => new Date(prev.getFullYear(), prev.getMonth() + 1, 1));
+            setSelectedDate(prev => {
+                const newDate = new Date(prev);
+                newDate.setMonth(newDate.getMonth() + 1);
+                return newDate;
+            });
+            return;
+        }
+        // Go to today
+        if (input === 't') {
+            const today = new Date();
+            setSelectedDate(today);
+            setViewMonth(new Date(today.getFullYear(), today.getMonth(), 1));
+            return;
+        }
+        if (key.escape || input === 'q' || input === ' ') {
             onClose();
             return;
         }
@@ -60,14 +215,61 @@ export function CalendarModal({ onClose }) {
     const calendarName = calendarType === 'oauth' && config?.oauth
         ? config.oauth.calendarName
         : config?.name || 'Calendar';
-    const visibleEvents = events.slice(scrollOffset, scrollOffset + VISIBLE_LINES);
+    // Format month header
+    const monthNames = isJapanese
+        ? ['1月', '2月', '3月', '4月', '5月', '6月', '7月', '8月', '9月', '10月', '11月', '12月']
+        : ['January', 'February', 'March', 'April', 'May', 'June', 'July', 'August', 'September', 'October', 'November', 'December'];
+    const monthHeader = isJapanese
+        ? `${viewMonth.getFullYear()}年 ${monthNames[viewMonth.getMonth()]}`
+        : `${monthNames[viewMonth.getMonth()]} ${viewMonth.getFullYear()}`;
+    // Format selected date
+    const formatSelectedDate = () => {
+        const today = new Date();
+        today.setHours(0, 0, 0, 0);
+        const selected = new Date(selectedDate);
+        selected.setHours(0, 0, 0, 0);
+        const diff = Math.round((selected.getTime() - today.getTime()) / (1000 * 60 * 60 * 24));
+        if (diff === -1)
+            return i18n.tui.calendar?.yesterday || 'Yesterday';
+        if (diff === 0)
+            return i18n.tui.calendar?.today || 'Today';
+        if (diff === 1)
+            return i18n.tui.calendar?.tomorrow || 'Tomorrow';
+        if (isJapanese) {
+            return `${selectedDate.getMonth() + 1}/${selectedDate.getDate()} (${weekdays[selectedDate.getDay()]})`;
+        }
+        return `${monthNames[selectedDate.getMonth()].slice(0, 3)} ${selectedDate.getDate()}`;
+    };
+    const visibleEvents = events.slice(scrollOffset, scrollOffset + VISIBLE_EVENTS);
     const showScrollUp = scrollOffset > 0;
     const showScrollDown = scrollOffset < maxScroll;
-    return (_jsxs(Box, { flexDirection: "column", borderStyle: theme.borders.modal, borderColor: theme.colors.borderActive, paddingX: 2, paddingY: 1, children: [_jsx(Box, { justifyContent: "center", marginBottom: 1, children: _jsxs(Text, { bold: true, color: theme.colors.secondary, children: [formatTitle(i18n.tui.calendar?.modalTitle || "Today's Events"), " - ", calendarName] }) }), _jsxs(Box, { flexDirection: "column", height: VISIBLE_LINES + 2, children: [showScrollUp && (_jsx(Text, { color: theme.colors.textMuted, children: "  \u25B2 scroll up (k)" })), !showScrollUp && _jsx(Text, { children: " " }), !calendarEnabled ? (_jsxs(Box, { flexDirection: "column", children: [_jsx(Text, { color: theme.colors.textMuted, children: i18n.tui.calendar?.notConfigured || 'Calendar not configured.' }), _jsx(Text, { color: theme.colors.textMuted, children: " " }), _jsx(Text, { color: theme.colors.text, children: i18n.tui.calendar?.setupHint || 'Run "floq calendar --help" to set up.' })] })) : isLoading ? (_jsx(Text, { color: theme.colors.textMuted, children: "Loading..." })) : events.length === 0 ? (_jsx(Text, { color: theme.colors.textMuted, children: i18n.tui.calendar?.noEvents || 'No events today' })) : (visibleEvents.map((event, index) => {
-                        const isOngoing = isEventOngoing(event);
-                        const timeStr = event.allDay
-                            ? (i18n.tui.calendar?.allDay || 'All day')
-                            : `${formatEventTime(event.start)} - ${formatEventTime(event.end)}`;
-                        return (_jsxs(Box, { children: [_jsx(Text, { color: isOngoing ? theme.colors.accent : theme.colors.secondary, children: timeStr.padEnd(15) }), _jsx(Text, { color: theme.colors.text, children: event.title }), event.location && (_jsxs(Text, { color: theme.colors.textMuted, children: [" (", event.location, ")"] }))] }, event.id || index));
-                    })), showScrollDown && (_jsx(Text, { color: theme.colors.textMuted, children: "  \u25BC scroll down (j)" })), !showScrollDown && _jsx(Text, { children: " " })] }), _jsx(Box, { justifyContent: "center", marginTop: 1, children: _jsxs(Text, { color: theme.colors.textMuted, children: [maxScroll > 0 ? 'j/k: scroll | ' : '', "Esc/q: ", i18n.tui.help.closeHint?.replace('Esc/q: ', '') || 'close'] }) })] }));
+    return (_jsxs(Box, { flexDirection: "column", borderStyle: theme.borders.modal, borderColor: theme.colors.borderActive, paddingX: 2, paddingY: 1, children: [_jsx(Box, { justifyContent: "center", marginBottom: 1, children: _jsx(Text, { bold: true, color: theme.colors.secondary, children: formatTitle(calendarName) }) }), !calendarEnabled ? (_jsxs(Box, { flexDirection: "column", children: [_jsx(Text, { color: theme.colors.textMuted, children: i18n.tui.calendar?.notConfigured || 'Calendar not configured.' }), _jsx(Text, { color: theme.colors.textMuted, children: " " }), _jsx(Text, { color: theme.colors.text, children: i18n.tui.calendar?.setupHint || 'Run "floq calendar --help" to set up.' })] })) : isLoading ? (_jsx(Text, { color: theme.colors.textMuted, children: "Loading..." })) : (_jsxs(Box, { flexDirection: "column", children: [_jsxs(Box, { flexDirection: "column", alignItems: "center", children: [_jsxs(Box, { marginBottom: 1, children: [_jsx(Text, { color: theme.colors.text, children: '◀ ' }), _jsx(Text, { bold: true, color: theme.colors.text, children: monthHeader }), _jsx(Text, { color: theme.colors.text, children: ' ▶' })] }), _jsx(Box, { children: weekdays.map((day, i) => (_jsx(Box, { width: 4, justifyContent: "center", children: _jsx(Text, { color: i === 0 ? theme.colors.accent : (i === 6 ? theme.colors.secondary : theme.colors.textMuted), children: day }) }, day))) }), calendarGrid.map((week, weekIndex) => (_jsx(Box, { children: week.map((day, dayIndex) => {
+                                    if (day === null) {
+                                        return _jsx(Box, { width: 4, children: _jsx(Text, { children: " " }) }, dayIndex);
+                                    }
+                                    const selected = isSelected(day);
+                                    const today = isToday(day);
+                                    const hasEvents = hasEventsOnDay(day);
+                                    const isSunday = dayIndex === 0;
+                                    const isSaturday = dayIndex === 6;
+                                    let color = theme.colors.text;
+                                    if (isSunday)
+                                        color = theme.colors.accent;
+                                    else if (isSaturday)
+                                        color = theme.colors.secondary;
+                                    const dayStr = day.toString().padStart(2, ' ');
+                                    return (_jsx(Box, { width: 4, justifyContent: "center", children: selected ? (_jsx(Text, { backgroundColor: theme.colors.accent, color: theme.colors.background, children: hasEvents ? `${dayStr}*` : `${dayStr} ` })) : today ? (_jsx(Text, { bold: true, underline: true, color: color, children: hasEvents ? `${dayStr}*` : `${dayStr} ` })) : (_jsx(Text, { color: color, children: hasEvents ? `${dayStr}*` : `${dayStr} ` })) }, dayIndex));
+                                }) }, weekIndex)))] }), _jsx(Box, { marginY: 1, justifyContent: "center", children: _jsx(Text, { color: theme.colors.border, children: '─'.repeat(28) }) }), _jsxs(Box, { flexDirection: "column", alignItems: "center", children: [_jsx(Box, { marginBottom: 1, children: _jsxs(Text, { bold: true, color: mode === 'events' ? theme.colors.accent : theme.colors.secondary, children: [formatSelectedDate(), mode === 'events' ? ' *' : ''] }) }), _jsxs(Box, { flexDirection: "column", width: 28, children: [showScrollUp && (_jsx(Text, { color: theme.colors.textMuted, children: "  \u25B2 (k)" })), events.length === 0 ? (_jsx(Box, { justifyContent: "center", children: _jsx(Text, { color: theme.colors.textMuted, children: i18n.tui.calendar?.noEventsForDay || 'No events' }) })) : (visibleEvents.map((event, index) => {
+                                        const isOngoing = isEventOngoing(event);
+                                        const timeStr = event.allDay
+                                            ? (i18n.tui.calendar?.allDay || 'All day')
+                                            : formatEventTime(event.start);
+                                        const maxTitleLen = 18;
+                                        const title = event.title.length > maxTitleLen
+                                            ? event.title.slice(0, maxTitleLen - 1) + '…'
+                                            : event.title;
+                                        return (_jsxs(Box, { children: [_jsx(Text, { color: isOngoing ? theme.colors.accent : theme.colors.secondary, children: timeStr.padEnd(8) }), _jsx(Text, { color: theme.colors.text, children: title })] }, event.id || index));
+                                    })), showScrollDown && (_jsx(Text, { color: theme.colors.textMuted, children: "  \u25BC (j)" })), events.length > VISIBLE_EVENTS && (_jsx(Box, { justifyContent: "center", children: _jsxs(Text, { color: theme.colors.textMuted, children: ["+", events.length - VISIBLE_EVENTS, " more"] }) }))] })] })] })), _jsx(Box, { justifyContent: "center", marginTop: 1, children: _jsx(Text, { color: theme.colors.textMuted, children: mode === 'events'
+                        ? 'j/k: scroll | q/Esc: back'
+                        : `hjkl: move | H/L: month | t: today${events.length > 0 ? ' | Enter: events' : ''} | q: close` }) })] }));
 }

package/dist/ui/components/GtdDQ.js

@@ -1023,7 +1023,7 @@ export function GtdDQ({ onOpenSettings }) {
             setMessage(focusMode ? 'Focus mode off' : 'Focus mode on');
             return;
         }
-    });
+    }, { isActive: mode !== 'calendar' });
     const tursoEnabled = isTursoEnabled();
     // Get parent project for display
     const getParentProject = (parentId) => {

package/dist/ui/components/GtdMario.js

@@ -918,7 +918,7 @@ export function GtdMario({ onOpenSettings }) {
             toggleFocusMode();
             return;
         }
-    });
+    }, { isActive: mode !== 'calendar' });
     const tursoEnabled = isTursoEnabled();
     const getParentProject = (parentId) => {
         if (!parentId)

package/dist/ui/components/KanbanBoard.js

@@ -714,7 +714,7 @@ export function KanbanBoard({ onSwitchToGtd, onOpenSettings }) {
             });
             return;
         }
-    });
+    }, { isActive: mode !== 'calendar' });
     // Help modal overlay
     if (mode === 'help') {
         return (_jsx(Box, { flexDirection: "column", padding: 1, children: _jsx(HelpModal, { onClose: () => setMode('normal'), isKanban: true }) }));

package/dist/ui/components/KanbanDQ.js

@@ -495,7 +495,7 @@ export function KanbanDQ({ onOpenSettings }) {
             setMessage(i18n.tui.refreshed);
             return;
         }
-    });
+    }, { isActive: mode !== 'calendar' });
     const tursoEnabled = isTursoEnabled();
     // Help modal overlay
     if (mode === 'help') {

package/dist/ui/components/KanbanMario.js

@@ -417,7 +417,7 @@ export function KanbanMario({ onOpenSettings }) {
             setMessage(i18n.tui.refreshed);
             return;
         }
-    });
+    }, { isActive: mode !== 'calendar' });
     const tursoEnabled = isTursoEnabled();
     // Help modal overlay
     if (mode === 'help') {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "floq",
-  "version": "1.3.0",
+  "version": "1.3.2",
   "description": "Floq - Getting Things Done Task Manager with MS-DOS style themes",
   "type": "module",
   "main": "dist/index.js",