floq 0.5.0 → 0.6.0

package/README.ja.md

@@ -4,6 +4,8 @@
 
 MS-DOSスタイルのテーマを備えたターミナルベースのGTD（Getting Things Done）タスクマネージャー。
 
+![Floq Demo](./assets/demo_ja.gif)
+
 ## 特徴
 
 - **TUIインターフェース**: Ink（CLI用React）で構築されたインタラクティブなターミナルUI
@@ -14,7 +16,8 @@ MS-DOSスタイルのテーマを備えたターミナルベースのGTD（Getti
 - **タスク検索**: `/` キーで全タスクを素早く検索
 - **コメント**: タスクにメモやコメントを追加
 - **クラウド同期**: [Turso](https://turso.tech/)のembedded replicasによるオプションの同期機能
-- **テーマ**: MS-DOSノスタルジックスタイルを含む複数テーマ
+- **テーマ**: MS-DOSノスタルジックスタイルやドラクエRPG風を含む複数テーマ
+- **スプラッシュ画面**: 起動時のスプラッシュ画面（レトロテーマではドラクエ風）
 - **多言語対応**: 英語・日本語サポート
 - **Vimスタイルナビゲーション**: hjklまたは矢印キーで操作
 - **セットアップウィザード**: 初回起動時の簡単設定
@@ -209,6 +212,12 @@ floq config mode kanban            # カンバンボード
 floq config db /path/to/custom.db
 floq config db                     # デフォルトに戻す
 
+# スプラッシュ画面設定
+floq config splash                 # 現在の設定を表示
+floq config splash 3000            # 3秒に設定
+floq config splash off             # スプラッシュ無効化
+floq config splash key             # キー入力待ちモード
+
 # データベースリセット（全データ削除）
 floq db reset                      # 確認あり
 floq db reset --force              # 確認なし
@@ -254,6 +263,10 @@ floq config turso --disable
 
 26種類のテーマが利用可能。`floq config theme` でインタラクティブに選択（j/kで移動）。
 
+一部のテーマは**ドラクエRPG風UI**を採用しており、タイトル付きメッセージボックス、2カラムレイアウト、レトロなスプラッシュ画面が表示されます。DQ風テーマ: `turbo-pascal`、`msx`、`pc-98`
+
+![ドラクエ風UI](./assets/demo_dq.gif)
+
 | テーマ | 説明 |
 |--------|------|
 | `modern` | シンプルでクリーン（デフォルト） |

package/README.md

@@ -4,6 +4,8 @@
 
 A terminal-based GTD (Getting Things Done) task manager with MS-DOS style themes.
 
+![Floq Demo](./assets/demo.gif)
+
 ## Features
 
 - **TUI Interface**: Interactive terminal UI built with Ink (React for CLI)
@@ -14,7 +16,8 @@ A terminal-based GTD (Getting Things Done) task manager with MS-DOS style themes
 - **Task Search**: Quick search across all tasks with `/`
 - **Comments**: Add notes and comments to tasks
 - **Cloud Sync**: Optional sync with [Turso](https://turso.tech/) using embedded replicas
-- **Themes**: Multiple themes including MS-DOS nostalgic styles
+- **Themes**: Multiple themes including MS-DOS nostalgic styles and Dragon Quest RPG style
+- **Splash Screen**: Configurable startup splash with Dragon Quest style for retro themes
 - **i18n**: English and Japanese support
 - **Vim-style Navigation**: Use hjkl or arrow keys
 - **Setup Wizard**: First-run wizard for easy configuration
@@ -209,6 +212,12 @@ floq config mode kanban            # Kanban board
 floq config db /path/to/custom.db
 floq config db                     # Reset to default
 
+# Splash screen settings
+floq config splash                 # Show current setting
+floq config splash 3000            # Set to 3 seconds
+floq config splash off             # Disable splash screen
+floq config splash key             # Wait for key press
+
 # Reset database (delete all data)
 floq db reset                      # With confirmation
 floq db reset --force              # Skip confirmation
@@ -254,6 +263,10 @@ floq config turso --disable
 
 26 themes available. Use `floq config theme` for interactive selection (j/k to navigate).
 
+Some themes feature a **Dragon Quest RPG style UI** with titled message boxes, 2-column layouts, and retro splash screens. Themes with DQ-style: `turbo-pascal`, `msx`, `pc-98`.
+
+![Dragon Quest Style UI](./assets/demo_dq.gif)
+
 | Theme | Description |
 |-------|-------------|
 | `modern` | Clean, minimal style (default) |

package/dist/cli.js

@@ -7,7 +7,7 @@ import { listTasks, listProjects } from './commands/list.js';
 import { moveTask } from './commands/move.js';
 import { markDone } from './commands/done.js';
 import { addProject, listProjectsCommand, showProject, completeProject, } from './commands/project.js';
-import { showConfig, setLanguage, setDbPath, resetDbPath, setTheme, selectTheme, setViewModeCommand, selectMode, setTurso, disableTurso, syncCommand, resetDatabase } from './commands/config.js';
+import { showConfig, setLanguage, setDbPath, resetDbPath, setTheme, selectTheme, setViewModeCommand, selectMode, setTurso, disableTurso, syncCommand, resetDatabase, setSplashCommand, showSplash } from './commands/config.js';
 import { addComment, listComments } from './commands/comment.js';
 import { listContexts, addContextCommand, removeContextCommand } from './commands/context.js';
 import { runSetupWizard } from './commands/setup.js';
@@ -155,6 +155,17 @@ configCmd
         process.exit(1);
     }
 });
