floq 0.2.0 → 0.2.2

package/README.ja.md

@@ -228,7 +228,7 @@ floq config turso --disable
 
 ## テーマ
 
-16種類のテーマが利用可能。`floq config theme` でインタラクティブに選択（j/kで移動）。
+26種類のテーマが利用可能。`floq config theme` でインタラクティブに選択（j/kで移動）。
 
 | テーマ | 説明 |
 |--------|------|
@@ -248,6 +248,16 @@ floq config turso --disable
 | `synthwave` | ネオン80sスタイル |
 | `paper` | 紙とインク風ライト |
 | `coffee` | 暖かみのある茶系 |
+| `nord` | 北欧風ブルーグレー |
+| `dracula` | ダーク＆ビビッドカラー |
+| `monokai` | エディタ定番の鮮やかな配色 |
+| `gruvbox` | レトロな暖色系ダーク |
+| `tokyo-night` | 東京の夜景イメージ |
+| `catppuccin` | パステル系モダン |
+| `ocean` | 深海ブルー |
+| `sakura` | 桜ピンク |
+| `msx` | MSXコンピュータ（TMS9918） |
+| `pc-98` | NEC PC-9801風 |
 
 > **注意**: 背景色はターミナルの設定に依存します。
 

package/README.md

@@ -228,7 +228,7 @@ floq config turso --disable
 
 ## Themes
 
-16 themes available. Use `floq config theme` for interactive selection (j/k to navigate).
+26 themes available. Use `floq config theme` for interactive selection (j/k to navigate).
 
 | Theme | Description |
 |-------|-------------|
@@ -248,6 +248,16 @@ floq config turso --disable
 | `synthwave` | Neon 80s aesthetic |
 | `paper` | Light minimal theme |
 | `coffee` | Warm brown tones |
+| `nord` | Arctic, north-bluish palette |
+| `dracula` | Dark theme with vibrant colors |
+| `monokai` | Classic editor vivid colors |
+| `gruvbox` | Retro groove warm tones |
+| `tokyo-night` | Tokyo night lights inspired |
+| `catppuccin` | Soothing pastel theme |
+| `ocean` | Deep sea blue theme |
+| `sakura` | Cherry blossom pink |
+| `msx` | MSX computer (TMS9918) |
+| `pc-98` | NEC PC-9801 style |
 
 > **Note**: Background colors depend on your terminal settings.
 

package/dist/i18n/en.d.ts

