httpcat-cli 0.3.0 → 0.3.1

package/dist/commands/chat.js

@@ -1,7 +1,6 @@
 import WebSocket from "ws";
 import chalk from "chalk";
-// @ts-ignore - neo-blessed doesn't have types, but @types/blessed provides compatible types
-import blessed from "neo-blessed";
+import { createTokenChatUI } from "../ui/components/chat/TokenChatUI.js";
 import { formatAddress, formatTokenAmount, formatCurrency, } from "../utils/formatting.js";
 import { handleError } from "../utils/errors.js";
 import { config } from "../config.js";
@@ -10,9 +9,9 @@ import { privateKeyToAccount } from "viem/accounts";
 import { buyToken } from "./buy.js";
 import { sellToken, parseTokenAmount } from "./sell.js";
 import { getTokenInfo } from "./info.js";
-const CHAT_JOIN_ENTRYPOINT = "chat_join";
-const CHAT_MESSAGE_ENTRYPOINT = "chat_message";
-const CHAT_RENEW_LEASE_ENTRYPOINT = "chat_renew_lease";
+const CHAT_JOIN_ENTRYPOINT = "chat/join";
+const CHAT_MESSAGE_ENTRYPOINT = "chat/message";
+const CHAT_RENEW_LEASE_ENTRYPOINT = "chat/renew-lease";
 const LEASE_DURATION_MS = 10 * 60 * 1000; // 10 minutes
 /**
  * Normalize WebSocket URL based on agent URL
@@ -146,17 +145,16 @@ function formatMessageText(msg, isOwn = false) {
     const authorShort = msg.authorShort || formatAddress(msg.author, 6);
     return `${chalk.dim(`[${timeStr}]`)} ${authorColor(authorShort)}: ${messageColor(msg.message)}`;
 }
-function displayMessage(msg, isOwn = false, isPending = false, messageLogBox) {
+function displayMessage(msg, isOwn = false, isPending = false, chatUI) {
     // Skip if we've already displayed this message
     if (displayedMessageIds.has(msg.messageId)) {
         return;
     }
     displayedMessageIds.add(msg.messageId);
     const messageText = formatMessageText(msg, isOwn);
-    if (messageLogBox) {
-        // Use blessed log box - automatically handles scrolling
-        messageLogBox.log(messageText);
-        messageLogBox.setScrollPerc(100); // Auto-scroll to bottom
+    if (chatUI) {
+        // Use Ink chat UI
+        chatUI.log(messageText);
     }
     else {
         // Simple console.log when no UI active (JSON mode)
@@ -207,56 +205,11 @@ function formatSellResultCompact(result) {
         `new price ${chalk.cyan(formatCurrency(result.newPrice))}, ` +
         `graduation ${chalk.magenta(graduationStatus)}`);
 }
-function updateHeaderBox(headerBox, leaseInfo, tokenName, isConnected = false) {
-    const title = tokenName
-        ? `💬 httpcat Chat: ${tokenName}`
-        : "💬 httpcat Chat Stream";
-    // Get terminal width, default to 80 if not available
-    // Account for padding (left + right = 2)
-    const terminalWidth = process.stdout.columns || 80;
-    const boxWidth = headerBox.width;
-    const availableWidth = typeof boxWidth === "number" ? boxWidth - 2 : terminalWidth - 2;
-    const separatorWidth = Math.max(20, Math.min(availableWidth, terminalWidth - 2));
-    // Use safe separator that won't overflow
-    const separator = "═".repeat(separatorWidth);
-    const lineSeparator = "─".repeat(separatorWidth);
-    // Build content line by line - use plain text (blessed will handle wrapping)
-    const lines = [];
-    lines.push(title);
-    lines.push(separator);
-    lines.push("");
-    if (isConnected) {
-        lines.push("✅ Connected to chat stream");
-        lines.push("");
-    }
-    lines.push("💰 Entry fee: $0.01 USDC (10 min lease)");
-    lines.push("💬 Per message: $0.01 USDC");
-    if (leaseInfo) {
-        const timeRemaining = formatTimeRemaining(leaseInfo.leaseExpiresAt);
-        const isExpired = leaseInfo.leaseExpiresAt.getTime() <= Date.now();
-        const timePrefix = isExpired ? "⚠️  " : "⏱️  ";
-        lines.push(`${timePrefix}Lease expires in: ${timeRemaining}`);
-    }
-    lines.push("");
-    lines.push("💡 Type your message and press Enter to send");
-    lines.push("💡 Type /exit or Ctrl+C to quit");
-    lines.push("💡 Type /renew to renew your lease");
-    if (tokenName) {
-        lines.push("💡 Type /buy <amount> to buy tokens");
-        lines.push("💡 Type /sell <amount> to sell tokens");
-    }
-    lines.push("");
-    lines.push(lineSeparator);
-    // Clear and set content to prevent overlapping
-    headerBox.setContent(lines.join("\n"));
-}
-async function ensureLeaseValid(client, userAddress, leaseInfo, messageLogBox, screen) {
+async function ensureLeaseValid(client, userAddress, leaseInfo, chatUI) {
     if (!leaseInfo || leaseInfo.leaseExpiresAt.getTime() <= Date.now()) {
         // Lease expired or doesn't exist, renew it
-        if (messageLogBox) {
-            messageLogBox.log(chalk.yellow("⏱️  Lease expired. Renewing..."));
-            messageLogBox.setScrollPerc(100);
-            screen?.render();
+        if (chatUI) {
+            chatUI.log(chalk.yellow("⏱️  Lease expired. Renewing..."));
         }
         else {
             clearLine();
@@ -270,26 +223,21 @@ async function ensureLeaseValid(client, userAddress, leaseInfo, messageLogBox, s
     }
     return leaseInfo;
 }
-export async function startChatStream(client, jsonMode = false, tokenIdentifier, inputFormat = "text") {
+export async function startChatStream(client, jsonMode = false, tokenIdentifier, inputFormat = "text", returnToShell = false) {
     let leaseInfo = null;
     let userAddress;
     let tokenAddress; // Track token address from join response
     let ws = null;
     let wsUrl = null; // Store websocket URL for reconnection
     let leaseCheckInterval = null;
-    let headerUpdateInterval = null;
     let isExiting = false;
     let isSending = false; // Track sending state across handlers
     let currentInput = ""; // Track current input across handlers
     let pendingMessages = new Map(); // messageId -> tempMessageId (shared between send and receive)
     let pulseIntervals = new Map(); // tempMessageId -> interval
     let isCleaningUp = false; // Flag to prevent intervals from writing during cleanup
-    let messageCount = 0; // Track number of messages displayed (for positioning)
-    // Blessed UI components (only used in non-JSON mode)
-    let screen = null;
-    let headerBox = null;
-    let messageLogBox = null;
-    let inputBox = null;
+    // Ink UI component (only used in non-JSON mode)
+    let chatUI = null;
     // Get userAddress from private key first (required for all chat operations)
     try {
         const privateKey = config.getPrivateKey();
@@ -308,6 +256,7 @@ export async function startChatStream(client, jsonMode = false, tokenIdentifier,
         throw new Error("Failed to get user address from private key. Please check your configuration.");
     }
     // Join chat
+    let joinResult;
     try {
         if (!jsonMode) {
             if (tokenIdentifier) {
@@ -317,7 +266,7 @@ export async function startChatStream(client, jsonMode = false, tokenIdentifier,
                 console.log(chalk.dim("Joining general chat room..."));
             }
         }
-        const joinResult = await joinChat(client, userAddress, tokenIdentifier, jsonMode);
+        joinResult = await joinChat(client, userAddress, tokenIdentifier, jsonMode);
         leaseInfo = {
             leaseId: joinResult.leaseId,
             leaseExpiresAt: new Date(joinResult.leaseExpiresAt),
@@ -353,10 +302,11 @@ export async function startChatStream(client, jsonMode = false, tokenIdentifier,
         // Helper function to attach websocket handlers
         const attachWebSocketHandlers = (websocket) => {
             websocket.on("open", () => {
-                // Connection established - update header if using blessed UI
-                if (!jsonMode && headerBox) {
-                    updateHeaderBox(headerBox, leaseInfo, tokenIdentifier, true);
-                    screen?.render();
+                // Connection established - update header if using Ink UI
+                if (!jsonMode && chatUI && leaseInfo) {
+                    chatUI.updateHeader({
+                        leaseExpiresAt: leaseInfo.leaseExpiresAt,
+                    });
                 }
             });
             websocket.on("message", async (data) => {
@@ -406,33 +356,19 @@ export async function startChatStream(client, jsonMode = false, tokenIdentifier,
                                 }
                                 // Small delay to ensure intervals have stopped
                                 await new Promise((resolve) => setTimeout(resolve, 20));
-                                // Stop pulsing and clear the grey pulsing input line
-                                if (inputBox) {
-                                    // Clear input box
-                                    inputBox.clearValue();
-                                    screen?.render();
-                                }
                                 // Display the message (only if not already displayed)
-                                // In JSON mode, displayMessage should never be called, but add explicit check
                                 if (!displayedMessageIds.has(msg.messageId)) {
-                                    displayMessage(msg, isOwn, false, messageLogBox || undefined);
+                                    displayMessage(msg, isOwn, false, chatUI || undefined);
                                 }
-                                // Re-enable input - clear the input line completely
+                                // Re-enable input
                                 isSending = false;
                                 currentInput = "";
                                 isCleaningUp = false; // Clear cleanup flag
-                                if (inputBox && screen) {
-                                    // Clear input box and refocus
-                                    inputBox.clearValue();
-                                    inputBox.focus();
-                                    screen.render();
-                                }
                             }
                             else {
                                 // Not our message, just display it normally
-                                // In JSON mode, displayMessage should never be called, but add explicit check
                                 if (!displayedMessageIds.has(msg.messageId)) {
-                                    displayMessage(msg, isOwn, false, messageLogBox || undefined);
+                                    displayMessage(msg, isOwn, false, chatUI || undefined);
                                 }
                             }
                         }
@@ -444,16 +380,15 @@ export async function startChatStream(client, jsonMode = false, tokenIdentifier,
                             }));
                         }
                         else {
-                            if (messageLogBox) {
-                                messageLogBox.log(chalk.yellow("⏱️  Your lease has expired. Type /renew to continue chatting."));
-                                messageLogBox.setScrollPerc(100);
-                                screen?.render();
+                            if (chatUI) {
+                                chatUI.log(chalk.yellow("⏱️  Your lease has expired. Type /renew to continue chatting."));
                             }
                         }
                         leaseInfo = null;
-                        if (headerBox) {
-                            updateHeaderBox(headerBox, null, tokenIdentifier, true);
-                            screen?.render();
+                        if (chatUI) {
+                            chatUI.updateHeader({
+                                leaseExpiresAt: undefined,
+                            });
                         }
                     }
                     else if (event.type === "error") {
@@ -464,10 +399,8 @@ export async function startChatStream(client, jsonMode = false, tokenIdentifier,
                             }));
                         }
                         else {
-                            if (messageLogBox) {
-                                messageLogBox.log(chalk.red(`❌ Error: ${event.error || "Unknown error"}`));
-                                messageLogBox.setScrollPerc(100);
-                                screen?.render();
+                            if (chatUI) {
+                                chatUI.log(chalk.red(`❌ Error: ${event.error || "Unknown error"}`));
                             }
                         }
                     }
@@ -488,10 +421,8 @@ export async function startChatStream(client, jsonMode = false, tokenIdentifier,
                 }
                 else {
                     const errorMsg = error.message || "Unknown WebSocket error";
-                    if (messageLogBox) {
-                        messageLogBox.log(chalk.red(`❌ WebSocket error: ${errorMsg}`));
-                        messageLogBox.setScrollPerc(100);
-                        screen?.render();
+                    if (chatUI) {
+                        chatUI.log(chalk.red(`❌ WebSocket error: ${errorMsg}`));
                     }
                 }
             });
@@ -518,9 +449,10 @@ export async function startChatStream(client, jsonMode = false, tokenIdentifier,
                             message = `⚠️  Lease validation failed on server. Your lease appears valid. Type /renew to get a fresh lease.`;
                         }
                         leaseInfo = null; // Mark lease as invalid
-                        if (headerBox) {
-                            updateHeaderBox(headerBox, null, tokenIdentifier, false);
-                            screen?.render();
+                        if (chatUI) {
+                            chatUI.updateHeader({
+                                leaseExpiresAt: undefined,
+                            });
                         }
                     }
                     else if (code === 1006) {
@@ -529,10 +461,8 @@ export async function startChatStream(client, jsonMode = false, tokenIdentifier,
                     else {
                         message = `⚠️  WebSocket connection closed (code: ${code}): ${reasonStr}`;
                     }
-                    if (messageLogBox) {
-                        messageLogBox.log(chalk.yellow(message));
-                        messageLogBox.setScrollPerc(100);
-                        screen?.render();
+                    if (chatUI) {
+                        chatUI.log(chalk.yellow(message));
                     }
                 }
             });
@@ -549,12 +479,9 @@ export async function startChatStream(client, jsonMode = false, tokenIdentifier,
                 if (retryCount > 0) {
                     // Exponential backoff: 500ms, 1000ms, 2000ms
                     const backoffDelay = Math.min(500 * Math.pow(2, retryCount - 1), 2000);
+                    // Note: UI not created yet, so can't log to it
                     if (!jsonMode) {
-                        if (messageLogBox) {
-                            messageLogBox.log(chalk.yellow(`🔄 Retrying WebSocket connection (attempt ${retryCount + 1}/${maxRetries})...`));
-                            messageLogBox.setScrollPerc(100);
-                            screen?.render();
-                        }
+                        console.log(chalk.yellow(`🔄 Retrying WebSocket connection (attempt ${retryCount + 1}/${maxRetries})...`));
                     }
                     await new Promise((resolve) => setTimeout(resolve, backoffDelay));
                 }
@@ -610,10 +537,8 @@ export async function startChatStream(client, jsonMode = false, tokenIdentifier,
                 });
                 connected = true;
                 // Connection established successfully
-                if (!jsonMode && messageLogBox && retryCount > 0) {
-                    messageLogBox.log(chalk.green("✅ WebSocket connected successfully"));
-                    messageLogBox.setScrollPerc(100);
-                    screen?.render();
+                if (!jsonMode && retryCount > 0) {
+                    console.log(chalk.green("✅ WebSocket connected successfully"));
                 }
             }
             catch (error) {
@@ -632,12 +557,8 @@ export async function startChatStream(client, jsonMode = false, tokenIdentifier,
                         }));
                     }
                     else {
-                        if (messageLogBox) {
-                            messageLogBox.log(chalk.red(`❌ ${finalError}`));
-                            messageLogBox.log(chalk.yellow("💡 Try typing /renew to get a fresh lease"));
-                            messageLogBox.setScrollPerc(100);
-                            screen?.render();
-                        }
+                        console.log(chalk.red(`❌ ${finalError}`));
+                        console.log(chalk.yellow("💡 Try typing /renew to get a fresh lease"));
                     }
                     throw new Error(finalError);
                 }
@@ -656,135 +577,52 @@ export async function startChatStream(client, jsonMode = false, tokenIdentifier,
                         message: "Your lease has expired. Use /renew to continue chatting.",
                     }));
                 }
-                else if (messageLogBox) {
-                    messageLogBox.log(chalk.yellow("⏱️  Your lease has expired. Type /renew to continue chatting."));
-                    messageLogBox.setScrollPerc(100);
-                    screen?.render();
+                else if (chatUI) {
+                    chatUI.log(chalk.yellow("⏱️  Your lease has expired. Type /renew to continue chatting."));
                 }
                 leaseInfo = null;
-                if (headerBox) {
-                    updateHeaderBox(headerBox, null, tokenIdentifier, true);
-                    screen?.render();
+                if (chatUI) {
+                    chatUI.updateHeader({
+                        leaseExpiresAt: undefined,
+                    });
                 }
             }
         }, 30000);
-        // Set up blessed UI (only in interactive mode)
+        // Set up Ink UI (only in interactive mode)
         if (!jsonMode) {
-            // Check if terminal supports blessed
+            // Check if terminal supports TTY
             if (!process.stdout.isTTY) {
                 throw new Error("Chat requires an interactive terminal (TTY). Use --json mode for non-interactive usage.");
             }
-            // Create blessed screen and widgets
-            screen = blessed.screen({
-                smartCSR: true,
-                title: "httpcat Chat",
-                fullUnicode: true,
-                fastCSR: false, // Disable fast CSR to avoid rendering issues
-            });
-            // Calculate header height (approximately 10 lines)
-            const headerHeight = 10;
-            const inputHeight = 3;
-            // Create header box (fixed at top)
-            headerBox = blessed.box({
-                top: 0,
-                left: 0,
-                width: "100%",
-                height: headerHeight,
-                content: "",
-                tags: false, // Disable tags to avoid rendering issues
-                wrap: true,
-                scrollable: false,
-                alwaysScroll: false,
-                padding: {
-                    left: 1,
-                    right: 1,
-                    top: 0,
-                    bottom: 0,
-                },
-                style: {
-                    fg: "white",
-                    bg: "black",
-                },
-            });
-            // Create message log box (scrollable, middle section)
-            messageLogBox = blessed.log({
-                top: headerHeight,
-                left: 0,
-                width: "100%",
-                height: `100%-${headerHeight + inputHeight}`,
-                tags: true,
-                scrollable: true,
-                alwaysScroll: true,
-                scrollbar: {
-                    ch: " ",
-                    inverse: true,
-                },
-                style: {
-                    fg: "white",
-                    bg: "black",
-                },
-            });
-            // Create input box (fixed at bottom)
-            inputBox = blessed.textbox({
-                bottom: 0,
-                left: 0,
-                width: "100%",
-                height: inputHeight,
-                content: "",
-                inputOnFocus: true,
-                tags: true,
-                keys: true,
-                style: {
-                    fg: "cyan",
-                    bg: "black",
-                    focus: {
-                        fg: "white",
-                        bg: "blue",
-                    },
-                },
-            });
-            // Append widgets to screen
-            screen.append(headerBox);
-            screen.append(messageLogBox);
-            screen.append(inputBox);
-            // Initial render
-            screen.render();
-            // Initial header update
-            updateHeaderBox(headerBox, leaseInfo, tokenIdentifier, false);
-            screen.render();
-            // Display last messages
-            if (joinResult.lastMessages.length > 0) {
-                const sortedMessages = [...joinResult.lastMessages].sort((a, b) => {
-                    const timeA = new Date(a.timestamp).getTime();
-                    const timeB = new Date(b.timestamp).getTime();
-                    return timeA - timeB; // Oldest first
-                });
-                sortedMessages.forEach((msg) => {
-                    displayedMessageIds.add(msg.messageId);
-                    const isOwn = msg.author === userAddress;
-                    // This is inside !jsonMode block, but add explicit check for safety
-                    displayMessage(msg, isOwn, false, messageLogBox || undefined);
-                });
+            // Get token info for header
+            let tokenSymbol;
+            if (tokenIdentifier) {
+                try {
+                    const tokenInfo = await getTokenInfo(client, tokenIdentifier, userAddress, true);
+                    tokenSymbol = tokenInfo.symbol;
+                }
+                catch {
+                    // Use identifier if we can't get symbol
+                    tokenSymbol = tokenIdentifier;
+                }
             }
-            // Handle terminal resize
-            screen.on("resize", () => {
-                screen?.render();
+            // Format initial messages
+            const initialMessages = joinResult.lastMessages
+                .sort((a, b) => {
+                const timeA = new Date(a.timestamp).getTime();
+                const timeB = new Date(b.timestamp).getTime();
+                return timeA - timeB; // Oldest first
+            })
+                .map((msg) => {
+                displayedMessageIds.add(msg.messageId);
+                const isOwn = msg.author === userAddress;
+                return formatMessageText(msg, isOwn);
             });
-            // Update header with lease countdown every second
-            headerUpdateInterval = setInterval(() => {
-                if (leaseInfo && headerBox && screen && !isExiting) {
-                    updateHeaderBox(headerBox, leaseInfo, tokenIdentifier, true);
-                    screen.render();
-                }
-            }, 1000);
-            // Handle input submission
-            inputBox.on("submit", async (value) => {
-                const trimmed = value.trim();
+            // Message handler callback
+            const handleMessage = async (text) => {
+                const trimmed = text.trim();
                 // Ignore input while sending
                 if (isSending || !trimmed) {
-                    inputBox?.clearValue();
-                    inputBox?.focus();
-                    screen?.render();
                     return;
                 }
                 // Handle commands
@@ -796,11 +634,10 @@ export async function startChatStream(client, jsonMode = false, tokenIdentifier,
                             isExiting = true;
                             if (leaseCheckInterval)
                                 clearInterval(leaseCheckInterval);
-                            if (headerUpdateInterval)
-                                clearInterval(headerUpdateInterval);
                             if (ws)
                                 ws.close();
-                            screen?.destroy();
+                            if (chatUI)
+                                await chatUI.destroy();
                             console.log();
                             printCat("sleeping");
                             console.log(chalk.cyan("Chat disconnected. Goodbye! 👋"));
@@ -808,22 +645,21 @@ export async function startChatStream(client, jsonMode = false, tokenIdentifier,
                             return;
                         case "/renew": {
                             try {
-                                inputBox?.setValue("⏱️  Renewing lease...");
-                                screen?.render();
+                                if (chatUI) {
+                                    chatUI.log(chalk.yellow("⏱️  Renewing lease..."));
+                                }
                                 const renewal = await renewLease(client, userAddress, leaseInfo?.leaseId);
                                 leaseInfo = {
                                     leaseId: renewal.leaseId,
                                     leaseExpiresAt: new Date(renewal.leaseExpiresAt),
                                 };
-                                // Update header first
-                                if (headerBox) {
-                                    updateHeaderBox(headerBox, leaseInfo, tokenIdentifier, false);
-                                }
-                                if (messageLogBox) {
-                                    messageLogBox.log(chalk.green(`✅ Lease renewed! Expires in ${formatTimeRemaining(leaseInfo.leaseExpiresAt)}`));
-                                    messageLogBox.log(chalk.yellow("🔄 Reconnecting to chat stream..."));
-                                    messageLogBox.setScrollPerc(100);
-                                    screen?.render();
+                                // Update header
+                                if (chatUI) {
+                                    chatUI.updateHeader({
+                                        leaseExpiresAt: leaseInfo.leaseExpiresAt,
+                                    });
+                                    chatUI.log(chalk.green(`✅ Lease renewed! Expires in ${formatTimeRemaining(leaseInfo.leaseExpiresAt)}`));
+                                    chatUI.log(chalk.yellow("🔄 Reconnecting to chat stream..."));
                                 }
                                 // Close old connection properly
                                 if (ws) {
@@ -837,9 +673,6 @@ export async function startChatStream(client, jsonMode = false, tokenIdentifier,
                                     ws = null;
                                 }
                                 // Wait for database transaction to commit and old connection to fully close
-                                // The server validates the lease in the open handler, so we need to ensure
-                                // the database update is visible before connecting
-                                // Increased delay to 2 seconds for better database consistency
                                 await new Promise((resolve) => setTimeout(resolve, 2000));
                                 // Reconnect with new lease - with retry logic
                                 if (wsUrl) {
@@ -857,10 +690,8 @@ export async function startChatStream(client, jsonMode = false, tokenIdentifier,
                                         try {
                                             if (retryCount > 0) {
                                                 const backoffDelay = Math.min(1000 * Math.pow(2, retryCount - 1), 5000);
-                                                if (messageLogBox) {
-                                                    messageLogBox.log(chalk.yellow(`🔄 Retry ${retryCount}/${maxRetries} in ${backoffDelay}ms...`));
-                                                    messageLogBox.setScrollPerc(100);
-                                                    screen?.render();
+                                                if (chatUI) {
+                                                    chatUI.log(chalk.yellow(`🔄 Retry ${retryCount}/${maxRetries} in ${backoffDelay}ms...`));
                                                 }
                                                 await new Promise((resolve) => setTimeout(resolve, backoffDelay));
                                             }
@@ -916,14 +747,12 @@ export async function startChatStream(client, jsonMode = false, tokenIdentifier,
                                             });
                                             connected = true;
                                             // Connection established
-                                            if (headerBox) {
-                                                updateHeaderBox(headerBox, leaseInfo, tokenIdentifier, true);
-                                            }
-                                            if (messageLogBox) {
-                                                messageLogBox.log(chalk.green("✅ Reconnected to chat stream"));
-                                                messageLogBox.setScrollPerc(100);
+                                            if (chatUI) {
+                                                chatUI.updateHeader({
+                                                    leaseExpiresAt: leaseInfo?.leaseExpiresAt,
+                                                });
+                                                chatUI.log(chalk.green("✅ Reconnected to chat stream"));
                                             }
-                                            screen?.render();
                                         }
                                         catch (error) {
                                             retryCount++;
@@ -933,114 +762,77 @@ export async function startChatStream(client, jsonMode = false, tokenIdentifier,
                                                 throw new Error(`Failed to reconnect after ${maxRetries} attempts: ${errorMsg}`);
                                             }
                                             // Log retry attempt
-                                            if (messageLogBox) {
-                                                messageLogBox.log(chalk.yellow(`⚠️  Connection attempt ${retryCount} failed: ${errorMsg}`));
-                                                messageLogBox.setScrollPerc(100);
-                                                screen?.render();
+                                            if (chatUI) {
+                                                chatUI.log(chalk.yellow(`⚠️  Connection attempt ${retryCount} failed: ${errorMsg}`));
                                             }
                                         }
                                     }
                                 }
-                                inputBox?.clearValue();
-                                inputBox?.focus();
-                                screen?.render();
                             }
                             catch (error) {
                                 const errorMsg = error instanceof Error ? error.message : String(error);
-                                if (messageLogBox) {
-                                    messageLogBox.log(chalk.red(`❌ ${errorMsg}`));
-                                    messageLogBox.setScrollPerc(100);
+                                if (chatUI) {
+                                    chatUI.log(chalk.red(`❌ ${errorMsg}`));
                                 }
-                                inputBox?.clearValue();
-                                inputBox?.focus();
-                                screen?.render();
                             }
                             return;
                         }
                         case "/buy": {
                             // Only allow in token-specific chats
                             if (!tokenIdentifier) {
-                                if (messageLogBox) {
-                                    messageLogBox.log(chalk.yellow("⚠️  /buy command only works in token-specific chats"));
-                                    messageLogBox.setScrollPerc(100);
-                                    screen?.render();
+                                if (chatUI) {
+                                    chatUI.log(chalk.yellow("⚠️  /buy command only works in token-specific chats"));
                                 }
-                                inputBox?.clearValue();
-                                inputBox?.focus();
-                                screen?.render();
                                 return;
                             }
                             try {
                                 const parts = trimmed.split(" ");
                                 if (parts.length < 2) {
-                                    if (messageLogBox) {
-                                        messageLogBox.log(chalk.yellow("⚠️  Usage: /buy <amount> (e.g., /buy 0.05)"));
-                                        messageLogBox.setScrollPerc(100);
-                                        screen?.render();
+                                    if (chatUI) {
+                                        chatUI.log(chalk.yellow("⚠️  Usage: /buy <amount> (e.g., /buy 0.05)"));
                                     }
-                                    inputBox?.clearValue();
-                                    inputBox?.focus();
-                                    screen?.render();
                                     return;
                                 }
                                 const amount = parts[1];
-                                inputBox?.setValue(`💰 Buying tokens...`);
-                                screen?.render();
+                                if (chatUI) {
+                                    chatUI.log(chalk.yellow("💰 Buying tokens..."));
+                                }
                                 const network = client.getNetwork();
                                 const isTestMode = network === "eip155:84532" || network === "eip155:11155111" || network.includes("sepolia");
                                 const result = await buyToken(client, tokenIdentifier, amount, isTestMode, true // silent mode
                                 );
-                                if (messageLogBox) {
-                                    messageLogBox.log(formatBuyResultCompact(result));
-                                    messageLogBox.setScrollPerc(100);
-                                    screen?.render();
+                                if (chatUI) {
+                                    chatUI.log(formatBuyResultCompact(result));
                                 }
-                                inputBox?.clearValue();
-                                inputBox?.focus();
-                                screen?.render();
                             }
                             catch (error) {
                                 const errorMsg = error instanceof Error ? error.message : String(error);
-                                if (messageLogBox) {
-                                    messageLogBox.log(chalk.red(`❌ Buy failed: ${errorMsg}`));
-                                    messageLogBox.setScrollPerc(100);
-                                    screen?.render();
+                                if (chatUI) {
+                                    chatUI.log(chalk.red(`❌ Buy failed: ${errorMsg}`));
                                 }
-                                inputBox?.clearValue();
-                                inputBox?.focus();
-                                screen?.render();
                             }
                             return;
                         }
                         case "/sell": {
                             // Only allow in token-specific chats
                             if (!tokenIdentifier) {
-                                if (messageLogBox) {
-                                    messageLogBox.log(chalk.yellow("⚠️  /sell command only works in token-specific chats"));
-                                    messageLogBox.setScrollPerc(100);
-                                    screen?.render();
+                                if (chatUI) {
+                                    chatUI.log(chalk.yellow("⚠️  /sell command only works in token-specific chats"));
                                 }
-                                inputBox?.clearValue();
-                                inputBox?.focus();
-                                screen?.render();
                                 return;
                             }
                             try {
                                 const parts = trimmed.split(" ");
                                 if (parts.length < 2) {
-                                    if (messageLogBox) {
-                                        messageLogBox.log(chalk.yellow("⚠️  Usage: /sell <amount|all|percentage> (e.g., /sell 0.05, /sell all, /sell 50%)"));
-                                        messageLogBox.setScrollPerc(100);
-                                        screen?.render();
+                                    if (chatUI) {
+                                        chatUI.log(chalk.yellow("⚠️  Usage: /sell <amount|all|percentage> (e.g., /sell 0.05, /sell all, /sell 50%)"));
                                     }
-                                    inputBox?.clearValue();
-                                    inputBox?.focus();
-                                    screen?.render();
                                     return;
                                 }
                                 const amountStr = parts[1];
-                                inputBox?.setValue(`💸 Selling tokens...`);
-                                screen?.render();
+                                if (chatUI) {
+                                    chatUI.log(chalk.yellow("💸 Selling tokens..."));
+                                }
                                 // Get token info to check balance
                                 if (!userAddress) {
                                     throw new Error("User address not available");
@@ -1055,50 +847,30 @@ export async function startChatStream(client, jsonMode = false, tokenIdentifier,
                                 const tokenAmount = parseTokenAmount(amountStr, tokenInfo.userPosition.tokensOwned);
                                 const result = await sellToken(client, tokenIdentifier, tokenAmount, true // silent mode
                                 );
-                                if (messageLogBox) {
-                                    messageLogBox.log(formatSellResultCompact(result));
-                                    messageLogBox.setScrollPerc(100);
-                                    screen?.render();
+                                if (chatUI) {
+                                    chatUI.log(formatSellResultCompact(result));
                                 }
-                                inputBox?.clearValue();
-                                inputBox?.focus();
-                                screen?.render();
                             }
                             catch (error) {
                                 const errorMsg = error instanceof Error ? error.message : String(error);
-                                if (messageLogBox) {
-                                    messageLogBox.log(chalk.red(`❌ Sell failed: ${errorMsg}`));
-                                    messageLogBox.setScrollPerc(100);
-                                    screen?.render();
+                                if (chatUI) {
+                                    chatUI.log(chalk.red(`❌ Sell failed: ${errorMsg}`));
                                 }
-                                inputBox?.clearValue();
-                                inputBox?.focus();
-                                screen?.render();
                             }
                             return;
                         }
                         case "/help":
-                            if (messageLogBox) {
+                            if (chatUI) {
                                 const helpText = tokenIdentifier
                                     ? chalk.dim("Commands: /exit, /quit, /renew, /buy, /sell, /help")
                                     : chalk.dim("Commands: /exit, /quit, /renew, /help");
-                                messageLogBox.log(helpText);
-                                messageLogBox.setScrollPerc(100);
-                                screen?.render();
+                                chatUI.log(helpText);
                             }
-                            inputBox?.clearValue();
-                            inputBox?.focus();
-                            screen?.render();
                             return;
                         default:
-                            if (messageLogBox) {
-                                messageLogBox.log(chalk.yellow(`Unknown command: ${cmd}. Type /help for commands.`));
-                                messageLogBox.setScrollPerc(100);
-                                screen?.render();
+                            if (chatUI) {
+                                chatUI.log(chalk.yellow(`Unknown command: ${cmd}. Type /help for commands.`));
                             }
-                            inputBox?.clearValue();
-                            inputBox?.focus();
-                            screen?.render();
                             return;
                     }
                 }
@@ -1114,53 +886,42 @@ export async function startChatStream(client, jsonMode = false, tokenIdentifier,
                                     ? "closed"
                                     : "unknown"
                         : "not initialized";
-                    if (messageLogBox) {
-                        messageLogBox.log(chalk.red(`❌ WebSocket is not connected (state: ${stateMsg}). Please wait for connection or type /renew.`));
-                        messageLogBox.setScrollPerc(100);
-                        screen?.render();
+                    if (chatUI) {
+                        chatUI.log(chalk.red(`❌ WebSocket is not connected (state: ${stateMsg}). Please wait for connection or type /renew.`));
                     }
-                    inputBox?.clearValue();
-                    inputBox?.focus();
-                    screen?.render();
                     return;
                 }
                 // Check if lease is valid
                 if (!leaseInfo || leaseInfo.leaseExpiresAt.getTime() <= Date.now()) {
-                    if (messageLogBox) {
-                        messageLogBox.log(chalk.yellow("⏱️  Your lease has expired. Type /renew to continue chatting."));
-                        messageLogBox.setScrollPerc(100);
-                        screen?.render();
+                    if (chatUI) {
+                        chatUI.log(chalk.yellow("⏱️  Your lease has expired. Type /renew to continue chatting."));
                     }
-                    inputBox?.clearValue();
-                    inputBox?.focus();
-                    screen?.render();
                     return;
                 }
                 // Send message
                 isSending = true;
                 currentInput = trimmed;
-                // Show pulsing animation in input box
+                // Show pulsing animation
                 let pulseCount = 0;
                 let pulseInterval = null;
                 const tempMessageId = `pending-${Date.now()}-${Math.random()}`;
                 const updatePulse = () => {
-                    if (!inputBox || isCleaningUp)
+                    if (isCleaningUp)
                         return;
                     pulseCount++;
                     const pulseChar = pulseCount % 2 === 0 ? "●" : "○";
-                    inputBox.setValue(`${trimmed} ${pulseChar}`);
-                    screen?.render();
+                    // Note: Ink doesn't support directly updating input, so we just track state
                 };
                 // Initial pulse
-                updatePulse();
                 pulseInterval = setInterval(updatePulse, 500);
                 pulseIntervals.set(tempMessageId, pulseInterval);
                 try {
                     // Ensure lease is valid before sending
-                    leaseInfo = await ensureLeaseValid(client, userAddress, leaseInfo, messageLogBox || undefined, screen || undefined);
-                    if (headerBox) {
-                        updateHeaderBox(headerBox, leaseInfo, tokenIdentifier, true);
-                        screen?.render();
+                    leaseInfo = await ensureLeaseValid(client, userAddress, leaseInfo, chatUI || undefined);
+                    if (chatUI) {
+                        chatUI.updateHeader({
+                            leaseExpiresAt: leaseInfo.leaseExpiresAt,
+                        });
                     }
                     // Double-check websocket is still connected after lease renewal
                     // WebSocket.OPEN = 1
@@ -1168,7 +929,6 @@ export async function startChatStream(client, jsonMode = false, tokenIdentifier,
                         throw new Error("WebSocket connection lost. Please wait for reconnection.");
                     }
                     const result = await sendChatMessage(client, trimmed, leaseInfo.leaseId, userAddress, tokenAddress);
-                    userAddress = result.author;
                     // Track this message
                     pendingMessages.set(result.messageId, tempMessageId);
                     pendingMessages.set(`text:${trimmed}`, tempMessageId);
@@ -1181,38 +941,46 @@ export async function startChatStream(client, jsonMode = false, tokenIdentifier,
                         pulseIntervals.delete(tempMessageId);
                     }
                     const errorMsg = error instanceof Error ? error.message : String(error);
-                    if (messageLogBox) {
-                        messageLogBox.log(chalk.red(`❌ ${errorMsg}`));
-                        messageLogBox.setScrollPerc(100);
+                    if (chatUI) {
+                        chatUI.log(chalk.red(`❌ ${errorMsg}`));
                     }
-                    inputBox?.clearValue();
-                    inputBox?.focus();
                     isSending = false;
                     currentInput = "";
-                    screen?.render();
                 }
-            });
-            // Handle Ctrl+C
-            screen.key(["C-c"], () => {
+            };
+            // Exit handler
+            const handleExit = async () => {
                 isExiting = true;
                 isSending = false;
                 pulseIntervals.forEach((interval) => clearInterval(interval));
                 pulseIntervals.clear();
                 if (leaseCheckInterval)
                     clearInterval(leaseCheckInterval);
-                if (headerUpdateInterval)
-                    clearInterval(headerUpdateInterval);
                 if (ws)
                     ws.close();
-                screen?.destroy();
+                if (chatUI)
+                    await chatUI.destroy();
                 console.log();
                 printCat("sleeping");
-                console.log(chalk.cyan("Chat disconnected. Goodbye! 👋"));
-                process.exit(0);
-            });
-            // Focus input box and render
-            inputBox.focus();
-            screen.render();
+                if (returnToShell) {
+                    console.log(chalk.cyan("Returning to shell..."));
+                    // Don't exit - return to shell
+                }
+                else {
+                    console.log(chalk.cyan("Chat disconnected. Goodbye! 👋"));
+                    process.exit(0);
+                }
+            };
+            // Create Ink UI
+            chatUI = createTokenChatUI(handleMessage, handleExit, {
+                network: client.getNetwork(),
+                account: userAddress,
+                tokenSymbol,
+                tokenAddress,
+                leaseExpiresAt: leaseInfo.leaseExpiresAt,
+            }, initialMessages);
+            // Wait for the chat UI to exit (blocks until user exits)
+            await chatUI.waitUntilExit();
         }
         else {
             // JSON mode: read messages from stdin and output JSON to stdout
@@ -1272,8 +1040,6 @@ export async function startChatStream(client, jsonMode = false, tokenIdentifier,
                                 isExiting = true;
                                 if (leaseCheckInterval)
                                     clearInterval(leaseCheckInterval);
-                                if (headerUpdateInterval)
-                                    clearInterval(headerUpdateInterval);
                                 if (ws)
                                     ws.close();
                                 console.log(JSON.stringify({ type: "exiting" }));
@@ -1430,7 +1196,7 @@ export async function startChatStream(client, jsonMode = false, tokenIdentifier,
                     // Send message
                     isSending = true;
                     try {
-                        leaseInfo = await ensureLeaseValid(client, userAddress, leaseInfo, undefined, undefined);
+                        leaseInfo = await ensureLeaseValid(client, userAddress, leaseInfo, undefined);
                         if (!ws || ws.readyState !== 1) {
                             throw new Error("WebSocket connection lost. Please wait for reconnection.");
                         }
@@ -1462,11 +1228,8 @@ export async function startChatStream(client, jsonMode = false, tokenIdentifier,
                 isExiting = true;
                 if (leaseCheckInterval)
                     clearInterval(leaseCheckInterval);
-                if (headerUpdateInterval)
-                    clearInterval(headerUpdateInterval);
                 if (ws)
                     ws.close();
-                // Don't try to use readline in JSON mode - it should never exist
                 process.exit(0);
             });
             process.stdin.on("error", (error) => {
@@ -1482,11 +1245,8 @@ export async function startChatStream(client, jsonMode = false, tokenIdentifier,
                 isExiting = true;
                 if (leaseCheckInterval)
                     clearInterval(leaseCheckInterval);
-                if (headerUpdateInterval)
-                    clearInterval(headerUpdateInterval);
                 if (ws)
                     ws.close();
-                // Don't try to use readline in JSON mode - it should never exist
                 console.log(JSON.stringify({ type: "exiting" }));
                 process.exit(0);
             });
@@ -1497,8 +1257,6 @@ export async function startChatStream(client, jsonMode = false, tokenIdentifier,
         try {
             if (leaseCheckInterval)
                 clearInterval(leaseCheckInterval);
-            if (headerUpdateInterval)
-                clearInterval(headerUpdateInterval);
             pulseIntervals.forEach((interval) => clearInterval(interval));
             pulseIntervals.clear();
             if (ws !== null) {
@@ -1514,8 +1272,8 @@ export async function startChatStream(client, jsonMode = false, tokenIdentifier,
                     // Ignore cleanup errors
                 }
             }
-            if (screen) {
-                screen.destroy();
+            if (chatUI) {
+                await chatUI.destroy();
             }
         }
         catch (cleanupError) {