floq 0.5.0 → 0.6.0

package/dist/ui/components/HelpModal.js

@@ -1,4 +1,4 @@
-import { jsxs as _jsxs, jsx as _jsx, Fragment as _Fragment } from "react/jsx-runtime";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { useState, useMemo } from 'react';
 import { Box, Text, useInput } from 'ink';
 import { t } from '../../i18n/index.js';
@@ -6,32 +6,135 @@ import { useTheme } from '../theme/index.js';
 import { parseChangelog } from '../../changelog.js';
 import { loadConfig, isTursoEnabled, getTursoConfig, getDbPath } from '../../config.js';
 import { CONFIG_FILE, DATA_DIR } from '../../paths.js';
-const VISIBLE_LINES = 12;
+const VISIBLE_LINES = 14;
 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 formatTitle = (title) => theme.style.headerUppercase ? title.toUpperCase() : title;
+    // Build keybindings content
+    const keybindingsContent = useMemo(() => {
+        if (isKanban) {
+            const kHelp = i18n.tui.kanbanHelp;
+            return [
+                { type: 'header', value: kHelp.navigation },
+                { type: 'key', key: 'h/l ←/→', value: kHelp.columnSwitch },
+                { type: 'key', key: '1-3', value: kHelp.columnDirect },
+                { type: 'key', key: 'j/k ↑/↓', value: kHelp.taskSelect },
+                { type: 'header', value: kHelp.actions },
+                { type: 'key', key: 'a', value: kHelp.addTask },
+                { type: 'key', key: 'd', value: kHelp.completeTask },
+                { type: 'key', key: 'm', value: kHelp.moveRight },
+                { type: 'key', key: 'BS', value: kHelp.moveLeft },
+                { type: 'key', key: 'u', value: 'Undo' },
+                { type: 'key', key: 'Ctrl+r', value: 'Redo' },
+                { type: 'header', value: kHelp.settings },
+                { type: 'key', key: 'T', value: kHelp.changeTheme },
+                { type: 'key', key: 'V', value: kHelp.changeViewMode },
+                { type: 'key', key: 'L', value: kHelp.changeLanguage },
+                { type: 'header', value: kHelp.other },
+                { type: 'key', key: '/', value: kHelp.searchTasks },
+                { type: 'key', key: '?', value: kHelp.showHelp },
+                { type: 'key', key: 'q', value: kHelp.quit },
+            ];
+        }
+        return [
+            { type: 'header', value: help.navigation },
+            { type: 'key', key: '1-6', value: help.tabSwitch },
+            { type: 'key', key: 'h/l ←/→', value: help.prevNextTab },
+            { type: 'key', key: 'j/k ↑/↓', value: help.taskSelect },
+            { type: 'header', value: help.actions },
+            { type: 'key', key: 'a', value: help.addTask },
+            { type: 'key', key: 'd', value: help.completeTask },
+            { type: 'key', key: 'n', value: help.moveToNext },
+            { type: 'key', key: 's', value: help.moveToSomeday },
+            { type: 'key', key: 'w', value: help.moveToWaiting },
+            { type: 'key', key: 'i', value: help.moveToInbox },
+            { type: 'key', key: 'r', value: help.refresh },
+            { type: 'key', key: 'u', value: help.undo },
+            { type: 'key', key: 'Ctrl+r', value: help.redo },
+            { type: 'header', value: help.projects },
+            { type: 'key', key: 'p', value: help.makeProject },
+            { type: 'key', key: 'P', value: help.linkToProject },
+            { type: 'key', key: 'Enter', value: help.openProject },
+            { type: 'key', key: 'Esc/b', value: help.backFromProject },
+            { type: 'header', value: help.settings },
+            { type: 'key', key: 'T', value: help.changeTheme },
+            { type: 'key', key: 'V', value: help.changeViewMode },
+            { type: 'key', key: 'L', value: help.changeLanguage },
+            { type: 'header', value: help.other },
+            { type: 'key', key: '/', value: help.searchTasks },
+            { type: 'key', key: '?', value: help.showHelp },
+            { type: 'key', key: 'q', value: help.quit },
+        ];
+    }, [isKanban, help, i18n.tui.kanbanHelp]);
+    // Build info content
+    const infoContent = useMemo(() => {
+        const info = i18n.tui.info;
+        const config = loadConfig();
+        const tursoEnabled = isTursoEnabled();
+        const tursoConfig = tursoEnabled ? getTursoConfig() : undefined;
+        const dbPath = getDbPath();
+        const tursoUrl = tursoConfig ? (() => {
+            try {
+                return new URL(tursoConfig.url).host;
+            }
+            catch {
+                return tursoConfig.url;
+            }
+        })() : '';
+        const lines = [
+            { type: 'header', value: info.settings },
+            { type: 'key', key: info.theme, value: config.theme },
+            { type: 'key', key: info.language, value: config.locale },
+            { type: 'key', key: info.viewMode, value: config.viewMode },
+            { type: 'header', value: info.database },
+            { type: 'key', key: info.dbType, value: tursoEnabled ? info.turso : info.local },
+            { type: 'key', key: info.dbPath, value: dbPath },
+        ];
+        if (tursoEnabled && tursoUrl) {
+            lines.push({ type: 'key', key: info.tursoUrl, value: tursoUrl });
+        }
+        lines.push({ type: 'header', value: info.paths }, { type: 'key', key: info.configFile, value: CONFIG_FILE }, { type: 'key', key: info.dataDir, value: DATA_DIR });
+        return lines;
+    }, [i18n.tui.info]);
+    // Build changelog content
+    const changelogContent = useMemo(() => {
         const changelog = parseChangelog();
+        const whatsNew = i18n.tui.whatsNew;
         const items = [];
+        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;
+        };
         for (const entry of changelog.entries.slice(0, 5)) {
-            items.push({ type: 'version', content: entry.version, date: entry.date });
+            items.push({ type: 'version', value: entry.version, date: entry.date });
             for (const section of entry.sections) {
-                items.push({ type: 'section', content: section.type });
+                items.push({ type: 'section', value: getSectionLabel(section.type) });
                 for (const item of section.items) {
-                    items.push({ type: 'item', content: item });
+                    items.push({ type: 'item', value: item });
                 }
             }
         }
         return items;
-    }, []);
-    const maxScroll = Math.max(0, changelogItems.length - VISIBLE_LINES);
+    }, [i18n.tui.whatsNew]);
+    // Get current content and max scroll
+    const currentContent = activeTab === 'keybindings' ? keybindingsContent
+        : activeTab === 'info' ? infoContent
+            : changelogContent;
+    const maxScroll = Math.max(0, currentContent.length - VISIBLE_LINES);
     const tabs = ['keybindings', 'info', 'whatsNew'];
     useInput((input, key) => {
-        // Tab key detection (key.tab or raw tab character)
+        // Tab key detection
         if (key.tab || input === '\t') {
             setActiveTab(prev => {
                 const currentIndex = tabs.indexOf(prev);
@@ -56,108 +159,39 @@ export function HelpModal({ onClose, isKanban = false }) {
             setScrollOffset(0);
             return;
         }
-        // Arrow keys and h/l for tab switching
-        if (input === 'h' || key.leftArrow) {
-            setActiveTab(prev => {
-                const currentIndex = tabs.indexOf(prev);
-                return tabs[(currentIndex - 1 + tabs.length) % tabs.length];
-            });
-            setScrollOffset(0);
+        // Scroll with j/k or arrows
+        if (input === 'j' || key.downArrow) {
+            setScrollOffset(prev => Math.min(prev + 1, maxScroll));
             return;
         }
-        if (input === 'l' || key.rightArrow) {
-            setActiveTab(prev => {
-                const currentIndex = tabs.indexOf(prev);
-                return tabs[(currentIndex + 1) % tabs.length];
-            });
-            setScrollOffset(0);
+        if (input === 'k' || key.upArrow) {
+            setScrollOffset(prev => Math.max(prev - 1, 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();
             return;
         }
     });
-    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 === 'info', color: activeTab === 'info' ? theme.colors.secondary : theme.colors.textMuted, inverse: activeTab === 'info', children: [' ', formatTitle(help.infoTab), ' '] }), _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, {}))) : activeTab === 'info' ? (_jsx(InfoContent, {})) : (_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(Text, { color: theme.colors.text, children: [_jsx(Text, { color: theme.colors.textHighlight, children: "u" }), "        ", help.undo] }), _jsxs(Text, { color: theme.colors.text, children: [_jsx(Text, { color: theme.colors.textHighlight, children: "Ctrl+r" }), "   ", help.redo] })] })] }), _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.settings) }), _jsxs(Box, { paddingLeft: 2, flexDirection: "column", children: [_jsxs(Text, { color: theme.colors.text, children: [_jsx(Text, { color: theme.colors.textHighlight, children: "T" }), "        ", help.changeTheme] }), _jsxs(Text, { color: theme.colors.text, children: [_jsx(Text, { color: theme.colors.textHighlight, children: "V" }), "        ", help.changeViewMode] }), _jsxs(Text, { color: theme.colors.text, children: [_jsx(Text, { color: theme.colors.textHighlight, children: "L" }), "        ", help.changeLanguage] })] })] }), _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(Text, { color: theme.colors.text, children: [_jsx(Text, { color: theme.colors.textHighlight, children: "u" }), "        Undo"] }), _jsxs(Text, { color: theme.colors.text, children: [_jsx(Text, { color: theme.colors.textHighlight, children: "Ctrl+r" }), "   Redo"] })] })] }), _jsxs(Box, { flexDirection: "column", marginBottom: 1, children: [_jsx(Text, { bold: true, color: theme.colors.accent, children: formatTitle(help.settings) }), _jsxs(Box, { paddingLeft: 2, flexDirection: "column", children: [_jsxs(Text, { color: theme.colors.text, children: [_jsx(Text, { color: theme.colors.textHighlight, children: "T" }), "        ", help.changeTheme] }), _jsxs(Text, { color: theme.colors.text, children: [_jsx(Text, { color: theme.colors.textHighlight, children: "V" }), "        ", help.changeViewMode] }), _jsxs(Text, { color: theme.colors.text, children: [_jsx(Text, { color: theme.colors.textHighlight, children: "L" }), "        ", help.changeLanguage] })] })] }), _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 InfoContent() {
-    const i18n = t();
-    const info = i18n.tui.info;
-    const theme = useTheme();
-    const formatTitle = (title) => theme.style.headerUppercase ? title.toUpperCase() : title;
-    const config = loadConfig();
-    const tursoEnabled = isTursoEnabled();
-    const tursoConfig = tursoEnabled ? getTursoConfig() : undefined;
-    const dbPath = getDbPath();
-    // Get Turso host for display
-    const tursoUrl = tursoConfig ? (() => {
-        try {
-            return new URL(tursoConfig.url).host;
-        }
-        catch {
-            return tursoConfig.url;
-        }
-    })() : '';
-    return (_jsxs(_Fragment, { children: [_jsxs(Box, { flexDirection: "column", marginBottom: 1, children: [_jsx(Text, { bold: true, color: theme.colors.accent, children: formatTitle(info.settings) }), _jsxs(Box, { paddingLeft: 2, flexDirection: "column", children: [_jsxs(Text, { color: theme.colors.text, children: [_jsxs(Text, { color: theme.colors.textHighlight, children: [info.theme, ":"] }), " ", config.theme] }), _jsxs(Text, { color: theme.colors.text, children: [_jsxs(Text, { color: theme.colors.textHighlight, children: [info.language, ":"] }), " ", config.locale] }), _jsxs(Text, { color: theme.colors.text, children: [_jsxs(Text, { color: theme.colors.textHighlight, children: [info.viewMode, ":"] }), " ", config.viewMode] })] })] }), _jsxs(Box, { flexDirection: "column", marginBottom: 1, children: [_jsx(Text, { bold: true, color: theme.colors.accent, children: formatTitle(info.database) }), _jsxs(Box, { paddingLeft: 2, flexDirection: "column", children: [_jsxs(Text, { color: theme.colors.text, children: [_jsxs(Text, { color: theme.colors.textHighlight, children: [info.dbType, ":"] }), " ", tursoEnabled ? info.turso : info.local] }), _jsxs(Text, { color: theme.colors.text, children: [_jsxs(Text, { color: theme.colors.textHighlight, children: [info.dbPath, ":"] }), " ", dbPath] }), tursoEnabled && tursoUrl && (_jsxs(Text, { color: theme.colors.text, children: [_jsxs(Text, { color: theme.colors.textHighlight, children: [info.tursoUrl, ":"] }), " ", tursoUrl] }))] })] }), _jsxs(Box, { flexDirection: "column", marginBottom: 1, children: [_jsx(Text, { bold: true, color: theme.colors.accent, children: formatTitle(info.paths) }), _jsxs(Box, { paddingLeft: 2, flexDirection: "column", children: [_jsxs(Text, { color: theme.colors.text, children: [_jsxs(Text, { color: theme.colors.textHighlight, children: [info.configFile, ":"] }), " ", CONFIG_FILE] }), _jsxs(Text, { color: theme.colors.text, children: [_jsxs(Text, { color: theme.colors.textHighlight, children: [info.dataDir, ":"] }), " ", DATA_DIR] })] })] })] }));
-}
-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;
-    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 visibleContent = currentContent.slice(scrollOffset, scrollOffset + VISIBLE_LINES);
     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" }))] }));
