@kaban-board/tui 0.2.6 → 0.2.9

package/dist/index.js

@@ -120,7 +120,7 @@ async function refreshBoard(state) {
   }
   state.columns = await boardService.getColumns();
   state.taskSelects = new Map;
-  const tasks = await taskService.listTasks();
+  const tasks = state.archiveViewMode ? (await taskService.listTasks({ includeArchived: true })).filter((t2) => t2.archived) : await taskService.listTasks();
   const mainContainer = new BoxRenderable2(renderer, {
     id: "main",
     width: "100%",
@@ -139,9 +139,10 @@ async function refreshBoard(state) {
     justifyContent: "center",
     alignItems: "center"
   });
+  const modeIndicator = state.archiveViewMode ? " [ARCHIVE]" : "";
   const headerText = new TextRenderable2(renderer, {
     id: "header-text",
-    content: t`${fg(COLORS.warning)(LOGO)} ${fg(COLORS.accent)(state.boardName)}`
+    content: t`${fg(COLORS.warning)(LOGO)} ${fg(COLORS.accent)(state.boardName)}${fg(COLORS.textMuted)(modeIndicator)}`
   });
   header.add(headerText);
   mainContainer.add(header);
@@ -231,9 +232,11 @@ async function refreshBoard(state) {
     justifyContent: "center",
     alignItems: "center"
   });
+  const hasTasksInView = tasks.length > 0;
+  const footerContent = state.archiveViewMode ? hasTasksInView ? "[r]estore [Tab]Back  [?] [q]" : "[Tab]Back  [?] [q]" : "[a]dd [m]ove [u] [d]el [x]arch [Tab]Arch  [?] [q]";
   const footerText = new TextRenderable2(renderer, {
     id: "footer-text",
-    content: "[a]dd [m]ove [u]ser [d]el  [?]Help [q]uit",
+    content: footerContent,
     fg: COLORS.textMuted
   });
   footer.add(footerText);
@@ -468,13 +471,8 @@ function showAddTaskModal(state, onTaskCreated) {
   state.activeModal = "addTask";
   input.on(InputRenderableEvents.ENTER, doCreate);
 }
