@tomkapa/tayto 0.2.0 → 0.3.0

package/dist/{tui-FTXYP3HM.js → tui-5JJH67YY.js}

@@ -13,8 +13,8 @@ import {
 import { render } from "ink";
 
 // src/tui/components/App.tsx
-import { useReducer, useEffect, useCallback as useCallback2, useMemo } from "react";
-import { Box as Box16, Text as Text16, useInput as useInput6, useApp } from "ink";
+import { useReducer, useEffect as useEffect2, useCallback as useCallback2, useMemo as useMemo2, useState as useState6 } from "react";
+import { Box as Box16, Text as Text16, useInput as useInput6, useApp, useStdout as useStdout4 } from "ink";
 
 // src/tui/types.ts
 var ViewType = {
@@ -29,6 +29,140 @@ var ViewType = {
   Help: "help"
 };
 
+// src/tui/theme.ts
+var theme = {
+  // Body
+  fg: "#1E90FF",
+  // dodgerblue
+  bg: "black",
+  logo: "#FFA500",
+  // orange
+  // Table
+  table: {
+    fg: "#00FFFF",
+    // aqua
+    cursorFg: "black",
+    cursorBg: "#00FFFF",
+    // aqua
+    headerFg: "white",
+    markColor: "#98FB98",
+    // palegreen
+    depHighlightBg: "#1A5276",
+    // dark steel blue – non-terminal dep rows
+    blockedCursorBg: "#C0392B"
+    // strong red – selected row blocked by non-terminal dep
+  },
+  // Status colors (row-level)
+  status: {
+    new: "#87CEFA",
+    // lightskyblue
+    modified: "#ADFF2F",
+    // greenyellow
+    added: "#1E90FF",
+    // dodgerblue
+    error: "#FF4500",
+    // orangered
+    pending: "#FF8C00",
+    // darkorange
+    highlight: "#00FFFF",
+    // aqua
+    kill: "#9370DB",
+    // mediumpurple
+    completed: "#778899"
+    // lightslategray
+  },
+  // Frame / borders
+  border: "#1E90FF",
+  // dodgerblue
+  borderFocus: "#00FFFF",
+  // aqua
+  // Title
+  title: "#00FFFF",
+  // aqua
+  titleHighlight: "#FF00FF",
+  // fuchsia
+  titleCounter: "#FFEFD5",
+  // papayawhip
+  titleFilter: "#2E8B57",
+  // seagreen
+  // Prompt
+  prompt: "#5F9EA0",
+  // cadetblue
+  promptSuggest: "#1E90FF",
+  // dodgerblue
+  // Dialog
+  dialog: {
+    fg: "#1E90FF",
+    // dodgerblue
+    buttonFg: "black",
+    buttonBg: "#1E90FF",
+    buttonFocusFg: "white",
+    buttonFocusBg: "#FF00FF",
+    // fuchsia
+    label: "#FF00FF",
+    // fuchsia
+    field: "#1E90FF"
+  },
+  // Detail/YAML
+  yaml: {
+    key: "#4682B4",
+    // steelblue
+    colon: "white",
+    value: "#FFEFD5"
+    // papayawhip
+  },
+  // Crumbs
+  crumb: {
+    fg: "black",
+    bg: "#4682B4",
+    // steelblue
+    activeBg: "#FFA500"
+    // orange
+  },
+  // Flash
+  flash: {
+    info: "#FFDEAD",
+    // navajowhite
+    warn: "#FFA500",
+    // orange
+    error: "#FF4500"
+    // orangered
+  },
+  // Menu / key hints
+  menu: {
+    key: "#1E90FF",
+    // dodgerblue
+    numKey: "#FF00FF",
+    // fuchsia
+    desc: "white"
+  }
+};
+
+// src/tui/constants.ts
+var STATUS_VALUES = Object.values(TaskStatus);
+var TYPE_VALUES = Object.values(TaskType);
+var PAGE_SIZE = 20;
+var STATUS_COLOR = {
+  [TaskStatus.Backlog]: theme.status.completed,
+  [TaskStatus.Todo]: theme.status.new,
+  [TaskStatus.InProgress]: theme.status.pending,
+  [TaskStatus.Review]: theme.status.modified,
+  [TaskStatus.Done]: theme.status.added,
+  [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
+};
+var DEP_TYPE_LABEL = {
+  [DependencyType.Blocks]: "blocks",
+  [DependencyType.RelatesTo]: "relates-to",
+  [DependencyType.Duplicates]: "duplicates",
+  [UIDependencyType.BlockedBy]: "blocked-by"
+};
+
 // src/tui/state.ts
 var initialState = {
   activeView: ViewType.TaskList,
@@ -121,6 +255,11 @@ function appReducer(state, action) {
       const newIndex = action.direction === "up" ? Math.max(0, state.selectedIndex - 1) : Math.min(maxIndex, state.selectedIndex + 1);
       return { ...state, selectedIndex: newIndex, detailScrollOffset: 0 };
     }
+    case "PAGE_CURSOR": {
+      const maxIndex = Math.max(0, state.tasks.length - 1);
+      const newIndex = action.direction === "up" ? Math.max(0, state.selectedIndex - PAGE_SIZE) : Math.min(maxIndex, state.selectedIndex + PAGE_SIZE);
+      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)) };
@@ -260,139 +399,6 @@ function appReducer(state, action) {
   }
 }
 
-// src/tui/theme.ts
-var theme = {
-  // Body
-  fg: "#1E90FF",
-  // dodgerblue
-  bg: "black",
-  logo: "#FFA500",
-  // orange
-  // Table
-  table: {
-    fg: "#00FFFF",
-    // aqua
-    cursorFg: "black",
-    cursorBg: "#00FFFF",
-    // aqua
-    headerFg: "white",
-    markColor: "#98FB98",
-    // palegreen
-    depHighlightBg: "#1A5276",
-    // dark steel blue – non-terminal dep rows
-    blockedCursorBg: "#C0392B"
-    // strong red – selected row blocked by non-terminal dep
-  },
-  // Status colors (row-level)
-  status: {
-    new: "#87CEFA",
-    // lightskyblue
-    modified: "#ADFF2F",
-    // greenyellow
-    added: "#1E90FF",
-    // dodgerblue
-    error: "#FF4500",
-    // orangered
-    pending: "#FF8C00",
-    // darkorange
-    highlight: "#00FFFF",
-    // aqua
-    kill: "#9370DB",
-    // mediumpurple
-    completed: "#778899"
-    // lightslategray
-  },
-  // Frame / borders
-  border: "#1E90FF",
-  // dodgerblue
-  borderFocus: "#00FFFF",
-  // aqua
-  // Title
-  title: "#00FFFF",
-  // aqua
-  titleHighlight: "#FF00FF",
-  // fuchsia
-  titleCounter: "#FFEFD5",
-  // papayawhip
-  titleFilter: "#2E8B57",
-  // seagreen
-  // Prompt
-  prompt: "#5F9EA0",
-  // cadetblue
-  promptSuggest: "#1E90FF",
-  // dodgerblue
-  // Dialog
-  dialog: {
-    fg: "#1E90FF",
-    // dodgerblue
-    buttonFg: "black",
-    buttonBg: "#1E90FF",
-    buttonFocusFg: "white",
-    buttonFocusBg: "#FF00FF",
-    // fuchsia
-    label: "#FF00FF",
-    // fuchsia
-    field: "#1E90FF"
-  },
-  // Detail/YAML
-  yaml: {
-    key: "#4682B4",
-    // steelblue
-    colon: "white",
-    value: "#FFEFD5"
-    // papayawhip
-  },
-  // Crumbs
-  crumb: {
-    fg: "black",
-    bg: "#4682B4",
-    // steelblue
-    activeBg: "#FFA500"
-    // orange
-  },
-  // Flash
-  flash: {
-    info: "#FFDEAD",
-    // navajowhite
-    warn: "#FFA500",
-    // orange
-    error: "#FF4500"
-    // orangered
-  },
-  // Menu / key hints
-  menu: {
-    key: "#1E90FF",
-    // dodgerblue
-    numKey: "#FF00FF",
-    // fuchsia
-    desc: "white"
-  }
-};
-
-// src/tui/constants.ts
-var STATUS_VALUES = Object.values(TaskStatus);
-var TYPE_VALUES = Object.values(TaskType);
-var STATUS_COLOR = {
-  [TaskStatus.Backlog]: theme.status.completed,
-  [TaskStatus.Todo]: theme.status.new,
-  [TaskStatus.InProgress]: theme.status.pending,
-  [TaskStatus.Review]: theme.status.modified,
-  [TaskStatus.Done]: theme.status.added,
-  [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
-};
-var DEP_TYPE_LABEL = {
-  [DependencyType.Blocks]: "blocks",
-  [DependencyType.RelatesTo]: "relates-to",
-  [DependencyType.Duplicates]: "duplicates",
-  [UIDependencyType.BlockedBy]: "blocked-by"
-};
-
 // src/tui/components/Header.tsx
 import { Box, Text } from "ink";
 import { jsx, jsxs } from "react/jsx-runtime";
@@ -428,6 +434,7 @@ function getKeyHints(view, isSearchActive, focusedPanel) {
       { key: "p", desc: "project" },
       { key: "f", desc: "status-f" },
       { key: "t", desc: "type-f" },
+      { key: "PgDn/Up", desc: "page" },
       { key: "tab", desc: "panel" },
       { key: "?", desc: "help" },
       { key: "q", desc: "quit" }
@@ -517,7 +524,6 @@ function FlashMessage({ message, level }) {
 // src/tui/components/TaskList.tsx
 import { Box as Box4, Text as Text4 } from "ink";
 import { jsx as jsx4, jsxs as jsxs2 } from "react/jsx-runtime";
-var PAGE_SIZE = 20;
 var COL = {
   rank: 5,
   type: 12,
@@ -588,7 +594,7 @@ function TaskList({
           /* @__PURE__ */ jsx4(Text4, { color: theme.table.headerFg, bold: true, children: "STATUS".padEnd(COL.status) }),
           /* @__PURE__ */ jsx4(Text4, { color: theme.table.headerFg, bold: true, children: "NAME" })
         ] }),
-        tasks.length === 0 ? /* @__PURE__ */ jsx4(Box4, { paddingX: 2, paddingY: 1, children: /* @__PURE__ */ jsx4(Text4, { color: theme.fg, children: "No tasks found. Press 'c' to create one." }) }) : visibleTasks.map((task, i) => {
+        /* @__PURE__ */ jsx4(Box4, { flexDirection: "column", flexGrow: 1, overflowY: "hidden", children: tasks.length === 0 ? /* @__PURE__ */ jsx4(Box4, { paddingX: 2, paddingY: 1, children: /* @__PURE__ */ jsx4(Text4, { color: theme.fg, children: "No tasks found. Press 'c' to create one." }) }) : visibleTasks.map((task, i) => {
           const actualIndex = viewStart + i;
           const isSelected = actualIndex === selectedIndex;
           const isNonTerminalBlocker = nonTerminalBlockerIds.has(task.id);
@@ -622,8 +628,7 @@ function TaskList({
             /* @__PURE__ */ jsx4(Text4, { color: STATUS_COLOR[task.status] ?? rowColor, children: task.status.padEnd(COL.status) }),
             /* @__PURE__ */ jsx4(Text4, { color: rowColor, children: task.name })
           ] }, task.id);
-        }),
-        /* @__PURE__ */ jsx4(Box4, { flexGrow: 1 }),
+        }) }),
         tasks.length > PAGE_SIZE && /* @__PURE__ */ jsx4(Box4, { justifyContent: "flex-end", paddingRight: 1, children: /* @__PURE__ */ jsxs2(Text4, { dimColor: true, children: [
           "[",
           viewStart + 1,
@@ -639,7 +644,9 @@ function TaskList({
 }
 
 // src/tui/components/TaskDetail.tsx
+import { useMemo } from "react";
 import { Box as Box6, Text as Text6, useStdout } from "ink";
+import chalk2 from "chalk";
 
 // src/tui/components/Markdown.tsx
 import { Text as Text5, Box as Box5 } from "ink";
@@ -731,15 +738,10 @@ function createRenderer() {
   );
 }
 var marked = createRenderer();
-function Markdown({ content }) {
-  if (!content.trim()) {
-    return /* @__PURE__ */ jsx5(Text5, { dimColor: true, children: "No content" });
-  }
+function renderMarkdown(content) {
+  if (!content.trim()) return "";
   const rendered = marked.parse(content);
-  if (typeof rendered !== "string") {
-    return /* @__PURE__ */ jsx5(Text5, { children: content });
-  }
-  return /* @__PURE__ */ jsx5(Text5, { children: rendered.trimEnd() });
+  return typeof rendered === "string" ? rendered.trimEnd() : content;
 }
 function MermaidHint({ content }) {
   const blocks = extractMermaidBlocks(content);
@@ -768,19 +770,74 @@ function openAllMermaidDiagrams(content) {
 
 // src/tui/components/TaskDetail.tsx
 import { jsx as jsx6, jsxs as jsxs4 } from "react/jsx-runtime";
-function Field({ label, value }) {
-  return /* @__PURE__ */ jsxs4(Box6, { gap: 0, children: [
-    /* @__PURE__ */ jsx6(Text6, { color: theme.yaml.key, bold: true, children: label }),
-    /* @__PURE__ */ jsx6(Text6, { color: theme.yaml.colon, children: ": " }),
-    /* @__PURE__ */ jsx6(Text6, { color: theme.yaml.value, children: value })
-  ] });
+var PAD = " ";
+function field(label, value) {
+  return PAD + chalk2.hex(theme.yaml.key).bold(label) + chalk2.hex(theme.yaml.colon)(": ") + chalk2.hex(theme.yaml.value)(value);
+}
+function sectionHeader(title) {
+  return PAD + chalk2.hex(theme.title).bold(`--- ${title} ---`);
+}
+function markdownLines(content) {
+  const rendered = renderMarkdown(content);
+  if (!rendered) return [];
+  return rendered.split("\n").map((line) => PAD + line);
+}
+function buildContentLines(task, blockers, dependents, related, duplicates) {
+  const lines = [];
+  lines.push(field("id", task.id));
+  lines.push(field("type", task.type));
+  lines.push(field("status", task.status));
+  lines.push(field("created", new Date(task.createdAt).toLocaleString()));
+  lines.push(field("updated", new Date(task.updatedAt).toLocaleString()));
+  if (task.parentId) lines.push(field("parent", task.parentId));
+  const hasDeps = blockers.length > 0 || dependents.length > 0 || related.length > 0 || duplicates.length > 0;
+  if (hasDeps) {
+    lines.push(sectionHeader("dependencies"));
+    if (blockers.length > 0) {
+      lines.push(
+        PAD + chalk2.hex(theme.status.error).bold("blocked by: ") + chalk2.hex(theme.yaml.value)(blockers.map((t) => t.id).join(", "))
+      );
+    }
+    if (dependents.length > 0) {
+      lines.push(
+        PAD + chalk2.hex(theme.status.added).bold("blocks: ") + chalk2.hex(theme.yaml.value)(dependents.map((t) => t.id).join(", "))
+      );
+    }
+    if (related.length > 0) {
+      lines.push(
+        PAD + chalk2.hex(theme.status.new).bold("relates to: ") + chalk2.hex(theme.yaml.value)(related.map((t) => t.id).join(", "))
+      );
+    }
+    if (duplicates.length > 0) {
+      lines.push(
+        PAD + chalk2.hex(theme.status.pending).bold("duplicates: ") + chalk2.hex(theme.yaml.value)(duplicates.map((t) => t.id).join(", "))
+      );
+    }
+    lines.push(PAD + chalk2.dim("press D to manage dependencies"));
+  }
+  lines.push(sectionHeader("description"));
+  if (task.description.trim()) {
+    lines.push(...markdownLines(task.description));
+  } else {
+    lines.push(PAD + chalk2.dim("No description"));
+  }
+  if (task.technicalNotes.trim()) {
+    lines.push(sectionHeader("technical notes"));
+    lines.push(...markdownLines(task.technicalNotes));
+  }
+  if (task.additionalRequirements.trim()) {
+    lines.push(sectionHeader("requirements"));
+    lines.push(...markdownLines(task.additionalRequirements));
+  }
+  return lines;
 }
+var CHROME_LINES = 8;
 function TaskDetail({
   task,
-  blockers,
-  dependents,
-  related,
-  duplicates,
+  blockers = [],
+  dependents = [],
+  related = [],
+  duplicates = [],
   isFocused = true,
   scrollOffset = 0
 }) {
@@ -788,7 +845,12 @@ function TaskDetail({
   const allText = `${task.description}
 ${task.technicalNotes}
 ${task.additionalRequirements}`;
-  const viewportHeight = Math.max(5, (stdout.rows > 0 ? stdout.rows : 24) - 4);
+  const contentLines = useMemo(
+    () => buildContentLines(task, blockers, dependents, related, duplicates),
+    [task, blockers, dependents, related, duplicates]
+  );
+  const viewportHeight = Math.max(1, (stdout.rows > 0 ? stdout.rows : 24) - CHROME_LINES);
+  const visibleLines = contentLines.slice(scrollOffset, scrollOffset + viewportHeight);
   return /* @__PURE__ */ jsxs4(
     Box6,
     {
@@ -810,60 +872,7 @@ ${task.additionalRequirements}`;
             scrollOffset
           ] })
         ] }),
-        /* @__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 })
-          ] }),
-          (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(", ") })
-            ] }),
-            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(", ") })
-            ] }),
-            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, { 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__ */ jsx6(Text6, { children: visibleLines.join("\n") }),
         /* @__PURE__ */ jsx6(Box6, { flexGrow: 1 }),
         /* @__PURE__ */ jsx6(Box6, { paddingX: 1, children: /* @__PURE__ */ jsx6(MermaidHint, { content: allText }) })
       ]
@@ -1143,13 +1152,13 @@ function TaskForm({ editingTask, allTasks, initialDeps, onSave, onCancel }) {
   const [pickedDeps, setPickedDeps] = useState2(initialDeps ?? []);
   const currentField = FIELDS[focusIndex];
   const launchEditor = useCallback(
-    (field) => {
+    (field2) => {
       setEditorActive(true);
       setTimeout(() => {
-        const content = values[field.key] ?? "";
-        const result = openInEditor(content, field.editorFilename ?? `${field.key}.md`);
+        const content = values[field2.key] ?? "";
+        const result = openInEditor(content, field2.editorFilename ?? `${field2.key}.md`);
         if (result !== null) {
-          setValues((v) => ({ ...v, [field.key]: result }));
+          setValues((v) => ({ ...v, [field2.key]: result }));
         }
         setEditorActive(false);
       }, 50);
@@ -1257,37 +1266,37 @@ function TaskForm({ editingTask, allTasks, initialDeps, onSave, onCancel }) {
       " ",
       isEdit ? "edit" : "create"
     ] }) }),
-    /* @__PURE__ */ jsx8(Box8, { flexDirection: "column", paddingX: 1, paddingY: 0, children: FIELDS.map((field, i) => {
+    /* @__PURE__ */ jsx8(Box8, { flexDirection: "column", paddingX: 1, paddingY: 0, children: FIELDS.map((field2, i) => {
       const isFocused = i === focusIndex;
-      const value = field.key === "dependsOn" ? depSummary : values[field.key] ?? "";
+      const value = field2.key === "dependsOn" ? depSummary : values[field2.key] ?? "";
       const displayValue = value;
       return /* @__PURE__ */ jsxs6(Box8, { gap: 1, children: [
         /* @__PURE__ */ jsxs6(Text8, { color: isFocused ? theme.dialog.label : theme.yaml.key, bold: isFocused, children: [
           isFocused ? ">" : " ",
           " ",
-          field.label.padEnd(14)
+          field2.label.padEnd(14)
         ] }),
-        field.type === "inline" && /* @__PURE__ */ jsxs6(Text8, { color: isFocused ? theme.yaml.value : theme.table.fg, children: [
+        field2.type === "inline" && /* @__PURE__ */ jsxs6(Text8, { color: isFocused ? theme.yaml.value : theme.table.fg, children: [
           displayValue,
           isFocused ? /* @__PURE__ */ jsx8(Text8, { color: theme.titleHighlight, children: "_" }) : ""
         ] }),
-        field.type === "picker" && /* @__PURE__ */ jsxs6(Text8, { children: [
+        field2.type === "picker" && /* @__PURE__ */ jsxs6(Text8, { children: [
           displayValue ? /* @__PURE__ */ jsx8(Text8, { color: theme.status.added, children: displayValue.length > 60 ? displayValue.slice(0, 60) + "..." : displayValue }) : /* @__PURE__ */ jsx8(Text8, { dimColor: true, children: isFocused ? "press enter to select" : "none" }),
           isFocused && /* @__PURE__ */ jsx8(Text8, { color: theme.menu.key, children: " [enter: open picker]" })
         ] }),
-        field.type === "editor" && /* @__PURE__ */ jsxs6(Text8, { children: [
+        field2.type === "editor" && /* @__PURE__ */ jsxs6(Text8, { children: [
           displayValue ? /* @__PURE__ */ jsxs6(Text8, { color: theme.status.added, children: [
             displayValue.split("\n")[0]?.slice(0, 50),
             displayValue.length > 50 || displayValue.includes("\n") ? "..." : ""
           ] }) : /* @__PURE__ */ jsx8(Text8, { dimColor: true, children: isFocused ? "press enter" : "empty" }),
           isFocused && /* @__PURE__ */ jsx8(Text8, { color: theme.menu.key, children: " [enter: $EDITOR]" })
         ] }),
-        field.type === "select" && /* @__PURE__ */ jsxs6(Text8, { color: isFocused ? theme.yaml.value : theme.table.fg, children: [
+        field2.type === "select" && /* @__PURE__ */ jsxs6(Text8, { color: isFocused ? theme.yaml.value : theme.table.fg, children: [
           isFocused ? "< " : "  ",
           displayValue,
           isFocused ? " >" : ""
         ] })
-      ] }, field.key);
+      ] }, field2.key);
     }) }),
     /* @__PURE__ */ jsx8(Box8, { flexGrow: 1 }),
     /* @__PURE__ */ jsx8(Box8, { paddingX: 1, children: /* @__PURE__ */ jsx8(Text8, { dimColor: true, children: "tab: next | shift+tab: prev | ctrl+s: save | esc: cancel" }) }),
@@ -1455,26 +1464,26 @@ function ProjectForm({ onSave, onCancel }) {
       " ",
       "new project"
     ] }) }),
-    /* @__PURE__ */ jsx10(Box10, { flexDirection: "column", paddingX: 1, paddingY: 0, children: FIELDS2.map((field, i) => {
+    /* @__PURE__ */ jsx10(Box10, { flexDirection: "column", paddingX: 1, paddingY: 0, children: FIELDS2.map((field2, i) => {
       const isFocused = i === focusIndex;
-      const value = values[field.key] ?? "";
+      const value = values[field2.key] ?? "";
       return /* @__PURE__ */ jsxs8(Box10, { gap: 1, children: [
         /* @__PURE__ */ jsxs8(Text10, { color: isFocused ? theme.dialog.label : theme.yaml.key, bold: isFocused, children: [
           isFocused ? ">" : " ",
           " ",
-          field.label.padEnd(14)
+          field2.label.padEnd(14)
         ] }),
-        field.type === "inline" && /* @__PURE__ */ jsxs8(Text10, { color: isFocused ? theme.yaml.value : theme.table.fg, children: [
+        field2.type === "inline" && /* @__PURE__ */ jsxs8(Text10, { color: isFocused ? theme.yaml.value : theme.table.fg, children: [
           value,
           isFocused ? /* @__PURE__ */ jsx10(Text10, { color: theme.titleHighlight, children: "_" }) : "",
-          field.key === "key" && !value && /* @__PURE__ */ jsx10(Text10, { dimColor: true, children: isFocused ? " (auto from name)" : "" })
+          field2.key === "key" && !value && /* @__PURE__ */ jsx10(Text10, { dimColor: true, children: isFocused ? " (auto from name)" : "" })
         ] }),
-        field.type === "toggle" && /* @__PURE__ */ jsxs8(Text10, { color: isFocused ? theme.yaml.value : theme.table.fg, children: [
+        field2.type === "toggle" && /* @__PURE__ */ jsxs8(Text10, { color: isFocused ? theme.yaml.value : theme.table.fg, children: [
           isFocused ? "< " : "  ",
           value,
           isFocused ? " >" : ""
         ] })
-      ] }, field.key);
+      ] }, field2.key);
     }) }),
     /* @__PURE__ */ jsx10(Box10, { flexGrow: 1 }),
     /* @__PURE__ */ jsx10(Box10, { paddingX: 1, children: /* @__PURE__ */ jsx10(Text10, { dimColor: true, children: "tab: next | shift+tab: prev | ctrl+s: save | esc: cancel" }) })
@@ -1490,6 +1499,8 @@ var SECTIONS = [
     keys: [
       ["j/k", "Up/Down"],
       ["g/G", "Top/Bottom"],
+      ["PgDn", "Page down"],
+      ["PgUp", "Page up"],
       ["enter", "View"],
       ["esc", "Back"]
     ]
@@ -1778,7 +1789,7 @@ function EpicPanel({
             selectedEpicIds.size
           ] })
         ] }),
-        epics.length === 0 ? /* @__PURE__ */ jsx14(Box14, { paddingX: 1, children: /* @__PURE__ */ jsx14(Text14, { dimColor: true, children: "No epics" }) }) : visibleEpics.map((epic, i) => {
+        /* @__PURE__ */ jsx14(Box14, { flexDirection: "column", flexGrow: 1, overflowY: "hidden", children: 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);
@@ -1799,8 +1810,7 @@ function EpicPanel({
             " ",
             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,
@@ -1950,6 +1960,41 @@ function EpicPicker({ epics, currentEpicId, onSelect, onCancel }) {
   ] });
 }
 
+// src/tui/useAutoRefetch.ts
+import { useEffect, useRef } from "react";
+import { watchFile, unwatchFile } from "fs";
+var POLL_INTERVAL_MS = 1e3;
+var DEBOUNCE_MS = 200;
+function useAutoRefetch(dbPath, onRefetch) {
+  const callbackRef = useRef(onRefetch);
+  callbackRef.current = onRefetch;
+  useEffect(() => {
+    let debounceTimer = null;
+    const handleChange = () => {
+      if (debounceTimer) clearTimeout(debounceTimer);
+      debounceTimer = setTimeout(() => {
+        logger.info("useAutoRefetch: external db change detected, refetching");
+        callbackRef.current();
+      }, DEBOUNCE_MS);
+    };
+    const walPath = `${dbPath}-wal`;
+    const listener = (curr, prev) => {
+      if (curr.mtimeMs !== prev.mtimeMs) {
+        handleChange();
+      }
+    };
+    watchFile(dbPath, { interval: POLL_INTERVAL_MS }, listener);
+    watchFile(walPath, { interval: POLL_INTERVAL_MS }, listener);
+    logger.info(`useAutoRefetch: watching ${dbPath} (poll ${POLL_INTERVAL_MS}ms)`);
+    return () => {
+      unwatchFile(dbPath, listener);
+      unwatchFile(walPath, listener);
+      if (debounceTimer) clearTimeout(debounceTimer);
+      logger.info("useAutoRefetch: stopped watching");
+    };
+  }, [dbPath]);
+}
+
 // src/tui/components/App.tsx
 import { jsx as jsx16, jsxs as jsxs14 } from "react/jsx-runtime";
 var STATUS_CYCLE = [
@@ -1959,9 +2004,25 @@ var STATUS_CYCLE = [
   TaskStatus.Review,
   TaskStatus.Done
 ];
+var EPIC_PANEL_WIDTH = 48;
 function App({ container, initialProject }) {
   const { exit } = useApp();
+  const { stdout } = useStdout4();
   const [state, dispatch] = useReducer(appReducer, initialState);
+  const [, setResizeTick] = useState6(0);
+  useEffect2(() => {
+    const onResize = () => {
+      setResizeTick((n) => n + 1);
+    };
+    stdout.on("resize", onResize);
+    return () => {
+      stdout.off("resize", onResize);
+    };
+  }, [stdout]);
+  const termWidth = stdout.columns > 0 ? stdout.columns : 120;
+  const remaining = Math.max(0, termWidth - EPIC_PANEL_WIDTH - 2);
+  const taskListWidth = Math.floor(remaining * 0.6);
+  const taskDetailWidth = remaining - taskListWidth;
   const loadProjects = useCallback2(() => {
     const result = container.projectService.listProjects();
     if (result.ok) {
@@ -2070,10 +2131,16 @@ function App({ container, initialProject }) {
     });
     loadEpics();
   }, [container, state.epics, state.epicSelectedIndex, loadEpics]);
-  useEffect(() => {
+  const refetchAll = useCallback2(() => {
+    loadProjects();
+    loadTasks();
+    loadEpics();
+  }, [loadProjects, loadTasks, loadEpics]);
+  useAutoRefetch(container.dbPath, refetchAll);
+  useEffect2(() => {
     loadProjects();
   }, [loadProjects]);
-  useEffect(() => {
+  useEffect2(() => {
     if (state.projects.length > 0 && !state.activeProject) {
       logger.info(`TUI.resolveProject: resolving initialProject=${initialProject ?? "(default)"}`);
       const result = container.projectService.resolveProject(initialProject);
@@ -2090,13 +2157,13 @@ function App({ container, initialProject }) {
       }
     }
   }, [state.projects, state.activeProject, initialProject, container]);
-  useEffect(() => {
+  useEffect2(() => {
     if (state.activeProject) {
       loadTasks();
       loadEpics();
     }
   }, [state.activeProject, state.filter, loadTasks, loadEpics]);
-  useEffect(() => {
+  useEffect2(() => {
     if (state.flash) {
       const timer = setTimeout(() => {
         dispatch({ type: "CLEAR_FLASH" });
@@ -2319,6 +2386,14 @@ function App({ container, initialProject }) {
         dispatch({ type: "SET_CURSOR", index: state.tasks.length - 1 });
         return;
       }
+      if (key.pageDown || key.ctrl && input === "d") {
+        dispatch({ type: "PAGE_CURSOR", direction: "down" });
+        return;
+      }
+      if (key.pageUp || key.ctrl && input === "u") {
+        dispatch({ type: "PAGE_CURSOR", direction: "up" });
+        return;
+      }
       if (key.return) {
         const task = state.tasks[state.selectedIndex];
         if (task) {
@@ -2709,7 +2784,7 @@ ${state.selectedTask.additionalRequirements}`;
     dispatch({ type: "GO_BACK" });
   }, []);
   const previewTask = state.tasks[state.selectedIndex] ?? null;
-  const initialDepsForEdit = useMemo(() => {
+  const initialDepsForEdit = useMemo2(() => {
     return [
       ...state.depBlockers.map((t) => ({ id: t.id, name: t.name, type: DependencyType.Blocks })),
       ...state.depRelated.map((t) => ({ id: t.id, name: t.name, type: DependencyType.RelatesTo })),
@@ -2720,20 +2795,20 @@ ${state.selectedTask.additionalRequirements}`;
       }))
     ];
   }, [state.depBlockers, state.depRelated, state.depDuplicates]);
-  const allProjectTasks = useMemo(() => {
+  const allProjectTasks = useMemo2(() => {
     if (!state.activeProject) return [];
     const result = container.taskService.listTasks({ projectId: state.activeProject.id });
     return result.ok ? result.value : [];
   }, [container, state.activeProject, state.tasks]);
   const previewTaskId = previewTask?.id ?? null;
-  useEffect(() => {
+  useEffect2(() => {
     if (state.activeView === ViewType.TaskList && previewTaskId) {
       loadDeps(previewTaskId);
     }
   }, [state.activeView, previewTaskId, loadDeps]);
-  return /* @__PURE__ */ jsxs14(Box16, { flexDirection: "column", height: "100%", children: [
+  return /* @__PURE__ */ jsxs14(Box16, { flexDirection: "column", height: stdout.rows, children: [
     /* @__PURE__ */ jsx16(Header, { state }),
-    /* @__PURE__ */ jsxs14(Box16, { flexDirection: "column", flexGrow: 1, children: [
+    /* @__PURE__ */ jsxs14(Box16, { flexDirection: "column", flexGrow: 1, overflowY: "hidden", 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(
@@ -2746,7 +2821,7 @@ ${state.selectedTask.additionalRequirements}`;
             isReordering: state.isEpicReordering
           }
         ),
-        /* @__PURE__ */ jsx16(Box16, { flexGrow: 2, children: /* @__PURE__ */ jsx16(
+        /* @__PURE__ */ jsx16(Box16, { width: taskListWidth, children: /* @__PURE__ */ jsx16(
           TaskList,
           {
             tasks: state.tasks,
@@ -2767,7 +2842,7 @@ ${state.selectedTask.additionalRequirements}`;
             epicFilterActive: state.selectedEpicIds.size > 0
           }
         ) }),
-        /* @__PURE__ */ jsx16(Box16, { flexGrow: 1, children: previewTask ? /* @__PURE__ */ jsx16(
+        /* @__PURE__ */ jsx16(Box16, { width: taskDetailWidth, children: previewTask ? /* @__PURE__ */ jsx16(
           TaskDetail,
           {
             task: previewTask,
@@ -2868,4 +2943,4 @@ async function launchTUI(container, initialProject) {
 export {
   launchTUI
 };
-//# sourceMappingURL=tui-FTXYP3HM.js.map
+//# sourceMappingURL=tui-5JJH67YY.js.map