floq 0.0.1 → 0.2.0

package/dist/ui/ModeSelector.d.ts

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

package/dist/ui/ModeSelector.js

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

package/dist/ui/SetupWizard.d.ts

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

package/dist/ui/SetupWizard.js

@@ -0,0 +1,321 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useState, useEffect } from 'react';
+import { Box, Text, useInput, useApp } from 'ink';
+import TextInput from 'ink-text-input';
+import { themes, VALID_THEMES } from './theme/themes.js';
+import { saveConfig } from '../config.js';
+import { t } from '../i18n/index.js';
+const LOCALES = [
+    { value: 'en', label: 'English', desc: 'English language' },
+    { value: 'ja', label: '日本語', desc: 'Japanese language' },
+];
+const VIEW_MODES = [
+    { value: 'gtd', labelKey: 'gtd', descKey: 'gtdDesc' },
+    { value: 'kanban', labelKey: 'kanban', descKey: 'kanbanDesc' },
+];
+const DB_OPTIONS = [
+    { value: 'local', labelKey: 'local', descKey: 'localDesc' },
+    { value: 'turso', labelKey: 'turso', descKey: 'tursoDesc' },
+];
+export function SetupWizard({ onComplete }) {
+    const { exit } = useApp();
+    const [step, setStep] = useState('welcome');
+    const [state, setState] = useState({
+        locale: 'en',
+        theme: 'modern',
+        viewMode: 'gtd',
+        useTurso: false,
+        tursoUrl: '',
+        tursoToken: '',
+    });
+    // Selection indexes for various steps
+    const [languageIndex, setLanguageIndex] = useState(0);
+    const [themeIndex, setThemeIndex] = useState(0);
+    const [viewModeIndex, setViewModeIndex] = useState(0);
+    const [dbIndex, setDbIndex] = useState(0);
+    // Input values for Turso
+    const [inputValue, setInputValue] = useState('');
+    const [inputError, setInputError] = useState(null);
+    // Get translations - use selected locale for setup wizard
+    const [i18n, setI18n] = useState(t());
+    // Update translations when locale changes
+    useEffect(() => {
+        // Re-get translations when state.locale changes
+        // We need to temporarily set the config locale to get correct translations
+        const translations = t();
+        setI18n(translations);
+    }, []);
+    // Get setup translations based on selected locale
+    const getSetupI18n = () => {
+        // Use dynamic import to get correct language translations
+        if (state.locale === 'ja') {
+            return {
+                welcome: {
+                    title: 'Floqへようこそ!',
+                    subtitle: 'タスクマネージャーを設定しましょう',
+                    instruction: '任意のキーを押して設定を開始...',
+                },
+                language: {
+                    title: '言語を選択',
+                    hint: 'j/k: 選択, Enter: 確定, Esc: 戻る',
+                },
+                theme: {
+                    title: 'テーマを選択',
+                    hint: 'j/k: 選択, Enter: 確定, Esc: 戻る',
+                },
+                viewMode: {
+                    title: '表示モードを選択',
+                    hint: 'j/k: 選択, Enter: 確定, Esc: 戻る',
+                    gtd: 'GTD (Getting Things Done)',
+                    gtdDesc: 'Inbox、次のアクション、連絡待ち、いつかやるリストによるクラシックGTDワークフロー',
+                    kanban: 'Kanbanボード',
+                    kanbanDesc: '3カラムのKanbanボード表示',
+                },
+                database: {
+                    title: 'データベースモードを選択',
+                    local: 'ローカル',
+                    localDesc: 'このデバイスにデータをローカル保存',
+                    turso: 'Turso Cloud',
+                    tursoDesc: 'Turso経由でデバイス間でデータを同期',
+                    hint: 'j/k: 選択, Enter: 確定, Esc: 戻る',
+                },
+                turso: {
+                    urlPrompt: 'TursoデータベースURL',
+                    urlPlaceholder: 'libsql://your-db.turso.io',
+                    urlError: 'URLはlibsql://で始まる必要があります',
+                    tokenPrompt: 'Turso認証トークン',
+                    tokenError: 'トークンは空にできません',
+                    inputHint: 'Enter: 確定, Esc: 戻る',
+                },
+                complete: {
+                    title: '設定完了!',
+                    summary: '設定内容:',
+                    language: '言語',
+                    theme: 'テーマ',
+                    viewMode: '表示モード',
+                    database: 'データベース',
+                    confirm: 'Enterを押してFloqを開始...',
+                },
+            };
+        }
+        return i18n.setup;
+    };
+    const setupI18n = getSetupI18n();
+    const handleSave = () => {
+        const tursoConfig = state.useTurso
+            ? { url: state.tursoUrl, authToken: state.tursoToken }
+            : undefined;
+        saveConfig({
+            locale: state.locale,
+            theme: state.theme,
+            viewMode: state.viewMode,
+            turso: tursoConfig,
+        });
+        onComplete();
+    };
+    const goToPrevStep = () => {
+        switch (step) {
+            case 'welcome':
+                exit();
+                break;
+            case 'language':
+                setStep('welcome');
+                break;
+            case 'theme':
+                setStep('language');
+                break;
+            case 'viewMode':
+                setStep('theme');
+                break;
+            case 'database':
+                setStep('viewMode');
+                break;
+            case 'turso-url':
+                setStep('database');
+                setInputValue('');
+                setInputError(null);
+                break;
+            case 'turso-token':
+                setStep('turso-url');
+                setInputValue(state.tursoUrl);
+                setInputError(null);
+                break;
+            case 'complete':
+                setStep('database');
+                break;
+        }
+    };
+    useInput((input, key) => {
+        // Welcome step - any key continues
+        if (step === 'welcome') {
+            if (key.escape) {
+                exit();
+            }
+            else {
+                setStep('language');
+            }
+            return;
+        }
+        // Input steps (turso-url and turso-token)
+        if (step === 'turso-url' || step === 'turso-token') {
+            if (key.escape) {
+                goToPrevStep();
+            }
+            return;
+        }
+        // Complete step - Enter saves
+        if (step === 'complete') {
+            if (key.return) {
+                handleSave();
+            }
+            else if (key.escape) {
+                goToPrevStep();
+            }
+            return;
+        }
+        // Selection steps
+        if (key.escape) {
+            goToPrevStep();
+            return;
+        }
+        // j/k or arrow navigation
+        if (input === 'j' || key.downArrow) {
+            switch (step) {
+                case 'language':
+                    setLanguageIndex((prev) => (prev < LOCALES.length - 1 ? prev + 1 : 0));
+                    break;
+                case 'theme':
+                    setThemeIndex((prev) => (prev < VALID_THEMES.length - 1 ? prev + 1 : 0));
+                    break;
+                case 'viewMode':
+                    setViewModeIndex((prev) => (prev < VIEW_MODES.length - 1 ? prev + 1 : 0));
+                    break;
+                case 'database':
+                    setDbIndex((prev) => (prev < DB_OPTIONS.length - 1 ? prev + 1 : 0));
+                    break;
+            }
+            return;
+        }
+        if (input === 'k' || key.upArrow) {
+            switch (step) {
+                case 'language':
+                    setLanguageIndex((prev) => (prev > 0 ? prev - 1 : LOCALES.length - 1));
+                    break;
+                case 'theme':
+                    setThemeIndex((prev) => (prev > 0 ? prev - 1 : VALID_THEMES.length - 1));
+                    break;
+                case 'viewMode':
+                    setViewModeIndex((prev) => (prev > 0 ? prev - 1 : VIEW_MODES.length - 1));
+                    break;
+                case 'database':
+                    setDbIndex((prev) => (prev > 0 ? prev - 1 : DB_OPTIONS.length - 1));
+                    break;
+            }
+            return;
+        }
+        // Enter to confirm selection
+        if (key.return) {
+            switch (step) {
+                case 'language':
+                    setState((prev) => ({ ...prev, locale: LOCALES[languageIndex].value }));
+                    setStep('theme');
+                    break;
+                case 'theme':
+                    setState((prev) => ({ ...prev, theme: VALID_THEMES[themeIndex] }));
+                    setStep('viewMode');
+                    break;
+                case 'viewMode':
+                    setState((prev) => ({ ...prev, viewMode: VIEW_MODES[viewModeIndex].value }));
+                    setStep('database');
+                    break;
+                case 'database':
+                    const useTurso = DB_OPTIONS[dbIndex].value === 'turso';
+                    setState((prev) => ({ ...prev, useTurso }));
+                    if (useTurso) {
+                        setStep('turso-url');
+                    }
+                    else {
+                        setStep('complete');
+                    }
+                    break;
+            }
+        }
+    });
+    const handleTursoUrlSubmit = (value) => {
+        if (!value.startsWith('libsql://')) {
+            setInputError(setupI18n.turso.urlError);
+            return;
+        }
+        setState((prev) => ({ ...prev, tursoUrl: value }));
+        setInputValue('');
+        setInputError(null);
+        setStep('turso-token');
+    };
+    const handleTursoTokenSubmit = (value) => {
+        if (!value.trim()) {
+            setInputError(setupI18n.turso.tokenError);
+            return;
+        }
+        setState((prev) => ({ ...prev, tursoToken: value.trim() }));
+        setInputValue('');
+        setInputError(null);
+        setStep('complete');
+    };
+    // Render Welcome step
+    if (step === 'welcome') {
+        return (_jsxs(Box, { flexDirection: "column", padding: 1, alignItems: "center", children: [_jsx(Box, { marginBottom: 1, children: _jsx(Text, { bold: true, color: "cyan", children: `
+  ███████╗██╗      ██████╗  ██████╗
+  ██╔════╝██║     ██╔═══██╗██╔═══██╗
+  █████╗  ██║     ██║   ██║██║   ██║
+  ██╔══╝  ██║     ██║   ██║██║▄▄ ██║
+  ██║     ███████╗╚██████╔╝╚██████╔╝
+  ╚═╝     ╚══════╝ ╚═════╝  ╚══▀▀═╝
+            ` }) }), _jsx(Text, { bold: true, color: "green", children: setupI18n.welcome.title }), _jsx(Text, { color: "white", children: setupI18n.welcome.subtitle }), _jsx(Box, { marginTop: 2, children: _jsx(Text, { dimColor: true, children: setupI18n.welcome.instruction }) })] }));
+    }
+    // Render Language selection
+    if (step === 'language') {
+        return (_jsxs(Box, { flexDirection: "column", padding: 1, children: [_jsx(Text, { bold: true, color: "cyan", children: setupI18n.language.title }), _jsx(Text, { dimColor: true, children: setupI18n.language.hint }), _jsx(Box, { flexDirection: "column", marginTop: 1, children: LOCALES.map((locale, index) => {
+                        const isSelected = index === languageIndex;
+                        return (_jsxs(Box, { flexDirection: "column", marginBottom: 1, children: [_jsxs(Text, { color: isSelected ? 'cyan' : undefined, children: [isSelected ? '› ' : '  ', locale.label] }), _jsxs(Text, { dimColor: true, children: ["    ", locale.desc] })] }, locale.value));
+                    }) })] }));
+    }
+    // Render Theme selection
+    if (step === 'theme') {
+        return (_jsxs(Box, { flexDirection: "column", padding: 1, children: [_jsx(Text, { bold: true, color: "cyan", children: setupI18n.theme.title }), _jsx(Text, { dimColor: true, children: setupI18n.theme.hint }), _jsx(Box, { flexDirection: "column", marginTop: 1, children: VALID_THEMES.map((themeName, index) => {
+                        const theme = themes[themeName];
+                        const isSelected = index === themeIndex;
+                        return (_jsx(Box, { children: _jsxs(Text, { color: isSelected ? 'cyan' : undefined, children: [isSelected ? '› ' : '  ', theme.displayName] }) }, themeName));
+                    }) })] }));
+    }
+    // Render View Mode selection
+    if (step === 'viewMode') {
+        return (_jsxs(Box, { flexDirection: "column", padding: 1, children: [_jsx(Text, { bold: true, color: "cyan", children: setupI18n.viewMode.title }), _jsx(Text, { dimColor: true, children: setupI18n.viewMode.hint }), _jsx(Box, { flexDirection: "column", marginTop: 1, children: VIEW_MODES.map((mode, index) => {
+                        const isSelected = index === viewModeIndex;
+                        return (_jsxs(Box, { flexDirection: "column", marginBottom: 1, children: [_jsxs(Text, { color: isSelected ? 'cyan' : undefined, children: [isSelected ? '› ' : '  ', setupI18n.viewMode[mode.labelKey]] }), _jsxs(Text, { dimColor: true, children: ["    ", setupI18n.viewMode[mode.descKey]] })] }, mode.value));
+                    }) })] }));
+    }
+    // Render Database selection
+    if (step === 'database') {
+        return (_jsxs(Box, { flexDirection: "column", padding: 1, children: [_jsx(Text, { bold: true, color: "cyan", children: setupI18n.database.title }), _jsx(Text, { dimColor: true, children: setupI18n.database.hint }), _jsx(Box, { flexDirection: "column", marginTop: 1, children: DB_OPTIONS.map((option, index) => {
+                        const isSelected = index === dbIndex;
+                        return (_jsxs(Box, { flexDirection: "column", marginBottom: 1, children: [_jsxs(Text, { color: isSelected ? 'cyan' : undefined, children: [isSelected ? '› ' : '  ', setupI18n.database[option.labelKey]] }), _jsxs(Text, { dimColor: true, children: ["    ", setupI18n.database[option.descKey]] })] }, option.value));
+                    }) })] }));
+    }
+    // Render Turso URL input
+    if (step === 'turso-url') {
+        return (_jsxs(Box, { flexDirection: "column", padding: 1, children: [_jsx(Text, { bold: true, color: "cyan", children: setupI18n.turso.urlPrompt }), _jsx(Text, { dimColor: true, children: setupI18n.turso.inputHint }), _jsxs(Box, { marginTop: 1, children: [_jsx(Text, { children: "\u203A " }), _jsx(TextInput, { value: inputValue, onChange: setInputValue, onSubmit: handleTursoUrlSubmit, placeholder: setupI18n.turso.urlPlaceholder })] }), inputError && (_jsx(Box, { marginTop: 1, children: _jsx(Text, { color: "red", children: inputError }) }))] }));
+    }
+    // Render Turso Token input
+    if (step === 'turso-token') {
+        return (_jsxs(Box, { flexDirection: "column", padding: 1, children: [_jsx(Text, { bold: true, color: "cyan", children: setupI18n.turso.tokenPrompt }), _jsx(Text, { dimColor: true, children: setupI18n.turso.inputHint }), _jsxs(Box, { marginTop: 1, children: [_jsx(Text, { children: "\u203A " }), _jsx(TextInput, { value: inputValue, onChange: setInputValue, onSubmit: handleTursoTokenSubmit, placeholder: "" })] }), inputError && (_jsx(Box, { marginTop: 1, children: _jsx(Text, { color: "red", children: inputError }) }))] }));
+    }
+    // Render Complete step
+    if (step === 'complete') {
+        const selectedTheme = themes[state.theme];
+        const dbLabel = state.useTurso
+            ? `Turso (${state.tursoUrl})`
+            : setupI18n.database.local;
+        return (_jsxs(Box, { flexDirection: "column", padding: 1, children: [_jsx(Text, { bold: true, color: "green", children: setupI18n.complete.title }), _jsx(Box, { marginTop: 1, marginBottom: 1, children: _jsx(Text, { bold: true, children: setupI18n.complete.summary }) }), _jsxs(Box, { flexDirection: "column", marginLeft: 2, children: [_jsxs(Text, { children: [_jsxs(Text, { color: "cyan", children: [setupI18n.complete.language, ":"] }), " ", LOCALES.find(l => l.value === state.locale)?.label] }), _jsxs(Text, { children: [_jsxs(Text, { color: "cyan", children: [setupI18n.complete.theme, ":"] }), " ", selectedTheme.displayName] }), _jsxs(Text, { children: [_jsxs(Text, { color: "cyan", children: [setupI18n.complete.viewMode, ":"] }), " ", setupI18n.viewMode[state.viewMode === 'gtd' ? 'gtd' : 'kanban']] }), _jsxs(Text, { children: [_jsxs(Text, { color: "cyan", children: [setupI18n.complete.database, ":"] }), " ", dbLabel] })] }), _jsx(Box, { marginTop: 2, children: _jsx(Text, { dimColor: true, children: setupI18n.complete.confirm }) })] }));
+    }
+    return _jsx(Text, { children: "Unknown step" });
+}

