@tomkapa/tayto 0.1.2 → 0.2.0

package/dist/{tui-JNZRBEIQ.js → tui-FTXYP3HM.js}

@@ -1,19 +1,20 @@
 #!/usr/bin/env node
 import {
   DependencyType,
+  TaskLevel,
   TaskStatus,
   TaskType,
   UIDependencyType,
   isTerminalStatus,
   logger
-} from "./chunk-6NQOFUIQ.js";
+} from "./chunk-FUNYPBWJ.js";
 
 // src/tui/index.tsx
 import { render } from "ink";
 
 // src/tui/components/App.tsx
 import { useReducer, useEffect, useCallback as useCallback2, useMemo } from "react";
-import { Box as Box14, Text as Text14, useInput as useInput5, useApp } from "ink";
+import { Box as Box16, Text as Text16, useInput as useInput6, useApp } from "ink";
 
 // src/tui/types.ts
 var ViewType = {
@@ -24,6 +25,7 @@ var ViewType = {
   ProjectSelector: "project-selector",
   ProjectCreate: "project-create",
   DependencyList: "dependency-list",
+  EpicPicker: "epic-picker",
   Help: "help"
 };
 
@@ -51,7 +53,13 @@ var initialState = {
   depSelectedIndex: 0,
   isAddingDep: false,
   addDepInput: "",
-  focusedPanel: "list"
+  focusedPanel: "list",
+  detailScrollOffset: 0,
+  epics: [],
+  epicSelectedIndex: 0,
+  selectedEpicIds: /* @__PURE__ */ new Set(),
+  isEpicReordering: false,
+  epicReorderSnapshot: null
 };
 function appReducer(state, action) {
   switch (action.type) {
@@ -111,14 +119,14 @@ function appReducer(state, action) {
     case "MOVE_CURSOR": {
       const maxIndex = Math.max(0, state.tasks.length - 1);
       const newIndex = action.direction === "up" ? Math.max(0, state.selectedIndex - 1) : Math.min(maxIndex, state.selectedIndex + 1);
-      return { ...state, selectedIndex: newIndex };
+      return { ...state, selectedIndex: newIndex, detailScrollOffset: 0 };
     }
     case "SET_CURSOR": {
       const maxIndex = Math.max(0, state.tasks.length - 1);
       return { ...state, selectedIndex: Math.max(0, Math.min(action.index, maxIndex)) };
     }
     case "SELECT_TASK":
-      return { ...state, selectedTask: action.task };
+      return { ...state, selectedTask: action.task, detailScrollOffset: 0 };
     case "SET_FORM_DATA":
       return { ...state, formData: action.data };
     case "ENTER_REORDER":
@@ -181,6 +189,74 @@ function appReducer(state, action) {
       return { ...state, addDepInput: action.input };
     case "SET_PANEL_FOCUS":
       return { ...state, focusedPanel: action.panel };
+    case "DETAIL_SCROLL":
+      return {
+        ...state,
+        detailScrollOffset: action.direction === "up" ? Math.max(0, state.detailScrollOffset - 1) : state.detailScrollOffset + 1
+      };
+    case "DETAIL_RESET_SCROLL":
+      return { ...state, detailScrollOffset: 0 };
+    case "SET_EPICS":
+      return {
+        ...state,
+        epics: action.epics,
+        epicSelectedIndex: Math.min(state.epicSelectedIndex, Math.max(0, action.epics.length - 1))
+      };
+    case "EPIC_MOVE_CURSOR": {
+      if (state.epics.length === 0) return state;
+      const maxIdx = Math.max(0, state.epics.length - 1);
+      const newIdx = action.direction === "up" ? Math.max(0, state.epicSelectedIndex - 1) : Math.min(maxIdx, state.epicSelectedIndex + 1);
+      return { ...state, epicSelectedIndex: newIdx };
+    }
+    case "TOGGLE_EPIC": {
+      const next = new Set(state.selectedEpicIds);
+      if (next.has(action.epicId)) {
+        next.delete(action.epicId);
+      } else {
+        next.add(action.epicId);
+      }
+      return { ...state, selectedEpicIds: next, selectedIndex: 0 };
+    }
+    case "CLEAR_EPIC_SELECTION":
+      return { ...state, selectedEpicIds: /* @__PURE__ */ new Set(), selectedIndex: 0 };
+    case "ENTER_EPIC_REORDER":
+      return {
+        ...state,
+        isEpicReordering: true,
+        epicReorderSnapshot: [...state.epics]
+      };
+    case "EPIC_REORDER_MOVE": {
+      if (!state.isEpicReordering) return state;
+      const idx = state.epicSelectedIndex;
+      const epics = [...state.epics];
+      const swapIdx = action.direction === "up" ? idx - 1 : idx + 1;
+      if (swapIdx < 0 || swapIdx >= epics.length) return state;
+      const current = epics[idx];
+      const swap = epics[swapIdx];
+      if (!current || !swap) return state;
+      epics[idx] = swap;
+      epics[swapIdx] = current;
+      return {
+        ...state,
+        epics,
+        epicSelectedIndex: swapIdx
+      };
+    }
+    case "EXIT_EPIC_REORDER": {
+      if (!action.save && state.epicReorderSnapshot) {
+        return {
+          ...state,
+          isEpicReordering: false,
+          epics: state.epicReorderSnapshot,
+          epicReorderSnapshot: null
+        };
+      }
+      return {
+        ...state,
+        isEpicReordering: false,
+        epicReorderSnapshot: null
+      };
+    }
   }
 }
 
@@ -305,6 +381,7 @@ var STATUS_COLOR = {
   [TaskStatus.Cancelled]: theme.status.kill
 };
 var TYPE_COLOR = {
+  [TaskType.Epic]: theme.status.modified,
   [TaskType.Story]: theme.status.highlight,
   [TaskType.TechDebt]: theme.status.pending,
   [TaskType.Bug]: theme.status.error
@@ -319,13 +396,24 @@ var DEP_TYPE_LABEL = {
 // src/tui/components/Header.tsx
 import { Box, Text } from "ink";
 import { jsx, jsxs } from "react/jsx-runtime";
-function getKeyHints(view, isSearchActive) {
+function getKeyHints(view, isSearchActive, focusedPanel) {
   if (isSearchActive) {
     return [
       { key: "enter", desc: "apply" },
       { key: "esc", desc: "cancel" }
     ];
   }
+  if (view === "task-list" && focusedPanel === "epic") {
+    return [
+      { key: "j/k", desc: "nav" },
+      { key: "space", desc: "toggle" },
+      { key: "\u2190", desc: "reorder" },
+      { key: "0", desc: "clear" },
+      { key: "tab", desc: "tasks" },
+      { key: "?", desc: "help" },
+      { key: "q", desc: "quit" }
+    ];
+  }
   if (view === "task-list") {
     return [
       { key: "enter", desc: "view" },
@@ -333,11 +421,14 @@ function getKeyHints(view, isSearchActive) {
       { key: "e", desc: "edit" },
       { key: "d", desc: "del" },
       { key: "s", desc: "status" },
+      { key: "a", desc: "assign" },
+      { key: "A", desc: "unassign" },
       { key: "\u2190", desc: "reorder" },
       { key: "/", desc: "search" },
       { key: "p", desc: "project" },
       { key: "f", desc: "status-f" },
       { key: "t", desc: "type-f" },
+      { key: "tab", desc: "panel" },
       { key: "?", desc: "help" },
       { key: "q", desc: "quit" }
     ];
@@ -362,10 +453,10 @@ function getKeyHints(view, isSearchActive) {
 function Header({ state }) {
   const projectName = state.activeProject?.name ?? "none";
   const taskCount = state.tasks.length;
-  const hints = getKeyHints(state.activeView, state.isSearchActive);
+  const hints = getKeyHints(state.activeView, state.isSearchActive, state.focusedPanel);
   return /* @__PURE__ */ jsxs(Box, { flexDirection: "column", children: [
     /* @__PURE__ */ jsxs(Box, { gap: 2, children: [
-      /* @__PURE__ */ jsx(Text, { color: theme.logo, bold: true, children: "TaskCLI" }),
+      /* @__PURE__ */ jsx(Text, { color: theme.logo, bold: true, children: "Tayto" }),
       /* @__PURE__ */ jsx(Text, { color: theme.logo, children: "Project:" }),
       /* @__PURE__ */ jsx(Text, { color: "white", bold: true, children: projectName }),
       /* @__PURE__ */ jsx(Text, { dimColor: true, children: "|" }),
@@ -443,7 +534,8 @@ function TaskList({
   nonTerminalBlockerIds,
   nonTerminalDependentIds,
   isSelectedBlocked,
-  isFocused = true
+  isFocused = true,
+  epicFilterActive = false
 }) {
   const currentPage = Math.floor(selectedIndex / PAGE_SIZE);
   const viewStart = currentPage * PAGE_SIZE;
@@ -478,6 +570,7 @@ function TaskList({
             " ",
             "REORDER"
           ] }),
+          epicFilterActive && /* @__PURE__ */ jsx4(Text4, { color: theme.titleHighlight, children: " [epic]" }),
           filterText && /* @__PURE__ */ jsxs2(Text4, { color: theme.titleFilter, children: [
             " /",
             filterText
@@ -546,7 +639,7 @@ function TaskList({
 }
 
 // src/tui/components/TaskDetail.tsx
-import { Box as Box6, Text as Text6 } from "ink";
+import { Box as Box6, Text as Text6, useStdout } from "ink";
 
 // src/tui/components/Markdown.tsx
 import { Text as Text5, Box as Box5 } from "ink";
@@ -688,11 +781,14 @@ function TaskDetail({
   dependents,
   related,
   duplicates,
-  isFocused = true
+  isFocused = true,
+  scrollOffset = 0
 }) {
+  const { stdout } = useStdout();
   const allText = `${task.description}
 ${task.technicalNotes}
 ${task.additionalRequirements}`;
+  const viewportHeight = Math.max(5, (stdout.rows > 0 ? stdout.rows : 24) - 4);
   return /* @__PURE__ */ jsxs4(
     Box6,
     {
@@ -708,60 +804,66 @@ ${task.additionalRequirements}`;
           ] }),
           /* @__PURE__ */ jsx6(Text6, { color: theme.fg, children: "(" }),
           /* @__PURE__ */ jsx6(Text6, { color: theme.titleHighlight, bold: true, children: task.name }),
-          /* @__PURE__ */ jsx6(Text6, { color: theme.fg, children: ")" })
-        ] }),
-        /* @__PURE__ */ jsxs4(Box6, { flexDirection: "column", paddingX: 1, paddingY: 0, children: [
-          /* @__PURE__ */ jsx6(Field, { label: "id", value: task.id }),
-          /* @__PURE__ */ jsx6(Field, { label: "type", value: task.type }),
-          /* @__PURE__ */ jsx6(Field, { label: "status", value: task.status }),
-          /* @__PURE__ */ jsx6(Field, { label: "created", value: new Date(task.createdAt).toLocaleString() }),
-          /* @__PURE__ */ jsx6(Field, { label: "updated", value: new Date(task.updatedAt).toLocaleString() }),
-          task.parentId && /* @__PURE__ */ jsx6(Field, { label: "parent", value: task.parentId })
+          /* @__PURE__ */ jsx6(Text6, { color: theme.fg, children: ")" }),
+          scrollOffset > 0 && /* @__PURE__ */ jsxs4(Text6, { dimColor: true, children: [
+            " \u2191",
+            scrollOffset
+          ] })
         ] }),
-        (blockers && blockers.length > 0 || dependents && dependents.length > 0 || related && related.length > 0 || duplicates && duplicates.length > 0) && /* @__PURE__ */ jsxs4(Box6, { flexDirection: "column", paddingX: 1, children: [
-          /* @__PURE__ */ jsx6(Text6, { color: theme.title, bold: true, children: "--- dependencies ---" }),
-          blockers && blockers.length > 0 && /* @__PURE__ */ jsxs4(Box6, { gap: 0, children: [
-            /* @__PURE__ */ jsxs4(Text6, { color: theme.status.error, bold: true, children: [
-              "blocked by:",
-              " "
-            ] }),
-            /* @__PURE__ */ jsx6(Text6, { color: theme.yaml.value, children: blockers.map((t) => t.id).join(", ") })
+        /* @__PURE__ */ jsx6(Box6, { flexDirection: "column", height: viewportHeight, overflowY: "hidden", children: /* @__PURE__ */ jsxs4(Box6, { flexDirection: "column", marginTop: -scrollOffset, children: [
+          /* @__PURE__ */ jsxs4(Box6, { flexDirection: "column", paddingX: 1, paddingY: 0, children: [
+            /* @__PURE__ */ jsx6(Field, { label: "id", value: task.id }),
+            /* @__PURE__ */ jsx6(Field, { label: "type", value: task.type }),
+            /* @__PURE__ */ jsx6(Field, { label: "status", value: task.status }),
+            /* @__PURE__ */ jsx6(Field, { label: "created", value: new Date(task.createdAt).toLocaleString() }),
+            /* @__PURE__ */ jsx6(Field, { label: "updated", value: new Date(task.updatedAt).toLocaleString() }),
+            task.parentId && /* @__PURE__ */ jsx6(Field, { label: "parent", value: task.parentId })
           ] }),
-          dependents && dependents.length > 0 && /* @__PURE__ */ jsxs4(Box6, { gap: 0, children: [
-            /* @__PURE__ */ jsxs4(Text6, { color: theme.status.added, bold: true, children: [
-              "blocks:",
-              " "
+          (blockers && blockers.length > 0 || dependents && dependents.length > 0 || related && related.length > 0 || duplicates && duplicates.length > 0) && /* @__PURE__ */ jsxs4(Box6, { flexDirection: "column", paddingX: 1, children: [
+            /* @__PURE__ */ jsx6(Text6, { color: theme.title, bold: true, children: "--- dependencies ---" }),
+            blockers && blockers.length > 0 && /* @__PURE__ */ jsxs4(Box6, { gap: 0, children: [
+              /* @__PURE__ */ jsxs4(Text6, { color: theme.status.error, bold: true, children: [
+                "blocked by:",
+                " "
+              ] }),
+              /* @__PURE__ */ jsx6(Text6, { color: theme.yaml.value, children: blockers.map((t) => t.id).join(", ") })
             ] }),
-            /* @__PURE__ */ jsx6(Text6, { color: theme.yaml.value, children: dependents.map((t) => t.id).join(", ") })
-          ] }),
-          related && related.length > 0 && /* @__PURE__ */ jsxs4(Box6, { gap: 0, children: [
-            /* @__PURE__ */ jsxs4(Text6, { color: theme.status.new, bold: true, children: [
-              "relates to:",
-              " "
+            dependents && dependents.length > 0 && /* @__PURE__ */ jsxs4(Box6, { gap: 0, children: [
+              /* @__PURE__ */ jsxs4(Text6, { color: theme.status.added, bold: true, children: [
+                "blocks:",
+                " "
+              ] }),
+              /* @__PURE__ */ jsx6(Text6, { color: theme.yaml.value, children: dependents.map((t) => t.id).join(", ") })
             ] }),
-            /* @__PURE__ */ jsx6(Text6, { color: theme.yaml.value, children: related.map((t) => t.id).join(", ") })
-          ] }),
-          duplicates && duplicates.length > 0 && /* @__PURE__ */ jsxs4(Box6, { gap: 0, children: [
-            /* @__PURE__ */ jsxs4(Text6, { color: theme.status.pending, bold: true, children: [
-              "duplicates:",
-              " "
+            related && related.length > 0 && /* @__PURE__ */ jsxs4(Box6, { gap: 0, children: [
+              /* @__PURE__ */ jsxs4(Text6, { color: theme.status.new, bold: true, children: [
+                "relates to:",
+                " "
+              ] }),
+              /* @__PURE__ */ jsx6(Text6, { color: theme.yaml.value, children: related.map((t) => t.id).join(", ") })
+            ] }),
+            duplicates && duplicates.length > 0 && /* @__PURE__ */ jsxs4(Box6, { gap: 0, children: [
+              /* @__PURE__ */ jsxs4(Text6, { color: theme.status.pending, bold: true, children: [
+                "duplicates:",
+                " "
+              ] }),
+              /* @__PURE__ */ jsx6(Text6, { color: theme.yaml.value, children: duplicates.map((t) => t.id).join(", ") })
             ] }),
-            /* @__PURE__ */ jsx6(Text6, { color: theme.yaml.value, children: duplicates.map((t) => t.id).join(", ") })
+            /* @__PURE__ */ jsx6(Text6, { dimColor: true, children: "press D to manage dependencies" })
           ] }),
-          /* @__PURE__ */ jsx6(Text6, { dimColor: true, children: "press D to manage dependencies" })
-        ] }),
-        /* @__PURE__ */ jsxs4(Box6, { flexDirection: "column", paddingX: 1, children: [
-          /* @__PURE__ */ jsx6(Text6, { color: theme.title, bold: true, children: "--- description ---" }),
-          task.description.trim() ? /* @__PURE__ */ jsx6(Markdown, { content: task.description }) : /* @__PURE__ */ jsx6(Text6, { dimColor: true, children: "No description" })
-        ] }),
-        task.technicalNotes.trim() && /* @__PURE__ */ jsxs4(Box6, { flexDirection: "column", paddingX: 1, children: [
-          /* @__PURE__ */ jsx6(Text6, { color: theme.title, bold: true, children: "--- technical notes ---" }),
-          /* @__PURE__ */ jsx6(Markdown, { content: task.technicalNotes })
-        ] }),
-        task.additionalRequirements.trim() && /* @__PURE__ */ jsxs4(Box6, { flexDirection: "column", paddingX: 1, children: [
-          /* @__PURE__ */ jsx6(Text6, { color: theme.title, bold: true, children: "--- requirements ---" }),
-          /* @__PURE__ */ jsx6(Markdown, { content: task.additionalRequirements })
-        ] }),
+          /* @__PURE__ */ jsxs4(Box6, { flexDirection: "column", paddingX: 1, children: [
+            /* @__PURE__ */ jsx6(Text6, { color: theme.title, bold: true, children: "--- description ---" }),
+            task.description.trim() ? /* @__PURE__ */ jsx6(Markdown, { content: task.description }) : /* @__PURE__ */ jsx6(Text6, { dimColor: true, children: "No description" })
+          ] }),
+          task.technicalNotes.trim() && /* @__PURE__ */ jsxs4(Box6, { flexDirection: "column", paddingX: 1, children: [
+            /* @__PURE__ */ jsx6(Text6, { color: theme.title, bold: true, children: "--- technical notes ---" }),
+            /* @__PURE__ */ jsx6(Markdown, { content: task.technicalNotes })
+          ] }),
+          task.additionalRequirements.trim() && /* @__PURE__ */ jsxs4(Box6, { flexDirection: "column", paddingX: 1, children: [
+            /* @__PURE__ */ jsx6(Text6, { color: theme.title, bold: true, children: "--- requirements ---" }),
+            /* @__PURE__ */ jsx6(Markdown, { content: task.additionalRequirements })
+          ] })
+        ] }) }),
         /* @__PURE__ */ jsx6(Box6, { flexGrow: 1 }),
         /* @__PURE__ */ jsx6(Box6, { paddingX: 1, children: /* @__PURE__ */ jsx6(MermaidHint, { content: allText }) })
       ]
@@ -808,7 +910,7 @@ function openInEditor(content, filename) {
 
 // src/tui/components/TaskPicker.tsx
 import { useState } from "react";
-import { Box as Box7, Text as Text7, useInput, useStdout } from "ink";
+import { Box as Box7, Text as Text7, useInput, useStdout as useStdout2 } from "ink";
 import { Fragment, jsx as jsx7, jsxs as jsxs5 } from "react/jsx-runtime";
 var DEP_TYPE_VALUES = Object.values(UIDependencyType);
 var DEP_TYPE_COLOR = {
@@ -818,7 +920,7 @@ var DEP_TYPE_COLOR = {
   [UIDependencyType.BlockedBy]: theme.status.modified
 };
 function TaskPicker({ tasks, excludeIds, initialSelection, onConfirm, onCancel }) {
-  const { stdout } = useStdout();
+  const { stdout } = useStdout2();
   const termHeight = stdout.rows > 0 ? stdout.rows : 24;
   const maxVisible = Math.max(3, termHeight - 12);
   const [searchQuery, setSearchQuery] = useState("");
@@ -1634,8 +1736,222 @@ function DependencyList({
   ] });
 }
 
-// src/tui/components/App.tsx
+// src/tui/components/EpicPanel.tsx
+import { Box as Box14, Text as Text14 } from "ink";
 import { jsx as jsx14, jsxs as jsxs12 } from "react/jsx-runtime";
+var PAGE_SIZE2 = 20;
+function EpicPanel({
+  epics,
+  selectedIndex,
+  selectedEpicIds,
+  isFocused,
+  isReordering = false
+}) {
+  const filterActive = selectedEpicIds.size > 0;
+  const currentPage = Math.floor(selectedIndex / PAGE_SIZE2);
+  const viewStart = currentPage * PAGE_SIZE2;
+  const visibleEpics = epics.slice(viewStart, viewStart + PAGE_SIZE2);
+  return /* @__PURE__ */ jsxs12(
+    Box14,
+    {
+      flexDirection: "column",
+      width: 48,
+      borderStyle: "bold",
+      borderColor: isFocused ? theme.borderFocus : theme.border,
+      children: [
+        /* @__PURE__ */ jsxs12(Box14, { children: [
+          /* @__PURE__ */ jsxs12(Text14, { color: theme.title, bold: true, children: [
+            " ",
+            "epics"
+          ] }),
+          /* @__PURE__ */ jsxs12(Text14, { color: theme.titleCounter, bold: true, children: [
+            "[",
+            epics.length,
+            "]"
+          ] }),
+          isReordering && /* @__PURE__ */ jsxs12(Text14, { color: theme.flash.warn, bold: true, children: [
+            " ",
+            "REORDER"
+          ] }),
+          filterActive && /* @__PURE__ */ jsxs12(Text14, { color: theme.titleFilter, children: [
+            " *",
+            selectedEpicIds.size
+          ] })
+        ] }),
+        epics.length === 0 ? /* @__PURE__ */ jsx14(Box14, { paddingX: 1, children: /* @__PURE__ */ jsx14(Text14, { dimColor: true, children: "No epics" }) }) : visibleEpics.map((epic, i) => {
+          const actualIndex = viewStart + i;
+          const isSelected = actualIndex === selectedIndex && isFocused;
+          const isChecked = selectedEpicIds.has(epic.id);
+          const marker = isChecked ? "[x]" : "[ ]";
+          const statusColor = STATUS_COLOR[epic.status] ?? theme.table.fg;
+          if (isSelected) {
+            const cursorBg = isReordering ? theme.flash.warn : theme.table.cursorBg;
+            return /* @__PURE__ */ jsx14(Box14, { children: /* @__PURE__ */ jsxs12(Text14, { backgroundColor: cursorBg, color: theme.table.cursorFg, bold: true, children: [
+              isReordering ? "~ " : " ",
+              marker,
+              " ",
+              epic.name
+            ] }) }, epic.id);
+          }
+          return /* @__PURE__ */ jsx14(Box14, { children: /* @__PURE__ */ jsxs12(Text14, { color: isChecked ? theme.titleHighlight : statusColor, children: [
+            " ",
+            marker,
+            " ",
+            epic.name
+          ] }) }, epic.id);
+        }),
+        /* @__PURE__ */ jsx14(Box14, { flexGrow: 1 }),
+        epics.length > PAGE_SIZE2 && /* @__PURE__ */ jsx14(Box14, { justifyContent: "flex-end", paddingRight: 1, children: /* @__PURE__ */ jsxs12(Text14, { dimColor: true, children: [
+          "[",
+          viewStart + 1,
+          "-",
+          Math.min(viewStart + PAGE_SIZE2, epics.length),
+          "/",
+          epics.length,
+          "]"
+        ] }) })
+      ]
+    }
+  );
+}
+
+// src/tui/components/EpicPicker.tsx
+import { useState as useState5 } from "react";
+import { Box as Box15, Text as Text15, useInput as useInput5, useStdout as useStdout3 } from "ink";
+import { Fragment as Fragment3, jsx as jsx15, jsxs as jsxs13 } from "react/jsx-runtime";
+function EpicPicker({ epics, currentEpicId, onSelect, onCancel }) {
+  const { stdout } = useStdout3();
+  const termHeight = stdout.rows > 0 ? stdout.rows : 24;
+  const maxVisible = Math.max(3, termHeight - 10);
+  const [searchQuery, setSearchQuery] = useState5("");
+  const [isSearching, setIsSearching] = useState5(false);
+  const [cursorIndex, setCursorIndex] = useState5(0);
+  const filtered = epics.filter((e) => {
+    if (!searchQuery.trim()) return true;
+    const q = searchQuery.toLowerCase();
+    return e.id.toLowerCase().includes(q) || e.name.toLowerCase().includes(q) || e.description.toLowerCase().includes(q);
+  });
+  let viewStart = 0;
+  if (cursorIndex >= viewStart + maxVisible) {
+    viewStart = cursorIndex - maxVisible + 1;
+  }
+  if (cursorIndex < viewStart) {
+    viewStart = cursorIndex;
+  }
+  const visible = filtered.slice(viewStart, viewStart + maxVisible);
+  useInput5((input, key) => {
+    if (isSearching) {
+      if (key.escape) {
+        setIsSearching(false);
+        return;
+      }
+      if (key.return) {
+        setIsSearching(false);
+        setCursorIndex(0);
+        return;
+      }
+      if (key.backspace || key.delete) {
+        setSearchQuery((q) => q.slice(0, -1));
+        setCursorIndex(0);
+        return;
+      }
+      if (input && !key.ctrl && !key.meta) {
+        setSearchQuery((q) => q + input);
+        setCursorIndex(0);
+        return;
+      }
+      return;
+    }
+    if (key.upArrow || input === "k") {
+      setCursorIndex((i) => Math.max(0, i - 1));
+      return;
+    }
+    if (key.downArrow || input === "j") {
+      setCursorIndex((i) => Math.min(filtered.length - 1, i + 1));
+      return;
+    }
+    if (key.return) {
+      const epic = filtered[cursorIndex];
+      if (epic) {
+        onSelect(epic.id);
+      }
+      return;
+    }
+    if (input === "x") {
+      onSelect(null);
+      return;
+    }
+    if (input === "/") {
+      setIsSearching(true);
+      setSearchQuery("");
+      return;
+    }
+    if (key.escape || input === "q") {
+      onCancel();
+      return;
+    }
+  });
+  return /* @__PURE__ */ jsxs13(Box15, { flexDirection: "column", borderStyle: "bold", borderColor: theme.borderFocus, flexGrow: 1, children: [
+    /* @__PURE__ */ jsxs13(Box15, { gap: 0, children: [
+      /* @__PURE__ */ jsxs13(Text15, { color: theme.title, bold: true, children: [
+        " ",
+        "assign to epic"
+      ] }),
+      /* @__PURE__ */ jsxs13(Text15, { color: theme.titleCounter, bold: true, children: [
+        " ",
+        "[",
+        epics.length,
+        "]"
+      ] })
+    ] }),
+    isSearching ? /* @__PURE__ */ jsxs13(Box15, { borderStyle: "round", borderColor: theme.prompt, paddingX: 1, children: [
+      /* @__PURE__ */ jsx15(Text15, { color: theme.prompt, children: "/" }),
+      /* @__PURE__ */ jsx15(Text15, { color: theme.prompt, children: searchQuery }),
+      /* @__PURE__ */ jsx15(Text15, { color: theme.promptSuggest, children: "_" })
+    ] }) : searchQuery ? /* @__PURE__ */ jsx15(Box15, { paddingX: 1, children: /* @__PURE__ */ jsxs13(Text15, { color: theme.titleFilter, children: [
+      "/",
+      searchQuery
+    ] }) }) : null,
+    /* @__PURE__ */ jsx15(Box15, { paddingX: 1, children: /* @__PURE__ */ jsxs13(Text15, { color: theme.table.headerFg, bold: true, children: [
+      "  ",
+      "ID".padEnd(14),
+      "STATUS".padEnd(14),
+      "NAME"
+    ] }) }),
+    filtered.length === 0 ? /* @__PURE__ */ jsx15(Box15, { paddingX: 2, paddingY: 1, children: /* @__PURE__ */ jsx15(Text15, { dimColor: true, children: "No epics match the filter" }) }) : visible.map((epic, i) => {
+      const actualIndex = viewStart + i;
+      const isCursor = actualIndex === cursorIndex;
+      const isCurrent = epic.id === currentEpicId;
+      const marker = isCurrent ? "* " : "  ";
+      const statusColor = STATUS_COLOR[epic.status] ?? theme.table.fg;
+      return /* @__PURE__ */ jsx15(Box15, { paddingX: 1, children: isCursor ? /* @__PURE__ */ jsxs13(Text15, { backgroundColor: theme.table.cursorBg, color: theme.table.cursorFg, bold: true, children: [
+        "> ",
+        epic.id.padEnd(14),
+        epic.status.padEnd(14),
+        epic.name
+      ] }) : /* @__PURE__ */ jsxs13(Fragment3, { children: [
+        /* @__PURE__ */ jsx15(Text15, { color: isCurrent ? theme.titleHighlight : theme.table.fg, children: marker }),
+        /* @__PURE__ */ jsx15(Text15, { color: theme.yaml.value, children: epic.id.padEnd(14) }),
+        /* @__PURE__ */ jsx15(Text15, { color: statusColor, children: epic.status.padEnd(14) }),
+        /* @__PURE__ */ jsx15(Text15, { color: isCurrent ? theme.titleHighlight : theme.table.fg, children: epic.name })
+      ] }) }, epic.id);
+    }),
+    /* @__PURE__ */ jsx15(Box15, { flexGrow: 1 }),
+    filtered.length > maxVisible && /* @__PURE__ */ jsx15(Box15, { justifyContent: "flex-end", paddingRight: 1, children: /* @__PURE__ */ jsxs13(Text15, { dimColor: true, children: [
+      "[",
+      viewStart + 1,
+      "-",
+      Math.min(viewStart + maxVisible, filtered.length),
+      "/",
+      filtered.length,
+      "]"
+    ] }) }),
+    /* @__PURE__ */ jsx15(Box15, { paddingX: 1, children: /* @__PURE__ */ jsx15(Text15, { dimColor: true, children: "enter: assign | x: unassign | /: search | esc: cancel" }) })
+  ] });
+}
+
+// src/tui/components/App.tsx
+import { jsx as jsx16, jsxs as jsxs14 } from "react/jsx-runtime";
 var STATUS_CYCLE = [
   TaskStatus.Backlog,
   TaskStatus.Todo,
@@ -1658,10 +1974,13 @@ function App({ container, initialProject }) {
   }, [container]);
   const loadTasks = useCallback2(() => {
     logger.startSpan("TUI.loadTasks", () => {
-      const filter = { ...state.filter };
+      const filter = { ...state.filter, level: TaskLevel.Work };
       if (state.activeProject) {
         filter.projectId = state.activeProject.id;
       }
+      if (state.selectedEpicIds.size > 0) {
+        filter.parentIds = [...state.selectedEpicIds];
+      }
       const result = container.taskService.listTasks(filter);
       if (result.ok) {
         logger.info(`TUI.loadTasks: loaded ${result.value.length} tasks`);
@@ -1671,7 +1990,19 @@ function App({ container, initialProject }) {
         dispatch({ type: "FLASH", message: result.error.message, level: "error" });
       }
     });
-  }, [container, state.filter, state.activeProject]);
+  }, [container, state.filter, state.activeProject, state.selectedEpicIds]);
+  const loadEpics = useCallback2(() => {
+    if (!state.activeProject) return;
+    const result = container.taskService.listTasks({
+      projectId: state.activeProject.id,
+      level: TaskLevel.Epic
+    });
+    if (result.ok) {
+      dispatch({ type: "SET_EPICS", epics: result.value });
+    } else {
+      logger.error("TUI.loadEpics: failed", result.error);
+    }
+  }, [container, state.activeProject]);
   const loadDeps = useCallback2(
     (taskId) => {
       const blockersResult = container.dependencyService.listBlockers(taskId);
@@ -1700,11 +2031,12 @@ function App({ container, initialProject }) {
           dispatch({ type: "SELECT_TASK", task: result.value });
         }
         loadTasks();
+        loadEpics();
       } else {
         dispatch({ type: "FLASH", message: result.error.message, level: "error" });
       }
     },
-    [container, state.selectedTask, loadTasks]
+    [container, state.selectedTask, loadTasks, loadEpics]
   );
   const saveReorder = useCallback2(() => {
     const tasks = state.tasks;
@@ -1722,6 +2054,22 @@ function App({ container, initialProject }) {
     });
     loadTasks();
   }, [container, state.tasks, state.selectedIndex, loadTasks]);
+  const saveEpicReorder = useCallback2(() => {
+    const epics = state.epics;
+    const idx = state.epicSelectedIndex;
+    const epic = epics[idx];
+    if (!epic) return;
+    const prev = epics[idx - 1];
+    const next = epics[idx + 1];
+    const result = prev ? container.taskService.rerankTask({ taskId: epic.id, afterId: prev.id }) : next ? container.taskService.rerankTask({ taskId: epic.id, beforeId: next.id }) : container.taskService.rerankTask({ taskId: epic.id, position: 1 });
+    dispatch({ type: "EXIT_EPIC_REORDER", save: result.ok });
+    dispatch({
+      type: "FLASH",
+      message: result.ok ? "Epic rank saved" : result.error.message,
+      level: result.ok ? "info" : "error"
+    });
+    loadEpics();
+  }, [container, state.epics, state.epicSelectedIndex, loadEpics]);
   useEffect(() => {
     loadProjects();
   }, [loadProjects]);
@@ -1745,8 +2093,9 @@ function App({ container, initialProject }) {
   useEffect(() => {
     if (state.activeProject) {
       loadTasks();
+      loadEpics();
     }
-  }, [state.activeProject, state.filter, loadTasks]);
+  }, [state.activeProject, state.filter, loadTasks, loadEpics]);
   useEffect(() => {
     if (state.flash) {
       const timer = setTimeout(() => {
@@ -1758,7 +2107,7 @@ function App({ container, initialProject }) {
     }
     return void 0;
   }, [state.flash]);
-  useInput5((input, key) => {
+  useInput6((input, key) => {
     if (state.confirmDelete) {
       if (input === "y") {
         const result = container.taskService.deleteTask(state.confirmDelete.id);
@@ -1769,6 +2118,7 @@ function App({ container, initialProject }) {
             dispatch({ type: "GO_BACK" });
           }
           loadTasks();
+          loadEpics();
         } else {
           dispatch({ type: "FLASH", message: result.error.message, level: "error" });
           dispatch({ type: "CANCEL_DELETE" });
@@ -1782,7 +2132,7 @@ function App({ container, initialProject }) {
       dispatch({ type: "GO_BACK" });
       return;
     }
-    if (state.activeView === ViewType.TaskCreate || state.activeView === ViewType.TaskEdit || state.activeView === ViewType.ProjectSelector || state.activeView === ViewType.ProjectCreate) {
+    if (state.activeView === ViewType.TaskCreate || state.activeView === ViewType.TaskEdit || state.activeView === ViewType.ProjectSelector || state.activeView === ViewType.ProjectCreate || state.activeView === ViewType.EpicPicker) {
       return;
     }
     if (state.activeView === ViewType.DependencyList && state.isAddingDep) {
@@ -1853,6 +2203,26 @@ function App({ container, initialProject }) {
       }
       return;
     }
+    if (state.isEpicReordering) {
+      if (key.upArrow || input === "k") {
+        dispatch({ type: "EPIC_REORDER_MOVE", direction: "up" });
+        return;
+      }
+      if (key.downArrow || input === "j") {
+        dispatch({ type: "EPIC_REORDER_MOVE", direction: "down" });
+        return;
+      }
+      if (key.rightArrow) {
+        saveEpicReorder();
+        return;
+      }
+      if (key.escape || key.leftArrow) {
+        dispatch({ type: "EXIT_EPIC_REORDER", save: false });
+        dispatch({ type: "FLASH", message: "Epic reorder cancelled", level: "info" });
+        return;
+      }
+      return;
+    }
     if (state.isReordering) {
       if (key.upArrow || input === "k") {
         dispatch({ type: "REORDER_MOVE", direction: "up" });
@@ -1889,13 +2259,49 @@ function App({ container, initialProject }) {
       dispatch({ type: "NAVIGATE_TO", view: ViewType.Help });
       return;
     }
-    if (key.tab && state.activeView === ViewType.TaskList && previewTask) {
-      dispatch({
-        type: "SET_PANEL_FOCUS",
-        panel: state.focusedPanel === "list" ? "detail" : "list"
-      });
+    if (key.tab && state.activeView === ViewType.TaskList) {
+      const panels = previewTask ? ["epic", "list", "detail"] : ["epic", "list"];
+      const curIdx = panels.indexOf(state.focusedPanel);
+      const nextPanel = panels[(curIdx + 1) % panels.length] ?? "list";
+      dispatch({ type: "SET_PANEL_FOCUS", panel: nextPanel });
       return;
     }
+    if (state.activeView === ViewType.TaskList && state.focusedPanel === "epic") {
+      if (key.upArrow || input === "k") {
+        dispatch({ type: "EPIC_MOVE_CURSOR", direction: "up" });
+        return;
+      }
+      if (key.downArrow || input === "j") {
+        dispatch({ type: "EPIC_MOVE_CURSOR", direction: "down" });
+        return;
+      }
+      if (input === " " || key.return) {
+        const epic = state.epics[state.epicSelectedIndex];
+        if (epic) {
+          dispatch({ type: "TOGGLE_EPIC", epicId: epic.id });
+        }
+        return;
+      }
+      if (input === "0") {
+        dispatch({ type: "CLEAR_EPIC_SELECTION" });
+        return;
+      }
+      if (key.leftArrow) {
+        if (state.epics.length > 0) {
+          dispatch({ type: "ENTER_EPIC_REORDER" });
+          dispatch({
+            type: "FLASH",
+            message: "Reorder: \u2191\u2193 move, \u2192 save, \u2190 cancel",
+            level: "info"
+          });
+        }
+        return;
+      }
+      if (input === "q") {
+        exit();
+        return;
+      }
+    }
     if (state.activeView === ViewType.TaskList && state.focusedPanel === "list") {
       if (key.upArrow || input === "k") {
         dispatch({ type: "MOVE_CURSOR", direction: "up" });
@@ -1949,6 +2355,30 @@ function App({ container, initialProject }) {
         }
         return;
       }
+      if (input === "a") {
+        const task = state.tasks[state.selectedIndex];
+        if (task) {
+          dispatch({ type: "SELECT_TASK", task });
+          dispatch({ type: "NAVIGATE_TO", view: ViewType.EpicPicker });
+        }
+        return;
+      }
+      if (input === "A") {
+        const task = state.tasks[state.selectedIndex];
+        if (task && task.parentId) {
+          const result = container.taskService.updateTask(task.id, { parentId: null });
+          if (result.ok) {
+            dispatch({ type: "FLASH", message: "Unassigned from epic", level: "info" });
+            loadTasks();
+            loadEpics();
+          } else {
+            dispatch({ type: "FLASH", message: result.error.message, level: "error" });
+          }
+        } else if (task) {
+          dispatch({ type: "FLASH", message: "Task has no epic", level: "warn" });
+        }
+        return;
+      }
       if (input === "/") {
         dispatch({ type: "SET_SEARCH_ACTIVE", active: true });
         dispatch({ type: "SET_SEARCH_QUERY", query: "" });
@@ -1959,6 +2389,22 @@ function App({ container, initialProject }) {
         return;
       }
       if (key.leftArrow) {
+        if (state.selectedEpicIds.size > 0) {
+          dispatch({
+            type: "FLASH",
+            message: "Clear epic filter (0) before reordering",
+            level: "warn"
+          });
+          return;
+        }
+        if (state.filter.status || state.filter.type || state.filter.search) {
+          dispatch({
+            type: "FLASH",
+            message: "Clear filters (0) before reordering",
+            level: "warn"
+          });
+          return;
+        }
         if (state.tasks.length > 0) {
           dispatch({ type: "ENTER_REORDER" });
           dispatch({ type: "FLASH", message: "Reorder: \u2191\u2193 move, \u2192 save, \u2190 cancel", level: "info" });
@@ -1987,6 +2433,14 @@ function App({ container, initialProject }) {
       }
     }
     if (state.activeView === ViewType.TaskList && state.focusedPanel === "detail" && previewTask) {
+      if (key.upArrow || input === "k") {
+        dispatch({ type: "DETAIL_SCROLL", direction: "up" });
+        return;
+      }
+      if (key.downArrow || input === "j") {
+        dispatch({ type: "DETAIL_SCROLL", direction: "down" });
+        return;
+      }
       if (input === "e") {
         dispatch({ type: "SELECT_TASK", task: previewTask });
         dispatch({ type: "NAVIGATE_TO", view: ViewType.TaskEdit });
@@ -2022,6 +2476,14 @@ ${previewTask.additionalRequirements}`;
       }
     }
     if (state.activeView === ViewType.TaskDetail) {
+      if (key.upArrow || input === "k") {
+        dispatch({ type: "DETAIL_SCROLL", direction: "up" });
+        return;
+      }
+      if (key.downArrow || input === "j") {
+        dispatch({ type: "DETAIL_SCROLL", direction: "down" });
+        return;
+      }
       if (input === "e" && state.selectedTask) {
         dispatch({ type: "NAVIGATE_TO", view: ViewType.TaskEdit });
         return;
@@ -2141,22 +2603,53 @@ ${state.selectedTask.additionalRequirements}`;
         loadDeps(taskId);
         dispatch({ type: "GO_BACK" });
         loadTasks();
+        loadEpics();
       } else {
         const result = container.taskService.createTask(data, state.activeProject?.id);
         if (result.ok) {
           dispatch({ type: "FLASH", message: "Task created", level: "info" });
           dispatch({ type: "GO_BACK" });
           loadTasks();
+          loadEpics();
         } else {
           dispatch({ type: "FLASH", message: result.error.message, level: "error" });
         }
       }
     },
-    [container, state.activeView, state.selectedTask, state.activeProject, loadTasks, loadDeps]
+    [
+      container,
+      state.activeView,
+      state.selectedTask,
+      state.activeProject,
+      loadTasks,
+      loadDeps,
+      loadEpics
+    ]
   );
   const handleFormCancel = useCallback2(() => {
     dispatch({ type: "GO_BACK" });
   }, []);
+  const handleEpicPickerSelect = useCallback2(
+    (epicId) => {
+      if (!state.selectedTask) return;
+      const result = container.taskService.updateTask(state.selectedTask.id, {
+        parentId: epicId
+      });
+      if (result.ok) {
+        const msg = epicId ? `Assigned to ${epicId}` : "Unassigned from epic";
+        dispatch({ type: "FLASH", message: msg, level: "info" });
+        loadTasks();
+        loadEpics();
+      } else {
+        dispatch({ type: "FLASH", message: result.error.message, level: "error" });
+      }
+      dispatch({ type: "GO_BACK" });
+    },
+    [container, state.selectedTask, loadTasks, loadEpics]
+  );
+  const handleEpicPickerCancel = useCallback2(() => {
+    dispatch({ type: "GO_BACK" });
+  }, []);
   const handleProjectSelect = useCallback2((project) => {
     dispatch({ type: "SET_ACTIVE_PROJECT", project });
     dispatch({ type: "GO_BACK" });
@@ -2167,7 +2660,11 @@ ${state.selectedTask.additionalRequirements}`;
       const result = container.projectService.updateProject(project.id, { isDefault: true });
       if (result.ok) {
         logger.info(`TUI.setDefault: set key=${result.value.key} as default`);
-        dispatch({ type: "FLASH", message: `Default project: ${result.value.name}`, level: "info" });
+        dispatch({
+          type: "FLASH",
+          message: `Default project: ${result.value.name}`,
+          level: "info"
+        });
         loadProjects();
       } else {
         logger.error("TUI.setDefault: failed", result.error);
@@ -2234,12 +2731,22 @@ ${state.selectedTask.additionalRequirements}`;
       loadDeps(previewTaskId);
     }
   }, [state.activeView, previewTaskId, loadDeps]);
-  return /* @__PURE__ */ jsxs12(Box14, { flexDirection: "column", height: "100%", children: [
-    /* @__PURE__ */ jsx14(Header, { state }),
-    /* @__PURE__ */ jsxs12(Box14, { flexDirection: "column", flexGrow: 1, children: [
-      state.confirmDelete && /* @__PURE__ */ jsx14(ConfirmDialog, { task: state.confirmDelete }),
-      !state.confirmDelete && state.activeView === ViewType.TaskList && /* @__PURE__ */ jsxs12(Box14, { flexDirection: "row", flexGrow: 1, children: [
-        /* @__PURE__ */ jsx14(Box14, { width: "50%", children: /* @__PURE__ */ jsx14(
+  return /* @__PURE__ */ jsxs14(Box16, { flexDirection: "column", height: "100%", children: [
+    /* @__PURE__ */ jsx16(Header, { state }),
+    /* @__PURE__ */ jsxs14(Box16, { flexDirection: "column", flexGrow: 1, children: [
+      state.confirmDelete && /* @__PURE__ */ jsx16(ConfirmDialog, { task: state.confirmDelete }),
+      !state.confirmDelete && state.activeView === ViewType.TaskList && /* @__PURE__ */ jsxs14(Box16, { flexDirection: "row", flexGrow: 1, children: [
+        /* @__PURE__ */ jsx16(
+          EpicPanel,
+          {
+            epics: state.epics,
+            selectedIndex: state.epicSelectedIndex,
+            selectedEpicIds: state.selectedEpicIds,
+            isFocused: state.focusedPanel === "epic",
+            isReordering: state.isEpicReordering
+          }
+        ),
+        /* @__PURE__ */ jsx16(Box16, { flexGrow: 2, children: /* @__PURE__ */ jsx16(
           TaskList,
           {
             tasks: state.tasks,
@@ -2256,10 +2763,11 @@ ${state.selectedTask.additionalRequirements}`;
               state.depDependents.filter((t) => !isTerminalStatus(t.status)).map((t) => t.id)
             ),
             isSelectedBlocked: state.depBlockers.some((t) => !isTerminalStatus(t.status)),
-            isFocused: state.focusedPanel === "list"
+            isFocused: state.focusedPanel === "list",
+            epicFilterActive: state.selectedEpicIds.size > 0
           }
         ) }),
-        /* @__PURE__ */ jsx14(Box14, { flexGrow: 1, children: previewTask ? /* @__PURE__ */ jsx14(
+        /* @__PURE__ */ jsx16(Box16, { flexGrow: 1, children: previewTask ? /* @__PURE__ */ jsx16(
           TaskDetail,
           {
             task: previewTask,
@@ -2267,36 +2775,38 @@ ${state.selectedTask.additionalRequirements}`;
             dependents: state.depDependents,
             related: state.depRelated,
             duplicates: state.depDuplicates,
-            isFocused: state.focusedPanel === "detail"
+            isFocused: state.focusedPanel === "detail",
+            scrollOffset: state.detailScrollOffset
           }
-        ) : /* @__PURE__ */ jsxs12(
-          Box14,
+        ) : /* @__PURE__ */ jsxs14(
+          Box16,
           {
             flexDirection: "column",
             flexGrow: 1,
             borderStyle: "bold",
             borderColor: theme.border,
             children: [
-              /* @__PURE__ */ jsx14(Box14, { children: /* @__PURE__ */ jsxs12(Text14, { color: theme.title, bold: true, children: [
+              /* @__PURE__ */ jsx16(Box16, { children: /* @__PURE__ */ jsxs14(Text16, { color: theme.title, bold: true, children: [
                 " ",
                 "detail"
               ] }) }),
-              /* @__PURE__ */ jsx14(Box14, { flexGrow: 1, justifyContent: "center", alignItems: "center", children: /* @__PURE__ */ jsx14(Text14, { dimColor: true, children: "No task selected" }) })
+              /* @__PURE__ */ jsx16(Box16, { flexGrow: 1, justifyContent: "center", alignItems: "center", children: /* @__PURE__ */ jsx16(Text16, { dimColor: true, children: "No task selected" }) })
             ]
           }
         ) })
       ] }),
-      !state.confirmDelete && state.activeView === ViewType.TaskDetail && state.selectedTask && /* @__PURE__ */ jsx14(
+      !state.confirmDelete && state.activeView === ViewType.TaskDetail && state.selectedTask && /* @__PURE__ */ jsx16(
         TaskDetail,
         {
           task: state.selectedTask,
           blockers: state.depBlockers,
           dependents: state.depDependents,
           related: state.depRelated,
-          duplicates: state.depDuplicates
+          duplicates: state.depDuplicates,
+          scrollOffset: state.detailScrollOffset
         }
       ),
-      !state.confirmDelete && state.activeView === ViewType.DependencyList && state.selectedTask && /* @__PURE__ */ jsx14(
+      !state.confirmDelete && state.activeView === ViewType.DependencyList && state.selectedTask && /* @__PURE__ */ jsx16(
         DependencyList,
         {
           task: state.selectedTask,
@@ -2309,7 +2819,7 @@ ${state.selectedTask.additionalRequirements}`;
           addDepInput: state.addDepInput
         }
       ),
-      !state.confirmDelete && (state.activeView === ViewType.TaskCreate || state.activeView === ViewType.TaskEdit) && /* @__PURE__ */ jsx14(
+      !state.confirmDelete && (state.activeView === ViewType.TaskCreate || state.activeView === ViewType.TaskEdit) && /* @__PURE__ */ jsx16(
         TaskForm,
         {
           editingTask: state.activeView === ViewType.TaskEdit ? state.selectedTask : null,
@@ -2319,7 +2829,16 @@ ${state.selectedTask.additionalRequirements}`;
           onCancel: handleFormCancel
         }
       ),
-      !state.confirmDelete && state.activeView === ViewType.ProjectSelector && /* @__PURE__ */ jsx14(
+      !state.confirmDelete && state.activeView === ViewType.EpicPicker && state.selectedTask && /* @__PURE__ */ jsx16(
+        EpicPicker,
+        {
+          epics: state.epics,
+          currentEpicId: state.selectedTask.parentId,
+          onSelect: handleEpicPickerSelect,
+          onCancel: handleEpicPickerCancel
+        }
+      ),
+      !state.confirmDelete && state.activeView === ViewType.ProjectSelector && /* @__PURE__ */ jsx16(
         ProjectSelector,
         {
           projects: state.projects,
@@ -2330,18 +2849,18 @@ ${state.selectedTask.additionalRequirements}`;
           onCancel: handleProjectCancel
         }
       ),
-      !state.confirmDelete && state.activeView === ViewType.ProjectCreate && /* @__PURE__ */ jsx14(ProjectForm, { onSave: handleProjectFormSave, onCancel: handleProjectFormCancel }),
-      !state.confirmDelete && state.activeView === ViewType.Help && /* @__PURE__ */ jsx14(HelpOverlay, {})
+      !state.confirmDelete && state.activeView === ViewType.ProjectCreate && /* @__PURE__ */ jsx16(ProjectForm, { onSave: handleProjectFormSave, onCancel: handleProjectFormCancel }),
+      !state.confirmDelete && state.activeView === ViewType.Help && /* @__PURE__ */ jsx16(HelpOverlay, {})
     ] }),
-    /* @__PURE__ */ jsx14(Crumbs, { breadcrumbs: state.breadcrumbs }),
-    state.flash && /* @__PURE__ */ jsx14(FlashMessage, { message: state.flash.message, level: state.flash.level })
+    /* @__PURE__ */ jsx16(Crumbs, { breadcrumbs: state.breadcrumbs }),
+    state.flash && /* @__PURE__ */ jsx16(FlashMessage, { message: state.flash.message, level: state.flash.level })
   ] });
 }
 
 // src/tui/index.tsx
-import { jsx as jsx15 } from "react/jsx-runtime";
+import { jsx as jsx17 } from "react/jsx-runtime";
 async function launchTUI(container, initialProject) {
-  const instance = render(/* @__PURE__ */ jsx15(App, { container, initialProject }), {
+  const instance = render(/* @__PURE__ */ jsx17(App, { container, initialProject }), {
     exitOnCtrlC: true
   });
   await instance.waitUntilExit();
@@ -2349,4 +2868,4 @@ async function launchTUI(container, initialProject) {
 export {
   launchTUI
 };
-//# sourceMappingURL=tui-JNZRBEIQ.js.map
+//# sourceMappingURL=tui-FTXYP3HM.js.map