+configCmd
+    .command('splash [duration]')
+    .description('Set splash screen duration (ms, off=disable, key=wait for key)')
+    .action(async (duration) => {
+    if (duration !== undefined) {
+        await setSplashCommand(duration);
+    }
+    else {
+        await showSplash();
+    }
+});
 // Sync command
 program
     .command('sync')

package/dist/commands/config.d.ts

@@ -9,5 +9,7 @@ export declare function setViewModeCommand(mode: string): Promise<void>;
 export declare function selectMode(): Promise<void>;
 export declare function setTurso(url: string, token: string): Promise<void>;
 export declare function disableTurso(): Promise<void>;
+export declare function setSplashCommand(duration: string): Promise<void>;
+export declare function showSplash(): Promise<void>;
 export declare function syncCommand(): Promise<void>;
 export declare function resetDatabase(force: boolean): Promise<void>;

package/dist/commands/config.js

@@ -3,7 +3,7 @@ import React from 'react';
 import { createInterface } from 'readline';
 import { unlinkSync, existsSync, readdirSync } from 'fs';
 import { dirname, basename, join } from 'path';
-import { loadConfig, saveConfig, getDbPath, getViewMode, setViewMode, isTursoEnabled, getTursoConfig, setTursoConfig } from '../config.js';
+import { loadConfig, saveConfig, getDbPath, getViewMode, setViewMode, isTursoEnabled, getTursoConfig, setTursoConfig, getSplashDuration, setSplashDuration } from '../config.js';
 import { CONFIG_FILE } from '../paths.js';
 import { ThemeSelector } from '../ui/ThemeSelector.js';
 import { ModeSelector } from '../ui/ModeSelector.js';
