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

Fix bottom border rendering for search and add a regression test. (#20517)

Browse Source
This commit is contained in:
Jacob Richman
2026-02-26 20:55:21 -08:00
committed by GitHub
parent 83a3851dfd
commit 82336de7a4
9 changed files with 597 additions and 53 deletions
Download Patch File Download Diff File Expand all files Collapse all files

7
packages/cli/GEMINI.md
View File

@@ -15,4 +15,11 @@
- **Utilities**: Use `renderWithProviders` and `waitFor` from
`packages/cli/src/test-utils/`.
- **Snapshots**: Use `toMatchSnapshot()` to verify Ink output.
- **SVG Snapshots**: Use `await expect(renderResult).toMatchSvgSnapshot()` for
UI components whenever colors or detailed visual layout matter. SVG snapshots
capture styling accurately. Make sure to await the `waitUntilReady()` of the
render result before asserting. After updating SVG snapshots, always examine
the resulting `.svg` files (e.g. by reading their content or visually
inspecting them) to ensure the render and colors actually look as expected and
don't just contain an error message.
- **Mocks**: Use mocks as sparingly as possible.

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

@@ -547,6 +547,11 @@ const baseMockUiState = {
},
hintMode: false,
hintBuffer: '',
bannerData: {
defaultText: '',
warningText: '',
},
bannerVisible: false,
};
export const mockAppState: AppState = {

52
packages/cli/src/ui/utils/__snapshots__/InlineMarkdownRenderer.test.tsx.snap
View File

@@ -1,52 +0,0 @@
// Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
exports[`InlineMarkdownRenderer > RenderInline > handles nested/complex markdown gracefully (best effort) 1`] = `
"Bold *Italic
*"
`;
exports[`InlineMarkdownRenderer > RenderInline > renders bold text correctly 1`] = `
"Hello
World"
`;
exports[`InlineMarkdownRenderer > RenderInline > renders inline code correctly 1`] = `
"Hello
World"
`;
exports[`InlineMarkdownRenderer > RenderInline > renders italic text correctly 1`] = `
"Hello
World"
`;
exports[`InlineMarkdownRenderer > RenderInline > renders links correctly 1`] = `"Google (https://google.com)"`;
exports[`InlineMarkdownRenderer > RenderInline > renders mixed markdown correctly 1`] = `
"Bold
and
Italic
and
Code
and
Link (https://example.com)"
`;
exports[`InlineMarkdownRenderer > RenderInline > renders plain text correctly 1`] = `"Hello World"`;
exports[`InlineMarkdownRenderer > RenderInline > renders raw URLs correctly 1`] = `
"Visit
https://google.com"
`;
exports[`InlineMarkdownRenderer > RenderInline > renders strikethrough text correctly 1`] = `
"Hello
World"
`;
exports[`InlineMarkdownRenderer > RenderInline > renders underline correctly 1`] = `
"Hello
World"
`;
exports[`InlineMarkdownRenderer > RenderInline > respects defaultColor prop 1`] = `"Hello"`;

123
packages/cli/src/ui/utils/__snapshots__/borderStyles-MainContent-tool-group-border-SVG-snapshots-should-render-SVG-snapshot-for-a-pending-search-dialog-google_web_search-.snap.svg Normal file
View File

@@ -0,0 +1,123 @@
<svg xmlns="http://www.w3.org/2000/svg" width="920" height="275" viewBox="0 0 920 275">
<style>
text { font-family: Consolas, "Courier New", monospace; font-size: 14px; dominant-baseline: text-before-edge; white-space: pre; }
</style>
<rect width="920" height="275" fill="#000000" />
<g transform="translate(10, 10)">
<text x="9" y="19" fill="#4d93e2" textLength="9" lengthAdjust="spacingAndGlyphs">█</text>
<text x="18" y="19" fill="#5291e0" textLength="9" lengthAdjust="spacingAndGlyphs">█</text>
<text x="27" y="19" fill="#588ede" textLength="9" lengthAdjust="spacingAndGlyphs">█</text>
<text x="117" y="19" fill="#8f77c0" textLength="9" lengthAdjust="spacingAndGlyphs">█</text>
<text x="126" y="19" fill="#9575b8" textLength="9" lengthAdjust="spacingAndGlyphs">█</text>
<text x="135" y="19" fill="#9b73b1" textLength="9" lengthAdjust="spacingAndGlyphs">█</text>
<text x="144" y="19" fill="#a171aa" textLength="9" lengthAdjust="spacingAndGlyphs">█</text>
<text x="153" y="19" fill="#a670a3" textLength="9" lengthAdjust="spacingAndGlyphs">█</text>
<text x="162" y="19" fill="#ac6e9c" textLength="9" lengthAdjust="spacingAndGlyphs">█</text>
<text x="171" y="19" fill="#b26c95" textLength="9" lengthAdjust="spacingAndGlyphs">█</text>
<text x="180" y="19" fill="#b86a8d" textLength="9" lengthAdjust="spacingAndGlyphs">█</text>
<text x="189" y="19" fill="#bd6986" textLength="9" lengthAdjust="spacingAndGlyphs">█</text>
<text x="0" y="36" fill="#4796e4" textLength="9" lengthAdjust="spacingAndGlyphs">░</text>
<text x="9" y="36" fill="#4d93e2" textLength="9" lengthAdjust="spacingAndGlyphs">░</text>
<text x="18" y="36" fill="#5291e0" textLength="9" lengthAdjust="spacingAndGlyphs">░</text>
<text x="27" y="36" fill="#588ede" textLength="9" lengthAdjust="spacingAndGlyphs">█</text>
<text x="36" y="36" fill="#5d8cdc" textLength="9" lengthAdjust="spacingAndGlyphs">█</text>
<text x="45" y="36" fill="#6389da" textLength="9" lengthAdjust="spacingAndGlyphs">█</text>
<text x="108" y="36" fill="#8a78c7" textLength="9" lengthAdjust="spacingAndGlyphs">█</text>
<text x="117" y="36" fill="#8f77c0" textLength="9" lengthAdjust="spacingAndGlyphs">█</text>
<text x="126" y="36" fill="#9575b8" textLength="9" lengthAdjust="spacingAndGlyphs">█</text>
<text x="135" y="36" fill="#9b73b1" textLength="9" lengthAdjust="spacingAndGlyphs">░</text>
<text x="144" y="36" fill="#a171aa" textLength="9" lengthAdjust="spacingAndGlyphs">░</text>
<text x="153" y="36" fill="#a670a3" textLength="9" lengthAdjust="spacingAndGlyphs">░</text>
<text x="162" y="36" fill="#ac6e9c" textLength="9" lengthAdjust="spacingAndGlyphs">░</text>
<text x="171" y="36" fill="#b26c95" textLength="9" lengthAdjust="spacingAndGlyphs">░</text>
<text x="180" y="36" fill="#b86a8d" textLength="9" lengthAdjust="spacingAndGlyphs">█</text>
<text x="189" y="36" fill="#bd6986" textLength="9" lengthAdjust="spacingAndGlyphs">█</text>
<text x="198" y="36" fill="#c3677f" textLength="9" lengthAdjust="spacingAndGlyphs">█</text>
<text x="18" y="53" fill="#5291e0" textLength="9" lengthAdjust="spacingAndGlyphs">░</text>
<text x="27" y="53" fill="#588ede" textLength="9" lengthAdjust="spacingAndGlyphs">░</text>
<text x="36" y="53" fill="#5d8cdc" textLength="9" lengthAdjust="spacingAndGlyphs">░</text>
<text x="45" y="53" fill="#6389da" textLength="9" lengthAdjust="spacingAndGlyphs">█</text>
<text x="54" y="53" fill="#6887d8" textLength="9" lengthAdjust="spacingAndGlyphs">█</text>
<text x="63" y="53" fill="#6e84d6" textLength="9" lengthAdjust="spacingAndGlyphs">█</text>
<text x="99" y="53" fill="#847ace" textLength="9" lengthAdjust="spacingAndGlyphs">█</text>
<text x="108" y="53" fill="#8a78c7" textLength="9" lengthAdjust="spacingAndGlyphs">█</text>
<text x="117" y="53" fill="#8f77c0" textLength="9" lengthAdjust="spacingAndGlyphs">█</text>
<text x="171" y="53" fill="#b26c95" textLength="9" lengthAdjust="spacingAndGlyphs">░</text>
<text x="180" y="53" fill="#b86a8d" textLength="9" lengthAdjust="spacingAndGlyphs">░</text>
<text x="189" y="53" fill="#bd6986" textLength="9" lengthAdjust="spacingAndGlyphs">░</text>
<text x="36" y="70" fill="#5d8cdc" textLength="9" lengthAdjust="spacingAndGlyphs">░</text>
<text x="45" y="70" fill="#6389da" textLength="9" lengthAdjust="spacingAndGlyphs">░</text>
<text x="54" y="70" fill="#6887d8" textLength="9" lengthAdjust="spacingAndGlyphs">░</text>
<text x="63" y="70" fill="#6e84d6" textLength="9" lengthAdjust="spacingAndGlyphs">█</text>
<text x="72" y="70" fill="#7382d4" textLength="9" lengthAdjust="spacingAndGlyphs">█</text>
<text x="81" y="70" fill="#797fd2" textLength="9" lengthAdjust="spacingAndGlyphs">█</text>
<text x="90" y="70" fill="#7e7dd0" textLength="9" lengthAdjust="spacingAndGlyphs">░</text>
<text x="99" y="70" fill="#847ace" textLength="9" lengthAdjust="spacingAndGlyphs">█</text>
<text x="108" y="70" fill="#8a78c7" textLength="9" lengthAdjust="spacingAndGlyphs">█</text>
<text x="117" y="70" fill="#8f77c0" textLength="9" lengthAdjust="spacingAndGlyphs">█</text>
<text x="45" y="87" fill="#6389da" textLength="9" lengthAdjust="spacingAndGlyphs">█</text>
<text x="54" y="87" fill="#6887d8" textLength="9" lengthAdjust="spacingAndGlyphs">█</text>
<text x="63" y="87" fill="#6e84d6" textLength="9" lengthAdjust="spacingAndGlyphs">█</text>
<text x="72" y="87" fill="#7382d4" textLength="9" lengthAdjust="spacingAndGlyphs">░</text>
<text x="90" y="87" fill="#7e7dd0" textLength="9" lengthAdjust="spacingAndGlyphs">░</text>
<text x="99" y="87" fill="#847ace" textLength="9" lengthAdjust="spacingAndGlyphs">█</text>
<text x="108" y="87" fill="#8a78c7" textLength="9" lengthAdjust="spacingAndGlyphs">█</text>
<text x="117" y="87" fill="#8f77c0" textLength="9" lengthAdjust="spacingAndGlyphs">█</text>
<text x="162" y="87" fill="#ac6e9c" textLength="9" lengthAdjust="spacingAndGlyphs">█</text>
<text x="171" y="87" fill="#b26c95" textLength="9" lengthAdjust="spacingAndGlyphs">█</text>
<text x="180" y="87" fill="#b86a8d" textLength="9" lengthAdjust="spacingAndGlyphs">█</text>
<text x="189" y="87" fill="#bd6986" textLength="9" lengthAdjust="spacingAndGlyphs">█</text>
<text x="198" y="87" fill="#c3677f" textLength="9" lengthAdjust="spacingAndGlyphs">█</text>
<text x="27" y="104" fill="#588ede" textLength="9" lengthAdjust="spacingAndGlyphs">█</text>
<text x="36" y="104" fill="#5d8cdc" textLength="9" lengthAdjust="spacingAndGlyphs">█</text>
<text x="45" y="104" fill="#6389da" textLength="9" lengthAdjust="spacingAndGlyphs">█</text>
<text x="54" y="104" fill="#6887d8" textLength="9" lengthAdjust="spacingAndGlyphs">░</text>
<text x="90" y="104" fill="#7e7dd0" textLength="9" lengthAdjust="spacingAndGlyphs">░</text>
<text x="99" y="104" fill="#847ace" textLength="9" lengthAdjust="spacingAndGlyphs">░</text>
<text x="108" y="104" fill="#8a78c7" textLength="9" lengthAdjust="spacingAndGlyphs">█</text>
<text x="117" y="104" fill="#8f77c0" textLength="9" lengthAdjust="spacingAndGlyphs">█</text>
<text x="126" y="104" fill="#9575b8" textLength="9" lengthAdjust="spacingAndGlyphs">█</text>
<text x="153" y="104" fill="#a670a3" textLength="9" lengthAdjust="spacingAndGlyphs">░</text>
<text x="162" y="104" fill="#ac6e9c" textLength="9" lengthAdjust="spacingAndGlyphs">░</text>
<text x="171" y="104" fill="#b26c95" textLength="9" lengthAdjust="spacingAndGlyphs">█</text>
<text x="180" y="104" fill="#b86a8d" textLength="9" lengthAdjust="spacingAndGlyphs">█</text>
<text x="189" y="104" fill="#bd6986" textLength="9" lengthAdjust="spacingAndGlyphs">█</text>
<text x="9" y="121" fill="#4d93e2" textLength="9" lengthAdjust="spacingAndGlyphs">█</text>
<text x="18" y="121" fill="#5291e0" textLength="9" lengthAdjust="spacingAndGlyphs">█</text>
<text x="27" y="121" fill="#588ede" textLength="9" lengthAdjust="spacingAndGlyphs">█</text>
<text x="36" y="121" fill="#5d8cdc" textLength="9" lengthAdjust="spacingAndGlyphs">░</text>
<text x="99" y="121" fill="#847ace" textLength="9" lengthAdjust="spacingAndGlyphs">░</text>
<text x="108" y="121" fill="#8a78c7" textLength="9" lengthAdjust="spacingAndGlyphs">░</text>
<text x="117" y="121" fill="#8f77c0" textLength="9" lengthAdjust="spacingAndGlyphs">█</text>
<text x="126" y="121" fill="#9575b8" textLength="9" lengthAdjust="spacingAndGlyphs">█</text>
<text x="135" y="121" fill="#9b73b1" textLength="9" lengthAdjust="spacingAndGlyphs">█</text>
<text x="144" y="121" fill="#a171aa" textLength="9" lengthAdjust="spacingAndGlyphs">█</text>
<text x="153" y="121" fill="#a670a3" textLength="9" lengthAdjust="spacingAndGlyphs">█</text>
<text x="162" y="121" fill="#ac6e9c" textLength="9" lengthAdjust="spacingAndGlyphs">█</text>
<text x="171" y="121" fill="#b26c95" textLength="9" lengthAdjust="spacingAndGlyphs">█</text>
<text x="180" y="121" fill="#b86a8d" textLength="9" lengthAdjust="spacingAndGlyphs">█</text>
<text x="189" y="121" fill="#bd6986" textLength="9" lengthAdjust="spacingAndGlyphs">█</text>
<text x="0" y="138" fill="#4796e4" textLength="9" lengthAdjust="spacingAndGlyphs">░</text>
<text x="9" y="138" fill="#4d93e2" textLength="9" lengthAdjust="spacingAndGlyphs">░</text>
<text x="18" y="138" fill="#5291e0" textLength="9" lengthAdjust="spacingAndGlyphs">░</text>
<text x="108" y="138" fill="#8a78c7" textLength="9" lengthAdjust="spacingAndGlyphs">░</text>
<text x="117" y="138" fill="#8f77c0" textLength="9" lengthAdjust="spacingAndGlyphs">░</text>
<text x="126" y="138" fill="#9575b8" textLength="9" lengthAdjust="spacingAndGlyphs">░</text>
<text x="135" y="138" fill="#9b73b1" textLength="9" lengthAdjust="spacingAndGlyphs">░</text>
<text x="144" y="138" fill="#a171aa" textLength="9" lengthAdjust="spacingAndGlyphs">░</text>
<text x="153" y="138" fill="#a670a3" textLength="9" lengthAdjust="spacingAndGlyphs">░</text>
<text x="162" y="138" fill="#ac6e9c" textLength="9" lengthAdjust="spacingAndGlyphs">░</text>
<text x="171" y="138" fill="#b26c95" textLength="9" lengthAdjust="spacingAndGlyphs">░</text>
<text x="180" y="138" fill="#b86a8d" textLength="9" lengthAdjust="spacingAndGlyphs">░</text>
<text x="0" y="172" fill="#f9e2af" textLength="864" lengthAdjust="spacingAndGlyphs">╭──────────────────────────────────────────────────────────────────────────────────────────────╮</text>
<text x="0" y="189" fill="#f9e2af" textLength="9" lengthAdjust="spacingAndGlyphs">│</text>
<text x="9" y="189" fill="#ffffff" textLength="846" lengthAdjust="spacingAndGlyphs"> ⊷ google_web_search </text>
<text x="855" y="189" fill="#f9e2af" textLength="9" lengthAdjust="spacingAndGlyphs">│</text>
<text x="0" y="206" fill="#f9e2af" textLength="9" lengthAdjust="spacingAndGlyphs">│</text>
<text x="855" y="206" fill="#f9e2af" textLength="9" lengthAdjust="spacingAndGlyphs">│</text>
<text x="0" y="223" fill="#f9e2af" textLength="9" lengthAdjust="spacingAndGlyphs">│</text>
<text x="9" y="223" fill="#ffffff" textLength="846" lengthAdjust="spacingAndGlyphs"> Searching... </text>
<text x="855" y="223" fill="#f9e2af" textLength="9" lengthAdjust="spacingAndGlyphs">│</text>
<text x="0" y="240" fill="#f9e2af" textLength="864" lengthAdjust="spacingAndGlyphs">╰──────────────────────────────────────────────────────────────────────────────────────────────╯</text>
</g>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 12 KiB

123
packages/cli/src/ui/utils/__snapshots__/borderStyles-MainContent-tool-group-border-SVG-snapshots-should-render-SVG-snapshot-for-a-shell-tool.snap.svg Normal file
View File

@@ -0,0 +1,123 @@
<svg xmlns="http://www.w3.org/2000/svg" width="920" height="275" viewBox="0 0 920 275">
<style>
text { font-family: Consolas, "Courier New", monospace; font-size: 14px; dominant-baseline: text-before-edge; white-space: pre; }
</style>
<rect width="920" height="275" fill="#000000" />
<g transform="translate(10, 10)">
<text x="9" y="19" fill="#4d93e2" textLength="9" lengthAdjust="spacingAndGlyphs">█</text>
<text x="18" y="19" fill="#5291e0" textLength="9" lengthAdjust="spacingAndGlyphs">█</text>
<text x="27" y="19" fill="#588ede" textLength="9" lengthAdjust="spacingAndGlyphs">█</text>
<text x="117" y="19" fill="#8f77c0" textLength="9" lengthAdjust="spacingAndGlyphs">█</text>
<text x="126" y="19" fill="#9575b8" textLength="9" lengthAdjust="spacingAndGlyphs">█</text>
<text x="135" y="19" fill="#9b73b1" textLength="9" lengthAdjust="spacingAndGlyphs">█</text>
<text x="144" y="19" fill="#a171aa" textLength="9" lengthAdjust="spacingAndGlyphs">█</text>
<text x="153" y="19" fill="#a670a3" textLength="9" lengthAdjust="spacingAndGlyphs">█</text>
<text x="162" y="19" fill="#ac6e9c" textLength="9" lengthAdjust="spacingAndGlyphs">█</text>
<text x="171" y="19" fill="#b26c95" textLength="9" lengthAdjust="spacingAndGlyphs">█</text>
<text x="180" y="19" fill="#b86a8d" textLength="9" lengthAdjust="spacingAndGlyphs">█</text>
<text x="189" y="19" fill="#bd6986" textLength="9" lengthAdjust="spacingAndGlyphs">█</text>
<text x="0" y="36" fill="#4796e4" textLength="9" lengthAdjust="spacingAndGlyphs">░</text>
<text x="9" y="36" fill="#4d93e2" textLength="9" lengthAdjust="spacingAndGlyphs">░</text>
<text x="18" y="36" fill="#5291e0" textLength="9" lengthAdjust="spacingAndGlyphs">░</text>
<text x="27" y="36" fill="#588ede" textLength="9" lengthAdjust="spacingAndGlyphs">█</text>
<text x="36" y="36" fill="#5d8cdc" textLength="9" lengthAdjust="spacingAndGlyphs">█</text>
<text x="45" y="36" fill="#6389da" textLength="9" lengthAdjust="spacingAndGlyphs">█</text>
<text x="108" y="36" fill="#8a78c7" textLength="9" lengthAdjust="spacingAndGlyphs">█</text>
<text x="117" y="36" fill="#8f77c0" textLength="9" lengthAdjust="spacingAndGlyphs">█</text>
<text x="126" y="36" fill="#9575b8" textLength="9" lengthAdjust="spacingAndGlyphs">█</text>
<text x="135" y="36" fill="#9b73b1" textLength="9" lengthAdjust="spacingAndGlyphs">░</text>
<text x="144" y="36" fill="#a171aa" textLength="9" lengthAdjust="spacingAndGlyphs">░</text>
<text x="153" y="36" fill="#a670a3" textLength="9" lengthAdjust="spacingAndGlyphs">░</text>
<text x="162" y="36" fill="#ac6e9c" textLength="9" lengthAdjust="spacingAndGlyphs">░</text>
<text x="171" y="36" fill="#b26c95" textLength="9" lengthAdjust="spacingAndGlyphs">░</text>
<text x="180" y="36" fill="#b86a8d" textLength="9" lengthAdjust="spacingAndGlyphs">█</text>
<text x="189" y="36" fill="#bd6986" textLength="9" lengthAdjust="spacingAndGlyphs">█</text>
<text x="198" y="36" fill="#c3677f" textLength="9" lengthAdjust="spacingAndGlyphs">█</text>
<text x="18" y="53" fill="#5291e0" textLength="9" lengthAdjust="spacingAndGlyphs">░</text>
<text x="27" y="53" fill="#588ede" textLength="9" lengthAdjust="spacingAndGlyphs">░</text>
<text x="36" y="53" fill="#5d8cdc" textLength="9" lengthAdjust="spacingAndGlyphs">░</text>
<text x="45" y="53" fill="#6389da" textLength="9" lengthAdjust="spacingAndGlyphs">█</text>
<text x="54" y="53" fill="#6887d8" textLength="9" lengthAdjust="spacingAndGlyphs">█</text>
<text x="63" y="53" fill="#6e84d6" textLength="9" lengthAdjust="spacingAndGlyphs">█</text>
<text x="99" y="53" fill="#847ace" textLength="9" lengthAdjust="spacingAndGlyphs">█</text>
<text x="108" y="53" fill="#8a78c7" textLength="9" lengthAdjust="spacingAndGlyphs">█</text>
<text x="117" y="53" fill="#8f77c0" textLength="9" lengthAdjust="spacingAndGlyphs">█</text>
<text x="171" y="53" fill="#b26c95" textLength="9" lengthAdjust="spacingAndGlyphs">░</text>
<text x="180" y="53" fill="#b86a8d" textLength="9" lengthAdjust="spacingAndGlyphs">░</text>
<text x="189" y="53" fill="#bd6986" textLength="9" lengthAdjust="spacingAndGlyphs">░</text>
<text x="36" y="70" fill="#5d8cdc" textLength="9" lengthAdjust="spacingAndGlyphs">░</text>
<text x="45" y="70" fill="#6389da" textLength="9" lengthAdjust="spacingAndGlyphs">░</text>
<text x="54" y="70" fill="#6887d8" textLength="9" lengthAdjust="spacingAndGlyphs">░</text>
<text x="63" y="70" fill="#6e84d6" textLength="9" lengthAdjust="spacingAndGlyphs">█</text>
<text x="72" y="70" fill="#7382d4" textLength="9" lengthAdjust="spacingAndGlyphs">█</text>
<text x="81" y="70" fill="#797fd2" textLength="9" lengthAdjust="spacingAndGlyphs">█</text>
<text x="90" y="70" fill="#7e7dd0" textLength="9" lengthAdjust="spacingAndGlyphs">░</text>
<text x="99" y="70" fill="#847ace" textLength="9" lengthAdjust="spacingAndGlyphs">█</text>
<text x="108" y="70" fill="#8a78c7" textLength="9" lengthAdjust="spacingAndGlyphs">█</text>
<text x="117" y="70" fill="#8f77c0" textLength="9" lengthAdjust="spacingAndGlyphs">█</text>
<text x="45" y="87" fill="#6389da" textLength="9" lengthAdjust="spacingAndGlyphs">█</text>
<text x="54" y="87" fill="#6887d8" textLength="9" lengthAdjust="spacingAndGlyphs">█</text>
<text x="63" y="87" fill="#6e84d6" textLength="9" lengthAdjust="spacingAndGlyphs">█</text>
<text x="72" y="87" fill="#7382d4" textLength="9" lengthAdjust="spacingAndGlyphs">░</text>
<text x="90" y="87" fill="#7e7dd0" textLength="9" lengthAdjust="spacingAndGlyphs">░</text>
<text x="99" y="87" fill="#847ace" textLength="9" lengthAdjust="spacingAndGlyphs">█</text>
<text x="108" y="87" fill="#8a78c7" textLength="9" lengthAdjust="spacingAndGlyphs">█</text>
<text x="117" y="87" fill="#8f77c0" textLength="9" lengthAdjust="spacingAndGlyphs">█</text>
<text x="162" y="87" fill="#ac6e9c" textLength="9" lengthAdjust="spacingAndGlyphs">█</text>
<text x="171" y="87" fill="#b26c95" textLength="9" lengthAdjust="spacingAndGlyphs">█</text>
<text x="180" y="87" fill="#b86a8d" textLength="9" lengthAdjust="spacingAndGlyphs">█</text>
<text x="189" y="87" fill="#bd6986" textLength="9" lengthAdjust="spacingAndGlyphs">█</text>
<text x="198" y="87" fill="#c3677f" textLength="9" lengthAdjust="spacingAndGlyphs">█</text>
<text x="27" y="104" fill="#588ede" textLength="9" lengthAdjust="spacingAndGlyphs">█</text>
<text x="36" y="104" fill="#5d8cdc" textLength="9" lengthAdjust="spacingAndGlyphs">█</text>
<text x="45" y="104" fill="#6389da" textLength="9" lengthAdjust="spacingAndGlyphs">█</text>
<text x="54" y="104" fill="#6887d8" textLength="9" lengthAdjust="spacingAndGlyphs">░</text>
<text x="90" y="104" fill="#7e7dd0" textLength="9" lengthAdjust="spacingAndGlyphs">░</text>
<text x="99" y="104" fill="#847ace" textLength="9" lengthAdjust="spacingAndGlyphs">░</text>
<text x="108" y="104" fill="#8a78c7" textLength="9" lengthAdjust="spacingAndGlyphs">█</text>
<text x="117" y="104" fill="#8f77c0" textLength="9" lengthAdjust="spacingAndGlyphs">█</text>
<text x="126" y="104" fill="#9575b8" textLength="9" lengthAdjust="spacingAndGlyphs">█</text>
<text x="153" y="104" fill="#a670a3" textLength="9" lengthAdjust="spacingAndGlyphs">░</text>
<text x="162" y="104" fill="#ac6e9c" textLength="9" lengthAdjust="spacingAndGlyphs">░</text>
<text x="171" y="104" fill="#b26c95" textLength="9" lengthAdjust="spacingAndGlyphs">█</text>
<text x="180" y="104" fill="#b86a8d" textLength="9" lengthAdjust="spacingAndGlyphs">█</text>
<text x="189" y="104" fill="#bd6986" textLength="9" lengthAdjust="spacingAndGlyphs">█</text>
<text x="9" y="121" fill="#4d93e2" textLength="9" lengthAdjust="spacingAndGlyphs">█</text>
<text x="18" y="121" fill="#5291e0" textLength="9" lengthAdjust="spacingAndGlyphs">█</text>
<text x="27" y="121" fill="#588ede" textLength="9" lengthAdjust="spacingAndGlyphs">█</text>
<text x="36" y="121" fill="#5d8cdc" textLength="9" lengthAdjust="spacingAndGlyphs">░</text>
<text x="99" y="121" fill="#847ace" textLength="9" lengthAdjust="spacingAndGlyphs">░</text>
<text x="108" y="121" fill="#8a78c7" textLength="9" lengthAdjust="spacingAndGlyphs">░</text>
<text x="117" y="121" fill="#8f77c0" textLength="9" lengthAdjust="spacingAndGlyphs">█</text>
<text x="126" y="121" fill="#9575b8" textLength="9" lengthAdjust="spacingAndGlyphs">█</text>
<text x="135" y="121" fill="#9b73b1" textLength="9" lengthAdjust="spacingAndGlyphs">█</text>
<text x="144" y="121" fill="#a171aa" textLength="9" lengthAdjust="spacingAndGlyphs">█</text>
<text x="153" y="121" fill="#a670a3" textLength="9" lengthAdjust="spacingAndGlyphs">█</text>
<text x="162" y="121" fill="#ac6e9c" textLength="9" lengthAdjust="spacingAndGlyphs">█</text>
<text x="171" y="121" fill="#b26c95" textLength="9" lengthAdjust="spacingAndGlyphs">█</text>
<text x="180" y="121" fill="#b86a8d" textLength="9" lengthAdjust="spacingAndGlyphs">█</text>
<text x="189" y="121" fill="#bd6986" textLength="9" lengthAdjust="spacingAndGlyphs">█</text>
<text x="0" y="138" fill="#4796e4" textLength="9" lengthAdjust="spacingAndGlyphs">░</text>
<text x="9" y="138" fill="#4d93e2" textLength="9" lengthAdjust="spacingAndGlyphs">░</text>
<text x="18" y="138" fill="#5291e0" textLength="9" lengthAdjust="spacingAndGlyphs">░</text>
<text x="108" y="138" fill="#8a78c7" textLength="9" lengthAdjust="spacingAndGlyphs">░</text>
<text x="117" y="138" fill="#8f77c0" textLength="9" lengthAdjust="spacingAndGlyphs">░</text>
<text x="126" y="138" fill="#9575b8" textLength="9" lengthAdjust="spacingAndGlyphs">░</text>
<text x="135" y="138" fill="#9b73b1" textLength="9" lengthAdjust="spacingAndGlyphs">░</text>
<text x="144" y="138" fill="#a171aa" textLength="9" lengthAdjust="spacingAndGlyphs">░</text>
<text x="153" y="138" fill="#a670a3" textLength="9" lengthAdjust="spacingAndGlyphs">░</text>
<text x="162" y="138" fill="#ac6e9c" textLength="9" lengthAdjust="spacingAndGlyphs">░</text>
<text x="171" y="138" fill="#b26c95" textLength="9" lengthAdjust="spacingAndGlyphs">░</text>
<text x="180" y="138" fill="#b86a8d" textLength="9" lengthAdjust="spacingAndGlyphs">░</text>
<text x="0" y="172" fill="#6c7086" textLength="864" lengthAdjust="spacingAndGlyphs">╭──────────────────────────────────────────────────────────────────────────────────────────────╮</text>
<text x="0" y="189" fill="#6c7086" textLength="9" lengthAdjust="spacingAndGlyphs">│</text>
<text x="9" y="189" fill="#ffffff" textLength="846" lengthAdjust="spacingAndGlyphs"> ⊷ run_shell_command </text>
<text x="855" y="189" fill="#6c7086" textLength="9" lengthAdjust="spacingAndGlyphs">│</text>
<text x="0" y="206" fill="#6c7086" textLength="9" lengthAdjust="spacingAndGlyphs">│</text>
<text x="855" y="206" fill="#6c7086" textLength="9" lengthAdjust="spacingAndGlyphs">│</text>
<text x="0" y="223" fill="#6c7086" textLength="9" lengthAdjust="spacingAndGlyphs">│</text>
<text x="9" y="223" fill="#ffffff" textLength="846" lengthAdjust="spacingAndGlyphs"> Running command... </text>
<text x="855" y="223" fill="#6c7086" textLength="9" lengthAdjust="spacingAndGlyphs">│</text>
<text x="0" y="240" fill="#6c7086" textLength="864" lengthAdjust="spacingAndGlyphs">╰──────────────────────────────────────────────────────────────────────────────────────────────╯</text>
</g>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 12 KiB

123
packages/cli/src/ui/utils/__snapshots__/borderStyles-MainContent-tool-group-border-SVG-snapshots-should-render-SVG-snapshot-for-an-empty-slice-following-a-search-tool.snap.svg Normal file
View File

@@ -0,0 +1,123 @@
<svg xmlns="http://www.w3.org/2000/svg" width="920" height="275" viewBox="0 0 920 275">
<style>
text { font-family: Consolas, "Courier New", monospace; font-size: 14px; dominant-baseline: text-before-edge; white-space: pre; }
</style>
<rect width="920" height="275" fill="#000000" />
<g transform="translate(10, 10)">
<text x="9" y="19" fill="#4d93e2" textLength="9" lengthAdjust="spacingAndGlyphs">█</text>
<text x="18" y="19" fill="#5291e0" textLength="9" lengthAdjust="spacingAndGlyphs">█</text>
<text x="27" y="19" fill="#588ede" textLength="9" lengthAdjust="spacingAndGlyphs">█</text>
<text x="117" y="19" fill="#8f77c0" textLength="9" lengthAdjust="spacingAndGlyphs">█</text>
<text x="126" y="19" fill="#9575b8" textLength="9" lengthAdjust="spacingAndGlyphs">█</text>
<text x="135" y="19" fill="#9b73b1" textLength="9" lengthAdjust="spacingAndGlyphs">█</text>
<text x="144" y="19" fill="#a171aa" textLength="9" lengthAdjust="spacingAndGlyphs">█</text>
<text x="153" y="19" fill="#a670a3" textLength="9" lengthAdjust="spacingAndGlyphs">█</text>
<text x="162" y="19" fill="#ac6e9c" textLength="9" lengthAdjust="spacingAndGlyphs">█</text>
<text x="171" y="19" fill="#b26c95" textLength="9" lengthAdjust="spacingAndGlyphs">█</text>
<text x="180" y="19" fill="#b86a8d" textLength="9" lengthAdjust="spacingAndGlyphs">█</text>
<text x="189" y="19" fill="#bd6986" textLength="9" lengthAdjust="spacingAndGlyphs">█</text>
<text x="0" y="36" fill="#4796e4" textLength="9" lengthAdjust="spacingAndGlyphs">░</text>
<text x="9" y="36" fill="#4d93e2" textLength="9" lengthAdjust="spacingAndGlyphs">░</text>
<text x="18" y="36" fill="#5291e0" textLength="9" lengthAdjust="spacingAndGlyphs">░</text>
<text x="27" y="36" fill="#588ede" textLength="9" lengthAdjust="spacingAndGlyphs">█</text>
<text x="36" y="36" fill="#5d8cdc" textLength="9" lengthAdjust="spacingAndGlyphs">█</text>
<text x="45" y="36" fill="#6389da" textLength="9" lengthAdjust="spacingAndGlyphs">█</text>
<text x="108" y="36" fill="#8a78c7" textLength="9" lengthAdjust="spacingAndGlyphs">█</text>
<text x="117" y="36" fill="#8f77c0" textLength="9" lengthAdjust="spacingAndGlyphs">█</text>
<text x="126" y="36" fill="#9575b8" textLength="9" lengthAdjust="spacingAndGlyphs">█</text>
<text x="135" y="36" fill="#9b73b1" textLength="9" lengthAdjust="spacingAndGlyphs">░</text>
<text x="144" y="36" fill="#a171aa" textLength="9" lengthAdjust="spacingAndGlyphs">░</text>
<text x="153" y="36" fill="#a670a3" textLength="9" lengthAdjust="spacingAndGlyphs">░</text>
<text x="162" y="36" fill="#ac6e9c" textLength="9" lengthAdjust="spacingAndGlyphs">░</text>
<text x="171" y="36" fill="#b26c95" textLength="9" lengthAdjust="spacingAndGlyphs">░</text>
<text x="180" y="36" fill="#b86a8d" textLength="9" lengthAdjust="spacingAndGlyphs">█</text>
<text x="189" y="36" fill="#bd6986" textLength="9" lengthAdjust="spacingAndGlyphs">█</text>
<text x="198" y="36" fill="#c3677f" textLength="9" lengthAdjust="spacingAndGlyphs">█</text>
<text x="18" y="53" fill="#5291e0" textLength="9" lengthAdjust="spacingAndGlyphs">░</text>
<text x="27" y="53" fill="#588ede" textLength="9" lengthAdjust="spacingAndGlyphs">░</text>
<text x="36" y="53" fill="#5d8cdc" textLength="9" lengthAdjust="spacingAndGlyphs">░</text>
<text x="45" y="53" fill="#6389da" textLength="9" lengthAdjust="spacingAndGlyphs">█</text>
<text x="54" y="53" fill="#6887d8" textLength="9" lengthAdjust="spacingAndGlyphs">█</text>
<text x="63" y="53" fill="#6e84d6" textLength="9" lengthAdjust="spacingAndGlyphs">█</text>
<text x="99" y="53" fill="#847ace" textLength="9" lengthAdjust="spacingAndGlyphs">█</text>
<text x="108" y="53" fill="#8a78c7" textLength="9" lengthAdjust="spacingAndGlyphs">█</text>
<text x="117" y="53" fill="#8f77c0" textLength="9" lengthAdjust="spacingAndGlyphs">█</text>
<text x="171" y="53" fill="#b26c95" textLength="9" lengthAdjust="spacingAndGlyphs">░</text>
<text x="180" y="53" fill="#b86a8d" textLength="9" lengthAdjust="spacingAndGlyphs">░</text>
<text x="189" y="53" fill="#bd6986" textLength="9" lengthAdjust="spacingAndGlyphs">░</text>
<text x="36" y="70" fill="#5d8cdc" textLength="9" lengthAdjust="spacingAndGlyphs">░</text>
<text x="45" y="70" fill="#6389da" textLength="9" lengthAdjust="spacingAndGlyphs">░</text>
<text x="54" y="70" fill="#6887d8" textLength="9" lengthAdjust="spacingAndGlyphs">░</text>
<text x="63" y="70" fill="#6e84d6" textLength="9" lengthAdjust="spacingAndGlyphs">█</text>
<text x="72" y="70" fill="#7382d4" textLength="9" lengthAdjust="spacingAndGlyphs">█</text>
<text x="81" y="70" fill="#797fd2" textLength="9" lengthAdjust="spacingAndGlyphs">█</text>
<text x="90" y="70" fill="#7e7dd0" textLength="9" lengthAdjust="spacingAndGlyphs">░</text>
<text x="99" y="70" fill="#847ace" textLength="9" lengthAdjust="spacingAndGlyphs">█</text>
<text x="108" y="70" fill="#8a78c7" textLength="9" lengthAdjust="spacingAndGlyphs">█</text>
<text x="117" y="70" fill="#8f77c0" textLength="9" lengthAdjust="spacingAndGlyphs">█</text>
<text x="45" y="87" fill="#6389da" textLength="9" lengthAdjust="spacingAndGlyphs">█</text>
<text x="54" y="87" fill="#6887d8" textLength="9" lengthAdjust="spacingAndGlyphs">█</text>
<text x="63" y="87" fill="#6e84d6" textLength="9" lengthAdjust="spacingAndGlyphs">█</text>
<text x="72" y="87" fill="#7382d4" textLength="9" lengthAdjust="spacingAndGlyphs">░</text>
<text x="90" y="87" fill="#7e7dd0" textLength="9" lengthAdjust="spacingAndGlyphs">░</text>
<text x="99" y="87" fill="#847ace" textLength="9" lengthAdjust="spacingAndGlyphs">█</text>
<text x="108" y="87" fill="#8a78c7" textLength="9" lengthAdjust="spacingAndGlyphs">█</text>
<text x="117" y="87" fill="#8f77c0" textLength="9" lengthAdjust="spacingAndGlyphs">█</text>
<text x="162" y="87" fill="#ac6e9c" textLength="9" lengthAdjust="spacingAndGlyphs">█</text>
<text x="171" y="87" fill="#b26c95" textLength="9" lengthAdjust="spacingAndGlyphs">█</text>
<text x="180" y="87" fill="#b86a8d" textLength="9" lengthAdjust="spacingAndGlyphs">█</text>
<text x="189" y="87" fill="#bd6986" textLength="9" lengthAdjust="spacingAndGlyphs">█</text>
<text x="198" y="87" fill="#c3677f" textLength="9" lengthAdjust="spacingAndGlyphs">█</text>
<text x="27" y="104" fill="#588ede" textLength="9" lengthAdjust="spacingAndGlyphs">█</text>
<text x="36" y="104" fill="#5d8cdc" textLength="9" lengthAdjust="spacingAndGlyphs">█</text>
<text x="45" y="104" fill="#6389da" textLength="9" lengthAdjust="spacingAndGlyphs">█</text>
<text x="54" y="104" fill="#6887d8" textLength="9" lengthAdjust="spacingAndGlyphs">░</text>
<text x="90" y="104" fill="#7e7dd0" textLength="9" lengthAdjust="spacingAndGlyphs">░</text>
<text x="99" y="104" fill="#847ace" textLength="9" lengthAdjust="spacingAndGlyphs">░</text>
<text x="108" y="104" fill="#8a78c7" textLength="9" lengthAdjust="spacingAndGlyphs">█</text>
<text x="117" y="104" fill="#8f77c0" textLength="9" lengthAdjust="spacingAndGlyphs">█</text>
<text x="126" y="104" fill="#9575b8" textLength="9" lengthAdjust="spacingAndGlyphs">█</text>
<text x="153" y="104" fill="#a670a3" textLength="9" lengthAdjust="spacingAndGlyphs">░</text>
<text x="162" y="104" fill="#ac6e9c" textLength="9" lengthAdjust="spacingAndGlyphs">░</text>
<text x="171" y="104" fill="#b26c95" textLength="9" lengthAdjust="spacingAndGlyphs">█</text>
<text x="180" y="104" fill="#b86a8d" textLength="9" lengthAdjust="spacingAndGlyphs">█</text>
<text x="189" y="104" fill="#bd6986" textLength="9" lengthAdjust="spacingAndGlyphs">█</text>
<text x="9" y="121" fill="#4d93e2" textLength="9" lengthAdjust="spacingAndGlyphs">█</text>
<text x="18" y="121" fill="#5291e0" textLength="9" lengthAdjust="spacingAndGlyphs">█</text>
<text x="27" y="121" fill="#588ede" textLength="9" lengthAdjust="spacingAndGlyphs">█</text>
<text x="36" y="121" fill="#5d8cdc" textLength="9" lengthAdjust="spacingAndGlyphs">░</text>
<text x="99" y="121" fill="#847ace" textLength="9" lengthAdjust="spacingAndGlyphs">░</text>
<text x="108" y="121" fill="#8a78c7" textLength="9" lengthAdjust="spacingAndGlyphs">░</text>
<text x="117" y="121" fill="#8f77c0" textLength="9" lengthAdjust="spacingAndGlyphs">█</text>
<text x="126" y="121" fill="#9575b8" textLength="9" lengthAdjust="spacingAndGlyphs">█</text>
<text x="135" y="121" fill="#9b73b1" textLength="9" lengthAdjust="spacingAndGlyphs">█</text>
<text x="144" y="121" fill="#a171aa" textLength="9" lengthAdjust="spacingAndGlyphs">█</text>
<text x="153" y="121" fill="#a670a3" textLength="9" lengthAdjust="spacingAndGlyphs">█</text>
<text x="162" y="121" fill="#ac6e9c" textLength="9" lengthAdjust="spacingAndGlyphs">█</text>
<text x="171" y="121" fill="#b26c95" textLength="9" lengthAdjust="spacingAndGlyphs">█</text>
<text x="180" y="121" fill="#b86a8d" textLength="9" lengthAdjust="spacingAndGlyphs">█</text>
<text x="189" y="121" fill="#bd6986" textLength="9" lengthAdjust="spacingAndGlyphs">█</text>
<text x="0" y="138" fill="#4796e4" textLength="9" lengthAdjust="spacingAndGlyphs">░</text>
<text x="9" y="138" fill="#4d93e2" textLength="9" lengthAdjust="spacingAndGlyphs">░</text>
<text x="18" y="138" fill="#5291e0" textLength="9" lengthAdjust="spacingAndGlyphs">░</text>
<text x="108" y="138" fill="#8a78c7" textLength="9" lengthAdjust="spacingAndGlyphs">░</text>
<text x="117" y="138" fill="#8f77c0" textLength="9" lengthAdjust="spacingAndGlyphs">░</text>
<text x="126" y="138" fill="#9575b8" textLength="9" lengthAdjust="spacingAndGlyphs">░</text>
<text x="135" y="138" fill="#9b73b1" textLength="9" lengthAdjust="spacingAndGlyphs">░</text>
<text x="144" y="138" fill="#a171aa" textLength="9" lengthAdjust="spacingAndGlyphs">░</text>
<text x="153" y="138" fill="#a670a3" textLength="9" lengthAdjust="spacingAndGlyphs">░</text>
<text x="162" y="138" fill="#ac6e9c" textLength="9" lengthAdjust="spacingAndGlyphs">░</text>
<text x="171" y="138" fill="#b26c95" textLength="9" lengthAdjust="spacingAndGlyphs">░</text>
<text x="180" y="138" fill="#b86a8d" textLength="9" lengthAdjust="spacingAndGlyphs">░</text>
<text x="0" y="172" fill="#f9e2af" textLength="864" lengthAdjust="spacingAndGlyphs">╭──────────────────────────────────────────────────────────────────────────────────────────────╮</text>
<text x="0" y="189" fill="#f9e2af" textLength="9" lengthAdjust="spacingAndGlyphs">│</text>
<text x="9" y="189" fill="#ffffff" textLength="846" lengthAdjust="spacingAndGlyphs"> ⊷ google_web_search </text>
<text x="855" y="189" fill="#f9e2af" textLength="9" lengthAdjust="spacingAndGlyphs">│</text>
<text x="0" y="206" fill="#f9e2af" textLength="9" lengthAdjust="spacingAndGlyphs">│</text>
<text x="855" y="206" fill="#f9e2af" textLength="9" lengthAdjust="spacingAndGlyphs">│</text>
<text x="0" y="223" fill="#f9e2af" textLength="9" lengthAdjust="spacingAndGlyphs">│</text>
<text x="9" y="223" fill="#ffffff" textLength="846" lengthAdjust="spacingAndGlyphs"> Searching... </text>
<text x="855" y="223" fill="#f9e2af" textLength="9" lengthAdjust="spacingAndGlyphs">│</text>
<text x="0" y="240" fill="#f9e2af" textLength="864" lengthAdjust="spacingAndGlyphs">╰──────────────────────────────────────────────────────────────────────────────────────────────╯</text>
</g>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 12 KiB

55
packages/cli/src/ui/utils/__snapshots__/borderStyles.test.tsx.snap Normal file
View File

@@ -0,0 +1,55 @@
// Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
exports[`MainContent tool group border SVG snapshots > should render SVG snapshot for a pending search dialog (google_web_search) 1`] = `
"
███ █████████
░░░███ ███░░░░░███
░░░███ ███ ░░░
░░░███░███
███░ ░███ █████
███░ ░░███ ░░███
███░ ░░█████████
░░░ ░░░░░░░░░
╭──────────────────────────────────────────────────────────────────────────────────────────────╮
│ ⊷ google_web_search │
│ │
│ Searching... │
╰──────────────────────────────────────────────────────────────────────────────────────────────╯"
`;
exports[`MainContent tool group border SVG snapshots > should render SVG snapshot for a shell tool 1`] = `
"
███ █████████
░░░███ ███░░░░░███
░░░███ ███ ░░░
░░░███░███
███░ ░███ █████
███░ ░░███ ░░███
███░ ░░█████████
░░░ ░░░░░░░░░
╭──────────────────────────────────────────────────────────────────────────────────────────────╮
│ ⊷ run_shell_command │
│ │
│ Running command... │
╰──────────────────────────────────────────────────────────────────────────────────────────────╯"
`;
exports[`MainContent tool group border SVG snapshots > should render SVG snapshot for an empty slice following a search tool 1`] = `
"
███ █████████
░░░███ ███░░░░░███
░░░███ ███ ░░░
░░░███░███
███░ ░███ █████
███░ ░░███ ░░███
███░ ░░█████████
░░░ ░░░░░░░░░
╭──────────────────────────────────────────────────────────────────────────────────────────────╮
│ ⊷ google_web_search │
│ │
│ Searching... │
╰──────────────────────────────────────────────────────────────────────────────────────────────╯"
`;

157
packages/cli/src/ui/utils/borderStyles.test.tsx Normal file
View File

@@ -0,0 +1,157 @@
/**
* @license
* Copyright 2026 Google LLC
* SPDX-License-Identifier: Apache-2.0
*/
import { describe, expect, it } from 'vitest';
import { getToolGroupBorderAppearance } from './borderStyles.js';
import { CoreToolCallStatus } from '@google/gemini-cli-core';
import { theme } from '../semantic-colors.js';
import type { IndividualToolCallDisplay } from '../types.js';
import { renderWithProviders } from '../../test-utils/render.js';
import { MainContent } from '../components/MainContent.js';
describe('getToolGroupBorderAppearance', () => {
it('should use warning color for pending non-shell tools', () => {
const item = {
type: 'tool_group' as const,
tools: [
{
name: 'google_web_search',
status: CoreToolCallStatus.Executing,
resultDisplay: '',
callId: 'call-1',
},
] as IndividualToolCallDisplay[],
};
const appearance = getToolGroupBorderAppearance(item, undefined, false, []);
expect(appearance.borderColor).toBe(theme.status.warning);
expect(appearance.borderDimColor).toBe(true);
});
it('should use correct color for empty slice by looking at pending items', () => {
const pendingItem = {
type: 'tool_group' as const,
tools: [
{
name: 'google_web_search',
status: CoreToolCallStatus.Executing,
resultDisplay: '',
callId: 'call-1',
},
] as IndividualToolCallDisplay[],
};
const sliceItem = {
type: 'tool_group' as const,
tools: [] as IndividualToolCallDisplay[],
};
const allPendingItems = [pendingItem, sliceItem];
const appearance = getToolGroupBorderAppearance(
sliceItem,
undefined,
false,
allPendingItems,
);
// It should match the pendingItem appearance
expect(appearance.borderColor).toBe(theme.status.warning);
expect(appearance.borderDimColor).toBe(true);
});
it('should use symbol color for shell tools', () => {
const item = {
type: 'tool_group' as const,
tools: [
{
name: 'run_shell_command',
status: CoreToolCallStatus.Executing,
resultDisplay: '',
callId: 'call-1',
},
] as IndividualToolCallDisplay[],
};
const appearance = getToolGroupBorderAppearance(item, undefined, false, []);
expect(appearance.borderColor).toBe(theme.ui.symbol);
expect(appearance.borderDimColor).toBe(true);
});
});
describe('MainContent tool group border SVG snapshots', () => {
it('should render SVG snapshot for a pending search dialog (google_web_search)', async () => {
const renderResult = renderWithProviders(<MainContent />, {
uiState: {
history: [],
pendingHistoryItems: [
{
type: 'tool_group',
tools: [
{
name: 'google_web_search',
status: CoreToolCallStatus.Executing,
resultDisplay: 'Searching...',
callId: 'call-1',
} as unknown as IndividualToolCallDisplay,
],
},
],
},
});
await renderResult.waitUntilReady();
await expect(renderResult).toMatchSvgSnapshot();
});
it('should render SVG snapshot for an empty slice following a search tool', async () => {
const renderResult = renderWithProviders(<MainContent />, {
uiState: {
history: [],
pendingHistoryItems: [
{
type: 'tool_group',
tools: [
{
name: 'google_web_search',
status: CoreToolCallStatus.Executing,
resultDisplay: 'Searching...',
callId: 'call-1',
} as unknown as IndividualToolCallDisplay,
],
},
{
type: 'tool_group',
tools: [],
},
],
},
});
await renderResult.waitUntilReady();
await expect(renderResult).toMatchSvgSnapshot();
});
it('should render SVG snapshot for a shell tool', async () => {
const renderResult = renderWithProviders(<MainContent />, {
uiState: {
history: [],
pendingHistoryItems: [
{
type: 'tool_group',
tools: [
{
name: 'run_shell_command',
status: CoreToolCallStatus.Executing,
resultDisplay: 'Running command...',
callId: 'call-1',
} as unknown as IndividualToolCallDisplay,
],
},
],
},
});
await renderResult.waitUntilReady();
await expect(renderResult).toMatchSvgSnapshot();
});
});

5
packages/cli/src/ui/utils/borderStyles.ts
View File

@@ -47,7 +47,10 @@ export function getToolGroupBorderAppearance(
: allPendingItems
.filter(
(i): i is HistoryItemToolGroup =>
i !== null && i !== undefined && i.type === 'tool_group',
i !== null &&
i !== undefined &&
i.type === 'tool_group' &&
i.tools.length > 0,
)
.slice(-1)
.flatMap((i) => i.tools);