root/fusion
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

fix(tui): keep header left edge anchored when remote tunnel is shown

Browse Source 
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>
This commit is contained in:
gsxdsm
2026-04-29 20:47:04 -07:00
parent 3d7fe18021
commit cfc8aa35b6
2 changed files with 15 additions and 15 deletions
Download Patch File Download Diff File Expand all files Collapse all files

5
.changeset/tui-header-remote-truncate.md Normal file
View File

@@ -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.

25
packages/cli/src/commands/dashboard-tui/app.tsx
View File

@@ -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>}