@@ -13,6 +13,7 @@ const VALID_LOCALES = ['en', 'ja'];
 const VALID_VIEW_MODES = ['gtd', 'kanban'];
 export async function showConfig() {
     const config = loadConfig();
+    const splashDuration = getSplashDuration();
     console.log('GTD CLI Configuration');
     console.log('─'.repeat(40));
     console.log(`Config file: ${CONFIG_FILE}`);
@@ -20,6 +21,7 @@ export async function showConfig() {
     console.log(`Database: ${getDbPath()}`);
     console.log(`Theme: ${config.theme || 'modern'}`);
     console.log(`View Mode: ${config.viewMode || 'gtd'}`);
+    console.log(`Splash: ${splashDuration === 0 ? 'disabled' : splashDuration === -1 ? 'wait for key' : `${splashDuration}ms`}`);
     console.log(`Turso: ${isTursoEnabled() ? 'enabled' : 'disabled'}`);
     if (config.db_path) {
         console.log(`  (custom: ${config.db_path})`);
@@ -115,6 +117,54 @@ export async function disableTurso() {
     setTursoConfig(undefined);
     console.log('Turso sync disabled');
 }
+export async function setSplashCommand(duration) {
+    let value;
+    // Handle special keywords
+    if (duration === 'key' || duration === 'wait') {
+        value = -1;
+    }
+    else if (duration === 'off' || duration === 'disable') {
+        value = 0;
+    }
+    else {
+        value = parseInt(duration, 10);
+        if (isNaN(value)) {
+            console.error(`Invalid duration: ${duration}`);
+            console.error('Usage: floq config splash <milliseconds|key|off>');
+            console.error('  off/0 = disable splash screen');
+            console.error('  key = wait for key press');
+            console.error('  positive number = duration in milliseconds');
+            process.exit(1);
+        }
+        if (value < 0) {
+            console.error('Duration must be 0 (disabled) or positive number');
+            console.error('Use "key" for wait-for-keypress mode');
+            process.exit(1);
+        }
+    }
+    setSplashDuration(value);
+    if (value === 0) {
+        console.log('Splash screen disabled');
+    }
+    else if (value === -1) {
+        console.log('Splash screen set to wait for key press');
+    }
+    else {
+        console.log(`Splash screen duration set to ${value}ms`);
+    }
+}
+export async function showSplash() {
+    const duration = getSplashDuration();
+    if (duration === 0) {
+        console.log('Splash screen: disabled');
+    }
+    else if (duration === -1) {
+        console.log('Splash screen: wait for key press');
+    }
+    else {
+        console.log(`Splash screen: ${duration}ms`);
+    }
+}
 export async function syncCommand() {
     if (!isTursoEnabled()) {
         console.error('Turso sync is not enabled.');

package/dist/config.d.ts

@@ -13,6 +13,7 @@ export interface Config {
     viewMode: ViewMode;
     turso?: TursoConfig;
     contexts?: string[];
+    splashDuration?: number;
 }
 export declare function loadConfig(): Config;
 export declare function saveConfig(updates: Partial<Config>): void;
@@ -30,3 +31,5 @@ export declare function isFirstRun(): boolean;
 export declare function getContexts(): string[];
 export declare function addContext(context: string): boolean;
 export declare function removeContext(context: string): boolean;
+export declare function getSplashDuration(): number;
+export declare function setSplashDuration(duration: number): void;

package/dist/config.js

@@ -138,3 +138,16 @@ export function removeContext(context) {
     saveConfig({ contexts: newContexts });
     return true;
 }
+const DEFAULT_SPLASH_DURATION = 2500; // 2.5 seconds
+export function getSplashDuration() {
+    const duration = loadConfig().splashDuration;
+    // undefined means use default, 0 means disabled
+    if (duration === undefined) {
+        return DEFAULT_SPLASH_DURATION;
+    }
+    return duration;
+}
+export function setSplashDuration(duration) {
+    // Allow -1 (wait for key), 0 (disabled), or positive values
+    saveConfig({ splashDuration: duration >= 0 ? duration : -1 });
+}

package/dist/i18n/en.d.ts

@@ -240,6 +240,12 @@ export declare const en: {
             turso: string;
         };
     };
+    splash: {
+        welcome: string;
+        subtitle: string;
+        subtitleKanban: string;
+        pressKey: string;
+    };
     setup: {
         welcome: {
             title: string;
@@ -517,6 +523,12 @@ export type SetupTranslations = {
         confirm: string;
     };
 };
+export type SplashTranslations = {
+    welcome: string;
+    subtitle: string;
+    subtitleKanban: string;
+    pressKey: string;
+};
 export type Translations = {
     status: Record<string, string>;
     kanban: KanbanTranslations;
@@ -531,5 +543,6 @@ export type Translations = {
         context: Record<string, string>;
     };
     tui: TuiTranslations;
+    splash?: SplashTranslations;
     setup: SetupTranslations;
 };

package/dist/i18n/en.js

@@ -255,6 +255,13 @@ export const en = {
             turso: 'turso',
         },
     },
+    // Splash screen (Dragon Quest style)
+    splash: {
+        welcome: 'Welcome!',
+        subtitle: 'Your GTD adventure begins',
+        subtitleKanban: 'Your Kanban adventure begins',
+        pressKey: '▼ Press any key',
+    },
     // Setup wizard
     setup: {
         welcome: {

package/dist/i18n/ja.js

@@ -255,6 +255,13 @@ export const ja = {
             turso: 'turso',
         },
     },
+    // Splash screen (Dragon Quest style)
+    splash: {
+        welcome: 'ようこそ！',
+        subtitle: 'GTDの冒険がはじまる',
+        subtitleKanban: 'Kanbanの冒険がはじまる',
+        pressKey: '▼ なにかキーをおしてください',
+    },
     // Setup wizard
     setup: {
         welcome: {

package/dist/ui/App.js

@@ -9,15 +9,18 @@ import { HelpModal } from './components/HelpModal.js';
 import { FunctionKeyBar } from './components/FunctionKeyBar.js';
 import { SearchBar } from './components/SearchBar.js';
 import { SearchResults } from './components/SearchResults.js';
+import { TitledBox } from './components/TitledBox.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, setThemeName, setViewMode, setLocale, isTursoEnabled, getContexts, addContext } from '../config.js';
+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 { GtdDQ } from './components/GtdDQ.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'];
@@ -25,6 +28,8 @@ export function App() {
     const [themeName, setThemeNameState] = useState(getThemeName);
     const [viewMode, setViewModeState] = useState(getViewMode);
     const [settingsMode, setSettingsMode] = useState('none');
+    const splashDuration = getSplashDuration();
+    const [showSplash, setShowSplash] = useState(splashDuration !== 0);
     const [, forceUpdate] = useState({});
     const handleThemeSelect = (theme) => {
         setThemeName(theme);
@@ -44,6 +49,12 @@ export function App() {
     const handleSettingsCancel = () => {
         setSettingsMode('none');
     };
+    const currentTheme = getTheme(themeName);
+    const useDQStyle = currentTheme.uiStyle === 'titled-box';
+    // Show splash screen (all themes, configurable duration)
+    if (showSplash) {
+        return (_jsx(ThemeProvider, { themeName: themeName, children: _jsx(SplashScreen, { onComplete: () => setShowSplash(false), duration: splashDuration, viewMode: viewMode }) }));
+    }
     // Settings selector screens
     if (settingsMode === 'theme-select') {
         return (_jsx(ThemeProvider, { themeName: themeName, children: _jsx(ThemeSelector, { onSelect: handleThemeSelect, onCancel: handleSettingsCancel }) }));
@@ -54,13 +65,13 @@ 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' ? (_jsx(KanbanBoard, { onOpenSettings: setSettingsMode })) : (_jsx(AppContent, { onOpenSettings: setSettingsMode })) }) }));
+    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 }))) }) }));
 }
 function AppContent({ onOpenSettings }) {
     const theme = useTheme();
     const { exit } = useApp();
     const history = useHistory();
-    const [mode, setMode] = useState('splash');
+    const [mode, setMode] = useState('normal');
     const [inputValue, setInputValue] = useState('');
     const [currentListIndex, setCurrentListIndex] = useState(0);
     const [selectedTaskIndex, setSelectedTaskIndex] = useState(0);
@@ -430,11 +441,6 @@ function AppContent({ onOpenSettings }) {
         }
     };
     useInput((input, key) => {
-        // Skip splash screen on any key
-        if (mode === 'splash') {
-            setMode('normal');
-            return;
-        }
         // Handle search mode
         if (mode === 'search') {
             if (key.escape) {
@@ -978,10 +984,6 @@ function AppContent({ onOpenSettings }) {
             return;
         }
     }, { isActive: mode !== 'help' });
-    // Splash screen
-    if (mode === 'splash') {
-        return _jsx(SplashScreen, { onComplete: () => setMode('normal') });
-    }
     // Help modal overlay
     if (mode === 'help') {
         return (_jsx(Box, { flexDirection: "column", padding: 1, children: _jsx(HelpModal, { onClose: () => setMode('normal') }) }));
@@ -1003,11 +1005,15 @@ function AppContent({ onOpenSettings }) {
                 }) }), 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})`] })] }), _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, { 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) => {
+                        })) }), 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' && (theme.uiStyle === 'titled-box' ? (_jsx(TitledBox, { title: mode === 'project-detail' && selectedProject ? selectedProject.title : getTabLabel(currentTab), borderColor: theme.colors.border, minHeight: 10, children: currentTasks.length === 0 ? (_jsx(Text, { color: theme.colors.textMuted, italic: true, children: i18n.tui.noTasks })) : (currentTasks.map((task, index) => {
+                    const parentProject = getParentProject(task.parentId);
+                    const progress = currentTab === 'projects' ? projectProgress[task.id] : undefined;
+                    return (_jsx(TaskItem, { task: task, isSelected: index === selectedTaskIndex, projectName: parentProject?.title, progress: progress }, task.id));
+                })) })) : (_jsx(Box, { flexDirection: "column", borderStyle: theme.borders.list, borderColor: theme.colors.border, paddingX: 1, paddingY: 1, minHeight: 10, children: currentTasks.length === 0 ? (_jsx(Text, { color: theme.colors.textMuted, italic: true, children: i18n.tui.noTasks })) : (currentTasks.map((task, index) => {
                     const parentProject = getParentProject(task.parentId);
                     const progress = currentTab === 'projects' ? projectProgress[task.id] : undefined;
                     return (_jsx(TaskItem, { task: task, isSelected: index === selectedTaskIndex, projectName: parentProject?.title, progress: progress }, task.id));
-                })) })), (mode === 'add' || mode === 'add-to-project') && (_jsxs(Box, { marginTop: 1, children: [_jsx(Text, { color: theme.colors.secondary, bold: true, children: mode === 'add-to-project' && selectedProject
+                })) }))), (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 === 'context-filter' && (_jsxs(Box, { flexDirection: "column", marginTop: 1, children: [_jsx(Text, { color: theme.colors.secondary, bold: true, children: i18n.tui.context?.filter || 'Filter by context' }), _jsx(Box, { flexDirection: "column", marginTop: 1, borderStyle: theme.borders.list, borderColor: theme.colors.borderActive, paddingX: 1, children: ['all', 'none', ...availableContexts].map((ctx, index) => {
                             const label = ctx === 'all'

package/dist/ui/SplashScreen.d.ts

@@ -2,6 +2,7 @@ import React from 'react';
 interface SplashScreenProps {
     onComplete: () => void;
     duration?: number;
+    viewMode?: 'gtd' | 'kanban';
 }
-export declare function SplashScreen({ onComplete, duration }: SplashScreenProps): React.ReactElement;
+export declare function SplashScreen({ onComplete, duration, viewMode }: SplashScreenProps): React.ReactElement;
 export {};

package/dist/ui/SplashScreen.js

@@ -1,8 +1,9 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { useState, useEffect } from 'react';
-import { Box, Text } from 'ink';
+import { Box, Text, useInput } from 'ink';
 import { useTheme } from './theme/index.js';
 import { VERSION } from '../version.js';
+import { t } from '../i18n/index.js';
 const LOGO_MODERN = `
   ███████╗██╗      ██████╗  ██████╗
   ██╔════╝██║     ██╔═══██╗██╔═══██╗
