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

feat(tui): stack utilities/settings under stats in wide layout

Browse Source 
Why: at ≥150 cols Stats was lifted next to Logs but Utilities/Settings
sat in a separate bottom row. Keep them stacked under Stats in the left
column so Logs gets the full height on the right; Stats flex-grows to
absorb leftover space while Utilities/Settings stay at fixed heights.

Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
This commit is contained in:
gsxdsm
2026-04-29 11:31:57 -07:00
parent f1c87c38d4
commit abad18ac14
1 changed files with 19 additions and 12 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -750,10 +750,15 @@ function StatusModeGrid({
const logsShare = Math.max(1, middleHeight - SYSTEM_HEIGHT - bottomShare);
// LogsPanel chrome: border 2 + title 1 + filter 1 = 4.
const logsAvailableRows = Math.max(1, logsShare - 4);
// On very wide terminals, lift Stats up next to Logs so the bottom row only
// holds Utilities + Settings. Logs gets the row budget that Stats vacated.
// On very wide terminals, the left column stacks Stats + Utilities + Settings
// and Logs takes the full right column for its full height. Stats absorbs
// whatever vertical room Utilities/Settings don't claim.
const wideLayout = cols >= 150;
const wideLogsAvailableRows = Math.max(1, logsShare + bottomShare - 4);
// Fixed heights for Utilities (7 actions + 3 chrome) and Settings (9 keys +
// 3 chrome). Stats flex-grows above these so it gets the leftover space.
const UTILITIES_HEIGHT = 10;
const SETTINGS_HEIGHT = 12;
tuiDebug("StatusModeGrid", { cols, rows, middleHeight, logsShare, bottomShare, focused, wideLayout });
return (
@@ -770,10 +775,20 @@ function StatusModeGrid({
</Box>
{wideLayout ? (
<>
{/* Wide: Stats sits left of Logs and absorbs the bottom-row height. */}
{/* Wide: left column stacks Stats / Utilities / Settings; Logs fills
the right column for the full middle-area height. Stats flex-grows
so it claims any space Utilities/Settings don't need. */}
<Box flexGrow={1} flexShrink={0} flexDirection="row" overflow="hidden">
<Box flexDirection="column" width="30%" flexShrink={0} overflow="hidden">
<StatsPanel state={state} isFocused={focused === "stats"} />
<Box flexGrow={1} flexShrink={1} flexDirection="column" overflow="hidden">
<StatsPanel state={state} isFocused={focused === "stats"} />
</Box>
<Box height={UTILITIES_HEIGHT} flexShrink={0} flexDirection="column" overflow="hidden">
<UtilitiesPanel state={state} isFocused={focused === "utilities"} />
</Box>
<Box height={SETTINGS_HEIGHT} flexShrink={0} flexDirection="column" overflow="hidden">
<SettingsPanel state={state} isFocused={focused === "settings"} />
</Box>
</Box>
<Box flexGrow={1} flexDirection="column" overflow="hidden">
<LogsPanel
@@ -783,14 +798,6 @@ function StatusModeGrid({
/>
</Box>
</Box>
<Box flexDirection="row" flexShrink={2} overflow="hidden">
<Box flexDirection="column" flexGrow={1} flexBasis={0} overflow="hidden">
<UtilitiesPanel state={state} isFocused={focused === "utilities"} />
</Box>
<Box flexDirection="column" flexGrow={1} flexBasis={0} overflow="hidden">
<SettingsPanel state={state} isFocused={focused === "settings"} />
</Box>
</Box>
</>
) : (
<>