epoch-tui 0.1.2 → 0.1.3

package/dist/index.js

@@ -4,7 +4,7 @@
 import { render } from "ink";
 
 // src/App.tsx
-import { Box as Box16, Text as Text12 } from "ink";
+import { Box as Box17, Text as Text14 } from "ink";
 
 // src/contexts/ThemeContext.tsx
 import { createContext as createContext2, useContext as useContext2, useState as useState2, useEffect as useEffect2 } from "react";
@@ -1915,8 +1915,8 @@ var ThreeColumnLayout = ({
   leftPane,
   centerPane,
   rightPane,
-  leftWidth = "15%",
-  rightWidth = "25%",
+  leftWidth = "20%",
+  rightWidth = "30%",
   height,
   activePane
 }) => {
@@ -1987,7 +1987,7 @@ var ThreeColumnLayout = ({
 
 // src/components/calendar/CalendarPane.tsx
 import { useState as useState5, useEffect as useEffect6 } from "react";
-import { Box as Box5, Text as Text3, useInput as useInput2 } from "ink";
+import { Box as Box6, useInput as useInput2 } from "ink";
 import { addDays, addWeeks, subDays, subWeeks } from "date-fns";
 
 // src/components/layout/Pane.tsx
@@ -2092,6 +2092,30 @@ var MonthView = ({ calendarView }) => {
   ] });
 };
 