@@ -20,14 +21,88 @@ const LOGO_DOS = `
   ║  ██      ███████  ██████   ██████ ║
   ╚═══════════════════════════════════╝
 `;
+// Dragon Quest style FLOQ logo with wings and sword
+const FLOQ_LOGO = [
+    '                    /\\',
+    '        __         /  \\         __',
+    '       /  \\       / || \\       /  \\',
+    '      / /\\ \\     /  ||  \\     / /\\ \\',
+    '     / /  \\ \\   /   ||   \\   / /  \\ \\',
+    '    / /    \\ \\_/    ||    \\_/ /    \\ \\',
+    '   /_/      \\__/    ||    \\__/      \\_\\',
+    '                    ||',
+    '   =================[##]=================',
+    '',
+    '    ########  ##        ######    ######',
+    '    ##        ##       ##    ##  ##    ##',
+    '    ######    ##       ##    ##  ##    ##',
+    '    ##        ##       ##    ##  ##  # ##',
+    '    ##        ########  ######    #### ##',
+    '',
+    '   =====================================',
+    '          ~ Flow Your Tasks ~',
+];
+// Dragon Quest style border characters
+const DQ_BORDER = {
+    topLeft: '╭',
+    topRight: '╮',
+    bottomLeft: '╰',
+    bottomRight: '╯',
+    horizontal: '─',
+    vertical: '│',
+};
 const TAGLINE = 'Flow your tasks, clear your mind';
