epoch-tui 0.1.3 → 0.1.5

package/dist/index.js

@@ -1686,51 +1686,143 @@ var useTheme = () => {
 
 // src/contexts/AppContext.tsx
 import {
-  createContext as createContext3,
-  useContext as useContext3,
+  createContext as createContext4,
+  useContext as useContext4,
   useEffect as useEffect3,
-  useState as useState3,
+  useState as useState4,
   useRef as useRef2,
-  useCallback as useCallback2
+  useCallback as useCallback3
 } from "react";
+
+// src/contexts/UndoContext.tsx
+import { createContext as createContext3, useContext as useContext3, useState as useState3, useCallback as useCallback2 } from "react";
 import { jsx as jsx3 } from "react/jsx-runtime";
-var AppContext = createContext3(void 0);
+var UndoContext = createContext3(void 0);
+var MAX_UNDO_STACK_SIZE = 50;
+function deepClone(obj) {
+  if (obj === null || typeof obj !== "object") {
+    return obj;
+  }
+  if (obj instanceof Date) {
+    return new Date(obj.getTime());
+  }
+  if (Array.isArray(obj)) {
+    return obj.map((item) => deepClone(item));
+  }
+  const cloned = {};
+  for (const key in obj) {
+    if (obj.hasOwnProperty(key)) {
+      cloned[key] = deepClone(obj[key]);
+    }
+  }
+  return cloned;
+}
+var UndoProvider = ({ children }) => {
+  const [undoStack, setUndoStack] = useState3([]);
+  const pushUndoAction = useCallback2(
+    (type, tasks, timeline) => {
+      const action = {
+        type,
+        timestamp: /* @__PURE__ */ new Date(),
+        previousTasks: deepClone(tasks),
+        previousTimeline: deepClone(timeline)
+      };
+      setUndoStack((prev) => {
+        const newStack = [...prev, action];
+        if (newStack.length > MAX_UNDO_STACK_SIZE) {
+          newStack.shift();
+        }
+        return newStack;
+      });
+    },
+    []
+  );
+  const undo = useCallback2(() => {
+    if (undoStack.length === 0) {
+      return null;
+    }
+    const action = undoStack[undoStack.length - 1];
+    setUndoStack((prev) => prev.slice(0, -1));
+    return action;
+  }, [undoStack]);
+  const clearUndoStack = useCallback2(() => {
+    setUndoStack([]);
+  }, []);
+  return /* @__PURE__ */ jsx3(
+    UndoContext.Provider,
+    {
+      value: {
+        pushUndoAction,
+        undo,
+        canUndo: undoStack.length > 0,
+        clearUndoStack
+      },
+      children
+    }
+  );
+};
+var useUndo = () => {
+  const context = useContext3(UndoContext);
+  if (!context) {
+    throw new Error("useUndo must be used within UndoProvider");
+  }
+  return context;
+};
+
+// src/contexts/AppContext.tsx
+import { jsx as jsx4 } from "react/jsx-runtime";
+var AppContext = createContext4(void 0);
 var AppProvider = ({ children }) => {
   const { data, save, saveNow } = useStorage();
+  const { pushUndoAction, undo, canUndo } = useUndo();
   const today = /* @__PURE__ */ new Date();
-  const [selectedDate, setSelectedDate] = useState3({
+  const [selectedDate, setSelectedDate] = useState4({
     year: today.getFullYear(),
     month: today.getMonth(),
     day: today.getDate()
   });
-  const [tasks, setTasks] = useState3({});
-  const [timeline, setTimeline] = useState3(
+  const [tasks, setTasks] = useState4({});
+  const [timeline, setTimeline] = useState4(
     {}
   );
-  const [activePane, setActivePane] = useState3("tasks");
-  const [showHelp, setShowHelp] = useState3(false);
+  const [activePane, setActivePane] = useState4("tasks");
+  const [showHelp, setShowHelp] = useState4(false);
   const isInputModeRef = useRef2(false);
-  const [isInputModeState, setIsInputModeState] = useState3(false);
-  const [showOverview, setShowOverview] = useState3(false);
-  const setIsInputMode = useCallback2((mode) => {
+  const [isInputModeState, setIsInputModeState] = useState4(false);
+  const [showOverview, setShowOverview] = useState4(false);
+  const setIsInputMode = useCallback3((mode) => {
     isInputModeRef.current = mode;
     setIsInputModeState(mode);
   }, []);
   const isInputMode = isInputModeRef.current;
-  const [overviewMonth, setOverviewMonth] = useState3({
+  const [overviewMonth, setOverviewMonth] = useState4({
     year: today.getFullYear(),
     month: today.getMonth()
   });
-  const [exitConfirmation, setExitConfirmation] = useState3(false);
-  const [showThemeDialog, setShowThemeDialog] = useState3(false);
-  const [showClearTimelineDialog, setShowClearTimelineDialog] = useState3(false);
-  const clearTimelineForDate = useCallback2((dateStr) => {
+  const [exitConfirmation, setExitConfirmation] = useState4(false);
+  const [showThemeDialog, setShowThemeDialog] = useState4(false);
+  const [showClearTimelineDialog, setShowClearTimelineDialog] = useState4(false);
+  const clearTimelineForDate = useCallback3((dateStr) => {
+    pushUndoAction("TIMELINE_CLEAR", tasks, timeline);
     setTimeline((prev) => {
       const newTimeline = { ...prev };
       delete newTimeline[dateStr];
       return newTimeline;
     });
-  }, []);
+  }, [pushUndoAction, tasks, timeline]);
+  const pushUndoableAction = useCallback3(
+    (actionType) => {
+      pushUndoAction(actionType, tasks, timeline);
+    },
+    [pushUndoAction, tasks, timeline]
+  );
+  const performUndo = useCallback3(() => {
+    const action = undo();
+    if (action) {
+      setTasks(action.previousTasks);
+      setTimeline(action.previousTimeline);
+    }
+  }, [undo]);
   const initialLoadDone = useRef2(false);
   const dataRef = useRef2(data);
   const saveRef = useRef2(save);
@@ -1754,7 +1846,7 @@ var AppProvider = ({ children }) => {
       });
     }
   }, [tasks, timeline]);
-  return /* @__PURE__ */ jsx3(
+  return /* @__PURE__ */ jsx4(
     AppContext.Provider,
     {
       value: {
@@ -1782,14 +1874,17 @@ var AppProvider = ({ children }) => {
         setShowClearTimelineDialog,
         clearTimelineForDate,
         isModalOpen: showHelp || showThemeDialog || showOverview || showClearTimelineDialog,
-        saveNow
+        saveNow,
+        pushUndoableAction,
+        performUndo,
+        canUndo
       },
       children
     }
   );
 };
 var useApp = () => {
-  const context = useContext3(AppContext);
+  const context = useContext4(AppContext);
   if (!context) {
     throw new Error("useApp must be used within AppProvider");
   }
@@ -1800,7 +1895,7 @@ var useApp = () => {
 import { useInput } from "ink";
 import { useEffect as useEffect4 } from "react";
 var useKeyboardNav = () => {
-  const { showHelp, setShowHelp, activePane, setActivePane, isInputMode, showOverview, setShowOverview, overviewMonth, setOverviewMonth, exitConfirmation, setExitConfirmation, showThemeDialog, setShowThemeDialog, showClearTimelineDialog, setShowClearTimelineDialog, saveNow } = useApp();
+  const { showHelp, setShowHelp, activePane, setActivePane, isInputMode, showOverview, setShowOverview, overviewMonth, setOverviewMonth, exitConfirmation, setExitConfirmation, showThemeDialog, setShowThemeDialog, showClearTimelineDialog, setShowClearTimelineDialog, saveNow, performUndo, canUndo } = useApp();
   useEffect4(() => {
     if (exitConfirmation) {
       const timer = setTimeout(() => {
@@ -1840,6 +1935,10 @@ var useKeyboardNav = () => {
         return;
       }
     }
+    if (key.ctrl && input === "u" && canUndo) {
+      performUndo();
+      return;
+    }
     if (input === ":") {
       setShowOverview(!showOverview);
       return;
@@ -1875,11 +1974,11 @@ var useKeyboardNav = () => {
 };
 
 // src/hooks/useTerminalSize.ts
-import { useState as useState4, useEffect as useEffect5 } from "react";
+import { useState as useState5, useEffect as useEffect5 } from "react";
 import { useStdout } from "ink";
 var useTerminalSize = () => {
   const { stdout } = useStdout();
-  const [size, setSize] = useState4({
+  const [size, setSize] = useState5({
     width: stdout?.columns || 100,
     height: stdout?.rows || 30
   });
@@ -1905,11 +2004,11 @@ var useTerminalSize = () => {
 
 // src/components/layout/ThreeColumnLayout.tsx
 import { Box, Text } from "ink";
-import { jsx as jsx4, jsxs } from "react/jsx-runtime";
-var VerticalSeparator = ({ color, backgroundColor, height, isFocused }) => {
-  const char = isFocused ? "\u2503" : "\u2502";
-  const lines = height ? Array(height).fill(char) : [char];
-  return /* @__PURE__ */ jsx4(Box, { flexDirection: "column", backgroundColor, children: lines.map((c, i) => /* @__PURE__ */ jsx4(Text, { color, backgroundColor, children: c }, i)) });
+import { jsx as jsx5, jsxs } from "react/jsx-runtime";
+var ThinSeparator = ({ color, backgroundColor, height }) => {
+  const line = "\u2502";
+  const lines = Array(height).fill(line).join("\n");
+  return /* @__PURE__ */ jsx5(Box, { width: 1, flexShrink: 0, backgroundColor, children: /* @__PURE__ */ jsx5(Text, { color, children: lines }) });
 };
 var ThreeColumnLayout = ({
   leftPane,
@@ -1921,8 +2020,8 @@ var ThreeColumnLayout = ({
   activePane
 }) => {
   const { theme } = useTheme();
-  const focusedColor = theme.colors.focusIndicator;
-  const normalColor = theme.colors.border;
+  const leftSeparatorColor = activePane === "calendar" || activePane === "tasks" ? theme.colors.focusIndicator : theme.colors.separator;
+  const rightSeparatorColor = activePane === "tasks" || activePane === "timeline" ? theme.colors.focusIndicator : theme.colors.separator;
   const bgColor = theme.name !== "terminal" ? theme.colors.background : void 0;
   return /* @__PURE__ */ jsxs(
     Box,
@@ -1932,7 +2031,7 @@ var ThreeColumnLayout = ({
       height,
       backgroundColor: bgColor,
       children: [
-        /* @__PURE__ */ jsx4(
+        /* @__PURE__ */ jsx5(
           Box,
           {
             width: leftWidth,
@@ -1942,16 +2041,15 @@ var ThreeColumnLayout = ({
             children: leftPane
           }
         ),
-        /* @__PURE__ */ jsx4(
-          VerticalSeparator,
+        /* @__PURE__ */ jsx5(
+          ThinSeparator,
           {
-            isFocused: activePane === "calendar" || activePane === "tasks",
-            color: activePane === "calendar" || activePane === "tasks" ? focusedColor : normalColor,
+            color: leftSeparatorColor,
             backgroundColor: bgColor,
-            height
+            height: height || 30
           }
         ),
-        /* @__PURE__ */ jsx4(
+        /* @__PURE__ */ jsx5(
           Box,
           {
             flexGrow: 1,
@@ -1961,22 +2059,22 @@ var ThreeColumnLayout = ({
             children: centerPane
           }
         ),
-        /* @__PURE__ */ jsx4(
-          VerticalSeparator,
+        /* @__PURE__ */ jsx5(
+          ThinSeparator,
           {
-            isFocused: activePane === "tasks" || activePane === "timeline",
-            color: activePane === "tasks" || activePane === "timeline" ? focusedColor : normalColor,
+            color: rightSeparatorColor,
             backgroundColor: bgColor,
-            height
+            height: height || 30
           }
         ),
-        /* @__PURE__ */ jsx4(
+        /* @__PURE__ */ jsx5(
           Box,
           {
             width: rightWidth,
             flexShrink: 0.3,
             flexDirection: "column",
             backgroundColor: bgColor,
+            overflow: "hidden",
             children: rightPane
           }
         )
@@ -1986,7 +2084,7 @@ var ThreeColumnLayout = ({
 };
 
 // src/components/calendar/CalendarPane.tsx
-import { useState as useState5, useEffect as useEffect6 } from "react";
+import { useState as useState6, useEffect as useEffect6 } from "react";
 import { Box as Box6, useInput as useInput2 } from "ink";
 import { addDays, addWeeks, subDays, subWeeks } from "date-fns";
 
@@ -1995,7 +2093,7 @@ import { Box as Box2 } from "ink";
 
 // src/components/common/ThemedText.tsx
 import { Text as Text2 } from "ink";
-import { jsx as jsx5 } from "react/jsx-runtime";
+import { jsx as jsx6 } from "react/jsx-runtime";
 var ThemedText = ({
   children,
   backgroundColor,
@@ -2003,11 +2101,11 @@ var ThemedText = ({
 }) => {
   const { theme } = useTheme();
   const bgColor = backgroundColor ?? (theme.name !== "terminal" ? theme.colors.background : void 0);
-  return /* @__PURE__ */ jsx5(Text2, { ...props, backgroundColor: bgColor, children });
+  return /* @__PURE__ */ jsx6(Text2, { ...props, backgroundColor: bgColor, children });
 };
 
 // src/components/layout/Pane.tsx
-import { jsx as jsx6, jsxs as jsxs2 } from "react/jsx-runtime";
+import { jsx as jsx7, jsxs as jsxs2 } from "react/jsx-runtime";
 var Pane = ({
   children,
   title,
@@ -2027,8 +2125,9 @@ var Pane = ({
       paddingRight: 1,
       paddingX: 2,
       alignItems: center ? "center" : "flex-start",
+      overflow: "hidden",
       children: [
-        title && /* @__PURE__ */ jsx6(Box2, { marginBottom: 1, children: /* @__PURE__ */ jsx6(
+        title && /* @__PURE__ */ jsx7(Box2, { marginBottom: 1, children: /* @__PURE__ */ jsx7(
           ThemedText,
           {
             backgroundColor: isFocused ? theme.colors.focusIndicator : void 0,
@@ -2037,12 +2136,13 @@ var Pane = ({
             children: isFocused ? ` ${title.toUpperCase()} ` : title
           }
         ) }),
-        /* @__PURE__ */ jsx6(
+        /* @__PURE__ */ jsx7(
           Box2,
           {
             flexDirection: "column",
             flexGrow: 1,
-            overflowY: "hidden",
+            width: "100%",
+            overflow: "hidden",
             alignItems: center ? "center" : "flex-start",
             children
           }
@@ -2057,7 +2157,7 @@ import { Box as Box4 } from "ink";
 
 // src/components/calendar/DayCell.tsx
 import { Box as Box3 } from "ink";
-import { jsx as jsx7, jsxs as jsxs3 } from "react/jsx-runtime";
+import { jsx as jsx8, jsxs as jsxs3 } from "react/jsx-runtime";
 var DayCell = ({ day }) => {
   const { theme } = useTheme();
   let textColor = theme.colors.calendarDayOtherMonth;
@@ -2074,7 +2174,7 @@ var DayCell = ({ day }) => {
   const dayNum = day.date.day.toString().padStart(2, " ");
   const leftBracket = isSelected ? "[" : isToday2 ? "(" : " ";
   const rightBracket = isSelected ? "]" : isToday2 ? ")" : " ";
-  return /* @__PURE__ */ jsx7(Box3, { width: 4, children: /* @__PURE__ */ jsxs3(ThemedText, { color: textColor, children: [
+  return /* @__PURE__ */ jsx8(Box3, { width: 4, children: /* @__PURE__ */ jsxs3(ThemedText, { color: textColor, children: [
     leftBracket,
     dayNum,
     rightBracket
@@ -2082,22 +2182,22 @@ var DayCell = ({ day }) => {
 };
 
 // src/components/calendar/MonthView.tsx
-import { jsx as jsx8, jsxs as jsxs4 } from "react/jsx-runtime";
+import { jsx as jsx9, jsxs as jsxs4 } from "react/jsx-runtime";
 var MonthView = ({ calendarView }) => {
   const { theme } = useTheme();
   const dayHeaders = ["Mo", "Tu", "We", "Th", "Fr", "Sa", "Su"];
   return /* @__PURE__ */ jsxs4(Box4, { flexDirection: "column", children: [
-    /* @__PURE__ */ jsx8(Box4, { marginBottom: 1, children: dayHeaders.map((day) => /* @__PURE__ */ jsx8(Box4, { width: 4, children: /* @__PURE__ */ jsx8(ThemedText, { color: theme.colors.calendarHeader, bold: true, children: day }) }, day)) }),
-    calendarView.weeks.map((week, weekIdx) => /* @__PURE__ */ jsx8(Box4, { marginBottom: 0, children: week.map((day) => /* @__PURE__ */ jsx8(DayCell, { day }, day.dateString)) }, weekIdx))
+    /* @__PURE__ */ jsx9(Box4, { marginBottom: 1, children: dayHeaders.map((day) => /* @__PURE__ */ jsx9(Box4, { width: 4, children: /* @__PURE__ */ jsx9(ThemedText, { color: theme.colors.calendarHeader, bold: true, children: day }) }, day)) }),
+    calendarView.weeks.map((week, weekIdx) => /* @__PURE__ */ jsx9(Box4, { marginBottom: 0, children: week.map((day) => /* @__PURE__ */ jsx9(DayCell, { day }, day.dateString)) }, weekIdx))
   ] });
 };
 
 // src/components/common/KeyboardHints.tsx
 import { Box as Box5, Text as Text3 } from "ink";
-import { jsx as jsx9, jsxs as jsxs5 } from "react/jsx-runtime";
+import { jsx as jsx10, jsxs as jsxs5 } from "react/jsx-runtime";
 var KeyboardHints = ({ hints }) => {
   const { theme } = useTheme();
-  return /* @__PURE__ */ jsx9(
+  return /* @__PURE__ */ jsx10(
     Box5,
     {
       marginTop: 1,
@@ -2106,7 +2206,7 @@ var KeyboardHints = ({ hints }) => {
       columnGap: 2,
       width: "100%",
       children: hints.map((hint, index) => /* @__PURE__ */ jsxs5(Box5, { children: [
-        /* @__PURE__ */ jsx9(Text3, { color: theme.colors.focusIndicator, bold: true, children: hint.key }),
+        /* @__PURE__ */ jsx10(Text3, { color: theme.colors.focusIndicator, bold: true, children: hint.key }),
         /* @__PURE__ */ jsxs5(Text3, { color: theme.colors.keyboardHint, children: [
           " ",
           hint.description
@@ -2210,7 +2310,7 @@ var CalendarService = class {
 var calendarService = new CalendarService();
 
 // src/components/calendar/CalendarPane.tsx
-import { jsx as jsx10, jsxs as jsxs6 } from "react/jsx-runtime";
+import { jsx as jsx11, jsxs as jsxs6 } from "react/jsx-runtime";
 var CalendarPane = () => {
   const { theme } = useTheme();
   const {
@@ -2221,7 +2321,7 @@ var CalendarPane = () => {
     isModalOpen,
     isInputMode
   } = useApp();
-  const [currentMonth, setCurrentMonth] = useState5({
+  const [currentMonth, setCurrentMonth] = useState6({
     year: selectedDate.year,
     month: selectedDate.month
   });
@@ -2307,15 +2407,15 @@ var CalendarPane = () => {
     { isActive: isFocused && !isInputMode }
   );
   const monthName = calendarService.getMonthName(currentMonth.month);
-  return /* @__PURE__ */ jsx10(
+  return /* @__PURE__ */ jsx11(
     Pane,
     {
       title: `${monthName} ${currentMonth.year}`,
       isFocused,
       center: true,
       children: /* @__PURE__ */ jsxs6(Box6, { flexDirection: "column", alignItems: "center", children: [
-        /* @__PURE__ */ jsx10(MonthView, { calendarView }),
-        /* @__PURE__ */ jsx10(
+        /* @__PURE__ */ jsx11(MonthView, { calendarView }),
+        /* @__PURE__ */ jsx11(
           KeyboardHints,
           {
             hints: [
@@ -2332,13 +2432,13 @@ var CalendarPane = () => {
 };
 
 // src/components/tasks/TasksPane.tsx
-import { useState as useState6, useEffect as useEffect8, useMemo } from "react";
+import { useState as useState7, useEffect as useEffect8, useMemo } from "react";
 import { Box as Box8, Text as Text7, useInput as useInput4 } from "ink";
 
 // src/components/common/ControlledTextInput.tsx
 import { useRef as useRef3, useEffect as useEffect7 } from "react";
 import { Text as Text5, useInput as useInput3 } from "ink";
-import { jsx as jsx11, jsxs as jsxs7 } from "react/jsx-runtime";
+import { jsx as jsx12, jsxs as jsxs7 } from "react/jsx-runtime";
 var ControlledTextInput = ({
   value,
   onChange,
@@ -2400,21 +2500,21 @@ var ControlledTextInput = ({
   const displayValue = pendingValueRef.current || "";
   const showPlaceholder = !displayValue && placeholder;
   return /* @__PURE__ */ jsxs7(Text5, { children: [
-    showPlaceholder ? /* @__PURE__ */ jsx11(Text5, { dimColor: true, color: placeholderColor, children: placeholder }) : /* @__PURE__ */ jsx11(Text5, { color, children: displayValue }),
-    focus && /* @__PURE__ */ jsx11(Text5, { backgroundColor: cursorColor, children: " " })
+    showPlaceholder ? /* @__PURE__ */ jsx12(Text5, { dimColor: true, color: placeholderColor, children: placeholder }) : /* @__PURE__ */ jsx12(Text5, { color, children: displayValue }),
+    focus && /* @__PURE__ */ jsx12(Text5, { backgroundColor: cursorColor, children: " " })
   ] });
 };
 
 // src/components/tasks/TaskHeader.tsx
 import { Box as Box7, Text as Text6 } from "ink";
-import { jsx as jsx12, jsxs as jsxs8 } from "react/jsx-runtime";
+import { jsx as jsx13, jsxs as jsxs8 } from "react/jsx-runtime";
 var TaskHeader = ({
   selectedDate,
   completionPercentage
 }) => {
   const { theme } = useTheme();
   return /* @__PURE__ */ jsxs8(Box7, { flexDirection: "column", marginBottom: 1, children: [
-    /* @__PURE__ */ jsx12(Text6, { color: theme.colors.taskHeader, children: formatDate(selectedDate, "EEEE, MMMM d, yyyy") }),
+    /* @__PURE__ */ jsx13(Text6, { color: theme.colors.taskHeader, children: formatDate(selectedDate, "EEEE, MMMM d, yyyy") }),
     /* @__PURE__ */ jsxs8(Text6, { color: theme.colors.taskHeader, children: [
       completionPercentage,
       "% completed"
@@ -2702,7 +2802,7 @@ var TimelineService = class {
 var timelineService = new TimelineService();
 
 // src/components/tasks/TasksPane.tsx
-import { Fragment, jsx as jsx13, jsxs as jsxs9 } from "react/jsx-runtime";
+import { Fragment, jsx as jsx14, jsxs as jsxs9 } from "react/jsx-runtime";
 var TasksPane = () => {
   const {
     tasks,
@@ -2713,15 +2813,16 @@ var TasksPane = () => {
     selectedDate,
     isInputMode,
     setIsInputMode,
-    isModalOpen
+    isModalOpen,
+    pushUndoableAction
   } = useApp();
   const { theme } = useTheme();
-  const [expandedIds, setExpandedIds] = useState6(/* @__PURE__ */ new Set());
-  const [selectedIndex, setSelectedIndex] = useState6(0);
-  const [editMode, setEditMode] = useState6("none");
-  const [editValue, setEditValue] = useState6("");
-  const [parentTaskId, setParentTaskId] = useState6(null);
-  const [scrollOffset, setScrollOffset] = useState6(0);
+  const [expandedIds, setExpandedIds] = useState7(/* @__PURE__ */ new Set());
+  const [selectedIndex, setSelectedIndex] = useState7(0);
+  const [editMode, setEditMode] = useState7("none");
+  const [editValue, setEditValue] = useState7("");
+  const [parentTaskId, setParentTaskId] = useState7(null);
+  const [scrollOffset, setScrollOffset] = useState7(0);
   const { height: terminalHeight } = useTerminalSize();
   const visibleRows = useMemo(() => {
     return Math.max(5, terminalHeight - 11);
@@ -2729,7 +2830,7 @@ var TasksPane = () => {
   const dateStr = getDateString(
     new Date(selectedDate.year, selectedDate.month, selectedDate.day)
   );
-  const dayTasks = tasks[dateStr] || [];
+  const dayTasks = useMemo(() => tasks[dateStr] || [], [tasks, dateStr]);
   const stats = taskService.getTaskStats(tasks, dateStr);
   const isFocused = activePane === "tasks" && !isModalOpen;
   const flatTasks = useMemo(() => {
@@ -2758,7 +2859,13 @@ var TasksPane = () => {
       }
     };
     collectParents(dayTasks);
-    setExpandedIds(allParentIds);
+    setExpandedIds((prev) => {
+      if (prev.size !== allParentIds.size) return allParentIds;
+      for (const id of allParentIds) {
+        if (!prev.has(id)) return allParentIds;
+      }
+      return prev;
+    });
   }, [dayTasks]);
   useEffect8(() => {
     setSelectedIndex(0);
@@ -2770,12 +2877,15 @@ var TasksPane = () => {
     }
   }, [flatTasks.length, selectedIndex]);
   useEffect8(() => {
-    if (selectedIndex < scrollOffset) {
-      setScrollOffset(selectedIndex);
-    } else if (selectedIndex >= scrollOffset + visibleRows) {
-      setScrollOffset(selectedIndex - visibleRows + 1);
-    }
-  }, [selectedIndex, visibleRows, scrollOffset]);
+    setScrollOffset((currentOffset) => {
+      if (selectedIndex < currentOffset) {
+        return selectedIndex;
+      } else if (selectedIndex >= currentOffset + visibleRows) {
+        return selectedIndex - visibleRows + 1;
+      }
+      return currentOffset;
+    });
+  }, [selectedIndex, visibleRows]);
   useEffect8(() => {
     setScrollOffset(0);
   }, [dateStr]);
@@ -2803,6 +2913,7 @@ var TasksPane = () => {
   const handleDeleteTask = () => {
     if (selectedTaskId) {
       try {
+        pushUndoableAction("TASK_DELETE");
         const updated = taskService.deleteTask(tasks, selectedTaskId);
         setTasks(updated);
         const updatedTimeline = timelineService.removeEventsByTaskId(
@@ -2818,6 +2929,7 @@ var TasksPane = () => {
   const handleChangeState = (newState) => {
     if (selectedTaskId && selectedTask) {
       try {
+        pushUndoableAction("TASK_UPDATE");
         const previousState = selectedTask.state;
         const updated = taskService.changeTaskState(
           tasks,
@@ -2880,6 +2992,7 @@ var TasksPane = () => {
     }
     try {
       if (editMode === "add") {
+        pushUndoableAction("TASK_ADD");
         const newTask = taskService.createTask(trimmed, dateStr);
         const newTasks = {
           ...tasks,
@@ -2888,6 +3001,7 @@ var TasksPane = () => {
         setTasks(newTasks);
         setSelectedIndex(flatTasks.length);
       } else if (editMode === "addSubtask" && parentTaskId) {
+        pushUndoableAction("TASK_ADD");
         const updated = taskService.addSubtask(tasks, parentTaskId, trimmed);
         setTasks(updated);
         const parentIndex = flatTasks.findIndex(
@@ -2897,6 +3011,7 @@ var TasksPane = () => {
           setSelectedIndex(parentIndex + 1);
         }
       } else if (editMode === "edit" && selectedTaskId) {
+        pushUndoableAction("TASK_UPDATE");
         const updated = taskService.updateTask(tasks, selectedTaskId, {
           title: trimmed
         });
@@ -3015,6 +3130,7 @@ var TasksPane = () => {
       }
       if (input === "s" && selectedTask) {
         try {
+          pushUndoableAction("TASK_UPDATE");
           if (selectedTask.startTime && !selectedTask.endTime) {
             const updated = taskService.updateTask(tasks, selectedTaskId, {
               startTime: void 0
@@ -3054,8 +3170,8 @@ var TasksPane = () => {
     },
     { isActive: isFocused && editMode === "none" }
   );
-  return /* @__PURE__ */ jsx13(Pane, { title: "Tasks", isFocused, children: /* @__PURE__ */ jsxs9(Box8, { flexDirection: "column", flexGrow: 1, width: "100%", children: [
-    /* @__PURE__ */ jsx13(
+  return /* @__PURE__ */ jsx14(Pane, { title: "Tasks", isFocused, children: /* @__PURE__ */ jsxs9(Box8, { flexDirection: "column", flexGrow: 1, width: "100%", children: [
+    /* @__PURE__ */ jsx14(
       TaskHeader,
       {
         selectedDate: new Date(selectedDate.year, selectedDate.month, selectedDate.day),
@@ -3063,8 +3179,8 @@ var TasksPane = () => {
       }
     ),
     editMode === "add" && /* @__PURE__ */ jsxs9(Box8, { marginY: 1, children: [
-      /* @__PURE__ */ jsx13(Text7, { color: theme.colors.focusIndicator, children: ">  " }),
-      /* @__PURE__ */ jsx13(
+      /* @__PURE__ */ jsx14(Text7, { color: theme.colors.focusIndicator, children: ">  " }),
+      /* @__PURE__ */ jsx14(
         ControlledTextInput,
         {
           value: editValue,
@@ -3079,9 +3195,9 @@ var TasksPane = () => {
       )
     ] }),
     editMode === "addSubtask" && /* @__PURE__ */ jsxs9(Box8, { marginY: 1, children: [
-      /* @__PURE__ */ jsx13(Text7, { color: theme.colors.focusIndicator, children: ">  " }),
-      /* @__PURE__ */ jsx13(Text7, { color: theme.colors.keyboardHint, children: "  " }),
-      /* @__PURE__ */ jsx13(
+      /* @__PURE__ */ jsx14(Text7, { color: theme.colors.focusIndicator, children: ">  " }),
+      /* @__PURE__ */ jsx14(Text7, { color: theme.colors.keyboardHint, children: "  " }),
+      /* @__PURE__ */ jsx14(
         ControlledTextInput,
         {
           value: editValue,
@@ -3095,8 +3211,8 @@ var TasksPane = () => {
         }
       )
     ] }),
-    dayTasks.length === 0 && editMode !== "add" && editMode !== "addSubtask" ? /* @__PURE__ */ jsx13(Box8, { marginY: 1, children: /* @__PURE__ */ jsx13(Text7, { color: theme.colors.keyboardHint, dimColor: true, children: "No tasks. Press 'a' to add one." }) }) : /* @__PURE__ */ jsxs9(Box8, { flexDirection: "column", marginY: 1, paddingRight: 2, children: [
-      scrollOffset > 0 && /* @__PURE__ */ jsx13(Box8, { justifyContent: "center", marginBottom: 1, children: /* @__PURE__ */ jsx13(Text7, { color: theme.colors.keyboardHint, dimColor: true, children: "-- more above --" }) }),
+    dayTasks.length === 0 && editMode !== "add" && editMode !== "addSubtask" ? /* @__PURE__ */ jsx14(Box8, { marginY: 1, children: /* @__PURE__ */ jsx14(Text7, { color: theme.colors.keyboardHint, dimColor: true, children: "No tasks. Press 'a' to add one." }) }) : /* @__PURE__ */ jsxs9(Box8, { flexDirection: "column", marginY: 1, paddingRight: 2, children: [
+      scrollOffset > 0 && /* @__PURE__ */ jsx14(Box8, { justifyContent: "center", marginBottom: 1, children: /* @__PURE__ */ jsx14(Text7, { color: theme.colors.keyboardHint, dimColor: true, children: "-- more above --" }) }),
       flatTasks.slice(scrollOffset, scrollOffset + visibleRows).map(({ task, depth }, sliceIndex) => {
         const index = scrollOffset + sliceIndex;
         const isSelected = index === selectedIndex;
@@ -3104,8 +3220,8 @@ var TasksPane = () => {
         const isEditing = editMode === "edit" && isSelected;
         if (isEditing) {
           return /* @__PURE__ */ jsxs9(Box8, { children: [
-            /* @__PURE__ */ jsx13(Text7, { color: theme.colors.focusIndicator, children: ">  " }),
-            /* @__PURE__ */ jsx13(
+            /* @__PURE__ */ jsx14(Text7, { color: theme.colors.focusIndicator, children: ">  " }),
+            /* @__PURE__ */ jsx14(
               ControlledTextInput,
               {
                 value: editValue,
@@ -3120,28 +3236,28 @@ var TasksPane = () => {
           ] }, task.id);
         }
         return /* @__PURE__ */ jsxs9(Box8, { children: [
-          /* @__PURE__ */ jsx13(
+          /* @__PURE__ */ jsx14(
             Text7,
             {
               color: isSelected ? theme.colors.focusIndicator : theme.colors.foreground,
               children: isSelected ? ">" : " "
             }
           ),
-          /* @__PURE__ */ jsx13(Text7, { children: " " }),
-          /* @__PURE__ */ jsx13(Text7, { children: "  ".repeat(depth) }),
-          /* @__PURE__ */ jsx13(
+          /* @__PURE__ */ jsx14(Text7, { children: " " }),
+          /* @__PURE__ */ jsx14(Text7, { children: "  ".repeat(depth) }),
+          /* @__PURE__ */ jsx14(
             Text7,
             {
               color: isSelected ? theme.colors.focusIndicator : getStateColor(task.state, theme),
               children: getCheckbox(task.state)
             }
           ),
-          /* @__PURE__ */ jsx13(Text7, { children: " " }),
+          /* @__PURE__ */ jsx14(Text7, { children: " " }),
           task.children.length > 0 && /* @__PURE__ */ jsxs9(Fragment, { children: [
-            /* @__PURE__ */ jsx13(Text7, { children: isExpanded ? "\u25BC" : "\u25B6" }),
-            /* @__PURE__ */ jsx13(Text7, { children: " " })
+            /* @__PURE__ */ jsx14(Text7, { color: theme.colors.foreground, children: isExpanded ? "\u25BC" : "\u25B6" }),
+            /* @__PURE__ */ jsx14(Text7, { children: " " })
           ] }),
-          /* @__PURE__ */ jsx13(
+          /* @__PURE__ */ jsx14(
             Text7,
             {
               color: isSelected ? theme.colors.focusIndicator : getStateColor(task.state, theme),
@@ -3162,9 +3278,9 @@ var TasksPane = () => {
           )
         ] }, task.id);
       }),
-      scrollOffset + visibleRows < flatTasks.length && /* @__PURE__ */ jsx13(Box8, { justifyContent: "center", marginTop: 1, children: /* @__PURE__ */ jsx13(Text7, { color: theme.colors.keyboardHint, dimColor: true, children: "-- more below --" }) })
+      scrollOffset + visibleRows < flatTasks.length && /* @__PURE__ */ jsx14(Box8, { justifyContent: "center", marginTop: 1, children: /* @__PURE__ */ jsx14(Text7, { color: theme.colors.keyboardHint, dimColor: true, children: "-- more below --" }) })
     ] }),
-    /* @__PURE__ */ jsx13(
+    /* @__PURE__ */ jsx14(
       KeyboardHints,
       {
         hints: [
@@ -3207,12 +3323,12 @@ function getStateColor(state, theme) {
 }
 
 // src/components/timeline/TimelinePane.tsx
-import { useState as useState7, useEffect as useEffect9, useMemo as useMemo2 } from "react";
+import { useState as useState8, useEffect as useEffect9, useMemo as useMemo2 } from "react";
 import { Box as Box10, Text as Text9, useInput as useInput5 } from "ink";
 
 // src/components/timeline/TimelineEntry.tsx
 import { Box as Box9, Text as Text8 } from "ink";
-import { jsx as jsx14, jsxs as jsxs10 } from "react/jsx-runtime";
+import { jsx as jsx15, jsxs as jsxs10 } from "react/jsx-runtime";
 var TimelineEntry = ({
   event,
   isLast,
@@ -3237,33 +3353,32 @@ var TimelineEntry = ({
   const isFilledCircle = ["completed", "delegated", "delayed"].includes(
     event.type
   );
-  return /* @__PURE__ */ jsxs10(Box9, { flexDirection: "column", children: [
-    /* @__PURE__ */ jsxs10(Box9, { children: [
-      /* @__PURE__ */ jsx14(Box9, { width: 3, justifyContent: "center", children: /* @__PURE__ */ jsx14(Text8, { color, children: isFilledCircle ? "\u25CF" : "\u25CB" }) }),
-      /* @__PURE__ */ jsxs10(Box9, { flexDirection: "column", flexGrow: 1, children: [
-        /* @__PURE__ */ jsx14(Box9, { children: /* @__PURE__ */ jsxs10(Text8, { children: [
+  return /* @__PURE__ */ jsxs10(Box9, { flexDirection: "column", width: "100%", children: [
+    /* @__PURE__ */ jsxs10(Box9, { width: "100%", children: [
+      /* @__PURE__ */ jsx15(Box9, { width: 3, flexShrink: 0, justifyContent: "center", children: /* @__PURE__ */ jsx15(Text8, { color, children: isFilledCircle ? "\u25CF" : "\u25CB" }) }),
+      /* @__PURE__ */ jsxs10(Box9, { flexDirection: "column", flexGrow: 1, flexShrink: 1, minWidth: 0, children: [
+        /* @__PURE__ */ jsxs10(Text8, { wrap: "wrap", color: theme.colors.foreground, children: [
           /* @__PURE__ */ jsxs10(Text8, { color, bold: true, children: [
             typeStr,
             ":"
           ] }),
-          /* @__PURE__ */ jsxs10(Text8, { color: theme.colors.foreground, children: [
-            " ",
-            event.taskTitle
-          ] })
-        ] }) }),
-        /* @__PURE__ */ jsx14(Box9, { children: /* @__PURE__ */ jsx14(Text8, { color: theme.colors.keyboardHint, dimColor: true, children: timeStr }) })
+          " ",
+          event.taskTitle
+        ] }),
+        /* @__PURE__ */ jsx15(Text8, { color: theme.colors.keyboardHint, dimColor: true, children: timeStr })
       ] })
     ] }),
-    !isLast && /* @__PURE__ */ jsx14(Box9, { children: /* @__PURE__ */ jsx14(Box9, { width: 3, justifyContent: "center", children: /* @__PURE__ */ jsx14(Text8, { color: hasNextSameTask ? color : theme.colors.border, children: "\u2502" }) }) })
+    !isLast && /* @__PURE__ */ jsx15(Box9, { children: /* @__PURE__ */ jsx15(Box9, { width: 3, justifyContent: "center", children: /* @__PURE__ */ jsx15(Text8, { color: hasNextSameTask ? color : theme.colors.border, children: "\u2502" }) }) })
   ] });
 };
 
 // src/components/timeline/TimelinePane.tsx
-import { jsx as jsx15, jsxs as jsxs11 } from "react/jsx-runtime";
+import { jsx as jsx16, jsxs as jsxs11 } from "react/jsx-runtime";
 var TimelinePane = () => {
   const { theme } = useTheme();
   const {
     selectedDate,
+    tasks,
     timeline,
     setTimeline,
     activePane,
@@ -3271,15 +3386,49 @@ var TimelinePane = () => {
     isInputMode
   } = useApp();
   const isFocused = activePane === "timeline" && !isModalOpen;
-  const [scrollOffset, setScrollOffset] = useState7(0);
+  const [scrollOffset, setScrollOffset] = useState8(0);
   const { height: terminalHeight } = useTerminalSize();
   const visibleRows = useMemo2(() => {
-    return Math.max(5, terminalHeight - 10);
+    const availableHeight = Math.max(8, terminalHeight - 8);
+    return Math.max(3, Math.floor(availableHeight / 4));
   }, [terminalHeight]);
   const dateStr = getDateString(
     new Date(selectedDate.year, selectedDate.month, selectedDate.day)
   );
   const dayEvents = timeline[dateStr] || [];
+  const dayTasks = tasks[dateStr] || [];
+  const taskHierarchyMap = useMemo2(() => {
+    const map = /* @__PURE__ */ new Map();
+    const traverse = (taskList, parentId) => {
+      taskList.forEach((task) => {
+        map.set(task.id, parentId);
+        traverse(task.children, task.id);
+      });
+    };
+    traverse(dayTasks);
+    return map;
+  }, [dayTasks]);
+  const isAncestor = (taskAId, taskBId) => {
+    let currentId = taskBId;
+    while (currentId) {
+      const parentId = taskHierarchyMap.get(currentId);
+      if (!parentId) break;
+      if (parentId === taskAId) return true;
+      currentId = parentId;
+    }
+    return false;
+  };
+  const getTaskDepth = (taskId) => {
+    let depth = 0;
+    let currentId = taskId;
+    while (currentId) {
+      const parentId = taskHierarchyMap.get(currentId);
+      if (!parentId) break;
+      depth++;
+      currentId = parentId;
+    }
+    return depth;
+  };
   const sortedEvents = useMemo2(() => {
     const eventsByTask = /* @__PURE__ */ new Map();
     dayEvents.forEach((event) => {
@@ -3291,14 +3440,19 @@ var TimelinePane = () => {
       events.sort((a, b) => a.timestamp.getTime() - b.timestamp.getTime());
     });
     const taskGroups = Array.from(eventsByTask.entries()).sort(
-      ([, eventsA], [, eventsB]) => {
+      ([taskIdA, eventsA], [taskIdB, eventsB]) => {
+        if (isAncestor(taskIdA, taskIdB)) return -1;
+        if (isAncestor(taskIdB, taskIdA)) return 1;
+        const depthA = getTaskDepth(taskIdA);
+        const depthB = getTaskDepth(taskIdB);
+        if (depthA !== depthB) return depthA - depthB;
         const earliestA = eventsA[0]?.timestamp.getTime() || 0;
         const earliestB = eventsB[0]?.timestamp.getTime() || 0;
         return earliestA - earliestB;
       }
     );
     return taskGroups.flatMap(([, events]) => events);
-  }, [dayEvents]);
+  }, [dayEvents, taskHierarchyMap]);
   useEffect9(() => {
     setScrollOffset(0);
   }, [dateStr]);
@@ -3321,17 +3475,6 @@ var TimelinePane = () => {
           )
         );
       }
-      if (input === "u" && key.ctrl) {
-        setScrollOffset(
-          (prev) => Math.max(prev - Math.floor(visibleRows / 2), 0)
-        );
-      }
-      if (input === "C") {
-        setTimeline({
-          ...timeline,
-          [dateStr]: []
-        });
-      }
     },
     { isActive: isFocused && !isInputMode }
   );
@@ -3341,18 +3484,18 @@ var TimelinePane = () => {
   );
   const canScrollUp = scrollOffset > 0;
   const canScrollDown = scrollOffset + visibleRows < sortedEvents.length;
-  return /* @__PURE__ */ jsx15(Pane, { title: "Timeline", isFocused, children: /* @__PURE__ */ jsxs11(Box10, { flexDirection: "column", flexGrow: 1, width: "100%", children: [
+  return /* @__PURE__ */ jsx16(Pane, { title: "Timeline", isFocused, children: /* @__PURE__ */ jsxs11(Box10, { flexDirection: "column", flexGrow: 1, width: "100%", overflow: "hidden", children: [
     sortedEvents.length === 0 ? /* @__PURE__ */ jsxs11(Box10, { marginY: 1, flexDirection: "column", children: [
-      /* @__PURE__ */ jsx15(Text9, { color: theme.colors.keyboardHint, dimColor: true, children: "No activities yet." }),
-      /* @__PURE__ */ jsx15(Text9, { color: theme.colors.keyboardHint, dimColor: true, children: "Press 's' to start a task." })
-    ] }) : /* @__PURE__ */ jsxs11(Box10, { flexDirection: "column", children: [
-      canScrollUp && /* @__PURE__ */ jsx15(Box10, { justifyContent: "center", marginBottom: 1, children: /* @__PURE__ */ jsx15(Text9, { color: theme.colors.keyboardHint, dimColor: true, children: "-- more above --" }) }),
-      /* @__PURE__ */ jsx15(Box10, { flexDirection: "column", children: visibleEvents.map((event, index) => {
+      /* @__PURE__ */ jsx16(Text9, { color: theme.colors.keyboardHint, dimColor: true, children: "No activities yet." }),
+      /* @__PURE__ */ jsx16(Text9, { color: theme.colors.keyboardHint, dimColor: true, children: "Press 's' to start a task." })
+    ] }) : /* @__PURE__ */ jsxs11(Box10, { flexDirection: "column", width: "100%", overflow: "hidden", children: [
+      canScrollUp && /* @__PURE__ */ jsx16(Box10, { justifyContent: "center", marginBottom: 1, children: /* @__PURE__ */ jsx16(Text9, { color: theme.colors.keyboardHint, dimColor: true, children: "-- more above --" }) }),
+      /* @__PURE__ */ jsx16(Box10, { flexDirection: "column", width: "100%", overflow: "hidden", children: visibleEvents.map((event, index) => {
         const globalIndex = scrollOffset + index;
         const isLast = globalIndex === sortedEvents.length - 1;
         const nextEvent = sortedEvents[globalIndex + 1];
         const hasNextSameTask = nextEvent && nextEvent.taskId === event.taskId;
-        return /* @__PURE__ */ jsx15(
+        return /* @__PURE__ */ jsx16(
           TimelineEntry,
           {
             event,
@@ -3362,9 +3505,9 @@ var TimelinePane = () => {
           event.id
         );
       }) }),
-      canScrollDown && /* @__PURE__ */ jsx15(Box10, { justifyContent: "center", marginTop: 1, children: /* @__PURE__ */ jsx15(Text9, { color: theme.colors.keyboardHint, dimColor: true, children: "-- more below --" }) })
+      canScrollDown && /* @__PURE__ */ jsx16(Box10, { justifyContent: "center", marginTop: 1, children: /* @__PURE__ */ jsx16(Text9, { color: theme.colors.keyboardHint, dimColor: true, children: "-- more below --" }) })
     ] }),
-    /* @__PURE__ */ jsx15(
+    /* @__PURE__ */ jsx16(
       KeyboardHints,
       {
         hints: [
@@ -3384,7 +3527,7 @@ import { Box as Box12, useStdout as useStdout3 } from "ink";
 
 // src/components/common/FullscreenBackground.tsx
 import { Box as Box11, useStdout as useStdout2 } from "ink";
-import { jsx as jsx16 } from "react/jsx-runtime";
+import { jsx as jsx17 } from "react/jsx-runtime";
 var FullscreenBackground = ({
   children,
   backgroundColor
@@ -3392,7 +3535,7 @@ var FullscreenBackground = ({
   const { stdout } = useStdout2();
   const width = stdout?.columns || 100;
   const height = stdout?.rows || 30;
-  return /* @__PURE__ */ jsx16(
+  return /* @__PURE__ */ jsx17(
     Box11,
     {
       flexDirection: "column",
@@ -3405,17 +3548,17 @@ var FullscreenBackground = ({
 };
 
 // src/components/common/Modal.tsx
-import { jsx as jsx17 } from "react/jsx-runtime";
+import { jsx as jsx18 } from "react/jsx-runtime";
 var Modal = ({ children }) => {
   const { theme } = useTheme();
   const { stdout } = useStdout3();
   const width = stdout?.columns || 100;
   const height = stdout?.rows || 30;
-  return /* @__PURE__ */ jsx17(
+  return /* @__PURE__ */ jsx18(
     FullscreenBackground,
     {
       backgroundColor: theme.colors.modalOverlay || "black",
-      children: /* @__PURE__ */ jsx17(
+      children: /* @__PURE__ */ jsx18(
         Box12,
         {
           flexDirection: "column",
@@ -3431,11 +3574,12 @@ var Modal = ({ children }) => {
 };
 
 // src/components/common/HelpDialog.tsx
-import { Fragment as Fragment2, jsx as jsx18, jsxs as jsxs12 } from "react/jsx-runtime";
+import { Fragment as Fragment2, jsx as jsx19, jsxs as jsxs12 } from "react/jsx-runtime";
 var HelpDialog = () => {
   const { theme } = useTheme();
   const shortcuts = [
     { key: "Ctrl+C (twice)", action: "Quit application" },
+    { key: "Ctrl+U", action: "Undo last action" },
     { key: "?", action: "Toggle help dialog" },
     { key: "Shift+;", action: "Show month overview" },
     { key: "t", action: "Select theme" },
@@ -3464,7 +3608,7 @@ var HelpDialog = () => {
     { key: "j/k", action: "Scroll timeline" },
     { key: "Shift+C", action: "Clear timeline" }
   ];
-  return /* @__PURE__ */ jsx18(Modal, { children: /* @__PURE__ */ jsxs12(
+  return /* @__PURE__ */ jsx19(Modal, { children: /* @__PURE__ */ jsxs12(
     Box13,
     {
       flexDirection: "column",
@@ -3474,26 +3618,26 @@ var HelpDialog = () => {
       paddingY: 1,
       backgroundColor: theme.colors.modalBackground || theme.colors.background,
       children: [
-        /* @__PURE__ */ jsx18(Text10, { bold: true, color: theme.colors.calendarHeader, children: "Keyboard Shortcuts" }),
-        /* @__PURE__ */ jsx18(Box13, { flexDirection: "column", marginTop: 1, children: shortcuts.map((item, idx) => /* @__PURE__ */ jsx18(Box13, { marginY: 0, children: item.key ? /* @__PURE__ */ jsxs12(Fragment2, { children: [
-          /* @__PURE__ */ jsx18(Box13, { width: 20, children: /* @__PURE__ */ jsx18(Text10, { color: theme.colors.timelineEventStarted, children: item.key }) }),
-          /* @__PURE__ */ jsx18(Text10, { color: theme.colors.foreground, children: item.action })
-        ] }) : /* @__PURE__ */ jsx18(Text10, { color: theme.colors.separator, children: "\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500" }) }, idx)) }),
-        /* @__PURE__ */ jsx18(Box13, { marginY: 1, children: /* @__PURE__ */ jsx18(Text10, { color: theme.colors.keyboardHint, dimColor: true, children: "Press '?' to close" }) })
+        /* @__PURE__ */ jsx19(Text10, { bold: true, color: theme.colors.calendarHeader, children: "Keyboard Shortcuts" }),
+        /* @__PURE__ */ jsx19(Box13, { flexDirection: "column", marginTop: 1, children: shortcuts.map((item, idx) => /* @__PURE__ */ jsx19(Box13, { marginY: 0, children: item.key ? /* @__PURE__ */ jsxs12(Fragment2, { children: [
+          /* @__PURE__ */ jsx19(Box13, { width: 20, children: /* @__PURE__ */ jsx19(Text10, { color: theme.colors.timelineEventStarted, children: item.key }) }),
+          /* @__PURE__ */ jsx19(Text10, { color: theme.colors.foreground, children: item.action })
+        ] }) : /* @__PURE__ */ jsx19(Text10, { color: theme.colors.separator, children: "\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500" }) }, idx)) }),
+        /* @__PURE__ */ jsx19(Box13, { marginY: 1, children: /* @__PURE__ */ jsx19(Text10, { color: theme.colors.keyboardHint, dimColor: true, children: "Press '?' to close" }) })
       ]
     }
   ) });
 };
 
 // src/components/common/ThemeDialog.tsx
-import { useState as useState8, useMemo as useMemo3, useEffect as useEffect10 } from "react";
+import { useState as useState9, useMemo as useMemo3, useEffect as useEffect10 } from "react";
 import { Box as Box14, Text as Text11, useInput as useInput6 } from "ink";
-import { jsx as jsx19, jsxs as jsxs13 } from "react/jsx-runtime";
+import { jsx as jsx20, jsxs as jsxs13 } from "react/jsx-runtime";
 var ThemeDialog = () => {
   const { theme, setTheme, themeName } = useTheme();
   const { setShowThemeDialog } = useApp();
-  const [searchQuery, setSearchQuery] = useState8("");
-  const [focusMode, setFocusMode] = useState8("search");
+  const [searchQuery, setSearchQuery] = useState9("");
+  const [focusMode, setFocusMode] = useState9("search");
   const lightThemes2 = useMemo3(() => getLightThemeNames(), []);
   const darkThemes2 = useMemo3(() => getDarkThemeNames(), []);
   const allThemes = useMemo3(() => {
@@ -3527,7 +3671,7 @@ var ThemeDialog = () => {
     const idx = themeItems.findIndex((item) => item.value === themeName);
     return idx >= 0 ? idx : 0;
   }, [themeItems, themeName]);
-  const [selectedIndex, setSelectedIndex] = useState8(initialIndex);
+  const [selectedIndex, setSelectedIndex] = useState9(initialIndex);
   useEffect10(() => {
     setSelectedIndex(0);
   }, [searchQuery]);
@@ -3574,7 +3718,7 @@ var ThemeDialog = () => {
   const formatThemeName = (name) => {
     return name.split("-").map((word) => word.charAt(0).toUpperCase() + word.slice(1)).join(" ");
   };
-  return /* @__PURE__ */ jsx19(Modal, { children: /* @__PURE__ */ jsxs13(
+  return /* @__PURE__ */ jsx20(Modal, { children: /* @__PURE__ */ jsxs13(
     Box14,
     {
       flexDirection: "column",
@@ -3585,13 +3729,13 @@ var ThemeDialog = () => {
       width: 44,
       backgroundColor: theme.colors.modalBackground || theme.colors.background,
       children: [
-        /* @__PURE__ */ jsx19(Text11, { bold: true, color: theme.colors.calendarHeader, underline: true, children: "Select Theme" }),
+        /* @__PURE__ */ jsx20(Text11, { bold: true, color: theme.colors.calendarHeader, underline: true, children: "Select Theme" }),
         /* @__PURE__ */ jsxs13(Box14, { marginTop: 1, flexDirection: "row", alignItems: "center", children: [
           /* @__PURE__ */ jsxs13(Text11, { color: theme.colors.foreground, dimColor: true, children: [
             "Search:",
             " "
           ] }),
-          /* @__PURE__ */ jsx19(
+          /* @__PURE__ */ jsx20(
             ControlledTextInput,
             {
               value: searchQuery,
@@ -3609,21 +3753,21 @@ var ThemeDialog = () => {
             }
           )
         ] }),
-        /* @__PURE__ */ jsx19(Box14, { flexDirection: "column", marginTop: 1, children: allThemes.map((item, idx) => {
+        /* @__PURE__ */ jsx20(Box14, { flexDirection: "column", marginTop: 1, children: allThemes.map((item, idx) => {
           if (item.type === "separator") {
-            return /* @__PURE__ */ jsx19(
+            return /* @__PURE__ */ jsx20(
               Box14,
               {
                 marginTop: idx > 0 ? 1 : 0,
                 marginBottom: 0,
-                children: /* @__PURE__ */ jsx19(Text11, { bold: true, color: theme.colors.calendarHeader, dimColor: true, children: item.value })
+                children: /* @__PURE__ */ jsx20(Text11, { bold: true, color: theme.colors.calendarHeader, dimColor: true, children: item.value })
               },
               `sep-${idx}`
             );
           }
           const isSelected = item.value === selectedThemeName;
           const isCurrent = item.value === themeName;
-          return /* @__PURE__ */ jsx19(Box14, { paddingLeft: 1, children: /* @__PURE__ */ jsxs13(
+          return /* @__PURE__ */ jsx20(Box14, { paddingLeft: 1, children: /* @__PURE__ */ jsxs13(
             Text11,
             {
               color: isSelected ? theme.colors.focusIndicator : theme.colors.foreground,
@@ -3636,7 +3780,7 @@ var ThemeDialog = () => {
             }
           ) }, item.value);
         }) }),
-        /* @__PURE__ */ jsx19(Box14, { marginTop: 1, children: /* @__PURE__ */ jsx19(Text11, { color: theme.colors.keyboardHint, dimColor: true, children: focusMode === "search" ? "Type to search \u2022 \u2193 to navigate list \u2022 Esc to close" : "\u2191/\u2193 or k/j to navigate \u2022 Enter to select \u2022 Esc to close" }) })
+        /* @__PURE__ */ jsx20(Box14, { marginTop: 1, children: /* @__PURE__ */ jsx20(Text11, { color: theme.colors.keyboardHint, dimColor: true, children: focusMode === "search" ? "Type to search \u2022 \u2193 to navigate list \u2022 Esc to close" : "\u2191/\u2193 or k/j to navigate \u2022 Enter to select \u2022 Esc to close" }) })
       ]
     }
   ) });
@@ -3645,7 +3789,7 @@ var ThemeDialog = () => {
 // src/components/common/ClearTimelineDialog.tsx
 import { Box as Box15, Text as Text12, useInput as useInput7 } from "ink";
 import { format as format2 } from "date-fns";
-import { jsx as jsx20, jsxs as jsxs14 } from "react/jsx-runtime";
+import { jsx as jsx21, jsxs as jsxs14 } from "react/jsx-runtime";
 var ClearTimelineDialog = () => {
   const { theme } = useTheme();
   const {
@@ -3672,7 +3816,7 @@ var ClearTimelineDialog = () => {
       handleCancel();
     }
   });
-  return /* @__PURE__ */ jsx20(Modal, { children: /* @__PURE__ */ jsxs14(
+  return /* @__PURE__ */ jsx21(Modal, { children: /* @__PURE__ */ jsxs14(
     Box15,
     {
       flexDirection: "column",
@@ -3682,39 +3826,39 @@ var ClearTimelineDialog = () => {
       paddingY: 2,
       backgroundColor: theme.colors.modalBackground || theme.colors.background,
       children: [
-        /* @__PURE__ */ jsx20(Box15, { justifyContent: "center", marginBottom: 1, children: /* @__PURE__ */ jsx20(Text12, { bold: true, color: theme.colors.taskStateDelayed, children: "Clear Timeline" }) }),
+        /* @__PURE__ */ jsx21(Box15, { justifyContent: "center", marginBottom: 1, children: /* @__PURE__ */ jsx21(Text12, { bold: true, color: theme.colors.taskStateDelayed, children: "Clear Timeline" }) }),
         /* @__PURE__ */ jsxs14(Box15, { flexDirection: "column", marginY: 1, children: [
-          /* @__PURE__ */ jsx20(Text12, { color: theme.colors.foreground, children: "You are about to clear the timeline for" }),
-          /* @__PURE__ */ jsx20(Box15, { justifyContent: "center", marginY: 1, children: /* @__PURE__ */ jsx20(Text12, { bold: true, color: theme.colors.calendarHeader, children: formattedDate }) }),
+          /* @__PURE__ */ jsx21(Text12, { color: theme.colors.foreground, children: "You are about to clear the timeline for" }),
+          /* @__PURE__ */ jsx21(Box15, { justifyContent: "center", marginY: 1, children: /* @__PURE__ */ jsx21(Text12, { bold: true, color: theme.colors.calendarHeader, children: formattedDate }) }),
           eventCount > 0 ? /* @__PURE__ */ jsxs14(Text12, { color: theme.colors.keyboardHint, children: [
             "This will remove ",
             eventCount,
             " event",
             eventCount !== 1 ? "s" : "",
             " from the timeline."
-          ] }) : /* @__PURE__ */ jsx20(Text12, { color: theme.colors.keyboardHint, dimColor: true, children: "The timeline is already empty." })
+          ] }) : /* @__PURE__ */ jsx21(Text12, { color: theme.colors.keyboardHint, dimColor: true, children: "The timeline is already empty." })
         ] }),
         /* @__PURE__ */ jsxs14(Box15, { marginTop: 2, justifyContent: "center", children: [
-          /* @__PURE__ */ jsx20(Text12, { color: theme.colors.foreground, children: "Are you sure? " }),
-          /* @__PURE__ */ jsx20(Text12, { color: theme.colors.taskStateCompleted, bold: true, children: "[Y]es" }),
-          /* @__PURE__ */ jsx20(Text12, { color: theme.colors.foreground, children: " / " }),
-          /* @__PURE__ */ jsx20(Text12, { color: theme.colors.taskStateDelayed, bold: true, children: "[N]o" })
+          /* @__PURE__ */ jsx21(Text12, { color: theme.colors.foreground, children: "Are you sure? " }),
+          /* @__PURE__ */ jsx21(Text12, { color: theme.colors.taskStateCompleted, bold: true, children: "[Y]es" }),
+          /* @__PURE__ */ jsx21(Text12, { color: theme.colors.foreground, children: " / " }),
+          /* @__PURE__ */ jsx21(Text12, { color: theme.colors.taskStateDelayed, bold: true, children: "[N]o" })
         ] }),
-        /* @__PURE__ */ jsx20(Box15, { marginTop: 2, justifyContent: "center", children: /* @__PURE__ */ jsx20(Text12, { color: theme.colors.keyboardHint, dimColor: true, children: "Press Y to confirm, N or Esc to cancel" }) })
+        /* @__PURE__ */ jsx21(Box15, { marginTop: 2, justifyContent: "center", children: /* @__PURE__ */ jsx21(Text12, { color: theme.colors.keyboardHint, dimColor: true, children: "Press Y to confirm, N or Esc to cancel" }) })
       ]
     }
   ) });
 };
 
 // src/components/overview/OverviewScreen.tsx
-import React9, { useMemo as useMemo4 } from "react";
+import React10, { useMemo as useMemo4 } from "react";
 import { Box as Box16, Text as Text13, useInput as useInput8 } from "ink";
 import { startOfMonth as startOfMonth2, endOfMonth as endOfMonth2, eachDayOfInterval as eachDayOfInterval2 } from "date-fns";
-import { jsx as jsx21, jsxs as jsxs15 } from "react/jsx-runtime";
+import { jsx as jsx22, jsxs as jsxs15 } from "react/jsx-runtime";
 var OverviewScreen = () => {
   const { theme } = useTheme();
   const { tasks, overviewMonth, setOverviewMonth, setShowOverview } = useApp();
-  const [scrollOffset, setScrollOffset] = React9.useState(0);
+  const [scrollOffset, setScrollOffset] = React10.useState(0);
   const { height: terminalHeight } = useTerminalSize();
   const visibleRows = useMemo4(() => {
     return Math.max(2, Math.floor((terminalHeight - 9) / 3));
@@ -3750,7 +3894,7 @@ var OverviewScreen = () => {
       setOverviewMonth({ ...overviewMonth, month: newMonth });
     }
   };
-  React9.useEffect(() => {
+  React10.useEffect(() => {
     setScrollOffset(0);
   }, [overviewMonth]);
   useInput8((input, key) => {
@@ -3791,18 +3935,18 @@ var OverviewScreen = () => {
   const canScrollDown = scrollOffset + visibleRows < rows;
   return /* @__PURE__ */ jsxs15(Box16, { flexDirection: "column", padding: 1, width: "100%", height: "100%", children: [
     /* @__PURE__ */ jsxs15(Box16, { flexDirection: "column", marginBottom: 1, children: [
-      /* @__PURE__ */ jsx21(Text13, { bold: true, color: theme.colors.focusIndicator, children: "Overview" }),
-      /* @__PURE__ */ jsx21(Text13, { color: theme.colors.foreground, children: monthName })
+      /* @__PURE__ */ jsx22(Text13, { bold: true, color: theme.colors.focusIndicator, children: "Overview" }),
+      /* @__PURE__ */ jsx22(Text13, { color: theme.colors.foreground, children: monthName })
     ] }),
     /* @__PURE__ */ jsxs15(Box16, { flexDirection: "column", flexGrow: 1, children: [
-      canScrollUp && /* @__PURE__ */ jsx21(Box16, { justifyContent: "center", marginBottom: 1, children: /* @__PURE__ */ jsx21(Text13, { color: theme.colors.keyboardHint, dimColor: true, children: "-- more above --" }) }),
+      canScrollUp && /* @__PURE__ */ jsx22(Box16, { justifyContent: "center", marginBottom: 1, children: /* @__PURE__ */ jsx22(Text13, { color: theme.colors.keyboardHint, dimColor: true, children: "-- more above --" }) }),
       visibleRowData.map((_, index) => {
         const rowIndex = scrollOffset + index;
-        return /* @__PURE__ */ jsx21(Box16, { flexDirection: "row", marginBottom: 1, children: Array.from({ length: columns }).map((_2, colIndex) => {
+        return /* @__PURE__ */ jsx22(Box16, { flexDirection: "row", marginBottom: 1, children: Array.from({ length: columns }).map((_2, colIndex) => {
           const dateIndex = rowIndex * columns + colIndex;
           const date = monthDates[dateIndex];
           if (!date) {
-            return /* @__PURE__ */ jsx21(
+            return /* @__PURE__ */ jsx22(
               Box16,
               {
                 flexDirection: "column",
@@ -3831,9 +3975,9 @@ var OverviewScreen = () => {
               flexBasis: 0,
               marginRight: colIndex === columns - 1 ? 0 : 2,
               children: [
-                /* @__PURE__ */ jsx21(Text13, { bold: true, color: theme.colors.calendarSelected, children: formatDate(date, "do MMM") }),
+                /* @__PURE__ */ jsx22(Text13, { bold: true, color: theme.colors.calendarSelected, children: formatDate(date, "do MMM") }),
                 /* @__PURE__ */ jsxs15(Box16, { flexDirection: "column", children: [
-                  flatTasksWithDepth.length === 0 ? /* @__PURE__ */ jsx21(Text13, { dimColor: true, color: theme.colors.keyboardHint, children: "No tasks" }) : flatTasksWithDepth.slice(0, 10).map(({ task, depth }) => /* @__PURE__ */ jsx21(
+                  flatTasksWithDepth.length === 0 ? /* @__PURE__ */ jsx22(Text13, { dimColor: true, color: theme.colors.keyboardHint, children: "No tasks" }) : flatTasksWithDepth.slice(0, 10).map(({ task, depth }) => /* @__PURE__ */ jsx22(
                     TaskItem,
                     {
                       task,
@@ -3854,9 +3998,9 @@ var OverviewScreen = () => {
           );
         }) }, rowIndex);
       }),
-      canScrollDown && /* @__PURE__ */ jsx21(Box16, { justifyContent: "center", marginTop: 1, children: /* @__PURE__ */ jsx21(Text13, { color: theme.colors.keyboardHint, dimColor: true, children: "-- more below --" }) })
+      canScrollDown && /* @__PURE__ */ jsx22(Box16, { justifyContent: "center", marginTop: 1, children: /* @__PURE__ */ jsx22(Text13, { color: theme.colors.keyboardHint, dimColor: true, children: "-- more below --" }) })
     ] }),
-    /* @__PURE__ */ jsx21(Box16, { marginTop: 1, children: /* @__PURE__ */ jsx21(Text13, { color: theme.colors.keyboardHint, dimColor: true, children: "n/p or \u2190/\u2192: month | j/k or \u2193/\u2191: scroll | Esc: close | Shift+;: toggle" }) })
+    /* @__PURE__ */ jsx22(Box16, { marginTop: 1, children: /* @__PURE__ */ jsx22(Text13, { color: theme.colors.keyboardHint, dimColor: true, children: "n/p or \u2190/\u2192: month | j/k or \u2193/\u2191: scroll | Esc: close | Shift+;: toggle" }) })
   ] });
 };
 var TaskItem = ({ task, theme, depth }) => {
@@ -3867,8 +4011,8 @@ var TaskItem = ({ task, theme, depth }) => {
       checkbox,
       " "
     ] }),
-    depth > 0 && /* @__PURE__ */ jsx21(Text13, { children: "  ".repeat(depth) }),
-    /* @__PURE__ */ jsx21(
+    depth > 0 && /* @__PURE__ */ jsx22(Text13, { children: "  ".repeat(depth) }),
+    /* @__PURE__ */ jsx22(
       Text13,
       {
         color,
@@ -3902,7 +4046,7 @@ function getStateColor2(state, theme) {
 }
 
 // src/App.tsx
-import { jsx as jsx22, jsxs as jsxs16 } from "react/jsx-runtime";
+import { jsx as jsx23, jsxs as jsxs16 } from "react/jsx-runtime";
 var AppContent = () => {
   const {
     showHelp,
@@ -3916,26 +4060,26 @@ var AppContent = () => {
   useKeyboardNav();
   const { width, height } = useTerminalSize();
   if (showThemeDialog) {
-    return /* @__PURE__ */ jsx22(ThemeDialog, {});
+    return /* @__PURE__ */ jsx23(ThemeDialog, {});
   }
   if (showHelp) {
-    return /* @__PURE__ */ jsx22(HelpDialog, {});
+    return /* @__PURE__ */ jsx23(HelpDialog, {});
   }
   if (showClearTimelineDialog) {
-    return /* @__PURE__ */ jsx22(ClearTimelineDialog, {});
+    return /* @__PURE__ */ jsx23(ClearTimelineDialog, {});
   }
-  return /* @__PURE__ */ jsx22(FullscreenBackground, { backgroundColor: theme.colors.background || "black", children: /* @__PURE__ */ jsxs16(Box17, { flexDirection: "column", width, height, padding: 1, backgroundColor: theme.colors.background, children: [
-    showOverview ? /* @__PURE__ */ jsx22(OverviewScreen, {}) : /* @__PURE__ */ jsx22(
+  return /* @__PURE__ */ jsx23(FullscreenBackground, { backgroundColor: theme.colors.background || "black", children: /* @__PURE__ */ jsxs16(Box17, { flexDirection: "column", width, height, padding: 1, backgroundColor: theme.colors.background, children: [
+    showOverview ? /* @__PURE__ */ jsx23(OverviewScreen, {}) : /* @__PURE__ */ jsx23(
       ThreeColumnLayout,
       {
-        leftPane: /* @__PURE__ */ jsx22(CalendarPane, {}),
-        centerPane: /* @__PURE__ */ jsx22(TasksPane, {}),
-        rightPane: /* @__PURE__ */ jsx22(TimelinePane, {}),
+        leftPane: /* @__PURE__ */ jsx23(CalendarPane, {}),
+        centerPane: /* @__PURE__ */ jsx23(TasksPane, {}),
+        rightPane: /* @__PURE__ */ jsx23(TimelinePane, {}),
         activePane,
         height: height - 2
       }
     ),
-    exitConfirmation && /* @__PURE__ */ jsx22(Box17, { width: "100%", justifyContent: "center", paddingY: 1, children: /* @__PURE__ */ jsxs16(Text14, { backgroundColor: "red", color: "white", bold: true, children: [
+    exitConfirmation && /* @__PURE__ */ jsx23(Box17, { width: "100%", justifyContent: "center", paddingY: 1, children: /* @__PURE__ */ jsxs16(Text14, { backgroundColor: "red", color: "white", bold: true, children: [
       " ",
       "Press Ctrl+C again to exit Epoch",
       " "
@@ -3943,12 +4087,12 @@ var AppContent = () => {
   ] }) });
 };
 var App = () => {
-  return /* @__PURE__ */ jsx22(StorageProvider, { children: /* @__PURE__ */ jsx22(ThemeProvider, { initialTheme: "dark", children: /* @__PURE__ */ jsx22(AppProvider, { children: /* @__PURE__ */ jsx22(AppContent, {}) }) }) });
+  return /* @__PURE__ */ jsx23(StorageProvider, { children: /* @__PURE__ */ jsx23(ThemeProvider, { initialTheme: "dark", children: /* @__PURE__ */ jsx23(UndoProvider, { children: /* @__PURE__ */ jsx23(AppProvider, { children: /* @__PURE__ */ jsx23(AppContent, {}) }) }) }) });
 };
 var App_default = App;
 
 // src/index.tsx
-import { jsx as jsx23 } from "react/jsx-runtime";
+import { jsx as jsx24 } from "react/jsx-runtime";
 console.clear();
-var app = render(/* @__PURE__ */ jsx23(App_default, {}), { exitOnCtrlC: false });
+var app = render(/* @__PURE__ */ jsx24(App_default, {}), { exitOnCtrlC: false });
 global.__inkApp = app;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "epoch-tui",
-  "version": "0.1.3",
+  "version": "0.1.5",
   "description": "A TUI app for daily task logging and time tracking",
   "type": "module",
   "main": "dist/index.js",