-// src/components/modals/assign-task.ts
-import {
-  BoxRenderable as BoxRenderable6,
-  InputRenderable as InputRenderable2,
-  InputRenderableEvents as InputRenderableEvents2,
-  TextRenderable as TextRenderable5
-} from "@opentui/core";
+// src/components/modals/archive-task.ts
+import { BoxRenderable as BoxRenderable6, TextRenderable as TextRenderable5 } from "@opentui/core";
 
 // src/lib/types.ts
 function getSelectedTaskId(state) {
@@ -489,7 +487,97 @@ function getSelectedTaskId(state) {
   return typeof value === "string" ? value : null;
 }
 
+// src/components/modals/archive-task.ts
+async function showArchiveTaskModal(state, onArchived) {
+  const { renderer } = state;
+  const taskId = getSelectedTaskId(state);
+  if (!taskId) {
+    return;
+  }
+  const task = await state.taskService.getTask(taskId);
+  if (!task) {
+    return;
+  }
+  if (task.archived) {
+    return;
+  }
+  state.selectedTask = task;
+  const { overlay, dialog } = createModalOverlay(renderer, {
+    id: "archive-task-dialog",
+    width: 45,
+    height: 10,
+    borderColor: COLORS.warning
+  });
+  const titleRow = new BoxRenderable6(renderer, {
+    id: "archive-title-row",
+    width: "100%",
+    height: 1,
+    justifyContent: "center"
+  });
+  const title = new TextRenderable5(renderer, {
+    id: "archive-title",
+    content: "Archive Task?",
+    fg: COLORS.warning
+  });
+  titleRow.add(title);
+  const spacer1 = new BoxRenderable6(renderer, { id: "archive-spacer1", width: "100%", height: 1 });
+  const taskRow = new BoxRenderable6(renderer, {
+    id: "archive-task-row",
+    width: "100%",
+    height: 1
+  });
+  const taskText = new TextRenderable5(renderer, {
+    id: "archive-task-text",
+    content: task.title.slice(0, 40),
+    fg: COLORS.text
+  });
+  taskRow.add(taskText);
+  const infoRow = new BoxRenderable6(renderer, {
+    id: "archive-info-row",
+    width: "100%",
+    height: 1
+  });
+  const info = new TextRenderable5(renderer, {
+    id: "archive-info",
+    content: "Task will be moved to archive.",
+    fg: COLORS.textMuted
+  });
+  infoRow.add(info);
+  const spacer2 = new BoxRenderable6(renderer, { id: "archive-spacer2", width: "100%", height: 2 });
+  const hintRow = new BoxRenderable6(renderer, {
+    id: "archive-hint-row",
+    width: "100%",
+    height: 1,
+    justifyContent: "center"
+  });
+  const hint = new TextRenderable5(renderer, {
+    id: "archive-hint",
+    content: "[y] Archive  [n/Esc] Cancel",
+    fg: COLORS.textMuted
+  });
+  hintRow.add(hint);
+  dialog.add(titleRow);
+  dialog.add(spacer1);
+  dialog.add(taskRow);
+  dialog.add(infoRow);
+  dialog.add(spacer2);
+  dialog.add(hintRow);
+  renderer.root.add(overlay);
+  state.modalOverlay = overlay;
+  state.activeModal = "archiveTask";
+  state.onModalConfirm = async () => {
+    await state.taskService.archiveTasks({ taskIds: [taskId] });
+    closeModal(state);
+    await onArchived();
+  };
+}
 // src/components/modals/assign-task.ts
+import {
+  BoxRenderable as BoxRenderable7,
+  InputRenderable as InputRenderable2,
+  InputRenderableEvents as InputRenderableEvents2,
+  TextRenderable as TextRenderable6
+} from "@opentui/core";
 async function showAssignTaskModal(state, onAssigned) {
   const { renderer } = state;
   const taskId = getSelectedTaskId(state);
@@ -505,36 +593,36 @@ async function showAssignTaskModal(state, onAssigned) {
     width: 45,
     height: 12
   });
-  const titleRow = new BoxRenderable6(renderer, {
+  const titleRow = new BoxRenderable7(renderer, {
     id: "assign-title-row",
     width: "100%",
     height: 1
   });
-  const title = new TextRenderable5(renderer, {
+  const title = new TextRenderable6(renderer, {
     id: "assign-title",
     content: "Assign Task",
     fg: COLORS.accent
   });
   titleRow.add(title);
-  const taskRow = new BoxRenderable6(renderer, {
+  const taskRow = new BoxRenderable7(renderer, {
     id: "assign-task-row",
     width: "100%",
     height: 1
   });
-  const taskText = new TextRenderable5(renderer, {
+  const taskText = new TextRenderable6(renderer, {
     id: "assign-task-text",
     content: task.title.slice(0, 40),
     fg: COLORS.textMuted
   });
   taskRow.add(taskText);
-  const spacer1 = new BoxRenderable6(renderer, { id: "assign-spacer1", width: "100%", height: 1 });
-  const labelRow = new BoxRenderable6(renderer, {
+  const spacer1 = new BoxRenderable7(renderer, { id: "assign-spacer1", width: "100%", height: 1 });
+  const labelRow = new BoxRenderable7(renderer, {
     id: "assign-label-row",
     width: "100%",
     height: 1
   });
   const currentAssignee = task.assignedTo ?? "(unassigned)";
-  const label = new TextRenderable5(renderer, {
+  const label = new TextRenderable6(renderer, {
     id: "assign-label",
     content: `Current: ${currentAssignee}`,
     fg: COLORS.text
@@ -551,7 +639,7 @@ async function showAssignTaskModal(state, onAssigned) {
     focusedBackgroundColor: COLORS.inputBg,
     cursorColor: COLORS.cursor
   });
-  const spacer2 = new BoxRenderable6(renderer, { id: "assign-spacer2", width: "100%", height: 1 });
+  const spacer2 = new BoxRenderable7(renderer, { id: "assign-spacer2", width: "100%", height: 1 });
   const doAssign = async () => {
     const assignee = input.value.trim();
     await state.taskService.updateTask(taskId, {
@@ -586,7 +674,7 @@ async function showAssignTaskModal(state, onAssigned) {
   input.on(InputRenderableEvents2.ENTER, doAssign);
 }
 // src/components/modals/delete-task.ts
-import { BoxRenderable as BoxRenderable7, TextRenderable as TextRenderable6 } from "@opentui/core";
+import { BoxRenderable as BoxRenderable8, TextRenderable as TextRenderable7 } from "@opentui/core";
 async function showDeleteTaskModal(state, onDeleted) {
   const { renderer } = state;
   const taskId = getSelectedTaskId(state);
@@ -604,49 +692,49 @@ async function showDeleteTaskModal(state, onDeleted) {
     height: 10,
     borderColor: COLORS.danger
   });
-  const titleRow = new BoxRenderable7(renderer, {
+  const titleRow = new BoxRenderable8(renderer, {
     id: "delete-title-row",
     width: "100%",
     height: 1,
     justifyContent: "center"
   });
-  const title = new TextRenderable6(renderer, {
+  const title = new TextRenderable7(renderer, {
     id: "delete-title",
     content: "Delete Task?",
     fg: COLORS.danger
   });
   titleRow.add(title);
-  const spacer1 = new BoxRenderable7(renderer, { id: "delete-spacer1", width: "100%", height: 1 });
-  const taskRow = new BoxRenderable7(renderer, {
+  const spacer1 = new BoxRenderable8(renderer, { id: "delete-spacer1", width: "100%", height: 1 });
+  const taskRow = new BoxRenderable8(renderer, {
     id: "delete-task-row",
     width: "100%",
     height: 1
   });
-  const taskText = new TextRenderable6(renderer, {
+  const taskText = new TextRenderable7(renderer, {
     id: "delete-task-text",
     content: task.title.slice(0, 40),
     fg: COLORS.text
   });
   taskRow.add(taskText);
-  const warningRow = new BoxRenderable7(renderer, {
+  const warningRow = new BoxRenderable8(renderer, {
     id: "delete-warning-row",
     width: "100%",
     height: 1
   });
-  const warning = new TextRenderable6(renderer, {
+  const warning = new TextRenderable7(renderer, {
     id: "delete-warning",
     content: "This action cannot be undone.",
     fg: COLORS.warning
   });
   warningRow.add(warning);
-  const spacer2 = new BoxRenderable7(renderer, { id: "delete-spacer2", width: "100%", height: 2 });
-  const hintRow = new BoxRenderable7(renderer, {
+  const spacer2 = new BoxRenderable8(renderer, { id: "delete-spacer2", width: "100%", height: 2 });
+  const hintRow = new BoxRenderable8(renderer, {
     id: "delete-hint-row",
     width: "100%",
     height: 1,
     justifyContent: "center"
   });
-  const hint = new TextRenderable6(renderer, {
+  const hint = new TextRenderable7(renderer, {
     id: "delete-hint",
     content: "[y] Delete  [n/Esc] Cancel",
     fg: COLORS.textMuted
@@ -667,12 +755,97 @@ async function showDeleteTaskModal(state, onDeleted) {
     await onDeleted();
   };
 }
+// src/components/modals/restore-task.ts
+import { BoxRenderable as BoxRenderable9, TextRenderable as TextRenderable8 } from "@opentui/core";
+async function showRestoreTaskModal(state, onRestored) {
+  const { renderer } = state;
+  const taskId = getSelectedTaskId(state);
+  if (!taskId) {
+    return;
+  }
+  const task = await state.taskService.getTask(taskId);
+  if (!task) {
+    return;
+  }
+  if (!task.archived) {
+    return;
+  }
+  state.selectedTask = task;
+  const { overlay, dialog } = createModalOverlay(renderer, {
+    id: "restore-task-dialog",
+    width: 45,
+    height: 10,
+    borderColor: COLORS.success
+  });
+  const titleRow = new BoxRenderable9(renderer, {
+    id: "restore-title-row",
+    width: "100%",
+    height: 1,
+    justifyContent: "center"
+  });
+  const title = new TextRenderable8(renderer, {
+    id: "restore-title",
+    content: "Restore Task?",
+    fg: COLORS.success
+  });
+  titleRow.add(title);
+  const spacer1 = new BoxRenderable9(renderer, { id: "restore-spacer1", width: "100%", height: 1 });
+  const taskRow = new BoxRenderable9(renderer, {
+    id: "restore-task-row",
+    width: "100%",
+    height: 1
+  });
+  const taskText = new TextRenderable8(renderer, {
+    id: "restore-task-text",
+    content: task.title.slice(0, 40),
+    fg: COLORS.text
+  });
+  taskRow.add(taskText);
+  const infoRow = new BoxRenderable9(renderer, {
+    id: "restore-info-row",
+    width: "100%",
+    height: 1
+  });
+  const info = new TextRenderable8(renderer, {
+    id: "restore-info",
+    content: "Task will be restored to its original column.",
+    fg: COLORS.textMuted
+  });
+  infoRow.add(info);
+  const spacer2 = new BoxRenderable9(renderer, { id: "restore-spacer2", width: "100%", height: 2 });
+  const hintRow = new BoxRenderable9(renderer, {
+    id: "restore-hint-row",
+    width: "100%",
+    height: 1,
+    justifyContent: "center"
+  });
+  const hint = new TextRenderable8(renderer, {
+    id: "restore-hint",
+    content: "[y] Restore  [n/Esc] Cancel",
+    fg: COLORS.textMuted
+  });
+  hintRow.add(hint);
+  dialog.add(titleRow);
+  dialog.add(spacer1);
+  dialog.add(taskRow);
+  dialog.add(infoRow);
+  dialog.add(spacer2);
+  dialog.add(hintRow);
+  renderer.root.add(overlay);
+  state.modalOverlay = overlay;
+  state.activeModal = "restoreTask";
+  state.onModalConfirm = async () => {
+    await state.taskService.restoreTask(taskId);
+    closeModal(state);
+    await onRestored();
+  };
+}
 // src/components/modals/edit-task.ts
 import {
-  BoxRenderable as BoxRenderable8,
+  BoxRenderable as BoxRenderable10,
   InputRenderable as InputRenderable3,
   InputRenderableEvents as InputRenderableEvents3,
-  TextRenderable as TextRenderable7
+  TextRenderable as TextRenderable9
 } from "@opentui/core";
 var DIALOG_WIDTH = 60;
 var DESC_INPUT_HEIGHT = 6;
@@ -693,28 +866,28 @@ async function showEditTaskModal(state, callbacks) {
     width: DIALOG_WIDTH,
     height: dialogHeight
   });
-  const headerRow = new BoxRenderable8(renderer, {
+  const headerRow = new BoxRenderable10(renderer, {
     id: "edit-header-row",
     width: "100%",
     height: 1
   });
-  const headerText = new TextRenderable7(renderer, {
+  const headerText = new TextRenderable9(renderer, {
     id: "edit-header-text",
     content: `Edit Task: ${truncate(task.title, DIALOG_WIDTH - 20)}`,
     fg: COLORS.accent
   });
   headerRow.add(headerText);
-  const spacer1 = new BoxRenderable8(renderer, {
+  const spacer1 = new BoxRenderable10(renderer, {
     id: "edit-spacer1",
     width: "100%",
     height: 1
   });
-  const titleLabelRow = new BoxRenderable8(renderer, {
+  const titleLabelRow = new BoxRenderable10(renderer, {
     id: "edit-title-label-row",
     width: "100%",
     height: 1
   });
-  const titleLabel = new TextRenderable7(renderer, {
+  const titleLabel = new TextRenderable9(renderer, {
     id: "edit-title-label",
     content: "Title",
     fg: COLORS.textMuted
@@ -732,17 +905,17 @@ async function showEditTaskModal(state, callbacks) {
     cursorColor: COLORS.cursor
   });
   titleInput.value = task.title;
-  const spacer2 = new BoxRenderable8(renderer, {
+  const spacer2 = new BoxRenderable10(renderer, {
     id: "edit-spacer2",
     width: "100%",
     height: 1
   });
-  const descLabelRow = new BoxRenderable8(renderer, {
+  const descLabelRow = new BoxRenderable10(renderer, {
     id: "edit-desc-label-row",
     width: "100%",
     height: 1
   });
-  const descLabel = new TextRenderable7(renderer, {
+  const descLabel = new TextRenderable9(renderer, {
     id: "edit-desc-label",
     content: "Description",
     fg: COLORS.textMuted
@@ -760,7 +933,7 @@ async function showEditTaskModal(state, callbacks) {
     cursorColor: COLORS.cursor
   });
   descInput.value = task.description ?? "";
-  const spacer3 = new BoxRenderable8(renderer, {
+  const spacer3 = new BoxRenderable10(renderer, {
     id: "edit-spacer3",
     width: "100%",
     height: 1
@@ -791,13 +964,13 @@ async function showEditTaskModal(state, callbacks) {
     { label: "Save", action: doSave, color: COLORS.success },
     { label: "Cancel", action: doCancel }
   ]);
-  const hintRow = new BoxRenderable8(renderer, {
+  const hintRow = new BoxRenderable10(renderer, {
     id: "edit-hint-row",
     width: "100%",
     height: 1,
     justifyContent: "center"
   });
-  const hint = new TextRenderable7(renderer, {
+  const hint = new TextRenderable9(renderer, {
     id: "edit-hint",
     content: "[Tab] Next    [Enter] Save    [Esc] Cancel",
     fg: COLORS.textDim
@@ -861,7 +1034,7 @@ function cancelEditTask(state) {
   state.editTaskRuntime.doCancel();
 }
 // src/components/modals/help.ts
-import { BoxRenderable as BoxRenderable9, TextRenderable as TextRenderable8 } from "@opentui/core";
+import { BoxRenderable as BoxRenderable11, TextRenderable as TextRenderable10 } from "@opentui/core";
 var SHORTCUTS = [
   ["<-/-> h/l", "Switch column"],
   ["up/dn j/k", "Navigate tasks"],
@@ -870,6 +1043,9 @@ var SHORTCUTS = [
   ["m", "Move task (change status)"],
   ["u", "Assign user to task"],
   ["d", "Delete task"],
+  ["x", "Archive task"],
+  ["r", "Restore task (archive view)"],
+  ["Tab", "Toggle archive view"],
   ["?", "Show/hide help"],
   ["q", "Quit"]
 ];
@@ -878,36 +1054,36 @@ function showHelpModal(state) {
   const { overlay, dialog } = createModalOverlay(renderer, {
     id: "help-dialog",
     width: 45,
-    height: 17,
+    height: 20,
     padding: 2
   });
-  const titleRow = new BoxRenderable9(renderer, {
+  const titleRow = new BoxRenderable11(renderer, {
     id: "help-title-row",
     width: "100%",
     height: 1
   });
-  const title = new TextRenderable8(renderer, {
+  const title = new TextRenderable10(renderer, {
     id: "help-title",
     content: "Keyboard Shortcuts",
     fg: COLORS.accent
   });
   titleRow.add(title);
-  const spacer = new BoxRenderable9(renderer, { id: "help-spacer", width: "100%", height: 1 });
+  const spacer = new BoxRenderable11(renderer, { id: "help-spacer", width: "100%", height: 1 });
   dialog.add(titleRow);
   dialog.add(spacer);
   for (const [key, desc] of SHORTCUTS) {
-    const row = new BoxRenderable9(renderer, {
+    const row = new BoxRenderable11(renderer, {
       id: `help-row-${key}`,
       width: "100%",
       height: 1,
       flexDirection: "row"
     });
-    const keyText = new TextRenderable8(renderer, {
+    const keyText = new TextRenderable10(renderer, {
       id: `help-key-${key}`,
       content: key.padEnd(12),
       fg: COLORS.accentBright
     });
-    const descText = new TextRenderable8(renderer, {
+    const descText = new TextRenderable10(renderer, {
       id: `help-desc-${key}`,
       content: desc,
       fg: COLORS.text
@@ -916,17 +1092,17 @@ function showHelpModal(state) {
     row.add(descText);
     dialog.add(row);
   }
-  const hintSpacer = new BoxRenderable9(renderer, {
+  const hintSpacer = new BoxRenderable11(renderer, {
     id: "help-hint-spacer",
     width: "100%",
     height: 1
   });
-  const hintRow = new BoxRenderable9(renderer, {
+  const hintRow = new BoxRenderable11(renderer, {
     id: "help-hint-row",
     width: "100%",
     height: 1
   });
-  const hint = new TextRenderable8(renderer, {
+  const hint = new TextRenderable10(renderer, {
     id: "help-hint",
     content: "[Esc] or any key to close",
     fg: COLORS.textDim
@@ -940,10 +1116,10 @@ function showHelpModal(state) {
 }
 // src/components/modals/move-task.ts
 import {
-  BoxRenderable as BoxRenderable10,
+  BoxRenderable as BoxRenderable12,
   SelectRenderable as SelectRenderable2,
   SelectRenderableEvents,
-  TextRenderable as TextRenderable9
+  TextRenderable as TextRenderable11
 } from "@opentui/core";
 async function showMoveTaskModal(state, onMoved) {
   const { renderer, columns } = state;
@@ -966,35 +1142,35 @@ async function showMoveTaskModal(state, onMoved) {
     width: 40,
     height: dialogHeight
   });
-  const titleRow = new BoxRenderable10(renderer, {
+  const titleRow = new BoxRenderable12(renderer, {
     id: "move-title-row",
     width: "100%",
     height: 1
   });
-  const title = new TextRenderable9(renderer, {
+  const title = new TextRenderable11(renderer, {
     id: "move-title",
     content: "Move Task",
     fg: COLORS.accent
   });
   titleRow.add(title);
-  const taskRow = new BoxRenderable10(renderer, {
+  const taskRow = new BoxRenderable12(renderer, {
     id: "move-task-row",
     width: "100%",
     height: 1
   });
-  const taskText = new TextRenderable9(renderer, {
+  const taskText = new TextRenderable11(renderer, {
     id: "move-task-text",
     content: task.title.slice(0, 35),
     fg: COLORS.textMuted
   });
   taskRow.add(taskText);
-  const spacer1 = new BoxRenderable10(renderer, { id: "move-spacer1", width: "100%", height: 1 });
-  const labelRow = new BoxRenderable10(renderer, {
+  const spacer1 = new BoxRenderable12(renderer, { id: "move-spacer1", width: "100%", height: 1 });
+  const labelRow = new BoxRenderable12(renderer, {
     id: "move-label-row",
     width: "100%",
     height: 1
   });
-  const label = new TextRenderable9(renderer, {
+  const label = new TextRenderable11(renderer, {
     id: "move-label",
     content: "Select column:",
     fg: COLORS.text
@@ -1015,13 +1191,13 @@ async function showMoveTaskModal(state, onMoved) {
     selectedBackgroundColor: COLORS.inputBg,
     selectedTextColor: COLORS.accentBright
   });
-  const spacer2 = new BoxRenderable10(renderer, { id: "move-spacer2", width: "100%", height: 1 });
-  const hintRow = new BoxRenderable10(renderer, {
+  const spacer2 = new BoxRenderable12(renderer, { id: "move-spacer2", width: "100%", height: 1 });
+  const hintRow = new BoxRenderable12(renderer, {
     id: "move-hint-row",
     width: "100%",
     height: 1
   });
-  const hint = new TextRenderable9(renderer, {
+  const hint = new TextRenderable11(renderer, {
     id: "move-hint",
     content: "[Enter] Move  [Esc] Cancel",
     fg: COLORS.textDim
@@ -1049,14 +1225,14 @@ async function showMoveTaskModal(state, onMoved) {
 }
 // src/components/modals/onboarding.ts
 import {
-  BoxRenderable as BoxRenderable11,
+  BoxRenderable as BoxRenderable13,
   InputRenderable as InputRenderable4,
   InputRenderableEvents as InputRenderableEvents4,
-  TextRenderable as TextRenderable10
+  TextRenderable as TextRenderable12
 } from "@opentui/core";
 async function showOnboarding(renderer) {
   return new Promise((resolvePromise) => {
-    const container = new BoxRenderable11(renderer, {
+    const container = new BoxRenderable13(renderer, {
       id: "onboarding",
       width: "100%",
       height: "100%",
@@ -1065,7 +1241,7 @@ async function showOnboarding(renderer) {
       alignItems: "center",
       backgroundColor: COLORS.bg
     });
-    const card = new BoxRenderable11(renderer, {
+    const card = new BoxRenderable13(renderer, {
       id: "card",
       width: 52,
       height: 13,
@@ -1079,35 +1255,35 @@ async function showOnboarding(renderer) {
       paddingLeft: 2,
       paddingRight: 2
     });
-    const titleRow = new BoxRenderable11(renderer, {
+    const titleRow = new BoxRenderable13(renderer, {
       id: "title-row",
       width: "100%",
       height: 1
     });
-    const title = new TextRenderable10(renderer, {
+    const title = new TextRenderable12(renderer, {
       id: "title",
       content: "Welcome to Kaban",
       fg: COLORS.accent
     });
     titleRow.add(title);
-    const subtitleRow = new BoxRenderable11(renderer, {
+    const subtitleRow = new BoxRenderable13(renderer, {
       id: "subtitle-row",
       width: "100%",
       height: 1
     });
-    const subtitle = new TextRenderable10(renderer, {
+    const subtitle = new TextRenderable12(renderer, {
       id: "subtitle",
       content: "No board found. Let's create one!",
       fg: COLORS.textMuted
     });
     subtitleRow.add(subtitle);
-    const spacer1 = new BoxRenderable11(renderer, { id: "spacer1", width: "100%", height: 1 });
-    const labelRow = new BoxRenderable11(renderer, {
+    const spacer1 = new BoxRenderable13(renderer, { id: "spacer1", width: "100%", height: 1 });
+    const labelRow = new BoxRenderable13(renderer, {
       id: "label-row",
       width: "100%",
       height: 1
     });
-    const label = new TextRenderable10(renderer, {
+    const label = new TextRenderable12(renderer, {
       id: "label",
       content: "Board name:",
       fg: COLORS.text
@@ -1124,15 +1300,16 @@ async function showOnboarding(renderer) {
       focusedBackgroundColor: COLORS.inputBg,
       cursorColor: COLORS.cursor
     });
-    const spacer2 = new BoxRenderable11(renderer, { id: "spacer2", width: "100%", height: 1 });
+    const spacer2 = new BoxRenderable13(renderer, { id: "spacer2", width: "100%", height: 1 });
+    const keyEmitter = renderer.keyInput;
     const doCreate = () => {
-      renderer.keyInput.off("keypress", keyHandler);
+      keyEmitter.off("keypress", keyHandler);
       const boardName = input.value.trim() || "Kaban Board";
       container.destroy();
       resolvePromise(boardName);
     };
     const doQuit = () => {
-      renderer.keyInput.off("keypress", keyHandler);
+      keyEmitter.off("keypress", keyHandler);
       renderer.destroy();
       process.exit(0);
     };
@@ -1175,11 +1352,11 @@ async function showOnboarding(renderer) {
     const keyHandler = (key) => {
       keyBindings[key.name]?.();
     };
-    renderer.keyInput.on("keypress", keyHandler);
+    keyEmitter.on("keypress", keyHandler);
   });
 }
 // src/components/modals/quit.ts
-import { BoxRenderable as BoxRenderable12, TextRenderable as TextRenderable11 } from "@opentui/core";
+import { BoxRenderable as BoxRenderable14, TextRenderable as TextRenderable13 } from "@opentui/core";
 function showQuitModal(state) {
   const { renderer } = state;
   const { overlay, dialog } = createModalOverlay(renderer, {
@@ -1188,26 +1365,26 @@ function showQuitModal(state) {
     height: 8,
     borderColor: COLORS.danger
   });
-  const titleRow = new BoxRenderable12(renderer, {
+  const titleRow = new BoxRenderable14(renderer, {
     id: "quit-title-row",
     width: "100%",
     height: 1,
     justifyContent: "center"
   });
-  const title = new TextRenderable11(renderer, {
+  const title = new TextRenderable13(renderer, {
     id: "quit-title",
     content: "Quit Kaban?",
     fg: COLORS.danger
   });
   titleRow.add(title);
-  const spacer = new BoxRenderable12(renderer, { id: "quit-spacer", width: "100%", height: 2 });
-  const hintRow = new BoxRenderable12(renderer, {
+  const spacer = new BoxRenderable14(renderer, { id: "quit-spacer", width: "100%", height: 2 });
+  const hintRow = new BoxRenderable14(renderer, {
     id: "quit-hint-row",
     width: "100%",
     height: 1,
     justifyContent: "center"
   });
-  const hint = new TextRenderable11(renderer, {
+  const hint = new TextRenderable13(renderer, {
     id: "quit-hint",
     content: "[y] Yes  [n/Esc] No",
     fg: COLORS.textMuted
@@ -1221,7 +1398,7 @@ function showQuitModal(state) {
   state.activeModal = "quit";
 }
 // src/components/modals/view-task.ts
-import { BoxRenderable as BoxRenderable13, TextRenderable as TextRenderable12 } from "@opentui/core";
+import { BoxRenderable as BoxRenderable15, TextRenderable as TextRenderable14 } from "@opentui/core";
 var DIALOG_WIDTH2 = 60;
 var DESC_VISIBLE_LINES = 4;
 var LABEL_WIDTH = 12;
@@ -1272,43 +1449,43 @@ async function showViewTaskModal(state, actions, taskIdOverride) {
     width: DIALOG_WIDTH2 - 4,
     id: "view-header"
   });
-  const spacerHeader = new BoxRenderable13(renderer, {
+  const spacerHeader = new BoxRenderable15(renderer, {
     id: "view-spacer-header",
     width: "100%",
     height: 1
   });
-  const titleRow = new BoxRenderable13(renderer, {
+  const titleRow = new BoxRenderable15(renderer, {
     id: "view-title-row",
     width: "100%",
     height: 1,
     flexDirection: "row",
     justifyContent: "space-between"
   });
-  const taskTitle = new TextRenderable12(renderer, {
+  const taskTitle = new TextRenderable14(renderer, {
     id: "view-task-title",
     content: truncate(task.title, DIALOG_WIDTH2 - 14),
     fg: COLORS.text
   });
-  const editHint = new TextRenderable12(renderer, {
+  const editHint = new TextRenderable14(renderer, {
     id: "view-edit-hint",
     content: "[e]dit",
     fg: COLORS.textDim
   });
   titleRow.add(taskTitle);
   titleRow.add(editHint);
-  const idRow = new BoxRenderable13(renderer, {
+  const idRow = new BoxRenderable15(renderer, {
     id: "view-id-row",
     width: "100%",
     height: 1,
     flexDirection: "row",
     justifyContent: "space-between"
   });
-  const idValue = new TextRenderable12(renderer, {
+  const idValue = new TextRenderable14(renderer, {
     id: "view-id-value",
     content: truncateMiddle(task.id, DIALOG_WIDTH2 - 14),
     fg: COLORS.textDim
   });
-  const copyHint = new TextRenderable12(renderer, {
+  const copyHint = new TextRenderable14(renderer, {
     id: "view-copy-hint",
     content: "[c]opy",
     fg: COLORS.textDim
@@ -1320,23 +1497,23 @@ async function showViewTaskModal(state, actions, taskIdOverride) {
     width: DIALOG_WIDTH2 - 4,
     id: "view-status"
   });
-  const columnRow = new BoxRenderable13(renderer, {
+  const columnRow = new BoxRenderable15(renderer, {
     id: "view-column-row",
     width: "100%",
     height: 1,
     flexDirection: "row"
   });
-  const columnLabel = new TextRenderable12(renderer, {
+  const columnLabel = new TextRenderable14(renderer, {
     id: "view-column-label",
     content: padLabel("Column"),
     fg: COLORS.textMuted
   });
-  const columnBullet = new TextRenderable12(renderer, {
+  const columnBullet = new TextRenderable14(renderer, {
     id: "view-column-bullet",
     content: "\u25CF ",
     fg: statusColor
   });
-  const columnValue = new TextRenderable12(renderer, {
+  const columnValue = new TextRenderable14(renderer, {
     id: "view-column-value",
     content: columnName,
     fg: COLORS.text
@@ -1344,54 +1521,54 @@ async function showViewTaskModal(state, actions, taskIdOverride) {
   columnRow.add(columnLabel);
   columnRow.add(columnBullet);
   columnRow.add(columnValue);
-  const assigneeRow = new BoxRenderable13(renderer, {
+  const assigneeRow = new BoxRenderable15(renderer, {
     id: "view-assignee-row",
     width: "100%",
     height: 1,
     flexDirection: "row"
   });
-  const assigneeLabel = new TextRenderable12(renderer, {
+  const assigneeLabel = new TextRenderable14(renderer, {
     id: "view-assignee-label",
     content: padLabel("Assignee"),
     fg: COLORS.textMuted
   });
-  const assigneeValue = new TextRenderable12(renderer, {
+  const assigneeValue = new TextRenderable14(renderer, {
     id: "view-assignee-value",
     content: task.assignedTo ?? "\u2014 unassigned",
     fg: task.assignedTo ? COLORS.success : COLORS.textDim
   });
   assigneeRow.add(assigneeLabel);
   assigneeRow.add(assigneeValue);
-  const creatorRow = new BoxRenderable13(renderer, {
+  const creatorRow = new BoxRenderable15(renderer, {
     id: "view-creator-row",
     width: "100%",
     height: 1,
     flexDirection: "row"
   });
-  const creatorLabel = new TextRenderable12(renderer, {
+  const creatorLabel = new TextRenderable14(renderer, {
     id: "view-creator-label",
     content: padLabel("Creator"),
     fg: COLORS.textMuted
   });
-  const creatorValue = new TextRenderable12(renderer, {
+  const creatorValue = new TextRenderable14(renderer, {
     id: "view-creator-value",
     content: task.createdBy,
     fg: COLORS.text
   });
   creatorRow.add(creatorLabel);
   creatorRow.add(creatorValue);
-  const labelsRow = new BoxRenderable13(renderer, {
+  const labelsRow = new BoxRenderable15(renderer, {
     id: "view-labels-row",
     width: "100%",
     height: 1,
     flexDirection: "row"
   });
-  const labelsLabel = new TextRenderable12(renderer, {
+  const labelsLabel = new TextRenderable14(renderer, {
     id: "view-labels-label",
     content: padLabel("Labels"),
     fg: COLORS.textMuted
   });
-  const labelsValue = new TextRenderable12(renderer, {
+  const labelsValue = new TextRenderable14(renderer, {
     id: "view-labels-value",
     content: "\u2014 none",
     fg: COLORS.textDim
@@ -1403,49 +1580,49 @@ async function showViewTaskModal(state, actions, taskIdOverride) {
     width: DIALOG_WIDTH2 - 4,
     id: "view-timeline"
   });
-  const createdRow = new BoxRenderable13(renderer, {
+  const createdRow = new BoxRenderable15(renderer, {
     id: "view-created-row",
     width: "100%",
     height: 1,
     flexDirection: "row"
   });
-  const createdLabel = new TextRenderable12(renderer, {
+  const createdLabel = new TextRenderable14(renderer, {
     id: "view-created-label",
     content: padLabel("Created"),
     fg: COLORS.textMuted
   });
-  const createdValue = new TextRenderable12(renderer, {
+  const createdValue = new TextRenderable14(renderer, {
     id: "view-created-value",
     content: formatDate(task.createdAt),
     fg: COLORS.textDim
   });
   createdRow.add(createdLabel);
   createdRow.add(createdValue);
-  const updatedRow = new BoxRenderable13(renderer, {
+  const updatedRow = new BoxRenderable15(renderer, {
     id: "view-updated-row",
     width: "100%",
     height: 1,
     flexDirection: "row",
     justifyContent: "space-between"
   });
-  const updatedLeft = new BoxRenderable13(renderer, {
+  const updatedLeft = new BoxRenderable15(renderer, {
     id: "view-updated-left",
     height: 1,
     flexDirection: "row"
   });
-  const updatedLabel = new TextRenderable12(renderer, {
+  const updatedLabel = new TextRenderable14(renderer, {
     id: "view-updated-label",
     content: padLabel("Updated"),
     fg: COLORS.textMuted
   });
-  const updatedValue = new TextRenderable12(renderer, {
+  const updatedValue = new TextRenderable14(renderer, {
     id: "view-updated-value",
     content: formatDate(task.updatedAt),
     fg: COLORS.textDim
   });
   updatedLeft.add(updatedLabel);
   updatedLeft.add(updatedValue);
-  const relativeTime = new TextRenderable12(renderer, {
+  const relativeTime = new TextRenderable14(renderer, {
     id: "view-relative-time",
     content: `(${formatRelativeTime(task.updatedAt)})`,
     fg: COLORS.textDim
@@ -1457,7 +1634,7 @@ async function showViewTaskModal(state, actions, taskIdOverride) {
     width: DIALOG_WIDTH2 - 4,
     id: "view-desc"
   });
-  const descContainer = new BoxRenderable13(renderer, {
+  const descContainer = new BoxRenderable15(renderer, {
     id: "view-desc-container",
     width: "100%",
     height: DESC_VISIBLE_LINES,
@@ -1465,7 +1642,7 @@ async function showViewTaskModal(state, actions, taskIdOverride) {
   });
   const descLineRenderables = [];
   for (let i = 0;i < DESC_VISIBLE_LINES; i++) {
-    const line = new TextRenderable12(renderer, {
+    const line = new TextRenderable14(renderer, {
       id: `view-desc-line-${i}`,
       content: " ",
       fg: COLORS.text
@@ -1501,55 +1678,61 @@ async function showViewTaskModal(state, actions, taskIdOverride) {
     }
   }
   updateDescriptionContent(0);
-  const footerDivider = new BoxRenderable13(renderer, {
+  const footerDivider = new BoxRenderable15(renderer, {
     id: "view-footer-divider",
     width: "100%",
     height: 1
   });
-  const footerLine = new TextRenderable12(renderer, {
+  const footerLine = new TextRenderable14(renderer, {
     id: "view-footer-line",
     content: "\u2500".repeat(DIALOG_WIDTH2 - 4),
     fg: COLORS.border
   });
   footerDivider.add(footerLine);
-  const actionsRow = new BoxRenderable13(renderer, {
+  const actionsRow = new BoxRenderable15(renderer, {
     id: "view-actions-row",
     width: "100%",
     height: 1,
     flexDirection: "row",
     justifyContent: "space-between"
   });
-  const actionsLeft = new BoxRenderable13(renderer, {
+  const actionsLeft = new BoxRenderable15(renderer, {
     id: "view-actions-left",
     height: 1,
     flexDirection: "row",
     gap: 2
   });
-  const moveAction = new TextRenderable12(renderer, {
+  const moveAction = new TextRenderable14(renderer, {
     id: "view-action-move",
     content: "[m] Move",
     fg: COLORS.textMuted
   });
-  const assignAction = new TextRenderable12(renderer, {
+  const assignAction = new TextRenderable14(renderer, {
     id: "view-action-assign",
     content: "[u] Assign",
     fg: COLORS.textMuted
   });
-  const editAction = new TextRenderable12(renderer, {
+  const editAction = new TextRenderable14(renderer, {
     id: "view-action-edit",
     content: "[e] Edit",
     fg: COLORS.textMuted
   });
-  const deleteAction = new TextRenderable12(renderer, {
+  const deleteAction = new TextRenderable14(renderer, {
     id: "view-action-delete",
     content: "[d] Delete",
     fg: COLORS.danger
   });
+  const archiveRestoreAction = new TextRenderable14(renderer, {
+    id: "view-action-archive-restore",
+    content: task.archived ? "[r] Restore" : "[x] Archive",
+    fg: task.archived ? COLORS.success : COLORS.warning
+  });
   actionsLeft.add(moveAction);
   actionsLeft.add(assignAction);
   actionsLeft.add(editAction);
+  actionsLeft.add(archiveRestoreAction);
   actionsLeft.add(deleteAction);
-  const escAction = new TextRenderable12(renderer, {
+  const escAction = new TextRenderable14(renderer, {
     id: "view-action-esc",
     content: "[Esc]",
     fg: COLORS.textDim
@@ -1677,6 +1860,21 @@ var openDeleteModal = async (state) => {
     await showDeleteTaskModal(state, () => refreshBoard(state));
   }
 };
+var openArchiveModal = async (state) => {
+  const taskId = getSelectedTaskId(state);
+  if (taskId) {
+    if (state.archiveViewMode) {
+      await showRestoreTaskModal(state, () => refreshBoard(state));
+    } else {
+      await showArchiveTaskModal(state, () => refreshBoard(state));
+    }
+  }
+};
+var toggleArchiveView = async (state) => {
+  state.archiveViewMode = !state.archiveViewMode;
+  state.currentColumnIndex = 0;
+  await refreshBoard(state);
+};
 var openEditModal = async (state) => {
   const task = state.selectedTask;
   if (!task)
@@ -1709,6 +1907,14 @@ async function openViewModalForTask(state, taskIdOverride) {
       },
       onEdit: async () => {
         await openEditModal(state);
+      },
+      onArchive: async () => {
+        closeModal(state);
+        await openArchiveModal(state);
+      },
+      onRestore: async () => {
+        closeModal(state);
+        await showRestoreTaskModal(state, () => refreshBoard(state));
       }
     }, taskIdOverride);
   }
@@ -1761,10 +1967,37 @@ var modalBindings = {
     h: navigateLeft,
     right: navigateRight,
     l: navigateRight,
-    a: (state) => showAddTaskModal(state, () => refreshBoard(state)),
-    m: openMoveModal,
-    u: openAssignModal,
-    d: openDeleteModal,
+    a: (state) => {
+      if (!state.archiveViewMode) {
+        return showAddTaskModal(state, () => refreshBoard(state));
+      }
+    },
+    m: (state) => {
+      if (!state.archiveViewMode) {
+        return openMoveModal(state);
+      }
+    },
+    u: (state) => {
+      if (!state.archiveViewMode) {
+        return openAssignModal(state);
+      }
+    },
+    d: (state) => {
+      if (!state.archiveViewMode) {
+        return openDeleteModal(state);
+      }
+    },
+    x: (state) => {
+      if (!state.archiveViewMode) {
+        return openArchiveModal(state);
+      }
+    },
+    r: (state) => {
+      if (state.archiveViewMode) {
+        return openArchiveModal(state);
+      }
+    },
+    tab: toggleArchiveView,
     return: openViewModal,
     "?": showHelpModal
   },
@@ -1794,6 +2027,16 @@ var modalBindings = {
     n: closeModal,
     escape: closeModal
   },
+  archiveTask: {
+    y: confirmModal,
+    n: closeModal,
+    escape: closeModal
+  },
+  restoreTask: {
+    y: confirmModal,
+    n: closeModal,
+    escape: closeModal
+  },
   viewTask: {
     escape: closeModal,
     left: buttonSelectPrev,
@@ -1812,6 +2055,18 @@ var modalBindings = {
       closeModal(state);
       await openDeleteModal(state);
     },
+    x: async (state) => {
+      if (!state.selectedTask?.archived) {
+        closeModal(state);
+        await openArchiveModal(state);
+      }
+    },
+    r: async (state) => {
+      if (state.selectedTask?.archived) {
+        closeModal(state);
+        await showRestoreTaskModal(state, () => refreshBoard(state));
+      }
+    },
     e: openEditModal,
     c: copyTaskId,
     j: (state) => scrollViewTaskDescription(state, "down"),
@@ -1931,7 +2186,8 @@ async function main() {
     viewTaskState: null,
     editTaskState: null,
     viewTaskRuntime: null,
-    editTaskRuntime: null
+    editTaskRuntime: null,
+    archiveViewMode: false
   };
   await refreshBoard(state);
   let lastDataVersion = null;
@@ -1953,7 +2209,8 @@ async function main() {
   process.on("exit", cleanup);
   process.on("SIGINT", cleanup);
   process.on("SIGTERM", cleanup);
-  renderer.keyInput.on("keypress", (key) => {
+  const keyEmitter = renderer.keyInput;
+  keyEmitter.on("keypress", (key) => {
     handleKeypress(state, key);
   });
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@kaban-board/tui",
-  "version": "0.2.6",
+  "version": "0.2.9",
   "description": "Terminal User Interface for Kaban - Kanban for AI Agents",
   "type": "module",
   "bin": {
@@ -18,7 +18,7 @@
     "prepublishOnly": "npm run build"
   },
   "dependencies": {
-    "@kaban-board/core": "0.2.4",
+    "@kaban-board/core": "0.2.5",
     "@opentui/core": "^0.1.69"
   },
   "devDependencies": {