floq 0.1.0 → 0.2.0

package/dist/ui/App.js

@@ -1,4 +1,4 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
 import { useState, useEffect, useCallback } from 'react';
 import { Box, Text, useInput, useApp } from 'ink';
 import TextInput from 'ink-text-input';
@@ -7,15 +7,20 @@ import { v4 as uuidv4 } from 'uuid';
 import { TaskItem } from './components/TaskItem.js';
 import { HelpModal } from './components/HelpModal.js';
 import { FunctionKeyBar } from './components/FunctionKeyBar.js';
+import { SearchBar } from './components/SearchBar.js';
+import { SearchResults } from './components/SearchResults.js';
 import { SplashScreen } from './SplashScreen.js';
 import { getDb, schema } from '../db/index.js';
 import { t, fmt } from '../i18n/index.js';
 import { ThemeProvider, useTheme } from './theme/index.js';
-import { getThemeName, isTursoEnabled, getTursoConfig } from '../config.js';
-const TABS = ['inbox', 'next', 'waiting', 'someday', 'projects'];
+import { getThemeName, getViewMode, isTursoEnabled, getTursoConfig } from '../config.js';
+import { KanbanBoard } from './components/KanbanBoard.js';
+import { VERSION } from '../version.js';
+const TABS = ['inbox', 'next', 'waiting', 'someday', 'projects', 'done'];
 export function App() {
     const themeName = getThemeName();
-    return (_jsx(ThemeProvider, { themeName: themeName, children: _jsx(AppContent, {}) }));
+    const viewMode = getViewMode();
+    return (_jsx(ThemeProvider, { themeName: themeName, children: viewMode === 'kanban' ? _jsx(KanbanBoard, {}) : _jsx(AppContent, {}) }));
 }
 function AppContent() {
     const theme = useTheme();
@@ -30,12 +35,22 @@ function AppContent() {
         waiting: [],
         someday: [],
         projects: [],
+        done: [],
     });
     const [message, setMessage] = useState(null);
     const [selectedProject, setSelectedProject] = useState(null);
     const [projectTasks, setProjectTasks] = useState([]);
     const [taskToLink, setTaskToLink] = useState(null);
     const [projectSelectIndex, setProjectSelectIndex] = useState(0);