+    const renderLine = (line, index) => {
+        switch (line.type) {
+            case 'header':
+                return (_jsx(Text, { bold: true, color: theme.colors.accent, children: formatTitle(line.value) }, index));
+            case 'key':
+                return (_jsxs(Text, { color: theme.colors.text, children: ['  ', _jsx(Text, { color: theme.colors.textHighlight, children: (line.key || '').padEnd(10) }), " ", line.value] }, index));
+            case 'version':
+                return (_jsxs(Text, { bold: true, color: theme.colors.accent, children: ["v", line.value, " ", line.date && _jsxs(Text, { color: theme.colors.textMuted, children: ["(", line.date, ")"] })] }, index));
+            case 'section':
+                return (_jsxs(Text, { color: theme.colors.secondary, children: ['  ', formatTitle(line.value), ":"] }, index));
+            case 'item':
+                return (_jsxs(Text, { color: theme.colors.text, children: ['    ', "\u2022 ", line.value] }, index));
+            default:
+                return (_jsx(Text, { color: theme.colors.text, children: line.value }, index));
+        }
+    };
+    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 === 'info', color: activeTab === 'info' ? theme.colors.secondary : theme.colors.textMuted, inverse: activeTab === 'info', children: [' ', formatTitle(help.infoTab), ' '] }), _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), ' '] })] }) }), _jsxs(Box, { flexDirection: "column", height: VISIBLE_LINES + 2, children: [showScrollUp && (_jsx(Text, { color: theme.colors.textMuted, children: "  \u25B2 scroll up (k)" })), !showScrollUp && _jsx(Text, { children: " " }), visibleContent.map((line, index) => renderLine(line, index)), showScrollDown && (_jsx(Text, { color: theme.colors.textMuted, children: "  \u25BC scroll down (j)" })), !showScrollDown && _jsx(Text, { children: " " })] }), _jsx(Box, { justifyContent: "center", marginTop: 1, children: _jsxs(Text, { color: theme.colors.textMuted, children: [maxScroll > 0 ? `j/k: scroll | ` : '', help.tabHint, " | ", help.closeHint] }) })] }));
 }

