refactor: Integrate checkExhaustive function and ensure Card component width is configurable

This commit is contained in:
Mark McLaughlin
2026-02-10 10:56:09 -08:00
parent 4596ced82e
commit 6fd45b50f6
@@ -9,6 +9,7 @@ import { Box, Text } from 'ink';
import { theme } from '../../semantic-colors.js'; import { theme } from '../../semantic-colors.js';
import { ToolStatusIndicator } from '../messages/ToolShared.js'; import { ToolStatusIndicator } from '../messages/ToolShared.js';
import { ToolCallStatus } from '../../types.js'; import { ToolCallStatus } from '../../types.js';
import { checkExhaustive } from '@google/gemini-cli-core';
/** /**
* Props for the Card component. * Props for the Card component.
@@ -24,6 +25,8 @@ export interface CardProps {
children?: React.ReactNode; children?: React.ReactNode;
/** The styling and intent of the card. */ /** The styling and intent of the card. */
status?: ToolCallStatus; status?: ToolCallStatus;
/** The width of the card. Defaults to 100%. */
width?: string | number;
} }
export const Card: React.FC<CardProps> = ({ export const Card: React.FC<CardProps> = ({
@@ -32,6 +35,7 @@ export const Card: React.FC<CardProps> = ({
prefix = true, prefix = true,
suffix, suffix,
children, children,
width = '100%',
}) => { }) => {
const getColors = () => { const getColors = () => {
switch (status) { switch (status) {
@@ -48,6 +52,7 @@ export const Card: React.FC<CardProps> = ({
case ToolCallStatus.Executing: case ToolCallStatus.Executing:
return { border: theme.border.default, text: theme.status.success }; return { border: theme.border.default, text: theme.status.success };
default: default:
checkExhaustive(status);
return { border: theme.border.default, text: theme.text.primary }; return { border: theme.border.default, text: theme.text.primary };
} }
}; };
@@ -55,7 +60,7 @@ export const Card: React.FC<CardProps> = ({
const colors = getColors(); const colors = getColors();
return ( return (
<Box flexDirection="column"> <Box flexDirection="column" width={width}>
<Box width="100%" flexDirection="row"> <Box width="100%" flexDirection="row">
{/* Top border section */} {/* Top border section */}
<Box <Box
@@ -73,7 +78,6 @@ export const Card: React.FC<CardProps> = ({
gap={1} gap={1}
justifyContent="flex-start" justifyContent="flex-start"
> >
{/* TODO: Use shared ToolStatusIndicator component */}
<Box marginRight={-2}> <Box marginRight={-2}>
{prefix && <ToolStatusIndicator status={status} name={title} />} {prefix && <ToolStatusIndicator status={status} name={title} />}
</Box> </Box>
@@ -105,7 +109,6 @@ export const Card: React.FC<CardProps> = ({
borderColor={colors.border} borderColor={colors.border}
></Box> ></Box>
</Box> </Box>
{/* Content area */}
<Box <Box
borderStyle="round" borderStyle="round"
borderTop={false} borderTop={false}