clibuddy 1.1.0 → 1.2.0

package/dist/adventure/adventureUI.d.ts

@@ -19,6 +19,6 @@ export declare function changeQuestChain(menu: AdventureMenuState, delta: number
 export declare function changeExpeditionBiome(menu: AdventureMenuState, delta: number): AdventureMenuState;
 export declare function getSelectedBiomeId(menu: AdventureMenuState): string;
 export declare function renderAdventureMenu(menu: AdventureMenuState, state: BuddyState): string[];
-export declare function renderRoom(advState: AdventureState, adventure: AdventureDef, buddyName: string): string;
-export declare function renderResult(advState: AdventureState, adventure: AdventureDef, buddyName: string): string;
+export declare function renderRoom(advState: AdventureState, adventure: AdventureDef, state: BuddyState): string;
+export declare function renderResult(advState: AdventureState, adventure: AdventureDef, state: BuddyState): string;
 //# sourceMappingURL=adventureUI.d.ts.map

package/dist/adventure/adventureUI.js

@@ -10,11 +10,14 @@ exports.getSelectedBiomeId = getSelectedBiomeId;
 exports.renderAdventureMenu = renderAdventureMenu;
 exports.renderRoom = renderRoom;
 exports.renderResult = renderResult;
-const types_1 = require("./types");
+const types_1 = require("../buddy/types");
+const species_1 = require("../buddy/species");
+const types_2 = require("./types");
 const biomes_1 = require("./generation/biomes");
-const types_2 = require("../story/types");
+const types_3 = require("../story/types");
 const npcs_1 = require("../story/npcs");
 const listUtils_1 = require("../rendering/listUtils");
+const scene_1 = require("../rendering/scene");
 const screen_1 = require("../rendering/screen");
 function createAdventureMenu() {
     return { active: false, tab: "story", selectedIndex: 0, expeditionDifficulty: 1, expeditionBiomeIndex: 0, questChains: [], selectedChainIndex: 0 };
@@ -72,13 +75,13 @@ const DIFF_LABELS = {
 };
 function renderAdventureMenu(menu, state) {
     const lines = [];
-    lines.push(`  ${screen_1.ansi.dim}${"─".repeat(48)}${screen_1.ansi.reset}`);
+    lines.push(`  ${screen_1.ansi.dim}${"─".repeat(screen_1.UI_WIDTH)}${screen_1.ansi.reset}`);
     // Tab bar
     const storyTab = menu.tab === "story" ? `${screen_1.ansi.bold}${screen_1.ansi.colors.yellow}[Story]${screen_1.ansi.reset}` : `${screen_1.ansi.dim}[Story]${screen_1.ansi.reset}`;
     const expTab = menu.tab === "expedition" ? `${screen_1.ansi.bold}${screen_1.ansi.colors.cyan}[Expedition]${screen_1.ansi.reset}` : `${screen_1.ansi.dim}[Expedition]${screen_1.ansi.reset}`;
     const endTab = menu.tab === "endless" ? `${screen_1.ansi.bold}${screen_1.ansi.colors.magenta}[Endless]${screen_1.ansi.reset}` : `${screen_1.ansi.dim}[Endless]${screen_1.ansi.reset}`;
     lines.push(`  ${storyTab}  ${expTab}  ${endTab}  ${screen_1.ansi.dim}Tab${screen_1.ansi.reset}`);
-    lines.push(`  ${screen_1.ansi.dim}${"─".repeat(48)}${screen_1.ansi.reset}`);
+    lines.push(`  ${screen_1.ansi.dim}${"─".repeat(screen_1.UI_WIDTH)}${screen_1.ansi.reset}`);
     if (menu.tab === "story") {
         renderQuestsTab(lines, menu, state);
     }
@@ -88,7 +91,7 @@ function renderAdventureMenu(menu, state) {
     else {
         renderEndlessTab(lines, state);
     }
-    lines.push(`  ${screen_1.ansi.dim}${"─".repeat(48)}${screen_1.ansi.reset}`);
+    lines.push(`  ${screen_1.ansi.dim}${"─".repeat(screen_1.UI_WIDTH)}${screen_1.ansi.reset}`);
     return lines;
 }
 function renderQuestsTab(lines, menu, state) {
@@ -109,8 +112,8 @@ function renderQuestsTab(lines, menu, state) {
     // Chapter list
     for (let i = 0; i < chain.chapters.length; i++) {
         const chapter = chain.chapters[i];
-        const completed = (0, types_2.isChapterComplete)(chapter.id, progress);
-        const blockReason = (0, types_2.canStartChapter)(chapter, progress, state.level);
+        const completed = (0, types_3.isChapterComplete)(chapter.id, progress);
+        const blockReason = (0, types_3.canStartChapter)(chapter, progress, state.level);
         const selected = i === menu.selectedIndex;
         const pointer = selected ? `${screen_1.ansi.colors.cyan}▸${screen_1.ansi.reset}` : " ";
         if (completed) {
@@ -188,54 +191,76 @@ function renderEndlessTab(lines, state) {
     lines.push(`  ${screen_1.ansi.dim}Enter to begin your descent${screen_1.ansi.reset}`);
 }
 // ─── Adventure Room Rendering ────────────────────────────────
-function renderRoom(advState, adventure, buddyName) {
-    const room = (0, types_1.getRoom)(adventure, advState.currentRoomId);
+function renderRoom(advState, adventure, state) {
+    const room = (0, types_2.getRoom)(adventure, advState.currentRoomId);
     if (!room)
         return "  Room not found!";
-    const progress = (0, types_1.getRoomProgress)(advState);
+    const progress = (0, types_2.getRoomProgress)(advState);
     const lines = [];
+    // ── Header with box-drawn frame ──
     lines.push("");
     if (adventure.isScene || adventure.hideRoomCounter) {
-        lines.push(`  ${screen_1.ansi.bold}${adventure.name}${screen_1.ansi.reset}`);
+        lines.push(`  ${screen_1.ansi.bold}╔══ ${adventure.name} ${"═".repeat(Math.max(1, screen_1.UI_WIDTH - adventure.name.length - 6))}╗${screen_1.ansi.reset}`);
     }
     else {
-        lines.push(`  ${screen_1.ansi.bold}${adventure.name}${screen_1.ansi.reset}  ${screen_1.ansi.dim}Room ${progress}/${adventure.rooms.length}${screen_1.ansi.reset}  ${screen_1.ansi.dim}Morale: ${advState.morale}%${screen_1.ansi.reset}`);
+        const roomInfo = `Room ${progress}/${adventure.rooms.length}`;
+        const fillLen = Math.max(1, screen_1.UI_WIDTH - adventure.name.length - roomInfo.length - 8);
+        lines.push(`  ${screen_1.ansi.bold}╔══ ${adventure.name} ${"═".repeat(fillLen)} ${roomInfo} ═╗${screen_1.ansi.reset}`);
+    }
+    if (!adventure.isScene && !adventure.hideRoomCounter) {
+        lines.push(`  ${screen_1.ansi.dim}Morale: ${advState.morale}%${screen_1.ansi.reset}`);
     }
-    lines.push(`  ${screen_1.ansi.dim}${"─".repeat(44)}${screen_1.ansi.reset}`);
     lines.push("");
     lines.push(`  ${screen_1.ansi.bold}${room.title}${screen_1.ansi.reset}`);
     lines.push("");
-    // Show NPC ASCII art if present
+    // ── Side-by-side buddy + NPC art (or just buddy art) ──
+    const species = (0, species_1.getSpecies)(state.speciesId);
+    const buddyColor = species ? types_1.RARITY_COLORS[species.rarity] : "";
+    const buddyArtLines = species ? species.animations.idle[0].split("\n") : [];
     if (room.npcsPresent && room.npcsPresent.length > 0) {
-        for (const npcId of room.npcsPresent) {
-            const npc = (0, npcs_1.getNPC)(npcId);
-            if (npc) {
-                lines.push(`  ${screen_1.ansi.dim}${npc.name} the ${npc.title}${screen_1.ansi.reset}`);
-                for (const artLine of npc.art) {
-                    lines.push(`    ${screen_1.ansi.colors.cyan}${artLine}${screen_1.ansi.reset}`);
-                }
-                lines.push("");
+        const npc = (0, npcs_1.getNPC)(room.npcsPresent[0]);
+        if (npc && species) {
+            // Side-by-side: buddy (left) + NPC (right)
+            const artLines = (0, scene_1.composeDualArt)(buddyArtLines, npc.art, buddyColor, screen_1.ansi.colors.cyan);
+            for (const line of artLines) {
+                lines.push(`    ${line}`);
             }
+            // Labels below the art pair
+            const buddyLabel = `${buddyColor}${state.name}${screen_1.ansi.reset}`;
+            const npcLabel = `${screen_1.ansi.colors.cyan}${npc.name}${screen_1.ansi.reset} ${screen_1.ansi.dim}${npc.title}${screen_1.ansi.reset}`;
+            lines.push(`    ${buddyLabel}          ${npcLabel}`);
+            lines.push("");
+        }
+    }
+    else if (species) {
+        // No NPC — show buddy art centered, dimmed slightly
+        for (const artLine of buddyArtLines) {
+            lines.push(`    ${buddyColor}${artLine}${screen_1.ansi.reset}`);
         }
+        lines.push("");
     }
-    // Paged text display — show LINES_PER_PAGE lines per page
+    // ── Sliding window text — show only current page ──
     const LINES_PER_PAGE = 3;
     const totalPages = Math.ceil(room.text.length / LINES_PER_PAGE);
     const currentPage = advState.textPage;
     const textFullyShown = advState.textFullyShown || currentPage >= totalPages - 1;
-    // Show text up to current page
-    const linesToShow = Math.min(room.text.length, (currentPage + 1) * LINES_PER_PAGE);
-    for (let i = 0; i < linesToShow; i++) {
+    // Scroll indicator: prior text exists
+    if (currentPage > 0) {
+        lines.push(`  ${screen_1.ansi.dim}  ▲${screen_1.ansi.reset}`);
+    }
+    // Show only current page's lines (sliding window)
+    const startLine = currentPage * LINES_PER_PAGE;
+    const endLine = Math.min(room.text.length, startLine + LINES_PER_PAGE);
+    for (let i = startLine; i < endLine; i++) {
         lines.push(`  ${room.text[i]}`);
     }
     lines.push("");
     if (!textFullyShown) {
-        // More text to show — prompt to continue reading
-        lines.push(`  ${screen_1.ansi.dim}▼ Press Enter to continue reading... (${currentPage + 1}/${totalPages})${screen_1.ansi.reset}`);
+        lines.push(`  ${screen_1.ansi.dim}▼ Enter to continue... (${currentPage + 1}/${totalPages})${screen_1.ansi.reset}`);
     }
     else {
-        // All text shown — show buddy line + choices
-        lines.push(`  ${buddyName}: "${advState.buddyReaction}"`);
+        // All text shown — buddy reaction + choices
+        lines.push(`  ${buddyColor}${state.name}:${screen_1.ansi.reset} "${advState.buddyReaction}"`);
         lines.push("");
         if (room.type === "narrative" && room.choices) {
             for (let i = 0; i < room.choices.length; i++) {
@@ -243,7 +268,6 @@ function renderRoom(advState, adventure, buddyName) {
             }
         }
         else if (room.type === "event" && room.eventChoices) {
-            // Check if event was already resolved
             const alreadyResolved = room.eventChoices.some((c) => c.outcome === advState.buddyReaction);
             if (alreadyResolved) {
                 lines.push(`  ${screen_1.ansi.dim}Press Enter to continue...${screen_1.ansi.reset}`);
@@ -269,26 +293,37 @@ function renderRoom(advState, adventure, buddyName) {
     return lines.join("\n");
 }
 // ─── Result Screen ───────────────────────────────────────────
-function renderResult(advState, adventure, buddyName) {
+function renderResult(advState, adventure, state) {
     const lines = [];
+    const w = screen_1.UI_WIDTH;
     lines.push("");
-    lines.push(`  ${screen_1.ansi.bold}${screen_1.ansi.colors.green}Adventure Complete!${screen_1.ansi.reset}`);
-    lines.push(`  ${screen_1.ansi.dim}${"─".repeat(44)}${screen_1.ansi.reset}`);
-    lines.push("");
-    lines.push(`  ${screen_1.ansi.bold}${adventure.name}${screen_1.ansi.reset} — Cleared!`);
-    lines.push("");
-    lines.push(`  Battles: ${advState.battlesWon} won, ${advState.battlesLost} lost, ${advState.battlesFled} fled`);
+    lines.push(`  ${screen_1.ansi.colors.green}╔${"═".repeat(w)}╗${screen_1.ansi.reset}`);
+    lines.push(`  ${screen_1.ansi.colors.green}║${screen_1.ansi.reset}  ${screen_1.ansi.bold}★ ADVENTURE COMPLETE ★${screen_1.ansi.reset}${" ".repeat(Math.max(0, w - 24))}${screen_1.ansi.colors.green}║${screen_1.ansi.reset}`);
+    lines.push(`  ${screen_1.ansi.colors.green}╠${"═".repeat(w)}╣${screen_1.ansi.reset}`);
+    const padLine = (text, visLen) => {
+        return `  ${screen_1.ansi.colors.green}║${screen_1.ansi.reset}  ${text}${" ".repeat(Math.max(0, w - visLen - 2))}${screen_1.ansi.colors.green}║${screen_1.ansi.reset}`;
+    };
+    lines.push(padLine(`${screen_1.ansi.bold}${adventure.name}${screen_1.ansi.reset}`, adventure.name.length));
+    lines.push(padLine("", 0));
+    const battleText = `Battles: ${advState.battlesWon} won, ${advState.battlesLost} lost, ${advState.battlesFled} fled`;
+    lines.push(padLine(battleText, battleText.length));
     if (advState.lootCollected.length > 0) {
         const lootNames = advState.lootCollected.map((id) => id.replace(/_/g, " "));
-        lines.push(`  Loot: ${lootNames.join(", ")}`);
+        const lootText = `Loot: ${lootNames.join(", ")}`;
+        lines.push(padLine(lootText, lootText.length));
     }
-    lines.push(`  XP earned: ${screen_1.ansi.bold}${advState.xpEarned}${screen_1.ansi.reset}`);
-    lines.push(`  Final morale: ${advState.morale}%`);
+    const xpText = `XP earned: ${advState.xpEarned}`;
+    lines.push(padLine(`${screen_1.ansi.bold}${xpText}${screen_1.ansi.reset}`, xpText.length));
+    lines.push(padLine(`Final morale: ${advState.morale}%`, `Final morale: ${advState.morale}%`.length));
     if (advState.damageTaken === 0 && advState.battlesWon > 0) {
-        lines.push(`  ${screen_1.ansi.colors.yellow}★ PERFECT — No damage taken!${screen_1.ansi.reset}`);
+        const perfText = "★ PERFECT — No damage taken!";
+        lines.push(padLine(`${screen_1.ansi.colors.yellow}${perfText}${screen_1.ansi.reset}`, perfText.length));
     }
+    lines.push(`  ${screen_1.ansi.colors.green}╚${"═".repeat(w)}╝${screen_1.ansi.reset}`);
     lines.push("");
-    lines.push(`  ${buddyName}: "${advState.buddyReaction}"`);
+    const species = (0, species_1.getSpecies)(state.speciesId);
+    const buddyColor = species ? types_1.RARITY_COLORS[species.rarity] : "";
+    lines.push(`  ${buddyColor}${state.name}:${screen_1.ansi.reset} "${advState.buddyReaction}"`);
     lines.push("");
     lines.push(`  ${screen_1.ansi.dim}Press Enter to return...${screen_1.ansi.reset}`);
     lines.push("");

package/dist/adventure/combat/combatUI.js

@@ -11,6 +11,7 @@ const lines_1 = require("../../dialogue/lines");
 const skills_1 = require("./skills");
 const items_1 = require("../../inventory/items");
 const screen_1 = require("../../rendering/screen");
+const scene_1 = require("../../rendering/scene");
 const CONDITION_ICONS = {
     burn: "🔥", poison: "☠", freeze: "❄", stun: "⚡", charm: "💕",
     blind: "👁", regen: "💚", shield: "🛡", buff: "↑", debuff: "↓",
@@ -37,41 +38,76 @@ function hpBar(current, max, width = 15) {
 function renderCombat(combat, state, adventureName) {
     const species = (0, species_1.getSpecies)(state.speciesId);
     const lines = [];
-    lines.push("");
-    lines.push(`  ${screen_1.ansi.bold}${adventureName}${screen_1.ansi.reset}  ${screen_1.ansi.dim}Combat${screen_1.ansi.reset}`);
-    lines.push(`  ${screen_1.ansi.dim}${"─".repeat(44)}${screen_1.ansi.reset}`);
-    lines.push("");
-    // Enemy
+    const termWidth = process.stdout.columns || 80;
+    const speciesColor = species ? types_1.RARITY_COLORS[species.rarity] : "";
+    const playerElemIcon = types_2.ELEMENT_ICONS[combat.playerElement] ?? "";
     const enemyElemIcon = types_2.ELEMENT_ICONS[combat.enemyElement] ?? "";
-    lines.push(`  ${screen_1.ansi.colors.red}${screen_1.ansi.bold}${combat.enemy.name}${screen_1.ansi.reset} ${enemyElemIcon}`);
-    lines.push(`  HP: ${hpBar(combat.enemyStats.hp, combat.enemyStats.maxHp)}  ${screen_1.ansi.dim}ATK:${combat.enemyStats.atk} DEF:${combat.enemyStats.def}${screen_1.ansi.reset}${formatConditions(combat.enemyConditions)}`);
-    for (const artLine of combat.enemy.art) {
-        lines.push(`    ${screen_1.ansi.colors.red}${artLine}${screen_1.ansi.reset}`);
-    }
+    const buddyArtLines = species ? species.animations.idle[0].split("\n") : [];
+    const enemyArtLines = combat.enemy.art;
+    // Pre-calculate content width for the frame
+    const buddyHPpreview = `HP: ${hpBar(combat.playerStats.hp, combat.playerStats.maxHp)}`;
+    const enemyHPpreview = `HP: ${hpBar(combat.enemyStats.hp, combat.enemyStats.maxHp)}`;
+    const leftColWidth = (0, screen_1.stripAnsi)(buddyHPpreview).length + 2;
+    const contentWidth = leftColWidth + (0, screen_1.stripAnsi)(enemyHPpreview).length;
+    // ── Header with box frame matched to content ──
+    const frameWidth = Math.max(screen_1.UI_WIDTH, contentWidth + 4); // +4 for "    " indent
     lines.push("");
-    lines.push(`  ${screen_1.ansi.dim}        vs${screen_1.ansi.reset}`);
+    const battleLabel = "⚔ BATTLE";
+    const fillLen = Math.max(1, frameWidth - adventureName.length - battleLabel.length - 8);
+    lines.push(`  ${screen_1.ansi.bold}╔══ ${adventureName} ${"═".repeat(fillLen)} ${battleLabel} ═╗${screen_1.ansi.reset}`);
     lines.push("");
-    // Player buddy
-    const speciesColor = species ? types_1.RARITY_COLORS[species.rarity] : "";
-    const playerElemIcon = types_2.ELEMENT_ICONS[combat.playerElement] ?? "";
-    lines.push(`  ${speciesColor}${screen_1.ansi.bold}${state.name}${screen_1.ansi.reset} ${playerElemIcon}`);
-    lines.push(`  HP: ${hpBar(combat.playerStats.hp, combat.playerStats.maxHp)}  ${screen_1.ansi.dim}ATK:${combat.playerStats.atk} DEF:${combat.playerStats.def}${screen_1.ansi.reset}${formatConditions(combat.playerConditions)}`);
-    if (species) {
-        const frame = species.animations.idle[0].split("\n");
-        for (const artLine of frame) {
-            lines.push(`    ${speciesColor}${artLine}${screen_1.ansi.reset}`);
+    // ── Side-by-side layout (buddy left, enemy right) ──
+    if (termWidth >= 60 && species) {
+        const leftArtWidth = Math.max(...buddyArtLines.map(l => (0, screen_1.stripAnsi)(l).length));
+        // Art gap calculated so enemy art starts at same column as enemy HP
+        const artGap = Math.max(4, leftColWidth - leftArtWidth);
+        const artLines = (0, scene_1.composeDualArt)(buddyArtLines, enemyArtLines, speciesColor, screen_1.ansi.colors.red, artGap);
+        // Name labels above art, aligned to same columns
+        const buddyLabel = `${speciesColor}${screen_1.ansi.bold}${state.name}${screen_1.ansi.reset} ${playerElemIcon}`;
+        const enemyLabel = `${screen_1.ansi.colors.red}${screen_1.ansi.bold}${combat.enemy.name}${screen_1.ansi.reset} ${enemyElemIcon}`;
+        lines.push(`    ${(0, screen_1.visPad)(buddyLabel, leftColWidth)}${screen_1.ansi.dim}VS${screen_1.ansi.reset}  ${enemyLabel}`);
+        lines.push("");
+        // Art side by side
+        for (const line of artLines) {
+            lines.push(`    ${line}`);
+        }
+        lines.push("");
+        // HP bars side-by-side — aligned to same columns as art
+        const buddyHPstr = `HP: ${hpBar(combat.playerStats.hp, combat.playerStats.maxHp)}`;
+        const enemyHPstr = `HP: ${hpBar(combat.enemyStats.hp, combat.enemyStats.maxHp)}`;
+        const buddyStats = `${screen_1.ansi.dim}ATK:${combat.playerStats.atk} DEF:${combat.playerStats.def}${screen_1.ansi.reset}${formatConditions(combat.playerConditions)}`;
+        const enemyStats = `${screen_1.ansi.dim}ATK:${combat.enemyStats.atk} DEF:${combat.enemyStats.def}${screen_1.ansi.reset}${formatConditions(combat.enemyConditions)}`;
+        lines.push(`    ${(0, screen_1.visPad)(buddyHPstr, leftColWidth)}${enemyHPstr}`);
+        lines.push(`    ${(0, screen_1.visPad)(buddyStats, leftColWidth)}${enemyStats}`);
+    }
+    else {
+        // ── Narrow fallback: vertical stack (original layout) ──
+        lines.push(`  ${screen_1.ansi.colors.red}${screen_1.ansi.bold}${combat.enemy.name}${screen_1.ansi.reset} ${enemyElemIcon}`);
+        lines.push(`  HP: ${hpBar(combat.enemyStats.hp, combat.enemyStats.maxHp)}  ${screen_1.ansi.dim}ATK:${combat.enemyStats.atk} DEF:${combat.enemyStats.def}${screen_1.ansi.reset}${formatConditions(combat.enemyConditions)}`);
+        for (const artLine of enemyArtLines) {
+            lines.push(`    ${screen_1.ansi.colors.red}${artLine}${screen_1.ansi.reset}`);
+        }
+        lines.push("");
+        lines.push(`  ${screen_1.ansi.dim}        vs${screen_1.ansi.reset}`);
+        lines.push("");
+        lines.push(`  ${speciesColor}${screen_1.ansi.bold}${state.name}${screen_1.ansi.reset} ${playerElemIcon}`);
+        lines.push(`  HP: ${hpBar(combat.playerStats.hp, combat.playerStats.maxHp)}  ${screen_1.ansi.dim}ATK:${combat.playerStats.atk} DEF:${combat.playerStats.def}${screen_1.ansi.reset}${formatConditions(combat.playerConditions)}`);
+        if (species) {
+            for (const artLine of buddyArtLines) {
+                lines.push(`    ${speciesColor}${artLine}${screen_1.ansi.reset}`);
+            }
         }
     }
     lines.push("");
-    // Combat log (last 2 messages)
+    // ── Combat log (last 2 messages) ──
     const recentLog = combat.log.slice(-2);
     for (const msg of recentLog) {
         lines.push(`  ${screen_1.ansi.dim}${msg}${screen_1.ansi.reset}`);
     }
     lines.push("");
-    // Action menu (only during player turn)
+    // ── Action menu / result ──
     if (combat.phase === "player_turn") {
-        lines.push(`  ${screen_1.ansi.dim}${"─".repeat(44)}${screen_1.ansi.reset}`);
+        lines.push(`  ${screen_1.ansi.dim}${"─".repeat(screen_1.UI_WIDTH)}${screen_1.ansi.reset}`);
         lines.push(`  [1] Attack    [2] Skill    [3] Item`);
         lines.push(`  [4] Defend    [5] Flee`);
         lines.push(`  ${screen_1.ansi.dim}Energy: ${"◆".repeat(combat.combatEnergy)}${"◇".repeat(combat.maxCombatEnergy - combat.combatEnergy)}${screen_1.ansi.reset}`);
@@ -79,15 +115,15 @@ function renderCombat(combat, state, adventureName) {
     else if (combat.phase === "victory") {
         const victoryLines = lines_1.COMBAT_VICTORY_LINES[state.speciesId];
         const victoryLine = victoryLines ? victoryLines[Math.floor(Math.random() * victoryLines.length)] : "We did it!";
-        lines.push(`  ${screen_1.ansi.colors.green}${screen_1.ansi.bold}Victory!${screen_1.ansi.reset}  ${screen_1.ansi.dim}+${combat.enemy.xpReward} XP${screen_1.ansi.reset}`);
-        lines.push(`  ${state.name}: "${victoryLine}"`);
+        lines.push(`  ${screen_1.ansi.colors.green}${screen_1.ansi.bold}★ Victory!${screen_1.ansi.reset}  ${screen_1.ansi.dim}+${combat.enemy.xpReward} XP${screen_1.ansi.reset}`);
+        lines.push(`  ${speciesColor}${state.name}:${screen_1.ansi.reset} "${victoryLine}"`);
         lines.push(`  ${screen_1.ansi.dim}Press Enter to continue...${screen_1.ansi.reset}`);
     }
     else if (combat.phase === "defeat") {
         const defeatLines = lines_1.COMBAT_DEFEAT_LINES[state.speciesId];
         const defeatLine = defeatLines ? defeatLines[Math.floor(Math.random() * defeatLines.length)] : "We'll get them next time...";
         lines.push(`  ${screen_1.ansi.colors.red}${screen_1.ansi.bold}Defeated!${screen_1.ansi.reset}`);
-        lines.push(`  ${state.name}: "${defeatLine}"`);
+        lines.push(`  ${speciesColor}${state.name}:${screen_1.ansi.reset} "${defeatLine}"`);
         lines.push(`  ${screen_1.ansi.dim}Press Enter to retreat...${screen_1.ansi.reset}`);
     }
     else if (combat.phase === "fled") {
@@ -95,7 +131,6 @@ function renderCombat(combat, state, adventureName) {
         lines.push(`  ${screen_1.ansi.dim}Press Enter to continue...${screen_1.ansi.reset}`);
     }
     else {
-        // Animating
         lines.push(`  ${screen_1.ansi.dim}...${screen_1.ansi.reset}`);
     }
     lines.push("");
@@ -104,7 +139,7 @@ function renderCombat(combat, state, adventureName) {
 function renderSkillMenu(combat, state) {
     const skills = (0, skills_1.getAvailableSkills)(state.speciesId, state.level);
     const lines = [];
-    lines.push(`  ${screen_1.ansi.dim}${"─".repeat(44)}${screen_1.ansi.reset}`);
+    lines.push(`  ${screen_1.ansi.dim}${"─".repeat(screen_1.UI_WIDTH)}${screen_1.ansi.reset}`);
     lines.push(`  ${screen_1.ansi.bold}Skills${screen_1.ansi.reset}  ${screen_1.ansi.dim}Energy: ${"◆".repeat(combat.combatEnergy)}${"◇".repeat(combat.maxCombatEnergy - combat.combatEnergy)}${screen_1.ansi.reset}`);
     for (let i = 0; i < skills.length; i++) {
         const s = skills[i];
@@ -113,7 +148,7 @@ function renderSkillMenu(combat, state) {
         lines.push(`  ${color}[${i + 1}] ${s.name} (${s.energyCost}◆) — ${s.description}${screen_1.ansi.reset}`);
     }
     lines.push(`  ${screen_1.ansi.dim}[0] Back${screen_1.ansi.reset}`);
-    lines.push(`  ${screen_1.ansi.dim}${"─".repeat(44)}${screen_1.ansi.reset}`);
+    lines.push(`  ${screen_1.ansi.dim}${"─".repeat(screen_1.UI_WIDTH)}${screen_1.ansi.reset}`);
     return lines.join("\n");
 }
 /** Get inventory slots usable in combat (medicine items with health effect) */
@@ -135,7 +170,7 @@ function getCombatItems(inventory) {
 function renderItemMenu(combat, inventory, selectedIndex) {
     const items = getCombatItems(inventory);
     const lines = [];
-    lines.push(`  ${screen_1.ansi.dim}${"─".repeat(44)}${screen_1.ansi.reset}`);
+    lines.push(`  ${screen_1.ansi.dim}${"─".repeat(screen_1.UI_WIDTH)}${screen_1.ansi.reset}`);
     lines.push(`  ${screen_1.ansi.bold}Items${screen_1.ansi.reset}  ${screen_1.ansi.dim}HP: ${combat.playerStats.hp}/${combat.playerStats.maxHp}${screen_1.ansi.reset}`);
     if (items.length === 0) {
         lines.push(`  ${screen_1.ansi.dim}  No medicine in inventory${screen_1.ansi.reset}`);
@@ -155,7 +190,7 @@ function renderItemMenu(combat, inventory, selectedIndex) {
             }
         }
     }
-    lines.push(`  ${screen_1.ansi.dim}${"─".repeat(44)}${screen_1.ansi.reset}`);
+    lines.push(`  ${screen_1.ansi.dim}${"─".repeat(screen_1.UI_WIDTH)}${screen_1.ansi.reset}`);
     lines.push(`  ${screen_1.ansi.dim}Enter to use, Esc to close${screen_1.ansi.reset}`);
     return lines.join("\n");
 }

package/dist/index.js

@@ -137,10 +137,10 @@ function redraw() {
                     screen.draw(screen_, `  ${screen_1.ansi.dim}Esc to flee${screen_1.ansi.reset}`);
                 }
                 else if (activeAdventure.phase === "result") {
-                    screen.draw((0, adventureUI_1.renderResult)(activeAdventure, adv, buddyState.name), `  ${screen_1.ansi.dim}Press Enter${screen_1.ansi.reset}`);
+                    screen.draw((0, adventureUI_1.renderResult)(activeAdventure, adv, buddyState), `  ${screen_1.ansi.dim}Press Enter${screen_1.ansi.reset}`);
                 }
                 else {
-                    screen.draw((0, adventureUI_1.renderRoom)(activeAdventure, adv, buddyState.name), `  ${screen_1.ansi.dim}Esc to retreat${screen_1.ansi.reset}`);
+                    screen.draw((0, adventureUI_1.renderRoom)(activeAdventure, adv, buddyState), `  ${screen_1.ansi.dim}Esc to retreat${screen_1.ansi.reset}`);
                 }
             }
             return;

package/dist/rendering/display.js

@@ -11,18 +11,26 @@ const items_1 = require("./items");
 const scene_1 = require("./scene");
 const screen_1 = require("./screen");
 const updates_1 = require("../updates");
+/** Per-stat identity colors */
+const STAT_COLORS = {
+    Hunger: screen_1.ansi.colors.green,
+    Happiness: screen_1.ansi.colors.magenta,
+    Health: screen_1.ansi.colors.cyan,
+    Energy: screen_1.ansi.colors.blue,
+};
 function statBar(value, label, width = 20) {
     const filled = Math.round((value / 100) * width);
     const empty = width - filled;
+    // Use per-stat color when healthy, override to yellow/red when low
     let color;
-    if (value > 60)
-        color = screen_1.ansi.colors.green;
-    else if (value > 30)
+    if (value <= 30)
+        color = screen_1.ansi.colors.red;
+    else if (value <= 60)
         color = screen_1.ansi.colors.yellow;
     else
-        color = screen_1.ansi.colors.red;
-    const bar = color + "█".repeat(filled) + screen_1.ansi.dim + "░".repeat(empty) + screen_1.ansi.reset;
-    return `  ${label.padEnd(12)} ${bar} ${color}${Math.round(value).toString().padStart(3)}%${screen_1.ansi.reset}`;
+        color = STAT_COLORS[label] ?? screen_1.ansi.colors.green;
+    const bar = color + "█".repeat(filled) + screen_1.ansi.colors.gray + "░".repeat(empty) + screen_1.ansi.reset;
+    return `${label.padEnd(12)} ${bar} ${color}${Math.round(value).toString().padStart(3)}%${screen_1.ansi.reset}`;
 }
 /**
  * Renders the full main screen content (buddy + stats + mood).
@@ -38,7 +46,7 @@ function renderMainScreen(state, frame, message, dialogue, dialogueSource) {
     // Header bar
     lines.push("");
     lines.push(`  ${screen_1.ansi.bold}CLI Buddy${screen_1.ansi.reset}  ${screen_1.ansi.dim}v${updates_1.CURRENT_VERSION}${screen_1.ansi.reset}`);
-    lines.push(`  ${screen_1.ansi.dim}${"─".repeat(40)}${screen_1.ansi.reset}`);
+    lines.push(`  ${screen_1.ansi.dim}${"─".repeat(screen_1.UI_WIDTH)}${screen_1.ansi.reset}`);
     if (!state.alive) {
         lines.push("");
         lines.push(`  ${screen_1.ansi.bold}${screen_1.ansi.colors.red}${state.name} has passed away...${screen_1.ansi.reset}`);
@@ -89,33 +97,87 @@ function renderMainScreen(state, frame, message, dialogue, dialogueSource) {
     // Compose scene with item
     const item = items_1.ACTIVITY_ITEMS[activityType] ?? null;
     const sceneLines = (0, scene_1.composeScene)(buddyArtLines, item, activityType === "idle");
-    for (const line of sceneLines) {
-        lines.push(`  ${color}${line}${screen_1.ansi.reset}`);
-    }
-    // Activity timer
+    // Activity timer line
+    let timerLine = "";
     if (state.activity && state.activity.type !== "idle") {
         const timerLabel = state.activity.type === "sleeping" ? "Sleeping" :
             state.activity.type === "eating" ? "Eating" : "Playing";
         const isRecovery = state.activity.unskippable;
         const label2 = isRecovery ? "Recovering" : timerLabel;
         const skipHint = isRecovery ? "" : "  (press any key to skip)";
-        lines.push(`  ${screen_1.ansi.dim}  ${label2}... ${(0, activities_1.formatTimeRemaining)(state.activity)} remaining${skipHint}${screen_1.ansi.reset}`);
+        timerLine = `${screen_1.ansi.dim}${label2}... ${(0, activities_1.formatTimeRemaining)(state.activity)} remaining${skipHint}${screen_1.ansi.reset}`;
     }
-    lines.push("");
-    // Stats — always visible, update in real time
-    lines.push(statBar(state.stats.hunger, "Hunger"));
-    lines.push(statBar(state.stats.happiness, "Happiness"));
-    lines.push(statBar(state.stats.health, "Health"));
-    lines.push(statBar(state.stats.energy, "Energy"));
-    lines.push("");
-    // Mood message
-    // Dialogue overrides mood when present
+    // Build stat lines
+    const statLines = [
+        statBar(state.stats.hunger, "Hunger"),
+        statBar(state.stats.happiness, "Happiness"),
+        statBar(state.stats.health, "Health"),
+        statBar(state.stats.energy, "Energy"),
+    ];
+    // Build mood/dialogue line
+    let moodLine;
     if (dialogue) {
         const sourceTag = dialogueSource ? `${screen_1.ansi.dim}[${dialogueSource}]${screen_1.ansi.reset} ` : "";
-        lines.push(`  ${sourceTag}${screen_1.ansi.colors.cyan}"${dialogue}"${screen_1.ansi.reset}`);
+        moodLine = `${sourceTag}${screen_1.ansi.colors.cyan}"${dialogue}"${screen_1.ansi.reset}`;
+    }
+    else {
+        moodLine = `${screen_1.ansi.dim}${getMoodMessage(state)}${screen_1.ansi.reset}`;
+    }
+    // Side-by-side layout: buddy left, stats right (if terminal wide enough)
+    const termWidth = process.stdout.columns || 80;
+    const minWidthForSideBySide = 65;
+    // Trim trailing whitespace from scene lines so the left column is tight
+    const trimmedSceneLines = sceneLines.map((l) => l.trimEnd());
+    // Measure the actual widest scene line for dynamic left column width
+    const leftColumnWidth = Math.max(...trimmedSceneLines.map((l) => (0, screen_1.stripAnsi)(l).length), 12) + 2;
+    if (termWidth >= minWidthForSideBySide) {
+        // Build left column: buddy art only
+        const leftLines = [];
+        for (const line of trimmedSceneLines) {
+            leftLines.push(`${color}${line}${screen_1.ansi.reset}`);
+        }
+        // Build right column: stats only
+        const rightLines = [];
+        // Vertical offset to center stats against art
+        const artHeight = leftLines.length;
+        const statsHeight = statLines.length;
+        const topPad = Math.max(0, Math.floor((artHeight - statsHeight) / 2));
+        for (let i = 0; i < topPad; i++)
+            rightLines.push("");
+        for (const sl of statLines) {
+            rightLines.push(sl);
+        }
+        // Merge columns side by side
+        const maxRows = Math.max(leftLines.length, rightLines.length);
+        for (let i = 0; i < maxRows; i++) {
+            const left = leftLines[i] ?? "";
+            const right = rightLines[i] ?? "";
+            // Pad left column to fixed width (strip ANSI for length calc)
+            const leftVisible = (0, screen_1.stripAnsi)(left);
+            const pad = Math.max(0, leftColumnWidth - leftVisible.length);
+            lines.push(`  ${left}${" ".repeat(pad)}${right}`);
+        }
+        // Timer and mood below the side-by-side section
+        if (timerLine) {
+            lines.push(`  ${timerLine}`);
+        }
+        lines.push("");
+        lines.push(`  ${moodLine}`);
     }
     else {
-        lines.push(`  ${screen_1.ansi.dim}${getMoodMessage(state)}${screen_1.ansi.reset}`);
+        // Narrow terminal: vertical stack (original layout)
+        for (const line of sceneLines) {
+            lines.push(`  ${color}${line}${screen_1.ansi.reset}`);
+        }
+        if (timerLine) {
+            lines.push(`  ${timerLine}`);
+        }
+        lines.push("");
+        for (const sl of statLines) {
+            lines.push(`  ${sl}`);
+        }
+        lines.push("");
+        lines.push(`  ${moodLine}`);
     }
     // Action feedback message (fades after a few seconds)
     if (message) {
@@ -137,7 +199,7 @@ function renderRollScreen(phase, speciesName, speciesArt, rarityColor, rarityLab
     const lines = [];
     lines.push("");
     lines.push(`  ${screen_1.ansi.bold}CLI Buddy${screen_1.ansi.reset}  ${screen_1.ansi.dim}v${updates_1.CURRENT_VERSION}${screen_1.ansi.reset}`);
-    lines.push(`  ${screen_1.ansi.dim}${"─".repeat(40)}${screen_1.ansi.reset}`);
+    lines.push(`  ${screen_1.ansi.dim}${"─".repeat(screen_1.UI_WIDTH)}${screen_1.ansi.reset}`);
     lines.push("");
     if (phase === "waiting") {
         lines.push(`  ${screen_1.ansi.dim}Welcome! You don't have a buddy yet.${screen_1.ansi.reset}`);

package/dist/rendering/overlayUI.js

@@ -40,9 +40,9 @@ function formatTimeAgo(timestamp) {
 }
 function renderTitlesOverlay(state, overlay) {
     const lines = [];
-    lines.push(`  ${screen_1.ansi.dim}${"─".repeat(48)}${screen_1.ansi.reset}`);
+    lines.push(`  ${screen_1.ansi.dim}${"─".repeat(screen_1.UI_WIDTH)}${screen_1.ansi.reset}`);
     lines.push(`  ${screen_1.ansi.bold}Titles${screen_1.ansi.reset}  ${screen_1.ansi.dim}(${state.titles.length}/${titles_1.TITLE_RULES.length} earned)  Esc to close${screen_1.ansi.reset}`);
-    lines.push(`  ${screen_1.ansi.dim}${"─".repeat(48)}${screen_1.ansi.reset}`);
+    lines.push(`  ${screen_1.ansi.dim}${"─".repeat(screen_1.UI_WIDTH)}${screen_1.ansi.reset}`);
     for (let i = 0; i < titles_1.TITLE_RULES.length; i++) {
         const rule = titles_1.TITLE_RULES[i];
         const earned = state.titles.includes(rule.id);
@@ -57,15 +57,15 @@ function renderTitlesOverlay(state, overlay) {
             lines.push(`  ${pointer} ${screen_1.ansi.dim}✗ ??? — ${rule.hint}${screen_1.ansi.reset}`);
         }
     }
-    lines.push(`  ${screen_1.ansi.dim}${"─".repeat(48)}${screen_1.ansi.reset}`);
+    lines.push(`  ${screen_1.ansi.dim}${"─".repeat(screen_1.UI_WIDTH)}${screen_1.ansi.reset}`);
     lines.push(`  ${screen_1.ansi.dim}Enter to equip selected title${screen_1.ansi.reset}`);
     return lines;
 }
 function renderNotificationsOverlay(notifications, overlay) {
     const lines = [];
-    lines.push(`  ${screen_1.ansi.dim}${"─".repeat(48)}${screen_1.ansi.reset}`);
+    lines.push(`  ${screen_1.ansi.dim}${"─".repeat(screen_1.UI_WIDTH)}${screen_1.ansi.reset}`);
     lines.push(`  ${screen_1.ansi.bold}Notifications${screen_1.ansi.reset}  ${screen_1.ansi.dim}(${notifications.length})  Esc to close${screen_1.ansi.reset}`);
-    lines.push(`  ${screen_1.ansi.dim}${"─".repeat(48)}${screen_1.ansi.reset}`);
+    lines.push(`  ${screen_1.ansi.dim}${"─".repeat(screen_1.UI_WIDTH)}${screen_1.ansi.reset}`);
     if (notifications.length === 0) {
         lines.push(`  ${screen_1.ansi.dim}  No notifications.${screen_1.ansi.reset}`);
     }
@@ -81,7 +81,7 @@ function renderNotificationsOverlay(notifications, overlay) {
             lines.push(`    ${screen_1.ansi.dim}${timeAgo}${screen_1.ansi.reset}`);
         }
     }
-    lines.push(`  ${screen_1.ansi.dim}${"─".repeat(48)}${screen_1.ansi.reset}`);
+    lines.push(`  ${screen_1.ansi.dim}${"─".repeat(screen_1.UI_WIDTH)}${screen_1.ansi.reset}`);
     lines.push(`  ${screen_1.ansi.dim}Enter to clear all${screen_1.ansi.reset}`);
     return lines;
 }
@@ -93,9 +93,9 @@ function getSettingEntries() {
 }
 function renderSettingsOverlay(settings, overlay) {
     const lines = [];
-    lines.push(`  ${screen_1.ansi.dim}${"─".repeat(48)}${screen_1.ansi.reset}`);
+    lines.push(`  ${screen_1.ansi.dim}${"─".repeat(screen_1.UI_WIDTH)}${screen_1.ansi.reset}`);
     lines.push(`  ${screen_1.ansi.bold}Settings${screen_1.ansi.reset}  ${screen_1.ansi.dim}Enter to toggle, Esc to close${screen_1.ansi.reset}`);
-    lines.push(`  ${screen_1.ansi.dim}${"─".repeat(48)}${screen_1.ansi.reset}`);
+    lines.push(`  ${screen_1.ansi.dim}${"─".repeat(screen_1.UI_WIDTH)}${screen_1.ansi.reset}`);
     for (let i = 0; i < SETTING_ENTRIES.length; i++) {
         const entry = SETTING_ENTRIES[i];
         const value = settings[entry.key];
@@ -106,7 +106,7 @@ function renderSettingsOverlay(settings, overlay) {
             : `${screen_1.ansi.colors.red}[OFF]${screen_1.ansi.reset}`;
         lines.push(`  ${pointer} ${toggle} ${screen_1.ansi.bold}${entry.name}${screen_1.ansi.reset}  ${screen_1.ansi.dim}${entry.description}${screen_1.ansi.reset}`);
     }
-    lines.push(`  ${screen_1.ansi.dim}${"─".repeat(48)}${screen_1.ansi.reset}`);
+    lines.push(`  ${screen_1.ansi.dim}${"─".repeat(screen_1.UI_WIDTH)}${screen_1.ansi.reset}`);
     return lines;
 }
 function renderGearOverlay(state) {
@@ -117,9 +117,9 @@ function renderGearOverlay(state) {
     const boots = s.equippedBoots ? (0, items_1.getItem)(s.equippedBoots) : null;
     const accessory = s.equippedAccessory ? (0, items_1.getItem)(s.equippedAccessory) : null;
     const lines = [];
-    lines.push(`  ${screen_1.ansi.dim}${"─".repeat(48)}${screen_1.ansi.reset}`);
+    lines.push(`  ${screen_1.ansi.dim}${"─".repeat(screen_1.UI_WIDTH)}${screen_1.ansi.reset}`);
     lines.push(`  ${screen_1.ansi.bold}Equipped Gear${screen_1.ansi.reset}  ${screen_1.ansi.dim}Esc to close${screen_1.ansi.reset}`);
-    lines.push(`  ${screen_1.ansi.dim}${"─".repeat(48)}${screen_1.ansi.reset}`);
+    lines.push(`  ${screen_1.ansi.dim}${"─".repeat(screen_1.UI_WIDTH)}${screen_1.ansi.reset}`);
     lines.push(`  ⚔ Weapon:  ${weapon ? `${weapon.name} (+${weapon.combatATK} ATK)${weapon.gearElement ? ` [${weapon.gearElement}]` : ""}` : `${screen_1.ansi.dim}None${screen_1.ansi.reset}`}`);
     if (weapon?.onHitEffect)
         lines.push(`    ${screen_1.ansi.dim}${Math.round((weapon.onHitChance ?? 0) * 100)}% ${weapon.onHitEffect} on hit${screen_1.ansi.reset}`);
@@ -129,7 +129,7 @@ function renderGearOverlay(state) {
     lines.push(`  🪖 Helmet:  ${helmet ? `${helmet.name} (${helmet.description})` : `${screen_1.ansi.dim}None${screen_1.ansi.reset}`}`);
     lines.push(`  👢 Boots:   ${boots ? `${boots.name} (${boots.description})` : `${screen_1.ansi.dim}None${screen_1.ansi.reset}`}`);
     lines.push(`  💍 Acc:     ${accessory ? `${accessory.name} (${accessory.description})` : `${screen_1.ansi.dim}None${screen_1.ansi.reset}`}`);
-    lines.push(`  ${screen_1.ansi.dim}${"─".repeat(48)}${screen_1.ansi.reset}`);
+    lines.push(`  ${screen_1.ansi.dim}${"─".repeat(screen_1.UI_WIDTH)}${screen_1.ansi.reset}`);
     lines.push(`  ${screen_1.ansi.dim}Equip gear from /inventory${screen_1.ansi.reset}`);
     return lines;
 }
@@ -139,9 +139,9 @@ function renderCombatInfoOverlay(state) {
     const weapon = equippedWeapon ? (0, items_1.getItem)(equippedWeapon) : null;
     const armor = equippedArmor ? (0, items_1.getItem)(equippedArmor) : null;
     const lines = [];
-    lines.push(`  ${screen_1.ansi.dim}${"─".repeat(48)}${screen_1.ansi.reset}`);
+    lines.push(`  ${screen_1.ansi.dim}${"─".repeat(screen_1.UI_WIDTH)}${screen_1.ansi.reset}`);
     lines.push(`  ${screen_1.ansi.bold}Combat Stats${screen_1.ansi.reset}  ${screen_1.ansi.dim}Esc to close${screen_1.ansi.reset}`);
-    lines.push(`  ${screen_1.ansi.dim}${"─".repeat(48)}${screen_1.ansi.reset}`);
+    lines.push(`  ${screen_1.ansi.dim}${"─".repeat(screen_1.UI_WIDTH)}${screen_1.ansi.reset}`);
     lines.push(`  HP:    ${screen_1.ansi.colors.green}${stats.maxHp}${screen_1.ansi.reset}`);
     lines.push(`  ATK:   ${screen_1.ansi.colors.red}${stats.atk}${screen_1.ansi.reset}${weapon ? ` (base + ${weapon.combatATK} from ${weapon.name})` : ""}`);
     lines.push(`  DEF:   ${screen_1.ansi.colors.blue}${stats.def}${screen_1.ansi.reset}${armor ? ` (base + ${armor.combatDEF} from ${armor.name})` : ""}`);
@@ -150,15 +150,15 @@ function renderCombatInfoOverlay(state) {
     lines.push("");
     lines.push(`  ${screen_1.ansi.dim}Adventures: ${state.adventureStats.adventuresCompleted} | Battles won: ${state.adventureStats.battlesWon}${screen_1.ansi.reset}`);
     lines.push(`  ${screen_1.ansi.dim}Bosses defeated: ${state.adventureStats.bossesDefeated} | Perfect runs: ${state.adventureStats.perfectAdventures}${screen_1.ansi.reset}`);
-    lines.push(`  ${screen_1.ansi.dim}${"─".repeat(48)}${screen_1.ansi.reset}`);
+    lines.push(`  ${screen_1.ansi.dim}${"─".repeat(screen_1.UI_WIDTH)}${screen_1.ansi.reset}`);
     return lines;
 }
 function renderShopOverlay(state, overlay) {
     const lines = [];
     const gold = state.questProgress.gold;
-    lines.push(`  ${screen_1.ansi.dim}${"─".repeat(48)}${screen_1.ansi.reset}`);
+    lines.push(`  ${screen_1.ansi.dim}${"─".repeat(screen_1.UI_WIDTH)}${screen_1.ansi.reset}`);
     lines.push(`  ${screen_1.ansi.bold}Pip's Shop${screen_1.ansi.reset}  ${screen_1.ansi.colors.yellow}Gold: ${gold}${screen_1.ansi.reset}  ${screen_1.ansi.dim}Esc to close${screen_1.ansi.reset}`);
-    lines.push(`  ${screen_1.ansi.dim}${"─".repeat(48)}${screen_1.ansi.reset}`);
+    lines.push(`  ${screen_1.ansi.dim}${"─".repeat(screen_1.UI_WIDTH)}${screen_1.ansi.reset}`);
     for (let i = 0; i < shop_1.SHOP_ITEMS.length; i++) {
         const shopItem = shop_1.SHOP_ITEMS[i];
         const item = (0, items_1.getItem)(shopItem.itemId);
@@ -177,7 +177,7 @@ function renderShopOverlay(state, overlay) {
             lines.push(`  ${pointer} ${screen_1.ansi.dim}${item.name}  ${shopItem.price}g${screen_1.ansi.reset}`);
         }
     }
-    lines.push(`  ${screen_1.ansi.dim}${"─".repeat(48)}${screen_1.ansi.reset}`);
+    lines.push(`  ${screen_1.ansi.dim}${"─".repeat(screen_1.UI_WIDTH)}${screen_1.ansi.reset}`);
     lines.push(`  ${screen_1.ansi.dim}Enter to buy${screen_1.ansi.reset}`);
     return lines;
 }

package/dist/rendering/scene.d.ts

@@ -5,4 +5,10 @@ import { SceneItem } from "./items";
  * Returns an array of lines ready to render.
  */
 export declare function composeScene(buddyArt: string[], item: SceneItem | null, groundLine?: boolean): string[];
+/**
+ * Compose two ASCII art blocks side-by-side with colors.
+ * Bottom-aligns the shorter art. Returns array of composed lines.
+ * Used for buddy+NPC in adventure rooms and buddy+enemy in combat.
+ */
+export declare function composeDualArt(leftArt: string[], rightArt: string[], leftColor: string, rightColor: string, gap?: number, reset?: string): string[];
 //# sourceMappingURL=scene.d.ts.map

package/dist/rendering/scene.js

@@ -1,6 +1,7 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.composeScene = composeScene;
+exports.composeDualArt = composeDualArt;
 const SCENE_WIDTH = 50;
 /**
  * Compose a scene by placing buddy art and an optional item
@@ -84,4 +85,23 @@ function centerPad(str, targetWidth) {
     const leftPad = Math.floor((targetWidth - len) / 2);
     return " ".repeat(leftPad) + str;
 }
+/**
+ * Compose two ASCII art blocks side-by-side with colors.
+ * Bottom-aligns the shorter art. Returns array of composed lines.
+ * Used for buddy+NPC in adventure rooms and buddy+enemy in combat.
+ */
+function composeDualArt(leftArt, rightArt, leftColor, rightColor, gap = 6, reset = "\x1b[0m") {
+    const maxHeight = Math.max(leftArt.length, rightArt.length);
+    const paddedLeft = topPad(leftArt, maxHeight);
+    const paddedRight = topPad(rightArt, maxHeight);
+    const leftWidth = Math.max(...leftArt.map(visibleLength));
+    const gapStr = " ".repeat(gap);
+    const lines = [];
+    for (let i = 0; i < maxHeight; i++) {
+        const lLine = rightPad(paddedLeft[i], leftWidth);
+        const rLine = paddedRight[i];
+        lines.push(`${leftColor}${lLine}${reset}${gapStr}${rightColor}${rLine}${reset}`);
+    }
+    return lines;
+}
 //# sourceMappingURL=scene.js.map

package/dist/rendering/screen.d.ts

@@ -26,6 +26,14 @@ export declare const ansi: {
     altScreenOn: string;
     altScreenOff: string;
 };
+/** Standard content width for dividers and framing */
+export declare const UI_WIDTH = 48;
+/** Strip ANSI escape codes for visible length calculation */
+export declare function stripAnsi(s: string): string;
+/** Visible length of a string (excluding ANSI codes) */
+export declare function visibleLen(s: string): number;
+/** Right-pad a string with spaces to target visible width */
+export declare function visPad(s: string, targetWidth: number): string;
 export declare class Screen {
     private regions;
     private footer;

package/dist/rendering/screen.js

@@ -5,7 +5,10 @@
  * Redraws by moving to home and overwriting — no clear, no flicker.
  */
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.Screen = exports.ansi = void 0;
+exports.Screen = exports.UI_WIDTH = exports.ansi = void 0;
+exports.stripAnsi = stripAnsi;
+exports.visibleLen = visibleLen;
+exports.visPad = visPad;
 const ESC = "\x1b";
 exports.ansi = {
     clearScreen: `${ESC}[2J${ESC}[H`,
@@ -31,6 +34,21 @@ exports.ansi = {
     altScreenOn: `${ESC}[?1049h`,
     altScreenOff: `${ESC}[?1049l`,
 };
+/** Standard content width for dividers and framing */
+exports.UI_WIDTH = 48;
+/** Strip ANSI escape codes for visible length calculation */
+function stripAnsi(s) {
+    return s.replace(/\x1b\[[0-9;]*m/g, "");
+}
+/** Visible length of a string (excluding ANSI codes) */
+function visibleLen(s) {
+    return stripAnsi(s).length;
+}
+/** Right-pad a string with spaces to target visible width */
+function visPad(s, targetWidth) {
+    const pad = targetWidth - visibleLen(s);
+    return pad > 0 ? s + " ".repeat(pad) : s;
+}
 class Screen {
     regions = [];
     footer = "";

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "clibuddy",
-  "version": "1.1.0",
+  "version": "1.2.0",
   "description": "A tamagotchi-style virtual pet that lives in your terminal — feed, play, adventure, and battle!",
   "main": "dist/index.js",
   "bin": {