-export function SplashScreen({ onComplete, duration = 1500 }) {
+// Dragon Quest famous quotes for splash screen
+const DQ_QUOTES_JA = [
+    'へんじがない。ただのしかばねのようだ。',
+    'おきのどくですが ぼうけんのしょは きえてしまいました。',
+    'レベルがあがった！',
+    'しかし まわりこまれてしまった！',
+    'たたかいに やぶれた...',
+    'どうぐがいっぱいで もてません。',
+    'やくそうを つかった！',
+    'かいしんのいちげき！',
+    'しかし なにも おこらなかった',
+    'そのほうこうには すすめません',
+];
+const DQ_QUOTES_EN = [
+    'No response. It seems to be just a corpse.',
+    'Unfortunately, your adventure log has been erased.',
+    'Level up!',
+    'But you were surrounded!',
+    'You have been defeated...',
+    'Your inventory is full.',
+    'Used an herb!',
+    'Critical hit!',
+    'But nothing happened.',
+    'You cannot go that way.',
+];
+export function SplashScreen({ onComplete, duration = 1500, viewMode = 'gtd' }) {
     const [frame, setFrame] = useState(0);
     const [showTagline, setShowTagline] = useState(false);
+    const [blinkVisible, setBlinkVisible] = useState(true);
     const theme = useTheme();
+    const i18n = t();
+    const isDqStyle = theme.uiStyle === 'titled-box';
     const isDosStyle = theme.name !== 'modern';
     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 === 'ようこそ！';
+        const quotes = isJapanese ? DQ_QUOTES_JA : DQ_QUOTES_EN;
+        return quotes[Math.floor(Math.random() * quotes.length)];
+    });
+    // Adventure subtitle based on view mode
+    const adventureSubtitle = viewMode === 'kanban'
+        ? (i18n.splash?.subtitleKanban || 'Kanbanの冒険がはじまる')
+        : (i18n.splash?.subtitle || 'GTDの冒険がはじまる');
+    // Wait for key press mode (duration = -1)
+    const waitForKeyPress = duration < 0;
+    // Handle key press to skip splash
+    useInput(() => {
+        onComplete();
+    });
     useEffect(() => {
         // Animate logo appearance
         const frameInterval = setInterval(() => {
@@ -43,19 +118,43 @@ export function SplashScreen({ onComplete, duration = 1500 }) {
         const taglineTimer = setTimeout(() => {
             setShowTagline(true);
         }, 600);
-        // Complete splash screen
-        const completeTimer = setTimeout(() => {
-            onComplete();
-        }, duration);
+        // Blink effect for DQ style or wait-for-key mode
+        let blinkInterval = null;
+        if (isDqStyle || waitForKeyPress) {
+            blinkInterval = setInterval(() => {
+                setBlinkVisible((prev) => !prev);
+            }, 500);
+        }
+        // Complete splash screen (only if not waiting for key press)
+        let completeTimer = null;
+        if (!waitForKeyPress) {
+            completeTimer = setTimeout(() => {
+                onComplete();
+            }, duration);
+        }
         return () => {
             clearInterval(frameInterval);
             clearTimeout(taglineTimer);
-            clearTimeout(completeTimer);
+            if (completeTimer)
+                clearTimeout(completeTimer);
+            if (blinkInterval)
+                clearInterval(blinkInterval);
         };
-    }, [onComplete, duration]);
+    }, [onComplete, duration, isDqStyle, waitForKeyPress]);
+    // Dragon Quest style splash
+    if (isDqStyle) {
+        const boxWidth = 40;
+        const innerWidth = boxWidth - 2;
+        const title = 'FLOQ';
+        const leftDashes = 3;
+        const rightDashes = innerWidth - leftDashes - title.length - 2;
+        const shadowColor = theme.colors.muted;
+        return (_jsxs(Box, { flexDirection: "column", alignItems: "center", justifyContent: "center", padding: 2, children: [_jsx(Box, { flexDirection: "column", alignItems: "center", marginBottom: 1, children: FLOQ_LOGO.map((line, index) => (_jsx(Text, { color: index === 4 ? theme.colors.text : theme.colors.accent, bold: index === 4, children: line }, index))) }), _jsxs(Box, { flexDirection: "column", children: [_jsxs(Box, { children: [_jsx(Text, { color: theme.colors.border, children: DQ_BORDER.topLeft }), _jsxs(Text, { color: theme.colors.border, children: [DQ_BORDER.horizontal.repeat(leftDashes), " "] }), _jsx(Text, { color: theme.colors.accent, bold: true, children: title }), _jsxs(Text, { color: theme.colors.border, children: [" ", DQ_BORDER.horizontal.repeat(rightDashes)] }), _jsx(Text, { color: theme.colors.border, children: DQ_BORDER.topRight }), _jsx(Text, { children: " " })] }), _jsxs(Box, { children: [_jsx(Text, { color: theme.colors.border, children: DQ_BORDER.vertical }), _jsx(Box, { width: innerWidth, justifyContent: "center", children: _jsx(Text, { color: theme.colors.text, children: " " }) }), _jsx(Text, { color: theme.colors.border, children: DQ_BORDER.vertical }), _jsx(Text, { color: shadowColor, children: "\u2591" })] }), _jsxs(Box, { children: [_jsx(Text, { color: theme.colors.border, children: DQ_BORDER.vertical }), _jsx(Box, { width: innerWidth, justifyContent: "center", children: _jsx(Text, { color: theme.colors.text, bold: true, children: adventureSubtitle }) }), _jsx(Text, { color: theme.colors.border, children: DQ_BORDER.vertical }), _jsx(Text, { color: shadowColor, children: "\u2591" })] }), _jsxs(Box, { children: [_jsx(Text, { color: theme.colors.border, children: DQ_BORDER.vertical }), _jsx(Box, { width: innerWidth, justifyContent: "center", children: _jsx(Text, { color: theme.colors.text, children: " " }) }), _jsx(Text, { color: theme.colors.border, children: DQ_BORDER.vertical }), _jsx(Text, { color: shadowColor, children: "\u2591" })] }), _jsxs(Box, { children: [_jsx(Text, { color: theme.colors.border, children: DQ_BORDER.vertical }), _jsx(Box, { width: innerWidth, justifyContent: "center", children: _jsx(Text, { color: theme.colors.textMuted, children: randomQuote }) }), _jsx(Text, { color: theme.colors.border, children: DQ_BORDER.vertical }), _jsx(Text, { color: shadowColor, children: "\u2591" })] }), _jsxs(Box, { children: [_jsx(Text, { color: theme.colors.border, children: DQ_BORDER.vertical }), _jsx(Box, { width: innerWidth, justifyContent: "center", children: _jsx(Text, { color: theme.colors.text, children: " " }) }), _jsx(Text, { color: theme.colors.border, children: DQ_BORDER.vertical }), _jsx(Text, { color: shadowColor, children: "\u2591" })] }), _jsxs(Box, { children: [_jsx(Text, { color: theme.colors.border, children: DQ_BORDER.vertical }), _jsx(Box, { width: innerWidth, justifyContent: "center", children: _jsx(Text, { color: theme.colors.textMuted, children: blinkVisible ? (i18n.splash?.pressKey || '▼ キーを押してください') : ' ' }) }), _jsx(Text, { color: theme.colors.border, children: DQ_BORDER.vertical }), _jsx(Text, { color: shadowColor, children: "\u2591" })] }), _jsxs(Box, { children: [_jsx(Text, { color: theme.colors.border, children: DQ_BORDER.vertical }), _jsx(Box, { width: innerWidth, justifyContent: "center", children: _jsx(Text, { color: theme.colors.text, children: " " }) }), _jsx(Text, { color: theme.colors.border, children: DQ_BORDER.vertical }), _jsx(Text, { color: shadowColor, children: "\u2591" })] }), _jsxs(Box, { children: [_jsx(Text, { color: theme.colors.border, children: DQ_BORDER.bottomLeft }), _jsx(Text, { color: theme.colors.border, children: DQ_BORDER.horizontal.repeat(innerWidth) }), _jsx(Text, { color: theme.colors.border, children: DQ_BORDER.bottomRight }), _jsx(Text, { color: shadowColor, children: "\u2591" })] }), _jsxs(Box, { children: [_jsx(Text, { children: " " }), _jsx(Text, { color: shadowColor, children: '░'.repeat(boxWidth) })] })] }), _jsx(Box, { marginTop: 1, children: _jsxs(Text, { color: theme.colors.textMuted, children: ["VER ", VERSION] }) })] }));
+    }
+    // Standard splash (modern / DOS style)
     const logoLines = logo.split('\n');
     const visibleLines = Math.min(Math.floor(frame * logoLines.length / 10), logoLines.length);
-    return (_jsxs(Box, { flexDirection: "column", alignItems: "center", justifyContent: "center", padding: 2, children: [_jsx(Box, { flexDirection: "column", alignItems: "center", children: logoLines.slice(0, visibleLines).map((line, index) => (_jsx(Text, { color: theme.colors.secondary, bold: true, children: line }, index))) }), showTagline && (_jsx(Box, { marginTop: 1, children: _jsx(Text, { color: theme.colors.textMuted, italic: !isDosStyle, children: isDosStyle ? `[ ${TAGLINE.toUpperCase()} ]` : TAGLINE }) })), _jsx(Box, { marginTop: 2, children: _jsx(Text, { color: theme.colors.primary, children: frame < 10
+    return (_jsxs(Box, { flexDirection: "column", alignItems: "center", justifyContent: "center", padding: 2, children: [_jsx(Box, { flexDirection: "column", alignItems: "center", children: logoLines.slice(0, visibleLines).map((line, index) => (_jsx(Text, { color: theme.colors.secondary, bold: true, children: line }, index))) }), showTagline && (_jsx(Box, { marginTop: 1, children: _jsx(Text, { color: theme.colors.textMuted, italic: !isDosStyle, children: isDosStyle ? `[ ${TAGLINE.toUpperCase()} ]` : TAGLINE }) })), _jsx(Box, { marginTop: 2, children: waitForKeyPress ? (_jsx(Text, { color: theme.colors.textMuted, children: blinkVisible ? (i18n.splash?.pressKey || '▼ Press any key') : ' ' })) : (_jsx(Text, { color: theme.colors.primary, children: frame < 10
                         ? filled.repeat(frame) + empty.repeat(10 - frame)
-                        : filled.repeat(10) }) }), _jsx(Box, { marginTop: 1, children: _jsx(Text, { color: isDosStyle ? theme.colors.textMuted : theme.colors.muted, children: isDosStyle ? `VER ${VERSION}` : `v${VERSION}` }) })] }));
+                        : filled.repeat(10) })) }), _jsx(Box, { marginTop: 1, children: _jsx(Text, { color: isDosStyle ? theme.colors.textMuted : theme.colors.muted, children: isDosStyle ? `VER ${VERSION}` : `v${VERSION}` }) })] }));
 }

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

