From e75a22c65646811af564a4c9384ddc9bd14c9146 Mon Sep 17 00:00:00 2001
From: gsxdsm <gsxdsm@users.noreply.github.com>
Date: Wed, 29 Apr 2026 20:47:04 -0700
Subject: [PATCH] fix(tui): keep header left edge anchored when remote tunnel
 is shown

Between 100-175 cols the remote URL pushed the logo/tabs offscreen.
Remote info now sits in a flex-shrinkable, right-justified slot that
truncates. Also paints a solid background on the QR overlay.

Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
---
 .changeset/tui-header-remote-truncate.md      |  5 ++++
 .../cli/src/commands/dashboard-tui/app.tsx    | 25 ++++++++-----------
 2 files changed, 15 insertions(+), 15 deletions(-)
 create mode 100644 .changeset/tui-header-remote-truncate.md

diff --git a/.changeset/tui-header-remote-truncate.md b/.changeset/tui-header-remote-truncate.md
new file mode 100644
index 000000000..527999096
--- /dev/null
+++ b/.changeset/tui-header-remote-truncate.md
@@ -0,0 +1,5 @@
+---
+"@runfusion/fusion": patch
+---
+
+Fix TUI header overflow when a remote tunnel is configured. Between 100 and 175 columns the remote URL was pushing the left edge (logo + tabs) offscreen; the remote info now lives in a flex-shrinkable, right-justified slot that truncates instead of overflowing. Also gives the QR overlay a solid background so it no longer renders transparent over the underlying TUI.
diff --git a/packages/cli/src/commands/dashboard-tui/app.tsx b/packages/cli/src/commands/dashboard-tui/app.tsx
index 3c1daf59d..70e43d290 100644
--- a/packages/cli/src/commands/dashboard-tui/app.tsx
+++ b/packages/cli/src/commands/dashboard-tui/app.tsx
@@ -958,21 +958,16 @@ function MainHeader({ state }: { state: DashboardState }) {
           </Box>
         );
       })}
-      <Box flexGrow={1} />
-      {state.remoteStatus?.state === "running" && (
-        <Box flexShrink={0} marginRight={1}>
-          <Text wrap="truncate-end" color="green" bold>● tunnel</Text>
-          {state.remoteStatus.url && cols >= 100 && (
-            <Text wrap="truncate-end" color="green"> {state.remoteStatus.url}</Text>
-          )}
-          {cols >= 80 && <Text wrap="truncate-end" dimColor>  [^Q] QR</Text>}
-        </Box>
-      )}
-      {state.remoteStatus?.state === "starting" && (
-        <Box flexShrink={0} marginRight={1}>
+      <Box flexGrow={1} flexShrink={1} justifyContent="flex-end" overflow="hidden" marginRight={1}>
+        {state.remoteStatus?.state === "running" && (
+          <Text wrap="truncate-end" color="green" bold>
+            ● tunnel{state.remoteStatus.url ? ` ${state.remoteStatus.url}` : ""}{cols >= 80 ? "  [^Q] QR" : ""}
+          </Text>
+        )}
+        {state.remoteStatus?.state === "starting" && (
           <Text wrap="truncate-end" color="yellow">● tunnel starting…</Text>
-        </Box>
-      )}
+        )}
+      </Box>
       {showHelpHint && <Box flexShrink={0}><Text wrap="truncate-end" dimColor>[?] help  [q] quit</Text></Box>}
     </Box>
   );
@@ -4209,7 +4204,7 @@ export function DashboardApp({ controller }: DashboardAppProps) {
         </Box>
       )}
       {qrOverlay && (
-        <Box position="absolute" marginTop={2} marginLeft={2} flexDirection="column" borderStyle="round" borderColor="cyan" paddingX={1}>
+        <Box position="absolute" marginTop={2} marginLeft={2} flexDirection="column" borderStyle="round" borderColor="cyan" backgroundColor="black" paddingX={1}>
           <Text bold color="cyanBright">Remote Access — Scan to connect</Text>
           {qrOverlay.state === "loading" && <Text dimColor>Generating QR…</Text>}
           {qrOverlay.state === "error" && <Text color="red">{qrOverlay.message}</Text>}