idlerpg.sh 0.1.0

package/dist/tui/GameUI.js

@@ -0,0 +1,2116 @@
+/**
+ * Game UI - Main game interface with multiple modes
+ * Now uses section-based architecture for unified interactions
+ */
+
+!function(){try{var e="undefined"!=typeof window?window:"undefined"!=typeof global?global:"undefined"!=typeof globalThis?globalThis:"undefined"!=typeof self?self:{},n=(new e.Error).stack;n&&(e._sentryDebugIds=e._sentryDebugIds||{},e._sentryDebugIds[n]="7d089040-391e-5d75-84d0-9dd7c0b0e3ea")}catch(e){}}();
+import { getScreen, ANSI, MAP_SYMBOLS } from './Screen.js';
+import { getInput } from './Input.js';
+import { getStrings } from '../i18n/index.js';
+// Section-based architecture
+import { SectionManager, createGridLayout } from './core/SectionManager.js';
+import { MapSection } from './sections/MapSection.js';
+import { StatusSection } from './sections/StatusSection.js';
+import { ActionsSection } from './sections/ActionsSection.js';
+import { EventsSection } from './sections/EventsSection.js';
+/**
+ * Main Game UI class
+ */
+export class GameUI {
+    // Global padding for entire UI
+    PADDING = 2;
+    screen;
+    input;
+    mode = 'explore';
+    refreshInterval = null;
+    eventLog = [];
+    maxLogLines = 8;
+    inputBuffer = '';
+    inputPrompt = '> ';
+    // Dialog state
+    dialogNPC = null;
+    dialogOptions = [];
+    dialogHistory = [];
+    isWaitingForAI = false;
+    // Combat state cache
+    combatTurnLog = [];
+    // Callbacks
+    onCommand = null;
+    onDialogInput = null;
+    // Modal state
+    activeModal = null;
+    modalSelectedIndex = 0;
+    modalScrollOffset = 0;
+    modalActiveTab = 0;
+    // Section navigation state (legacy - kept for compatibility)
+    // Sections: 'map' (top-left), 'status' (mid-left), 'actions' (right), 'events' (bottom)
+    focusedSection = 'actions';
+    inSection = false;
+    sectionSelectedIndex = 0;
+    sectionScrollOffset = 0;
+    // New section-based architecture
+    sectionManager;
+    mapSection;
+    statusSection;
+    actionsSection;
+    eventsSection;
+    useSectionArchitecture = true; // Enable new architecture
+    constructor() {
+        this.screen = getScreen();
+        this.input = getInput();
+        // Initialize section-based architecture
+        this.sectionManager = new SectionManager();
+        this.mapSection = new MapSection();
+        this.statusSection = new StatusSection();
+        this.actionsSection = new ActionsSection();
+        this.eventsSection = new EventsSection();
+        // Register sections
+        this.sectionManager.register(this.mapSection);
+        this.sectionManager.register(this.statusSection);
+        this.sectionManager.register(this.actionsSection);
+        this.sectionManager.register(this.eventsSection);
+        // Set up navigation layout
+        // +-------+--------+
+        // |  map  | actions|
+        // +-------+        |
+        // | status|        |
+        // +-------+--------+
+        // |     events     |
+        // +----------------+
+        const layout = createGridLayout([
+            ['map', 'actions'],
+            ['status', 'actions'],
+            ['events', 'events'],
+        ]);
+        this.sectionManager.setLayout(layout);
+        this.sectionManager.setDefaultFocus('actions');
+        // Set up section callbacks
+        this.setupSectionCallbacks();
+    }
+    /**
+     * Set up callbacks for section interactions
+     */
+    setupSectionCallbacks() {
+        // Map travel callback
+        this.mapSection.setOnTravel((roomIndex) => {
+            if (this.onCommand) {
+                this.onCommand(String(roomIndex + 1));
+            }
+        });
+        // Actions NPC select callback
+        this.actionsSection.setOnNpcSelect((npcIndex) => {
+            if (this.onCommand) {
+                this.onCommand('npc');
+                setTimeout(() => this.onCommand?.(String(npcIndex + 1)), 50);
+            }
+        });
+        // Actions modal callback
+        this.actionsSection.setOnOpenModal((modal) => {
+            this.openModal(modal);
+        });
+    }
+    // Size warning state
+    showingSizeWarning = false;
+    /**
+     * Initialize UI
+     */
+    async initialize() {
+        this.screen.hideCursor();
+        this.input.start();
+        // Set up key handling
+        this.input.onKey((key) => this.handleKeypress(key));
+        this.input.onLine((line) => this.handleLine(line));
+        // Set up resize handling
+        this.screen.onResize((width, height) => this.handleResize(width, height));
+        // Initialize section manager focus
+        if (this.useSectionArchitecture) {
+            this.sectionManager.focusDefault();
+        }
+        // Start in explore mode
+        this.setMode('explore');
+    }
+    /**
+     * Handle terminal resize
+     */
+    handleResize(width, height) {
+        const sizeCheck = this.screen.checkMinimumSize();
+        if (!sizeCheck.valid) {
+            // Terminal too small - show warning
+            this.showingSizeWarning = true;
+            this.screen.renderSizeWarning();
+        }
+        else {
+            // Size is OK - always redraw after resize
+            const wasShowingWarning = this.showingSizeWarning;
+            this.showingSizeWarning = false;
+            this.screen.clear();
+            // Force redraw based on current mode
+            if (this.mode === 'explore' && this.cachedState) {
+                this.renderMainScreen(this.cachedState, this.cachedNPCs, this.cachedQuests);
+            }
+            else if (this.mode === 'dialog' && this.dialogNPC) {
+                this.renderDialogScreen(this.dialogNPC, this.dialogHistory, this.dialogOptions, this.isWaitingForAI);
+            }
+            else if (this.mode === 'combat' || this.mode === 'travel') {
+                // Combat and travel modes will re-render on next tick
+                // Just force a clear for now
+            }
+            this.screen.forceRedraw();
+        }
+    }
+    /**
+     * Check if currently showing size warning
+     */
+    isShowingSizeWarning() {
+        return this.showingSizeWarning;
+    }
+    /**
+     * Cleanup
+     */
+    cleanup() {
+        this.stopRefresh();
+        this.input.stop();
+        this.screen.cleanup();
+    }
+    /**
+     * Set UI mode
+     */
+    setMode(mode) {
+        const prevMode = this.mode;
+        this.mode = mode;
+        // Reset menu selection on mode change
+        if (mode === 'explore') {
+            this.menuSelectedIndex = 0;
+        }
+        // Handle mode transitions
+        // Enable refresh for all modes to keep screen updated (clock, input display, etc.)
+        if (mode === 'travel' || mode === 'combat') {
+            this.startRefresh(100); // 10 FPS for smooth combat/travel
+        }
+        else if (mode === 'explore' || mode === 'dialog') {
+            this.startRefresh(200); // 5 FPS for explore/dialog (input feedback + clock)
+        }
+        else {
+            this.stopRefresh();
+        }
+        // Explore mode uses raw input for direct keyboard navigation
+        // Dialog mode uses line input for text entry
+        if (mode === 'dialog') {
+            this.input.setMode('line');
+        }
+        else {
+            this.input.setMode('raw');
+        }
+    }
+    // State cache for refresh
+    cachedState = null;
+    cachedNPCs = [];
+    cachedQuests = [];
+    /**
+     * Start screen refresh
+     */
+    startRefresh(intervalMs) {
+        this.stopRefresh();
+        this.refreshInterval = setInterval(() => {
+            // Skip refresh if showing size warning or resizing
+            if (this.showingSizeWarning || this.screen.isCurrentlyResizing()) {
+                return;
+            }
+            // Update input buffer from InputManager
+            this.inputBuffer = this.input.getInputBuffer();
+            // Render modal if active
+            if (this.activeModal) {
+                this.renderModal();
+                return;
+            }
+            // Re-render the current mode with cached data
+            if (this.mode === 'explore' && this.cachedState) {
+                this.renderMainScreen(this.cachedState, this.cachedNPCs, this.cachedQuests);
+            }
+            else if (this.mode === 'dialog' && this.dialogNPC) {
+                this.renderDialogScreen(this.dialogNPC, this.dialogHistory, this.dialogOptions, this.isWaitingForAI);
+            }
+            else {
+                this.screen.render();
+            }
+        }, intervalMs);
+    }
+    /**
+     * Stop screen refresh
+     */
+    stopRefresh() {
+        if (this.refreshInterval) {
+            clearInterval(this.refreshInterval);
+            this.refreshInterval = null;
+        }
+    }
+    /**
+     * Handle keypress
+     */
+    handleKeypress(key) {
+        // Global hotkeys
+        if (key.ctrl && key.name === 'c') {
+            this.cleanup();
+            process.exit(0);
+        }
+        // Handle modal input first
+        if (this.activeModal) {
+            this.handleModalKey(key);
+            return;
+        }
+        // Mode-specific handling
+        switch (this.mode) {
+            case 'combat':
+                this.handleCombatKey(key);
+                break;
+            case 'travel':
+                this.handleTravelKey(key);
+                break;
+            case 'menu':
+                this.handleMenuKey(key);
+                break;
+            case 'explore':
+                // Menu-based navigation in explore mode
+                this.handleExploreKey(key);
+                break;
+            case 'dialog':
+                // Handled by line mode
+                this.inputBuffer = this.input.getInputBuffer();
+                break;
+        }
+    }
+    /**
+     * Handle line input
+     */
+    handleLine(line) {
+        if (this.mode === 'explore' && this.onCommand) {
+            this.onCommand(line.trim().toLowerCase());
+        }
+        else if (this.mode === 'dialog' && this.onDialogInput) {
+            this.onDialogInput(line);
+        }
+        this.inputBuffer = '';
+    }
+    /**
+     * Handle explore mode keypress (section-based navigation)
+     */
+    handleExploreKey(key) {
+        // Modal shortcuts - always work regardless of section state
+        const modalKeys = {
+            'i': 'inventory',
+            'c': 'character',
+            'q': 'quests',
+            'w': 'workshop',
+            'm': 'menu',
+        };
+        if (key.raw && modalKeys[key.raw.toLowerCase()]) {
+            this.openModal(modalKeys[key.raw.toLowerCase()]);
+            return;
+        }
+        // Quick number shortcuts for travel - always work
+        if (key.raw && /^[1-9]$/.test(key.raw) && this.onCommand) {
+            this.onCommand(key.raw);
+            return;
+        }
+        // Other global shortcuts (only when not in a section)
+        const globalShortcuts = {
+            'n': 'npc',
+            'h': 'help',
+            's': 'save',
+            'l': 'load',
+        };
+        // Use new section-based architecture for key handling
+        if (this.useSectionArchitecture) {
+            // Global shortcuts only work when not entered in a section
+            if (!this.sectionManager.isAnyEntered() && key.raw) {
+                const cmd = globalShortcuts[key.raw.toLowerCase()];
+                if (cmd && this.onCommand) {
+                    this.onCommand(cmd);
+                    return;
+                }
+            }
+            // Delegate to section manager
+            if (this.sectionManager.handleKey(key)) {
+                return;
+            }
+            return;
+        }
+        // Legacy handling (fallback)
+        if (key.raw) {
+            const cmd = globalShortcuts[key.raw.toLowerCase()];
+            if (cmd && this.onCommand) {
+                this.onCommand(cmd);
+                return;
+            }
+        }
+        // Section-based navigation (legacy)
+        if (this.inSection) {
+            this.handleInSectionKey(key);
+        }
+        else {
+            this.handleSectionNavigationKey(key);
+        }
+    }
+    /**
+     * Handle navigation between sections
+     */
+    handleSectionNavigationKey(key) {
+        // Section layout:
+        // +-------+--------+
+        // |  map  | actions|
+        // +-------+        |
+        // | status|        |
+        // +-------+--------+
+        // |     events     |
+        // +----------------+
+        switch (key.name) {
+            case 'up':
+            case 'k':
+                if (this.focusedSection === 'events') {
+                    this.focusedSection = 'status';
+                }
+                else if (this.focusedSection === 'status') {
+                    this.focusedSection = 'map';
+                }
+                break;
+            case 'down':
+            case 'j':
+                if (this.focusedSection === 'map') {
+                    this.focusedSection = 'status';
+                }
+                else if (this.focusedSection === 'status' || this.focusedSection === 'actions') {
+                    this.focusedSection = 'events';
+                }
+                break;
+            case 'left':
+            case 'h':
+                if (this.focusedSection === 'actions') {
+                    this.focusedSection = 'map';
+                }
+                break;
+            case 'right':
+            case 'l':
+                if (this.focusedSection === 'map' || this.focusedSection === 'status') {
+                    this.focusedSection = 'actions';
+                }
+                break;
+            case 'return':
+            case 'space':
+                // Enter the focused section
+                this.inSection = true;
+                this.sectionSelectedIndex = 0;
+                this.sectionScrollOffset = 0;
+                break;
+            case 'escape':
+                // Show system hints
+                this.addEventLog('[S] Save  [L] Load  [H] Help');
+                break;
+        }
+    }
+    /**
+     * Handle navigation within a section
+     */
+    handleInSectionKey(key) {
+        switch (key.name) {
+            case 'escape':
+                // Exit the section
+                this.inSection = false;
+                break;
+            case 'up':
+            case 'k':
+                this.sectionSelectedIndex = Math.max(0, this.sectionSelectedIndex - 1);
+                this.ensureSectionItemVisible();
+                break;
+            case 'down':
+            case 'j':
+                this.sectionSelectedIndex++;
+                this.ensureSectionItemVisible();
+                break;
+            case 'return':
+            case 'space':
+                this.activateSectionItem();
+                break;
+        }
+    }
+    /**
+     * Ensure the selected item in a section is visible
+     */
+    ensureSectionItemVisible() {
+        const maxVisible = this.getSectionMaxVisible();
+        if (this.sectionSelectedIndex < this.sectionScrollOffset) {
+            this.sectionScrollOffset = this.sectionSelectedIndex;
+        }
+        else if (this.sectionSelectedIndex >= this.sectionScrollOffset + maxVisible) {
+            this.sectionScrollOffset = this.sectionSelectedIndex - maxVisible + 1;
+        }
+    }
+    /**
+     * Get max visible items for current section
+     */
+    getSectionMaxVisible() {
+        const { height } = this.screen.getSize();
+        switch (this.focusedSection) {
+            case 'map':
+                return 4; // Connected rooms
+            case 'actions':
+                return Math.max(1, Math.floor(height * 0.4) - 4);
+            case 'events':
+                return Math.max(1, Math.floor(height * 0.25) - 2);
+            default:
+                return 5;
+        }
+    }
+    /**
+     * Activate the selected item in current section
+     */
+    activateSectionItem() {
+        switch (this.focusedSection) {
+            case 'map':
+                // Travel to selected room
+                if (this.cachedState) {
+                    const connections = this.cachedState.currentRoom.connections;
+                    if (this.sectionSelectedIndex < connections.length && this.onCommand) {
+                        this.onCommand(String(this.sectionSelectedIndex + 1));
+                        this.inSection = false;
+                    }
+                }
+                break;
+            case 'actions':
+                // Activate selected action
+                const item = this.menuItems[this.sectionSelectedIndex];
+                if (item) {
+                    if (item.type === 'npc') {
+                        this.onCommand?.('npc');
+                        const npcIndex = parseInt(item.id.replace('npc_', ''), 10);
+                        setTimeout(() => this.onCommand?.(String(npcIndex + 1)), 50);
+                    }
+                    else if (item.type === 'action') {
+                        const modalActions = {
+                            'inventory': 'inventory',
+                            'character': 'character',
+                            'quests': 'quests',
+                            'workshop': 'workshop',
+                        };
+                        if (modalActions[item.id]) {
+                            this.openModal(modalActions[item.id]);
+                        }
+                    }
+                    this.inSection = false;
+                }
+                break;
+            case 'events':
+                // Events are read-only, just show a message
+                this.addEventLog('(Events are read-only)');
+                break;
+        }
+    }
+    /**
+     * Select the currently highlighted menu item
+     */
+    selectCurrentMenuItem() {
+        if (this.menuItems.length === 0)
+            return;
+        const item = this.menuItems[this.menuSelectedIndex];
+        if (!item)
+            return;
+        switch (item.type) {
+            case 'travel':
+                // Extract room index from id (e.g., 'travel_0' -> '1')
+                const travelIndex = parseInt(item.id.replace('travel_', ''), 10);
+                this.onCommand?.(String(travelIndex + 1));
+                break;
+            case 'npc':
+                // First enter NPC mode, then select
+                this.onCommand?.('npc');
+                // The npc id contains the index
+                const npcIndex = parseInt(item.id.replace('npc_', ''), 10);
+                setTimeout(() => this.onCommand?.(String(npcIndex + 1)), 50);
+                break;
+            case 'action':
+                // Open modal for inventory, character, quests, workshop
+                const modalActions = {
+                    'inventory': 'inventory',
+                    'character': 'character',
+                    'quests': 'quests',
+                    'workshop': 'workshop',
+                };
+                if (modalActions[item.id]) {
+                    this.openModal(modalActions[item.id]);
+                }
+                break;
+        }
+    }
+    /**
+     * Open a modal screen
+     */
+    openModal(modal) {
+        this.activeModal = modal;
+        this.modalSelectedIndex = 0;
+        this.modalScrollOffset = 0;
+        this.modalActiveTab = 0;
+        this.renderModal();
+    }
+    /**
+     * Close the active modal
+     */
+    closeModal() {
+        this.activeModal = null;
+        // Force redraw of main screen
+        if (this.cachedState) {
+            this.renderMainScreen(this.cachedState, this.cachedNPCs, this.cachedQuests);
+        }
+    }
+    /**
+     * Handle modal key input
+     */
+    handleModalKey(key) {
+        // Character modal has special handling for editing
+        if (this.activeModal === 'character') {
+            // Only allow escape to close when not editing
+            if (key.name === 'escape' && !this.characterEditField) {
+                this.closeModal();
+                return;
+            }
+            // Close on 'c' key when not editing
+            if (key.raw?.toLowerCase() === 'c' && !this.characterEditField) {
+                this.closeModal();
+                return;
+            }
+            this.handleCharacterModalKey(key);
+            return;
+        }
+        // Close modal on Escape or same key
+        if (key.name === 'escape') {
+            this.closeModal();
+            return;
+        }
+        // Close on same key that opened it
+        const modalKeys = {
+            'i': 'inventory',
+            'c': 'character',
+            'q': 'quests',
+            'w': 'workshop',
+            'm': 'menu',
+        };
+        if (key.raw && modalKeys[key.raw.toLowerCase()] === this.activeModal) {
+            this.closeModal();
+            return;
+        }
+        // Tab switching for inventory
+        if (this.activeModal === 'inventory' && key.raw && /^[1-5]$/.test(key.raw)) {
+            this.modalActiveTab = parseInt(key.raw) - 1;
+            this.modalSelectedIndex = 0;
+            this.modalScrollOffset = 0;
+            this.renderModal();
+            return;
+        }
+        // Menu modal special handling
+        if (this.activeModal === 'menu') {
+            this.handleMenuModalKey(key);
+            return;
+        }
+        // Navigation
+        switch (key.name) {
+            case 'up':
+            case 'k':
+                this.modalSelectedIndex = Math.max(0, this.modalSelectedIndex - 1);
+                this.renderModal();
+                break;
+            case 'down':
+            case 'j':
+                this.modalSelectedIndex++;
+                this.renderModal();
+                break;
+            case 'left':
+            case 'h':
+                if (this.modalActiveTab > 0) {
+                    this.modalActiveTab--;
+                    this.modalSelectedIndex = 0;
+                    this.renderModal();
+                }
+                break;
+            case 'right':
+            case 'l':
+                this.modalActiveTab++;
+                this.modalSelectedIndex = 0;
+                this.renderModal();
+                break;
+        }
+    }
+    /**
+     * Handle menu modal key presses
+     */
+    handleMenuModalKey(key) {
+        const menuItems = ['save', 'load', 'quit'];
+        switch (key.name) {
+            case 'up':
+            case 'k':
+                this.modalSelectedIndex = Math.max(0, this.modalSelectedIndex - 1);
+                this.renderModal();
+                break;
+            case 'down':
+            case 'j':
+                this.modalSelectedIndex = Math.min(menuItems.length - 1, this.modalSelectedIndex + 1);
+                this.renderModal();
+                break;
+            case 'return':
+                const action = menuItems[this.modalSelectedIndex];
+                this.closeModal();
+                if (this.onCommand) {
+                    this.onCommand(action);
+                }
+                break;
+        }
+        // Quick shortcuts within menu
+        if (key.raw) {
+            const shortcuts = {
+                's': 'save',
+                'l': 'load',
+                'q': 'quit',
+            };
+            const cmd = shortcuts[key.raw.toLowerCase()];
+            if (cmd) {
+                this.closeModal();
+                if (this.onCommand) {
+                    this.onCommand(cmd);
+                }
+            }
+        }
+    }
+    /**
+     * Render the active modal
+     */
+    renderModal() {
+        if (!this.activeModal || !this.cachedState)
+            return;
+        const { width: screenWidth, height: screenHeight } = this.screen.getSize();
+        this.screen.clear();
+        // Apply global padding
+        const px = this.PADDING;
+        const py = this.PADDING;
+        const width = screenWidth - this.PADDING * 2;
+        const height = screenHeight - this.PADDING * 2;
+        switch (this.activeModal) {
+            case 'inventory':
+                this.renderInventoryModal(px, py, width, height);
+                break;
+            case 'character':
+                this.renderCharacterModal(px, py, width, height);
+                break;
+            case 'quests':
+                this.renderQuestsModal(px, py, width, height);
+                break;
+            case 'workshop':
+                this.renderWorkshopModal(px, py, width, height);
+                break;
+            case 'menu':
+                this.renderMenuModal(px, py, width, height);
+                break;
+        }
+        this.screen.render();
+    }
+    /**
+     * Render inventory modal
+     */
+    renderInventoryModal(px, py, width, height) {
+        const player = this.cachedState?.player;
+        if (!player)
+            return;
+        // Full screen modal
+        this.screen.drawBox(px, py, width, height, 'Inventory', true);
+        this.screen.write(px + width - 15, py + 1, 'Esc/I to close', ANSI.fg.gray);
+        // Tabs
+        const tabs = ['All', 'Weapons', 'Armor', 'Items', 'Materials'];
+        let tabX = px + 2;
+        for (let i = 0; i < tabs.length; i++) {
+            const isActive = i === this.modalActiveTab;
+            const fg = isActive ? ANSI.fg.black : ANSI.fg.white;
+            const bg = isActive ? ANSI.bg.cyan : undefined;
+            this.screen.write(tabX, py + 2, ` [${i + 1}] ${tabs[i]} `, fg, bg);
+            tabX += tabs[i].length + 7;
+        }
+        // Items list
+        const items = player.inventory;
+        const listY = py + 4;
+        const listHeight = height - 8;
+        this.screen.drawBox(px + 1, listY, Math.floor(width * 0.5), listHeight, 'Items');
+        if (items.length === 0) {
+            this.screen.write(px + 3, listY + 2, 'No items in inventory', ANSI.fg.gray);
+        }
+        else {
+            const maxVisible = listHeight - 2;
+            for (let i = 0; i < Math.min(items.length, maxVisible); i++) {
+                const itemIndex = this.modalScrollOffset + i;
+                if (itemIndex >= items.length)
+                    break;
+                const item = items[itemIndex];
+                const isSelected = itemIndex === this.modalSelectedIndex;
+                const fg = isSelected ? ANSI.fg.black : ANSI.fg.white;
+                const bg = isSelected ? ANSI.bg.cyan : undefined;
+                const indicator = isSelected ? '>' : ' ';
+                const qty = item.quantity > 1 ? ` x${item.quantity}` : '';
+                this.screen.write(px + 2, listY + 1 + i, indicator, ANSI.fg.yellow);
+                this.screen.write(px + 4, listY + 1 + i, `${item.name}${qty}`.padEnd(Math.floor(width * 0.5) - 6), fg, bg);
+            }
+        }
+        // Details panel
+        const detailX = px + Math.floor(width * 0.5) + 2;
+        const detailW = width - Math.floor(width * 0.5) - 3;
+        this.screen.drawBox(detailX, listY, detailW, listHeight, 'Details');
+        if (items.length > 0 && this.modalSelectedIndex < items.length) {
+            const item = items[this.modalSelectedIndex];
+            const itemData = item.data;
+            let y = listY + 1;
+            this.screen.write(detailX + 2, y++, item.name, ANSI.fg.yellow, undefined, ANSI.bold);
+            y++;
+            this.screen.write(detailX + 2, y++, `Type: ${item.type}`, ANSI.fg.gray);
+            if (itemData?.rarity) {
+                this.screen.write(detailX + 2, y++, `Rarity: ${itemData.rarity}`, ANSI.fg.cyan);
+            }
+            if (item.description) {
+                y++;
+                this.screen.write(detailX + 2, y++, item.description.slice(0, detailW - 4), ANSI.fg.white);
+            }
+        }
+        // Equipment summary
+        const eq = player.equipment;
+        const eqY = py + height - 3;
+        const wpn = eq.weapon ? eq.weapon.name : '(none)';
+        const arm = eq.armor ? eq.armor.name : '(none)';
+        this.screen.write(px + 2, eqY, `Equipped: Weapon: ${wpn}  Armor: ${arm}`, ANSI.fg.gray);
+        // Hint
+        this.screen.write(px + 2, py + height - 2, '1-5:Tabs  Up/Down:Select  Esc:Close', ANSI.fg.gray);
+    }
+    // Character editing state
+    characterEditField = null;
+    characterEditBuffer = '';
+    onCharacterEdit = null;
+    /**
+     * Register character edit handler
+     */
+    onCharacterEditHandler(handler) {
+        this.onCharacterEdit = handler;
+    }
+    /**
+     * Render character modal with tabs for Stats and Customize
+     */
+    renderCharacterModal(px, py, width, height) {
+        const player = this.cachedState?.player;
+        if (!player)
+            return;
+        this.screen.drawBox(px, py, width, height, 'Character', true);
+        this.screen.write(px + width - 15, py + 1, 'Esc/C to close', ANSI.fg.gray);
+        // Tabs: Stats, Customize
+        const tabs = ['Stats', 'Customize'];
+        let tabX = px + 2;
+        for (let i = 0; i < tabs.length; i++) {
+            const isActive = i === this.modalActiveTab;
+            const fg = isActive ? ANSI.fg.black : ANSI.fg.white;
+            const bg = isActive ? ANSI.bg.cyan : undefined;
+            this.screen.write(tabX, py + 2, ` [${i + 1}] ${tabs[i]} `, fg, bg);
+            tabX += tabs[i].length + 7;
+        }
+        if (this.modalActiveTab === 0) {
+            this.renderCharacterStatsTab(px, py, width, height, player);
+        }
+        else {
+            this.renderCharacterCustomizeTab(px, py, width, height, player);
+        }
+    }
+    /**
+     * Render character stats tab
+     */
+    renderCharacterStatsTab(px, py, width, height, player) {
+        const s = player.stats;
+        let y = py + 4;
+        const centerX = px + Math.floor(width / 2) - 15;
+        // Name and level
+        this.screen.write(centerX, y++, player.name, ANSI.fg.yellow, undefined, ANSI.bold);
+        this.screen.write(centerX, y++, `Level ${s.level}`, ANSI.fg.cyan);
+        y++;
+        // Stats box
+        this.screen.drawBox(centerX - 2, y, 35, 12, 'Stats');
+        y++;
+        this.screen.write(centerX, y++, `HP: ${s.hp} / ${s.maxHp}`, ANSI.fg.red);
+        this.screen.write(centerX, y++, `MP: ${s.mp} / ${s.maxMp}`, ANSI.fg.blue);
+        y++;
+        this.screen.write(centerX, y++, `Attack:  ${s.attack}`, ANSI.fg.white);
+        this.screen.write(centerX, y++, `Defense: ${s.defense}`, ANSI.fg.white);
+        this.screen.write(centerX, y++, `Speed:   ${s.speed}`, ANSI.fg.white);
+        y++;
+        this.screen.write(centerX, y++, `EXP: ${s.exp} / ${s.expToNextLevel}`, ANSI.fg.magenta);
+        this.screen.write(centerX, y++, `Gold: ${s.gold}`, ANSI.fg.yellow);
+        // Equipment
+        y += 2;
+        this.screen.drawBox(centerX - 2, y, 35, 6, 'Equipment');
+        y++;
+        const eq = player.equipment;
+        this.screen.write(centerX, y++, `Weapon: ${eq.weapon?.name || '(none)'}`, ANSI.fg.white);
+        this.screen.write(centerX, y++, `Armor:  ${eq.armor?.name || '(none)'}`, ANSI.fg.white);
+        this.screen.write(centerX, y++, `Access: ${eq.accessory?.name || '(none)'}`, ANSI.fg.white);
+        // Hint
+        this.screen.write(px + 2, py + height - 2, '1-2:Tabs  Esc:Close', ANSI.fg.gray);
+    }
+    /**
+     * Render character customize tab
+     */
+    renderCharacterCustomizeTab(px, py, width, height, player) {
+        const char = player.character || {
+            backstory: '',
+            appearance: '',
+            personality: '',
+            motivation: '',
+            origin: '',
+            traits: [],
+        };
+        let y = py + 4;
+        const leftX = px + 3;
+        const fieldWidth = Math.min(50, width - 10);
+        // Editable fields
+        const fields = [
+            { key: 'name', label: 'Name', value: player.name },
+            { key: 'backstory', label: 'Background Story', value: char.backstory || '(not set)' },
+            { key: 'appearance', label: 'Appearance', value: char.appearance || '(not set)' },
+            { key: 'personality', label: 'Personality', value: char.personality || '(not set)' },
+            { key: 'motivation', label: 'Motivation', value: char.motivation || '(not set)' },
+            { key: 'origin', label: 'Origin', value: char.origin || '(not set)' },
+        ];
+        this.screen.write(leftX, y++, '─── Character Customization ───', ANSI.fg.cyan);
+        y++;
+        for (let i = 0; i < fields.length; i++) {
+            const field = fields[i];
+            const isSelected = this.modalSelectedIndex === i;
+            const isEditing = this.characterEditField === field.key;
+            const labelFg = isSelected ? ANSI.fg.yellow : ANSI.fg.gray;
+            const valueFg = isSelected ? ANSI.fg.white : ANSI.fg.gray;
+            const bg = isSelected ? ANSI.bg.blue : undefined;
+            const indicator = isSelected ? '>' : ' ';
+            this.screen.write(leftX, y, indicator, ANSI.fg.yellow);
+            this.screen.write(leftX + 2, y, `${field.label}:`, labelFg);
+            y++;
+            if (isEditing) {
+                // Show edit buffer with cursor
+                const displayValue = this.characterEditBuffer + '▌';
+                this.screen.write(leftX + 4, y, displayValue.slice(0, fieldWidth - 6).padEnd(fieldWidth - 6), ANSI.fg.brightCyan, ANSI.bg.gray);
+            }
+            else {
+                // Show current value (truncated)
+                const displayValue = field.value.slice(0, fieldWidth - 6);
+                this.screen.write(leftX + 4, y, displayValue.padEnd(fieldWidth - 6), valueFg, isSelected ? bg : undefined);
+            }
+            y += 2;
+        }
+        // Traits section (read-only for now, showing as comma-separated)
+        y++;
+        this.screen.write(leftX, y++, '─── Traits ───', ANSI.fg.cyan);
+        const traitsText = char.traits.length > 0 ? char.traits.join(', ') : '(no traits defined)';
+        this.screen.write(leftX + 2, y++, traitsText.slice(0, fieldWidth), ANSI.fg.gray);
+        // Hint at bottom
+        if (this.characterEditField) {
+            this.screen.write(px + 2, py + height - 2, 'Type to edit  Enter:Save  Esc:Cancel', ANSI.fg.gray);
+        }
+        else {
+            this.screen.write(px + 2, py + height - 2, 'Up/Down:Select  Enter:Edit  1-2:Tabs  Esc:Close', ANSI.fg.gray);
+        }
+    }
+    /**
+     * Handle character modal key presses (extended for customization)
+     */
+    handleCharacterModalKey(key) {
+        // If in edit mode, handle text input
+        if (this.characterEditField) {
+            if (key.name === 'escape') {
+                // Cancel edit
+                this.characterEditField = null;
+                this.characterEditBuffer = '';
+                this.renderModal();
+                return;
+            }
+            else if (key.name === 'return') {
+                // Save edit
+                if (this.onCharacterEdit && this.characterEditField && this.characterEditBuffer.trim()) {
+                    this.onCharacterEdit(this.characterEditField, this.characterEditBuffer.trim());
+                }
+                this.characterEditField = null;
+                this.characterEditBuffer = '';
+                this.renderModal();
+                return;
+            }
+            else if (key.name === 'backspace') {
+                this.characterEditBuffer = this.characterEditBuffer.slice(0, -1);
+                this.renderModal();
+                return;
+            }
+            else if (key.raw && !key.ctrl && !key.meta) {
+                const charCode = key.raw.charCodeAt(0);
+                if (charCode >= 32 && this.characterEditBuffer.length < 200) {
+                    this.characterEditBuffer += key.raw;
+                    this.renderModal();
+                }
+                return;
+            }
+            return;
+        }
+        // Tab switching
+        if (key.raw && /^[1-2]$/.test(key.raw)) {
+            this.modalActiveTab = parseInt(key.raw) - 1;
+            this.modalSelectedIndex = 0;
+            this.renderModal();
+            return;
+        }
+        // Navigation in customize tab
+        if (this.modalActiveTab === 1) {
+            const maxIndex = 5; // 6 fields (0-5)
+            switch (key.name) {
+                case 'up':
+                case 'k':
+                    this.modalSelectedIndex = Math.max(0, this.modalSelectedIndex - 1);
+                    this.renderModal();
+                    break;
+                case 'down':
+                case 'j':
+                    this.modalSelectedIndex = Math.min(maxIndex, this.modalSelectedIndex + 1);
+                    this.renderModal();
+                    break;
+                case 'return':
+                    // Start editing the selected field
+                    const fields = ['name', 'backstory', 'appearance', 'personality', 'motivation', 'origin'];
+                    this.characterEditField = fields[this.modalSelectedIndex];
+                    // Pre-fill with current value
+                    const player = this.cachedState?.player;
+                    if (player) {
+                        if (this.characterEditField === 'name') {
+                            this.characterEditBuffer = player.name;
+                        }
+                        else if (player.character) {
+                            this.characterEditBuffer = player.character[this.characterEditField] || '';
+                        }
+                        else {
+                            this.characterEditBuffer = '';
+                        }
+                    }
+                    this.renderModal();
+                    break;
+            }
+        }
+    }
+    /**
+     * Render quests modal
+     */
+    renderQuestsModal(px, py, width, height) {
+        const quests = this.cachedQuests;
+        this.screen.drawBox(px, py, width, height, 'Quests', true);
+        this.screen.write(px + width - 15, py + 1, 'Esc/Q to close', ANSI.fg.gray);
+        // Tabs: Active, Completed
+        const tabs = ['Active', 'Completed'];
+        let tabX = px + 2;
+        for (let i = 0; i < tabs.length; i++) {
+            const isActive = i === this.modalActiveTab;
+            const fg = isActive ? ANSI.fg.black : ANSI.fg.white;
+            const bg = isActive ? ANSI.bg.cyan : undefined;
+            this.screen.write(tabX, py + 2, ` ${tabs[i]} `, fg, bg);
+            tabX += tabs[i].length + 3;
+        }
+        const listY = py + 4;
+        const listHeight = height - 6;
+        // Filter quests based on tab
+        const filteredQuests = this.modalActiveTab === 0
+            ? quests.filter(q => q.status === 'active')
+            : quests.filter(q => q.status === 'completed');
+        if (filteredQuests.length === 0) {
+            this.screen.write(px + 3, listY + 2, this.modalActiveTab === 0 ? 'No active quests' : 'No completed quests', ANSI.fg.gray);
+        }
+        else {
+            // Quest list
+            const listW = Math.floor(width * 0.4);
+            this.screen.drawBox(px + 1, listY, listW, listHeight, 'Quest List');
+            for (let i = 0; i < Math.min(filteredQuests.length, listHeight - 2); i++) {
+                const quest = filteredQuests[i];
+                const isSelected = i === this.modalSelectedIndex;
+                const fg = isSelected ? ANSI.fg.black : ANSI.fg.white;
+                const bg = isSelected ? ANSI.bg.cyan : undefined;
+                const indicator = isSelected ? '>' : ' ';
+                const completed = quest.objectives.filter(o => o.isComplete).length;
+                const total = quest.objectives.length;
+                this.screen.write(px + 2, listY + 1 + i, indicator, ANSI.fg.yellow);
+                this.screen.write(px + 4, listY + 1 + i, `${quest.name} [${completed}/${total}]`.slice(0, listW - 6).padEnd(listW - 6), fg, bg);
+            }
+            // Details panel
+            const detailX = px + listW + 2;
+            const detailW = width - listW - 3;
+            this.screen.drawBox(detailX, listY, detailW, listHeight, 'Details');
+            if (this.modalSelectedIndex < filteredQuests.length) {
+                const quest = filteredQuests[this.modalSelectedIndex];
+                let y = listY + 1;
+                this.screen.write(detailX + 2, y++, quest.name, ANSI.fg.yellow, undefined, ANSI.bold);
+                y++;
+                this.screen.write(detailX + 2, y++, quest.description.slice(0, detailW - 4), ANSI.fg.white);
+                y++;
+                this.screen.write(detailX + 2, y++, 'Objectives:', ANSI.fg.cyan);
+                for (const obj of quest.objectives.slice(0, 5)) {
+                    const check = obj.isComplete ? '[x]' : '[ ]';
+                    this.screen.write(detailX + 2, y++, `${check} ${obj.description}`.slice(0, detailW - 4), obj.isComplete ? ANSI.fg.green : ANSI.fg.white);
+                }
+            }
+        }
+        // Hint
+        this.screen.write(px + 2, py + height - 2, 'Left/Right:Tabs  Up/Down:Select  Esc:Close', ANSI.fg.gray);
+    }
+    /**
+     * Render workshop modal
+     */
+    renderWorkshopModal(px, py, width, height) {
+        const player = this.cachedState?.player;
+        if (!player)
+            return;
+        this.screen.drawBox(px, py, width, height, 'Workshop', true);
+        this.screen.write(px + width - 15, py + 1, 'Esc/W to close', ANSI.fg.gray);
+        // Tabs
+        const tabs = ['Affixes', 'Forge', 'Research'];
+        let tabX = px + 2;
+        for (let i = 0; i < tabs.length; i++) {
+            const isActive = i === this.modalActiveTab;
+            const fg = isActive ? ANSI.fg.black : ANSI.fg.white;
+            const bg = isActive ? ANSI.bg.cyan : undefined;
+            this.screen.write(tabX, py + 2, ` [${i + 1}] ${tabs[i]} `, fg, bg);
+            tabX += tabs[i].length + 7;
+        }
+        const contentY = py + 4;
+        const centerX = px + Math.floor(width / 2) - 20;
+        if (this.modalActiveTab === 0) {
+            // Affixes tab
+            this.screen.write(centerX, contentY, 'Your Unlocked Affixes:', ANSI.fg.cyan);
+            const affixes = player.unlockedAffixes || [];
+            if (affixes.length === 0) {
+                this.screen.write(centerX, contentY + 2, 'No affixes discovered yet.', ANSI.fg.gray);
+                this.screen.write(centerX, contentY + 3, 'Defeat enemies or complete quests to discover affixes.', ANSI.fg.gray);
+            }
+            else {
+                for (let i = 0; i < Math.min(affixes.length, 10); i++) {
+                    const isSelected = i === this.modalSelectedIndex;
+                    const fg = isSelected ? ANSI.fg.black : ANSI.fg.white;
+                    const bg = isSelected ? ANSI.bg.cyan : undefined;
+                    this.screen.write(centerX, contentY + 2 + i, affixes[i].padEnd(30), fg, bg);
+                }
+            }
+        }
+        else if (this.modalActiveTab === 1) {
+            // Forge tab
+            this.screen.write(centerX, contentY, 'Forge Affixes onto Weapons', ANSI.fg.cyan);
+            if (!player.equipment.weapon) {
+                this.screen.write(centerX, contentY + 2, 'No weapon equipped.', ANSI.fg.gray);
+                this.screen.write(centerX, contentY + 3, 'Equip a weapon to apply affixes.', ANSI.fg.gray);
+            }
+            else {
+                this.screen.write(centerX, contentY + 2, `Current Weapon: ${player.equipment.weapon.name}`, ANSI.fg.yellow);
+                const affixCount = player.equipment.weapon.affixes?.length || 0;
+                this.screen.write(centerX, contentY + 3, `Affixes: ${affixCount}`, ANSI.fg.white);
+            }
+        }
+        else {
+            // Research tab
+            this.screen.write(centerX, contentY, 'Research Unknown Affixes', ANSI.fg.cyan);
+            this.screen.write(centerX, contentY + 2, 'Cost: 100 gold per attempt', ANSI.fg.gray);
+            this.screen.write(centerX, contentY + 3, 'Success chance: 50%', ANSI.fg.gray);
+            this.screen.write(centerX, contentY + 5, `Your Gold: ${player.stats.gold}`, ANSI.fg.yellow);
+        }
+        // Hint
+        this.screen.write(px + 2, py + height - 2, '1-3:Tabs  Up/Down:Select  Esc:Close', ANSI.fg.gray);
+    }
+    /**
+     * Render menu modal (save/load/quit)
+     */
+    renderMenuModal(px, py, width, height) {
+        // Smaller centered modal within the padded area
+        const modalWidth = 40;
+        const modalHeight = 14;
+        const modalX = px + Math.floor((width - modalWidth) / 2);
+        const modalY = py + Math.floor((height - modalHeight) / 2);
+        // Draw modal box
+        this.screen.drawBox(modalX, modalY, modalWidth, modalHeight, 'Game Menu', true);
+        this.screen.write(modalX + modalWidth - 12, modalY + 1, 'Esc to close', ANSI.fg.gray);
+        const menuItems = [
+            { key: 'S', label: 'Save Game', desc: 'Save your current progress' },
+            { key: 'L', label: 'Load Game', desc: 'Load a previous save' },
+            { key: 'Q', label: 'Quit Game', desc: 'Exit to desktop' },
+        ];
+        const startY = modalY + 3;
+        const centerX = modalX + 4;
+        for (let i = 0; i < menuItems.length; i++) {
+            const item = menuItems[i];
+            const isSelected = i === this.modalSelectedIndex;
+            const fg = isSelected ? ANSI.fg.black : ANSI.fg.white;
+            const bg = isSelected ? ANSI.bg.cyan : undefined;
+            const indicator = isSelected ? '>' : ' ';
+            // Draw menu item
+            this.screen.write(centerX, startY + i * 3, indicator, ANSI.fg.yellow);
+            this.screen.write(centerX + 2, startY + i * 3, `[${item.key}] ${item.label}`.padEnd(modalWidth - 10), fg, bg);
+            this.screen.write(centerX + 2, startY + i * 3 + 1, item.desc, ANSI.fg.gray);
+        }
+        // Hint at bottom
+        this.screen.write(modalX + 2, modalY + modalHeight - 2, 'Up/Down:Select  Enter:Confirm', ANSI.fg.gray);
+    }
+    /**
+     * Handle combat keypress
+     */
+    handleCombatKey(key) {
+        switch (key.name) {
+            case '1':
+                this.addEventLog('Strategy: Aggressive');
+                break;
+            case '2':
+                this.addEventLog('Strategy: Defensive');
+                break;
+            case '3':
+                this.addEventLog('Strategy: Balanced');
+                break;
+            case '4':
+                this.addEventLog('Strategy: Skill Focus');
+                break;
+            case 'escape':
+                // Can't escape combat
+                this.addEventLog('Cannot flee from combat!');
+                break;
+        }
+    }
+    /**
+     * Handle travel keypress
+     */
+    handleTravelKey(key) {
+        if (key.name === 'escape') {
+            if (this.onCommand) {
+                this.onCommand('cancel_travel');
+            }
+        }
+    }
+    /**
+     * Handle menu keypress
+     */
+    handleMenuKey(key) {
+        // Menu navigation
+    }
+    /**
+     * Add event to log
+     */
+    addEventLog(message) {
+        const time = new Date().toLocaleTimeString('en-US', { hour12: false }).slice(0, 5);
+        this.eventLog.push(`[${time}] ${message}`);
+        if (this.eventLog.length > this.maxLogLines) {
+            this.eventLog.shift();
+        }
+        // Also update the events section if using new architecture
+        if (this.useSectionArchitecture) {
+            this.eventsSection.addEvent(message);
+        }
+    }
+    /**
+     * Register command handler
+     */
+    onCommandInput(handler) {
+        this.onCommand = handler;
+    }
+    /**
+     * Register dialog handler
+     */
+    onDialogInputHandler(handler) {
+        this.onDialogInput = handler;
+    }
+    // =========================================================================
+    // RENDERING
+    // =========================================================================
+    /**
+     * Render the main game screen using section-based architecture
+     */
+    renderMainScreen(state, npcsInRoom = [], activeQuests = []) {
+        // Cache state for refresh
+        this.cachedState = state;
+        this.cachedNPCs = npcsInRoom;
+        this.cachedQuests = activeQuests;
+        // Skip rendering main screen if a modal is active (modal has its own render)
+        if (this.activeModal) {
+            return;
+        }
+        // Update input buffer from InputManager
+        this.inputBuffer = this.input.getInputBuffer();
+        // Use new section-based architecture
+        if (this.useSectionArchitecture) {
+            this.renderMainScreenWithSections(state, npcsInRoom, activeQuests);
+            return;
+        }
+        // Legacy rendering (kept for fallback)
+        this.renderMainScreenLegacy(state, npcsInRoom, activeQuests);
+    }
+    /**
+     * Render main screen using new section-based architecture
+     */
+    renderMainScreenWithSections(state, npcsInRoom, activeQuests) {
+        const { width: screenWidth, height: screenHeight } = this.screen.getSize();
+        this.screen.clear();
+        // Apply global padding
+        const px = this.PADDING;
+        const py = this.PADDING;
+        const width = screenWidth - this.PADDING * 2;
+        const height = screenHeight - this.PADDING * 2;
+        // Calculate layout
+        const headerHeight = 3;
+        const eventsHeight = Math.min(8, Math.floor(height * 0.25));
+        const mainAreaHeight = height - headerHeight - eventsHeight - 2; // -2 for hint bar
+        const menuWidth = Math.min(30, Math.floor(width * 0.32));
+        const leftWidth = width - menuWidth - 1;
+        const mapHeight = Math.min(10, Math.floor(mainAreaHeight * 0.55));
+        const statusHeight = mainAreaHeight - mapHeight;
+        // Render header (custom, not a section)
+        this.renderHeader(state.player, width, px, py);
+        // Update sections with data
+        this.mapSection.update(state);
+        this.statusSection.update({
+            state: state,
+            npcs: npcsInRoom,
+            quests: activeQuests,
+        });
+        this.actionsSection.update({
+            npcs: npcsInRoom,
+            quests: activeQuests,
+        });
+        // Events are updated via addEventLog
+        // Calculate and set section bounds
+        const boundsMap = new Map();
+        boundsMap.set('map', {
+            x: px,
+            y: py + headerHeight,
+            width: leftWidth,
+            height: mapHeight,
+        });
+        boundsMap.set('status', {
+            x: px,
+            y: py + headerHeight + mapHeight,
+            width: leftWidth,
+            height: statusHeight,
+        });
+        boundsMap.set('actions', {
+            x: px + leftWidth,
+            y: py + headerHeight,
+            width: menuWidth + 1,
+            height: mainAreaHeight,
+        });
+        boundsMap.set('events', {
+            x: px,
+            y: py + headerHeight + mainAreaHeight,
+            width: width,
+            height: eventsHeight,
+        });
+        // Render all sections
+        for (const section of this.sectionManager.getAll()) {
+            const bounds = boundsMap.get(section.id);
+            if (bounds) {
+                section.bounds = bounds;
+                const ctx = { screen: this.screen, bounds };
+                section.render(ctx);
+            }
+        }
+        // Render hint bar using section manager hints
+        this.renderSectionHintBar(px + 1, py + height - 1, width - 2);
+        // Render to screen
+        this.screen.render();
+    }
+    /**
+     * Render hint bar based on section manager state
+     */
+    renderSectionHintBar(x, y, width) {
+        const isAnyEntered = this.sectionManager.isAnyEntered();
+        let hints;
+        if (isAnyEntered) {
+            const sectionHint = this.sectionManager.getCurrentHint();
+            hints = sectionHint || 'Up/Down: navigate  Enter: select  Esc: exit';
+        }
+        else {
+            hints = 'Arrows: focus  Enter: enter  |  1-9: Travel  I C Q W [M]enu';
+        }
+        this.screen.write(x, y, hints.slice(0, width), ANSI.fg.gray);
+    }
+    /**
+     * Legacy main screen rendering (fallback)
+     */
+    renderMainScreenLegacy(state, npcsInRoom, activeQuests) {
+        const { width: screenWidth, height: screenHeight } = this.screen.getSize();
+        this.screen.clear();
+        // Apply global padding
+        const px = this.PADDING;
+        const py = this.PADDING;
+        const width = screenWidth - this.PADDING * 2;
+        const height = screenHeight - this.PADDING * 2;
+        // New layout: Events at bottom spanning full width
+        const headerHeight = 3;
+        const eventsHeight = Math.min(8, Math.floor(height * 0.25));
+        const mainAreaHeight = height - headerHeight - eventsHeight - 2; // -2 for hint bar
+        const menuWidth = Math.min(30, Math.floor(width * 0.32));
+        const leftWidth = width - menuWidth - 1;
+        const mapHeight = Math.min(10, Math.floor(mainAreaHeight * 0.55));
+        const statusHeight = mainAreaHeight - mapHeight;
+        // Header
+        this.renderHeader(state.player, width, px, py);
+        // Left side: Map (top) + Status (bottom)
+        this.renderMapPanel(px, py + headerHeight, leftWidth, mapHeight, state);
+        this.renderStatusPanel(px, py + headerHeight + mapHeight, leftWidth, statusHeight, state, npcsInRoom, activeQuests);
+        // Right side: Action menu
+        this.renderActionMenu(px + leftWidth, py + headerHeight, menuWidth + 1, mainAreaHeight, state, npcsInRoom, activeQuests);
+        // Events panel at bottom (full width)
+        this.renderEventsPanel(px, py + headerHeight + mainAreaHeight, width, eventsHeight);
+        // Bottom hint bar
+        this.renderHintBar(px + 1, py + height - 1, width - 2);
+        // Render to screen
+        this.screen.render();
+    }
+    /**
+     * Render action menu panel (right side) - NPCs and Quick actions only
+     */
+    renderActionMenu(x, y, width, height, state, npcs, quests) {
+        // Draw box with focus indicator
+        const isFocused = this.focusedSection === 'actions';
+        const isInside = isFocused && this.inSection;
+        const title = isInside ? '[ Actions ]' : 'Actions';
+        const titleFg = isFocused ? ANSI.fg.black : ANSI.fg.cyan;
+        const titleBg = isFocused ? ANSI.bg.cyan : undefined;
+        this.screen.drawBox(x, y, width, height, title, false, titleFg, titleBg);
+        if (isFocused && !isInside) {
+            // Highlight box border when focused but not inside
+            this.screen.write(x, y, '+', ANSI.fg.yellow);
+        }
+        // Build menu items list
+        this.menuItems = [];
+        let itemIndex = 0;
+        let lineY = y + 1;
+        const maxItems = height - 3;
+        // NPCs section
+        if (npcs.length > 0 && lineY < y + maxItems) {
+            this.screen.write(x + 2, lineY, '* NPCs', ANSI.fg.cyan, undefined, ANSI.bold);
+            lineY++;
+            for (let i = 0; i < Math.min(npcs.length, 4); i++) {
+                if (lineY >= y + maxItems)
+                    break;
+                const npc = npcs[i];
+                const rel = npc.playerRelationship > 0 ? '+' : npc.playerRelationship < 0 ? '-' : '';
+                const label = `${npc.name} ${rel}`;
+                this.menuItems.push({ type: 'npc', id: `npc_${i}`, label: npc.name });
+                const isSelected = isInside && this.sectionSelectedIndex === itemIndex;
+                const fg = isSelected ? ANSI.fg.black : ANSI.fg.white;
+                const bg = isSelected ? ANSI.bg.cyan : undefined;
+                const indicator = isSelected ? '>' : ' ';
+                this.screen.write(x + 1, lineY, indicator, ANSI.fg.yellow);
+                this.screen.write(x + 3, lineY, label.slice(0, width - 5).padEnd(width - 5), fg, bg);
+                lineY++;
+                itemIndex++;
+            }
+            lineY++;
+        }
+        // Quick actions section
+        if (lineY < y + height - 2) {
+            this.screen.write(x + 2, lineY, '# Actions', ANSI.fg.cyan, undefined, ANSI.bold);
+            lineY++;
+            const quickActions = [
+                { id: 'inventory', label: '[I] Inventory' },
+                { id: 'character', label: '[C] Character' },
+                { id: 'quests', label: `[Q] Quests (${quests.length})` },
+                { id: 'workshop', label: '[W] Workshop' },
+            ];
+            for (const action of quickActions) {
+                if (lineY >= y + height - 2)
+                    break;
+                this.menuItems.push({ type: 'action', id: action.id, label: action.label });
+                const isSelected = isInside && this.sectionSelectedIndex === itemIndex;
+                const fg = isSelected ? ANSI.fg.black : ANSI.fg.white;
+                const bg = isSelected ? ANSI.bg.cyan : undefined;
+                const indicator = isSelected ? '>' : ' ';
+                this.screen.write(x + 1, lineY, indicator, ANSI.fg.yellow);
+                this.screen.write(x + 3, lineY, action.label.slice(0, width - 5).padEnd(width - 5), fg, bg);
+                lineY++;
+                itemIndex++;
+            }
+        }
+        // Navigation hint at bottom
+        const hint = isInside ? 'Esc:exit' : 'Enter';
+        this.screen.write(x + 2, y + height - 1, hint, ANSI.fg.gray);
+    }
+    /**
+     * Render hint bar at bottom
+     */
+    renderHintBar(x, y, width) {
+        let hints;
+        if (this.inSection) {
+            hints = 'Up/Down:navigate  Enter:select  Esc:exit  |  I C Q W [M]enu';
+        }
+        else {
+            hints = 'Arrows:focus  Enter:enter  |  1-9:Travel  I C Q W [M]enu';
+        }
+        this.screen.write(x, y, hints.slice(0, width), ANSI.fg.gray);
+    }
+    // Menu selection state
+    menuSelectedIndex = 0;
+    menuItems = [];
+    /**
+     * Render header bar
+     */
+    renderHeader(player, width, x = 0, y = 0) {
+        const s = getStrings();
+        // Top border
+        this.screen.drawBox(x, y, width, 3, '', true);
+        // Title
+        this.screen.write(x + 2, y + 1, 'IDLERPG.TERMINAL', ANSI.fg.cyan, undefined, ANSI.bold);
+        // Player info
+        const playerInfo = `${s.status.level}.${player.stats.level} ${player.name}`;
+        this.screen.write(x + 25, y + 1, playerInfo, ANSI.fg.yellow);
+        // HP bar
+        const hpText = `${s.status.hp}:`;
+        this.screen.write(x + 45, y + 1, hpText, ANSI.fg.white);
+        this.screen.drawProgressBar(x + 49, y + 1, 10, player.stats.hp, player.stats.maxHp, ANSI.fg.red);
+        this.screen.write(x + 60, y + 1, `${player.stats.hp}/${player.stats.maxHp}`, ANSI.fg.white);
+        // Real time
+        const time = new Date().toLocaleTimeString('en-US', { hour12: false });
+        this.screen.write(x + width - time.length - 2, y + 1, `${time}`, ANSI.fg.gray);
+    }
+    /**
+     * Render visual map panel with travel destinations
+     */
+    renderMapPanel(x, y, width, height, state) {
+        // Draw box with focus indicator
+        const isFocused = this.focusedSection === 'map';
+        const isInside = isFocused && this.inSection;
+        const title = isInside ? '[ Map ]' : 'Map';
+        const titleFg = isFocused ? ANSI.fg.black : ANSI.fg.cyan;
+        const titleBg = isFocused ? ANSI.bg.cyan : undefined;
+        this.screen.drawBox(x, y, width, height, title, false, titleFg, titleBg);
+        // Map visualization area
+        const mapX = x + 1;
+        const mapY = y + 1;
+        const mapWidth = width - 2;
+        const mapHeight = height - 4; // Leave room for legend and hints
+        const centerX = mapX + Math.floor(mapWidth / 2);
+        const centerY = mapY + Math.floor(mapHeight / 2);
+        // Current room at center with player symbol
+        const playerSymbol = `[${MAP_SYMBOLS.player}]`;
+        this.screen.write(centerX - 1, centerY, playerSymbol, ANSI.fg.brightGreen);
+        // Draw current room name below player
+        const roomName = state.currentRoom.name.slice(0, 12);
+        this.screen.write(centerX - Math.floor(roomName.length / 2), centerY + 1, roomName, ANSI.fg.yellow);
+        // Draw connected rooms around the center
+        const connections = state.currentRoom.connections;
+        // Position connected rooms based on their index (like cardinal directions)
+        // Layout: positions around center with varying distances
+        const positions = this.getConnectionPositions(connections.length, mapWidth, mapHeight);
+        connections.forEach((roomId, i) => {
+            if (i >= positions.length)
+                return;
+            const pos = positions[i];
+            const room = state.currentMap.rooms.get(roomId);
+            const symbol = room?.isExplored ? this.getRoomSymbol(room) : '?';
+            const name = room?.name?.slice(0, 8) || 'Unknown';
+            const roomScreenX = centerX + pos.dx;
+            const roomScreenY = centerY + pos.dy;
+            // Check if this room is selected (when inside map section)
+            const isSelected = isInside && this.sectionSelectedIndex === i;
+            const roomColor = isSelected ? ANSI.fg.brightCyan : (room?.isExplored ? ANSI.fg.white : ANSI.fg.gray);
+            const bgColor = isSelected ? ANSI.bg.blue : undefined;
+            // Draw room symbol
+            this.screen.write(roomScreenX - 1, roomScreenY, `[${symbol}]`, roomColor, bgColor);
+            // Draw room name (shortened)
+            const labelX = roomScreenX - Math.floor(name.length / 2);
+            this.screen.write(Math.max(mapX, labelX), roomScreenY + (pos.dy >= 0 ? 1 : -1), name.slice(0, mapWidth - 2), isSelected ? ANSI.fg.brightCyan : ANSI.fg.gray);
+            // Draw path/connection line from center to room
+            this.drawConnectionPath(centerX, centerY, roomScreenX, roomScreenY, pos.pathChar);
+            // Draw travel time indicator
+            if (isSelected) {
+                const travelTime = this.estimateTravelTime(state.currentRoom, room);
+                this.screen.write(roomScreenX - 2, roomScreenY + (pos.dy >= 0 ? 2 : -2), `~${travelTime}s`, ANSI.fg.yellow);
+            }
+            // Draw selection number
+            this.screen.write(roomScreenX + 2, roomScreenY, `${i + 1}`, ANSI.fg.cyan);
+        });
+        // Legend at bottom
+        const legendY = y + height - 2;
+        this.screen.write(x + 2, legendY, '[@]You [T]Town [D]Dung [?]Unknown', ANSI.fg.gray);
+        // Hint
+        const hintY = y + height - 1;
+        if (isInside) {
+            this.screen.write(x + 2, hintY, '↑↓:select Enter:travel Esc:exit', ANSI.fg.gray);
+        }
+        else if (isFocused) {
+            this.screen.write(x + 2, hintY, 'Enter:select destination', ANSI.fg.gray);
+        }
+    }
+    /**
+     * Get positions for connected rooms around the center
+     */
+    getConnectionPositions(count, mapWidth, mapHeight) {
+        // Calculate spacing based on map size
+        const maxDx = Math.floor(mapWidth / 3);
+        const maxDy = Math.floor(mapHeight / 3);
+        // Predefined positions for up to 8 connections (like compass directions)
+        const allPositions = [
+            { dx: 0, dy: -maxDy, pathChar: '|' }, // North
+            { dx: maxDx, dy: 0, pathChar: '-' }, // East
+            { dx: 0, dy: maxDy, pathChar: '|' }, // South
+            { dx: -maxDx, dy: 0, pathChar: '-' }, // West
+            { dx: maxDx - 2, dy: -maxDy + 1, pathChar: '/' }, // NE
+            { dx: maxDx - 2, dy: maxDy - 1, pathChar: '\\' }, // SE
+            { dx: -maxDx + 2, dy: maxDy - 1, pathChar: '/' }, // SW
+            { dx: -maxDx + 2, dy: -maxDy + 1, pathChar: '\\' }, // NW
+        ];
+        return allPositions.slice(0, count);
+    }
+    /**
+     * Draw a path between two points
+     */
+    drawConnectionPath(fromX, fromY, toX, toY, pathChar) {
+        const dx = toX - fromX;
+        const dy = toY - fromY;
+        const steps = Math.max(Math.abs(dx), Math.abs(dy));
+        if (steps <= 2)
+            return; // Too short to draw path
+        // Draw path characters between the two points
+        for (let i = 1; i < steps; i++) {
+            const t = i / steps;
+            const px = Math.round(fromX + dx * t);
+            const py = Math.round(fromY + dy * t);
+            // Skip positions near the endpoints (where room symbols are)
+            if (i < 2 || i > steps - 2)
+                continue;
+            // Choose appropriate path character
+            let char = '.';
+            if (Math.abs(dx) > Math.abs(dy) * 2) {
+                char = '-';
+            }
+            else if (Math.abs(dy) > Math.abs(dx) * 2) {
+                char = '|';
+            }
+            else {
+                char = pathChar;
+            }
+            this.screen.write(px, py, char, ANSI.fg.gray);
+        }
+    }
+    /**
+     * Estimate travel time based on room distance
+     */
+    estimateTravelTime(from, to) {
+        if (!to)
+            return 5;
+        // Calculate based on position difference
+        const dx = Math.abs(to.position.x - from.position.x);
+        const dy = Math.abs(to.position.y - from.position.y);
+        const dz = Math.abs(to.position.floor - from.position.floor);
+        // Base time: 3-10 seconds depending on distance
+        const distance = Math.sqrt(dx * dx + dy * dy) + dz * 2;
+        return Math.max(3, Math.min(15, Math.floor(distance * 2 + 3)));
+    }
+    /**
+     * Get room symbol
+     */
+    getRoomSymbol(room) {
+        const symbols = {
+            town: 'T',
+            dungeon_entrance: 'D',
+            combat: '!',
+            shop: 'S',
+            treasure: '$',
+            boss: 'B',
+            event: 'E',
+            rest: 'R',
+            empty: '·',
+        };
+        return symbols[room.type] || '?';
+    }
+    /**
+     * Render status panel (compact, without events)
+     */
+    renderStatusPanel(x, y, width, height, state, npcs, quests) {
+        // Draw box with focus indicator
+        const isFocused = this.focusedSection === 'status';
+        const title = 'Status';
+        const titleFg = isFocused ? ANSI.fg.black : ANSI.fg.cyan;
+        const titleBg = isFocused ? ANSI.bg.cyan : undefined;
+        this.screen.drawBox(x, y, width, height, title, false, titleFg, titleBg);
+        let lineY = y + 1;
+        // Gold
+        const gold = `Gold: ${state.player.stats.gold}`;
+        this.screen.write(x + 2, lineY, gold, ANSI.fg.yellow);
+        lineY++;
+        // Equipment
+        if (state.player.equipment.weapon) {
+            this.screen.write(x + 2, lineY, `Weapon: ${state.player.equipment.weapon.name}`, ANSI.fg.white);
+        }
+        else {
+            this.screen.write(x + 2, lineY, 'Weapon: (none)', ANSI.fg.gray);
+        }
+        lineY++;
+        // Active quest (if any)
+        if (quests.length > 0 && lineY < y + height - 1) {
+            const quest = quests[0];
+            const completed = quest.objectives.filter(o => o.isComplete).length;
+            const total = quest.objectives.length;
+            const questText = `Quest: ${quest.name} [${completed}/${total}]`;
+            this.screen.write(x + 2, lineY, questText.slice(0, width - 4), ANSI.fg.magenta);
+            lineY++;
+        }
+        // NPCs count
+        if (npcs.length > 0 && lineY < y + height - 1) {
+            this.screen.write(x + 2, lineY, `NPCs: ${npcs.length} here`, ANSI.fg.cyan);
+        }
+    }
+    /**
+     * Render events panel (spans bottom of screen) with scrolling
+     */
+    renderEventsPanel(x, y, width, height) {
+        // Draw box with focus indicator
+        const isFocused = this.focusedSection === 'events';
+        const isInside = isFocused && this.inSection;
+        const title = isInside ? '[ Events ]' : 'Events';
+        const titleFg = isFocused ? ANSI.fg.black : ANSI.fg.cyan;
+        const titleBg = isFocused ? ANSI.bg.cyan : undefined;
+        this.screen.drawBox(x, y, width, height, title, false, titleFg, titleBg);
+        const maxLogLines = height - 2;
+        const logStartY = y + 1;
+        // When inside events, use sectionScrollOffset for scrolling
+        const scrollOffset = isInside ? this.sectionScrollOffset : Math.max(0, this.eventLog.length - maxLogLines);
+        // Bound the selected index and scroll offset
+        if (isInside) {
+            const maxIndex = Math.max(0, this.eventLog.length - 1);
+            if (this.sectionSelectedIndex > maxIndex) {
+                this.sectionSelectedIndex = maxIndex;
+            }
+        }
+        for (let i = 0; i < Math.min(this.eventLog.length, maxLogLines); i++) {
+            const logIndex = scrollOffset + i;
+            if (logIndex >= this.eventLog.length)
+                break;
+            const isSelected = isInside && logIndex === this.sectionSelectedIndex;
+            const fg = isSelected ? ANSI.fg.white : ANSI.fg.gray;
+            const bg = isSelected ? ANSI.bg.blue : undefined;
+            const indicator = isSelected ? '>' : ' ';
+            this.screen.write(x, logStartY + i, indicator, ANSI.fg.yellow);
+            this.screen.write(x + 1, logStartY + i, this.eventLog[logIndex].slice(0, width - 3).padEnd(width - 3), fg, bg);
+        }
+        // Scroll indicator
+        if (this.eventLog.length > maxLogLines) {
+            const canScrollUp = scrollOffset > 0;
+            const canScrollDown = scrollOffset + maxLogLines < this.eventLog.length;
+            if (canScrollUp)
+                this.screen.write(x + width - 2, y, '^', ANSI.fg.yellow);
+            if (canScrollDown)
+                this.screen.write(x + width - 2, y + height - 1, 'v', ANSI.fg.yellow);
+        }
+        // Hint
+        const hint = isInside ? 'Esc:exit' : '';
+        if (hint)
+            this.screen.write(x + 2, y + height - 1, hint, ANSI.fg.gray);
+    }
+    /**
+     * Render event log
+     */
+    renderEventLog(x, y, width, maxLines) {
+        this.screen.drawBox(x, y, width, maxLines + 2, 'Event Log');
+        for (let i = 0; i < Math.min(this.eventLog.length, maxLines); i++) {
+            const logIndex = Math.max(0, this.eventLog.length - maxLines) + i;
+            if (this.eventLog[logIndex]) {
+                this.screen.write(x + 2, y + 1 + i, this.eventLog[logIndex].slice(0, width - 4), ANSI.fg.gray);
+            }
+        }
+    }
+    /**
+     * Render input area
+     */
+    renderInputArea(x, y, width) {
+        this.screen.drawBox(x, y, width, 3, '');
+        const promptText = this.inputPrompt + this.inputBuffer + '▌';
+        this.screen.write(x + 2, y + 1, promptText.slice(0, width - 4), ANSI.fg.white);
+    }
+    // =========================================================================
+    // COMBAT MODE
+    // =========================================================================
+    /**
+     * Render combat screen
+     */
+    renderCombatScreen(combat, player) {
+        // Skip if modal is active
+        if (this.activeModal)
+            return;
+        const { width: screenWidth, height: screenHeight } = this.screen.getSize();
+        this.screen.clear();
+        // Apply global padding
+        const px = this.PADDING;
+        const py = this.PADDING;
+        const width = screenWidth - this.PADDING * 2;
+        const height = screenHeight - this.PADDING * 2;
+        // Combat box
+        const boxWidth = Math.min(70, width - 4);
+        const boxHeight = Math.min(25, height - 4);
+        const boxX = px + Math.floor((width - boxWidth) / 2);
+        const boxY = py + Math.floor((height - boxHeight) / 2);
+        this.screen.drawBox(boxX, boxY, boxWidth, boxHeight, '== COMBAT ==', true);
+        let lineY = boxY + 2;
+        // Player HP
+        this.screen.write(boxX + 3, lineY, `[${player.name}]`, ANSI.fg.brightGreen);
+        lineY++;
+        this.screen.write(boxX + 3, lineY, 'HP: ', ANSI.fg.white);
+        this.screen.drawProgressBar(boxX + 7, lineY, 20, combat.playerHp, player.stats.maxHp, ANSI.fg.red);
+        this.screen.write(boxX + 28, lineY, `${combat.playerHp}/${player.stats.maxHp}`, ANSI.fg.white);
+        lineY += 2;
+        // Enemies
+        this.screen.write(boxX + 3, lineY, '─── Enemies ───', ANSI.fg.cyan);
+        lineY++;
+        for (const enemy of combat.enemies) {
+            const isAlive = enemy.hp > 0;
+            const color = isAlive ? ANSI.fg.red : ANSI.fg.gray;
+            const status = isAlive ? '' : ' [DEFEATED]';
+            this.screen.write(boxX + 3, lineY, `${enemy.name}${status}`, color);
+            lineY++;
+            if (isAlive) {
+                this.screen.write(boxX + 5, lineY, 'HP: ', ANSI.fg.white);
+                this.screen.drawProgressBar(boxX + 9, lineY, 15, enemy.hp, enemy.maxHp, ANSI.fg.red);
+                this.screen.write(boxX + 25, lineY, `${enemy.hp}/${enemy.maxHp}`, ANSI.fg.gray);
+            }
+            lineY++;
+        }
+        lineY++;
+        // Combat log
+        this.screen.write(boxX + 3, lineY, '─── Battle Log ───', ANSI.fg.cyan);
+        lineY++;
+        const logStart = Math.max(0, combat.log.length - 5);
+        for (let i = logStart; i < combat.log.length; i++) {
+            const entry = combat.log[i];
+            this.screen.write(boxX + 3, lineY, `> ${entry.message}`.slice(0, boxWidth - 6), ANSI.fg.gray);
+            lineY++;
+        }
+        // Strategy options
+        lineY = boxY + boxHeight - 4;
+        this.screen.write(boxX + 3, lineY, 'Strategy: [1]Aggressive [2]Defensive [3]Balanced [4]Skills', ANSI.fg.yellow);
+        lineY++;
+        this.screen.write(boxX + 3, lineY, `Current: ${combat.strategy}`, ANSI.fg.white);
+        // Real time
+        const time = new Date().toLocaleTimeString('en-US', { hour12: false });
+        this.screen.write(boxX + boxWidth - 10, boxY + 1, `${time}`, ANSI.fg.gray);
+        this.screen.render();
+    }
+    // =========================================================================
+    // TRAVEL MODE
+    // =========================================================================
+    /**
+     * Render travel screen - keeps the map visible with animated player movement
+     */
+    renderTravelScreen(state, fromRoom, toRoom, progress, duration, events) {
+        // Skip if modal is active
+        if (this.activeModal)
+            return;
+        const { width: screenWidth, height: screenHeight } = this.screen.getSize();
+        this.screen.clear();
+        // Apply global padding
+        const px = this.PADDING;
+        const py = this.PADDING;
+        const width = screenWidth - this.PADDING * 2;
+        const height = screenHeight - this.PADDING * 2;
+        // Same layout as explore mode
+        const headerHeight = 3;
+        const menuWidth = Math.min(32, Math.floor(width * 0.35));
+        const leftWidth = width - menuWidth - 2;
+        const mapHeight = Math.min(14, Math.floor((height - headerHeight - 4) * 0.55));
+        const statusHeight = height - headerHeight - mapHeight - 4;
+        // Header
+        this.renderHeader(state.player, width, px, py);
+        // Left side: Travel Map (with animated player)
+        this.renderTravelMapPanel(px + 1, py + headerHeight, leftWidth, mapHeight, fromRoom, toRoom, progress);
+        // Left side (bottom): Travel status + events
+        this.renderTravelStatusPanel(px + 1, py + headerHeight + mapHeight, leftWidth, statusHeight, fromRoom?.name || 'Unknown', toRoom?.name || 'Unknown', progress, duration, events);
+        // Right side: Travel info panel
+        this.renderTravelInfoPanel(px + leftWidth + 1, py + headerHeight, menuWidth, height - headerHeight - 1, fromRoom?.name || 'Unknown', toRoom?.name || 'Unknown', progress, duration);
+        // Bottom hint bar
+        this.screen.write(px + 1, py + height - 1, '[ESC] Cancel Travel', ANSI.fg.yellow);
+        this.screen.render();
+    }
+    /**
+     * Render the travel map with animated player position
+     */
+    renderTravelMapPanel(x, y, width, height, fromRoom, toRoom, progress) {
+        // Animated title
+        const dots = '.'.repeat(Math.floor(Date.now() / 300) % 4);
+        this.screen.drawBox(x, y, width, height, `Traveling${dots}`);
+        const mapY = y + 2;
+        const mapX = x + 2;
+        const mapWidth = width - 4;
+        const mapHeight = height - 5;
+        const centerX = mapX + Math.floor(mapWidth / 2);
+        const centerY = mapY + Math.floor(mapHeight / 2);
+        if (!fromRoom || !toRoom) {
+            this.screen.write(centerX - 5, centerY, 'Traveling...', ANSI.fg.yellow);
+            return;
+        }
+        // Calculate travel distance for proportional display
+        const fromPos = fromRoom.position;
+        const toPos = toRoom.position;
+        const dx = toPos.x - fromPos.x;
+        const dy = toPos.y - fromPos.y;
+        const dz = toPos.floor - fromPos.floor;
+        // Calculate actual distance (affects visual separation)
+        const distance = Math.sqrt(dx * dx + dy * dy) + Math.abs(dz) * 2;
+        const normalizedDist = Math.min(1, distance / 5); // Normalize to 0-1
+        // Calculate screen positions based on distance
+        const maxOffsetX = Math.floor(mapWidth / 3 * (0.5 + normalizedDist * 0.5));
+        const maxOffsetY = Math.floor(mapHeight / 3 * (0.5 + normalizedDist * 0.5));
+        let fromScreenX = centerX;
+        let fromScreenY = centerY;
+        let toScreenX = centerX;
+        let toScreenY = centerY;
+        // Position rooms based on their relative positions
+        if (Math.abs(dx) > Math.abs(dy)) {
+            fromScreenX = centerX - maxOffsetX;
+            toScreenX = centerX + maxOffsetX;
+            const vertOffset = Math.sign(dy) * Math.min(Math.abs(dy), maxOffsetY / 2);
+            fromScreenY = centerY - Math.floor(vertOffset / 2);
+            toScreenY = centerY + Math.floor(vertOffset / 2);
+        }
+        else {
+            fromScreenY = centerY - maxOffsetY;
+            toScreenY = centerY + maxOffsetY;
+            const horizOffset = Math.sign(dx) * Math.min(Math.abs(dx), maxOffsetX / 2);
+            fromScreenX = centerX - Math.floor(horizOffset / 2);
+            toScreenX = centerX + Math.floor(horizOffset / 2);
+        }
+        // Draw terrain/background dots to show distance
+        for (let ty = mapY; ty < mapY + mapHeight; ty++) {
+            for (let tx = mapX; tx < mapX + mapWidth; tx += 3) {
+                if (Math.random() < 0.3) {
+                    this.screen.write(tx, ty, '.', ANSI.fg.gray);
+                }
+            }
+        }
+        // Draw the path between rooms (shows the route)
+        this.drawTravelPath(fromScreenX, fromScreenY, toScreenX, toScreenY);
+        // Draw traveled portion in different color
+        const traveledX = Math.round(fromScreenX + (toScreenX - fromScreenX) * progress);
+        const traveledY = Math.round(fromScreenY + (toScreenY - fromScreenY) * progress);
+        this.drawTraveledPath(fromScreenX, fromScreenY, traveledX, traveledY);
+        // Draw origin room (behind player start)
+        const fromSymbol = this.getRoomSymbol(fromRoom);
+        this.screen.write(fromScreenX - 1, fromScreenY, `[${fromSymbol}]`, ANSI.fg.gray);
+        const fromLabel = fromRoom.name.slice(0, 10);
+        this.screen.write(fromScreenX - Math.floor(fromLabel.length / 2), fromScreenY + 1, fromLabel, ANSI.fg.gray);
+        // Draw destination room (goal)
+        const toSymbol = this.getRoomSymbol(toRoom);
+        this.screen.write(toScreenX - 1, toScreenY, `[${toSymbol}]`, ANSI.fg.brightYellow);
+        const toLabel = toRoom.name.slice(0, 10);
+        this.screen.write(toScreenX - Math.floor(toLabel.length / 2), toScreenY - 1, toLabel, ANSI.fg.yellow);
+        // Calculate and draw player position (interpolated based on progress)
+        const playerX = Math.round(fromScreenX + (toScreenX - fromScreenX) * progress);
+        const playerY = Math.round(fromScreenY + (toScreenY - fromScreenY) * progress);
+        // Animated player symbol
+        const playerFrame = Date.now() % 500 < 250 ? '@' : '*';
+        this.screen.write(playerX - 1, playerY, `[${playerFrame}]`, ANSI.fg.brightGreen);
+        // Progress percentage on the side
+        const pct = Math.floor(progress * 100);
+        this.screen.write(x + width - 6, y + 1, `${pct}%`, ANSI.fg.cyan);
+        // Legend and distance info at bottom
+        const legendY = y + height - 2;
+        const distInfo = `Distance: ${Math.floor(distance * 10)}m`;
+        this.screen.write(x + 2, legendY, distInfo, ANSI.fg.gray);
+        this.screen.write(x + width - 20, legendY, '[@]You -> [*]Dest', ANSI.fg.gray);
+    }
+    /**
+     * Draw the traveled portion of the path in a different color
+     */
+    drawTraveledPath(fromX, fromY, toX, toY) {
+        const dx = toX - fromX;
+        const dy = toY - fromY;
+        const steps = Math.max(Math.abs(dx), Math.abs(dy));
+        if (steps === 0)
+            return;
+        for (let i = 1; i < steps; i++) {
+            const t = i / steps;
+            const px = Math.round(fromX + dx * t);
+            const py = Math.round(fromY + dy * t);
+            // Use a brighter character for traveled path
+            this.screen.write(px, py, '=', ANSI.fg.green);
+        }
+    }
+    /**
+     * Draw a path between two points on the map
+     */
+    drawTravelPath(fromX, fromY, toX, toY) {
+        const dx = toX - fromX;
+        const dy = toY - fromY;
+        const steps = Math.max(Math.abs(dx), Math.abs(dy));
+        if (steps === 0)
+            return;
+        for (let i = 1; i < steps; i++) {
+            const t = i / steps;
+            const px = Math.round(fromX + dx * t);
+            const py = Math.round(fromY + dy * t);
+            // Choose path character based on direction
+            let pathChar = '·';
+            if (Math.abs(dx) > Math.abs(dy) * 2) {
+                pathChar = '─';
+            }
+            else if (Math.abs(dy) > Math.abs(dx) * 2) {
+                pathChar = '│';
+            }
+            else if ((dx > 0 && dy > 0) || (dx < 0 && dy < 0)) {
+                pathChar = '╲';
+            }
+            else {
+                pathChar = '╱';
+            }
+            this.screen.write(px, py, pathChar, ANSI.fg.gray);
+        }
+    }
+    /**
+     * Render travel status panel with progress and events
+     */
+    renderTravelStatusPanel(x, y, width, height, fromName, toName, progress, duration, events) {
+        this.screen.drawBox(x, y, width, height, 'Journey');
+        let lineY = y + 1;
+        // Progress bar
+        const progressPercent = Math.floor(progress * 100);
+        this.screen.write(x + 2, lineY, `Progress: ${progressPercent}%`, ANSI.fg.white);
+        lineY++;
+        this.screen.drawProgressBar(x + 2, lineY, Math.min(40, width - 6), progress, 1);
+        lineY++;
+        // Time remaining
+        const remaining = Math.ceil(duration * (1 - progress));
+        this.screen.write(x + 2, lineY, `Time remaining: ${remaining}s`, ANSI.fg.gray);
+        lineY += 2;
+        // Events during travel
+        if (events.length > 0 && lineY < y + height - 1) {
+            this.screen.write(x + 2, lineY, '─ Events ─', ANSI.fg.cyan);
+            lineY++;
+            const maxEvents = Math.min(events.length, height - (lineY - y) - 1);
+            for (let i = 0; i < maxEvents; i++) {
+                const event = events[events.length - maxEvents + i];
+                this.screen.write(x + 2, lineY, `• ${event}`.slice(0, width - 4), ANSI.fg.white);
+                lineY++;
+            }
+        }
+    }
+    /**
+     * Render travel info panel (right side)
+     */
+    renderTravelInfoPanel(x, y, width, height, fromName, toName, progress, duration) {
+        this.screen.drawBox(x, y, width, height, 'Travel');
+        let lineY = y + 1;
+        // From/To info
+        this.screen.write(x + 2, lineY, '> Journey', ANSI.fg.cyan, undefined, ANSI.bold);
+        lineY += 2;
+        this.screen.write(x + 2, lineY, 'From:', ANSI.fg.gray);
+        lineY++;
+        this.screen.write(x + 3, lineY, fromName.slice(0, width - 5), ANSI.fg.white);
+        lineY += 2;
+        this.screen.write(x + 2, lineY, 'To:', ANSI.fg.yellow);
+        lineY++;
+        this.screen.write(x + 3, lineY, toName.slice(0, width - 5), ANSI.fg.brightYellow);
+        lineY += 2;
+        // Visual progress indicator
+        const progressPercent = Math.floor(progress * 100);
+        this.screen.write(x + 2, lineY, '─────────────', ANSI.fg.gray);
+        lineY++;
+        // Animated travel indicator
+        const barWidth = width - 6;
+        const filledWidth = Math.floor(progress * barWidth);
+        const travelerFrame = ['>', '>'][Math.floor(Date.now() / 300) % 2];
+        this.screen.write(x + 2, lineY, '·'.repeat(barWidth), ANSI.fg.gray);
+        this.screen.write(x + 2, lineY, '═'.repeat(filledWidth), ANSI.fg.green);
+        if (filledWidth < barWidth) {
+            this.screen.write(x + 2 + filledWidth, lineY, travelerFrame, ANSI.fg.brightGreen);
+        }
+        lineY++;
+        this.screen.write(x + 2, lineY, `${progressPercent}% complete`, ANSI.fg.cyan);
+        lineY += 2;
+        // Time info
+        const remaining = Math.ceil(duration * (1 - progress));
+        const elapsed = Math.floor(duration * progress);
+        this.screen.write(x + 2, lineY, `⏱ ${remaining}s remaining`, ANSI.fg.gray);
+        lineY++;
+        this.screen.write(x + 2, lineY, `   ${elapsed}s traveled`, ANSI.fg.gray);
+        lineY += 2;
+        // Cancel hint at bottom
+        const hintY = y + height - 3;
+        this.screen.write(x + 2, hintY, '─────────────', ANSI.fg.gray);
+        this.screen.write(x + 2, hintY + 1, '[ESC] Cancel', ANSI.fg.yellow);
+    }
+    // =========================================================================
+    // DIALOG MODE
+    // =========================================================================
+    /**
+     * Render dialog screen
+     */
+    renderDialogScreen(npc, history, options, isWaiting) {
+        // Cache dialog state for refresh
+        this.dialogNPC = npc;
+        this.dialogHistory = history;
+        this.dialogOptions = options;
+        this.isWaitingForAI = isWaiting;
+        // Skip if modal is active
+        if (this.activeModal)
+            return;
+        // Update input buffer from InputManager
+        this.inputBuffer = this.input.getInputBuffer();
+        const { width: screenWidth, height: screenHeight } = this.screen.getSize();
+        this.screen.clear();
+        // Apply global padding
+        const px = this.PADDING;
+        const py = this.PADDING;
+        const width = screenWidth - this.PADDING * 2;
+        const height = screenHeight - this.PADDING * 2;
+        const boxWidth = Math.min(70, width - 4);
+        const boxHeight = Math.min(25, height - 4);
+        const boxX = px + Math.floor((width - boxWidth) / 2);
+        const boxY = py + Math.floor((height - boxHeight) / 2);
+        this.screen.drawBox(boxX, boxY, boxWidth, boxHeight, `${npc.name} (${npc.role})`, true);
+        let lineY = boxY + 2;
+        // NPC info
+        this.screen.write(boxX + 3, lineY, npc.appearance.slice(0, boxWidth - 6), ANSI.fg.gray);
+        lineY += 2;
+        // Dialog history
+        const maxHistory = boxHeight - 12;
+        const historyStart = Math.max(0, history.length - maxHistory);
+        for (let i = historyStart; i < history.length; i++) {
+            const entry = history[i];
+            const prefix = entry.role === 'player' ? '[You] ' : `[${npc.name}] `;
+            const color = entry.role === 'player' ? ANSI.fg.cyan : ANSI.fg.yellow;
+            this.screen.write(boxX + 3, lineY, prefix, color);
+            // Word wrap
+            const textWidth = boxWidth - 8;
+            const text = entry.text;
+            for (let j = 0; j < text.length && lineY < boxY + boxHeight - 6; j += textWidth) {
+                const line = j === 0 ? text.slice(j, j + textWidth - prefix.length) : text.slice(j, j + textWidth);
+                this.screen.write(j === 0 ? boxX + 3 + prefix.length : boxX + 3, lineY, line, ANSI.fg.white);
+                lineY++;
+            }
+        }
+        // Waiting indicator
+        if (isWaiting) {
+            this.screen.write(boxX + 3, lineY, '▌ Thinking...', ANSI.fg.gray);
+            lineY++;
+        }
+        // Quick options
+        lineY = boxY + boxHeight - 6;
+        this.screen.write(boxX + 3, lineY, '─── Quick Options ───', ANSI.fg.cyan);
+        lineY++;
+        for (const option of options.slice(0, 3)) {
+            this.screen.write(boxX + 3, lineY, `[${option.key}] ${option.text}`, ANSI.fg.gray);
+            lineY++;
+        }
+        // Input area
+        lineY = boxY + boxHeight - 2;
+        this.screen.write(boxX + 3, lineY, 'Say: ' + this.inputBuffer + '▌', ANSI.fg.white);
+        // Real time
+        const time = new Date().toLocaleTimeString('en-US', { hour12: false });
+        this.screen.write(boxX + boxWidth - 10, boxY + 1, `${time}`, ANSI.fg.gray);
+        this.screen.render();
+    }
+}
+// Singleton
+let uiInstance = null;
+export function getGameUI() {
+    if (!uiInstance) {
+        uiInstance = new GameUI();
+    }
+    return uiInstance;
+}
+//# sourceMappingURL=GameUI.js.map
+//# debugId=7d089040-391e-5d75-84d0-9dd7c0b0e3ea