package/dist/ui/components/KanbanColumn.js

@@ -1,8 +1,60 @@
-import { jsxs as _jsxs, jsx as _jsx } from "react/jsx-runtime";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { Box, Text } from 'ink';
 import { useTheme } from '../theme/index.js';
+// Round border characters (DQ style)
+const BORDER = {
+    topLeft: '╭',
+    topRight: '╮',
+    bottomLeft: '╰',
+    bottomRight: '╯',
+    horizontal: '─',
+    vertical: '│',
+};
+const SHADOW = '░';
+// Calculate display width of string (full-width chars = 2, half-width = 1)
+function getDisplayWidth(str) {
+    let width = 0;
+    for (const char of str) {
+        const code = char.charCodeAt(0);
+        if ((code >= 0x1100 && code <= 0x115F) ||
+            (code >= 0x2E80 && code <= 0x9FFF) ||
+            (code >= 0xAC00 && code <= 0xD7AF) ||
+            (code >= 0xF900 && code <= 0xFAFF) ||
+            (code >= 0xFE10 && code <= 0xFE1F) ||
+            (code >= 0xFE30 && code <= 0xFE6F) ||
+            (code >= 0xFF00 && code <= 0xFF60) ||
+            (code >= 0xFFE0 && code <= 0xFFE6) ||
+            (code >= 0x20000 && code <= 0x2FFFF)) {
+            width += 2;
+        }
+        else {
+            width += 1;
+        }
+    }
+    return width;
+}
 export function KanbanColumn({ title, tasks, isActive, selectedTaskIndex, columnIndex, }) {
     const theme = useTheme();
+    const isLastColumn = columnIndex === 2;
+    const showShadow = theme.uiStyle === 'titled-box' && isLastColumn;
+    // Use TitledBox style for dragon-quest theme
+    if (theme.uiStyle === 'titled-box') {
+        const color = isActive ? theme.colors.borderActive : theme.colors.border;
+        const shadowColor = theme.colors.muted;
+        const titleText = `${title} (${tasks.length})`;
+        const titleLength = getDisplayWidth(titleText);
+        // Fixed width for each column (will be stretched by flexGrow)
+        const innerWidth = 24;
+        const leftDashes = 2;
+        const titlePadding = 2;
+        const rightDashes = Math.max(2, innerWidth - leftDashes - titlePadding - titleLength);
+        return (_jsxs(Box, { flexDirection: "column", flexGrow: 1, flexBasis: 0, marginRight: columnIndex < 2 ? 1 : 0, children: [_jsxs(Box, { children: [_jsx(Text, { color: color, children: BORDER.topLeft }), _jsxs(Text, { color: color, children: [BORDER.horizontal.repeat(leftDashes), " "] }), _jsx(Text, { color: isActive ? theme.colors.accent : theme.colors.textMuted, bold: isActive, children: titleText }), _jsxs(Text, { color: color, children: [" ", BORDER.horizontal.repeat(rightDashes)] }), _jsx(Text, { color: color, children: BORDER.topRight }), showShadow && _jsx(Text, { children: " " })] }), _jsxs(Box, { flexDirection: "column", minHeight: 8, children: [tasks.length === 0 ? (_jsxs(Box, { children: [_jsx(Text, { color: color, children: BORDER.vertical }), _jsx(Box, { paddingX: 1, flexGrow: 1, children: _jsx(Text, { color: theme.colors.textMuted, italic: true, children: "-" }) }), _jsx(Text, { color: color, children: BORDER.vertical }), showShadow && _jsx(Text, { color: shadowColor, children: SHADOW })] })) : (tasks.map((task, index) => {
+                            const isSelected = isActive && index === selectedTaskIndex;
+                            const shortId = task.id.slice(0, 6);
+                            return (_jsxs(Box, { children: [_jsx(Text, { color: color, children: BORDER.vertical }), _jsx(Box, { paddingX: 1, flexGrow: 1, children: _jsxs(Text, { color: isSelected ? theme.colors.textSelected : theme.colors.text, bold: isSelected, children: [isSelected ? theme.style.selectedPrefix : theme.style.unselectedPrefix, "[", shortId, "] ", task.title] }) }), _jsx(Text, { color: color, children: BORDER.vertical }), showShadow && _jsx(Text, { color: shadowColor, children: SHADOW })] }, task.id));
+                        })), Array.from({ length: Math.max(0, 8 - Math.max(1, tasks.length)) }).map((_, i) => (_jsxs(Box, { children: [_jsx(Text, { color: color, children: BORDER.vertical }), _jsx(Box, { paddingX: 1, flexGrow: 1, children: _jsx(Text, { children: " " }) }), _jsx(Text, { color: color, children: BORDER.vertical }), showShadow && _jsx(Text, { color: shadowColor, children: SHADOW })] }, `empty-${i}`)))] }), _jsxs(Box, { children: [_jsx(Text, { color: color, children: BORDER.bottomLeft }), _jsx(Text, { color: color, children: BORDER.horizontal.repeat(innerWidth) }), _jsx(Text, { color: color, children: BORDER.bottomRight }), showShadow && _jsx(Text, { color: shadowColor, children: SHADOW })] }), showShadow && (_jsx(Box, { children: _jsxs(Text, { color: shadowColor, children: [" ", SHADOW.repeat(innerWidth + 2)] }) }))] }));
+    }
+    // Default style
     return (_jsxs(Box, { flexDirection: "column", flexGrow: 1, flexBasis: 0, borderStyle: theme.borders.list, borderColor: isActive ? theme.colors.borderActive : theme.colors.border, marginRight: columnIndex < 2 ? 1 : 0, children: [_jsx(Box, { paddingX: 1, justifyContent: "center", borderStyle: undefined, children: _jsxs(Text, { bold: true, color: isActive ? theme.colors.primary : theme.colors.textMuted, inverse: isActive && theme.style.tabActiveInverse, children: [title, " (", tasks.length, ")"] }) }), _jsx(Box, { flexDirection: "column", paddingX: 1, paddingY: 1, minHeight: 8, children: tasks.length === 0 ? (_jsx(Text, { color: theme.colors.textMuted, italic: true, children: "-" })) : (tasks.map((task, index) => {
                     const isSelected = isActive && index === selectedTaskIndex;
                     const shortId = task.id.slice(0, 6);

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

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