package/dist/ui/ThemeSelector.d.ts

@@ -1,5 +1,5 @@
 import React from 'react';
-import { type ThemeName } from '../config.js';
+import type { ThemeName } from './theme/types.js';
 interface ThemeSelectorProps {
     onSelect: (theme: ThemeName) => void;
 }

package/dist/ui/ThemeSelector.js

@@ -1,17 +1,30 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { Box, Text } from 'ink';
-import { Select } from '@inkjs/ui';
+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 }) {
     const currentTheme = getThemeName();
-    const options = VALID_THEMES.map((themeName) => {
-        const theme = themes[themeName];
-        const isCurrent = themeName === currentTheme;
-        return {
-            label: `${theme.displayName}${isCurrent ? ' (current)' : ''}`,
-            value: themeName,
-        };
+    const initialIndex = VALID_THEMES.indexOf(currentTheme);
+    const [selectedIndex, setSelectedIndex] = useState(initialIndex >= 0 ? initialIndex : 0);
+    useInput((input, key) => {
+        // j or down arrow: move down
+        if (input === 'j' || key.downArrow) {
+            setSelectedIndex((prev) => (prev < VALID_THEMES.length - 1 ? prev + 1 : 0));
+        }
+        // k or up arrow: move up
+        if (input === 'k' || key.upArrow) {
+            setSelectedIndex((prev) => (prev > 0 ? prev - 1 : VALID_THEMES.length - 1));
+        }
+        // Enter: select
+        if (key.return) {
+            onSelect(VALID_THEMES[selectedIndex]);
+        }
     });
-    return (_jsxs(Box, { flexDirection: "column", padding: 1, children: [_jsx(Text, { bold: true, children: "Select a theme:" }), _jsx(Box, { marginTop: 1, children: _jsx(Select, { options: options, onChange: (value) => onSelect(value) }) })] }));
+    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) => {
+                    const theme = themes[themeName];
+                    const isSelected = index === selectedIndex;
+                    const isCurrent = themeName === currentTheme;
+                    return (_jsx(Box, { children: _jsxs(Text, { color: isSelected ? 'cyan' : undefined, children: [isSelected ? '› ' : '  ', theme.displayName, isCurrent ? ' (current)' : ''] }) }, themeName));
+                }) })] }));
 }

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

