dev3000 0.0.77 → 0.0.79

package/dist/screencast-manager.js

@@ -0,0 +1,410 @@
+import { existsSync, mkdirSync, writeFileSync } from "node:fs";
+import { tmpdir } from "node:os";
+import { join } from "node:path";
+import { WebSocket } from "ws";
+/**
+ * ScreencastManager - Passive screencast capture for navigation events
+ *
+ * Listens for Page.frameStartedLoading and automatically captures 5 seconds
+ * of screencast frames for jank detection. No artificial page reloads needed!
+ */
+export class ScreencastManager {
+    cdpUrl;
+    logFn;
+    ws = null;
+    buffer = [];
+    isCapturing = false;
+    navigationStartTime = 0;
+    currentSessionId = "";
+    screenshotDir;
+    messageId = 1000; // Start high to avoid conflicts
+    appPort;
+    layoutShifts = [];
+    viewportInfo = {};
+    clsObserverInstalled = false;
+    constructor(cdpUrl, logFn, appPort) {
+        this.cdpUrl = cdpUrl;
+        this.logFn = logFn;
+        this.screenshotDir = process.env.SCREENSHOT_DIR || join(tmpdir(), "dev3000-mcp-deps", "public", "screenshots");
+        this.appPort = appPort || process.env.APP_PORT || "3000";
+        if (!existsSync(this.screenshotDir)) {
+            mkdirSync(this.screenshotDir, { recursive: true });
+        }
+    }
+    /**
+     * Start listening for navigation events and capturing screencasts
+     */
+    async start() {
+        if (this.ws) {
+            return;
+        }
+        try {
+            this.ws = new WebSocket(this.cdpUrl);
+            this.ws.on("open", () => {
+                // Enable Page domain to receive navigation events
+                this.send("Page.enable", {});
+                // Enable Runtime domain for URL checking
+                this.send("Runtime.enable", {});
+            });
+            this.ws.on("message", (data) => {
+                this.handleMessage(JSON.parse(data.toString()));
+            });
+            this.ws.on("error", () => {
+                // Silently handle errors
+            });
+            this.ws.on("close", () => {
+                this.ws = null;
+            });
+        }
+        catch {
+            // Silently handle errors
+        }
+    }
+    /**
+     * Stop capturing and cleanup
+     */
+    async stop() {
+        if (this.isCapturing) {
+            await this.stopScreencast();
+        }
+        if (this.ws) {
+            this.ws.close();
+            this.ws = null;
+        }
+        // this.logFn("[CDP] Stopped")
+    }
+    /**
+     * Handle CDP messages
+     */
+    handleMessage(message) {
+        // Uncomment for CDP event debugging:
+        // if (message.method && (message.method.startsWith("Page.") || message.method.startsWith("Network."))) {
+        //   this.logFn(`[CDP] Received CDP event: ${message.method}`)
+        // }
+        // Navigation started - check URL before capturing
+        // Note: Page.frameStartedNavigating fires earlier than Page.frameStartedLoading
+        if (message.method === "Page.frameStartedNavigating" || message.method === "Page.frameStartedLoading") {
+            this.checkUrlAndStartCapture();
+        }
+        // Navigation finished - save and stop
+        else if (message.method === "Page.loadEventFired") {
+            this.onNavigationComplete();
+        }
+        // Screencast frame received
+        else if (message.method === "Page.screencastFrame" && message.params) {
+            this.onScreencastFrame(message.params);
+        }
+    }
+    /**
+     * Check URL before starting capture - only capture localhost:{appPort}
+     */
+    async checkUrlAndStartCapture() {
+        try {
+            // Query current page URL using Runtime.evaluate
+            const evalId = this.messageId++;
+            this.send("Runtime.evaluate", {
+                expression: "window.location.href",
+                returnByValue: true
+            }, evalId);
+            // Wait for response (hacky but works for now)
+            const checkResponse = (message) => {
+                if (message.id === evalId && message.result?.result?.value) {
+                    const url = message.result.result.value;
+                    // this.logFn(`[CDP] Current URL: ${url}`)
+                    // Only capture if it's the app URL (localhost:appPort)
+                    if (url.includes(`localhost:${this.appPort}`)) {
+                        // this.logFn("[CDP] URL matches app, starting capture")
+                        this.onNavigationStart();
+                    }
+                    else {
+                        // this.logFn(`[CDP] Skipping capture - URL does not match localhost:${this.appPort}`)
+                    }
+                    // Remove listener after handling
+                    if (this.ws) {
+                        this.ws.off("message", responseHandler);
+                    }
+                }
+            };
+            const responseHandler = (data) => {
+                checkResponse(JSON.parse(data.toString()));
+            };
+            if (this.ws) {
+                this.ws.on("message", responseHandler);
+                // Timeout after 500ms
+                setTimeout(() => {
+                    if (this.ws) {
+                        this.ws.off("message", responseHandler);
+                    }
+                }, 500);
+            }
+        }
+        catch (error) {
+            this.logFn(`[CDP] Failed to check URL - ${error}`);
+            // Fall back to capturing anyway
+            this.onNavigationStart();
+        }
+    }
+    /**
+     * Navigation started - begin capturing screencast
+     */
+    onNavigationStart() {
+        // this.logFn("[CDP] Navigation started, beginning screencast capture")
+        this.navigationStartTime = Date.now();
+        this.currentSessionId = new Date()
+            .toISOString()
+            .replace(/:/g, "-")
+            .replace(/\.\d{3}Z$/, "Z");
+        this.buffer = [];
+        this.layoutShifts = [];
+        this.isCapturing = true;
+        // Install CLS observer if not already present
+        this.installCLSObserver();
+        // Start screencast at 15fps with good quality
+        this.send("Page.startScreencast", {
+            format: "png",
+            quality: 80,
+            maxWidth: 1920,
+            maxHeight: 1080,
+            everyNthFrame: 1
+        });
+    }
+    /**
+     * Navigation completed - save frames and stop (after delay to catch hydration)
+     */
+    async onNavigationComplete() {
+        if (!this.isCapturing)
+            return;
+        // this.logFn(`[CDP] Page loaded, capturing 2 more seconds for hydration jank...`)
+        // Continue capturing for 2 more seconds to catch hydration issues
+        // Hydration often happens right after page load completes
+        setTimeout(async () => {
+            if (!this.isCapturing)
+                return;
+            // this.logFn(`[CDP] Navigation complete, saving ${this.buffer.length} frames`)
+            // Save all buffered frames
+            for (const frame of this.buffer) {
+                const screenshotPath = join(this.screenshotDir, `${this.currentSessionId}-jank-${frame.timestamp}ms.png`);
+                try {
+                    const buffer = Buffer.from(frame.data, "base64");
+                    writeFileSync(screenshotPath, buffer);
+                }
+                catch (error) {
+                    this.logFn(`[CDP] Failed to save frame - ${error}`);
+                }
+            }
+            // this.logFn(`[CDP] Saved ${this.buffer.length} frames for session ${this.currentSessionId}`)
+            // Save session metadata with CLS data
+            const metadataPath = join(this.screenshotDir, `${this.currentSessionId}-metadata.json`);
+            const totalCLS = this.layoutShifts.reduce((sum, shift) => sum + shift.score, 0);
+            const metadata = {
+                sessionId: this.currentSessionId,
+                frameCount: this.buffer.length,
+                navigationStartTime: this.navigationStartTime,
+                captureEndTime: Date.now(),
+                appPort: this.appPort,
+                cssViewport: this.viewportInfo, // CSS viewport dimensions from window.innerWidth
+                layoutShifts: this.layoutShifts,
+                totalCLS,
+                clsGrade: totalCLS <= 0.1 ? "good" : totalCLS <= 0.25 ? "needs-improvement" : "poor"
+            };
+            try {
+                writeFileSync(metadataPath, JSON.stringify(metadata, null, 2));
+                if (totalCLS > 0) {
+                    this.logFn(`[CDP] Detected ${this.layoutShifts.length} layout shifts (CLS: ${totalCLS.toFixed(4)})`);
+                }
+            }
+            catch (error) {
+                this.logFn(`[CDP] Failed to save metadata - ${error}`);
+            }
+            this.logFn(`[CDP] View jank analysis: http://localhost:${process.env.MCP_PORT || "3684"}/video/${this.currentSessionId}`);
+            await this.stopScreencast();
+        }, 2000);
+    }
+    /**
+     * Received a screencast frame - add to buffer
+     */
+    onScreencastFrame(params) {
+        if (!this.isCapturing)
+            return;
+        const frameTimestamp = Date.now() - this.navigationStartTime;
+        const frameData = params.data;
+        const sessionId = params.sessionId;
+        // Acknowledge frame so we get more
+        this.send("Page.screencastFrameAck", { sessionId });
+        // Buffer frames (no time limit, onNavigationComplete handles stopping)
+        this.buffer.push({
+            timestamp: frameTimestamp,
+            data: frameData,
+            absoluteTime: Date.now()
+        });
+        // Keep buffer trimmed to prevent memory issues (max 10 seconds of frames)
+        const now = Date.now();
+        this.buffer = this.buffer.filter((f) => now - f.absoluteTime < 10000);
+    }
+    /**
+     * Stop screencast capture
+     */
+    async stopScreencast() {
+        if (!this.isCapturing)
+            return;
+        this.send("Page.stopScreencast", {});
+        this.isCapturing = false;
+        this.buffer = [];
+        // this.logFn("[CDP] Stopped screencast capture")
+    }
+    /**
+     * Install PerformanceObserver for layout shifts (passive, no reload needed)
+     */
+    installCLSObserver() {
+        if (this.clsObserverInstalled)
+            return;
+        const observerScript = `
+      (function() {
+        if (window.__dev3000_cls_observer__) return; // Already installed
+
+        window.__dev3000_cls_observer__ = true;
+        window.__dev3000_layout_shifts__ = [];
+        window.__dev3000_viewport__ = {
+          width: window.innerWidth,
+          height: window.innerHeight,
+          devicePixelRatio: window.devicePixelRatio || 1
+        };
+
+        try {
+          const observer = new PerformanceObserver((list) => {
+            for (const entry of list.getEntries()) {
+              if (entry.entryType === 'layout-shift' && !entry.hadRecentInput) {
+                // For each shift, try to get the actual current bounding box
+                const sources = entry.sources ? entry.sources.map(s => {
+                  let actualRect = null;
+                  if (s.node && s.node.nodeName) {
+                    try {
+                      // Query the first matching element (nav, header, etc.)
+                      const element = document.querySelector(s.node.nodeName.toLowerCase());
+                      if (element) {
+                        const rect = element.getBoundingClientRect();
+                        actualRect = {
+                          x: rect.x,
+                          y: rect.y,
+                          width: rect.width,
+                          height: rect.height
+                        };
+                      }
+                    } catch (e) {
+                      // Ignore errors
+                    }
+                  }
+
+                  return {
+                    node: s.node ? s.node.nodeName : undefined,
+                    previousRect: s.previousRect ? {
+                      x: s.previousRect.x,
+                      y: s.previousRect.y,
+                      width: s.previousRect.width,
+                      height: s.previousRect.height
+                    } : {},
+                    currentRect: s.currentRect ? {
+                      x: s.currentRect.x,
+                      y: s.currentRect.y,
+                      width: s.currentRect.width,
+                      height: s.currentRect.height
+                    } : {},
+                    actualRect: actualRect
+                  };
+                }) : [];
+
+                window.__dev3000_layout_shifts__.push({
+                  score: entry.value,
+                  timestamp: entry.startTime,
+                  sources: sources
+                });
+              }
+            }
+          });
+
+          observer.observe({ type: 'layout-shift', buffered: true });
+          console.log('[dev3000] CLS observer installed');
+        } catch (e) {
+          console.error('[dev3000] Failed to install CLS observer:', e);
+        }
+      })();
+    `;
+        // Inject observer via Runtime.evaluate
+        const evalId = this.messageId++;
+        this.send("Runtime.evaluate", { expression: observerScript, returnByValue: false }, evalId);
+        // Set up periodic polling to retrieve layout shift data
+        this.pollLayoutShifts();
+        this.clsObserverInstalled = true;
+        // this.logFn("Installed CLS observer")
+    }
+    /**
+     * Poll for layout shift data from the injected observer
+     */
+    pollLayoutShifts() {
+        if (!this.isCapturing)
+            return;
+        const pollId = this.messageId++;
+        const viewportId = this.messageId++;
+        this.send("Runtime.evaluate", {
+            expression: "window.__dev3000_layout_shifts__ || []",
+            returnByValue: true
+        }, pollId);
+        // Also get viewport info
+        this.send("Runtime.evaluate", {
+            expression: "window.__dev3000_viewport__ || {}",
+            returnByValue: true
+        }, viewportId);
+        // Listen for response
+        const handlePollResponse = (message) => {
+            if (message.id === pollId && message.result?.result?.value) {
+                const shifts = message.result.result.value;
+                if (shifts.length > this.layoutShifts.length) {
+                    // New shifts detected
+                    const newShifts = shifts.slice(this.layoutShifts.length);
+                    this.layoutShifts.push(...newShifts);
+                    newShifts.forEach((shift) => {
+                        this.logFn(`[CDP] Layout shift detected (score: ${shift.score.toFixed(4)}, time: ${shift.timestamp.toFixed(0)}ms)`);
+                    });
+                }
+            }
+            if (message.id === viewportId && message.result?.result?.value) {
+                this.viewportInfo = message.result.result.value;
+            }
+        };
+        const responseHandler = (data) => {
+            handlePollResponse(JSON.parse(data.toString()));
+        };
+        if (this.ws) {
+            this.ws.on("message", responseHandler);
+            // Timeout after 500ms
+            setTimeout(() => {
+                if (this.ws) {
+                    this.ws.off("message", responseHandler);
+                }
+            }, 500);
+        }
+        // Poll every 500ms while capturing
+        if (this.isCapturing) {
+            setTimeout(() => this.pollLayoutShifts(), 500);
+        }
+    }
+    /**
+     * Send CDP command
+     */
+    send(method, params, id) {
+        if (!this.ws)
+            return;
+        this.ws.send(JSON.stringify({
+            id: id ?? this.messageId++,
+            method,
+            params
+        }));
+    }
+    /**
+     * Get the most recent session ID (for fix_my_app to reference)
+     */
+    getLatestSessionId() {
+        return this.currentSessionId;
+    }
+}
+//# sourceMappingURL=screencast-manager.js.map