@@ -0,0 +1,36 @@
+import React from 'react';
+interface DQLayoutProps {
+    title: string;
+    subtitle?: string;
+    menuTitle: string;
+    menuItems: Array<{
+        label: string;
+        count?: number;
+        isActive: boolean;
+    }>;
+    onMenuSelect?: (index: number) => void;
+    contentTitle: string;
+    children: React.ReactNode;
+    statusTitle?: string;
+    statusItems?: Array<{
+        label: string;
+        value: string;
+    }>;
+    footer?: string;
+}
+/**
+ * Dragon Quest style multi-window layout
+ *
+ * ╭────────────────────────────────────────────╮
+ * │           FLOQ - GTD Manager               │
+ * ╰────────────────────────────────────────────╯
+ * ╭─ コマンド ─╮  ╭─ Inbox ──────────────────────╮
+ * │ ▶ Inbox   │  │ ▶ タスク1                    │
+ * │   次      │  │   タスク2                    │
+ * │   待ち    │  │   タスク3                    │
+ * │   いつか  │  ╰────────────────────────────────╯
+ * │   完了    │
+ * ╰───────────╯
+ */
+export declare function DQLayout({ title, subtitle, menuTitle, menuItems, contentTitle, children, statusTitle, statusItems, footer, }: DQLayoutProps): React.ReactElement;
+export {};