dev3000 0.0.114 → 0.0.116

package/dist/src/tui-interface-impl.tsx

@@ -2,7 +2,7 @@ import chalk from "chalk"
 import { createReadStream, unwatchFile, watchFile } from "fs"
 import { Box, render, Text, useInput, useStdout } from "ink"
 import Spinner from "ink-spinner"
-import { useEffect, useRef, useState } from "react"
+import { memo, useEffect, useRef, useState } from "react"
 import type { Readable } from "stream"
 import { LOG_COLORS } from "./constants/log-colors.js"
 
@@ -29,6 +29,117 @@ const COMPACT_LOGO = "d3k"
 // Full ASCII logo lines as array for easier rendering
 const FULL_LOGO = ["   ▐▌▄▄▄▄ █  ▄ ", "   ▐▌   █ █▄▀  ", "▗▞▀▜▌▀▀▀█ █ ▀▄ ", "▝▚▄▟▌▄▄▄█ █  █ "]
 
+// Type colors map - defined outside component to avoid recreation
+const TYPE_COLORS: Record<string, string> = {
+  NETWORK: LOG_COLORS.NETWORK,
+  ERROR: LOG_COLORS.ERROR,
+  WARNING: LOG_COLORS.WARNING,
+  INFO: LOG_COLORS.INFO,
+  LOG: LOG_COLORS.LOG,
+  DEBUG: LOG_COLORS.DEBUG,
+  SCREENSHOT: LOG_COLORS.SCREENSHOT,
+  DOM: LOG_COLORS.DOM,
+  CDP: LOG_COLORS.CDP,
+  CHROME: LOG_COLORS.CHROME,
+  CRASH: LOG_COLORS.CRASH,
+  REPLAY: LOG_COLORS.REPLAY,
+  NAVIGATION: LOG_COLORS.NAVIGATION,
+  INTERACTION: LOG_COLORS.INTERACTION,
+  GET: LOG_COLORS.SERVER,
+  POST: LOG_COLORS.SERVER,
+  PUT: LOG_COLORS.SERVER,
+  DELETE: LOG_COLORS.SERVER,
+  PATCH: LOG_COLORS.SERVER,
+  HEAD: LOG_COLORS.SERVER,
+  OPTIONS: LOG_COLORS.SERVER
+}
+
+// Memoized log line component to prevent re-parsing on every render
+const LogLine = memo(
+  ({ log, isCompact, isVeryCompact }: { log: LogEntry; isCompact: boolean; isVeryCompact: boolean }) => {
+    // Parse log line to colorize different parts
+    const parts = log.content.match(/^\[(.*?)\] \[(.*?)\] (?:\[(.*?)\] )?(.*)$/)
+
+    if (parts) {
+      let [, timestamp, source, type, message] = parts
+
+      // Extract HTTP method from SERVER logs as a secondary tag
+      if (source === "SERVER" && !type && message) {
+        const methodMatch = message.match(/^(GET|POST|PUT|DELETE|PATCH|HEAD|OPTIONS)\s/)
+        if (methodMatch) {
+          type = methodMatch[1]
+          message = message.slice(type.length + 1) // Remove method from message
+        }
+      }
+
+      // Replace warning emoji in ERROR/WARNING messages for consistent terminal rendering
+      if (message && (type === "ERROR" || type === "WARNING")) {
+        message = message.replace(/⚠/g, "[!]")
+      }
+
+      // In very compact mode, simplify the output
+      if (isVeryCompact) {
+        const shortSource = source === "BROWSER" ? "B" : "S"
+        const shortType = type ? type.split(".")[0].charAt(0) : ""
+        return (
+          <Text wrap="truncate-end">
+            <Text dimColor>[{shortSource}]</Text>
+            {shortType && <Text dimColor>[{shortType}]</Text>}
+            <Text> {message}</Text>
+          </Text>
+        )
+      }
+
+      // Use shared color constants
+      const sourceColor = source === "BROWSER" ? LOG_COLORS.BROWSER : LOG_COLORS.SERVER
+
+      // In compact mode, skip padding
+      if (isCompact) {
+        return (
+          <Text wrap="truncate-end">
+            <Text dimColor>[{timestamp}]</Text>
+            <Text> </Text>
+            <Text color={sourceColor} bold>
+              [{source.charAt(0)}]
+            </Text>
+            {type && (
+              <>
+                <Text> </Text>
+                <Text color={TYPE_COLORS[type] || "#A0A0A0"}>[{type}]</Text>
+              </>
+            )}
+            <Text> {message}</Text>
+          </Text>
+        )
+      }
+
+      // Normal mode with minimal padding
+      return (
+        <Text wrap="truncate-end">
+          <Text dimColor>[{timestamp}]</Text>
+          <Text> </Text>
+          <Text color={sourceColor} bold>
+            [{source}]
+          </Text>
+          {type ? (
+            <>
+              <Text> </Text>
+              <Text color={TYPE_COLORS[type] || "#A0A0A0"}>[{type}]</Text>
+              <Text> </Text>
+            </>
+          ) : (
+            <Text> </Text>
+          )}
+          <Text>{message}</Text>
+        </Text>
+      )
+    }
+
+    // Fallback for unparsed lines
+    return <Text wrap="truncate-end">{log.content}</Text>
+  }
+)
+
 const TUIApp = ({
   appPort: initialAppPort,
   mcpPort,
@@ -155,19 +266,19 @@ const TUIApp = ({
   useEffect(() => {
     let logStream: Readable | undefined
     let buffer = ""
+    let pendingLogs: LogEntry[] = []
+    let flushTimeout: NodeJS.Timeout | null = null
 
-    const appendLog = (line: string) => {
-      if (NEXTJS_MCP_404_REGEX.test(line)) {
-        return
-      }
+    // Batch log updates to prevent excessive renders
+    const flushPendingLogs = () => {
+      if (pendingLogs.length === 0) return
 
-      const newLog: LogEntry = {
-        id: logIdCounter.current++,
-        content: line
-      }
+      const logsToAdd = pendingLogs
+      pendingLogs = []
+      flushTimeout = null
 
       setLogs((prevLogs) => {
-        const updated = [...prevLogs, newLog]
+        const updated = [...prevLogs, ...logsToAdd]
         // Keep only last N logs to prevent memory issues
         if (updated.length > maxLogs) {
           return updated.slice(-maxLogs)
@@ -176,12 +287,32 @@ const TUIApp = ({
       })
 
       // Auto-scroll to bottom only if user is already at the bottom
-      // Otherwise, increment scroll offset by 1, accounting for the appended log and max scroll offset
+      // Otherwise, increment scroll offset by count of new logs
       setScrollOffset((currentOffset) => {
-        return currentOffset === 0 ? 0 : Math.min(maxScrollOffsetRef.current, currentOffset + 1)
+        return currentOffset === 0 ? 0 : Math.min(maxScrollOffsetRef.current, currentOffset + logsToAdd.length)
       })
     }
 
+    const appendLog = (line: string) => {
+      if (NEXTJS_MCP_404_REGEX.test(line)) {
+        return
+      }
+
+      const newLog: LogEntry = {
+        id: logIdCounter.current++,
+        content: line
+      }
+
+      pendingLogs.push(newLog)
+
+      // Debounce: flush after 50ms of no new logs
+      // Terminal synchronized updates prevent flicker, so we can be more responsive
+      if (flushTimeout) {
+        clearTimeout(flushTimeout)
+      }
+      flushTimeout = setTimeout(flushPendingLogs, 50)
+    }
+
     // Create a read stream for the log file
     logStream = createReadStream(logFile, {
       encoding: "utf8",
@@ -236,6 +367,9 @@ const TUIApp = ({
       if (logStream) {
         logStream.destroy()
       }
+      if (flushTimeout) {
+        clearTimeout(flushTimeout)
+      }
       unwatchFile(logFile)
     }
   }, [logFile])
@@ -376,121 +510,9 @@ const TUIApp = ({
           {visibleLogs.length === 0 ? (
             <Text dimColor>Waiting for logs...</Text>
           ) : (
-            visibleLogs.map((log) => {
-              // Parse log line to colorize different parts
-              const parts = log.content.match(/^\[(.*?)\] \[(.*?)\] (?:\[(.*?)\] )?(.*)$/)
-
-              if (parts) {
-                let [, timestamp, source, type, message] = parts
-
-                // Extract HTTP method from SERVER logs as a secondary tag
-                if (source === "SERVER" && !type && message) {
-                  const methodMatch = message.match(/^(GET|POST|PUT|DELETE|PATCH|HEAD|OPTIONS)\s/)
-                  if (methodMatch) {
-                    type = methodMatch[1]
-                    message = message.slice(type.length + 1) // Remove method from message
-                  }
-                }
-
-                // Replace warning emoji in ERROR/WARNING messages for consistent terminal rendering
-                if (message && (type === "ERROR" || type === "WARNING")) {
-                  message = message.replace(/⚠/g, "[!]")
-                }
-
-                // In very compact mode, simplify the output
-                if (isVeryCompact) {
-                  const shortSource = source === "BROWSER" ? "B" : "S"
-                  const shortType = type ? type.split(".")[0].charAt(0) : ""
-                  return (
-                    <Text key={log.id} wrap="truncate-end">
-                      <Text dimColor>[{shortSource}]</Text>
-                      {shortType && <Text dimColor>[{shortType}]</Text>}
-                      <Text> {message}</Text>
-                    </Text>
-                  )
-                }
-
-                // Use shared color constants
-                const sourceColor = source === "BROWSER" ? LOG_COLORS.BROWSER : LOG_COLORS.SERVER
-                const typeColors: Record<string, string> = {
-                  NETWORK: LOG_COLORS.NETWORK,
-                  ERROR: LOG_COLORS.ERROR,
-                  WARNING: LOG_COLORS.WARNING,
-                  INFO: LOG_COLORS.INFO,
-                  LOG: LOG_COLORS.LOG,
-                  DEBUG: LOG_COLORS.DEBUG,
-                  SCREENSHOT: LOG_COLORS.SCREENSHOT,
-                  DOM: LOG_COLORS.DOM,
-                  CDP: LOG_COLORS.CDP,
-                  CHROME: LOG_COLORS.CHROME,
-                  CRASH: LOG_COLORS.CRASH,
-                  REPLAY: LOG_COLORS.REPLAY,
-                  NAVIGATION: LOG_COLORS.NAVIGATION,
-                  INTERACTION: LOG_COLORS.INTERACTION,
-                  GET: LOG_COLORS.SERVER,
-                  POST: LOG_COLORS.SERVER,
-                  PUT: LOG_COLORS.SERVER,
-                  DELETE: LOG_COLORS.SERVER,
-                  PATCH: LOG_COLORS.SERVER,
-                  HEAD: LOG_COLORS.SERVER,
-                  OPTIONS: LOG_COLORS.SERVER
-                }
-
-                // In compact mode, skip padding
-                if (isCompact) {
-                  return (
-                    <Text key={log.id} wrap="truncate-end">
-                      <Text dimColor>[{timestamp}]</Text>
-                      <Text> </Text>
-                      <Text color={sourceColor} bold>
-                        [{source.charAt(0)}]
-                      </Text>
-                      {type && (
-                        <>
-                          <Text> </Text>
-                          <Text color={typeColors[type] || "#A0A0A0"}>[{type}]</Text>
-                        </>
-                      )}
-                      <Text> {message}</Text>
-                    </Text>
-                  )
-                }
-
-                // Normal mode with minimal padding
-                // Single space after source
-                const sourceSpacing = ""
-
-                // Single space after type
-                const typeSpacing = ""
-
-                return (
-                  <Text key={log.id} wrap="truncate-end">
-                    <Text dimColor>[{timestamp}]</Text>
-                    <Text> </Text>
-                    <Text color={sourceColor} bold>
-                      [{source}]
-                    </Text>
-                    {type ? (
-                      <>
-                        <Text>{sourceSpacing} </Text>
-                        <Text color={typeColors[type] || "#A0A0A0"}>[{type}]</Text>
-                        <Text>{typeSpacing} </Text>
-                      </>
-                    ) : (
-                      <Text> </Text>
-                    )}
-                    <Text>{message}</Text>
-                  </Text>
-                )
-              }
-
-              // Fallback for unparsed lines
-              return (
-                <Text key={log.id} wrap="truncate-end">
-                  {log.content}
-                </Text>
-              )
-            })
+            visibleLogs.map((log) => (
+              <LogLine key={log.id} log={log} isCompact={isCompact} isVeryCompact={isVeryCompact} />
+            ))
           )}
         </Box>
 
@@ -524,6 +546,32 @@ export async function runTUI(options: TUIOptions): Promise<{
       let statusUpdater: ((status: string | null) => void) | null = null
       let appPortUpdater: ((port: string) => void) | null = null
 
+      // Wrap stdout.write to add synchronized update escape sequences
+      // This tells the terminal to buffer all output until the end marker
+      // Supported by iTerm2, Kitty, WezTerm, and other modern terminals
+      const originalWrite = process.stdout.write.bind(process.stdout)
+      const syncStart = "\x1b[?2026h" // Begin synchronized update (DECSM 2026)
+      const syncEnd = "\x1b[?2026l" // End synchronized update (DECRM 2026)
+
+      process.stdout.write = ((
+        chunk: string | Uint8Array,
+        encodingOrCb?: BufferEncoding | ((err?: Error | null) => void),
+        cb?: (err?: Error | null) => void
+      ): boolean => {
+        if (typeof chunk === "string" && chunk.length > 0) {
+          // Wrap output in synchronized update markers to prevent partial renders
+          const wrapped = syncStart + chunk + syncEnd
+          if (typeof encodingOrCb === "function") {
+            return originalWrite(wrapped, encodingOrCb)
+          }
+          return originalWrite(wrapped, encodingOrCb, cb)
+        }
+        if (typeof encodingOrCb === "function") {
+          return originalWrite(chunk, encodingOrCb)
+        }
+        return originalWrite(chunk, encodingOrCb, cb)
+      }) as typeof process.stdout.write
+
       const app = render(
         <TUIApp
           {...options}

package/dist/tui-interface-impl.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"tui-interface-impl.d.ts","sourceRoot":"","sources":["../src/tui-interface-impl.tsx"],"names":[],"mappings":"AAQA,MAAM,WAAW,UAAU;IACzB,OAAO,EAAE,MAAM,CAAA;IACf,OAAO,EAAE,MAAM,CAAA;IACf,OAAO,EAAE,MAAM,CAAA;IACf,WAAW,EAAE,MAAM,CAAA;IACnB,WAAW,CAAC,EAAE,OAAO,CAAA;IACrB,OAAO,EAAE,MAAM,CAAA;IACf,WAAW,CAAC,EAAE,MAAM,CAAA;CACrB;AAofD,wBAAsB,MAAM,CAAC,OAAO,EAAE,UAAU,GAAG,OAAO,CAAC;IACzD,GAAG,EAAE;QAAE,OAAO,EAAE,MAAM,IAAI,CAAA;KAAE,CAAA;IAC5B,YAAY,EAAE,CAAC,MAAM,EAAE,MAAM,GAAG,IAAI,KAAK,IAAI,CAAA;IAC7C,aAAa,EAAE,CAAC,IAAI,EAAE,MAAM,KAAK,IAAI,CAAA;CACtC,CAAC,CAwCD"}
+{"version":3,"file":"tui-interface-impl.d.ts","sourceRoot":"","sources":["../src/tui-interface-impl.tsx"],"names":[],"mappings":"AAQA,MAAM,WAAW,UAAU;IACzB,OAAO,EAAE,MAAM,CAAA;IACf,OAAO,EAAE,MAAM,CAAA;IACf,OAAO,EAAE,MAAM,CAAA;IACf,WAAW,EAAE,MAAM,CAAA;IACnB,WAAW,CAAC,EAAE,OAAO,CAAA;IACrB,OAAO,EAAE,MAAM,CAAA;IACf,WAAW,CAAC,EAAE,MAAM,CAAA;CACrB;AA0gBD,wBAAsB,MAAM,CAAC,OAAO,EAAE,UAAU,GAAG,OAAO,CAAC;IACzD,GAAG,EAAE;QAAE,OAAO,EAAE,MAAM,IAAI,CAAA;KAAE,CAAA;IAC5B,YAAY,EAAE,CAAC,MAAM,EAAE,MAAM,GAAG,IAAI,KAAK,IAAI,CAAA;IAC7C,aAAa,EAAE,CAAC,IAAI,EAAE,MAAM,KAAK,IAAI,CAAA;CACtC,CAAC,CAkED"}

package/dist/tui-interface-impl.js

@@ -1,15 +1,75 @@
-import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { jsxs as _jsxs, jsx as _jsx, Fragment as _Fragment } from "react/jsx-runtime";
 import chalk from "chalk";
 import { createReadStream, unwatchFile, watchFile } from "fs";
 import { Box, render, Text, useInput, useStdout } from "ink";
 import Spinner from "ink-spinner";
-import { useEffect, useRef, useState } from "react";
+import { memo, useEffect, useRef, useState } from "react";
 import { LOG_COLORS } from "./constants/log-colors.js";
 const NEXTJS_MCP_404_REGEX = /(?:\[POST\]|POST)\s+\/_next\/mcp\b[^\n]*\b404\b/i;
 // Compact ASCII logo for very small terminals
 const COMPACT_LOGO = "d3k";
 // Full ASCII logo lines as array for easier rendering
 const FULL_LOGO = ["   ▐▌▄▄▄▄ █  ▄ ", "   ▐▌   █ █▄▀  ", "▗▞▀▜▌▀▀▀█ █ ▀▄ ", "▝▚▄▟▌▄▄▄█ █  █ "];
+// Type colors map - defined outside component to avoid recreation
+const TYPE_COLORS = {
+    NETWORK: LOG_COLORS.NETWORK,
+    ERROR: LOG_COLORS.ERROR,
+    WARNING: LOG_COLORS.WARNING,
+    INFO: LOG_COLORS.INFO,
+    LOG: LOG_COLORS.LOG,
+    DEBUG: LOG_COLORS.DEBUG,
+    SCREENSHOT: LOG_COLORS.SCREENSHOT,
+    DOM: LOG_COLORS.DOM,
+    CDP: LOG_COLORS.CDP,
+    CHROME: LOG_COLORS.CHROME,
+    CRASH: LOG_COLORS.CRASH,
+    REPLAY: LOG_COLORS.REPLAY,
+    NAVIGATION: LOG_COLORS.NAVIGATION,
+    INTERACTION: LOG_COLORS.INTERACTION,
+    GET: LOG_COLORS.SERVER,
+    POST: LOG_COLORS.SERVER,
+    PUT: LOG_COLORS.SERVER,
+    DELETE: LOG_COLORS.SERVER,
+    PATCH: LOG_COLORS.SERVER,
+    HEAD: LOG_COLORS.SERVER,
+    OPTIONS: LOG_COLORS.SERVER
+};
+// Memoized log line component to prevent re-parsing on every render
+const LogLine = memo(({ log, isCompact, isVeryCompact }) => {
+    // Parse log line to colorize different parts
+    const parts = log.content.match(/^\[(.*?)\] \[(.*?)\] (?:\[(.*?)\] )?(.*)$/);
+    if (parts) {
+        let [, timestamp, source, type, message] = parts;
+        // Extract HTTP method from SERVER logs as a secondary tag
+        if (source === "SERVER" && !type && message) {
+            const methodMatch = message.match(/^(GET|POST|PUT|DELETE|PATCH|HEAD|OPTIONS)\s/);
+            if (methodMatch) {
+                type = methodMatch[1];
+                message = message.slice(type.length + 1); // Remove method from message
+            }
+        }
+        // Replace warning emoji in ERROR/WARNING messages for consistent terminal rendering
+        if (message && (type === "ERROR" || type === "WARNING")) {
+            message = message.replace(/⚠/g, "[!]");
+        }
+        // In very compact mode, simplify the output
+        if (isVeryCompact) {
+            const shortSource = source === "BROWSER" ? "B" : "S";
+            const shortType = type ? type.split(".")[0].charAt(0) : "";
+            return (_jsxs(Text, { wrap: "truncate-end", children: [_jsxs(Text, { dimColor: true, children: ["[", shortSource, "]"] }), shortType && _jsxs(Text, { dimColor: true, children: ["[", shortType, "]"] }), _jsxs(Text, { children: [" ", message] })] }));
+        }
+        // Use shared color constants
+        const sourceColor = source === "BROWSER" ? LOG_COLORS.BROWSER : LOG_COLORS.SERVER;
+        // In compact mode, skip padding
+        if (isCompact) {
+            return (_jsxs(Text, { wrap: "truncate-end", children: [_jsxs(Text, { dimColor: true, children: ["[", timestamp, "]"] }), _jsx(Text, { children: " " }), _jsxs(Text, { color: sourceColor, bold: true, children: ["[", source.charAt(0), "]"] }), type && (_jsxs(_Fragment, { children: [_jsx(Text, { children: " " }), _jsxs(Text, { color: TYPE_COLORS[type] || "#A0A0A0", children: ["[", type, "]"] })] })), _jsxs(Text, { children: [" ", message] })] }));
+        }
+        // Normal mode with minimal padding
+        return (_jsxs(Text, { wrap: "truncate-end", children: [_jsxs(Text, { dimColor: true, children: ["[", timestamp, "]"] }), _jsx(Text, { children: " " }), _jsxs(Text, { color: sourceColor, bold: true, children: ["[", source, "]"] }), type ? (_jsxs(_Fragment, { children: [_jsx(Text, { children: " " }), _jsxs(Text, { color: TYPE_COLORS[type] || "#A0A0A0", children: ["[", type, "]"] }), _jsx(Text, { children: " " })] })) : (_jsx(Text, { children: " " })), _jsx(Text, { children: message })] }));
+    }
+    // Fallback for unparsed lines
+    return _jsx(Text, { wrap: "truncate-end", children: log.content });
+});
 const TUIApp = ({ appPort: initialAppPort, mcpPort, logFile, commandName, serversOnly, version, projectName, onStatusUpdate, onAppPortUpdate }) => {
     const [logs, setLogs] = useState([]);
     const [scrollOffset, setScrollOffset] = useState(0);
@@ -114,16 +174,17 @@ const TUIApp = ({ appPort: initialAppPort, mcpPort, logFile, commandName, server
     useEffect(() => {
         let logStream;
         let buffer = "";
-        const appendLog = (line) => {
-            if (NEXTJS_MCP_404_REGEX.test(line)) {
+        let pendingLogs = [];
+        let flushTimeout = null;
+        // Batch log updates to prevent excessive renders
+        const flushPendingLogs = () => {
+            if (pendingLogs.length === 0)
                 return;
-            }
-            const newLog = {
-                id: logIdCounter.current++,
-                content: line
-            };
+            const logsToAdd = pendingLogs;
+            pendingLogs = [];
+            flushTimeout = null;
             setLogs((prevLogs) => {
-                const updated = [...prevLogs, newLog];
+                const updated = [...prevLogs, ...logsToAdd];
                 // Keep only last N logs to prevent memory issues
                 if (updated.length > maxLogs) {
                     return updated.slice(-maxLogs);
@@ -131,11 +192,27 @@ const TUIApp = ({ appPort: initialAppPort, mcpPort, logFile, commandName, server
                 return updated;
             });
             // Auto-scroll to bottom only if user is already at the bottom
-            // Otherwise, increment scroll offset by 1, accounting for the appended log and max scroll offset
+            // Otherwise, increment scroll offset by count of new logs
             setScrollOffset((currentOffset) => {
-                return currentOffset === 0 ? 0 : Math.min(maxScrollOffsetRef.current, currentOffset + 1);
+                return currentOffset === 0 ? 0 : Math.min(maxScrollOffsetRef.current, currentOffset + logsToAdd.length);
             });
         };
+        const appendLog = (line) => {
+            if (NEXTJS_MCP_404_REGEX.test(line)) {
+                return;
+            }
+            const newLog = {
+                id: logIdCounter.current++,
+                content: line
+            };
+            pendingLogs.push(newLog);
+            // Debounce: flush after 50ms of no new logs
+            // Terminal synchronized updates prevent flicker, so we can be more responsive
+            if (flushTimeout) {
+                clearTimeout(flushTimeout);
+            }
+            flushTimeout = setTimeout(flushPendingLogs, 50);
+        };
         // Create a read stream for the log file
         logStream = createReadStream(logFile, {
             encoding: "utf8",
@@ -182,6 +259,9 @@ const TUIApp = ({ appPort: initialAppPort, mcpPort, logFile, commandName, server
             if (logStream) {
                 logStream.destroy();
             }
+            if (flushTimeout) {
+                clearTimeout(flushTimeout);
+            }
             unwatchFile(logFile);
         };
     }, [logFile]);
@@ -242,68 +322,7 @@ const TUIApp = ({ appPort: initialAppPort, mcpPort, logFile, commandName, server
     // Calculate the height for the logs box to ensure stable layout from first render
     // This prevents the layout from shifting as logs fill in
     const logsBoxHeight = maxVisibleLogs + 3; // +3 for header line, borders
-    return (_jsxs(Box, { flexDirection: "column", height: termHeight, children: [isCompact ? renderCompactHeader() : renderNormalHeader(), _jsxs(Box, { flexDirection: "column", borderStyle: "single", borderColor: "gray", paddingX: 1, height: logsBoxHeight, children: [!isVeryCompact && (_jsxs(Text, { color: "gray", dimColor: true, children: ["Logs (", filteredLogs.length, " total", scrollOffset > 0 && `, scrolled up ${scrollOffset} lines`, ")"] })), _jsx(Box, { flexDirection: "column", children: visibleLogs.length === 0 ? (_jsx(Text, { dimColor: true, children: "Waiting for logs..." })) : (visibleLogs.map((log) => {
-                            // Parse log line to colorize different parts
-                            const parts = log.content.match(/^\[(.*?)\] \[(.*?)\] (?:\[(.*?)\] )?(.*)$/);
-                            if (parts) {
-                                let [, timestamp, source, type, message] = parts;
-                                // Extract HTTP method from SERVER logs as a secondary tag
-                                if (source === "SERVER" && !type && message) {
-                                    const methodMatch = message.match(/^(GET|POST|PUT|DELETE|PATCH|HEAD|OPTIONS)\s/);
-                                    if (methodMatch) {
-                                        type = methodMatch[1];
-                                        message = message.slice(type.length + 1); // Remove method from message
-                                    }
-                                }
-                                // Replace warning emoji in ERROR/WARNING messages for consistent terminal rendering
-                                if (message && (type === "ERROR" || type === "WARNING")) {
-                                    message = message.replace(/⚠/g, "[!]");
-                                }
-                                // In very compact mode, simplify the output
-                                if (isVeryCompact) {
-                                    const shortSource = source === "BROWSER" ? "B" : "S";
-                                    const shortType = type ? type.split(".")[0].charAt(0) : "";
-                                    return (_jsxs(Text, { wrap: "truncate-end", children: [_jsxs(Text, { dimColor: true, children: ["[", shortSource, "]"] }), shortType && _jsxs(Text, { dimColor: true, children: ["[", shortType, "]"] }), _jsxs(Text, { children: [" ", message] })] }, log.id));
-                                }
-                                // Use shared color constants
-                                const sourceColor = source === "BROWSER" ? LOG_COLORS.BROWSER : LOG_COLORS.SERVER;
-                                const typeColors = {
-                                    NETWORK: LOG_COLORS.NETWORK,
-                                    ERROR: LOG_COLORS.ERROR,
-                                    WARNING: LOG_COLORS.WARNING,
-                                    INFO: LOG_COLORS.INFO,
-                                    LOG: LOG_COLORS.LOG,
-                                    DEBUG: LOG_COLORS.DEBUG,
-                                    SCREENSHOT: LOG_COLORS.SCREENSHOT,
-                                    DOM: LOG_COLORS.DOM,
-                                    CDP: LOG_COLORS.CDP,
-                                    CHROME: LOG_COLORS.CHROME,
-                                    CRASH: LOG_COLORS.CRASH,
-                                    REPLAY: LOG_COLORS.REPLAY,
-                                    NAVIGATION: LOG_COLORS.NAVIGATION,
-                                    INTERACTION: LOG_COLORS.INTERACTION,
-                                    GET: LOG_COLORS.SERVER,
-                                    POST: LOG_COLORS.SERVER,
-                                    PUT: LOG_COLORS.SERVER,
-                                    DELETE: LOG_COLORS.SERVER,
-                                    PATCH: LOG_COLORS.SERVER,
-                                    HEAD: LOG_COLORS.SERVER,
-                                    OPTIONS: LOG_COLORS.SERVER
-                                };
-                                // In compact mode, skip padding
-                                if (isCompact) {
-                                    return (_jsxs(Text, { wrap: "truncate-end", children: [_jsxs(Text, { dimColor: true, children: ["[", timestamp, "]"] }), _jsx(Text, { children: " " }), _jsxs(Text, { color: sourceColor, bold: true, children: ["[", source.charAt(0), "]"] }), type && (_jsxs(_Fragment, { children: [_jsx(Text, { children: " " }), _jsxs(Text, { color: typeColors[type] || "#A0A0A0", children: ["[", type, "]"] })] })), _jsxs(Text, { children: [" ", message] })] }, log.id));
-                                }
-                                // Normal mode with minimal padding
-                                // Single space after source
-                                const sourceSpacing = "";
-                                // Single space after type
-                                const typeSpacing = "";
-                                return (_jsxs(Text, { wrap: "truncate-end", children: [_jsxs(Text, { dimColor: true, children: ["[", timestamp, "]"] }), _jsx(Text, { children: " " }), _jsxs(Text, { color: sourceColor, bold: true, children: ["[", source, "]"] }), type ? (_jsxs(_Fragment, { children: [_jsxs(Text, { children: [sourceSpacing, " "] }), _jsxs(Text, { color: typeColors[type] || "#A0A0A0", children: ["[", type, "]"] }), _jsxs(Text, { children: [typeSpacing, " "] })] })) : (_jsx(Text, { children: " " })), _jsx(Text, { children: message })] }, log.id));
-                            }
-                            // Fallback for unparsed lines
-                            return (_jsx(Text, { wrap: "truncate-end", children: log.content }, log.id));
-                        })) }), !isVeryCompact && logs.length > maxVisibleLogs && scrollOffset > 0 && (_jsxs(Text, { dimColor: true, children: ["(", scrollOffset, " lines below)"] }))] }), _jsxs(Box, { paddingX: 1, justifyContent: "space-between", children: [_jsxs(Text, { color: "#A18CE5", children: ["\u23F5\u23F5", " ", isVeryCompact
+    return (_jsxs(Box, { flexDirection: "column", height: termHeight, children: [isCompact ? renderCompactHeader() : renderNormalHeader(), _jsxs(Box, { flexDirection: "column", borderStyle: "single", borderColor: "gray", paddingX: 1, height: logsBoxHeight, children: [!isVeryCompact && (_jsxs(Text, { color: "gray", dimColor: true, children: ["Logs (", filteredLogs.length, " total", scrollOffset > 0 && `, scrolled up ${scrollOffset} lines`, ")"] })), _jsx(Box, { flexDirection: "column", children: visibleLogs.length === 0 ? (_jsx(Text, { dimColor: true, children: "Waiting for logs..." })) : (visibleLogs.map((log) => (_jsx(LogLine, { log: log, isCompact: isCompact, isVeryCompact: isVeryCompact }, log.id)))) }), !isVeryCompact && logs.length > maxVisibleLogs && scrollOffset > 0 && (_jsxs(Text, { dimColor: true, children: ["(", scrollOffset, " lines below)"] }))] }), _jsxs(Box, { paddingX: 1, justifyContent: "space-between", children: [_jsxs(Text, { color: "#A18CE5", children: ["\u23F5\u23F5", " ", isVeryCompact
                                 ? logFile.split("/").slice(-2, -1)[0] || "logs" // Just show directory name
                                 : logFile.replace(process.env.HOME || "", "~")] }), _jsx(Text, { color: "#A18CE5", children: ctrlCMessage })] })] }));
 };
@@ -312,6 +331,26 @@ export async function runTUI(options) {
         try {
             let statusUpdater = null;
             let appPortUpdater = null;
+            // Wrap stdout.write to add synchronized update escape sequences
+            // This tells the terminal to buffer all output until the end marker
+            // Supported by iTerm2, Kitty, WezTerm, and other modern terminals
+            const originalWrite = process.stdout.write.bind(process.stdout);
+            const syncStart = "\x1b[?2026h"; // Begin synchronized update (DECSM 2026)
+            const syncEnd = "\x1b[?2026l"; // End synchronized update (DECRM 2026)
+            process.stdout.write = ((chunk, encodingOrCb, cb) => {
+                if (typeof chunk === "string" && chunk.length > 0) {
+                    // Wrap output in synchronized update markers to prevent partial renders
+                    const wrapped = syncStart + chunk + syncEnd;
+                    if (typeof encodingOrCb === "function") {
+                        return originalWrite(wrapped, encodingOrCb);
+                    }
+                    return originalWrite(wrapped, encodingOrCb, cb);
+                }
+                if (typeof encodingOrCb === "function") {
+                    return originalWrite(chunk, encodingOrCb);
+                }
+                return originalWrite(chunk, encodingOrCb, cb);
+            });
             const app = render(_jsx(TUIApp, { ...options, onStatusUpdate: (fn) => {
                     statusUpdater = fn;
                 }, onAppPortUpdate: (fn) => {