package/dist/screencast-manager.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"screencast-manager.js","sourceRoot":"","sources":["../src/screencast-manager.ts"],"names":[],"mappings":"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"}

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

@@ -27,18 +27,23 @@ const COMPACT_LOGO = "d3k"
 const FULL_LOGO = ["   ▐▌▄▄▄▄ █  ▄ ", "   ▐▌   █ █▄▀  ", "▗▞▀▜▌▀▀▀█ █ ▀▄ ", "▝▚▄▟▌▄▄▄█ █  █ "]
 
 const TUIApp = ({
-  appPort,
+  appPort: initialAppPort,
   mcpPort,
   logFile,
   commandName,
   serversOnly,
   version,
   projectName,
-  onStatusUpdate
-}: TUIOptions & { onStatusUpdate: (fn: (status: string | null) => void) => void }) => {
+  onStatusUpdate,
+  onAppPortUpdate
+}: TUIOptions & {
+  onStatusUpdate: (fn: (status: string | null) => void) => void
+  onAppPortUpdate: (fn: (port: string) => void) => void
+}) => {
   const [logs, setLogs] = useState<LogEntry[]>([])
   const [scrollOffset, setScrollOffset] = useState(0)
   const [initStatus, setInitStatus] = useState<string | null>("Initializing...")
+  const [appPort, setAppPort] = useState<string>(initialAppPort)
   const logIdCounter = useRef(0)
   const { stdout } = useStdout()
   const ctrlCMessageDefault = "^C quit"
@@ -99,6 +104,13 @@ const TUIApp = ({
     })
   }, [onStatusUpdate])
 