@@ -107,6 +107,7 @@ export declare const en: {
             title: string;
             whatsNewTab: string;
             keybindingsTab: string;
+            infoTab: string;
             tabHint: string;
             navigation: string;
             tabSwitch: string;
@@ -128,6 +129,10 @@ export declare const en: {
             taskDetail: string;
             addComment: string;
             searchTasks: string;
+            settings: string;
+            changeTheme: string;
+            changeViewMode: string;
+            changeLanguage: string;
             other: string;
             showHelp: string;
             quit: string;
@@ -155,6 +160,10 @@ export declare const en: {
             moveRight: string;
             moveLeft: string;
             searchTasks: string;
+            settings: string;
+            changeTheme: string;
+            changeViewMode: string;
+            changeLanguage: string;
             other: string;
             showHelp: string;
             quit: string;
@@ -168,6 +177,10 @@ export declare const en: {
         commentDeleted: string;
         taskDetailTitle: string;
         taskDetailFooter: string;
+        taskDetailStatus: string;
+        deleteConfirm: string;
+        deleted: string;
+        deleteCancelled: string;
         comments: string;
         projectTasks: string;
         search: {
@@ -178,6 +191,21 @@ export declare const en: {
             resultsTitle: string;
             searchTasks: string;
         };
+        info: {
+            settings: string;
+            database: string;
+            paths: string;
+            theme: string;
+            language: string;
+            viewMode: string;
+            dbType: string;
+            dbPath: string;
+            tursoUrl: string;
+            configFile: string;
+            dataDir: string;
+            local: string;
+            turso: string;
+        };
     };
     setup: {
         welcome: {
@@ -232,6 +260,7 @@ export type HelpTranslations = {
     title: string;
     whatsNewTab: string;
     keybindingsTab: string;
+    infoTab: string;
     tabHint: string;
     navigation: string;
     tabSwitch: string;
@@ -253,6 +282,10 @@ export type HelpTranslations = {
     taskDetail: string;
     addComment: string;
     searchTasks: string;
+    settings: string;
+    changeTheme: string;
+    changeViewMode: string;
+    changeLanguage: string;
     other: string;
     showHelp: string;
     quit: string;
@@ -280,6 +313,10 @@ export type KanbanHelpTranslations = {
     moveRight: string;
     moveLeft: string;
     searchTasks: string;
+    settings: string;
+    changeTheme: string;
+    changeViewMode: string;
+    changeLanguage: string;
     other: string;
     showHelp: string;
     quit: string;
@@ -312,6 +349,21 @@ export type SearchTranslations = {
     resultsTitle: string;
     searchTasks: string;
 };
+export type InfoTranslations = {
+    settings: string;
+    database: string;
+    paths: string;
+    theme: string;
+    language: string;
+    viewMode: string;
+    dbType: string;
+    dbPath: string;
+    tursoUrl: string;
+    configFile: string;
+    dataDir: string;
+    local: string;
+    turso: string;
+};
 export type TuiTranslations = {
     title: string;
     helpHint: string;
@@ -342,6 +394,7 @@ export type TuiTranslations = {
     whatsNew: WhatsNewTranslations;
     kanbanHelp: KanbanHelpTranslations;
     search: SearchTranslations;
+    info: InfoTranslations;
     addComment: string;
     noComments: string;
     commentHint: string;
@@ -350,6 +403,10 @@ export type TuiTranslations = {
     commentDeleted: string;
     taskDetailTitle: string;
     taskDetailFooter: string;
+    taskDetailStatus: string;
+    deleteConfirm: string;
+    deleted: string;
+    deleteCancelled: string;
     comments: string;
     projectTasks: string;
 };

package/dist/i18n/en.js

@@ -81,7 +81,7 @@ export const en = {
         movedToWaiting: 'Moved "{title}" to Waiting (for {person})',
         waitingFor: 'Waiting for: ',
         refreshed: 'Refreshed',
-        footer: 'a=add d=done 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',
         noTasks: 'No tasks',
         // Tab labels
         tabInbox: 'Inbox',
@@ -116,6 +116,7 @@ export const en = {
             title: 'Keyboard Shortcuts',
             whatsNewTab: "What's New",
             keybindingsTab: 'Keybindings',
+            infoTab: 'Info',
             tabHint: 'Tab: switch view',
             navigation: 'Navigation',
             tabSwitch: 'Switch tab (5=Projects, 6=Done)',
@@ -137,6 +138,10 @@ export const en = {
             taskDetail: 'View task details',
             addComment: 'Add comment',
             searchTasks: 'Search tasks',
+            settings: 'Settings',
+            changeTheme: 'Change theme',
+            changeViewMode: 'Change view mode',
+            changeLanguage: 'Change language',
             other: 'Other',
             showHelp: 'Show this help',
             quit: 'Quit',
@@ -166,6 +171,10 @@ export const en = {
             moveRight: 'Move task to next column',
             moveLeft: 'Move task to previous column',
             searchTasks: 'Search tasks',
+            settings: 'Settings',
+            changeTheme: 'Change theme',
+            changeViewMode: 'Change view mode',
+            changeLanguage: 'Change language',
             other: 'Other',
             showHelp: 'Show this help',
             quit: 'Quit',
@@ -179,6 +188,10 @@ export const en = {
         commentDeleted: 'Comment deleted',
         taskDetailTitle: 'Task Details',
         taskDetailFooter: 'j/k=select i=comment d=delete P=link b/Esc=back',
+        taskDetailStatus: 'Status',
+        deleteConfirm: 'Delete "{title}"? (y/n)',
+        deleted: 'Deleted: "{title}"',
+        deleteCancelled: 'Delete cancelled',
         comments: 'Comments',
         projectTasks: 'Tasks',
         // Search
@@ -190,6 +203,22 @@ export const en = {
             resultsTitle: 'Search Results',
             searchTasks: 'Search tasks',
         },
+        // Info tab
+        info: {
+            settings: 'Settings',
+            database: 'Database',
+            paths: 'Paths',
+            theme: 'Theme',
+            language: 'Language',
+            viewMode: 'View Mode',
+            dbType: 'Type',
+            dbPath: 'Path',
+            tursoUrl: 'Turso URL',
+            configFile: 'Config File',
+            dataDir: 'Data Directory',
+            local: 'local',
+            turso: 'turso',
+        },
     },
     // Setup wizard
     setup: {

package/dist/i18n/ja.js

@@ -81,7 +81,7 @@ export const ja = {
         movedToWaiting: '「{title}」を連絡待ち({person})に移動しました',
         waitingFor: '待機相手: ',
         refreshed: '更新しました',
-        footer: 'a=追加 d=完了 n=次 s=いつか w=待ち i=Inbox p=プロジェクト化 P=紐づけ',
+        footer: 'a=追加 d=完了 D=削除 n=次 s=いつか w=待ち i=Inbox p=プロジェクト化 P=紐づけ',
         noTasks: 'タスクなし',
         // Tab labels
         tabInbox: 'Inbox',
@@ -116,6 +116,7 @@ export const ja = {
             title: 'キーボードショートカット',
             whatsNewTab: '更新履歴',
             keybindingsTab: 'キー操作',
+            infoTab: '情報',
             tabHint: 'Tab: 表示切替',
             navigation: 'ナビゲーション',
             tabSwitch: 'タブ切替 (5=プロジェクト, 6=完了)',
@@ -137,6 +138,10 @@ export const ja = {
             taskDetail: 'タスク詳細を表示',
             addComment: 'コメント追加',
             searchTasks: 'タスク検索',
+            settings: '設定',
+            changeTheme: 'テーマ変更',
+            changeViewMode: '表示モード変更',
+            changeLanguage: '言語変更',
             other: 'その他',
             showHelp: 'このヘルプを表示',
             quit: '終了',
@@ -166,6 +171,10 @@ export const ja = {
             moveRight: '次のカラムへ移動',
             moveLeft: '前のカラムへ戻す',
             searchTasks: 'タスク検索',
+            settings: '設定',
+            changeTheme: 'テーマ変更',
+            changeViewMode: '表示モード変更',
+            changeLanguage: '言語変更',
             other: 'その他',
             showHelp: 'このヘルプを表示',
             quit: '終了',
@@ -179,6 +188,10 @@ export const ja = {
         commentDeleted: 'コメントを削除しました',
         taskDetailTitle: 'タスク詳細',
         taskDetailFooter: 'j/k=選択 i=コメント d=削除 P=紐づけ b/Esc=戻る',
+        taskDetailStatus: 'ステータス',
+        deleteConfirm: '「{title}」を削除しますか？ (y/n)',
+        deleted: '削除しました: 「{title}」',
+        deleteCancelled: '削除をキャンセルしました',
         comments: 'コメント',
         projectTasks: 'タスク一覧',
         // Search
@@ -190,6 +203,22 @@ export const ja = {
             resultsTitle: '検索結果',
             searchTasks: 'タスク検索',
         },
+        // Info tab
+        info: {
+            settings: '設定',
+            database: 'データベース',
+            paths: 'パス',
+            theme: 'テーマ',
+            language: '言語',
+            viewMode: '表示モード',
+            dbType: '種類',
+            dbPath: 'パス',
+            tursoUrl: 'Turso URL',
+            configFile: '設定ファイル',
+            dataDir: 'データディレクトリ',
+            local: 'ローカル',
+            turso: 'turso',
+        },
     },
     // Setup wizard
     setup: {

package/dist/ui/App.js

@@ -10,19 +10,52 @@ import { FunctionKeyBar } from './components/FunctionKeyBar.js';
 import { SearchBar } from './components/SearchBar.js';
 import { SearchResults } from './components/SearchResults.js';
 import { SplashScreen } from './SplashScreen.js';
+import { ThemeSelector } from './ThemeSelector.js';
+import { ModeSelector } from './ModeSelector.js';
+import { LanguageSelector } from './LanguageSelector.js';
 import { getDb, schema } from '../db/index.js';
 import { t, fmt } from '../i18n/index.js';
 import { ThemeProvider, useTheme } from './theme/index.js';
-import { getThemeName, getViewMode, isTursoEnabled, getTursoConfig } from '../config.js';
+import { getThemeName, getViewMode, setThemeName, setViewMode, setLocale, isTursoEnabled } 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();
-    const viewMode = getViewMode();
-    return (_jsx(ThemeProvider, { themeName: themeName, children: viewMode === 'kanban' ? _jsx(KanbanBoard, {}) : _jsx(AppContent, {}) }));
+    const [themeName, setThemeNameState] = useState(getThemeName);
+    const [viewMode, setViewModeState] = useState(getViewMode);
+    const [settingsMode, setSettingsMode] = useState('none');
+    const [, forceUpdate] = useState({});
+    const handleThemeSelect = (theme) => {
+        setThemeName(theme);
+        setThemeNameState(theme);
+        setSettingsMode('none');
+    };
+    const handleModeSelect = (mode) => {
+        setViewMode(mode);
+        setViewModeState(mode);
+        setSettingsMode('none');
+    };
+    const handleLocaleSelect = (locale) => {
+        setLocale(locale);
+        setSettingsMode('none');
+        forceUpdate({});
+    };
+    const handleSettingsCancel = () => {
+        setSettingsMode('none');
+    };
+    // Settings selector screens
+    if (settingsMode === 'theme-select') {
+        return (_jsx(ThemeProvider, { themeName: themeName, children: _jsx(ThemeSelector, { onSelect: handleThemeSelect, onCancel: handleSettingsCancel }) }));
+    }
+    if (settingsMode === 'mode-select') {
+        return (_jsx(ThemeProvider, { themeName: themeName, children: _jsx(ModeSelector, { onSelect: handleModeSelect, onCancel: handleSettingsCancel }) }));
+    }
+    if (settingsMode === 'lang-select') {
+        return (_jsx(ThemeProvider, { themeName: themeName, children: _jsx(LanguageSelector, { onSelect: handleLocaleSelect, onCancel: handleSettingsCancel }) }));
+    }
+    return (_jsx(ThemeProvider, { themeName: themeName, children: viewMode === 'kanban' ? (_jsx(KanbanBoard, { onOpenSettings: setSettingsMode })) : (_jsx(AppContent, { onOpenSettings: setSettingsMode })) }));
 }
-function AppContent() {
+function AppContent({ onOpenSettings }) {
     const theme = useTheme();
     const { exit } = useApp();
     const [mode, setMode] = useState('splash');
@@ -46,6 +79,7 @@ function AppContent() {
     const [taskComments, setTaskComments] = useState([]);
     const [selectedCommentIndex, setSelectedCommentIndex] = useState(0);
     const [taskToWaiting, setTaskToWaiting] = useState(null);
+    const [taskToDelete, setTaskToDelete] = useState(null);
     const [projectProgress, setProjectProgress] = useState({});
     // Search state
     const [searchQuery, setSearchQuery] = useState('');
@@ -267,6 +301,15 @@ function AppContent() {
         setMessage(fmt(i18n.tui.madeProject || 'Made project: {title}', { title: task.title }));
         await loadTasks();
     }, [i18n.tui.madeProject, loadTasks]);
+    const deleteTask = useCallback(async (task) => {
+        const db = getDb();
+        // Delete comments first
+        await db.delete(schema.comments).where(eq(schema.comments.taskId, task.id));
+        // Delete the task
+        await db.delete(schema.tasks).where(eq(schema.tasks.id, task.id));
+        setMessage(fmt(i18n.tui.deleted || 'Deleted: "{title}"', { title: task.title }));
+        await loadTasks();
+    }, [i18n.tui.deleted, loadTasks]);
     const getTabLabel = (tab) => {
         switch (tab) {
             case 'inbox':
@@ -314,6 +357,27 @@ function AppContent() {
             // Let TextInput handle other keys
             return;
         }
+        // Handle confirm-delete mode
+        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) {
+                setMessage(i18n.tui.deleteCancelled || 'Delete cancelled');
+                setTaskToDelete(null);
+                setMode('normal');
+                return;
+            }
+            // Ignore other keys in confirm mode
+            return;
+        }
         // Handle add mode
         if (mode === 'add' || mode === 'add-to-project' || mode === 'add-comment' || mode === 'move-to-waiting') {
             if (key.escape) {
@@ -520,6 +584,21 @@ function AppContent() {
             setSearchResultIndex(0);
             return;
         }
+        // Settings: Theme selector
+        if (input === 'T') {
+            onOpenSettings('theme-select');
+            return;
+        }
+        // Settings: Mode selector
+        if (input === 'V') {
+            onOpenSettings('mode-select');
+            return;
+        }
+        // Settings: Language selector
+        if (input === 'L') {
+            onOpenSettings('lang-select');
+            return;
+        }
         // Quit
         if (input === 'q' || (key.ctrl && input === 'c')) {
             exit();
@@ -626,6 +705,13 @@ function AppContent() {
             });
             return;
         }
+        // Delete task (D key - with confirmation)
+        if (input === 'D' && currentTasks.length > 0 && currentTab !== 'projects') {
+            const task = currentTasks[selectedTaskIndex];
+            setTaskToDelete(task);
+            setMode('confirm-delete');
+            return;
+        }
         // Move to next actions
         if (input === 'n' && currentTasks.length > 0 && currentTab !== 'next' && currentTab !== 'projects' && currentTab !== 'done') {
             const task = currentTasks[selectedTaskIndex];
@@ -685,24 +771,14 @@ function AppContent() {
     };
     // Turso 接続情報を取得
     const tursoEnabled = isTursoEnabled();
-    const tursoHost = tursoEnabled ? (() => {
-        const config = getTursoConfig();
-        if (config) {
-            try {
-                return new URL(config.url).host;
-            }
-            catch {
-                return config.url;
-            }
-        }
-        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) }), _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) => {
+    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}` }), _jsx(Text, { color: tursoEnabled ? theme.colors.accent : theme.colors.textMuted, children: theme.name === 'modern'
+                                    ? (tursoEnabled ? ' ☁️ turso' : ' 💾 local')
+                                    : (tursoEnabled ? ' [DB]TURSO' : ' [DB]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(_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) => {
+                }) }), 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(Box, { marginTop: 1, children: [_jsxs(Text, { color: theme.colors.secondary, bold: true, children: [i18n.tui.taskDetailStatus, ": "] }), _jsxs(Text, { color: theme.colors.accent, 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) => {
@@ -711,7 +787,7 @@ function AppContent() {
                     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 === '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: [
+                            : 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 })), mode === 'confirm-delete' && taskToDelete && (_jsx(Box, { marginTop: 1, children: _jsx(Text, { color: theme.colors.accent, bold: true, children: fmt(i18n.tui.deleteConfirm || 'Delete "{title}"? (y/n)', { title: taskToDelete.title }) }) })), 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 },

package/dist/ui/LanguageSelector.d.ts

@@ -0,0 +1,8 @@
+import React from 'react';
+import { type Locale } from '../config.js';
+interface LanguageSelectorProps {
+    onSelect: (locale: Locale) => void;
+    onCancel: () => void;
+}
+export declare function LanguageSelector({ onSelect, onCancel }: LanguageSelectorProps): React.ReactElement;
+export {};

package/dist/ui/LanguageSelector.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 { getLocale } from '../config.js';
+const VALID_LOCALES = ['en', 'ja'];
+const localeDisplayNames = {
+    en: 'English',
+    ja: '日本語 (Japanese)',
+};
+export function LanguageSelector({ onSelect, onCancel }) {
+    const currentLocale = getLocale();
+    const initialIndex = VALID_LOCALES.indexOf(currentLocale);
+    const [selectedIndex, setSelectedIndex] = useState(initialIndex >= 0 ? initialIndex : 0);
+    useInput((input, key) => {
+        if (key.escape) {
+            onCancel();
+            return;
+        }
+        // j or down arrow: move down
+        if (input === 'j' || key.downArrow) {
+            setSelectedIndex((prev) => (prev < VALID_LOCALES.length - 1 ? prev + 1 : 0));
+        }
+        // k or up arrow: move up
+        if (input === 'k' || key.upArrow) {
+            setSelectedIndex((prev) => (prev > 0 ? prev - 1 : VALID_LOCALES.length - 1));
+        }
+        // Enter: select
+        if (key.return) {
+            onSelect(VALID_LOCALES[selectedIndex]);
+        }
+    });
+    return (_jsxs(Box, { flexDirection: "column", padding: 1, children: [_jsx(Text, { bold: true, children: "Select language / \u8A00\u8A9E\u3092\u9078\u629E:" }), _jsx(Text, { dimColor: true, children: "j/k: select, Enter: confirm, Esc: cancel" }), _jsx(Box, { flexDirection: "column", marginTop: 1, children: VALID_LOCALES.map((locale, index) => {
+                    const isSelected = index === selectedIndex;
+                    const isCurrent = locale === currentLocale;
+                    return (_jsx(Box, { children: _jsxs(Text, { color: isSelected ? 'cyan' : undefined, children: [isSelected ? '› ' : '  ', localeDisplayNames[locale], isCurrent ? ' (current)' : ''] }) }, locale));
+                }) })] }));
+}

package/dist/ui/ModeSelector.d.ts

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

package/dist/ui/ModeSelector.js

@@ -11,11 +11,15 @@ const modeDescriptions = {
     gtd: 'Classic GTD workflow with Inbox, Next, Waiting, Someday lists',
     kanban: '3-column kanban board view',
 };
-export function ModeSelector({ onSelect }) {
+export function ModeSelector({ onSelect, onCancel }) {
     const currentMode = getViewMode();
     const initialIndex = VALID_VIEW_MODES.indexOf(currentMode);
     const [selectedIndex, setSelectedIndex] = useState(initialIndex >= 0 ? initialIndex : 0);
     useInput((input, key) => {
+        if (key.escape && onCancel) {
+            onCancel();
+            return;
+        }
         // j or down arrow: move down
         if (input === 'j' || key.downArrow) {
             setSelectedIndex((prev) => (prev < VALID_VIEW_MODES.length - 1 ? prev + 1 : 0));
@@ -29,7 +33,7 @@ export function ModeSelector({ onSelect }) {
             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) => {
+    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, Esc: cancel" }), _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/ThemeSelector.d.ts

@@ -2,6 +2,7 @@ import React from 'react';
 import type { ThemeName } from './theme/types.js';
 interface ThemeSelectorProps {
     onSelect: (theme: ThemeName) => void;
+    onCancel?: () => void;
 }
-export declare function ThemeSelector({ onSelect }: ThemeSelectorProps): React.ReactElement;
+export declare function ThemeSelector({ onSelect, onCancel }: ThemeSelectorProps): React.ReactElement;
 export {};

package/dist/ui/ThemeSelector.js

@@ -3,11 +3,15 @@ import { useState } from 'react';
 import { Box, Text, useInput } from 'ink';
 import { themes, VALID_THEMES } from './theme/themes.js';
 import { getThemeName } from '../config.js';
-export function ThemeSelector({ onSelect }) {
+export function ThemeSelector({ onSelect, onCancel }) {
     const currentTheme = getThemeName();
     const initialIndex = VALID_THEMES.indexOf(currentTheme);
     const [selectedIndex, setSelectedIndex] = useState(initialIndex >= 0 ? initialIndex : 0);
     useInput((input, key) => {
+        if (key.escape && onCancel) {
+            onCancel();
+            return;
+        }
         // j or down arrow: move down
         if (input === 'j' || key.downArrow) {
             setSelectedIndex((prev) => (prev < VALID_THEMES.length - 1 ? prev + 1 : 0));
@@ -21,7 +25,7 @@ export function ThemeSelector({ onSelect }) {
             onSelect(VALID_THEMES[selectedIndex]);
         }
     });
-    return (_jsxs(Box, { flexDirection: "column", padding: 1, children: [_jsx(Text, { bold: true, children: "Select a theme:" }), _jsx(Text, { dimColor: true, children: "j/k: select, Enter: confirm" }), _jsx(Box, { flexDirection: "column", marginTop: 1, children: VALID_THEMES.map((themeName, index) => {
+    return (_jsxs(Box, { flexDirection: "column", padding: 1, children: [_jsx(Text, { bold: true, children: "Select a theme:" }), _jsx(Text, { dimColor: true, children: "j/k: select, Enter: confirm, Esc: cancel" }), _jsx(Box, { flexDirection: "column", marginTop: 1, children: VALID_THEMES.map((themeName, index) => {
                     const theme = themes[themeName];
                     const isSelected = index === selectedIndex;
                     const isCurrent = themeName === currentTheme;