floq 0.4.0 → 0.6.0

package/dist/ui/components/GtdDQ.js

@@ -0,0 +1,773 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import React, { useState, useEffect, useCallback } from 'react';
+import { Box, Text, useInput, useApp, useStdout } from 'ink';
+import TextInput from 'ink-text-input';
+import { eq, and, gte } from 'drizzle-orm';
+import { v4 as uuidv4 } from 'uuid';
+import { getDb, schema } from '../../db/index.js';
+import { t, fmt } from '../../i18n/index.js';
+import { useTheme } from '../theme/index.js';
+import { isTursoEnabled, getContexts, addContext } from '../../config.js';
+import { VERSION } from '../../version.js';
+import { useHistory, CreateTaskCommand, DeleteTaskCommand, MoveTaskCommand, LinkTaskCommand, ConvertToProjectCommand, } from '../history/index.js';
+import { SearchBar } from './SearchBar.js';
+import { SearchResults } from './SearchResults.js';
+import { HelpModal } from './HelpModal.js';
+const TABS = ['inbox', 'next', 'waiting', 'someday', 'projects', 'done'];
+// Round border characters
+const BORDER = {
+    topLeft: '╭',
+    topRight: '╮',
+    bottomLeft: '╰',
+    bottomRight: '╯',
+    horizontal: '─',
+    vertical: '│',
+};
+const SHADOW = '░';
+function getDisplayWidth(str) {
+    let width = 0;
+    for (const char of str) {
+        const code = char.charCodeAt(0);
+        if ((code >= 0x1100 && code <= 0x115F) ||
+            (code >= 0x2E80 && code <= 0x9FFF) ||
+            (code >= 0xAC00 && code <= 0xD7AF) ||
+            (code >= 0xF900 && code <= 0xFAFF) ||
+            (code >= 0xFE10 && code <= 0xFE1F) ||
+            (code >= 0xFE30 && code <= 0xFE6F) ||
+            (code >= 0xFF00 && code <= 0xFF60) ||
+            (code >= 0xFFE0 && code <= 0xFFE6) ||
+            (code >= 0x20000 && code <= 0x2FFFF)) {
+            width += 2;
+        }
+        else {
+            width += 1;
+        }
+    }
+    return width;
+}
+// Truncate string to fit within maxWidth (display width)
+function truncateString(str, maxWidth) {
+    if (getDisplayWidth(str) <= maxWidth)
+        return str;
+    let width = 0;
+    let result = '';
+    for (const char of str) {
+        const charWidth = getDisplayWidth(char);
+        if (width + charWidth + 2 > maxWidth) { // +2 for "…"
+            return result + '…';
+        }
+        result += char;
+        width += charWidth;
+    }
+    return result;
+}
+function TitledBoxInline({ title, children, width, minHeight = 1, isActive = false, showShadow = true, }) {
+    const theme = useTheme();
+    const color = isActive ? theme.colors.borderActive : theme.colors.border;
+    const shadowColor = theme.colors.muted;
+    const innerWidth = width - 2;
+    const titleLength = getDisplayWidth(title);
+    const leftDashes = 3;
+    const titlePadding = 2;
+    const rightDashes = Math.max(0, innerWidth - leftDashes - titlePadding - titleLength);
+    const childArray = React.Children.toArray(children);
+    const contentRows = childArray.length || 1;
+    const emptyRowsNeeded = Math.max(0, minHeight - contentRows);
+    return (_jsxs(Box, { flexDirection: "column", children: [_jsxs(Box, { children: [_jsx(Text, { color: color, children: BORDER.topLeft }), _jsxs(Text, { color: color, children: [BORDER.horizontal.repeat(leftDashes), " "] }), _jsx(Text, { color: theme.colors.accent, bold: true, children: title }), _jsxs(Text, { color: color, children: [" ", BORDER.horizontal.repeat(rightDashes)] }), _jsx(Text, { color: color, children: BORDER.topRight }), showShadow && _jsx(Text, { children: " " })] }), childArray.length > 0 ? (childArray.map((child, i) => (_jsxs(Box, { children: [_jsx(Text, { color: color, children: BORDER.vertical }), _jsx(Box, { width: innerWidth, paddingX: 1, children: _jsx(Box, { flexGrow: 1, children: child }) }), _jsx(Text, { color: color, children: BORDER.vertical }), showShadow && _jsx(Text, { color: shadowColor, children: SHADOW })] }, i)))) : (_jsxs(Box, { children: [_jsx(Text, { color: color, children: BORDER.vertical }), _jsx(Box, { width: innerWidth, children: _jsx(Text, { children: " " }) }), _jsx(Text, { color: color, children: BORDER.vertical }), showShadow && _jsx(Text, { color: shadowColor, children: SHADOW })] })), Array.from({ length: emptyRowsNeeded }).map((_, i) => (_jsxs(Box, { children: [_jsx(Text, { color: color, children: BORDER.vertical }), _jsx(Box, { width: innerWidth, children: _jsx(Text, { children: " " }) }), _jsx(Text, { color: color, children: BORDER.vertical }), showShadow && _jsx(Text, { color: shadowColor, children: SHADOW })] }, `empty-${i}`))), _jsxs(Box, { children: [_jsx(Text, { color: color, children: BORDER.bottomLeft }), _jsx(Text, { color: color, children: BORDER.horizontal.repeat(innerWidth) }), _jsx(Text, { color: color, children: BORDER.bottomRight }), showShadow && _jsx(Text, { color: shadowColor, children: SHADOW })] }), showShadow && (_jsx(Box, { children: _jsxs(Text, { color: shadowColor, children: [" ", SHADOW.repeat(width)] }) }))] }));
+}
+export function GtdDQ({ onOpenSettings }) {
+    const theme = useTheme();
+    const { exit } = useApp();
+    const { stdout } = useStdout();
+    const history = useHistory();
+    const i18n = t();
+    const [mode, setMode] = useState('normal');
+    const [paneFocus, setPaneFocus] = useState('tabs');
+    const [currentTabIndex, setCurrentTabIndex] = useState(0);
+    const [selectedTaskIndex, setSelectedTaskIndex] = useState(0);
+    const [tasks, setTasks] = useState({
+        inbox: [],
+        next: [],
+        waiting: [],
+        someday: [],
+        projects: [],
+        done: [],
+    });
+    const [message, setMessage] = useState(null);
+    const [inputValue, setInputValue] = useState('');
+    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 [taskToDelete, setTaskToDelete] = useState(null);
+    const [projectProgress, setProjectProgress] = useState({});
+    const [contextFilter, setContextFilter] = useState(null);
+    const [contextSelectIndex, setContextSelectIndex] = useState(0);
+    const [availableContexts, setAvailableContexts] = useState([]);
+    const [searchQuery, setSearchQuery] = useState('');
+    const [searchResults, setSearchResults] = useState([]);
+    const [searchResultIndex, setSearchResultIndex] = useState(0);
+    const terminalWidth = stdout?.columns || 80;
+    const leftPaneWidth = 28;
+    const rightPaneWidth = terminalWidth - leftPaneWidth - 6;
+    const currentTab = TABS[currentTabIndex];
+    const currentTasks = mode === 'project-detail' ? projectTasks : tasks[currentTab];
+    const loadTasks = useCallback(async () => {
+        const db = getDb();
+        const newTasks = {
+            inbox: [],
+            next: [],
+            waiting: [],
+            someday: [],
+            projects: [],
+            done: [],
+        };
+        const statusList = ['inbox', 'next', 'waiting', 'someday', 'done'];
+        for (const status of statusList) {
+            const oneWeekAgo = new Date();
+            oneWeekAgo.setDate(oneWeekAgo.getDate() - 7);
+            const conditions = [
+                eq(schema.tasks.status, status),
+                eq(schema.tasks.isProject, false),
+            ];
+            if (status === 'done') {
+                conditions.push(gte(schema.tasks.updatedAt, oneWeekAgo));
+            }
+            let allTasks = await db
+                .select()
+                .from(schema.tasks)
+                .where(and(...conditions));
+            if (contextFilter !== null) {
+                if (contextFilter === '') {
+                    allTasks = allTasks.filter(t => !t.context);
+                }
+                else {
+                    allTasks = allTasks.filter(t => t.context === contextFilter);
+                }
+            }
+            newTasks[status] = allTasks;
+        }
+        newTasks.projects = await db
+            .select()
+            .from(schema.tasks)
+            .where(and(eq(schema.tasks.isProject, true), eq(schema.tasks.status, 'next')));
+        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);
+        setAvailableContexts(getContexts());
+    }, [contextFilter]);
+    const loadProjectTasks = useCallback(async (projectId) => {
+        const db = getDb();
+        const children = await db
+            .select()
+            .from(schema.tasks)
+            .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);
+    }, []);
+    // 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]);
+    // Navigate to a task from search results
+    const navigateToTask = useCallback((task) => {
+        const targetTab = task.isProject ? 'projects' : task.status;
+        const tabIndex = TABS.indexOf(targetTab);
+        const tabTasks = tasks[targetTab];
+        const taskIndex = tabTasks.findIndex(t => t.id === task.id);
+        if (tabIndex >= 0 && taskIndex >= 0) {
+            setCurrentTabIndex(tabIndex);
+            setSelectedTaskIndex(taskIndex);
+            setPaneFocus('tasks');
+            setMode('normal');
+        }
+    }, [tasks]);
+    useEffect(() => {
+        loadTasks();
+    }, [loadTasks]);
+    const getTabLabel = (tab) => {
+        switch (tab) {
+            case 'inbox': return i18n.tui.tabInbox;
+            case 'next': return i18n.tui.tabNext;
+            case 'waiting': return i18n.tui.tabWaiting;
+            case 'someday': return i18n.tui.tabSomeday;
+            case 'projects': return i18n.tui.tabProjects || 'Projects';
+            case 'done': return i18n.tui.tabDone || 'Done';
+        }
+    };
+    const addTask = useCallback(async (title, parentId, context) => {
+        if (!title.trim())
+            return;
+        const now = new Date();
+        const taskId = uuidv4();
+        const command = new CreateTaskCommand({
+            task: {
+                id: taskId,
+                title: title.trim(),
+                status: parentId ? 'next' : 'inbox',
+                parentId: parentId || null,
+                context: context || null,
+                createdAt: now,
+                updatedAt: now,
+            },
+            description: fmt(i18n.tui.added, { title: title.trim() }),
+        });
+        await history.execute(command);
+        setMessage(fmt(i18n.tui.added, { title: title.trim() }));
+        await loadTasks();
+    }, [i18n.tui.added, loadTasks, history]);
+    const markTaskDone = useCallback(async (task) => {
+        const command = new MoveTaskCommand({
+            taskId: task.id,
+            fromStatus: task.status,
+            toStatus: 'done',
+            fromWaitingFor: task.waitingFor,
+            toWaitingFor: null,
+            description: fmt(i18n.tui.completed, { title: task.title }),
+        });
+        await history.execute(command);
+        setMessage(fmt(i18n.tui.completed, { title: task.title }));
+        await loadTasks();
+    }, [i18n.tui.completed, loadTasks, history]);
+    const moveTaskToStatus = useCallback(async (task, status) => {
+        const command = new MoveTaskCommand({
+            taskId: task.id,
+            fromStatus: task.status,
+            toStatus: status,
+            fromWaitingFor: task.waitingFor,
+            toWaitingFor: null,
+            description: fmt(i18n.tui.movedTo, { title: task.title, status: i18n.status[status] }),
+        });
+        await history.execute(command);
+        setMessage(fmt(i18n.tui.movedTo, { title: task.title, status: i18n.status[status] }));
+        await loadTasks();
+    }, [i18n.tui.movedTo, i18n.status, loadTasks, history]);
+    const moveTaskToWaiting = useCallback(async (task, waitingFor) => {
+        const command = new MoveTaskCommand({
+            taskId: task.id,
+            fromStatus: task.status,
+            toStatus: 'waiting',
+            fromWaitingFor: task.waitingFor,
+            toWaitingFor: waitingFor.trim(),
+            description: fmt(i18n.tui.movedToWaiting, { title: task.title, person: waitingFor.trim() }),
+        });
+        await history.execute(command);
+        setMessage(fmt(i18n.tui.movedToWaiting, { title: task.title, person: waitingFor.trim() }));
+        await loadTasks();
+    }, [i18n.tui.movedToWaiting, loadTasks, history]);
+    const makeTaskProject = useCallback(async (task) => {
+        const command = new ConvertToProjectCommand({
+            taskId: task.id,
+            originalStatus: task.status,
+            description: fmt(i18n.tui.madeProject || 'Made project: {title}', { title: task.title }),
+        });
+        await history.execute(command);
+        setMessage(fmt(i18n.tui.madeProject || 'Made project: {title}', { title: task.title }));
+        await loadTasks();
+    }, [i18n.tui.madeProject, loadTasks, history]);
+    const deleteTask = useCallback(async (task) => {
+        const command = new DeleteTaskCommand({
+            task,
+            description: fmt(i18n.tui.deleted || 'Deleted: "{title}"', { title: task.title }),
+        });
+        await history.execute(command);
+        setMessage(fmt(i18n.tui.deleted || 'Deleted: "{title}"', { title: task.title }));
+        await loadTasks();
+    }, [i18n.tui.deleted, loadTasks, history]);
+    const linkTaskToProject = useCallback(async (task, project) => {
+        const command = new LinkTaskCommand({
+            taskId: task.id,
+            fromParentId: task.parentId,
+            toParentId: project.id,
+            description: fmt(i18n.tui.linkedToProject || 'Linked "{title}" to {project}', { title: task.title, project: project.title }),
+        });
+        await history.execute(command);
+        setMessage(fmt(i18n.tui.linkedToProject || 'Linked "{title}" to {project}', { title: task.title, project: project.title }));
+        await loadTasks();
+    }, [i18n.tui.linkedToProject, loadTasks, history]);
+    const handleInputSubmit = async (value) => {
+        // Handle search mode submit
+        if (mode === 'search') {
+            if (searchResults.length > 0) {
+                const task = searchResults[searchResultIndex];
+                navigateToTask(task);
+            }
+            else {
+                setMode('normal');
+            }
+            setSearchQuery('');
+            setSearchResults([]);
+            setSearchResultIndex(0);
+            return;
+        }
+        if (mode === 'move-to-waiting' && taskToWaiting) {
+            if (value.trim()) {
+                await moveTaskToWaiting(taskToWaiting, value);
+            }
+            setTaskToWaiting(null);
+            setMode('normal');
+            setInputValue('');
+            return;
+        }
+        if (mode === 'add' || mode === 'add-to-project') {
+            if (value.trim()) {
+                if (mode === 'add-to-project' && selectedProject) {
+                    await addTask(value, selectedProject.id, contextFilter && contextFilter !== '' ? contextFilter : null);
+                    await loadProjectTasks(selectedProject.id);
+                    setMode('project-detail');
+                }
+                else {
+                    await addTask(value, undefined, contextFilter && contextFilter !== '' ? contextFilter : null);
+                    setMode('normal');
+                }
+            }
+            else {
+                setMode(mode === 'add-to-project' ? 'project-detail' : 'normal');
+            }
+            setInputValue('');
+            return;
+        }
+        if (mode === 'add-context') {
+            if (value.trim()) {
+                const newContext = value.trim().toLowerCase().replace(/^@/, '');
+                addContext(newContext);
+                setAvailableContexts(getContexts());
+            }
+            setInputValue('');
+            setContextSelectIndex(0);
+            setMode('normal');
+            return;
+        }
+    };
+    useInput((input, key) => {
+        // Handle help mode - let HelpModal handle its own input
+        if (mode === 'help') {
+            return;
+        }
+        // Handle input modes
+        if (mode === 'add' || mode === 'add-to-project' || mode === 'add-comment' || mode === 'move-to-waiting' || mode === 'add-context') {
+            if (key.escape) {
+                setInputValue('');
+                if (mode === 'add-to-project') {
+                    setMode('project-detail');
+                }
+                else if (mode === 'add-context') {
+                    setMode('set-context');
+                }
+                else {
+                    setMode('normal');
+                }
+            }
+            return;
+        }
+        // Handle search mode
+        if (mode === 'search') {
+            if (key.escape) {
+                setSearchQuery('');
+                setSearchResults([]);
+                setSearchResultIndex(0);
+                setMode('normal');
+                return;
+            }
+            // Navigate search results with arrow keys, Ctrl+j/k, or Ctrl+n/p
+            if (key.downArrow || (key.ctrl && (input === 'j' || input === 'n'))) {
+                setSearchResultIndex((prev) => prev < searchResults.length - 1 ? prev + 1 : 0);
+                return;
+            }
+            if (key.upArrow || (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 confirm-delete
+        if (mode === 'confirm-delete' && taskToDelete) {
+            if (input === 'y' || input === 'Y') {
+                deleteTask(taskToDelete).then(() => {
+                    if (selectedTaskIndex >= currentTasks.length - 1) {
+                        setSelectedTaskIndex(Math.max(0, selectedTaskIndex - 1));
+                    }
+                });
+                setTaskToDelete(null);
+                setMode('normal');
+                return;
+            }
+            if (input === 'n' || input === 'N' || key.escape) {
+                setTaskToDelete(null);
+                setMode('normal');
+                return;
+            }
+            return;
+        }
+        // Handle context-filter mode
+        if (mode === 'context-filter') {
+            if (key.escape) {
+                setContextSelectIndex(0);
+                setMode('normal');
+                return;
+            }
+            const contextOptions = ['all', 'none', ...availableContexts];
+            if (key.upArrow || input === 'k') {
+                setContextSelectIndex((prev) => (prev > 0 ? prev - 1 : contextOptions.length - 1));
+                return;
+            }
+            if (key.downArrow || input === 'j') {
+                setContextSelectIndex((prev) => (prev < contextOptions.length - 1 ? prev + 1 : 0));
+                return;
+            }
+            if (key.return) {
+                const selected = contextOptions[contextSelectIndex];
+                if (selected === 'all')
+                    setContextFilter(null);
+                else if (selected === 'none')
+                    setContextFilter('');
+                else
+                    setContextFilter(selected);
+                setContextSelectIndex(0);
+                setMode('normal');
+                return;
+            }
+            return;
+        }
+        // Handle set-context mode
+        if (mode === 'set-context') {
+            if (key.escape) {
+                setContextSelectIndex(0);
+                setMode('normal');
+                return;
+            }
+            const contextOptions = ['clear', ...availableContexts, 'new'];
+            if (key.upArrow || input === 'k') {
+                setContextSelectIndex((prev) => (prev > 0 ? prev - 1 : contextOptions.length - 1));
+                return;
+            }
+            if (key.downArrow || input === 'j') {
+                setContextSelectIndex((prev) => (prev < contextOptions.length - 1 ? prev + 1 : 0));
+                return;
+            }
+            if (key.return && currentTasks.length > 0) {
+                const selected = contextOptions[contextSelectIndex];
+                if (selected === 'new') {
+                    setMode('add-context');
+                    setInputValue('');
+                    return;
+                }
+                // TODO: implement setTaskContext
+                setContextSelectIndex(0);
+                setMode('normal');
+                return;
+            }
+            return;
+        }
+        // Handle select-project mode
+        if (mode === 'select-project') {
+            if (key.escape) {
+                setTaskToLink(null);
+                setProjectSelectIndex(0);
+                setMode('normal');
+                return;
+            }
+            if (key.upArrow || input === 'k') {
+                setProjectSelectIndex((prev) => (prev > 0 ? prev - 1 : tasks.projects.length - 1));
+                return;
+            }
+            if (key.downArrow || input === 'j') {
+                setProjectSelectIndex((prev) => (prev < tasks.projects.length - 1 ? prev + 1 : 0));
+                return;
+            }
+            if (key.return && taskToLink && tasks.projects.length > 0) {
+                const project = tasks.projects[projectSelectIndex];
+                linkTaskToProject(taskToLink, project);
+                setTaskToLink(null);
+                setProjectSelectIndex(0);
+                setMode('normal');
+                return;
+            }
+            return;
+        }
+        // Handle project-detail mode
+        if (mode === 'project-detail') {
+            if (key.escape || key.backspace || input === 'b' || input === 'h' || key.leftArrow) {
+                setMode('normal');
+                setSelectedProject(null);
+                setProjectTasks([]);
+                setSelectedTaskIndex(0);
+                setPaneFocus('tabs');
+                return;
+            }
+            if (input === 'a') {
+                setMode('add-to-project');
+                return;
+            }
+            if (key.upArrow || input === 'k') {
+                setSelectedTaskIndex((prev) => (prev > 0 ? prev - 1 : projectTasks.length - 1));
+                return;
+            }
+            if (key.downArrow || input === 'j') {
+                setSelectedTaskIndex((prev) => (prev < projectTasks.length - 1 ? prev + 1 : 0));
+                return;
+            }
+            if (input === 'd' && projectTasks.length > 0) {
+                const task = projectTasks[selectedTaskIndex];
+                markTaskDone(task).then(() => {
+                    if (selectedProject)
+                        loadProjectTasks(selectedProject.id);
+                });
+                return;
+            }
+            return;
+        }
+        if (message)
+            setMessage(null);
+        // Global keys
+        if (input === 'q' || (key.ctrl && input === 'c')) {
+            exit();
+            return;
+        }
+        if (input === '?') {
+            setMode('help');
+            return;
+        }
+        if (input === 'a') {
+            setMode('add');
+            return;
+        }
+        if (input === '@') {
+            setContextSelectIndex(0);
+            setMode('context-filter');
+            return;
+        }
+        if (input === '/') {
+            setMode('search');
+            return;
+        }
+        if (input === 'T' && onOpenSettings) {
+            onOpenSettings('theme-select');
+            return;
+        }
+        if (input === 'V' && onOpenSettings) {
+            onOpenSettings('mode-select');
+            return;
+        }
+        if (input === 'L' && onOpenSettings) {
+            onOpenSettings('lang-select');
+            return;
+        }
+        // Number keys for quick tab switch
+        if (input >= '1' && input <= '6') {
+            const idx = parseInt(input) - 1;
+            setCurrentTabIndex(idx);
+            setSelectedTaskIndex(0);
+            setPaneFocus('tabs');
+            return;
+        }
+        // Navigation
+        if (paneFocus === 'tabs') {
+            if (key.upArrow || input === 'k') {
+                setCurrentTabIndex((prev) => (prev > 0 ? prev - 1 : TABS.length - 1));
+                setSelectedTaskIndex(0);
+                return;
+            }
+            if (key.downArrow || input === 'j') {
+                setCurrentTabIndex((prev) => (prev < TABS.length - 1 ? prev + 1 : 0));
+                setSelectedTaskIndex(0);
+                return;
+            }
+            if (key.rightArrow || input === 'l' || key.return) {
+                if (currentTab === 'projects' && currentTasks.length > 0) {
+                    const project = currentTasks[selectedTaskIndex];
+                    setSelectedProject(project);
+                    loadProjectTasks(project.id);
+                    setMode('project-detail');
+                    setSelectedTaskIndex(0);
+                }
+                else if (currentTasks.length > 0) {
+                    setPaneFocus('tasks');
+                }
+                return;
+            }
+        }
+        if (paneFocus === 'tasks') {
+            if (key.escape || key.leftArrow || input === 'h') {
+                setPaneFocus('tabs');
+                return;
+            }
+            if (key.upArrow || input === 'k') {
+                setSelectedTaskIndex((prev) => (prev > 0 ? prev - 1 : currentTasks.length - 1));
+                return;
+            }
+            if (key.downArrow || input === 'j') {
+                setSelectedTaskIndex((prev) => (prev < currentTasks.length - 1 ? prev + 1 : 0));
+                return;
+            }
+            // Task actions
+            if (currentTasks.length > 0) {
+                const task = currentTasks[selectedTaskIndex];
+                // Mark done
+                if (input === 'd' && currentTab !== 'done') {
+                    markTaskDone(task).then(() => {
+                        if (selectedTaskIndex >= currentTasks.length - 1) {
+                            setSelectedTaskIndex(Math.max(0, selectedTaskIndex - 1));
+                        }
+                    });
+                    return;
+                }
+                // Move to next
+                if (input === 'n' && currentTab !== 'next' && currentTab !== 'projects' && currentTab !== 'done') {
+                    moveTaskToStatus(task, 'next').then(() => {
+                        if (selectedTaskIndex >= currentTasks.length - 1) {
+                            setSelectedTaskIndex(Math.max(0, selectedTaskIndex - 1));
+                        }
+                    });
+                    return;
+                }
+                // Move to someday
+                if (input === 's' && currentTab !== 'someday' && currentTab !== 'projects' && currentTab !== 'done') {
+                    moveTaskToStatus(task, 'someday').then(() => {
+                        if (selectedTaskIndex >= currentTasks.length - 1) {
+                            setSelectedTaskIndex(Math.max(0, selectedTaskIndex - 1));
+                        }
+                    });
+                    return;
+                }
+                // Move to waiting
+                if (input === 'w' && currentTab !== 'waiting' && currentTab !== 'projects' && currentTab !== 'done') {
+                    setTaskToWaiting(task);
+                    setMode('move-to-waiting');
+                    return;
+                }
+                // Move to inbox
+                if (input === 'i' && currentTab !== 'inbox' && currentTab !== 'projects' && currentTab !== 'done') {
+                    moveTaskToStatus(task, 'inbox').then(() => {
+                        if (selectedTaskIndex >= currentTasks.length - 1) {
+                            setSelectedTaskIndex(Math.max(0, selectedTaskIndex - 1));
+                        }
+                    });
+                    return;
+                }
+                // Make project
+                if (input === 'p' && currentTab !== 'projects' && currentTab !== 'done') {
+                    makeTaskProject(task).then(() => {
+                        if (selectedTaskIndex >= currentTasks.length - 1) {
+                            setSelectedTaskIndex(Math.max(0, selectedTaskIndex - 1));
+                        }
+                    });
+                    return;
+                }
+                // Link to project
+                if (input === 'P' && currentTab !== 'projects' && currentTab !== 'done' && tasks.projects.length > 0) {
+                    setTaskToLink(task);
+                    setProjectSelectIndex(0);
+                    setMode('select-project');
+                    return;
+                }
+                // Delete
+                if (input === 'D' && currentTab !== 'projects') {
+                    setTaskToDelete(task);
+                    setMode('confirm-delete');
+                    return;
+                }
+            }
+            // Undo
+            if (input === 'u') {
+                history.undo().then((didUndo) => {
+                    if (didUndo) {
+                        setMessage(fmt(i18n.tui.undone, { action: history.undoDescription || '' }));
+                        loadTasks();
+                    }
+                    else {
+                        setMessage(i18n.tui.nothingToUndo);
+                    }
+                });
+                return;
+            }
+        }
+        // Refresh
+        if (input === 'r' && !key.ctrl) {
+            loadTasks();
+            setMessage(i18n.tui.refreshed);
+            return;
+        }
+    });
+    const tursoEnabled = isTursoEnabled();
+    // Get parent project for display
+    const getParentProject = (parentId) => {
+        if (!parentId)
+            return undefined;
+        return tasks.projects.find(p => p.id === parentId);
+    };
+    // Help modal overlay
+    if (mode === 'help') {
+        return (_jsx(Box, { flexDirection: "column", padding: 1, children: _jsx(HelpModal, { onClose: () => setMode('normal') }) }));
+    }
+    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: "FLOQ" }), _jsxs(Text, { color: theme.colors.textMuted, children: [" v", VERSION] }), _jsx(Text, { color: tursoEnabled ? theme.colors.accent : theme.colors.textMuted, children: tursoEnabled ? ' [TURSO]' : ' [LOCAL]' }), contextFilter !== null && (_jsxs(Text, { color: theme.colors.accent, children: [' ', "@", contextFilter === '' ? 'none' : contextFilter] }))] }), _jsx(Text, { color: theme.colors.textMuted, children: "?=help q=quit" })] }), mode === 'context-filter' ? (_jsxs(Box, { flexDirection: "column", children: [_jsx(Text, { color: theme.colors.secondary, bold: true, children: "Filter by context" }), _jsx(Box, { flexDirection: "column", marginTop: 1, children: ['all', 'none', ...availableContexts].map((ctx, index) => {
+                            const label = ctx === 'all' ? 'All' : ctx === 'none' ? 'No context' : `@${ctx}`;
+                            return (_jsxs(Text, { color: index === contextSelectIndex ? theme.colors.textSelected : theme.colors.text, bold: index === contextSelectIndex, children: [index === contextSelectIndex ? '▶ ' : '  ', label] }, ctx));
+                        }) })] })) : mode === 'select-project' && taskToLink ? (_jsxs(Box, { flexDirection: "column", children: [_jsxs(Text, { color: theme.colors.secondary, bold: true, children: [i18n.tui.selectProject || 'Select project', ": ", taskToLink.title] }), _jsx(Box, { flexDirection: "column", marginTop: 1, children: tasks.projects.map((project, index) => (_jsxs(Text, { color: index === projectSelectIndex ? theme.colors.textSelected : theme.colors.text, bold: index === projectSelectIndex, children: [index === projectSelectIndex ? '▶ ' : '  ', project.title] }, project.id))) })] })) : mode === 'confirm-delete' && taskToDelete ? (_jsx(Box, { flexDirection: "column", children: _jsx(Text, { color: theme.colors.accent, bold: true, children: fmt(i18n.tui.deleteConfirm || 'Delete "{title}"? (y/n)', { title: taskToDelete.title }) }) })) : (_jsxs(Box, { flexDirection: "row", children: [_jsx(Box, { marginRight: 2, children: _jsx(TitledBoxInline, { title: mode === 'project-detail' && selectedProject ? selectedProject.title : 'GTD', width: leftPaneWidth, minHeight: 8, isActive: paneFocus === 'tabs' && mode !== 'project-detail', children: mode === 'project-detail' ? (_jsx(Text, { color: theme.colors.textMuted, children: "\u2190 Esc/b: back" })) : (TABS.map((tab, index) => {
+                                const isSelected = index === currentTabIndex;
+                                const count = tasks[tab].length;
+                                return (_jsxs(Text, { color: isSelected && paneFocus === 'tabs' ? theme.colors.textSelected : theme.colors.text, bold: isSelected, children: [isSelected ? '▶ ' : '  ', index + 1, ":", getTabLabel(tab), " (", count, ")"] }, tab));
+                            })) }) }), _jsx(Box, { flexGrow: 1, children: _jsx(TitledBoxInline, { title: mode === 'project-detail' ? (i18n.tui.projectTasks || 'Tasks') : getTabLabel(currentTab), width: rightPaneWidth, minHeight: 12, isActive: paneFocus === 'tasks' || mode === 'project-detail', children: currentTasks.length === 0 ? (_jsx(Text, { color: theme.colors.textMuted, italic: true, children: i18n.tui.noTasks })) : (currentTasks.map((task, index) => {
+                                const isSelected = (paneFocus === 'tasks' || mode === 'project-detail') && index === selectedTaskIndex;
+                                const parentProject = getParentProject(task.parentId);
+                                const progress = currentTab === 'projects' ? projectProgress[task.id] : undefined;
+                                // Calculate available width for title
+                                const prefix = isSelected ? '▶ ' : '  ';
+                                const suffix = [
+                                    task.waitingFor ? ` (${task.waitingFor})` : '',
+                                    task.context ? ` @${task.context}` : '',
+                                    parentProject ? ` [${parentProject.title}]` : '',
+                                    progress ? ` [${progress.completed}/${progress.total}]` : '',
+                                ].join('');
+                                const availableWidth = rightPaneWidth - 6 - getDisplayWidth(prefix) - getDisplayWidth(suffix);
+                                const displayTitle = truncateString(task.title, availableWidth);
+                                return (_jsxs(Text, { color: isSelected ? theme.colors.textSelected : theme.colors.text, bold: isSelected, children: [prefix, displayTitle, task.waitingFor && _jsxs(Text, { color: theme.colors.muted, children: [" (", task.waitingFor, ")"] }), task.context && _jsxs(Text, { color: theme.colors.muted, children: [" @", task.context] }), parentProject && _jsxs(Text, { color: theme.colors.muted, children: [" [", parentProject.title, "]"] }), progress && _jsxs(Text, { color: theme.colors.muted, children: [" [", progress.completed, "/", progress.total, "]"] })] }, 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 })] })), 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: "" })] })), mode === 'add-context' && (_jsxs(Box, { marginTop: 1, children: [_jsx(Text, { color: theme.colors.secondary, bold: true, children: "New context: " }), _jsx(TextInput, { value: inputValue, onChange: setInputValue, onSubmit: handleInputSubmit, placeholder: "Enter context name..." })] })), mode === 'search' && (_jsx(SearchBar, { value: searchQuery, onChange: handleSearchChange, onSubmit: handleInputSubmit })), mode === 'search' && searchQuery && (_jsx(SearchResults, { results: searchResults, selectedIndex: searchResultIndex, query: searchQuery })), message && mode === 'normal' && (_jsx(Box, { marginTop: 1, children: _jsx(Text, { color: theme.colors.textHighlight, children: message }) })), _jsx(Box, { marginTop: 1, children: _jsx(Text, { color: theme.colors.textMuted, children: mode === 'project-detail'
+                        ? 'j/k=select a=add d=done Esc/b=back /=search'
+                        : paneFocus === 'tabs'
+                            ? 'j/k=select l/Enter=tasks 1-6=tab a=add @=filter /=search'
+                            : 'j/k=select h/Esc=back d=done n=next s=someday w=wait i=inbox p=project P=link D=delete u=undo /=search' }) })] }));
+}