+// 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";
+var KeyboardHints = ({ hints }) => {
+  const { theme } = useTheme();
+  return /* @__PURE__ */ jsx9(
+    Box5,
+    {
+      marginTop: 1,
+      flexDirection: "row",
+      flexWrap: "wrap",
+      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__ */ jsxs5(Text3, { color: theme.colors.keyboardHint, children: [
+          " ",
+          hint.description
+        ] })
+      ] }, index))
+    }
+  );
+};
+
 // src/utils/date.ts
 import { format, startOfMonth, endOfMonth, eachDayOfInterval, startOfWeek, endOfWeek } from "date-fns";
 var formatDate = (date, formatStr = "MMM d, yyyy") => {
@@ -2186,10 +2210,17 @@ var CalendarService = class {
 var calendarService = new CalendarService();
 
 // src/components/calendar/CalendarPane.tsx
-import { jsx as jsx9, jsxs as jsxs5 } from "react/jsx-runtime";
+import { jsx as jsx10, jsxs as jsxs6 } from "react/jsx-runtime";
 var CalendarPane = () => {
   const { theme } = useTheme();
-  const { selectedDate, setSelectedDate, tasks, activePane, isModalOpen, isInputMode } = useApp();
+  const {
+    selectedDate,
+    setSelectedDate,
+    tasks,
+    activePane,
+    isModalOpen,
+    isInputMode
+  } = useApp();
   const [currentMonth, setCurrentMonth] = useState5({
     year: selectedDate.year,
     month: selectedDate.month
@@ -2276,39 +2307,115 @@ var CalendarPane = () => {
     { isActive: isFocused && !isInputMode }
   );
   const monthName = calendarService.getMonthName(currentMonth.month);
-  return /* @__PURE__ */ jsx9(
+  return /* @__PURE__ */ jsx10(
     Pane,
     {
       title: `${monthName} ${currentMonth.year}`,
       isFocused,
       center: true,
-      children: /* @__PURE__ */ jsxs5(Box5, { flexDirection: "column", alignItems: "center", children: [
-        /* @__PURE__ */ jsx9(MonthView, { calendarView }),
-        /* @__PURE__ */ jsxs5(Box5, { marginTop: 1, flexDirection: "column", alignItems: "center", children: [
-          /* @__PURE__ */ jsx9(Text3, { color: theme.colors.keyboardHint, dimColor: true, children: "h/l: days j/k: weeks" }),
-          /* @__PURE__ */ jsx9(Text3, { color: theme.colors.keyboardHint, dimColor: true, children: "n/p: month T: today" })
-        ] })
+      children: /* @__PURE__ */ jsxs6(Box6, { flexDirection: "column", alignItems: "center", children: [
+        /* @__PURE__ */ jsx10(MonthView, { calendarView }),
+        /* @__PURE__ */ jsx10(
+          KeyboardHints,
+          {
+            hints: [
+              { key: "h/l", description: "days" },
+              { key: "j/k", description: "weeks" },
+              { key: "n/p", description: "month" },
+              { key: "T", description: "today" }
+            ]
+          }
+        )
       ] })
     }
   );
 };
 
 // src/components/tasks/TasksPane.tsx
-import { useState as useState6, useEffect as useEffect7, useMemo, useRef as useRef3 } from "react";
-import { Box as Box7, Text as Text5, useInput as useInput3 } from "ink";
-import { TextInput } from "@inkjs/ui";
+import { useState as useState6, 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";
+var ControlledTextInput = ({
+  value,
+  onChange,
+  onSubmit,
+  onCancel,
+  placeholder,
+  focus = true,
+  placeholderColor,
+  cursorColor = "white",
+  color,
+  maxLength
+}) => {
+  const pendingValueRef = useRef3(value);
+  const sentValuesRef = useRef3(/* @__PURE__ */ new Set([value]));
+  useEffect7(() => {
+    if (value === pendingValueRef.current) {
+      return;
+    }
+    if (sentValuesRef.current.has(value)) {
+      return;
+    }
+    pendingValueRef.current = value;
+    sentValuesRef.current.clear();
+    sentValuesRef.current.add(value);
+  }, [value]);
+  useInput3(
+    (input, key) => {
+      const currentValue = pendingValueRef.current;
+      if (key.escape) {
+        onCancel?.();
+        return;
+      }
+      if (key.return) {
+        onSubmit(currentValue);
+        return;
+      }
+      if (input === "\r" || input === "\n") return;
+      let nextValue = currentValue;
+      if (key.backspace || key.delete) {
+        nextValue = currentValue.slice(0, -1);
+      } else if (!key.ctrl && !key.meta && input.length > 0) {
+        const filtered = input.replace(/[\x00-\x1F\x7F]/g, "");
+        if (filtered) {
+          const possibleValue = currentValue + filtered;
+          if (maxLength && possibleValue.length > maxLength) {
+            return;
+          }
+          nextValue = possibleValue;
+        }
+      }
+      if (nextValue !== currentValue) {
+        pendingValueRef.current = nextValue;
+        sentValuesRef.current.add(nextValue);
+        onChange(nextValue);
+      }
+    },
+    { isActive: focus }
+  );
+  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: " " })
+  ] });
+};
 
 // src/components/tasks/TaskHeader.tsx
-import { Box as Box6, Text as Text4 } from "ink";
-import { jsx as jsx10, jsxs as jsxs6 } from "react/jsx-runtime";
+import { Box as Box7, Text as Text6 } from "ink";
+import { jsx as jsx12, jsxs as jsxs8 } from "react/jsx-runtime";
 var TaskHeader = ({
   selectedDate,
   completionPercentage
 }) => {
   const { theme } = useTheme();
-  return /* @__PURE__ */ jsxs6(Box6, { flexDirection: "column", marginBottom: 1, children: [
-    /* @__PURE__ */ jsx10(Text4, { color: theme.colors.taskHeader, children: formatDate(selectedDate, "EEEE, MMMM d, yyyy") }),
-    /* @__PURE__ */ jsxs6(Text4, { color: theme.colors.taskHeader, children: [
+  return /* @__PURE__ */ jsxs8(Box7, { flexDirection: "column", marginBottom: 1, children: [
+    /* @__PURE__ */ jsx12(Text6, { color: theme.colors.taskHeader, children: formatDate(selectedDate, "EEEE, MMMM d, yyyy") }),
+    /* @__PURE__ */ jsxs8(Text6, { color: theme.colors.taskHeader, children: [
       completionPercentage,
       "% completed"
     ] })
@@ -2595,7 +2702,7 @@ var TimelineService = class {
 var timelineService = new TimelineService();
 
 // src/components/tasks/TasksPane.tsx
-import { Fragment, jsx as jsx11, jsxs as jsxs7 } from "react/jsx-runtime";
+import { Fragment, jsx as jsx13, jsxs as jsxs9 } from "react/jsx-runtime";
 var TasksPane = () => {
   const {
     tasks,
@@ -2614,8 +2721,6 @@ var TasksPane = () => {
   const [editMode, setEditMode] = useState6("none");
   const [editValue, setEditValue] = useState6("");
   const [parentTaskId, setParentTaskId] = useState6(null);
-  const inputValueRef = useRef3("");
-  const [inputKey, setInputKey] = useState6(0);
   const [scrollOffset, setScrollOffset] = useState6(0);
   const { height: terminalHeight } = useTerminalSize();
   const visibleRows = useMemo(() => {
@@ -2642,48 +2747,55 @@ var TasksPane = () => {
   }, [dayTasks, expandedIds]);
   const selectedTask = flatTasks[selectedIndex]?.task;
   const selectedTaskId = selectedTask?.id;
-  useEffect7(() => {
+  useEffect8(() => {
+    const allParentIds = /* @__PURE__ */ new Set();
+    const collectParents = (taskList) => {
+      for (const task of taskList) {
+        if (task.children.length > 0) {
+          allParentIds.add(task.id);
+          collectParents(task.children);
+        }
+      }
+    };
+    collectParents(dayTasks);
+    setExpandedIds(allParentIds);
+  }, [dayTasks]);
+  useEffect8(() => {
     setSelectedIndex(0);
     setEditMode("none");
   }, [dateStr]);
-  useEffect7(() => {
+  useEffect8(() => {
     if (selectedIndex >= flatTasks.length && flatTasks.length > 0) {
       setSelectedIndex(flatTasks.length - 1);
     }
   }, [flatTasks.length, selectedIndex]);
-  useEffect7(() => {
+  useEffect8(() => {
     if (selectedIndex < scrollOffset) {
       setScrollOffset(selectedIndex);
     } else if (selectedIndex >= scrollOffset + visibleRows) {
       setScrollOffset(selectedIndex - visibleRows + 1);
     }
   }, [selectedIndex, visibleRows, scrollOffset]);
-  useEffect7(() => {
+  useEffect8(() => {
     setScrollOffset(0);
   }, [dateStr]);
   const handleAddTask = () => {
-    inputValueRef.current = "";
     setEditMode("add");
     setEditValue("");
-    setInputKey((k) => k + 1);
     setIsInputMode(true);
   };
   const handleEditTask = () => {
     if (selectedTask) {
-      inputValueRef.current = selectedTask.title;
       setEditMode("edit");
       setEditValue(selectedTask.title);
-      setInputKey((k) => k + 1);
       setIsInputMode(true);
     }
   };
   const handleAddSubtask = () => {
     if (selectedTask) {
-      inputValueRef.current = "";
       setEditMode("addSubtask");
       setEditValue("");
       setParentTaskId(selectedTask.id);
-      setInputKey((k) => k + 1);
       setIsInputMode(true);
       setExpandedIds((prev) => new Set(prev).add(selectedTask.id));
     }
@@ -2847,15 +2959,7 @@ var TasksPane = () => {
   const handleCollapseAll = () => {
     setExpandedIds(/* @__PURE__ */ new Set());
   };
-  useInput3(
-    (_input, key) => {
-      if (key.escape) {
-        handleCancelEdit();
-      }
-    },
-    { isActive: isFocused && editMode !== "none" }
-  );
-  useInput3(
+  useInput4(
     (input, key) => {
       if ((key.meta || key.ctrl) && (input === "a" || key.leftArrow)) {
         handleCollapseAll();
@@ -2950,92 +3054,95 @@ var TasksPane = () => {
     },
     { isActive: isFocused && editMode === "none" }
   );
-  return /* @__PURE__ */ jsx11(Pane, { title: "Tasks", isFocused, children: /* @__PURE__ */ jsxs7(Box7, { flexDirection: "column", flexGrow: 1, children: [
-    /* @__PURE__ */ jsx11(
+  return /* @__PURE__ */ jsx13(Pane, { title: "Tasks", isFocused, children: /* @__PURE__ */ jsxs9(Box8, { flexDirection: "column", flexGrow: 1, width: "100%", children: [
+    /* @__PURE__ */ jsx13(
       TaskHeader,
       {
         selectedDate: new Date(selectedDate.year, selectedDate.month, selectedDate.day),
         completionPercentage: stats.percentage
       }
     ),
-    editMode === "add" && /* @__PURE__ */ jsxs7(Box7, { marginY: 1, children: [
-      /* @__PURE__ */ jsx11(Text5, { color: theme.colors.focusIndicator, children: ">  " }),
-      /* @__PURE__ */ jsx11(
-        TextInput,
+    editMode === "add" && /* @__PURE__ */ jsxs9(Box8, { marginY: 1, children: [
+      /* @__PURE__ */ jsx13(Text7, { color: theme.colors.focusIndicator, children: ">  " }),
+      /* @__PURE__ */ jsx13(
+        ControlledTextInput,
         {
-          defaultValue: "",
+          value: editValue,
           placeholder: "Enter task name...",
-          onChange: (val) => {
-            inputValueRef.current = val;
-          },
-          onSubmit: handleSubmitEdit
-        },
-        `add-${inputKey}`
+          onChange: setEditValue,
+          onSubmit: handleSubmitEdit,
+          onCancel: handleCancelEdit,
+          color: theme.colors.foreground,
+          placeholderColor: theme.colors.foreground,
+          maxLength: 60
+        }
       )
     ] }),
-    editMode === "addSubtask" && /* @__PURE__ */ jsxs7(Box7, { marginY: 1, children: [
-      /* @__PURE__ */ jsx11(Text5, { color: theme.colors.focusIndicator, children: ">  " }),
-      /* @__PURE__ */ jsx11(Text5, { color: theme.colors.keyboardHint, children: "  " }),
-      /* @__PURE__ */ jsx11(
-        TextInput,
+    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(
+        ControlledTextInput,
         {
-          defaultValue: "",
+          value: editValue,
           placeholder: "Enter subtask name...",
-          onChange: (val) => {
-            inputValueRef.current = val;
-          },
-          onSubmit: handleSubmitEdit
-        },
-        `subtask-${inputKey}`
+          onChange: setEditValue,
+          onSubmit: handleSubmitEdit,
+          onCancel: handleCancelEdit,
+          color: theme.colors.foreground,
+          placeholderColor: theme.colors.foreground,
+          maxLength: 60
+        }
       )
     ] }),
-    dayTasks.length === 0 && editMode !== "add" && editMode !== "addSubtask" ? /* @__PURE__ */ jsx11(Box7, { marginY: 1, children: /* @__PURE__ */ jsx11(Text5, { color: theme.colors.keyboardHint, dimColor: true, children: "No tasks. Press 'a' to add one." }) }) : /* @__PURE__ */ jsxs7(Box7, { flexDirection: "column", marginY: 1, paddingRight: 2, children: [
-      scrollOffset > 0 && /* @__PURE__ */ jsx11(Box7, { justifyContent: "center", marginBottom: 1, children: /* @__PURE__ */ jsx11(Text5, { color: theme.colors.keyboardHint, dimColor: true, children: "-- more above --" }) }),
+    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 --" }) }),
       flatTasks.slice(scrollOffset, scrollOffset + visibleRows).map(({ task, depth }, sliceIndex) => {
         const index = scrollOffset + sliceIndex;
         const isSelected = index === selectedIndex;
         const isExpanded = expandedIds.has(task.id);
         const isEditing = editMode === "edit" && isSelected;
         if (isEditing) {
-          return /* @__PURE__ */ jsxs7(Box7, { children: [
-            /* @__PURE__ */ jsx11(Text5, { color: theme.colors.focusIndicator, children: ">  " }),
-            /* @__PURE__ */ jsx11(
-              TextInput,
+          return /* @__PURE__ */ jsxs9(Box8, { children: [
+            /* @__PURE__ */ jsx13(Text7, { color: theme.colors.focusIndicator, children: ">  " }),
+            /* @__PURE__ */ jsx13(
+              ControlledTextInput,
               {
-                defaultValue: editValue,
-                onChange: (val) => {
-                  inputValueRef.current = val;
-                },
-                onSubmit: handleSubmitEdit
-              },
-              `edit-${inputKey}`
+                value: editValue,
+                onChange: setEditValue,
+                onSubmit: handleSubmitEdit,
+                onCancel: handleCancelEdit,
+                color: theme.colors.foreground,
+                placeholderColor: theme.colors.foreground,
+                maxLength: 60
+              }
             )
           ] }, task.id);
         }
-        return /* @__PURE__ */ jsxs7(Box7, { children: [
-          /* @__PURE__ */ jsx11(
-            Text5,
+        return /* @__PURE__ */ jsxs9(Box8, { children: [
+          /* @__PURE__ */ jsx13(
+            Text7,
             {
               color: isSelected ? theme.colors.focusIndicator : theme.colors.foreground,
               children: isSelected ? ">" : " "
             }
           ),
-          /* @__PURE__ */ jsx11(Text5, { children: " " }),
-          /* @__PURE__ */ jsx11(Text5, { children: "  ".repeat(depth) }),
-          /* @__PURE__ */ jsx11(
-            Text5,
+          /* @__PURE__ */ jsx13(Text7, { children: " " }),
+          /* @__PURE__ */ jsx13(Text7, { children: "  ".repeat(depth) }),
+          /* @__PURE__ */ jsx13(
+            Text7,
             {
               color: isSelected ? theme.colors.focusIndicator : getStateColor(task.state, theme),
               children: getCheckbox(task.state)
             }
           ),
-          /* @__PURE__ */ jsx11(Text5, { children: " " }),
-          task.children.length > 0 && /* @__PURE__ */ jsxs7(Fragment, { children: [
-            /* @__PURE__ */ jsx11(Text5, { children: isExpanded ? "\u25BC" : "\u25B6" }),
-            /* @__PURE__ */ jsx11(Text5, { children: " " })
+          /* @__PURE__ */ jsx13(Text7, { children: " " }),
+          task.children.length > 0 && /* @__PURE__ */ jsxs9(Fragment, { children: [
+            /* @__PURE__ */ jsx13(Text7, { children: isExpanded ? "\u25BC" : "\u25B6" }),
+            /* @__PURE__ */ jsx13(Text7, { children: " " })
           ] }),
-          /* @__PURE__ */ jsx11(
-            Text5,
+          /* @__PURE__ */ jsx13(
+            Text7,
             {
               color: isSelected ? theme.colors.focusIndicator : getStateColor(task.state, theme),
               strikethrough: task.state === "completed",
@@ -3043,8 +3150,8 @@ var TasksPane = () => {
               children: task.title
             }
           ),
-          task.startTime && !task.endTime && /* @__PURE__ */ jsxs7(
-            Text5,
+          task.startTime && !task.endTime && /* @__PURE__ */ jsxs9(
+            Text7,
             {
               color: isSelected ? theme.colors.focusIndicator : theme.colors.timelineEventStarted,
               children: [
@@ -3055,13 +3162,26 @@ var TasksPane = () => {
           )
         ] }, task.id);
       }),
-      scrollOffset + visibleRows < flatTasks.length && /* @__PURE__ */ jsx11(Box7, { justifyContent: "center", marginTop: 1, children: /* @__PURE__ */ jsx11(Text5, { color: theme.colors.keyboardHint, dimColor: true, children: "-- more below --" }) })
+      scrollOffset + visibleRows < flatTasks.length && /* @__PURE__ */ jsx13(Box8, { justifyContent: "center", marginTop: 1, children: /* @__PURE__ */ jsx13(Text7, { color: theme.colors.keyboardHint, dimColor: true, children: "-- more below --" }) })
     ] }),
-    /* @__PURE__ */ jsxs7(Box7, { marginTop: 1, flexDirection: "column", children: [
-      /* @__PURE__ */ jsx11(Text5, { color: theme.colors.keyboardHint, dimColor: true, children: "j/k: navigate a: add Tab: add subtask e: edit d: delete" }),
-      /* @__PURE__ */ jsx11(Text5, { color: theme.colors.keyboardHint, dimColor: true, children: "Space: complete D: delegate x: delay s: start" }),
-      /* @__PURE__ */ jsx11(Text5, { color: theme.colors.keyboardHint, dimColor: true, children: "\u2190/\u2192: collapse/expand Cmd+\u2190/\u2192: collapse/expand all" })
-    ] })
+    /* @__PURE__ */ jsx13(
+      KeyboardHints,
+      {
+        hints: [
+          { key: "j/k", description: "navigate" },
+          { key: "a", description: "add" },
+          { key: "Tab", description: "add subtask" },
+          { key: "e", description: "edit" },
+          { key: "d", description: "delete" },
+          { key: "Space", description: "complete" },
+          { key: "D", description: "delegate" },
+          { key: "x", description: "delay" },
+          { key: "s", description: "start" },
+          { key: "\u2190/\u2192", description: "collapse/expand" },
+          { key: "Cmd+\u2190/\u2192", description: "all" }
+        ]
+      }
+    )
   ] }) });
 };
 function getCheckbox(state) {
@@ -3087,12 +3207,12 @@ function getStateColor(state, theme) {
 }
 
 // src/components/timeline/TimelinePane.tsx
-import { useState as useState7, useEffect as useEffect8, useMemo as useMemo2 } from "react";
-import { Box as Box9, Text as Text7, useInput as useInput4 } from "ink";
+import { useState as useState7, 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 Box8, Text as Text6 } from "ink";
-import { jsx as jsx12, jsxs as jsxs8 } from "react/jsx-runtime";
+import { Box as Box9, Text as Text8 } from "ink";
+import { jsx as jsx14, jsxs as jsxs10 } from "react/jsx-runtime";
 var TimelineEntry = ({
   event,
   isLast,
@@ -3117,32 +3237,39 @@ var TimelineEntry = ({
   const isFilledCircle = ["completed", "delegated", "delayed"].includes(
     event.type
   );
-  return /* @__PURE__ */ jsxs8(Box8, { flexDirection: "column", children: [
-    /* @__PURE__ */ jsxs8(Box8, { children: [
-      /* @__PURE__ */ jsx12(Box8, { width: 3, justifyContent: "center", children: /* @__PURE__ */ jsx12(Text6, { color, children: isFilledCircle ? "\u25CF" : "\u25CB" }) }),
-      /* @__PURE__ */ jsxs8(Box8, { flexDirection: "column", flexGrow: 1, children: [
-        /* @__PURE__ */ jsx12(Box8, { children: /* @__PURE__ */ jsxs8(Text6, { children: [
-          /* @__PURE__ */ jsxs8(Text6, { color, bold: true, children: [
+  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: [
+          /* @__PURE__ */ jsxs10(Text8, { color, bold: true, children: [
             typeStr,
             ":"
           ] }),
-          /* @__PURE__ */ jsxs8(Text6, { color: theme.colors.foreground, children: [
+          /* @__PURE__ */ jsxs10(Text8, { color: theme.colors.foreground, children: [
             " ",
             event.taskTitle
           ] })
         ] }) }),
-        /* @__PURE__ */ jsx12(Box8, { children: /* @__PURE__ */ jsx12(Text6, { color: theme.colors.keyboardHint, dimColor: true, children: timeStr }) })
+        /* @__PURE__ */ jsx14(Box9, { children: /* @__PURE__ */ jsx14(Text8, { color: theme.colors.keyboardHint, dimColor: true, children: timeStr }) })
       ] })
     ] }),
-    !isLast && /* @__PURE__ */ jsx12(Box8, { children: /* @__PURE__ */ jsx12(Box8, { width: 3, justifyContent: "center", children: /* @__PURE__ */ jsx12(Text6, { color: hasNextSameTask ? color : theme.colors.border, children: "\u2502" }) }) })
+    !isLast && /* @__PURE__ */ jsx14(Box9, { children: /* @__PURE__ */ jsx14(Box9, { width: 3, justifyContent: "center", children: /* @__PURE__ */ jsx14(Text8, { color: hasNextSameTask ? color : theme.colors.border, children: "\u2502" }) }) })
   ] });
 };
 
 // src/components/timeline/TimelinePane.tsx
-import { jsx as jsx13, jsxs as jsxs9 } from "react/jsx-runtime";
+import { jsx as jsx15, jsxs as jsxs11 } from "react/jsx-runtime";
 var TimelinePane = () => {
   const { theme } = useTheme();
-  const { selectedDate, timeline, activePane, isModalOpen, isInputMode } = useApp();
+  const {
+    selectedDate,
+    timeline,
+    setTimeline,
+    activePane,
+    isModalOpen,
+    isInputMode
+  } = useApp();
   const isFocused = activePane === "timeline" && !isModalOpen;
   const [scrollOffset, setScrollOffset] = useState7(0);
   const { height: terminalHeight } = useTerminalSize();
@@ -3172,10 +3299,10 @@ var TimelinePane = () => {
     );
     return taskGroups.flatMap(([, events]) => events);
   }, [dayEvents]);
-  useEffect8(() => {
+  useEffect9(() => {
     setScrollOffset(0);
   }, [dateStr]);
-  useInput4(
+  useInput5(
     (input, key) => {
       if (!isFocused) return;
       if (input === "j" || key.downArrow) {
@@ -3199,6 +3326,12 @@ var TimelinePane = () => {
           (prev) => Math.max(prev - Math.floor(visibleRows / 2), 0)
         );
       }
+      if (input === "C") {
+        setTimeline({
+          ...timeline,
+          [dateStr]: []
+        });
+      }
     },
     { isActive: isFocused && !isInputMode }
   );
@@ -3208,18 +3341,18 @@ var TimelinePane = () => {
   );
   const canScrollUp = scrollOffset > 0;
   const canScrollDown = scrollOffset + visibleRows < sortedEvents.length;
-  return /* @__PURE__ */ jsx13(Pane, { title: "Timeline", isFocused, children: /* @__PURE__ */ jsxs9(Box9, { flexDirection: "column", flexGrow: 1, children: [
-    sortedEvents.length === 0 ? /* @__PURE__ */ jsxs9(Box9, { marginY: 1, flexDirection: "column", paddingX: 1, children: [
-      /* @__PURE__ */ jsx13(Text7, { color: theme.colors.keyboardHint, dimColor: true, children: "No activities yet." }),
-      /* @__PURE__ */ jsx13(Text7, { color: theme.colors.keyboardHint, dimColor: true, children: "Press 's' to start a task." })
-    ] }) : /* @__PURE__ */ jsxs9(Box9, { flexDirection: "column", children: [
-      canScrollUp && /* @__PURE__ */ jsx13(Box9, { justifyContent: "center", marginBottom: 1, children: /* @__PURE__ */ jsx13(Text7, { color: theme.colors.keyboardHint, dimColor: true, children: "-- more above --" }) }),
-      /* @__PURE__ */ jsx13(Box9, { flexDirection: "column", children: visibleEvents.map((event, index) => {
+  return /* @__PURE__ */ jsx15(Pane, { title: "Timeline", isFocused, children: /* @__PURE__ */ jsxs11(Box10, { flexDirection: "column", flexGrow: 1, width: "100%", 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) => {
         const globalIndex = scrollOffset + index;
         const isLast = globalIndex === sortedEvents.length - 1;
         const nextEvent = sortedEvents[globalIndex + 1];
         const hasNextSameTask = nextEvent && nextEvent.taskId === event.taskId;
-        return /* @__PURE__ */ jsx13(
+        return /* @__PURE__ */ jsx15(
           TimelineEntry,
           {
             event,
@@ -3229,21 +3362,29 @@ var TimelinePane = () => {
           event.id
         );
       }) }),
-      canScrollDown && /* @__PURE__ */ jsx13(Box9, { justifyContent: "center", marginTop: 1, children: /* @__PURE__ */ jsx13(Text7, { color: theme.colors.keyboardHint, dimColor: true, children: "-- more below --" }) })
+      canScrollDown && /* @__PURE__ */ jsx15(Box10, { justifyContent: "center", marginTop: 1, children: /* @__PURE__ */ jsx15(Text9, { color: theme.colors.keyboardHint, dimColor: true, children: "-- more below --" }) })
     ] }),
-    /* @__PURE__ */ jsx13(Box9, { marginTop: 1, children: /* @__PURE__ */ jsx13(Text7, { color: theme.colors.keyboardHint, dimColor: true, children: "j/k: scroll" }) })
+    /* @__PURE__ */ jsx15(
+      KeyboardHints,
+      {
+        hints: [
+          { key: "j/k", description: "scroll" },
+          { key: "Shift+C", description: "clear" }
+        ]
+      }
+    )
   ] }) });
 };
 
 // src/components/common/HelpDialog.tsx
-import { Box as Box12, Text as Text8 } from "ink";
+import { Box as Box13, Text as Text10 } from "ink";
 
 // src/components/common/Modal.tsx
-import { Box as Box11, useStdout as useStdout3 } from "ink";
+import { Box as Box12, useStdout as useStdout3 } from "ink";
 
 // src/components/common/FullscreenBackground.tsx
-import { Box as Box10, useStdout as useStdout2 } from "ink";
-import { jsx as jsx14 } from "react/jsx-runtime";
+import { Box as Box11, useStdout as useStdout2 } from "ink";
+import { jsx as jsx16 } from "react/jsx-runtime";
 var FullscreenBackground = ({
   children,
   backgroundColor
@@ -3251,8 +3392,8 @@ var FullscreenBackground = ({
   const { stdout } = useStdout2();
   const width = stdout?.columns || 100;
   const height = stdout?.rows || 30;
-  return /* @__PURE__ */ jsx14(
-    Box10,
+  return /* @__PURE__ */ jsx16(
+    Box11,
     {
       flexDirection: "column",
       width,
@@ -3264,18 +3405,18 @@ var FullscreenBackground = ({
 };
 
 // src/components/common/Modal.tsx
-import { jsx as jsx15 } from "react/jsx-runtime";
+import { jsx as jsx17 } 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__ */ jsx15(
+  return /* @__PURE__ */ jsx17(
     FullscreenBackground,
     {
       backgroundColor: theme.colors.modalOverlay || "black",
-      children: /* @__PURE__ */ jsx15(
-        Box11,
+      children: /* @__PURE__ */ jsx17(
+        Box12,
         {
           flexDirection: "column",
           width,
@@ -3290,7 +3431,7 @@ var Modal = ({ children }) => {
 };
 
 // src/components/common/HelpDialog.tsx
-import { Fragment as Fragment2, jsx as jsx16, jsxs as jsxs10 } from "react/jsx-runtime";
+import { Fragment as Fragment2, jsx as jsx18, jsxs as jsxs12 } from "react/jsx-runtime";
 var HelpDialog = () => {
   const { theme } = useTheme();
   const shortcuts = [
@@ -3323,8 +3464,8 @@ var HelpDialog = () => {
     { key: "j/k", action: "Scroll timeline" },
     { key: "Shift+C", action: "Clear timeline" }
   ];
-  return /* @__PURE__ */ jsx16(Modal, { children: /* @__PURE__ */ jsxs10(
-    Box12,
+  return /* @__PURE__ */ jsx18(Modal, { children: /* @__PURE__ */ jsxs12(
+    Box13,
     {
       flexDirection: "column",
       borderStyle: "double",
@@ -3333,22 +3474,21 @@ var HelpDialog = () => {
       paddingY: 1,
       backgroundColor: theme.colors.modalBackground || theme.colors.background,
       children: [
-        /* @__PURE__ */ jsx16(Text8, { bold: true, color: theme.colors.calendarHeader, children: "Keyboard Shortcuts" }),
-        /* @__PURE__ */ jsx16(Box12, { flexDirection: "column", marginTop: 1, children: shortcuts.map((item, idx) => /* @__PURE__ */ jsx16(Box12, { marginY: 0, children: item.key ? /* @__PURE__ */ jsxs10(Fragment2, { children: [
-          /* @__PURE__ */ jsx16(Box12, { width: 20, children: /* @__PURE__ */ jsx16(Text8, { color: theme.colors.timelineEventStarted, children: item.key }) }),
-          /* @__PURE__ */ jsx16(Text8, { color: theme.colors.foreground, children: item.action })
-        ] }) : /* @__PURE__ */ jsx16(Text8, { 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__ */ jsx16(Box12, { marginY: 1, children: /* @__PURE__ */ jsx16(Text8, { color: theme.colors.keyboardHint, dimColor: true, children: "Press '?' to close" }) })
+        /* @__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" }) })
       ]
     }
   ) });
 };
 
 // src/components/common/ThemeDialog.tsx
-import { useState as useState8, useMemo as useMemo3, useEffect as useEffect9 } from "react";
-import { Box as Box13, Text as Text9, useInput as useInput5 } from "ink";
-import TextInput2 from "ink-text-input";
-import { jsx as jsx17, jsxs as jsxs11 } from "react/jsx-runtime";
+import { useState as useState8, 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";
 var ThemeDialog = () => {
   const { theme, setTheme, themeName } = useTheme();
   const { setShowThemeDialog } = useApp();
@@ -3388,21 +3528,19 @@ var ThemeDialog = () => {
     return idx >= 0 ? idx : 0;
   }, [themeItems, themeName]);
   const [selectedIndex, setSelectedIndex] = useState8(initialIndex);
-  useEffect9(() => {
+  useEffect10(() => {
     setSelectedIndex(0);
   }, [searchQuery]);
-  useInput5(
+  useInput6(
     (input, key) => {
       if (key.escape) {
         setShowThemeDialog(false);
         return;
       }
+      if ((input === "\r" || input === "\n") && !key.return) {
+        return;
+      }
       if (focusMode === "search") {
-        if (key.return && themeItems.length > 0) {
-          setTheme(themeItems[0].value);
-          setShowThemeDialog(false);
-          return;
-        }
         if (key.downArrow && themeItems.length > 0) {
           setFocusMode("list");
           setSelectedIndex(0);
@@ -3436,8 +3574,8 @@ var ThemeDialog = () => {
   const formatThemeName = (name) => {
     return name.split("-").map((word) => word.charAt(0).toUpperCase() + word.slice(1)).join(" ");
   };
-  return /* @__PURE__ */ jsx17(Modal, { children: /* @__PURE__ */ jsxs11(
-    Box13,
+  return /* @__PURE__ */ jsx19(Modal, { children: /* @__PURE__ */ jsxs13(
+    Box14,
     {
       flexDirection: "column",
       borderStyle: "double",
@@ -3447,38 +3585,46 @@ var ThemeDialog = () => {
       width: 44,
       backgroundColor: theme.colors.modalBackground || theme.colors.background,
       children: [
-        /* @__PURE__ */ jsx17(Text9, { bold: true, color: theme.colors.calendarHeader, underline: true, children: "Select Theme" }),
-        /* @__PURE__ */ jsxs11(Box13, { marginTop: 1, flexDirection: "row", alignItems: "center", children: [
-          /* @__PURE__ */ jsxs11(Text9, { color: theme.colors.foreground, dimColor: true, children: [
+        /* @__PURE__ */ jsx19(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__ */ jsx17(Text9, { color: theme.colors.foreground, children: /* @__PURE__ */ jsx17(
-            TextInput2,
+          /* @__PURE__ */ jsx19(
+            ControlledTextInput,
             {
               value: searchQuery,
               onChange: setSearchQuery,
+              onSubmit: () => {
+                if (themeItems.length > 0) {
+                  setTheme(themeItems[0].value);
+                  setShowThemeDialog(false);
+                }
+              },
               focus: focusMode === "search",
-              placeholder: "Type to filter..."
+              placeholder: "Type to filter...",
+              placeholderColor: theme.colors.foreground,
+              color: theme.colors.foreground
             }
-          ) })
+          )
         ] }),
-        /* @__PURE__ */ jsx17(Box13, { flexDirection: "column", marginTop: 1, children: allThemes.map((item, idx) => {
+        /* @__PURE__ */ jsx19(Box14, { flexDirection: "column", marginTop: 1, children: allThemes.map((item, idx) => {
           if (item.type === "separator") {
-            return /* @__PURE__ */ jsx17(
-              Box13,
+            return /* @__PURE__ */ jsx19(
+              Box14,
               {
                 marginTop: idx > 0 ? 1 : 0,
                 marginBottom: 0,
-                children: /* @__PURE__ */ jsx17(Text9, { bold: true, color: theme.colors.calendarHeader, dimColor: true, children: item.value })
+                children: /* @__PURE__ */ jsx19(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__ */ jsx17(Box13, { paddingLeft: 1, children: /* @__PURE__ */ jsxs11(
-            Text9,
+          return /* @__PURE__ */ jsx19(Box14, { paddingLeft: 1, children: /* @__PURE__ */ jsxs13(
+            Text11,
             {
               color: isSelected ? theme.colors.focusIndicator : theme.colors.foreground,
               bold: isSelected,
@@ -3490,16 +3636,16 @@ var ThemeDialog = () => {
             }
           ) }, item.value);
         }) }),
-        /* @__PURE__ */ jsx17(Box13, { marginTop: 1, children: /* @__PURE__ */ jsx17(Text9, { 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__ */ 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" }) })
       ]
     }
   ) });
 };
 
 // src/components/common/ClearTimelineDialog.tsx
-import { Box as Box14, Text as Text10, useInput as useInput6 } from "ink";
+import { Box as Box15, Text as Text12, useInput as useInput7 } from "ink";
 import { format as format2 } from "date-fns";
-import { jsx as jsx18, jsxs as jsxs12 } from "react/jsx-runtime";
+import { jsx as jsx20, jsxs as jsxs14 } from "react/jsx-runtime";
 var ClearTimelineDialog = () => {
   const { theme } = useTheme();
   const {
@@ -3519,15 +3665,15 @@ var ClearTimelineDialog = () => {
   const handleCancel = () => {
     setShowClearTimelineDialog(false);
   };
-  useInput6((input, key) => {
+  useInput7((input, key) => {
     if (input.toLowerCase() === "y" || key.return) {
       handleConfirm();
     } else if (input.toLowerCase() === "n" || key.escape) {
       handleCancel();
     }
   });
-  return /* @__PURE__ */ jsx18(Modal, { children: /* @__PURE__ */ jsxs12(
-    Box14,
+  return /* @__PURE__ */ jsx20(Modal, { children: /* @__PURE__ */ jsxs14(
+    Box15,
     {
       flexDirection: "column",
       borderStyle: "double",
@@ -3536,39 +3682,39 @@ var ClearTimelineDialog = () => {
       paddingY: 2,
       backgroundColor: theme.colors.modalBackground || theme.colors.background,
       children: [
-        /* @__PURE__ */ jsx18(Box14, { justifyContent: "center", marginBottom: 1, children: /* @__PURE__ */ jsx18(Text10, { bold: true, color: theme.colors.taskStateDelayed, children: "Clear Timeline" }) }),
-        /* @__PURE__ */ jsxs12(Box14, { flexDirection: "column", marginY: 1, children: [
-          /* @__PURE__ */ jsx18(Text10, { color: theme.colors.foreground, children: "You are about to clear the timeline for" }),
-          /* @__PURE__ */ jsx18(Box14, { justifyContent: "center", marginY: 1, children: /* @__PURE__ */ jsx18(Text10, { bold: true, color: theme.colors.calendarHeader, children: formattedDate }) }),
-          eventCount > 0 ? /* @__PURE__ */ jsxs12(Text10, { color: theme.colors.keyboardHint, children: [
+        /* @__PURE__ */ jsx20(Box15, { justifyContent: "center", marginBottom: 1, children: /* @__PURE__ */ jsx20(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 }) }),
+          eventCount > 0 ? /* @__PURE__ */ jsxs14(Text12, { color: theme.colors.keyboardHint, children: [
             "This will remove ",
             eventCount,
             " event",
             eventCount !== 1 ? "s" : "",
             " from the timeline."
-          ] }) : /* @__PURE__ */ jsx18(Text10, { color: theme.colors.keyboardHint, dimColor: true, children: "The timeline is already empty." })
+          ] }) : /* @__PURE__ */ jsx20(Text12, { color: theme.colors.keyboardHint, dimColor: true, children: "The timeline is already empty." })
         ] }),
-        /* @__PURE__ */ jsxs12(Box14, { marginTop: 2, justifyContent: "center", children: [
-          /* @__PURE__ */ jsx18(Text10, { color: theme.colors.foreground, children: "Are you sure? " }),
-          /* @__PURE__ */ jsx18(Text10, { color: theme.colors.taskStateCompleted, bold: true, children: "[Y]es" }),
-          /* @__PURE__ */ jsx18(Text10, { color: theme.colors.foreground, children: " / " }),
-          /* @__PURE__ */ jsx18(Text10, { color: theme.colors.taskStateDelayed, bold: true, children: "[N]o" })
+        /* @__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__ */ jsx18(Box14, { marginTop: 2, justifyContent: "center", children: /* @__PURE__ */ jsx18(Text10, { color: theme.colors.keyboardHint, dimColor: true, children: "Press Y to confirm, N or Esc to cancel" }) })
+        /* @__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" }) })
       ]
     }
   ) });
 };
 
 // src/components/overview/OverviewScreen.tsx
-import React8, { useMemo as useMemo4 } from "react";
-import { Box as Box15, Text as Text11, useInput as useInput7 } from "ink";
+import React9, { 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 jsx19, jsxs as jsxs13 } from "react/jsx-runtime";
+import { jsx as jsx21, jsxs as jsxs15 } from "react/jsx-runtime";
 var OverviewScreen = () => {
   const { theme } = useTheme();
   const { tasks, overviewMonth, setOverviewMonth, setShowOverview } = useApp();
-  const [scrollOffset, setScrollOffset] = React8.useState(0);
+  const [scrollOffset, setScrollOffset] = React9.useState(0);
   const { height: terminalHeight } = useTerminalSize();
   const visibleRows = useMemo4(() => {
     return Math.max(2, Math.floor((terminalHeight - 9) / 3));
@@ -3604,10 +3750,10 @@ var OverviewScreen = () => {
       setOverviewMonth({ ...overviewMonth, month: newMonth });
     }
   };
-  React8.useEffect(() => {
+  React9.useEffect(() => {
     setScrollOffset(0);
   }, [overviewMonth]);
-  useInput7((input, key) => {
+  useInput8((input, key) => {
     if (key.escape) {
       setShowOverview(false);
       return;
@@ -3643,21 +3789,21 @@ var OverviewScreen = () => {
   );
   const canScrollUp = scrollOffset > 0;
   const canScrollDown = scrollOffset + visibleRows < rows;
-  return /* @__PURE__ */ jsxs13(Box15, { flexDirection: "column", padding: 1, width: "100%", height: "100%", children: [
-    /* @__PURE__ */ jsxs13(Box15, { flexDirection: "column", marginBottom: 1, children: [
-      /* @__PURE__ */ jsx19(Text11, { bold: true, color: theme.colors.focusIndicator, children: "Overview" }),
-      /* @__PURE__ */ jsx19(Text11, { color: theme.colors.foreground, children: monthName })
+  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__ */ jsxs13(Box15, { flexDirection: "column", flexGrow: 1, children: [
-      canScrollUp && /* @__PURE__ */ jsx19(Box15, { justifyContent: "center", marginBottom: 1, children: /* @__PURE__ */ jsx19(Text11, { color: theme.colors.keyboardHint, dimColor: true, children: "-- more above --" }) }),
+    /* @__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 --" }) }),
       visibleRowData.map((_, index) => {
         const rowIndex = scrollOffset + index;
-        return /* @__PURE__ */ jsx19(Box15, { flexDirection: "row", marginBottom: 1, children: Array.from({ length: columns }).map((_2, colIndex) => {
+        return /* @__PURE__ */ jsx21(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__ */ jsx19(
-              Box15,
+            return /* @__PURE__ */ jsx21(
+              Box16,
               {
                 flexDirection: "column",
                 flexGrow: 1,
@@ -3677,17 +3823,17 @@ var OverviewScreen = () => {
             }
           };
           traverse(dayTasks, 0);
-          return /* @__PURE__ */ jsxs13(
-            Box15,
+          return /* @__PURE__ */ jsxs15(
+            Box16,
             {
               flexDirection: "column",
               flexGrow: 1,
               flexBasis: 0,
               marginRight: colIndex === columns - 1 ? 0 : 2,
               children: [
-                /* @__PURE__ */ jsx19(Text11, { bold: true, color: theme.colors.calendarSelected, children: formatDate(date, "do MMM") }),
-                /* @__PURE__ */ jsxs13(Box15, { flexDirection: "column", children: [
-                  flatTasksWithDepth.length === 0 ? /* @__PURE__ */ jsx19(Text11, { dimColor: true, color: theme.colors.keyboardHint, children: "No tasks" }) : flatTasksWithDepth.slice(0, 10).map(({ task, depth }) => /* @__PURE__ */ jsx19(
+                /* @__PURE__ */ jsx21(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(
                     TaskItem,
                     {
                       task,
@@ -3696,7 +3842,7 @@ var OverviewScreen = () => {
                     },
                     task.id
                   )),
-                  flatTasksWithDepth.length > 10 && /* @__PURE__ */ jsxs13(Text11, { dimColor: true, color: theme.colors.keyboardHint, children: [
+                  flatTasksWithDepth.length > 10 && /* @__PURE__ */ jsxs15(Text13, { dimColor: true, color: theme.colors.keyboardHint, children: [
                     "+",
                     flatTasksWithDepth.length - 10,
                     " more..."
@@ -3708,22 +3854,22 @@ var OverviewScreen = () => {
           );
         }) }, rowIndex);
       }),
-      canScrollDown && /* @__PURE__ */ jsx19(Box15, { justifyContent: "center", marginTop: 1, children: /* @__PURE__ */ jsx19(Text11, { color: theme.colors.keyboardHint, dimColor: true, children: "-- more below --" }) })
+      canScrollDown && /* @__PURE__ */ jsx21(Box16, { justifyContent: "center", marginTop: 1, children: /* @__PURE__ */ jsx21(Text13, { color: theme.colors.keyboardHint, dimColor: true, children: "-- more below --" }) })
     ] }),
-    /* @__PURE__ */ jsx19(Box15, { marginTop: 1, children: /* @__PURE__ */ jsx19(Text11, { color: theme.colors.keyboardHint, dimColor: true, children: "n/p or \u2190/\u2192: month | j/k or \u2193/\u2191: scroll | Esc: close | Shift+;: toggle" }) })
+    /* @__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" }) })
   ] });
 };
 var TaskItem = ({ task, theme, depth }) => {
   const checkbox = getCheckbox2(task.state);
   const color = getStateColor2(task.state, theme);
-  return /* @__PURE__ */ jsxs13(Box15, { children: [
-    /* @__PURE__ */ jsxs13(Text11, { color, children: [
+  return /* @__PURE__ */ jsxs15(Box16, { children: [
+    /* @__PURE__ */ jsxs15(Text13, { color, children: [
       checkbox,
       " "
     ] }),
-    depth > 0 && /* @__PURE__ */ jsx19(Text11, { children: "  ".repeat(depth) }),
-    /* @__PURE__ */ jsx19(
-      Text11,
+    depth > 0 && /* @__PURE__ */ jsx21(Text13, { children: "  ".repeat(depth) }),
+    /* @__PURE__ */ jsx21(
+      Text13,
       {
         color,
         strikethrough: task.state === "completed",
@@ -3756,7 +3902,7 @@ function getStateColor2(state, theme) {
 }
 
 // src/App.tsx
-import { jsx as jsx20, jsxs as jsxs14 } from "react/jsx-runtime";
+import { jsx as jsx22, jsxs as jsxs16 } from "react/jsx-runtime";
 var AppContent = () => {
   const {
     showHelp,
@@ -3770,26 +3916,26 @@ var AppContent = () => {
   useKeyboardNav();
   const { width, height } = useTerminalSize();
   if (showThemeDialog) {
-    return /* @__PURE__ */ jsx20(ThemeDialog, {});
+    return /* @__PURE__ */ jsx22(ThemeDialog, {});
   }
   if (showHelp) {
-    return /* @__PURE__ */ jsx20(HelpDialog, {});
+    return /* @__PURE__ */ jsx22(HelpDialog, {});
   }
   if (showClearTimelineDialog) {
-    return /* @__PURE__ */ jsx20(ClearTimelineDialog, {});
+    return /* @__PURE__ */ jsx22(ClearTimelineDialog, {});
   }
-  return /* @__PURE__ */ jsx20(FullscreenBackground, { backgroundColor: theme.colors.background || "black", children: /* @__PURE__ */ jsxs14(Box16, { flexDirection: "column", width, height, padding: 1, backgroundColor: theme.colors.background, children: [
-    showOverview ? /* @__PURE__ */ jsx20(OverviewScreen, {}) : /* @__PURE__ */ jsx20(
+  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(
       ThreeColumnLayout,
       {
-        leftPane: /* @__PURE__ */ jsx20(CalendarPane, {}),
-        centerPane: /* @__PURE__ */ jsx20(TasksPane, {}),
-        rightPane: /* @__PURE__ */ jsx20(TimelinePane, {}),
+        leftPane: /* @__PURE__ */ jsx22(CalendarPane, {}),
+        centerPane: /* @__PURE__ */ jsx22(TasksPane, {}),
+        rightPane: /* @__PURE__ */ jsx22(TimelinePane, {}),
         activePane,
         height: height - 2
       }
     ),
-    exitConfirmation && /* @__PURE__ */ jsx20(Box16, { width: "100%", justifyContent: "center", paddingY: 1, children: /* @__PURE__ */ jsxs14(Text12, { backgroundColor: "red", color: "white", bold: true, children: [
+    exitConfirmation && /* @__PURE__ */ jsx22(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",
       " "
@@ -3797,12 +3943,12 @@ var AppContent = () => {
   ] }) });
 };
 var App = () => {
-  return /* @__PURE__ */ jsx20(StorageProvider, { children: /* @__PURE__ */ jsx20(ThemeProvider, { initialTheme: "dark", children: /* @__PURE__ */ jsx20(AppProvider, { children: /* @__PURE__ */ jsx20(AppContent, {}) }) }) });
+  return /* @__PURE__ */ jsx22(StorageProvider, { children: /* @__PURE__ */ jsx22(ThemeProvider, { initialTheme: "dark", children: /* @__PURE__ */ jsx22(AppProvider, { children: /* @__PURE__ */ jsx22(AppContent, {}) }) }) });
 };
 var App_default = App;
 
 // src/index.tsx
-import { jsx as jsx21 } from "react/jsx-runtime";
+import { jsx as jsx23 } from "react/jsx-runtime";
 console.clear();
-var app = render(/* @__PURE__ */ jsx21(App_default, {}), { exitOnCtrlC: false });
+var app = render(/* @__PURE__ */ jsx23(App_default, {}), { exitOnCtrlC: false });
 global.__inkApp = app;

package/package.json

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