FN-7930: remove terminal footer 'Connected' label and shortcut help text
Declutters the terminal footer by dropping steady-state noise: the redundant 'Connected' status text (the header status dot already conveys connection state) and the persistent zoom/shortcuts/escape help copy. - Remove .terminal-shortcuts / .terminal-shortcuts--header CSS rules (including responsive breakpoint overrides) as orphaned styling - Stop rendering the 'Connected' text and the Ctrl++/- zoom / Shortcuts panel / Esc close help span in TerminalModal's footer - Drop the now-unused terminal.helpText locale key from all 6 locales (en, es, fr, ko, zh-CN, zh-TW) and regenerate resources.d.ts - Update TerminalModal tests to match the trimmed footer markup and add a regression test asserting the connected-status text and shortcut help are omitted - Add a patch changeset documenting the fix Files changed: .changeset/remove-terminal-footer-noise.md | 7 +++++ .../dashboard/app/components/TerminalModal.css | 34 --------------------- .../dashboard/app/components/TerminalModal.tsx | 7 +++-- .../components/__tests__/TerminalModal.test.tsx | 35 +++++++++++++++++----- packages/i18n/locales/en/app.json | 1 - packages/i18n/locales/es/app.json | 1 - packages/i18n/locales/fr/app.json | 1 - packages/i18n/locales/ko/app.json | 1 - packages/i18n/locales/zh-CN/app.json | 1 - packages/i18n/locales/zh-TW/app.json | 1 - packages/i18n/src/resources.d.ts | 1 - 11 files changed, 40 insertions(+), 50 deletions(-) Fusion-Task-Id: FN-7930 Fusion-Task-Lineage: 2b8acb5d-c4d4-4766-ba84-b2691a7eb5e8 Co-authored-by: Fusion (runfusion.ai) <noreply@runfusion.ai>
This commit is contained in:
7
.changeset/remove-terminal-footer-noise.md
Normal file
7
.changeset/remove-terminal-footer-noise.md
Normal file
@@ -0,0 +1,7 @@
|
||||
---
|
||||
"@runfusion/fusion": patch
|
||||
---
|
||||
|
||||
summary: Remove the "Connected" label and shortcut help text from the terminal footer.
|
||||
category: fix
|
||||
dev: Drops the terminal footer helpText locale key and orphaned shortcut CSS.
|
||||
@@ -908,30 +908,6 @@ The terminal header pop-out/dock affordance is an icon-only utility control. It
|
||||
color: var(--text-muted);
|
||||
}
|
||||
|
||||
.terminal-shortcuts {
|
||||
font-size: 12px;
|
||||
color: var(--text-muted);
|
||||
}
|
||||
|
||||
/*
|
||||
FNXC:TerminalHeader 2026-07-11-18:45:
|
||||
FN-7823: viewport-based terminal breakpoints keep narrow floating/docked panels on the desktop header layout, so the header help text must stay on one line and let .terminal-actions use the FN-7550 min-width: 0 + overflow-x scroll pattern instead of wrapping the header.
|
||||
*/
|
||||
.terminal-shortcuts--header {
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.terminal-shortcuts kbd {
|
||||
display: inline-block;
|
||||
padding: 2px 6px;
|
||||
background: var(--surface);
|
||||
border: 1px solid var(--border);
|
||||
border-radius: var(--radius-sm);
|
||||
font-family: var(--font-mono);
|
||||
font-size: 11px;
|
||||
color: var(--text);
|
||||
}
|
||||
|
||||
.terminal-history {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
@@ -1808,10 +1784,6 @@ The Android keyboard-open recurrence can start with a touch-primary visualViewpo
|
||||
font-size: 11px;
|
||||
}
|
||||
|
||||
.terminal-shortcuts {
|
||||
font-size: 11px;
|
||||
}
|
||||
|
||||
.terminal-shortcut-panel {
|
||||
max-height: calc(var(--space-2xl) + var(--space-2xl) + var(--space-2xl) + var(--space-xl));
|
||||
}
|
||||
@@ -1851,11 +1823,6 @@ The Android keyboard-open recurrence can start with a touch-primary visualViewpo
|
||||
min-height: calc(var(--space-xl) + var(--space-md));
|
||||
}
|
||||
|
||||
.terminal-shortcuts kbd {
|
||||
padding: 1px 4px;
|
||||
font-size: 10px;
|
||||
}
|
||||
|
||||
.terminal-input-area {
|
||||
padding: 10px 12px;
|
||||
padding-bottom: max(10px, env(safe-area-inset-bottom, 0));
|
||||
@@ -1925,7 +1892,6 @@ The Android keyboard-open recurrence can start with a touch-primary visualViewpo
|
||||
display: none;
|
||||
}
|
||||
|
||||
.terminal-shortcuts--header,
|
||||
.terminal-connection-status {
|
||||
display: none;
|
||||
}
|
||||
|
||||
@@ -2513,14 +2513,17 @@ export function TerminalModal({ isOpen, onClose, initialCommand, initialCommandG
|
||||
<Settings size={14} />
|
||||
<span className="terminal-action-label">{t("terminal.preferences", "Preferences")}</span>
|
||||
</button>
|
||||
{/*
|
||||
FNXC:Terminal 2026-07-12-00:00:
|
||||
The terminal footer should not repeat steady-state "Connected" text or persistent zoom/shortcuts/escape help copy because the footer is crowded.
|
||||
Keep only actionable non-connected status text here; the header status dot still conveys the connected state visually.
|
||||
*/}
|
||||
<span className={`terminal-connection-status ${connectionStatus}`}>
|
||||
{connectionStatus === "connected" && t("terminal.statusConnected", "Connected")}
|
||||
{connectionStatus === "connecting" && t("terminal.statusConnecting", "Connecting...")}
|
||||
{connectionStatus === "reconnecting" && t("terminal.statusReconnecting", "Reconnecting...")}
|
||||
{connectionStatus === "disconnected" && t("terminal.statusDisconnected", "Disconnected")}
|
||||
</span>
|
||||
{exitCode !== null && <span className="terminal-exit-code" data-testid="terminal-exit-code">{t("terminal.exitLabel", "Exit: {{code}}", { code: exitCode })}</span>}
|
||||
<span className="terminal-shortcuts terminal-shortcuts--header">{t("terminal.helpText", "Ctrl++/- zoom • ⌨ Shortcuts panel • Esc close")}</span>
|
||||
{!embedded && !isMobileTerminal && (
|
||||
<button
|
||||
className="terminal-clear-btn terminal-clear-btn--shortcut terminal-clear-btn--icon"
|
||||
|
||||
@@ -1788,13 +1788,12 @@ describe("TerminalModal", () => {
|
||||
expect(footerRule).toContain("touch-action: pan-x pan-y;");
|
||||
|
||||
const mobileHideBlock = terminalModalCss.match(
|
||||
/@media \(max-width: 768px\) \{[\s\S]*?\.terminal-shortcuts--header,\s*\n\s*\.terminal-connection-status \{[\s\S]*?\}\s*\n\}/,
|
||||
/@media \(max-width: 768px\) \{[\s\S]*?\.terminal-connection-status \{[\s\S]*?\}\s*\n\}/,
|
||||
);
|
||||
expect(mobileHideBlock).not.toBeNull();
|
||||
const tabletBlock = terminalModalCss.match(
|
||||
/@media \(min-width: 769px\) and \(max-width: 1024px\) \{([\s\S]*?)\n\}/,
|
||||
)?.[1] ?? "";
|
||||
expect(tabletBlock).not.toMatch(/\.terminal-shortcuts--header/);
|
||||
expect(tabletBlock).not.toMatch(/\.terminal-connection-status/);
|
||||
expect(tabletBlock).not.toMatch(/\.terminal-status-bar/);
|
||||
});
|
||||
@@ -1802,10 +1801,7 @@ describe("TerminalModal", () => {
|
||||
it("keeps the desktop terminal header controls on one scrollable row when narrow (FN-7823)", () => {
|
||||
// FN-7823: large viewport breakpoints can still produce narrow floating or
|
||||
// docked panels, so the desktop header must preserve horizontal scrolling
|
||||
// instead of wrapping the help/status text into multiple rows.
|
||||
const shortcutsHeaderRule = terminalModalCss.match(/\.terminal-shortcuts--header\s*\{([^}]*)\}/)?.[1] ?? "";
|
||||
expect(shortcutsHeaderRule).toContain("white-space: nowrap;");
|
||||
|
||||
// instead of wrapping status text into multiple rows.
|
||||
const actionsRule = terminalModalCss.match(/\.terminal-actions\s*\{([^}]*)\}/)?.[1] ?? "";
|
||||
expect(actionsRule).toContain("min-width: 0;");
|
||||
expect(actionsRule).toContain("overflow-x: auto;");
|
||||
@@ -1815,7 +1811,7 @@ describe("TerminalModal", () => {
|
||||
expect(connectionStatusRule).toContain("white-space: nowrap;");
|
||||
|
||||
const mobileHideBlock = terminalModalCss.match(
|
||||
/@media \(max-width: 768px\) \{[\s\S]*?\.terminal-shortcuts--header,\s*\n\s*\.terminal-connection-status \{([^}]*)\}/,
|
||||
/@media \(max-width: 768px\) \{[\s\S]*?\.terminal-connection-status \{([^}]*)\}/,
|
||||
)?.[1] ?? "";
|
||||
expect(mobileHideBlock).toContain("display: none;");
|
||||
});
|
||||
@@ -4077,6 +4073,7 @@ describe("TerminalModal — mobile layout contract", () => {
|
||||
const connectionStatus = footer.querySelector(".terminal-connection-status");
|
||||
|
||||
expect(connectionStatus?.textContent).toBe("Disconnected");
|
||||
expect(footer.querySelector(".terminal-shortcuts--header")).toBeNull();
|
||||
for (const control of [clearBtn, shortcutToggle, preferencesToggle, fontSizeValue, pinToggle, popoutToggle]) {
|
||||
expect(footer.contains(control)).toBe(true);
|
||||
expect(header?.contains(control)).toBe(false);
|
||||
@@ -4090,6 +4087,30 @@ describe("TerminalModal — mobile layout contract", () => {
|
||||
}
|
||||
});
|
||||
|
||||
it("omits steady-state connected text and shortcut help from the shared footer controls", async () => {
|
||||
const previousInnerWidth = window.innerWidth;
|
||||
Object.defineProperty(window, "innerWidth", { value: 1280, configurable: true });
|
||||
|
||||
try {
|
||||
mockUseTerminal.mockReturnValue(
|
||||
createMockTerminalState({ connectionStatus: "connected" }),
|
||||
);
|
||||
render(<TerminalModal isOpen={true} onClose={mockOnClose} />);
|
||||
|
||||
await waitFor(() => {
|
||||
const footer = screen.getByTestId("terminal-footer-actions");
|
||||
const connectionStatus = footer.querySelector(".terminal-connection-status");
|
||||
|
||||
expect(connectionStatus).toBeTruthy();
|
||||
expect(connectionStatus?.textContent).toBe("");
|
||||
expect(footer.querySelector(".terminal-shortcuts--header")).toBeNull();
|
||||
expect(screen.queryByText("Ctrl++/- zoom • ⌨ Shortcuts panel • Esc close")).toBeNull();
|
||||
});
|
||||
} finally {
|
||||
Object.defineProperty(window, "innerWidth", { value: previousInnerWidth, configurable: true });
|
||||
}
|
||||
});
|
||||
|
||||
it("renders terminal action controls in a mobile footer, not the header (FN-7560)", async () => {
|
||||
const previousInnerWidth = window.innerWidth;
|
||||
Object.defineProperty(window, "innerWidth", { value: 390, configurable: true });
|
||||
|
||||
@@ -8360,7 +8360,6 @@
|
||||
"decreaseFontSize": "Decrease terminal font size",
|
||||
"exitLabel": "Exit: {{code}}",
|
||||
"failedToStartTerminal": "Failed to start terminal: {{error}}",
|
||||
"helpText": "Ctrl++/- zoom • ⌨ Shortcuts panel • Esc close",
|
||||
"increaseFontSize": "Increase terminal font size",
|
||||
"initializeError": "Terminal UI failed to initialize: {{error}}",
|
||||
"newSession": "New Session",
|
||||
|
||||
@@ -8350,7 +8350,6 @@
|
||||
"decreaseFontSize": "Reducir el tamaño de fuente del terminal",
|
||||
"exitLabel": "Salida: {{code}}",
|
||||
"failedToStartTerminal": "Error al iniciar el terminal: {{error}}",
|
||||
"helpText": "Ctrl++/- zoom • ⌨ Panel de atajos • Esc cerrar",
|
||||
"increaseFontSize": "Aumentar el tamaño de fuente del terminal",
|
||||
"initializeError": "Error en la inicialización de la interfaz del terminal: {{error}}",
|
||||
"newSession": "Nueva sesión",
|
||||
|
||||
@@ -8350,7 +8350,6 @@
|
||||
"decreaseFontSize": "Réduire la taille de la police du terminal",
|
||||
"exitLabel": "Sortie : {{code}}",
|
||||
"failedToStartTerminal": "Impossible de démarrer le terminal : {{error}}",
|
||||
"helpText": "Ctrl++/- zoom • ⌨ Panneau des raccourcis • Esc fermer",
|
||||
"increaseFontSize": "Augmenter la taille de la police du terminal",
|
||||
"initializeError": "L'interface du terminal n'a pas pu s'initialiser : {{error}}",
|
||||
"newSession": "Nouvelle session",
|
||||
|
||||
@@ -8350,7 +8350,6 @@
|
||||
"decreaseFontSize": "터미널 글꼴 크기 줄이기",
|
||||
"exitLabel": "종료: {{code}}",
|
||||
"failedToStartTerminal": "터미널 시작에 실패했습니다: {{error}}",
|
||||
"helpText": "Ctrl++/- 확대/축소 • ⌨ 단축키 패널 • Esc 닫기",
|
||||
"increaseFontSize": "터미널 글꼴 크기 늘리기",
|
||||
"initializeError": "터미널 UI 초기화에 실패했습니다: {{error}}",
|
||||
"newSession": "새 세션",
|
||||
|
||||
@@ -8350,7 +8350,6 @@
|
||||
"decreaseFontSize": "减小终端字体大小",
|
||||
"exitLabel": "退出:{{code}}",
|
||||
"failedToStartTerminal": "无法启动终端:{{error}}",
|
||||
"helpText": "Ctrl++/- 缩放 • ⌨ 快捷键面板 • Esc 关闭",
|
||||
"increaseFontSize": "增加终端字体大小",
|
||||
"initializeError": "终端 UI 初始化失败:{{error}}",
|
||||
"newSession": "新建会话",
|
||||
|
||||
@@ -8350,7 +8350,6 @@
|
||||
"decreaseFontSize": "減小終端字型大小",
|
||||
"exitLabel": "退出:{{code}}",
|
||||
"failedToStartTerminal": "無法啟動終端:{{error}}",
|
||||
"helpText": "Ctrl++/- 縮放 • ⌨ 快捷鍵面板 • Esc 關閉",
|
||||
"increaseFontSize": "增加終端字型大小",
|
||||
"initializeError": "終端 UI 初始化失敗:{{error}}",
|
||||
"newSession": "新建工作階段",
|
||||
|
||||
1
packages/i18n/src/resources.d.ts
vendored
1
packages/i18n/src/resources.d.ts
vendored
@@ -8399,7 +8399,6 @@ export default interface Resources {
|
||||
"decreaseFontSize": "Decrease terminal font size",
|
||||
"exitLabel": "Exit: {{code}}",
|
||||
"failedToStartTerminal": "Failed to start terminal: {{error}}",
|
||||
"helpText": "Ctrl++/- zoom • ⌨ Shortcuts panel • Esc close",
|
||||
"increaseFontSize": "Increase terminal font size",
|
||||
"initializeError": "Terminal UI failed to initialize: {{error}}",
|
||||
"newSession": "New Session",
|
||||
|
||||
Reference in New Issue
Block a user