+  // Provide app port update function to parent
+  useEffect(() => {
+    onAppPortUpdate((port: string) => {
+      setAppPort(port)
+    })
+  }, [onAppPortUpdate])
+
   // Calculate available lines for logs dynamically based on terminal height and mode
   const calculateMaxVisibleLogs = () => {
     if (isVeryCompact) {
@@ -248,12 +260,15 @@ const TUIApp = ({
           {initStatus && <Text dimColor>- {initStatus}</Text>}
         </Box>
         {!isVeryCompact && (
-          <>
+          <Box flexDirection="column">
             <Text dimColor>
               App: localhost:{appPort} | MCP: localhost:{mcpPort}
             </Text>
-            <Text dimColor>↑/↓ scroll | Ctrl-C quit</Text>
-          </>
+            <Text dimColor>
+              📸 http://localhost:{mcpPort}/logs
+              {projectName ? `?project=${encodeURIComponent(projectName)}` : ""}
+            </Text>
+          </Box>
         )}
       </Box>
     </Box>
@@ -332,9 +347,9 @@ const TUIApp = ({
               if (parts) {
                 let [, timestamp, source, type, message] = parts
 
-                // Replace specific emoji in common port-in-use error to avoid terminal width issues
-                if (message?.includes("ERROR: ⚠ Port") && message.includes("is in use by process")) {
-                  message = message.replace("ERROR: ⚠ Port", "ERROR: [!] Port")
+                // 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
@@ -438,19 +453,27 @@ const TUIApp = ({
 
       {/* Bottom status line - no border, just text */}
       <Box paddingX={1} justifyContent="space-between">
-        <Text color="#A18CE5">⏵⏵ {logFile.replace(process.env.HOME || "", "~")}</Text>
+        <Text color="#A18CE5">
+          ⏵⏵{" "}
+          {isVeryCompact
+            ? logFile.split("/").slice(-2, -1)[0] || "logs" // Just show directory name
+            : logFile.replace(process.env.HOME || "", "~")}
+        </Text>
         <Text color="#A18CE5">{ctrlCMessage}</Text>
       </Box>
     </Box>
   )
 }
 
-export async function runTUI(
-  options: TUIOptions
-): Promise<{ app: { unmount: () => void }; updateStatus: (status: string | null) => void }> {
+export async function runTUI(options: TUIOptions): Promise<{
+  app: { unmount: () => void }
+  updateStatus: (status: string | null) => void
+  updateAppPort: (port: string) => void
+}> {
   return new Promise((resolve, reject) => {
     try {
       let statusUpdater: ((status: string | null) => void) | null = null
+      let appPortUpdater: ((port: string) => void) | null = null
 
       const app = render(
         <TUIApp
@@ -458,11 +481,14 @@ export async function runTUI(
           onStatusUpdate={(fn) => {
             statusUpdater = fn
           }}
+          onAppPortUpdate={(fn) => {
+            appPortUpdater = fn
+          }}
         />,
         { exitOnCtrlC: false }
       )
 
-      // Give React time to set up the status updater
+      // Give React time to set up the updaters
       setTimeout(() => {
         resolve({
           app,
@@ -470,6 +496,11 @@ export async function runTUI(
             if (statusUpdater) {
               statusUpdater(status)
             }
+          },
+          updateAppPort: (port: string) => {
+            if (appPortUpdater) {
+              appPortUpdater(port)
+            }
           }
         })
       }, 100)

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

@@ -12,5 +12,6 @@ export declare function runTUI(options: TUIOptions): Promise<{
         unmount: () => void;
     };
     updateStatus: (status: string | null) => void;
+    updateAppPort: (port: string) => void;
 }>;
 //# sourceMappingURL=tui-interface-impl.d.ts.map

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":"AAOA,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;AAgbD,wBAAsB,MAAM,CAC1B,OAAO,EAAE,UAAU,GAClB,OAAO,CAAC;IAAE,GAAG,EAAE;QAAE,OAAO,EAAE,MAAM,IAAI,CAAA;KAAE,CAAC;IAAC,YAAY,EAAE,CAAC,MAAM,EAAE,MAAM,GAAG,IAAI,KAAK,IAAI,CAAA;CAAE,CAAC,CA+B1F"}
+{"version":3,"file":"tui-interface-impl.d.ts","sourceRoot":"","sources":["../src/tui-interface-impl.tsx"],"names":[],"mappings":"AAOA,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;AAocD,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"}

package/dist/tui-interface-impl.js

@@ -8,10 +8,11 @@ import { LOG_COLORS } from "./constants/log-colors.js";
 const COMPACT_LOGO = "d3k";
 // Full ASCII logo lines as array for easier rendering
 const FULL_LOGO = ["   ▐▌▄▄▄▄ █  ▄ ", "   ▐▌   █ █▄▀  ", "▗▞▀▜▌▀▀▀█ █ ▀▄ ", "▝▚▄▟▌▄▄▄█ █  █ "];
-const TUIApp = ({ appPort, mcpPort, logFile, commandName, serversOnly, version, projectName, onStatusUpdate }) => {
+const TUIApp = ({ appPort: initialAppPort, mcpPort, logFile, commandName, serversOnly, version, projectName, onStatusUpdate, onAppPortUpdate }) => {
     const [logs, setLogs] = useState([]);
     const [scrollOffset, setScrollOffset] = useState(0);
     const [initStatus, setInitStatus] = useState("Initializing...");
+    const [appPort, setAppPort] = useState(initialAppPort);
     const logIdCounter = useRef(0);
     const { stdout } = useStdout();
     const ctrlCMessageDefault = "^C quit";
@@ -65,6 +66,12 @@ const TUIApp = ({ appPort, mcpPort, logFile, commandName, serversOnly, version,
             }
         });
     }, [onStatusUpdate]);
+    // Provide app port update function to parent
+    useEffect(() => {
+        onAppPortUpdate((port) => {
+            setAppPort(port);
+        });
+    }, [onAppPortUpdate]);
     // Calculate available lines for logs dynamically based on terminal height and mode
     const calculateMaxVisibleLogs = () => {
         if (isVeryCompact) {
@@ -193,7 +200,7 @@ const TUIApp = ({ appPort, mcpPort, logFile, commandName, serversOnly, version,
     // Calculate visible logs
     const visibleLogs = logs.slice(Math.max(0, logs.length - maxVisibleLogs - scrollOffset), logs.length - scrollOffset);
     // Render compact header for small terminals
-    const renderCompactHeader = () => (_jsx(Box, { borderStyle: "single", borderColor: "#A18CE5", paddingX: 1, marginBottom: 1, children: _jsxs(Box, { flexDirection: "column", width: "100%", children: [_jsxs(Box, { children: [_jsx(Text, { color: "#A18CE5", bold: true, children: COMPACT_LOGO }), _jsxs(Text, { children: [" v", version, " "] }), initStatus && _jsxs(Text, { dimColor: true, children: ["- ", initStatus] })] }), !isVeryCompact && (_jsxs(_Fragment, { children: [_jsxs(Text, { dimColor: true, children: ["App: localhost:", appPort, " | MCP: localhost:", mcpPort] }), _jsx(Text, { dimColor: true, children: "\u2191/\u2193 scroll | Ctrl-C quit" })] }))] }) }));
+    const renderCompactHeader = () => (_jsx(Box, { borderStyle: "single", borderColor: "#A18CE5", paddingX: 1, marginBottom: 1, children: _jsxs(Box, { flexDirection: "column", width: "100%", children: [_jsxs(Box, { children: [_jsx(Text, { color: "#A18CE5", bold: true, children: COMPACT_LOGO }), _jsxs(Text, { children: [" v", version, " "] }), initStatus && _jsxs(Text, { dimColor: true, children: ["- ", initStatus] })] }), !isVeryCompact && (_jsxs(Box, { flexDirection: "column", children: [_jsxs(Text, { dimColor: true, children: ["App: localhost:", appPort, " | MCP: localhost:", mcpPort] }), _jsxs(Text, { dimColor: true, children: ["\uD83D\uDCF8 http://localhost:", mcpPort, "/logs", projectName ? `?project=${encodeURIComponent(projectName)}` : ""] })] }))] }) }));
     // Render normal header
     const renderNormalHeader = () => {
         // Create custom top border with title embedded (like Claude Code)
@@ -212,9 +219,9 @@ const TUIApp = ({ appPort, mcpPort, logFile, commandName, serversOnly, version,
                             const parts = log.content.match(/^\[(.*?)\] \[(.*?)\] (?:\[(.*?)\] )?(.*)$/);
                             if (parts) {
                                 let [, timestamp, source, type, message] = parts;
-                                // Replace specific emoji in common port-in-use error to avoid terminal width issues
-                                if (message?.includes("ERROR: ⚠ Port") && message.includes("is in use by process")) {
-                                    message = message.replace("ERROR: ⚠ Port", "ERROR: [!] Port");
+                                // 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) {
@@ -258,16 +265,21 @@ const TUIApp = ({ appPort, mcpPort, logFile, commandName, serversOnly, version,
                             }
                             // 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 ", logFile.replace(process.env.HOME || "", "~")] }), _jsx(Text, { color: "#A18CE5", children: ctrlCMessage })] })] }));
+                        })) }), !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 })] })] }));
 };
 export async function runTUI(options) {
     return new Promise((resolve, reject) => {
         try {
             let statusUpdater = null;
+            let appPortUpdater = null;
             const app = render(_jsx(TUIApp, { ...options, onStatusUpdate: (fn) => {
                     statusUpdater = fn;
+                }, onAppPortUpdate: (fn) => {
+                    appPortUpdater = fn;
                 } }), { exitOnCtrlC: false });
-            // Give React time to set up the status updater
+            // Give React time to set up the updaters
             setTimeout(() => {
                 resolve({
                     app,
@@ -275,6 +287,11 @@ export async function runTUI(options) {
                         if (statusUpdater) {
                             statusUpdater(status);
                         }
+                    },
+                    updateAppPort: (port) => {
+                        if (appPortUpdater) {
+                            appPortUpdater(port);
+                        }
                     }
                 });
             }, 100);