@@ -1,10 +1,11 @@
 import React from 'react';
-interface FunctionKey {
+interface ActionKey {
     key: string;
     label: string;
 }
-interface FunctionKeyBarProps {
-    keys?: FunctionKey[];
+interface ActionKeyBarProps {
+    keys?: ActionKey[];
 }
-export declare function FunctionKeyBar({ keys }: FunctionKeyBarProps): React.ReactElement;
+export declare function ActionKeyBar({ keys }: ActionKeyBarProps): React.ReactElement;
+export declare const FunctionKeyBar: typeof ActionKeyBar;
 export {};

package/dist/ui/components/FunctionKeyBar.js

@@ -1,19 +1,23 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { jsxs as _jsxs, jsx as _jsx } from "react/jsx-runtime";
 import { Box, Text } from 'ink';
 import { useTheme } from '../theme/index.js';
-const DEFAULT_KEYS = [
-    { key: 'F1', label: 'Help' },
-    { key: 'F2', label: 'Add' },
-    { key: 'F3', label: 'Done' },
-    { key: 'F4', label: 'Next' },
-    { key: 'F5', label: 'Rfrsh' },
-    { key: 'F6', label: '' },
-    { key: 'F7', label: '' },
-    { key: 'F8', label: '' },
-    { key: 'F9', label: '' },
-    { key: 'F10', label: 'Quit' },
-];
-export function FunctionKeyBar({ keys = DEFAULT_KEYS }) {
+import { t } from '../../i18n/index.js';
+export function ActionKeyBar({ keys }) {
     const theme = useTheme();
-    return (_jsx(Box, { children: keys.map((fn, index) => (_jsxs(Box, { marginRight: 0, children: [_jsx(Text, { backgroundColor: theme.colors.fnKeyLabel, color: "white", bold: true, children: fn.key }), _jsx(Text, { backgroundColor: theme.colors.fnKeyText, color: "black", children: fn.label.padEnd(5, ' ') })] }, index))) }));
+    const i18n = t();
+    const kb = i18n.tui.keyBar;
+    const defaultKeys = [
+        { key: 'a', label: kb.add },
+        { key: 'd', label: kb.done },
+        { key: 'n', label: kb.next },
+        { key: 's', label: kb.someday },
+        { key: 'i', label: kb.inbox },
+        { key: 'p', label: kb.project },
+        { key: '?', label: kb.help },
+        { key: 'q', label: kb.quit },
+    ];
+    const displayKeys = keys || defaultKeys;
+    return (_jsx(Box, { children: displayKeys.map((action, index) => (_jsxs(Box, { marginRight: 1, children: [_jsxs(Text, { color: theme.colors.fnKeyLabel, bold: true, children: ["[", action.key, "]"] }), _jsx(Text, { color: theme.colors.fnKeyText, children: action.label })] }, index))) }));
 }
+// Alias for backward compatibility
+export const FunctionKeyBar = ActionKeyBar;

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

@@ -1,6 +1,7 @@
 import React from 'react';
 interface HelpModalProps {
     onClose: () => void;
+    isKanban?: boolean;
 }
-export declare function HelpModal({ onClose }: HelpModalProps): React.ReactElement;
+export declare function HelpModal({ onClose, isKanban }: HelpModalProps): React.ReactElement;
 export {};

package/dist/ui/components/HelpModal.js

@@ -1,11 +1,125 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { Box, Text } from 'ink';
+import { jsxs as _jsxs, jsx as _jsx, Fragment as _Fragment } from "react/jsx-runtime";
+import { useState, useMemo } from 'react';
+import { Box, Text, useInput } from 'ink';
 import { t } from '../../i18n/index.js';
 import { useTheme } from '../theme/index.js';
-export function HelpModal({ onClose }) {
+import { parseChangelog } from '../../changelog.js';
+const VISIBLE_LINES = 12;
+export function HelpModal({ onClose, isKanban = false }) {
+    const [activeTab, setActiveTab] = useState('keybindings');
+    const [scrollOffset, setScrollOffset] = useState(0);
     const i18n = t();
+    const theme = useTheme();
     const help = i18n.tui.help;
+    // Get changelog items for scroll calculation
+    const changelogItems = useMemo(() => {
+        const changelog = parseChangelog();
+        const items = [];
+        for (const entry of changelog.entries.slice(0, 5)) {
+            items.push({ type: 'version', content: entry.version, date: entry.date });
+            for (const section of entry.sections) {
+                items.push({ type: 'section', content: section.type });
+                for (const item of section.items) {
+                    items.push({ type: 'item', content: item });
+                }
+            }
+        }
+        return items;
+    }, []);
+    const maxScroll = Math.max(0, changelogItems.length - VISIBLE_LINES);
+    useInput((input, key) => {
+        // Tab key detection (key.tab or raw tab character)
+        if (key.tab || input === '\t') {
+            setActiveTab(prev => prev === 'keybindings' ? 'whatsNew' : 'keybindings');
+            setScrollOffset(0);
+            return;
+        }
+        // Number keys for direct tab access
+        if (input === '1') {
+            setActiveTab('keybindings');
+            setScrollOffset(0);
+            return;
+        }
+        if (input === '2') {
+            setActiveTab('whatsNew');
+            setScrollOffset(0);
+            return;
+        }
+        // Arrow keys and h/l for tab switching
+        if (input === 'h' || key.leftArrow) {
+            setActiveTab('keybindings');
+            setScrollOffset(0);
+            return;
+        }
+        if (input === 'l' || key.rightArrow) {
+            setActiveTab('whatsNew');
+            setScrollOffset(0);
+            return;
+        }
+        // Scroll in What's New tab
+        if (activeTab === 'whatsNew') {
+            if (input === 'j' || key.downArrow) {
+                setScrollOffset(prev => Math.min(prev + 1, maxScroll));
+                return;
+            }
+            if (input === 'k' || key.upArrow) {
+                setScrollOffset(prev => Math.max(prev - 1, 0));
+                return;
+            }
+        }
+        // Close modal
+        if (key.escape || key.return || input === 'q' || input === ' ') {
+            onClose();
+        }
+    });
+    const formatTitle = (title) => theme.style.headerUppercase ? title.toUpperCase() : title;
+    return (_jsxs(Box, { flexDirection: "column", borderStyle: theme.borders.modal, borderColor: theme.colors.borderActive, paddingX: 2, paddingY: 1, children: [_jsx(Box, { justifyContent: "center", marginBottom: 1, children: _jsxs(Box, { children: [_jsxs(Text, { bold: activeTab === 'keybindings', color: activeTab === 'keybindings' ? theme.colors.secondary : theme.colors.textMuted, inverse: activeTab === 'keybindings', children: [' ', formatTitle(help.keybindingsTab), ' '] }), _jsx(Text, { color: theme.colors.textMuted, children: " \u2502 " }), _jsxs(Text, { bold: activeTab === 'whatsNew', color: activeTab === 'whatsNew' ? theme.colors.secondary : theme.colors.textMuted, inverse: activeTab === 'whatsNew', children: [' ', formatTitle(help.whatsNewTab), ' '] })] }) }), activeTab === 'keybindings' ? (isKanban ? (_jsx(KanbanKeybindingsContent, {})) : (_jsx(GTDKeybindingsContent, {}))) : (_jsx(WhatsNewContent, { items: changelogItems, scrollOffset: scrollOffset, visibleLines: VISIBLE_LINES, maxScroll: maxScroll })), _jsx(Box, { justifyContent: "center", marginTop: 1, children: _jsx(Text, { color: theme.colors.textMuted, children: activeTab === 'whatsNew' && maxScroll > 0
+                        ? `j/k: scroll | ${help.tabHint} | ${help.closeHint}`
+                        : `${help.tabHint} | ${help.closeHint}` }) })] }));
+}
+function GTDKeybindingsContent() {
+    const i18n = t();
+    const help = i18n.tui.help;
+    const theme = useTheme();
+    const formatTitle = (title) => theme.style.headerUppercase ? title.toUpperCase() : title;
+    return (_jsxs(_Fragment, { children: [_jsxs(Box, { flexDirection: "column", marginBottom: 1, children: [_jsx(Text, { bold: true, color: theme.colors.accent, children: formatTitle(help.navigation) }), _jsxs(Box, { paddingLeft: 2, flexDirection: "column", children: [_jsxs(Text, { color: theme.colors.text, children: [_jsx(Text, { color: theme.colors.textHighlight, children: "1-6" }), "      ", help.tabSwitch] }), _jsxs(Text, { color: theme.colors.text, children: [_jsx(Text, { color: theme.colors.textHighlight, children: "h/l \u2190/\u2192" }), "  ", help.prevNextTab] }), _jsxs(Text, { color: theme.colors.text, children: [_jsx(Text, { color: theme.colors.textHighlight, children: "j/k \u2191/\u2193" }), "  ", help.taskSelect] })] })] }), _jsxs(Box, { flexDirection: "column", marginBottom: 1, children: [_jsx(Text, { bold: true, color: theme.colors.accent, children: formatTitle(help.actions) }), _jsxs(Box, { paddingLeft: 2, flexDirection: "column", children: [_jsxs(Text, { color: theme.colors.text, children: [_jsx(Text, { color: theme.colors.textHighlight, children: "a" }), "        ", help.addTask] }), _jsxs(Text, { color: theme.colors.text, children: [_jsx(Text, { color: theme.colors.textHighlight, children: "d" }), "        ", help.completeTask] }), _jsxs(Text, { color: theme.colors.text, children: [_jsx(Text, { color: theme.colors.textHighlight, children: "n" }), "        ", help.moveToNext] }), _jsxs(Text, { color: theme.colors.text, children: [_jsx(Text, { color: theme.colors.textHighlight, children: "s" }), "        ", help.moveToSomeday] }), _jsxs(Text, { color: theme.colors.text, children: [_jsx(Text, { color: theme.colors.textHighlight, children: "w" }), "        ", help.moveToWaiting] }), _jsxs(Text, { color: theme.colors.text, children: [_jsx(Text, { color: theme.colors.textHighlight, children: "i" }), "        ", help.moveToInbox] }), _jsxs(Text, { color: theme.colors.text, children: [_jsx(Text, { color: theme.colors.textHighlight, children: "r" }), "        ", help.refresh] })] })] }), _jsxs(Box, { flexDirection: "column", marginBottom: 1, children: [_jsx(Text, { bold: true, color: theme.colors.accent, children: formatTitle(help.projects) }), _jsxs(Box, { paddingLeft: 2, flexDirection: "column", children: [_jsxs(Text, { color: theme.colors.text, children: [_jsx(Text, { color: theme.colors.textHighlight, children: "p" }), "        ", help.makeProject] }), _jsxs(Text, { color: theme.colors.text, children: [_jsx(Text, { color: theme.colors.textHighlight, children: "P" }), "        ", help.linkToProject] }), _jsxs(Text, { color: theme.colors.text, children: [_jsx(Text, { color: theme.colors.textHighlight, children: "Enter" }), "    ", help.openProject] }), _jsxs(Text, { color: theme.colors.text, children: [_jsx(Text, { color: theme.colors.textHighlight, children: "Esc/b" }), "    ", help.backFromProject] })] })] }), _jsxs(Box, { flexDirection: "column", marginBottom: 1, children: [_jsx(Text, { bold: true, color: theme.colors.accent, children: formatTitle(help.other) }), _jsxs(Box, { paddingLeft: 2, flexDirection: "column", children: [_jsxs(Text, { color: theme.colors.text, children: [_jsx(Text, { color: theme.colors.textHighlight, children: "/" }), "        ", help.searchTasks] }), _jsxs(Text, { color: theme.colors.text, children: [_jsx(Text, { color: theme.colors.textHighlight, children: "?" }), "        ", help.showHelp] }), _jsxs(Text, { color: theme.colors.text, children: [_jsx(Text, { color: theme.colors.textHighlight, children: "q" }), "        ", help.quit] })] })] })] }));
+}
+function KanbanKeybindingsContent() {
+    const i18n = t();
+    const help = i18n.tui.kanbanHelp;
+    const theme = useTheme();
+    const formatTitle = (title) => theme.style.headerUppercase ? title.toUpperCase() : title;
+    return (_jsxs(_Fragment, { children: [_jsxs(Box, { flexDirection: "column", marginBottom: 1, children: [_jsx(Text, { bold: true, color: theme.colors.accent, children: formatTitle(help.navigation) }), _jsxs(Box, { paddingLeft: 2, flexDirection: "column", children: [_jsxs(Text, { color: theme.colors.text, children: [_jsx(Text, { color: theme.colors.textHighlight, children: "h/l \u2190/\u2192" }), "  ", help.columnSwitch] }), _jsxs(Text, { color: theme.colors.text, children: [_jsx(Text, { color: theme.colors.textHighlight, children: "1-3" }), "      ", help.columnDirect] }), _jsxs(Text, { color: theme.colors.text, children: [_jsx(Text, { color: theme.colors.textHighlight, children: "j/k \u2191/\u2193" }), "  ", help.taskSelect] })] })] }), _jsxs(Box, { flexDirection: "column", marginBottom: 1, children: [_jsx(Text, { bold: true, color: theme.colors.accent, children: formatTitle(help.actions) }), _jsxs(Box, { paddingLeft: 2, flexDirection: "column", children: [_jsxs(Text, { color: theme.colors.text, children: [_jsx(Text, { color: theme.colors.textHighlight, children: "a" }), "        ", help.addTask] }), _jsxs(Text, { color: theme.colors.text, children: [_jsx(Text, { color: theme.colors.textHighlight, children: "d" }), "        ", help.completeTask] }), _jsxs(Text, { color: theme.colors.text, children: [_jsx(Text, { color: theme.colors.textHighlight, children: "Enter" }), "    ", help.moveRight] }), _jsxs(Text, { color: theme.colors.text, children: [_jsx(Text, { color: theme.colors.textHighlight, children: "BS" }), "       ", help.moveLeft] })] })] }), _jsxs(Box, { flexDirection: "column", marginBottom: 1, children: [_jsx(Text, { bold: true, color: theme.colors.accent, children: formatTitle(help.other) }), _jsxs(Box, { paddingLeft: 2, flexDirection: "column", children: [_jsxs(Text, { color: theme.colors.text, children: [_jsx(Text, { color: theme.colors.textHighlight, children: "/" }), "        ", help.searchTasks] }), _jsxs(Text, { color: theme.colors.text, children: [_jsx(Text, { color: theme.colors.textHighlight, children: "?" }), "        ", help.showHelp] }), _jsxs(Text, { color: theme.colors.text, children: [_jsx(Text, { color: theme.colors.textHighlight, children: "q" }), "        ", help.quit] })] })] })] }));
+}
+function WhatsNewContent({ items, scrollOffset, visibleLines, maxScroll }) {
+    const i18n = t();
+    const whatsNew = i18n.tui.whatsNew;
     const theme = useTheme();
     const formatTitle = (title) => theme.style.headerUppercase ? title.toUpperCase() : title;
-    return (_jsxs(Box, { flexDirection: "column", borderStyle: theme.borders.modal, borderColor: theme.colors.borderActive, paddingX: 2, paddingY: 1, children: [_jsx(Box, { justifyContent: "center", marginBottom: 1, children: _jsx(Text, { bold: true, color: theme.colors.secondary, children: formatTitle(help.title) }) }), _jsxs(Box, { flexDirection: "column", marginBottom: 1, children: [_jsx(Text, { bold: true, color: theme.colors.accent, children: formatTitle(help.navigation) }), _jsxs(Box, { paddingLeft: 2, flexDirection: "column", children: [_jsxs(Text, { color: theme.colors.text, children: [_jsx(Text, { color: theme.colors.textHighlight, children: "1-5" }), "      ", help.tabSwitch] }), _jsxs(Text, { color: theme.colors.text, children: [_jsx(Text, { color: theme.colors.textHighlight, children: "h/l \u2190/\u2192" }), "  ", help.prevNextTab] }), _jsxs(Text, { color: theme.colors.text, children: [_jsx(Text, { color: theme.colors.textHighlight, children: "j/k \u2191/\u2193" }), "  ", help.taskSelect] })] })] }), _jsxs(Box, { flexDirection: "column", marginBottom: 1, children: [_jsx(Text, { bold: true, color: theme.colors.accent, children: formatTitle(help.actions) }), _jsxs(Box, { paddingLeft: 2, flexDirection: "column", children: [_jsxs(Text, { color: theme.colors.text, children: [_jsx(Text, { color: theme.colors.textHighlight, children: "a" }), "        ", help.addTask] }), _jsxs(Text, { color: theme.colors.text, children: [_jsx(Text, { color: theme.colors.textHighlight, children: "d" }), "        ", help.completeTask] }), _jsxs(Text, { color: theme.colors.text, children: [_jsx(Text, { color: theme.colors.textHighlight, children: "n" }), "        ", help.moveToNext] }), _jsxs(Text, { color: theme.colors.text, children: [_jsx(Text, { color: theme.colors.textHighlight, children: "s" }), "        ", help.moveToSomeday] }), _jsxs(Text, { color: theme.colors.text, children: [_jsx(Text, { color: theme.colors.textHighlight, children: "i" }), "        ", help.moveToInbox] }), _jsxs(Text, { color: theme.colors.text, children: [_jsx(Text, { color: theme.colors.textHighlight, children: "r" }), "        ", help.refresh] })] })] }), _jsxs(Box, { flexDirection: "column", marginBottom: 1, children: [_jsx(Text, { bold: true, color: theme.colors.accent, children: formatTitle(help.projects) }), _jsxs(Box, { paddingLeft: 2, flexDirection: "column", children: [_jsxs(Text, { color: theme.colors.text, children: [_jsx(Text, { color: theme.colors.textHighlight, children: "p" }), "        ", help.makeProject] }), _jsxs(Text, { color: theme.colors.text, children: [_jsx(Text, { color: theme.colors.textHighlight, children: "P" }), "        ", help.linkToProject] }), _jsxs(Text, { color: theme.colors.text, children: [_jsx(Text, { color: theme.colors.textHighlight, children: "Enter" }), "    ", help.openProject] }), _jsxs(Text, { color: theme.colors.text, children: [_jsx(Text, { color: theme.colors.textHighlight, children: "Esc/b" }), "    ", help.backFromProject] })] })] }), _jsxs(Box, { flexDirection: "column", marginBottom: 1, children: [_jsx(Text, { bold: true, color: theme.colors.accent, children: formatTitle(help.other) }), _jsxs(Box, { paddingLeft: 2, flexDirection: "column", children: [_jsxs(Text, { color: theme.colors.text, children: [_jsx(Text, { color: theme.colors.textHighlight, children: "?" }), "        ", help.showHelp] }), _jsxs(Text, { color: theme.colors.text, children: [_jsx(Text, { color: theme.colors.textHighlight, children: "q" }), "        ", help.quit] })] })] }), _jsx(Box, { justifyContent: "center", marginTop: 1, children: _jsx(Text, { color: theme.colors.textMuted, children: help.closeHint }) })] }));
+    const getSectionLabel = (type) => {
+        const labels = {
+            Added: whatsNew.added,
+            Changed: whatsNew.changed,
+            Deprecated: whatsNew.deprecated,
+            Removed: whatsNew.removed,
+            Fixed: whatsNew.fixed,
+            Security: whatsNew.security,
+        };
+        return labels[type] || type;
+    };
+    if (items.length === 0) {
+        return (_jsx(Box, { justifyContent: "center", paddingY: 2, children: _jsx(Text, { color: theme.colors.textMuted, children: whatsNew.noChanges }) }));
+    }
+    const visibleItems = items.slice(scrollOffset, scrollOffset + visibleLines);
+    const showScrollUp = scrollOffset > 0;
+    const showScrollDown = scrollOffset < maxScroll;
+    return (_jsxs(Box, { flexDirection: "column", children: [showScrollUp && (_jsx(Text, { color: theme.colors.textMuted, children: "  \u25B2 scroll up" })), visibleItems.map((item, index) => {
+                if (item.type === 'version') {
+                    return (_jsxs(Text, { bold: true, color: theme.colors.accent, children: ["v", item.content, " ", item.date && _jsxs(Text, { color: theme.colors.textMuted, children: ["(", item.date, ")"] })] }, `${item.content}-${index}`));
+                }
+                if (item.type === 'section') {
+                    return (_jsxs(Text, { color: theme.colors.secondary, children: ['  ', formatTitle(getSectionLabel(item.content)), ":"] }, `${item.content}-${index}`));
+                }
+                return (_jsxs(Text, { color: theme.colors.text, children: ['    ', "\u2022 ", item.content] }, `${item.content}-${index}`));
+            }), showScrollDown && (_jsx(Text, { color: theme.colors.textMuted, children: "  \u25BC scroll down" }))] }));
 }

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

@@ -0,0 +1,6 @@
+import React from 'react';
+interface KanbanBoardProps {
+    onSwitchToGtd?: () => void;
+}
+export declare function KanbanBoard({ onSwitchToGtd }: KanbanBoardProps): React.ReactElement;
+export {};