MediaMetz/gemini-cli
1
0
Fork 0
mirror of https://github.com/google-gemini/gemini-cli.git synced 2026-03-10 22:21:22 -07:00
Code Issues Packages Projects Releases Wiki Activity

Shortcuts: Move SectionHeader title below top line and refine styling (#18721)

Browse Source
This commit is contained in:
Keith Guerin
2026-02-24 00:12:29 -08:00
committed by GitHub
parent 81cd2561dc
commit e69e23e4a0
6 changed files with 50 additions and 22 deletions
Download Patch File Download Diff File Expand all files Collapse all files

8
packages/cli/src/test-utils/render.tsx
View File

@@ -393,9 +393,11 @@ export const render = (
exitOnCtrlC: false,
patchConsole: false,
onRender: (metrics: RenderMetrics) => {
if (isInkRenderMetrics(metrics)) {
stdout.onRender(metrics.staticOutput ?? '', metrics.output);
}
const output = isInkRenderMetrics(metrics) ? metrics.output : '...';
const staticOutput = isInkRenderMetrics(metrics)
? (metrics.staticOutput ?? '')
: '';
stdout.onRender(staticOutput, output);
},
});
});

2
packages/cli/src/ui/components/ShortcutsHelp.tsx
View File

@@ -67,7 +67,7 @@ export const ShortcutsHelp: React.FC = () => {
return (
<Box flexDirection="column" width="100%">
<SectionHeader title="Shortcuts (for more, see /help)" />
<SectionHeader title=" Shortcuts" subtitle=" See /help for more" />
<Box flexDirection="row" flexWrap="wrap" paddingLeft={1} paddingRight={2}>
{itemsForDisplay.map((item, index) => (
<Box

12
packages/cli/src/ui/components/__snapshots__/ShortcutsHelp.test.tsx.snap
View File

@@ -1,7 +1,8 @@
// Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
exports[`ShortcutsHelp > renders correctly in 'narrow' mode on 'linux' 1`] = `
"── Shortcuts (for more, see /help) ─────
"────────────────────────────────────────
Shortcuts See /help for more
! shell mode
@ select file or folder
Esc Esc clear & rewind
@@ -16,7 +17,8 @@ exports[`ShortcutsHelp > renders correctly in 'narrow' mode on 'linux' 1`] = `
`;
exports[`ShortcutsHelp > renders correctly in 'narrow' mode on 'mac' 1`] = `
"── Shortcuts (for more, see /help) ─────
"────────────────────────────────────────
Shortcuts See /help for more
! shell mode
@ select file or folder
Esc Esc clear & rewind
@@ -31,7 +33,8 @@ exports[`ShortcutsHelp > renders correctly in 'narrow' mode on 'mac' 1`] = `
`;
exports[`ShortcutsHelp > renders correctly in 'wide' mode on 'linux' 1`] = `
"── Shortcuts (for more, see /help) ─────────────────────────────────────────────────────────────────
"────────────────────────────────────────────────────────────────────────────────────────────────────
Shortcuts See /help for more
! shell mode Shift+Tab cycle mode Ctrl+V paste images
@ select file or folder Ctrl+Y YOLO mode Alt+M raw markdown mode
Esc Esc clear & rewind Ctrl+R reverse-search history Ctrl+X open external editor
@@ -40,7 +43,8 @@ exports[`ShortcutsHelp > renders correctly in 'wide' mode on 'linux' 1`] = `
`;
exports[`ShortcutsHelp > renders correctly in 'wide' mode on 'mac' 1`] = `
"── Shortcuts (for more, see /help) ─────────────────────────────────────────────────────────────────
"────────────────────────────────────────────────────────────────────────────────────────────────────
Shortcuts See /help for more
! shell mode Shift+Tab cycle mode Ctrl+V paste images
@ select file or folder Ctrl+Y YOLO mode Option+M raw markdown mode
Esc Esc clear & rewind Ctrl+R reverse-search history Ctrl+X open external editor

10
packages/cli/src/ui/components/shared/SectionHeader.test.tsx
View File

@@ -30,9 +30,15 @@ describe('<SectionHeader />', () => {
title: 'Narrow Container',
width: 25,
},
])('$description', async ({ title, width }) => {
{
description: 'renders correctly with a subtitle',
title: 'Shortcuts',
subtitle: ' See /help for more',
width: 40,
},
])('$description', async ({ title, subtitle, width }) => {
const { lastFrame, waitUntilReady, unmount } = renderWithProviders(
<SectionHeader title={title} />,
<SectionHeader title={title} subtitle={subtitle} />,
{ width },
);
await waitUntilReady();

25
packages/cli/src/ui/components/shared/SectionHeader.tsx
View File

@@ -8,16 +8,13 @@ import type React from 'react';
import { Box, Text } from 'ink';
import { theme } from '../../semantic-colors.js';
export const SectionHeader: React.FC<{ title: string }> = ({ title }) => (
<Box width="100%" flexDirection="row" overflow="hidden">
<Text color={theme.text.secondary} wrap="truncate-end">
{`── ${title}`}
</Text>
export const SectionHeader: React.FC<{ title: string; subtitle?: string }> = ({
title,
subtitle,
}) => (
<Box width="100%" flexDirection="column" overflow="hidden">
<Box
flexGrow={1}
flexShrink={0}
minWidth={2}
marginLeft={1}
width="100%"
borderStyle="single"
borderTop
borderBottom={false}
@@ -25,5 +22,15 @@ export const SectionHeader: React.FC<{ title: string }> = ({ title }) => (
borderRight={false}
borderColor={theme.text.secondary}
/>
<Box flexDirection="row">
<Text color={theme.text.primary} bold wrap="truncate-end">
{title}
</Text>
{subtitle && (
<Text color={theme.text.secondary} wrap="truncate-end">
{subtitle}
</Text>
)}
</Box>
</Box>
);

15
packages/cli/src/ui/components/shared/__snapshots__/SectionHeader.test.tsx.snap
View File

@@ -1,16 +1,25 @@
// Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
exports[`<SectionHeader /> > 'renders correctly in a narrow contain…' 1`] = `
"── Narrow Container ─────
"─────────────────────────
Narrow Container
"
`;
exports[`<SectionHeader /> > 'renders correctly when title is trunc…' 1`] = `
"── Very Long Hea… ──
"────────────────────
Very Long Header Ti…
"
`;
exports[`<SectionHeader /> > 'renders correctly with a standard tit…' 1`] = `
"── My Header ───────────────────────────
"────────────────────────────────────────
My Header
"
`;
exports[`<SectionHeader /> > 'renders correctly with a subtitle' 1`] = `
"────────────────────────────────────────
Shortcuts See /help for more
"
`;