diff --git a/src/cli/components/InputRich.tsx b/src/cli/components/InputRich.tsx index df49ff7..1a81b4f 100644 --- a/src/cli/components/InputRich.tsx +++ b/src/cli/components/InputRich.tsx @@ -211,6 +211,7 @@ const StreamingStatus = memo(function StreamingStatus({ agentName, interruptRequested, networkPhase, + terminalWidth, }: { streaming: boolean; visible: boolean; @@ -220,6 +221,7 @@ const StreamingStatus = memo(function StreamingStatus({ agentName: string | null | undefined; interruptRequested: boolean; networkPhase: "upload" | "download" | "error" | null; + terminalWidth: number; }) { const [shimmerOffset, setShimmerOffset] = useState(-3); const [elapsedMs, setElapsedMs] = useState(0); @@ -275,6 +277,24 @@ const StreamingStatus = memo(function StreamingStatus({ return "↑\u0338"; }, [networkPhase]); const showErrorArrow = networkArrow === "↑\u0338"; + const statusContentWidth = Math.max(0, terminalWidth - 2); + const minMessageWidth = 12; + const desiredHintWidth = Math.max(18, Math.floor(statusContentWidth * 0.34)); + const cappedHintWidth = Math.min(44, desiredHintWidth); + const hintColumnWidth = Math.max( + 0, + Math.min( + cappedHintWidth, + Math.max(0, statusContentWidth - minMessageWidth), + ), + ); + const maxMessageWidth = Math.max(0, statusContentWidth - hintColumnWidth); + const statusLabel = `${agentName ? `${agentName} ` : ""}${thinkingMessage}…`; + const statusLabelWidth = Array.from(statusLabel).length; + const messageColumnWidth = Math.max( + 0, + Math.min(maxMessageWidth, Math.max(minMessageWidth, statusLabelWidth)), + ); // Build the status hint text (esc to interrupt · 2m · 1.2k ↑) // Uses chalk.dim to match reasoning text styling @@ -321,13 +341,21 @@ const StreamingStatus = memo(function StreamingStatus({ - - - {statusHintText} + + + + + {hintColumnWidth > 0 && ( + + {statusHintText} + + )} + ); @@ -1002,6 +1030,7 @@ export function Input({ agentName={agentName} interruptRequested={interruptRequested} networkPhase={networkPhase} + terminalWidth={columns} /> {/* Queue display - show whenever there are queued messages */} diff --git a/src/cli/components/ShimmerText.tsx b/src/cli/components/ShimmerText.tsx index e1d1148..7a202f9 100644 --- a/src/cli/components/ShimmerText.tsx +++ b/src/cli/components/ShimmerText.tsx @@ -8,6 +8,12 @@ interface ShimmerTextProps { boldPrefix?: string; message: string; shimmerOffset: number; + wrap?: + | "wrap" + | "truncate" + | "truncate-start" + | "truncate-middle" + | "truncate-end"; } export const ShimmerText = memo(function ShimmerText({ @@ -15,6 +21,7 @@ export const ShimmerText = memo(function ShimmerText({ boldPrefix, message, shimmerOffset, + wrap, }: ShimmerTextProps) { const fullText = `${boldPrefix ? `${boldPrefix} ` : ""}${message}…`; const prefixLength = boldPrefix ? boldPrefix.length + 1 : 0; // +1 for space @@ -36,5 +43,5 @@ export const ShimmerText = memo(function ShimmerText({ }) .join(""); - return {shimmerText}; + return {shimmerText}; });