floq 0.6.0 → 0.7.0

package/dist/i18n/en.d.ts

@@ -85,6 +85,16 @@ export declare const en: {
         waitingFor: string;
         refreshed: string;
         footer: string;
+        dqFooter: {
+            tabs: string;
+            tasks: string;
+            projectDetail: string;
+            taskDetail: string;
+        };
+        kanbanFooter: {
+            category: string;
+            tasks: string;
+        };
         noTasks: string;
         tabInbox: string;
         tabNext: string;
@@ -435,6 +445,16 @@ export type TuiTranslations = {
     waitingFor: string;
     refreshed: string;
     footer: string;
+    dqFooter: {
+        tabs: string;
+        tasks: string;
+        projectDetail: string;
+        taskDetail: string;
+    };
+    kanbanFooter: {
+        category: string;
+        tasks: string;
+    };
     noTasks: string;
     tabInbox: string;
     tabNext: string;

package/dist/i18n/en.js

@@ -89,7 +89,18 @@ export const en = {
         movedToWaiting: 'Moved "{title}" to Waiting (for {person})',
         waitingFor: 'Waiting for: ',
         refreshed: 'Refreshed',
-        footer: 'a=add d=done D=delete n=next s=someday w=waiting i=inbox p=project P=link',
+        footer: 'a=add d=done D=delete n=next s=someday w=waiting i=inbox p=project P=link c=context',
+        // DQ/Mario style footers
+        dqFooter: {
+            tabs: 'j/k=select l/Enter=tasks 1-6=tab a=add @=filter /=search',
+            tasks: 'j/k=select Enter=detail h/Esc=back d=done n=next s=someday w=wait i=inbox c=context p=project P=link D=delete u=undo /=search',
+            projectDetail: 'j/k=select a=add d=done Esc/b=back /=search',
+            taskDetail: 'j/k=select c/i=add comment P=link D=delete comment Esc/b=back',
+        },
+        kanbanFooter: {
+            category: 'j/k=select l/Enter=tasks a=add @=filter /=search',
+            tasks: 'j/k=select h/Esc=back d=done m=move a=add u=undo /=search',
+        },
         noTasks: 'No tasks',
         // Tab labels
         tabInbox: 'Inbox',

package/dist/i18n/ja.js

@@ -89,7 +89,18 @@ export const ja = {
         movedToWaiting: '「{title}」を連絡待ち({person})に移動しました',
         waitingFor: '待機相手: ',
         refreshed: '更新しました',
-        footer: 'a=追加 d=完了 D=削除 n=次 s=いつか w=待ち i=Inbox p=プロジェクト化 P=紐づけ',
+        footer: 'a=追加 d=完了 D=削除 n=次 s=いつか w=待ち i=Inbox p=プロジェクト化 P=紐づけ c=コンテキスト',
+        // DQ/Mario style footers
+        dqFooter: {
+            tabs: 'j/k=選択 l/Enter=タスク 1-6=タブ a=追加 @=フィルター /=検索',
+            tasks: 'j/k=選択 Enter=詳細 h/Esc=戻る d=完了 n=次 s=いつか w=待ち i=inbox c=コンテキスト p=プロジェクト化 P=紐づけ D=削除 u=戻す /=検索',
+            projectDetail: 'j/k=選択 a=追加 d=完了 Esc/b=戻る /=検索',
+            taskDetail: 'j/k=選択 c/i=コメント追加 P=紐づけ D=コメント削除 Esc/b=戻る',
+        },
+        kanbanFooter: {
+            category: 'j/k=選択 l/Enter=タスク a=追加 @=フィルター /=検索',
+            tasks: 'j/k=選択 h/Esc=戻る d=完了 m=移動 a=追加 u=戻す /=検索',
+        },
         noTasks: 'タスクなし',
         // Tab labels
         tabInbox: 'Inbox',

package/dist/ui/App.js

@@ -20,7 +20,9 @@ import { ThemeProvider, useTheme, getTheme } from './theme/index.js';
 import { getThemeName, getViewMode, setThemeName, setViewMode, setLocale, isTursoEnabled, getContexts, addContext, getSplashDuration } from '../config.js';
 import { KanbanBoard } from './components/KanbanBoard.js';
 import { KanbanDQ } from './components/KanbanDQ.js';
+import { KanbanMario } from './components/KanbanMario.js';
 import { GtdDQ } from './components/GtdDQ.js';
+import { GtdMario } from './components/GtdMario.js';
 import { VERSION } from '../version.js';
 import { HistoryProvider, useHistory, CreateTaskCommand, DeleteTaskCommand, MoveTaskCommand, LinkTaskCommand, ConvertToProjectCommand, CreateCommentCommand, DeleteCommentCommand, SetContextCommand, } from './history/index.js';
 const TABS = ['inbox', 'next', 'waiting', 'someday', 'projects', 'done'];
@@ -51,6 +53,7 @@ export function App() {
     };
     const currentTheme = getTheme(themeName);
     const useDQStyle = currentTheme.uiStyle === 'titled-box';
+    const useMarioStyle = currentTheme.uiStyle === 'mario-block';
     // Show splash screen (all themes, configurable duration)
     if (showSplash) {
         return (_jsx(ThemeProvider, { themeName: themeName, children: _jsx(SplashScreen, { onComplete: () => setShowSplash(false), duration: splashDuration, viewMode: viewMode }) }));
@@ -65,7 +68,7 @@ export function App() {
     if (settingsMode === 'lang-select') {
         return (_jsx(ThemeProvider, { themeName: themeName, children: _jsx(LanguageSelector, { onSelect: handleLocaleSelect, onCancel: handleSettingsCancel }) }));
     }
-    return (_jsx(ThemeProvider, { themeName: themeName, children: _jsx(HistoryProvider, { children: viewMode === 'kanban' ? (useDQStyle ? (_jsx(KanbanDQ, { onOpenSettings: setSettingsMode })) : (_jsx(KanbanBoard, { onOpenSettings: setSettingsMode }))) : (useDQStyle ? (_jsx(GtdDQ, { onOpenSettings: setSettingsMode })) : (_jsx(AppContent, { onOpenSettings: setSettingsMode }))) }) }));
+    return (_jsx(ThemeProvider, { themeName: themeName, children: _jsx(HistoryProvider, { children: viewMode === 'kanban' ? (useMarioStyle ? (_jsx(KanbanMario, { onOpenSettings: setSettingsMode })) : useDQStyle ? (_jsx(KanbanDQ, { onOpenSettings: setSettingsMode })) : (_jsx(KanbanBoard, { onOpenSettings: setSettingsMode }))) : (useMarioStyle ? (_jsx(GtdMario, { onOpenSettings: setSettingsMode })) : useDQStyle ? (_jsx(GtdDQ, { onOpenSettings: setSettingsMode })) : (_jsx(AppContent, { onOpenSettings: setSettingsMode }))) }) }));
 }
 function AppContent({ onOpenSettings }) {
     const theme = useTheme();

package/dist/ui/SplashScreen.js

@@ -52,6 +52,40 @@ const DQ_BORDER = {
     vertical: '│',
 };
 const TAGLINE = 'Flow your tasks, clear your mind';
+// Mario/Nintendo style splash - SFC boot screen inspired
+const MARIO_LOGO = [
+    '          ★  ★  ★  ★  ★  ★  ★  ★  ★',
+    '',
+    '    ████████ ██       ██████   ██████',
+    '    ██       ██      ██    ██ ██    ██',
+    '    ██████   ██      ██    ██ ██    ██',
+    '    ██       ██      ██    ██ ██ ▄▄ ██',
+    '    ██       ███████  ██████   ██████',
+    '',
+    '          ★  ★  ★  ★  ★  ★  ★  ★  ★',
+];
+const MARIO_QUOTES_JA = [
+    'イッツァミー！タスクマネージャー！',
+    'マンマミーア！タスクがいっぱいだ！',
+    'レッツァゴー！',
+    'ヤッフー！',
+    'スーパータスククリア！',
+    'コインをゲット！',
+    '1UPキノコ！',
+    'ファイアフラワー！',
+    'スターパワー！',
+];
+const MARIO_QUOTES_EN = [
+    "It's-a me! Task Manager!",
+    'Mamma mia! So many tasks!',
+    "Let's-a go!",
+    'Yahoo!',
+    'Super Task Clear!',
+    'Got a coin!',
+    '1-UP Mushroom!',
+    'Fire Flower!',
+    'Star Power!',
+];
 // Dragon Quest famous quotes for splash screen
 const DQ_QUOTES_JA = [
     'へんじがない。ただのしかばねのようだ。',
@@ -84,12 +118,17 @@ export function SplashScreen({ onComplete, duration = 1500, viewMode = 'gtd' })
     const theme = useTheme();
     const i18n = t();
     const isDqStyle = theme.uiStyle === 'titled-box';
-    const isDosStyle = theme.name !== 'modern';
+    const isMarioStyle = theme.uiStyle === 'mario-block';
+    const isDosStyle = theme.name !== 'modern' && !isMarioStyle;
     const logo = isDosStyle ? LOGO_DOS : LOGO_MODERN;
     const [filled, empty] = theme.style.loadingChars;
     // Pick a random quote (stable across re-renders)
     const [randomQuote] = useState(() => {
         const isJapanese = i18n.splash?.welcome === 'ようこそ！';
+        if (isMarioStyle) {
+            const quotes = isJapanese ? MARIO_QUOTES_JA : MARIO_QUOTES_EN;
+            return quotes[Math.floor(Math.random() * quotes.length)];
+        }
         const quotes = isJapanese ? DQ_QUOTES_JA : DQ_QUOTES_EN;
         return quotes[Math.floor(Math.random() * quotes.length)];
     });
@@ -118,9 +157,9 @@ export function SplashScreen({ onComplete, duration = 1500, viewMode = 'gtd' })
         const taglineTimer = setTimeout(() => {
             setShowTagline(true);
         }, 600);
-        // Blink effect for DQ style or wait-for-key mode
+        // Blink effect for DQ style, Mario style, or wait-for-key mode
         let blinkInterval = null;
-        if (isDqStyle || waitForKeyPress) {
+        if (isDqStyle || isMarioStyle || waitForKeyPress) {
             blinkInterval = setInterval(() => {
                 setBlinkVisible((prev) => !prev);
             }, 500);
@@ -140,7 +179,11 @@ export function SplashScreen({ onComplete, duration = 1500, viewMode = 'gtd' })
             if (blinkInterval)
                 clearInterval(blinkInterval);
         };
-    }, [onComplete, duration, isDqStyle, waitForKeyPress]);
+    }, [onComplete, duration, isDqStyle, isMarioStyle, waitForKeyPress]);
+    // Mario / Nintendo style splash (SFC boot screen inspired)
+    if (isMarioStyle) {
+        return (_jsxs(Box, { flexDirection: "column", alignItems: "center", justifyContent: "center", padding: 2, children: [_jsx(Box, { marginBottom: 1, children: _jsx(Text, { color: theme.colors.secondary, children: "\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501" }) }), _jsx(Box, { flexDirection: "column", alignItems: "center", marginBottom: 1, children: MARIO_LOGO.map((line, index) => (_jsx(Text, { color: index === 0 || index === 8 ? theme.colors.secondary : theme.colors.primary, bold: true, children: line }, index))) }), _jsx(Box, { marginBottom: 1, children: _jsx(Text, { color: theme.colors.text, bold: true, children: "\uFF5E SUPER TASK MANAGER \uFF5E" }) }), _jsx(Box, { marginBottom: 1, children: _jsxs(Text, { color: theme.colors.accent, children: ["\uD83C\uDF44 ", randomQuote] }) }), _jsx(Box, { marginBottom: 1, children: _jsx(Text, { color: theme.colors.secondary, children: "\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501" }) }), _jsx(Box, { marginTop: 1, children: _jsx(Text, { color: theme.colors.textMuted, children: blinkVisible ? '- PRESS START -' : '               ' }) }), _jsxs(Box, { marginTop: 2, flexDirection: "column", alignItems: "center", children: [_jsxs(Text, { color: theme.colors.textMuted, children: ["VER ", VERSION] }), _jsx(Text, { color: theme.colors.textMuted, children: "\u00A9 2026 polidog/PartyHard Inc." })] })] }));
+    }
     // Dragon Quest style splash
     if (isDqStyle) {
         const boxWidth = 40;

package/dist/ui/components/GtdDQ.js

@@ -7,13 +7,41 @@ 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 { isTursoEnabled, getContexts, addContext, getLocale } from '../../config.js';
+import { useHistory, CreateTaskCommand, DeleteTaskCommand, MoveTaskCommand, LinkTaskCommand, ConvertToProjectCommand, CreateCommentCommand, DeleteCommentCommand, SetContextCommand, } 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'];
+// Dragon Quest job classes
+const DQ_JOBS_JA = [
+    'ゆうしゃ',
+    'せんし',
+    'まほうつかい',
+    'そうりょ',
+    'ぶとうか',
+    'とうぞく',
+    'あそびにん',
+    'けんじゃ',
+    'バトルマスター',
+    'パラディン',
+    'レンジャー',
+    'スーパースター',
+];
+const DQ_JOBS_EN = [
+    'Hero',
+    'Warrior',
+    'Mage',
+    'Priest',
+    'Martial Artist',
+    'Thief',
+    'Gadabout',
+    'Sage',
+    'Battle Master',
+    'Paladin',
+    'Ranger',
+    'Superstar',
+];
 // Round border characters
 const BORDER = {
     topLeft: '╭',
@@ -81,6 +109,12 @@ export function GtdDQ({ onOpenSettings }) {
     const { stdout } = useStdout();
     const history = useHistory();
     const i18n = t();
+    // Random job class (stable across re-renders)
+    const [jobClass] = useState(() => {
+        const isJapanese = getLocale() === 'ja';
+        const jobs = isJapanese ? DQ_JOBS_JA : DQ_JOBS_EN;
+        return jobs[Math.floor(Math.random() * jobs.length)];
+    });
     const [mode, setMode] = useState('normal');
     const [paneFocus, setPaneFocus] = useState('tabs');
     const [currentTabIndex, setCurrentTabIndex] = useState(0);
@@ -325,6 +359,46 @@ export function GtdDQ({ onOpenSettings }) {
         setMessage(fmt(i18n.tui.linkedToProject || 'Linked "{title}" to {project}', { title: task.title, project: project.title }));
         await loadTasks();
     }, [i18n.tui.linkedToProject, loadTasks, history]);
+    const addCommentToTask = useCallback(async (task, content) => {
+        const commentId = uuidv4();
+        const command = new CreateCommentCommand({
+            comment: {
+                id: commentId,
+                taskId: task.id,
+                content: content.trim(),
+                createdAt: new Date(),
+            },
+            description: i18n.tui.commentAdded || 'Comment added',
+        });
+        await history.execute(command);
+        setMessage(i18n.tui.commentAdded || 'Comment added');
+        await loadTaskComments(task.id);
+    }, [history, i18n.tui.commentAdded, loadTaskComments]);
+    const deleteComment = useCallback(async (comment) => {
+        const command = new DeleteCommentCommand({
+            comment,
+            description: i18n.tui.commentDeleted || 'Comment deleted',
+        });
+        await history.execute(command);
+        setMessage(i18n.tui.commentDeleted || 'Comment deleted');
+        if (selectedTask) {
+            await loadTaskComments(selectedTask.id);
+        }
+    }, [i18n.tui.commentDeleted, loadTaskComments, selectedTask, history]);
+    const setTaskContext = useCallback(async (task, context) => {
+        const description = context
+            ? fmt(i18n.tui.context?.contextSet || 'Set context @{context} for "{title}"', { context, title: task.title })
+            : fmt(i18n.tui.context?.contextCleared || 'Cleared context for "{title}"', { title: task.title });
+        const command = new SetContextCommand({
+            taskId: task.id,
+            fromContext: task.context,
+            toContext: context,
+            description,
+        });
+        await history.execute(command);
+        setMessage(description);
+        await loadTasks();
+    }, [i18n.tui.context, loadTasks, history]);
     const handleInputSubmit = async (value) => {
         // Handle search mode submit
         if (mode === 'search') {
@@ -340,6 +414,15 @@ export function GtdDQ({ onOpenSettings }) {
             setSearchResultIndex(0);
             return;
         }
+        // Handle add-comment mode
+        if (mode === 'add-comment' && selectedTask) {
+            if (value.trim()) {
+                await addCommentToTask(selectedTask, value);
+            }
+            setInputValue('');
+            setMode('task-detail');
+            return;
+        }
         if (mode === 'move-to-waiting' && taskToWaiting) {
             if (value.trim()) {
                 await moveTaskToWaiting(taskToWaiting, value);
@@ -394,12 +477,57 @@ export function GtdDQ({ onOpenSettings }) {
                 else if (mode === 'add-context') {
                     setMode('set-context');
                 }
+                else if (mode === 'add-comment') {
+                    setMode('task-detail');
+                }
                 else {
                     setMode('normal');
                 }
             }
             return;
         }
+        // Handle task-detail mode
+        if (mode === 'task-detail') {
+            if (key.escape || input === 'b' || input === 'h' || key.leftArrow) {
+                setSelectedTask(null);
+                setTaskComments([]);
+                setSelectedCommentIndex(0);
+                setMode('normal');
+                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;
+            }
+            // Add comment
+            if (input === 'c' || input === 'i') {
+                setMode('add-comment');
+                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;
+            }
+            // Link to project (P key)
+            if (input === 'P' && tasks.projects.length > 0) {
+                setTaskToLink(selectedTask);
+                setProjectSelectIndex(0);
+                setMode('select-project');
+                return;
+            }
+            return;
+        }
         // Handle search mode
         if (mode === 'search') {
             if (key.escape) {
@@ -493,7 +621,13 @@ export function GtdDQ({ onOpenSettings }) {
                     setInputValue('');
                     return;
                 }
-                // TODO: implement setTaskContext
+                const task = currentTasks[selectedTaskIndex];
+                if (selected === 'clear') {
+                    setTaskContext(task, null);
+                }
+                else {
+                    setTaskContext(task, selected);
+                }
                 setContextSelectIndex(0);
                 setMode('normal');
                 return;
@@ -503,9 +637,10 @@ export function GtdDQ({ onOpenSettings }) {
         // 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;
             }
             if (key.upArrow || input === 'k') {
@@ -518,10 +653,11 @@ export function GtdDQ({ onOpenSettings }) {
             }
             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;
@@ -641,6 +777,14 @@ export function GtdDQ({ onOpenSettings }) {
                 setSelectedTaskIndex((prev) => (prev < currentTasks.length - 1 ? prev + 1 : 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;
+            }
             // Task actions
             if (currentTasks.length > 0) {
                 const task = currentTasks[selectedTaskIndex];
@@ -708,6 +852,12 @@ export function GtdDQ({ onOpenSettings }) {
                     setMode('confirm-delete');
                     return;
                 }
+                // Set context
+                if (input === 'c' && currentTab !== 'projects') {
+                    setContextSelectIndex(0);
+                    setMode('set-context');
+                    return;
+                }
             }
             // Undo
             if (input === 'u') {
@@ -741,10 +891,13 @@ export function GtdDQ({ onOpenSettings }) {
     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) => {
+    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.accent, children: jobClass }), _jsx(Text, { color: theme.colors.text, children: " Lv." }), _jsx(Text, { bold: true, color: theme.colors.secondary, children: Math.floor(tasks.done.length / 5) + 1 }), _jsx(Text, { color: theme.colors.text, children: "  HP " }), _jsx(Text, { bold: true, color: theme.colors.statusNext, children: tasks.inbox.length + tasks.next.length }), _jsxs(Text, { color: theme.colors.textMuted, children: ["/", tasks.inbox.length + tasks.next.length + tasks.waiting.length + tasks.someday.length] }), _jsx(Text, { color: theme.colors.text, children: "  MP " }), _jsx(Text, { bold: true, color: theme.colors.statusWaiting, children: tasks.projects.length }), _jsx(Text, { color: tursoEnabled ? theme.colors.accent : theme.colors.textMuted, children: tursoEnabled ? ' [TURSO]' : '' }), 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) => {
+                        }) })] })) : 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 }) }) })) : (mode === 'task-detail' || mode === 'add-comment') && selectedTask ? (_jsxs(Box, { flexDirection: "column", children: [_jsxs(TitledBoxInline, { title: i18n.tui.taskDetailTitle || 'Task Details', width: terminalWidth - 4, minHeight: 4, isActive: true, children: [_jsx(Text, { color: theme.colors.text, bold: true, children: selectedTask.title }), selectedTask.description && (_jsx(Text, { color: theme.colors.textMuted, children: selectedTask.description })), _jsxs(Box, { children: [_jsxs(Text, { color: theme.colors.secondary, bold: true, children: [i18n.tui.taskDetailStatus || 'Status', ": "] }), _jsxs(Text, { color: theme.colors.accent, children: [i18n.status[selectedTask.status], selectedTask.waitingFor && ` (${selectedTask.waitingFor})`] })] }), _jsxs(Box, { children: [_jsxs(Text, { color: theme.colors.secondary, bold: true, children: [i18n.tui.context?.label || 'Context', ": "] }), _jsx(Text, { color: theme.colors.accent, children: selectedTask.context ? `@${selectedTask.context}` : (i18n.tui.context?.none || 'No context') })] })] }), _jsx(Box, { marginTop: 1, children: _jsx(TitledBoxInline, { title: `${i18n.tui.comments || 'Comments'} (${taskComments.length})`, width: terminalWidth - 4, minHeight: 5, isActive: mode === 'task-detail', 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: "column", marginBottom: 1, children: [_jsxs(Text, { color: theme.colors.textMuted, children: [isSelected ? '▶ ' : '  ', "[", comment.createdAt.toLocaleString(), "]"] }), _jsxs(Text, { color: isSelected ? theme.colors.textSelected : theme.colors.text, bold: isSelected, children: ['  ', comment.content] })] }, comment.id));
+                            })) }) })] })) : (_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));
@@ -765,9 +918,11 @@ export function GtdDQ({ onOpenSettings }) {
                                 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' }) })] }));
+                            : 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 === 'add-comment' && selectedTask && (_jsxs(Box, { marginTop: 1, children: [_jsxs(Text, { color: theme.colors.secondary, bold: true, children: [i18n.tui.addComment || 'Add comment', ": "] }), _jsx(TextInput, { value: inputValue, onChange: setInputValue, onSubmit: handleInputSubmit, placeholder: "Enter comment..." })] })), 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 === 'task-detail'
+                        ? i18n.tui.dqFooter.taskDetail
+                        : mode === 'project-detail'
+                            ? i18n.tui.dqFooter.projectDetail
+                            : paneFocus === 'tabs'
+                                ? i18n.tui.dqFooter.tabs
+                                : i18n.tui.dqFooter.tasks }) })] }));
 }

package/dist/ui/components/GtdMario.d.ts

@@ -0,0 +1,7 @@
+import React from 'react';
+type SettingsMode = 'none' | 'theme-select' | 'mode-select' | 'lang-select';
+interface GtdMarioProps {
+    onOpenSettings?: (mode: SettingsMode) => void;
+}
+export declare function GtdMario({ onOpenSettings }: GtdMarioProps): React.ReactElement;
+export {};