+    const [selectedTask, setSelectedTask] = useState(null);
+    const [taskComments, setTaskComments] = useState([]);
+    const [selectedCommentIndex, setSelectedCommentIndex] = useState(0);
+    const [taskToWaiting, setTaskToWaiting] = useState(null);
+    const [projectProgress, setProjectProgress] = useState({});
+    // Search state
+    const [searchQuery, setSearchQuery] = useState('');
+    const [searchResults, setSearchResults] = useState([]);
+    const [searchResultIndex, setSearchResultIndex] = useState(0);
     const i18n = t();
     const loadTasks = useCallback(async () => {
         const db = getDb();
@@ -45,9 +60,10 @@ function AppContent() {
             waiting: [],
             someday: [],
             projects: [],
+            done: [],
         };
         // Load all tasks (including project children) by status
-        const statusList = ['inbox', 'next', 'waiting', 'someday'];
+        const statusList = ['inbox', 'next', 'waiting', 'someday', 'done'];
         for (const status of statusList) {
             newTasks[status] = await db
                 .select()
@@ -59,6 +75,18 @@ function AppContent() {
             .select()
             .from(schema.tasks)
             .where(and(eq(schema.tasks.isProject, true), eq(schema.tasks.status, 'next')));
+        // Calculate progress for each project
+        const progress = {};
+        for (const project of newTasks.projects) {
+            const children = await db
+                .select()
+                .from(schema.tasks)
+                .where(eq(schema.tasks.parentId, project.id));
+            const total = children.length;
+            const completed = children.filter(t => t.status === 'done').length;
+            progress[project.id] = { completed, total };
+        }
+        setProjectProgress(progress);
         setTasks(newTasks);
     }, []);
     // Get parent project for a task
@@ -75,11 +103,43 @@ function AppContent() {
             .where(eq(schema.tasks.parentId, projectId));
         setProjectTasks(children);
     }, []);
+    const loadTaskComments = useCallback(async (taskId) => {
+        const db = getDb();
+        const comments = await db
+            .select()
+            .from(schema.comments)
+            .where(eq(schema.comments.taskId, taskId));
+        setTaskComments(comments);
+    }, []);
     useEffect(() => {
         loadTasks();
     }, [loadTasks]);
     const currentTab = TABS[currentListIndex];
     const currentTasks = mode === 'project-detail' ? projectTasks : tasks[currentTab];
+    // Get all tasks for search (across all statuses)
+    const getAllTasks = useCallback(() => {
+        const allTasks = [];
+        for (const tab of TABS) {
+            allTasks.push(...tasks[tab]);
+        }
+        return allTasks;
+    }, [tasks]);
+    // Search tasks by query
+    const searchTasks = useCallback((query) => {
+        if (!query.trim())
+            return [];
+        const lowerQuery = query.toLowerCase();
+        const allTasks = getAllTasks();
+        return allTasks.filter(task => task.title.toLowerCase().includes(lowerQuery) ||
+            (task.description && task.description.toLowerCase().includes(lowerQuery)));
+    }, [getAllTasks]);
+    // Handle search query change
+    const handleSearchChange = useCallback((value) => {
+        setSearchQuery(value);
+        const results = searchTasks(value);
+        setSearchResults(results);
+        setSearchResultIndex(0);
+    }, [searchTasks]);
     const addTask = useCallback(async (title, parentId) => {
         if (!title.trim())
             return;
@@ -97,9 +157,57 @@ function AppContent() {
         setMessage(fmt(i18n.tui.added, { title: title.trim() }));
         await loadTasks();
     }, [i18n.tui.added, loadTasks]);
+    const addCommentToTask = useCallback(async (task, content) => {
+        const db = getDb();
+        await db.insert(schema.comments).values({
+            id: uuidv4(),
+            taskId: task.id,
+            content: content.trim(),
+            createdAt: new Date(),
+        });
+        setMessage(i18n.tui.commentAdded || 'Comment added');
+        await loadTaskComments(task.id);
+    }, [i18n.tui.commentAdded, loadTaskComments]);
+    const deleteComment = useCallback(async (comment) => {
+        const db = getDb();
+        await db.delete(schema.comments).where(eq(schema.comments.id, comment.id));
+        setMessage(i18n.tui.commentDeleted || 'Comment deleted');
+        if (selectedTask) {
+            await loadTaskComments(selectedTask.id);
+        }
+    }, [i18n.tui.commentDeleted, loadTaskComments, selectedTask]);
     const handleInputSubmit = async (value) => {
+        if (mode === 'move-to-waiting' && taskToWaiting) {
+            if (value.trim()) {
+                await moveTaskToWaiting(taskToWaiting, value);
+            }
+            setTaskToWaiting(null);
+            setMode('normal');
+            setInputValue('');
+            return;
+        }
+        // Handle search mode submit
+        if (mode === 'search') {
+            if (searchResults.length > 0) {
+                const task = searchResults[searchResultIndex];
+                setSelectedTask(task);
+                loadTaskComments(task.id);
+                setMode('task-detail');
+            }
+            else {
+                setMode('normal');
+            }
+            setSearchQuery('');
+            setSearchResults([]);
+            setSearchResultIndex(0);
+            return;
+        }
         if (value.trim()) {
-            if (mode === 'add-to-project' && selectedProject) {
+            if (mode === 'add-comment' && selectedTask) {
+                await addCommentToTask(selectedTask, value);
+                setMode('task-detail');
+            }
+            else if (mode === 'add-to-project' && selectedProject) {
                 await addTask(value, selectedProject.id);
                 await loadProjectTasks(selectedProject.id);
                 setMode('project-detail');
@@ -110,7 +218,12 @@ function AppContent() {
             }
         }
         else {
-            setMode(mode === 'add-to-project' ? 'project-detail' : 'normal');
+            if (mode === 'add-comment') {
+                setMode('task-detail');
+            }
+            else {
+                setMode(mode === 'add-to-project' ? 'project-detail' : 'normal');
+            }
         }
         setInputValue('');
     };
@@ -138,6 +251,14 @@ function AppContent() {
         setMessage(fmt(i18n.tui.movedTo, { title: task.title, status: i18n.status[status] }));
         await loadTasks();
     }, [i18n.tui.movedTo, i18n.status, loadTasks]);
+    const moveTaskToWaiting = useCallback(async (task, waitingFor) => {
+        const db = getDb();
+        await db.update(schema.tasks)
+            .set({ status: 'waiting', waitingFor: waitingFor.trim(), updatedAt: new Date() })
+            .where(eq(schema.tasks.id, task.id));
+        setMessage(fmt(i18n.tui.movedToWaiting, { title: task.title, person: waitingFor.trim() }));
+        await loadTasks();
+    }, [i18n.tui.movedToWaiting, loadTasks]);
     const makeTaskProject = useCallback(async (task) => {
         const db = getDb();
         await db.update(schema.tasks)
@@ -158,6 +279,8 @@ function AppContent() {
                 return i18n.tui.tabSomeday;
             case 'projects':
                 return i18n.tui.tabProjects || 'Projects';
+            case 'done':
+                return i18n.tui.tabDone || 'Done';
         }
     };
     useInput((input, key) => {
@@ -166,25 +289,111 @@ function AppContent() {
             setMode('normal');
             return;
         }
-        // Handle help mode - any key closes
+        // Handle help mode - let HelpModal handle input
         if (mode === 'help') {
-            setMode('normal');
+            return;
+        }
+        // Handle search mode
+        if (mode === 'search') {
+            if (key.escape) {
+                setSearchQuery('');
+                setSearchResults([]);
+                setSearchResultIndex(0);
+                setMode('normal');
+                return;
+            }
+            // Navigate search results with Ctrl+j/k or Ctrl+n/p
+            if (key.ctrl && (input === 'j' || input === 'n')) {
+                setSearchResultIndex((prev) => prev < searchResults.length - 1 ? prev + 1 : 0);
+                return;
+            }
+            if (key.ctrl && (input === 'k' || input === 'p')) {
+                setSearchResultIndex((prev) => prev > 0 ? prev - 1 : Math.max(0, searchResults.length - 1));
+                return;
+            }
+            // Let TextInput handle other keys
             return;
         }
         // Handle add mode
-        if (mode === 'add' || mode === 'add-to-project') {
+        if (mode === 'add' || mode === 'add-to-project' || mode === 'add-comment' || mode === 'move-to-waiting') {
             if (key.escape) {
                 setInputValue('');
-                setMode(mode === 'add-to-project' ? 'project-detail' : 'normal');
+                if (mode === 'move-to-waiting') {
+                    setTaskToWaiting(null);
+                    setMode('normal');
+                }
+                else if (mode === 'add-comment') {
+                    setMode('task-detail');
+                }
+                else if (mode === 'add-to-project') {
+                    setMode('project-detail');
+                }
+                else {
+                    setMode('normal');
+                }
+            }
+            return;
+        }
+        // Handle task-detail mode
+        if (mode === 'task-detail') {
+            if (key.escape || key.backspace || input === 'b') {
+                // If came from project-detail, go back to project-detail
+                if (selectedProject) {
+                    setMode('project-detail');
+                    // Find the task index in project tasks
+                    const taskIndex = projectTasks.findIndex(t => t.id === selectedTask?.id);
+                    if (taskIndex >= 0) {
+                        setSelectedTaskIndex(taskIndex);
+                    }
+                }
+                else {
+                    setMode('normal');
+                }
+                setSelectedTask(null);
+                setTaskComments([]);
+                setSelectedCommentIndex(0);
+                return;
+            }
+            // Navigate comments
+            if (key.upArrow || input === 'k') {
+                setSelectedCommentIndex((prev) => (prev > 0 ? prev - 1 : Math.max(0, taskComments.length - 1)));
+                return;
+            }
+            if (key.downArrow || input === 'j') {
+                setSelectedCommentIndex((prev) => (prev < taskComments.length - 1 ? prev + 1 : 0));
+                return;
+            }
+            // Delete comment
+            if (input === 'd' && taskComments.length > 0) {
+                const comment = taskComments[selectedCommentIndex];
+                deleteComment(comment).then(() => {
+                    if (selectedCommentIndex >= taskComments.length - 1) {
+                        setSelectedCommentIndex(Math.max(0, selectedCommentIndex - 1));
+                    }
+                });
+                return;
+            }
+            // Add comment
+            if (input === 'i') {
+                setMode('add-comment');
+                return;
+            }
+            // Link to project (P key)
+            if (input === 'P' && tasks.projects.length > 0) {
+                setTaskToLink(selectedTask);
+                setProjectSelectIndex(0);
+                setMode('select-project');
+                return;
             }
             return;
         }
         // Handle select-project mode
         if (mode === 'select-project') {
             if (key.escape) {
+                const wasFromTaskDetail = selectedTask !== null;
                 setTaskToLink(null);
                 setProjectSelectIndex(0);
-                setMode('normal');
+                setMode(wasFromTaskDetail ? 'task-detail' : 'normal');
                 return;
             }
             // Navigate projects
@@ -199,10 +408,11 @@ function AppContent() {
             // Select project with Enter
             if (key.return && taskToLink && tasks.projects.length > 0) {
                 const project = tasks.projects[projectSelectIndex];
+                const wasFromTaskDetail = selectedTask !== null;
                 linkTaskToProject(taskToLink, project);
                 setTaskToLink(null);
                 setProjectSelectIndex(0);
-                setMode('normal');
+                setMode(wasFromTaskDetail ? 'task-detail' : 'normal');
                 return;
             }
             return;
@@ -240,6 +450,14 @@ function AppContent() {
                 });
                 return;
             }
+            // Enter to view task details
+            if (key.return && projectTasks.length > 0) {
+                const task = projectTasks[selectedTaskIndex];
+                setSelectedTask(task);
+                loadTaskComments(task.id);
+                setMode('task-detail');
+                return;
+            }
             return;
         }
         // Clear message on any input
@@ -294,6 +512,14 @@ function AppContent() {
             setMode('help');
             return;
         }
+        // Search mode
+        if (input === '/') {
+            setMode('search');
+            setSearchQuery('');
+            setSearchResults([]);
+            setSearchResultIndex(0);
+            return;
+        }
         // Quit
         if (input === 'q' || (key.ctrl && input === 'c')) {
             exit();
@@ -330,6 +556,11 @@ function AppContent() {
             setSelectedTaskIndex(0);
             return;
         }
+        if (input === '6') {
+            setCurrentListIndex(5);
+            setSelectedTaskIndex(0);
+            return;
+        }
         // Navigate between lists
         if (key.leftArrow || input === 'h') {
             setCurrentListIndex((prev) => (prev > 0 ? prev - 1 : TABS.length - 1));
@@ -359,8 +590,16 @@ function AppContent() {
             setSelectedTaskIndex(0);
             return;
         }
+        // Enter to view task details (on non-projects tabs)
+        if (key.return && currentTab !== 'projects' && currentTasks.length > 0) {
+            const task = currentTasks[selectedTaskIndex];
+            setSelectedTask(task);
+            loadTaskComments(task.id);
+            setMode('task-detail');
+            return;
+        }
         // Mark as project (p key)
-        if (input === 'p' && currentTasks.length > 0 && currentTab !== 'projects') {
+        if (input === 'p' && currentTasks.length > 0 && currentTab !== 'projects' && currentTab !== 'done') {
             const task = currentTasks[selectedTaskIndex];
             makeTaskProject(task).then(() => {
                 if (selectedTaskIndex >= currentTasks.length - 1) {
@@ -370,15 +609,15 @@ function AppContent() {
             return;
         }
         // Link to project (P key - shift+p)
-        if (input === 'P' && currentTasks.length > 0 && currentTab !== 'projects' && tasks.projects.length > 0) {
+        if (input === 'P' && currentTasks.length > 0 && currentTab !== 'projects' && currentTab !== 'done' && tasks.projects.length > 0) {
             const task = currentTasks[selectedTaskIndex];
             setTaskToLink(task);
             setProjectSelectIndex(0);
             setMode('select-project');
             return;
         }
-        // Mark as done
-        if (input === 'd' && currentTasks.length > 0) {
+        // Mark as done (not available on done tab)
+        if (input === 'd' && currentTasks.length > 0 && currentTab !== 'done') {
             const task = currentTasks[selectedTaskIndex];
             markTaskDone(task).then(() => {
                 if (selectedTaskIndex >= currentTasks.length - 1) {
@@ -388,7 +627,7 @@ function AppContent() {
             return;
         }
         // Move to next actions
-        if (input === 'n' && currentTasks.length > 0 && currentTab !== 'next' && currentTab !== 'projects') {
+        if (input === 'n' && currentTasks.length > 0 && currentTab !== 'next' && currentTab !== 'projects' && currentTab !== 'done') {
             const task = currentTasks[selectedTaskIndex];
             moveTaskToStatus(task, 'next').then(() => {
                 if (selectedTaskIndex >= currentTasks.length - 1) {
@@ -398,7 +637,7 @@ function AppContent() {
             return;
         }
         // Move to someday
-        if (input === 's' && currentTasks.length > 0 && currentTab !== 'someday' && currentTab !== 'projects') {
+        if (input === 's' && currentTasks.length > 0 && currentTab !== 'someday' && currentTab !== 'projects' && currentTab !== 'done') {
             const task = currentTasks[selectedTaskIndex];
             moveTaskToStatus(task, 'someday').then(() => {
                 if (selectedTaskIndex >= currentTasks.length - 1) {
@@ -407,8 +646,15 @@ function AppContent() {
             });
             return;
         }
+        // Move to waiting
+        if (input === 'w' && currentTasks.length > 0 && currentTab !== 'waiting' && currentTab !== 'projects' && currentTab !== 'done') {
+            const task = currentTasks[selectedTaskIndex];
+            setTaskToWaiting(task);
+            setMode('move-to-waiting');
+            return;
+        }
         // Move to inbox
-        if (input === 'i' && currentTasks.length > 0 && currentTab !== 'inbox' && currentTab !== 'projects') {
+        if (input === 'i' && currentTasks.length > 0 && currentTab !== 'inbox' && currentTab !== 'projects' && currentTab !== 'done') {
             const task = currentTasks[selectedTaskIndex];
             moveTaskToStatus(task, 'inbox').then(() => {
                 if (selectedTaskIndex >= currentTasks.length - 1) {
@@ -451,15 +697,24 @@ function AppContent() {
         }
         return '';
     })() : '';
-    return (_jsxs(Box, { flexDirection: "column", padding: 1, children: [_jsxs(Box, { marginBottom: 1, justifyContent: "space-between", children: [_jsxs(Box, { children: [_jsx(Text, { bold: true, color: theme.colors.primary, children: formatTitle(i18n.tui.title) }), tursoEnabled && (_jsxs(Text, { color: theme.colors.accent, children: [theme.name === 'modern' ? ' ☁️ ' : ' [SYNC] ', tursoHost] })), !tursoEnabled && (_jsx(Text, { color: theme.colors.textMuted, children: theme.name === 'modern' ? ' 💾 local' : ' [LOCAL]' }))] }), _jsx(Text, { color: theme.colors.textMuted, children: i18n.tui.helpHint })] }), _jsx(Box, { marginBottom: 1, children: TABS.map((tab, index) => {
+    return (_jsxs(Box, { flexDirection: "column", padding: 1, children: [_jsxs(Box, { marginBottom: 1, justifyContent: "space-between", children: [_jsxs(Box, { children: [_jsx(Text, { bold: true, color: theme.colors.primary, children: formatTitle(i18n.tui.title) }), _jsx(Text, { color: theme.colors.textMuted, children: theme.name === 'modern' ? ` v${VERSION}` : ` VER ${VERSION}` }), tursoEnabled && (_jsxs(Text, { color: theme.colors.accent, children: [theme.name === 'modern' ? ' ☁️ ' : ' [SYNC] ', tursoHost] })), !tursoEnabled && (_jsx(Text, { color: theme.colors.textMuted, children: theme.name === 'modern' ? ' 💾 local' : ' [LOCAL]' }))] }), _jsx(Text, { color: theme.colors.textMuted, children: i18n.tui.helpHint })] }), _jsx(Box, { marginBottom: 1, children: TABS.map((tab, index) => {
                     const isActive = index === currentListIndex && mode !== 'project-detail';
                     const count = tasks[tab].length;
                     const label = `${index + 1}:${getTabLabel(tab)}(${count})`;
                     return (_jsx(Box, { marginRight: 1, children: _jsx(Text, { color: isActive ? theme.colors.textSelected : theme.colors.textMuted, bold: isActive, inverse: isActive && theme.style.tabActiveInverse, children: formatTabLabel(` ${label} `, isActive) }) }, tab));
-                }) }), mode === 'project-detail' && selectedProject && (_jsxs(Box, { marginBottom: 1, children: [_jsxs(Text, { color: theme.colors.accent, bold: true, children: [theme.name === 'modern' ? '📁 ' : '>> ', selectedProject.title] }), _jsxs(Text, { color: theme.colors.textMuted, children: [" (Esc/b: ", i18n.tui.back || 'back', ")"] })] })), _jsx(Box, { flexDirection: "column", borderStyle: theme.borders.list, borderColor: theme.colors.border, paddingX: 1, paddingY: 1, minHeight: 10, children: currentTasks.length === 0 ? (_jsx(Text, { color: theme.colors.textMuted, italic: true, children: i18n.tui.noTasks })) : (currentTasks.map((task, index) => {
+                }) }), mode === 'project-detail' && selectedProject && (_jsxs(_Fragment, { children: [_jsxs(Box, { marginBottom: 1, children: [_jsxs(Text, { color: theme.colors.accent, bold: true, children: [theme.name === 'modern' ? '📁 ' : '>> ', selectedProject.title] }), _jsxs(Text, { color: theme.colors.textMuted, children: [" (Esc/b: ", i18n.tui.back || 'back', ")"] })] }), _jsx(Box, { marginBottom: 1, children: _jsxs(Text, { color: theme.colors.secondary, bold: true, children: [i18n.tui.projectTasks || 'Tasks', " (", projectTasks.length, ")"] }) })] })), (mode === 'task-detail' || mode === 'add-comment') && selectedTask && (_jsxs(Box, { flexDirection: "column", children: [_jsxs(Box, { marginBottom: 1, children: [_jsxs(Text, { color: theme.colors.accent, bold: true, children: [theme.name === 'modern' ? '📋 ' : '>> ', i18n.tui.taskDetailTitle || 'Task Details'] }), _jsxs(Text, { color: theme.colors.textMuted, children: [" (Esc/b: ", i18n.tui.back || 'back', ", ", i18n.tui.commentHint || 'i: add comment', ")"] })] }), _jsxs(Box, { flexDirection: "column", borderStyle: theme.borders.list, borderColor: theme.colors.border, paddingX: 1, paddingY: 1, marginBottom: 1, children: [_jsx(Text, { color: theme.colors.text, bold: true, children: selectedTask.title }), selectedTask.description && (_jsx(Text, { color: theme.colors.textMuted, children: selectedTask.description })), _jsxs(Text, { color: theme.colors.textMuted, children: [i18n.status[selectedTask.status], selectedTask.waitingFor && ` - ${selectedTask.waitingFor}`] })] }), _jsx(Box, { marginBottom: 1, children: _jsxs(Text, { color: theme.colors.secondary, bold: true, children: [i18n.tui.comments || 'Comments', " (", taskComments.length, ")"] }) }), _jsx(Box, { flexDirection: "column", borderStyle: theme.borders.list, borderColor: theme.colors.border, paddingX: 1, paddingY: 1, minHeight: 5, children: taskComments.length === 0 ? (_jsx(Text, { color: theme.colors.textMuted, italic: true, children: i18n.tui.noComments || 'No comments yet' })) : (taskComments.map((comment, index) => {
+                            const isSelected = index === selectedCommentIndex && mode === 'task-detail';
+                            return (_jsxs(Box, { flexDirection: "row", marginBottom: 1, children: [_jsx(Text, { color: isSelected ? theme.colors.textSelected : theme.colors.textMuted, children: isSelected ? theme.style.selectedPrefix : theme.style.unselectedPrefix }), _jsxs(Box, { flexDirection: "column", children: [_jsxs(Text, { color: theme.colors.textMuted, children: ["[", comment.createdAt.toLocaleString(), "]"] }), _jsx(Text, { color: isSelected ? theme.colors.textSelected : theme.colors.text, bold: isSelected, children: comment.content })] })] }, comment.id));
+                        })) }), mode === 'add-comment' && (_jsxs(Box, { marginTop: 1, children: [_jsx(Text, { color: theme.colors.secondary, bold: true, children: i18n.tui.addComment || 'New comment: ' }), _jsx(TextInput, { value: inputValue, onChange: setInputValue, onSubmit: handleInputSubmit, placeholder: "" }), _jsxs(Text, { color: theme.colors.textMuted, children: [" ", i18n.tui.inputHelp] })] }))] })), mode === 'search' && searchQuery && (_jsx(SearchResults, { results: searchResults, selectedIndex: searchResultIndex, query: searchQuery })), mode !== 'task-detail' && mode !== 'add-comment' && mode !== 'search' && (_jsx(Box, { flexDirection: "column", borderStyle: theme.borders.list, borderColor: theme.colors.border, paddingX: 1, paddingY: 1, minHeight: 10, children: currentTasks.length === 0 ? (_jsx(Text, { color: theme.colors.textMuted, italic: true, children: i18n.tui.noTasks })) : (currentTasks.map((task, index) => {
                     const parentProject = getParentProject(task.parentId);
-                    return (_jsx(TaskItem, { task: task, isSelected: index === selectedTaskIndex, projectName: parentProject?.title }, task.id));
-                })) }), (mode === 'add' || mode === 'add-to-project') && (_jsxs(Box, { marginTop: 1, children: [_jsx(Text, { color: theme.colors.secondary, bold: true, children: mode === 'add-to-project' && selectedProject
+                    const progress = currentTab === 'projects' ? projectProgress[task.id] : undefined;
+                    return (_jsx(TaskItem, { task: task, isSelected: index === selectedTaskIndex, projectName: parentProject?.title, progress: progress }, task.id));
+                })) })), (mode === 'add' || mode === 'add-to-project') && (_jsxs(Box, { marginTop: 1, children: [_jsx(Text, { color: theme.colors.secondary, bold: true, children: mode === 'add-to-project' && selectedProject
                             ? `${i18n.tui.newTask}[${selectedProject.title}] `
-                            : i18n.tui.newTask }), _jsx(TextInput, { value: inputValue, onChange: setInputValue, onSubmit: handleInputSubmit, placeholder: i18n.tui.placeholder }), _jsxs(Text, { color: theme.colors.textMuted, children: [" ", i18n.tui.inputHelp] })] })), mode === 'select-project' && taskToLink && (_jsxs(Box, { flexDirection: "column", marginTop: 1, children: [_jsxs(Text, { color: theme.colors.secondary, bold: true, children: [i18n.tui.selectProject || 'Select project for', ": ", taskToLink.title] }), _jsx(Box, { flexDirection: "column", marginTop: 1, borderStyle: theme.borders.list, borderColor: theme.colors.borderActive, paddingX: 1, children: tasks.projects.map((project, index) => (_jsxs(Text, { color: index === projectSelectIndex ? theme.colors.textSelected : theme.colors.text, bold: index === projectSelectIndex, children: [index === projectSelectIndex ? theme.style.selectedPrefix : theme.style.unselectedPrefix, project.title] }, project.id))) }), _jsx(Text, { color: theme.colors.textMuted, children: i18n.tui.selectProjectHelp || 'j/k: select, Enter: confirm, Esc: cancel' })] })), message && mode === 'normal' && (_jsx(Box, { marginTop: 1, children: _jsx(Text, { color: theme.colors.textHighlight, children: message }) })), _jsx(Box, { marginTop: 1, children: theme.style.showFunctionKeys ? (_jsx(FunctionKeyBar, {})) : (_jsx(Text, { color: theme.colors.textMuted, children: i18n.tui.footer })) })] }));
+                            : i18n.tui.newTask }), _jsx(TextInput, { value: inputValue, onChange: setInputValue, onSubmit: handleInputSubmit, placeholder: i18n.tui.placeholder }), _jsxs(Text, { color: theme.colors.textMuted, children: [" ", i18n.tui.inputHelp] })] })), mode === 'move-to-waiting' && taskToWaiting && (_jsxs(Box, { marginTop: 1, children: [_jsx(Text, { color: theme.colors.secondary, bold: true, children: i18n.tui.waitingFor }), _jsx(TextInput, { value: inputValue, onChange: setInputValue, onSubmit: handleInputSubmit, placeholder: "" }), _jsxs(Text, { color: theme.colors.textMuted, children: [" ", i18n.tui.inputHelp] })] })), mode === 'select-project' && taskToLink && (_jsxs(Box, { flexDirection: "column", marginTop: 1, children: [_jsxs(Text, { color: theme.colors.secondary, bold: true, children: [i18n.tui.selectProject || 'Select project for', ": ", taskToLink.title] }), _jsx(Box, { flexDirection: "column", marginTop: 1, borderStyle: theme.borders.list, borderColor: theme.colors.borderActive, paddingX: 1, children: tasks.projects.map((project, index) => (_jsxs(Text, { color: index === projectSelectIndex ? theme.colors.textSelected : theme.colors.text, bold: index === projectSelectIndex, children: [index === projectSelectIndex ? theme.style.selectedPrefix : theme.style.unselectedPrefix, project.title] }, project.id))) }), _jsx(Text, { color: theme.colors.textMuted, children: i18n.tui.selectProjectHelp || 'j/k: select, Enter: confirm, Esc: cancel' })] })), mode === 'search' && (_jsx(SearchBar, { value: searchQuery, onChange: handleSearchChange, onSubmit: handleInputSubmit })), message && mode === 'normal' && (_jsx(Box, { marginTop: 1, children: _jsx(Text, { color: theme.colors.textHighlight, children: message }) })), _jsx(Box, { marginTop: 1, children: (mode === 'task-detail' || mode === 'add-comment') ? (theme.style.showFunctionKeys ? (_jsx(FunctionKeyBar, { keys: [
+                        { key: 'i', label: i18n.tui.keyBar.comment },
+                        { key: 'd', label: i18n.tui.keyBar.delete },
+                        { key: 'P', label: i18n.tui.keyBar.project },
+                        { key: 'b', label: i18n.tui.keyBar.back },
+                    ] })) : (_jsx(Text, { color: theme.colors.textMuted, children: i18n.tui.taskDetailFooter }))) : theme.style.showFunctionKeys ? (_jsx(FunctionKeyBar, {})) : (_jsx(Text, { color: theme.colors.textMuted, children: i18n.tui.footer })) })] }));
 }

package/dist/ui/ModeSelector.d.ts

@@ -0,0 +1,7 @@
+import React from 'react';
+import { type ViewMode } from '../config.js';
+interface ModeSelectorProps {
+    onSelect: (mode: ViewMode) => void;
+}
+export declare function ModeSelector({ onSelect }: ModeSelectorProps): React.ReactElement;
+export {};

package/dist/ui/ModeSelector.js

@@ -0,0 +1,37 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useState } from 'react';
+import { Box, Text, useInput } from 'ink';
+import { getViewMode } from '../config.js';
+const VALID_VIEW_MODES = ['gtd', 'kanban'];
+const modeDisplayNames = {
+    gtd: 'GTD (Getting Things Done)',
+    kanban: 'Kanban Board',
+};
+const modeDescriptions = {
+    gtd: 'Classic GTD workflow with Inbox, Next, Waiting, Someday lists',
+    kanban: '3-column kanban board view',
+};
+export function ModeSelector({ onSelect }) {
+    const currentMode = getViewMode();
+    const initialIndex = VALID_VIEW_MODES.indexOf(currentMode);
+    const [selectedIndex, setSelectedIndex] = useState(initialIndex >= 0 ? initialIndex : 0);
+    useInput((input, key) => {
+        // j or down arrow: move down
+        if (input === 'j' || key.downArrow) {
+            setSelectedIndex((prev) => (prev < VALID_VIEW_MODES.length - 1 ? prev + 1 : 0));
+        }
+        // k or up arrow: move up
+        if (input === 'k' || key.upArrow) {
+            setSelectedIndex((prev) => (prev > 0 ? prev - 1 : VALID_VIEW_MODES.length - 1));
+        }
+        // Enter: select
+        if (key.return) {
+            onSelect(VALID_VIEW_MODES[selectedIndex]);
+        }
+    });
+    return (_jsxs(Box, { flexDirection: "column", padding: 1, children: [_jsx(Text, { bold: true, children: "Select a view mode:" }), _jsx(Text, { dimColor: true, children: "j/k: select, Enter: confirm" }), _jsx(Box, { flexDirection: "column", marginTop: 1, children: VALID_VIEW_MODES.map((mode, index) => {
+                    const isSelected = index === selectedIndex;
+                    const isCurrent = mode === currentMode;
+                    return (_jsxs(Box, { flexDirection: "column", marginBottom: 1, children: [_jsxs(Text, { color: isSelected ? 'cyan' : undefined, children: [isSelected ? '› ' : '  ', modeDisplayNames[mode], isCurrent ? ' (current)' : ''] }), _jsxs(Text, { dimColor: true, children: ['    ', modeDescriptions[mode]] })] }, mode));
+                }) })] }));
+}

package/dist/ui/SetupWizard.d.ts

@@ -0,0 +1,6 @@
+import React from 'react';
+interface SetupWizardProps {
+    onComplete: () => void;
+}
+export declare function SetupWizard({ onComplete }: SetupWizardProps): React.ReactElement;
+export {};