MediaMetz/gemini-cli
1
0
Fork 0
mirror of https://github.com/google-gemini/gemini-cli.git synced 2026-04-02 17:31:05 -07:00
Code Issues Packages Projects Releases Wiki Activity

fix(ui): make tool confirmations take up entire terminal height (#22366)

Browse Source 
Co-authored-by: gemini-code-assist[bot] <176961590+gemini-code-assist[bot]@users.noreply.github.com>
This commit is contained in:
Dev Randalpura
2026-03-23 15:42:30 -04:00
committed by GitHub
parent b2d6dc4e32
commit 139ef0d5bd
21 changed files with 2393 additions and 227 deletions
Download Patch File Download Diff File Expand all files Collapse all files

5
packages/cli/GEMINI.md
View File

@@ -7,7 +7,10 @@
- **Shortcuts**: only define keyboard shortcuts in
`packages/cli/src/ui/key/keyBindings.ts`
- Do not implement any logic performing custom string measurement or string
truncation. Use Ink layout instead leveraging ResizeObserver as needed.
truncation. Use Ink layout instead leveraging ResizeObserver as needed. When
using `ResizeObserver`, prefer the `useCallback` ref pattern (as seen in
`MaxSizedBox.tsx`) to ensure size measurements are captured as soon as the
element is available, avoiding potential rendering timing issues.
- Avoid prop drilling when at all possible.
## Testing

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

@@ -665,7 +665,7 @@ export const renderWithProviders = async (
);
}
const mainAreaWidth = terminalWidth;
const mainAreaWidth = providedUiState?.mainAreaWidth ?? terminalWidth;
const finalUiState = {
...baseState,

2
packages/cli/src/ui/AppContainer.tsx
View File

@@ -1419,7 +1419,7 @@ Logging in with Google... Restarting Gemini CLI to continue.
setControlsHeight(roundedHeight);
}
}
}, [buffer, terminalWidth, terminalHeight, controlsHeight]);
}, [buffer, terminalWidth, terminalHeight, controlsHeight, isInputActive]);
// Compute available terminal height based on controls measurement
const availableTerminalHeight = Math.max(

179
packages/cli/src/ui/ToolConfirmationFullFrame.test.tsx Normal file
View File

@@ -0,0 +1,179 @@
/**
* @license
* Copyright 2026 Google LLC
* SPDX-License-Identifier: Apache-2.0
*/
import { describe, it, expect, vi, beforeEach, afterEach } from 'vitest';
import { cleanup, renderWithProviders } from '../test-utils/render.js';
import { createMockSettings } from '../test-utils/settings.js';
import { App } from './App.js';
import {
CoreToolCallStatus,
ApprovalMode,
makeFakeConfig,
} from '@google/gemini-cli-core';
import { type UIState } from './contexts/UIStateContext.js';
import type { SerializableConfirmationDetails } from '@google/gemini-cli-core';
import { act } from 'react';
import { StreamingState } from './types.js';
vi.mock('ink', async (importOriginal) => {
const original = await importOriginal<typeof import('ink')>();
return {
...original,
useIsScreenReaderEnabled: vi.fn(() => false),
};
});
vi.mock('./components/GeminiSpinner.js', () => ({
GeminiSpinner: () => null,
}));
vi.mock('./components/CliSpinner.js', () => ({
CliSpinner: () => null,
}));
// Mock hooks to align with codebase style, even if App uses UIState directly
vi.mock('./hooks/useGeminiStream.js');
vi.mock('./hooks/useHistoryManager.js');
vi.mock('./hooks/useQuotaAndFallback.js');
vi.mock('./hooks/useThemeCommand.js');
vi.mock('./auth/useAuth.js');
vi.mock('./hooks/useEditorSettings.js');
vi.mock('./hooks/useSettingsCommand.js');
vi.mock('./hooks/useModelCommand.js');
vi.mock('./hooks/slashCommandProcessor.js');
vi.mock('./hooks/useConsoleMessages.js');
vi.mock('./hooks/useTerminalSize.js', () => ({
useTerminalSize: vi.fn(() => ({ columns: 100, rows: 30 })),
}));
describe('Full Terminal Tool Confirmation Snapshot', () => {
beforeEach(() => {
vi.clearAllMocks();
});
afterEach(() => {
cleanup();
vi.restoreAllMocks();
});
it('renders tool confirmation box in the frame of the entire terminal', async () => {
// Generate a large diff to warrant truncation
let largeDiff =
'--- a/packages/cli/src/ui/components/InputPrompt.tsx\n+++ b/packages/cli/src/ui/components/InputPrompt.tsx\n@@ -1,100 +1,105 @@\n';
for (let i = 1; i <= 60; i++) {
largeDiff += ` const line${i} = true;\n`;
}
largeDiff += '- return kittyProtocolSupporte...;\n';
largeDiff += '+ return kittyProtocolSupporte...;\n';
largeDiff += ' buffer: TextBuffer;\n';
largeDiff += ' onSubmit: (value: string) => void;';
const confirmationDetails: SerializableConfirmationDetails = {
type: 'edit',
title: 'Edit packages/.../InputPrompt.tsx',
fileName: 'InputPrompt.tsx',
filePath: 'packages/.../InputPrompt.tsx',
fileDiff: largeDiff,
originalContent: 'old',
newContent: 'new',
isModifying: false,
};
const toolCalls = [
{
callId: 'call-1-modify-selected',
name: 'Edit',
description:
'packages/.../InputPrompt.tsx: return kittyProtocolSupporte... => return kittyProtocolSupporte...',
status: CoreToolCallStatus.AwaitingApproval,
resultDisplay: '',
confirmationDetails,
},
];
const mockUIState = {
history: [
{
id: 1,
type: 'user',
text: 'Can you edit InputPrompt.tsx for me?',
},
],
mainAreaWidth: 99,
availableTerminalHeight: 36,
streamingState: StreamingState.WaitingForConfirmation,
constrainHeight: true,
isConfigInitialized: true,
cleanUiDetailsVisible: true,
quota: {
userTier: 'PRO',
stats: {
limits: {},
usage: {},
},
proQuotaRequest: null,
validationRequest: null,
},
pendingHistoryItems: [
{
id: 2,
type: 'tool_group',
tools: toolCalls,
},
],
showApprovalModeIndicator: ApprovalMode.DEFAULT,
sessionStats: {
lastPromptTokenCount: 175400,
contextPercentage: 3,
},
buffer: { text: '' },
messageQueue: [],
activeHooks: [],
contextFileNames: [],
rootUiRef: { current: null },
} as unknown as UIState;
const mockConfig = makeFakeConfig();
mockConfig.getUseAlternateBuffer = () => true;
mockConfig.isTrustedFolder = () => true;
mockConfig.getDisableAlwaysAllow = () => false;
mockConfig.getIdeMode = () => false;
mockConfig.getTargetDir = () => '/directory';
const { waitUntilReady, lastFrame, generateSvg, unmount } =
await renderWithProviders(<App />, {
uiState: mockUIState,
config: mockConfig,
settings: createMockSettings({
merged: {
ui: {
useAlternateBuffer: true,
theme: 'default',
showUserIdentity: false,
showShortcutsHint: false,
footer: {
hideContextPercentage: false,
hideTokens: false,
hideModel: false,
},
},
security: {
enablePermanentToolApproval: true,
},
},
}),
});
await waitUntilReady();
// Give it a moment to render
await act(async () => {
await new Promise((resolve) => setTimeout(resolve, 500));
});
await expect({ lastFrame, generateSvg }).toMatchSvgSnapshot();
unmount();
});
});

239
packages/cli/src/ui/__snapshots__/ToolConfirmationFullFrame-Full-Terminal-Tool-Confirmation-Snapshot-renders-tool-confirmation-box-in-the-frame-of-the-entire-terminal.snap.svg Normal file
View File

@@ -0,0 +1,239 @@
<svg xmlns="http://www.w3.org/2000/svg" width="920" height="683" viewBox="0 0 920 683">
<style>
text { font-family: Consolas, "Courier New", monospace; font-size: 14px; dominant-baseline: text-before-edge; white-space: pre; }
</style>
<rect width="920" height="683" fill="#000000" />
<g transform="translate(10, 10)">
<text x="0" y="2" fill="#ffffaf" textLength="891" lengthAdjust="spacingAndGlyphs">╭─────────────────────────────────────────────────────────────────────────────────────────────────╮</text>
<text x="0" y="19" fill="#ffffaf" textLength="9" lengthAdjust="spacingAndGlyphs">│</text>
<text x="18" y="19" fill="#ffffaf" textLength="135" lengthAdjust="spacingAndGlyphs" font-weight="bold">Action Required</text>
<text x="882" y="19" fill="#ffffaf" textLength="9" lengthAdjust="spacingAndGlyphs">│</text>
<text x="0" y="36" fill="#ffffaf" textLength="9" lengthAdjust="spacingAndGlyphs">│</text>
<text x="882" y="36" fill="#ffffaf" textLength="9" lengthAdjust="spacingAndGlyphs">│</text>
<text x="0" y="53" fill="#ffffaf" textLength="9" lengthAdjust="spacingAndGlyphs">│</text>
<text x="18" y="53" fill="#ffffaf" textLength="9" lengthAdjust="spacingAndGlyphs">?</text>
<text x="45" y="53" fill="#ffffff" textLength="36" lengthAdjust="spacingAndGlyphs" font-weight="bold">Edit</text>
<text x="90" y="53" fill="#afafaf" textLength="774" lengthAdjust="spacingAndGlyphs">packages/.../InputPrompt.tsx: return kittyProtocolSupporte... =&gt; return kittyProto</text>
<text x="864" y="53" fill="#ffffff" textLength="18" lengthAdjust="spacingAndGlyphs">… </text>
<text x="882" y="53" fill="#ffffaf" textLength="9" lengthAdjust="spacingAndGlyphs">│</text>
<text x="0" y="70" fill="#ffffaf" textLength="9" lengthAdjust="spacingAndGlyphs">│</text>
<text x="9" y="70" fill="#333333" textLength="873" lengthAdjust="spacingAndGlyphs">─────────────────────────────────────────────────────────────────────────────────────────────────</text>
<text x="882" y="70" fill="#ffffaf" textLength="9" lengthAdjust="spacingAndGlyphs">│</text>
<text x="0" y="87" fill="#ffffaf" textLength="9" lengthAdjust="spacingAndGlyphs">│</text>
<text x="18" y="87" fill="#afafaf" textLength="18" lengthAdjust="spacingAndGlyphs">46</text>
<text x="63" y="87" fill="#e5e5e5" textLength="54" lengthAdjust="spacingAndGlyphs">const </text>
<text x="117" y="87" fill="#ffffff" textLength="54" lengthAdjust="spacingAndGlyphs">line46</text>
<text x="171" y="87" fill="#e5e5e5" textLength="27" lengthAdjust="spacingAndGlyphs"> = </text>
<text x="198" y="87" fill="#0000ee" textLength="36" lengthAdjust="spacingAndGlyphs">true</text>
<text x="234" y="87" fill="#00cd00" textLength="9" lengthAdjust="spacingAndGlyphs">;</text>
<text x="882" y="87" fill="#ffffaf" textLength="9" lengthAdjust="spacingAndGlyphs">│</text>
<text x="0" y="104" fill="#ffffaf" textLength="9" lengthAdjust="spacingAndGlyphs">│</text>
<text x="18" y="104" fill="#afafaf" textLength="18" lengthAdjust="spacingAndGlyphs">47</text>
<text x="63" y="104" fill="#e5e5e5" textLength="54" lengthAdjust="spacingAndGlyphs">const </text>
<text x="117" y="104" fill="#ffffff" textLength="54" lengthAdjust="spacingAndGlyphs">line47</text>
<text x="171" y="104" fill="#e5e5e5" textLength="27" lengthAdjust="spacingAndGlyphs"> = </text>
<text x="198" y="104" fill="#0000ee" textLength="36" lengthAdjust="spacingAndGlyphs">true</text>
<text x="234" y="104" fill="#00cd00" textLength="9" lengthAdjust="spacingAndGlyphs">;</text>
<text x="882" y="104" fill="#ffffaf" textLength="9" lengthAdjust="spacingAndGlyphs">│</text>
<text x="0" y="121" fill="#ffffaf" textLength="9" lengthAdjust="spacingAndGlyphs">│</text>
<text x="18" y="121" fill="#afafaf" textLength="18" lengthAdjust="spacingAndGlyphs">48</text>
<text x="63" y="121" fill="#e5e5e5" textLength="54" lengthAdjust="spacingAndGlyphs">const </text>
<text x="117" y="121" fill="#ffffff" textLength="54" lengthAdjust="spacingAndGlyphs">line48</text>
<text x="171" y="121" fill="#e5e5e5" textLength="27" lengthAdjust="spacingAndGlyphs"> = </text>
<text x="198" y="121" fill="#0000ee" textLength="36" lengthAdjust="spacingAndGlyphs">true</text>
<text x="234" y="121" fill="#00cd00" textLength="9" lengthAdjust="spacingAndGlyphs">;</text>
<text x="882" y="121" fill="#ffffaf" textLength="9" lengthAdjust="spacingAndGlyphs">│</text>
<text x="0" y="138" fill="#ffffaf" textLength="9" lengthAdjust="spacingAndGlyphs">│</text>
<text x="18" y="138" fill="#afafaf" textLength="18" lengthAdjust="spacingAndGlyphs">49</text>
<text x="63" y="138" fill="#e5e5e5" textLength="54" lengthAdjust="spacingAndGlyphs">const </text>
<text x="117" y="138" fill="#ffffff" textLength="54" lengthAdjust="spacingAndGlyphs">line49</text>
<text x="171" y="138" fill="#e5e5e5" textLength="27" lengthAdjust="spacingAndGlyphs"> = </text>
<text x="198" y="138" fill="#0000ee" textLength="36" lengthAdjust="spacingAndGlyphs">true</text>
<text x="234" y="138" fill="#00cd00" textLength="9" lengthAdjust="spacingAndGlyphs">;</text>
<text x="882" y="138" fill="#ffffaf" textLength="9" lengthAdjust="spacingAndGlyphs">│</text>
<text x="0" y="155" fill="#ffffaf" textLength="9" lengthAdjust="spacingAndGlyphs">│</text>
<text x="18" y="155" fill="#afafaf" textLength="18" lengthAdjust="spacingAndGlyphs">50</text>
<text x="63" y="155" fill="#e5e5e5" textLength="54" lengthAdjust="spacingAndGlyphs">const </text>
<text x="117" y="155" fill="#ffffff" textLength="54" lengthAdjust="spacingAndGlyphs">line50</text>
<text x="171" y="155" fill="#e5e5e5" textLength="27" lengthAdjust="spacingAndGlyphs"> = </text>
<text x="198" y="155" fill="#0000ee" textLength="36" lengthAdjust="spacingAndGlyphs">true</text>
<text x="234" y="155" fill="#00cd00" textLength="9" lengthAdjust="spacingAndGlyphs">;</text>
<text x="882" y="155" fill="#ffffaf" textLength="9" lengthAdjust="spacingAndGlyphs">│</text>
<text x="0" y="172" fill="#ffffaf" textLength="9" lengthAdjust="spacingAndGlyphs">│</text>
<text x="18" y="172" fill="#afafaf" textLength="18" lengthAdjust="spacingAndGlyphs">51</text>
<text x="63" y="172" fill="#e5e5e5" textLength="54" lengthAdjust="spacingAndGlyphs">const </text>
<text x="117" y="172" fill="#ffffff" textLength="54" lengthAdjust="spacingAndGlyphs">line51</text>
<text x="171" y="172" fill="#e5e5e5" textLength="27" lengthAdjust="spacingAndGlyphs"> = </text>
<text x="198" y="172" fill="#0000ee" textLength="36" lengthAdjust="spacingAndGlyphs">true</text>
<text x="234" y="172" fill="#00cd00" textLength="9" lengthAdjust="spacingAndGlyphs">;</text>
<text x="882" y="172" fill="#ffffaf" textLength="9" lengthAdjust="spacingAndGlyphs">│</text>
<text x="0" y="189" fill="#ffffaf" textLength="9" lengthAdjust="spacingAndGlyphs">│</text>
<text x="18" y="189" fill="#afafaf" textLength="18" lengthAdjust="spacingAndGlyphs">52</text>
<text x="63" y="189" fill="#e5e5e5" textLength="54" lengthAdjust="spacingAndGlyphs">const </text>
<text x="117" y="189" fill="#ffffff" textLength="54" lengthAdjust="spacingAndGlyphs">line52</text>
<text x="171" y="189" fill="#e5e5e5" textLength="27" lengthAdjust="spacingAndGlyphs"> = </text>
<text x="198" y="189" fill="#0000ee" textLength="36" lengthAdjust="spacingAndGlyphs">true</text>
<text x="234" y="189" fill="#00cd00" textLength="9" lengthAdjust="spacingAndGlyphs">;</text>
<text x="882" y="189" fill="#ffffaf" textLength="9" lengthAdjust="spacingAndGlyphs">│</text>
<text x="0" y="206" fill="#ffffaf" textLength="9" lengthAdjust="spacingAndGlyphs">│</text>
<text x="18" y="206" fill="#afafaf" textLength="18" lengthAdjust="spacingAndGlyphs">53</text>
<text x="63" y="206" fill="#e5e5e5" textLength="54" lengthAdjust="spacingAndGlyphs">const </text>
<text x="117" y="206" fill="#ffffff" textLength="54" lengthAdjust="spacingAndGlyphs">line53</text>
<text x="171" y="206" fill="#e5e5e5" textLength="27" lengthAdjust="spacingAndGlyphs"> = </text>
<text x="198" y="206" fill="#0000ee" textLength="36" lengthAdjust="spacingAndGlyphs">true</text>
<text x="234" y="206" fill="#00cd00" textLength="9" lengthAdjust="spacingAndGlyphs">;</text>
<text x="882" y="206" fill="#ffffaf" textLength="9" lengthAdjust="spacingAndGlyphs">│</text>
<text x="0" y="223" fill="#ffffaf" textLength="9" lengthAdjust="spacingAndGlyphs">│</text>
<text x="18" y="223" fill="#afafaf" textLength="18" lengthAdjust="spacingAndGlyphs">54</text>
<text x="63" y="223" fill="#e5e5e5" textLength="54" lengthAdjust="spacingAndGlyphs">const </text>
<text x="117" y="223" fill="#ffffff" textLength="54" lengthAdjust="spacingAndGlyphs">line54</text>
<text x="171" y="223" fill="#e5e5e5" textLength="27" lengthAdjust="spacingAndGlyphs"> = </text>
<text x="198" y="223" fill="#0000ee" textLength="36" lengthAdjust="spacingAndGlyphs">true</text>
<text x="234" y="223" fill="#00cd00" textLength="9" lengthAdjust="spacingAndGlyphs">;</text>
<text x="882" y="223" fill="#ffffaf" textLength="9" lengthAdjust="spacingAndGlyphs">│</text>
<text x="0" y="240" fill="#ffffaf" textLength="9" lengthAdjust="spacingAndGlyphs">│</text>
<text x="18" y="240" fill="#afafaf" textLength="18" lengthAdjust="spacingAndGlyphs">55</text>
<text x="63" y="240" fill="#e5e5e5" textLength="54" lengthAdjust="spacingAndGlyphs">const </text>
<text x="117" y="240" fill="#ffffff" textLength="54" lengthAdjust="spacingAndGlyphs">line55</text>
<text x="171" y="240" fill="#e5e5e5" textLength="27" lengthAdjust="spacingAndGlyphs"> = </text>
<text x="198" y="240" fill="#0000ee" textLength="36" lengthAdjust="spacingAndGlyphs">true</text>
<text x="234" y="240" fill="#00cd00" textLength="9" lengthAdjust="spacingAndGlyphs">;</text>
<text x="882" y="240" fill="#ffffaf" textLength="9" lengthAdjust="spacingAndGlyphs">│</text>
<text x="0" y="257" fill="#ffffaf" textLength="9" lengthAdjust="spacingAndGlyphs">│</text>
<text x="18" y="257" fill="#afafaf" textLength="18" lengthAdjust="spacingAndGlyphs">56</text>
<text x="63" y="257" fill="#e5e5e5" textLength="54" lengthAdjust="spacingAndGlyphs">const </text>
<text x="117" y="257" fill="#ffffff" textLength="54" lengthAdjust="spacingAndGlyphs">line56</text>
<text x="171" y="257" fill="#e5e5e5" textLength="27" lengthAdjust="spacingAndGlyphs"> = </text>
<text x="198" y="257" fill="#0000ee" textLength="36" lengthAdjust="spacingAndGlyphs">true</text>
<text x="234" y="257" fill="#00cd00" textLength="9" lengthAdjust="spacingAndGlyphs">;</text>
<text x="882" y="257" fill="#ffffaf" textLength="9" lengthAdjust="spacingAndGlyphs">│</text>
<text x="0" y="274" fill="#ffffaf" textLength="9" lengthAdjust="spacingAndGlyphs">│</text>
<text x="18" y="274" fill="#afafaf" textLength="18" lengthAdjust="spacingAndGlyphs">57</text>
<text x="63" y="274" fill="#e5e5e5" textLength="54" lengthAdjust="spacingAndGlyphs">const </text>
<text x="117" y="274" fill="#ffffff" textLength="54" lengthAdjust="spacingAndGlyphs">line57</text>
<text x="171" y="274" fill="#e5e5e5" textLength="27" lengthAdjust="spacingAndGlyphs"> = </text>
<text x="198" y="274" fill="#0000ee" textLength="36" lengthAdjust="spacingAndGlyphs">true</text>
<text x="234" y="274" fill="#00cd00" textLength="9" lengthAdjust="spacingAndGlyphs">;</text>
<text x="882" y="274" fill="#ffffaf" textLength="9" lengthAdjust="spacingAndGlyphs">│</text>
<text x="0" y="291" fill="#ffffaf" textLength="9" lengthAdjust="spacingAndGlyphs">│</text>
<text x="18" y="291" fill="#afafaf" textLength="18" lengthAdjust="spacingAndGlyphs">58</text>
<text x="63" y="291" fill="#e5e5e5" textLength="54" lengthAdjust="spacingAndGlyphs">const </text>
<text x="117" y="291" fill="#ffffff" textLength="54" lengthAdjust="spacingAndGlyphs">line58</text>
<text x="171" y="291" fill="#e5e5e5" textLength="27" lengthAdjust="spacingAndGlyphs"> = </text>
<text x="198" y="291" fill="#0000ee" textLength="36" lengthAdjust="spacingAndGlyphs">true</text>
<text x="234" y="291" fill="#00cd00" textLength="9" lengthAdjust="spacingAndGlyphs">;</text>
<text x="882" y="291" fill="#ffffaf" textLength="9" lengthAdjust="spacingAndGlyphs">│</text>
<text x="0" y="308" fill="#ffffaf" textLength="9" lengthAdjust="spacingAndGlyphs">│</text>
<text x="18" y="308" fill="#afafaf" textLength="18" lengthAdjust="spacingAndGlyphs">59</text>
<text x="63" y="308" fill="#e5e5e5" textLength="54" lengthAdjust="spacingAndGlyphs">const </text>
<text x="117" y="308" fill="#ffffff" textLength="54" lengthAdjust="spacingAndGlyphs">line59</text>
<text x="171" y="308" fill="#e5e5e5" textLength="27" lengthAdjust="spacingAndGlyphs"> = </text>
<text x="198" y="308" fill="#0000ee" textLength="36" lengthAdjust="spacingAndGlyphs">true</text>
<text x="234" y="308" fill="#00cd00" textLength="9" lengthAdjust="spacingAndGlyphs">;</text>
<text x="882" y="308" fill="#ffffaf" textLength="9" lengthAdjust="spacingAndGlyphs">│</text>
<text x="0" y="325" fill="#ffffaf" textLength="9" lengthAdjust="spacingAndGlyphs">│</text>
<text x="18" y="325" fill="#afafaf" textLength="18" lengthAdjust="spacingAndGlyphs">60</text>
<text x="63" y="325" fill="#e5e5e5" textLength="54" lengthAdjust="spacingAndGlyphs">const </text>
<text x="117" y="325" fill="#ffffff" textLength="54" lengthAdjust="spacingAndGlyphs">line60</text>
<text x="171" y="325" fill="#e5e5e5" textLength="27" lengthAdjust="spacingAndGlyphs"> = </text>
<text x="198" y="325" fill="#0000ee" textLength="36" lengthAdjust="spacingAndGlyphs">true</text>
<text x="234" y="325" fill="#00cd00" textLength="9" lengthAdjust="spacingAndGlyphs">;</text>
<text x="882" y="325" fill="#ffffaf" textLength="9" lengthAdjust="spacingAndGlyphs">│</text>
<text x="0" y="342" fill="#ffffaf" textLength="9" lengthAdjust="spacingAndGlyphs">│</text>
<rect x="18" y="340" width="18" height="17" fill="#5f0000" />
<text x="18" y="342" fill="#afafaf" textLength="18" lengthAdjust="spacingAndGlyphs">61</text>
<rect x="36" y="340" width="9" height="17" fill="#5f0000" />
<rect x="45" y="340" width="9" height="17" fill="#5f0000" />
<text x="45" y="342" fill="#ff87af" textLength="9" lengthAdjust="spacingAndGlyphs">-</text>
<rect x="54" y="340" width="9" height="17" fill="#5f0000" />
<rect x="63" y="340" width="9" height="17" fill="#5f0000" />
<rect x="72" y="340" width="54" height="17" fill="#5f0000" />
<text x="72" y="342" fill="#0000ee" textLength="54" lengthAdjust="spacingAndGlyphs">return</text>
<rect x="126" y="340" width="234" height="17" fill="#5f0000" />
<text x="126" y="342" fill="#e5e5e5" textLength="234" lengthAdjust="spacingAndGlyphs"> kittyProtocolSupporte...;</text>
<text x="882" y="342" fill="#ffffaf" textLength="9" lengthAdjust="spacingAndGlyphs">│</text>
<text x="0" y="359" fill="#ffffaf" textLength="9" lengthAdjust="spacingAndGlyphs">│</text>
<rect x="18" y="357" width="18" height="17" fill="#005f00" />
<text x="18" y="359" fill="#afafaf" textLength="18" lengthAdjust="spacingAndGlyphs">61</text>
<rect x="36" y="357" width="9" height="17" fill="#005f00" />
<rect x="45" y="357" width="9" height="17" fill="#005f00" />
<text x="45" y="359" fill="#d7ffd7" textLength="9" lengthAdjust="spacingAndGlyphs">+</text>
<rect x="54" y="357" width="9" height="17" fill="#005f00" />
<rect x="63" y="357" width="9" height="17" fill="#005f00" />
<rect x="72" y="357" width="54" height="17" fill="#005f00" />
<text x="72" y="359" fill="#0000ee" textLength="54" lengthAdjust="spacingAndGlyphs">return</text>
<rect x="126" y="357" width="234" height="17" fill="#005f00" />
<text x="126" y="359" fill="#e5e5e5" textLength="234" lengthAdjust="spacingAndGlyphs"> kittyProtocolSupporte...;</text>
<text x="882" y="359" fill="#ffffaf" textLength="9" lengthAdjust="spacingAndGlyphs">│</text>
<text x="0" y="376" fill="#ffffaf" textLength="9" lengthAdjust="spacingAndGlyphs">│</text>
<text x="18" y="376" fill="#afafaf" textLength="18" lengthAdjust="spacingAndGlyphs">62</text>
<text x="63" y="376" fill="#e5e5e5" textLength="180" lengthAdjust="spacingAndGlyphs"> buffer: TextBuffer;</text>
<text x="882" y="376" fill="#ffffaf" textLength="9" lengthAdjust="spacingAndGlyphs">│</text>
<text x="0" y="393" fill="#ffffaf" textLength="9" lengthAdjust="spacingAndGlyphs">│</text>
<text x="18" y="393" fill="#afafaf" textLength="18" lengthAdjust="spacingAndGlyphs">63</text>
<text x="72" y="393" fill="#ffffff" textLength="72" lengthAdjust="spacingAndGlyphs">onSubmit</text>
<text x="144" y="393" fill="#e5e5e5" textLength="27" lengthAdjust="spacingAndGlyphs">: (</text>
<text x="171" y="393" fill="#ffffff" textLength="45" lengthAdjust="spacingAndGlyphs">value</text>
<text x="216" y="393" fill="#e5e5e5" textLength="18" lengthAdjust="spacingAndGlyphs">: </text>
<text x="234" y="393" fill="#00cdcd" textLength="54" lengthAdjust="spacingAndGlyphs">string</text>
<text x="288" y="393" fill="#e5e5e5" textLength="45" lengthAdjust="spacingAndGlyphs">) =&gt; </text>
<text x="333" y="393" fill="#00cdcd" textLength="36" lengthAdjust="spacingAndGlyphs">void</text>
<text x="369" y="393" fill="#e5e5e5" textLength="9" lengthAdjust="spacingAndGlyphs">;</text>
<text x="882" y="393" fill="#ffffaf" textLength="9" lengthAdjust="spacingAndGlyphs">│</text>
<text x="0" y="410" fill="#ffffaf" textLength="9" lengthAdjust="spacingAndGlyphs">│</text>
<text x="18" y="410" fill="#ffffff" textLength="162" lengthAdjust="spacingAndGlyphs">Apply this change?</text>
<text x="882" y="410" fill="#ffffaf" textLength="9" lengthAdjust="spacingAndGlyphs">│</text>
<text x="0" y="427" fill="#ffffaf" textLength="9" lengthAdjust="spacingAndGlyphs">│</text>
<text x="882" y="427" fill="#ffffaf" textLength="9" lengthAdjust="spacingAndGlyphs">│</text>
<text x="891" y="427" fill="#333333" textLength="9" lengthAdjust="spacingAndGlyphs">█</text>
<text x="0" y="444" fill="#ffffaf" textLength="9" lengthAdjust="spacingAndGlyphs">│</text>
<rect x="18" y="442" width="9" height="17" fill="#001a00" />
<text x="18" y="444" fill="#00cd00" textLength="9" lengthAdjust="spacingAndGlyphs">●</text>
<rect x="27" y="442" width="9" height="17" fill="#001a00" />
<rect x="36" y="442" width="18" height="17" fill="#001a00" />
<text x="36" y="444" fill="#00cd00" textLength="18" lengthAdjust="spacingAndGlyphs">1.</text>
<rect x="54" y="442" width="9" height="17" fill="#001a00" />
<rect x="63" y="442" width="90" height="17" fill="#001a00" />
<text x="63" y="444" fill="#00cd00" textLength="90" lengthAdjust="spacingAndGlyphs">Allow once</text>
<rect x="153" y="442" width="288" height="17" fill="#001a00" />
<text x="882" y="444" fill="#ffffaf" textLength="9" lengthAdjust="spacingAndGlyphs">│</text>
<text x="891" y="444" fill="#333333" textLength="9" lengthAdjust="spacingAndGlyphs">█</text>
<text x="0" y="461" fill="#ffffaf" textLength="9" lengthAdjust="spacingAndGlyphs">│</text>
<text x="36" y="461" fill="#ffffff" textLength="18" lengthAdjust="spacingAndGlyphs">2.</text>
<text x="63" y="461" fill="#ffffff" textLength="198" lengthAdjust="spacingAndGlyphs">Allow for this session</text>
<text x="882" y="461" fill="#ffffaf" textLength="9" lengthAdjust="spacingAndGlyphs">│</text>
<text x="891" y="461" fill="#333333" textLength="9" lengthAdjust="spacingAndGlyphs">█</text>
<text x="0" y="478" fill="#ffffaf" textLength="9" lengthAdjust="spacingAndGlyphs">│</text>
<text x="36" y="478" fill="#ffffff" textLength="18" lengthAdjust="spacingAndGlyphs">3.</text>
<text x="63" y="478" fill="#ffffff" textLength="378" lengthAdjust="spacingAndGlyphs">Allow for this file in all future sessions</text>
<text x="882" y="478" fill="#ffffaf" textLength="9" lengthAdjust="spacingAndGlyphs">│</text>
<text x="891" y="478" fill="#333333" textLength="9" lengthAdjust="spacingAndGlyphs">█</text>
<text x="0" y="495" fill="#ffffaf" textLength="9" lengthAdjust="spacingAndGlyphs">│</text>
<text x="36" y="495" fill="#ffffff" textLength="18" lengthAdjust="spacingAndGlyphs">4.</text>
<text x="63" y="495" fill="#ffffff" textLength="243" lengthAdjust="spacingAndGlyphs">Modify with external editor</text>
<text x="882" y="495" fill="#ffffaf" textLength="9" lengthAdjust="spacingAndGlyphs">│</text>
<text x="891" y="495" fill="#333333" textLength="9" lengthAdjust="spacingAndGlyphs">█</text>
<text x="0" y="512" fill="#ffffaf" textLength="9" lengthAdjust="spacingAndGlyphs">│</text>
<text x="36" y="512" fill="#ffffff" textLength="18" lengthAdjust="spacingAndGlyphs">5.</text>
<text x="63" y="512" fill="#ffffff" textLength="225" lengthAdjust="spacingAndGlyphs">No, suggest changes (esc)</text>
<text x="882" y="512" fill="#ffffaf" textLength="9" lengthAdjust="spacingAndGlyphs">│</text>
<text x="891" y="512" fill="#333333" textLength="9" lengthAdjust="spacingAndGlyphs">█</text>
<text x="0" y="529" fill="#ffffaf" textLength="9" lengthAdjust="spacingAndGlyphs">│</text>
<text x="882" y="529" fill="#ffffaf" textLength="9" lengthAdjust="spacingAndGlyphs">│</text>
<text x="891" y="529" fill="#333333" textLength="9" lengthAdjust="spacingAndGlyphs">█</text>
<text x="0" y="546" fill="#ffffaf" textLength="891" lengthAdjust="spacingAndGlyphs">╰─────────────────────────────────────────────────────────────────────────────────────────────────╯</text>
<text x="891" y="546" fill="#333333" textLength="9" lengthAdjust="spacingAndGlyphs">█</text>
<text x="9" y="580" fill="#ffffff" textLength="135" lengthAdjust="spacingAndGlyphs">Initializing...</text>
<text x="0" y="597" fill="#333333" textLength="900" lengthAdjust="spacingAndGlyphs">────────────────────────────────────────────────────────────────────────────────────────────────────</text>
<text x="9" y="614" fill="#afafaf" textLength="225" lengthAdjust="spacingAndGlyphs">Shift+Tab to accept edits</text>
<text x="675" y="614" fill="#afafaf" textLength="216" lengthAdjust="spacingAndGlyphs">undefined undefined file</text>
<text x="9" y="631" fill="#afafaf" textLength="198" lengthAdjust="spacingAndGlyphs">workspace (/directory)</text>
<text x="351" y="631" fill="#afafaf" textLength="63" lengthAdjust="spacingAndGlyphs">sandbox</text>
<text x="585" y="631" fill="#afafaf" textLength="54" lengthAdjust="spacingAndGlyphs">/model</text>
<text x="828" y="631" fill="#afafaf" textLength="63" lengthAdjust="spacingAndGlyphs">context</text>
<text x="9" y="648" fill="#ffffff" textLength="90" lengthAdjust="spacingAndGlyphs">/directory</text>
<text x="351" y="648" fill="#ff87af" textLength="90" lengthAdjust="spacingAndGlyphs">no sandbox</text>
<text x="585" y="648" fill="#ffffff" textLength="90" lengthAdjust="spacingAndGlyphs">gemini-pro</text>
<text x="819" y="648" fill="#afafaf" textLength="72" lengthAdjust="spacingAndGlyphs">17% used</text>
</g>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 24 KiB

44
packages/cli/src/ui/__snapshots__/ToolConfirmationFullFrame.test.tsx.snap Normal file
View File

@@ -0,0 +1,44 @@
// Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
exports[`Full Terminal Tool Confirmation Snapshot > renders tool confirmation box in the frame of the entire terminal 1`] = `
"╭─────────────────────────────────────────────────────────────────────────────────────────────────╮
│ Action Required │
│ │
│ ? Edit packages/.../InputPrompt.tsx: return kittyProtocolSupporte... => return kittyProto… │
│─────────────────────────────────────────────────────────────────────────────────────────────────│
│ 46 const line46 = true; │
│ 47 const line47 = true; │
│ 48 const line48 = true; │
│ 49 const line49 = true; │
│ 50 const line50 = true; │
│ 51 const line51 = true; │
│ 52 const line52 = true; │
│ 53 const line53 = true; │
│ 54 const line54 = true; │
│ 55 const line55 = true; │
│ 56 const line56 = true; │
│ 57 const line57 = true; │
│ 58 const line58 = true; │
│ 59 const line59 = true; │
│ 60 const line60 = true; │
│ 61 - return kittyProtocolSupporte...; │
│ 61 + return kittyProtocolSupporte...; │
│ 62 buffer: TextBuffer; │
│ 63 onSubmit: (value: string) => void; │
│ Apply this change? │
│ │█
│ ● 1. Allow once │█
│ 2. Allow for this session │█
│ 3. Allow for this file in all future sessions │█
│ 4. Modify with external editor │█
│ 5. No, suggest changes (esc) │█
│ │█
╰─────────────────────────────────────────────────────────────────────────────────────────────────╯█
Initializing...
────────────────────────────────────────────────────────────────────────────────────────────────────
Shift+Tab to accept edits undefined undefined file
workspace (/directory) sandbox /model context
/directory no sandbox gemini-pro 17% used
"
`;

4
packages/cli/src/ui/components/Composer.tsx
View File

@@ -172,7 +172,9 @@ export const Composer = ({ isFocused = true }: { isFocused?: boolean }) => {
}, [canShowShortcutsHint]);
const shouldReserveSpaceForShortcutsHint =
settings.merged.ui.showShortcutsHint && !hideShortcutsHintForSuggestions;
settings.merged.ui.showShortcutsHint &&
!hideShortcutsHintForSuggestions &&
!hasPendingActionRequired;
const showShortcutsHint =
shouldReserveSpaceForShortcutsHint && showShortcutsHintDebounced;
const showMinimalModeBleedThrough =

211
packages/cli/src/ui/components/ToolConfirmationQueue.test.tsx
View File

@@ -6,13 +6,16 @@
import { describe, it, expect, vi, beforeEach } from 'vitest';
import { act } from 'react';
import { Box } from 'ink';
import { ToolConfirmationQueue } from './ToolConfirmationQueue.js';
import { StreamingState } from '../types.js';
import { renderWithProviders } from '../../test-utils/render.js';
import { createMockSettings } from '../../test-utils/settings.js';
import { waitFor } from '../../test-utils/async.js';
import { type Config, CoreToolCallStatus } from '@google/gemini-cli-core';
import {
type Config,
CoreToolCallStatus,
type SerializableConfirmationDetails,
} from '@google/gemini-cli-core';
import type { ConfirmingToolState } from '../hooks/useConfirmingTool.js';
import { theme } from '../semantic-colors.js';
@@ -133,59 +136,6 @@ describe('ToolConfirmationQueue', () => {
unmount();
});
it('renders expansion hint when content is long and constrained', async () => {
const longDiff = '@@ -1,1 +1,50 @@\n' + '+line\n'.repeat(50);
const confirmingTool = {
tool: {
callId: 'call-1',
name: 'replace',
description: 'edit file',
status: CoreToolCallStatus.AwaitingApproval,
confirmationDetails: {
type: 'edit' as const,
title: 'Confirm edit',
fileName: 'test.ts',
filePath: '/test.ts',
fileDiff: longDiff,
originalContent: 'old',
newContent: 'new',
},
},
index: 1,
total: 1,
};
const { lastFrame, unmount } = await renderWithProviders(
<Box flexDirection="column" height={30}>
<ToolConfirmationQueue
confirmingTool={confirmingTool as unknown as ConfirmingToolState}
/>
</Box>,
{
config: {
// eslint-disable-next-line @typescript-eslint/no-misused-spread
...mockConfig,
getUseAlternateBuffer: () => true,
} as unknown as Config,
settings: createMockSettings({ ui: { useAlternateBuffer: true } }),
uiState: {
terminalWidth: 80,
terminalHeight: 20,
constrainHeight: true,
streamingState: StreamingState.WaitingForConfirmation,
},
},
);
await waitFor(() =>
expect(lastFrame()?.toLowerCase()).toContain(
'press ctrl+o to show more lines',
),
);
expect(lastFrame()).toMatchSnapshot();
unmount();
});
it('calculates availableContentHeight based on availableTerminalHeight from UI state', async () => {
const longDiff = '@@ -1,1 +1,50 @@\n' + '+line\n'.repeat(50);
const confirmingTool = {
@@ -414,4 +364,155 @@ describe('ToolConfirmationQueue', () => {
expect(stickyHeaderProps.borderColor).toBe(theme.status.success);
unmount();
});
describe('height allocation and layout', () => {
it('should render the full queue wrapper with borders and content for large edit diffs', async () => {
let largeDiff = '--- a/file.ts\n+++ b/file.ts\n@@ -1,10 +1,15 @@\n';
for (let i = 1; i <= 20; i++) {
largeDiff += `-const oldLine${i} = true;\n`;
largeDiff += `+const newLine${i} = true;\n`;
}
const confirmationDetails: SerializableConfirmationDetails = {
type: 'edit',
title: 'Confirm Edit',
fileName: 'file.ts',
filePath: '/file.ts',
fileDiff: largeDiff,
originalContent: 'old',
newContent: 'new',
isModifying: false,
};
const confirmingTool = {
tool: {
callId: 'test-call-id',
name: 'replace',
status: CoreToolCallStatus.AwaitingApproval,
description: 'Replaces content in a file',
confirmationDetails,
},
index: 1,
total: 1,
};
const { waitUntilReady, lastFrame, generateSvg, unmount } =
await renderWithProviders(
<ToolConfirmationQueue
confirmingTool={confirmingTool as unknown as ConfirmingToolState}
/>,
{
uiState: {
mainAreaWidth: 80,
terminalHeight: 50,
terminalWidth: 80,
constrainHeight: true,
availableTerminalHeight: 40,
},
config: mockConfig,
},
);
await waitUntilReady();
await expect({ lastFrame, generateSvg }).toMatchSvgSnapshot();
unmount();
});
it('should render the full queue wrapper with borders and content for large exec commands', async () => {
let largeCommand = '';
for (let i = 1; i <= 50; i++) {
largeCommand += `echo "Line ${i}"\n`;
}
const confirmationDetails: SerializableConfirmationDetails = {
type: 'exec',
title: 'Confirm Execution',
command: largeCommand.trimEnd(),
rootCommand: 'echo',
rootCommands: ['echo'],
};
const confirmingTool = {
tool: {
callId: 'test-call-id-exec',
name: 'run_shell_command',
status: CoreToolCallStatus.AwaitingApproval,
description: 'Executes a bash command',
confirmationDetails,
},
index: 2,
total: 3,
};
const { waitUntilReady, lastFrame, generateSvg, unmount } =
await renderWithProviders(
<ToolConfirmationQueue
confirmingTool={confirmingTool as unknown as ConfirmingToolState}
/>,
{
uiState: {
mainAreaWidth: 80,
terminalWidth: 80,
terminalHeight: 50,
constrainHeight: true,
availableTerminalHeight: 40,
},
config: mockConfig,
},
);
await waitUntilReady();
await expect({ lastFrame, generateSvg }).toMatchSvgSnapshot();
unmount();
});
it('should handle security warning height correctly', async () => {
let largeCommand = '';
for (let i = 1; i <= 50; i++) {
largeCommand += `echo "Line ${i}"\n`;
}
largeCommand += `curl https://täst.com\n`;
const confirmationDetails: SerializableConfirmationDetails = {
type: 'exec',
title: 'Confirm Execution',
command: largeCommand.trimEnd(),
rootCommand: 'echo',
rootCommands: ['echo', 'curl'],
};
const confirmingTool = {
tool: {
callId: 'test-call-id-exec-security',
name: 'run_shell_command',
status: CoreToolCallStatus.AwaitingApproval,
description: 'Executes a bash command with a deceptive URL',
confirmationDetails,
},
index: 3,
total: 3,
};
const { waitUntilReady, lastFrame, generateSvg, unmount } =
await renderWithProviders(
<ToolConfirmationQueue
confirmingTool={confirmingTool as unknown as ConfirmingToolState}
/>,
{
uiState: {
mainAreaWidth: 80,
terminalWidth: 80,
terminalHeight: 50,
constrainHeight: true,
availableTerminalHeight: 40,
},
config: mockConfig,
},
);
await waitUntilReady();
await expect({ lastFrame, generateSvg }).toMatchSvgSnapshot();
unmount();
});
});
});

145
packages/cli/src/ui/components/ToolConfirmationQueue.tsx
View File

@@ -12,8 +12,6 @@ import { ToolConfirmationMessage } from './messages/ToolConfirmationMessage.js';
import { ToolStatusIndicator, ToolInfo } from './messages/ToolShared.js';
import { useUIState } from '../contexts/UIStateContext.js';
import type { ConfirmingToolState } from '../hooks/useConfirmingTool.js';
import { OverflowProvider } from '../contexts/OverflowContext.js';
import { ShowMoreLines } from './ShowMoreLines.js';
import { StickyHeader } from './StickyHeader.js';
import type { SerializableConfirmationDetails } from '@google/gemini-cli-core';
import { useUIActions } from '../contexts/UIActionsContext.js';
@@ -53,11 +51,11 @@ export const ToolConfirmationQueue: React.FC<ToolConfirmationQueueProps> = ({
// Safety check: ToolConfirmationMessage requires confirmationDetails
if (!tool.confirmationDetails) return null;
// Render up to 100% of the available terminal height (minus 1 line for safety)
// Render up to 100% of the available terminal height
// to maximize space for diffs and other content.
const maxHeight =
uiAvailableHeight !== undefined
? Math.max(uiAvailableHeight - 1, 4)
? Math.max(uiAvailableHeight, 4)
: Math.floor(terminalHeight * 0.5);
const isRoutine =
@@ -76,84 +74,81 @@ export const ToolConfirmationQueue: React.FC<ToolConfirmationQueueProps> = ({
: undefined;
const content = (
<>
<Box flexDirection="column" width={mainAreaWidth} flexShrink={0}>
<StickyHeader
width={mainAreaWidth}
isFirst={true}
borderColor={borderColor}
borderDimColor={false}
>
<Box flexDirection="column" width={mainAreaWidth - 4}>
{/* Header */}
<Box
marginBottom={hideToolIdentity ? 0 : 1}
justifyContent="space-between"
>
<Text color={borderColor} bold>
{getConfirmationHeader(tool.confirmationDetails)}
<Box flexDirection="column" width={mainAreaWidth} flexShrink={0}>
<StickyHeader
width={mainAreaWidth}
isFirst={true}
borderColor={borderColor}
borderDimColor={false}
>
<Box flexDirection="column" width={mainAreaWidth - 4}>
{/* Header */}
<Box
marginBottom={hideToolIdentity ? 0 : 1}
justifyContent="space-between"
>
<Text color={borderColor} bold>
{getConfirmationHeader(tool.confirmationDetails)}
</Text>
{total > 1 && (
<Text color={theme.text.secondary}>
{index} of {total}
</Text>
{total > 1 && (
<Text color={theme.text.secondary}>
{index} of {total}
</Text>
)}
</Box>
{!hideToolIdentity && (
<Box>
<ToolStatusIndicator status={tool.status} name={tool.name} />
<ToolInfo
name={tool.name}
status={tool.status}
description={tool.description}
emphasis="high"
/>
</Box>
)}
</Box>
</StickyHeader>
<Box
width={mainAreaWidth}
borderStyle="round"
borderColor={borderColor}
borderTop={false}
borderBottom={false}
borderLeft={true}
borderRight={true}
paddingX={1}
flexDirection="column"
>
{/* Interactive Area */}
{/*
Note: We force isFocused={true} because if this component is rendered,
it effectively acts as a modal over the shell/composer.
*/}
<ToolConfirmationMessage
callId={tool.callId}
confirmationDetails={tool.confirmationDetails}
config={config}
getPreferredEditor={getPreferredEditor}
terminalWidth={mainAreaWidth - 4} // Adjust for parent border/padding
availableTerminalHeight={availableContentHeight}
isFocused={true}
/>
{!hideToolIdentity && (
<Box>
<ToolStatusIndicator status={tool.status} name={tool.name} />
<ToolInfo
name={tool.name}
status={tool.status}
description={tool.description}
emphasis="high"
/>
</Box>
)}
</Box>
<Box
height={1}
width={mainAreaWidth}
borderLeft={true}
borderRight={true}
borderTop={false}
borderBottom={true}
borderColor={borderColor}
borderStyle="round"
</StickyHeader>
<Box
width={mainAreaWidth}
borderStyle="round"
borderColor={borderColor}
borderTop={false}
borderBottom={false}
borderLeft={true}
borderRight={true}
paddingX={1}
flexDirection="column"
>
{/* Interactive Area */}
{/*
Note: We force isFocused={true} because if this component is rendered,
it effectively acts as a modal over the shell/composer.
*/}
<ToolConfirmationMessage
callId={tool.callId}
confirmationDetails={tool.confirmationDetails}
config={config}
getPreferredEditor={getPreferredEditor}
terminalWidth={mainAreaWidth - 4} // Adjust for parent border/padding
availableTerminalHeight={availableContentHeight}
isFocused={true}
/>
</Box>
<ShowMoreLines constrainHeight={constrainHeight} />
</>
<Box
height={1}
width={mainAreaWidth}
borderLeft={true}
borderRight={true}
borderTop={false}
borderBottom={true}
borderColor={borderColor}
borderStyle="round"
/>
</Box>
);
return <OverflowProvider>{content}</OverflowProvider>;
return content;
};

12
packages/cli/src/ui/components/__snapshots__/MainContent-MainContent-renders-multiple-thinking-messages-sequentially-correctly.snap.svg
View File

@@ -21,22 +21,22 @@
<text x="9" y="121" fill="#afafaf" textLength="9" lengthAdjust="spacingAndGlyphs">│</text>
<text x="27" y="121" fill="#ffffff" textLength="144" lengthAdjust="spacingAndGlyphs" font-weight="bold" font-style="italic">Initial analysis</text>
<text x="9" y="138" fill="#afafaf" textLength="9" lengthAdjust="spacingAndGlyphs">│</text>
<text x="27" y="138" fill="#afafaf" textLength="846" lengthAdjust="spacingAndGlyphs" font-style="italic">This is a multiple line paragraph for the first thinking message of how the model analyzes the</text>
<text x="27" y="138" fill="#afafaf" textLength="675" lengthAdjust="spacingAndGlyphs" font-style="italic">This is a multiple line paragraph for the first thinking message of how the</text>
<text x="9" y="155" fill="#afafaf" textLength="9" lengthAdjust="spacingAndGlyphs">│</text>
<text x="27" y="155" fill="#afafaf" textLength="72" lengthAdjust="spacingAndGlyphs" font-style="italic">problem.</text>
<text x="27" y="155" fill="#afafaf" textLength="243" lengthAdjust="spacingAndGlyphs" font-style="italic">model analyzes the problem.</text>
<text x="9" y="172" fill="#afafaf" textLength="9" lengthAdjust="spacingAndGlyphs">│</text>
<text x="9" y="189" fill="#afafaf" textLength="9" lengthAdjust="spacingAndGlyphs">│</text>
<text x="27" y="189" fill="#ffffff" textLength="162" lengthAdjust="spacingAndGlyphs" font-weight="bold" font-style="italic">Planning execution</text>
<text x="9" y="206" fill="#afafaf" textLength="9" lengthAdjust="spacingAndGlyphs">│</text>
<text x="27" y="206" fill="#afafaf" textLength="828" lengthAdjust="spacingAndGlyphs" font-style="italic">This a second multiple line paragraph for the second thinking message explaining the plan in</text>
<text x="27" y="206" fill="#afafaf" textLength="621" lengthAdjust="spacingAndGlyphs" font-style="italic">This a second multiple line paragraph for the second thinking message</text>
<text x="9" y="223" fill="#afafaf" textLength="9" lengthAdjust="spacingAndGlyphs">│</text>
<text x="27" y="223" fill="#afafaf" textLength="468" lengthAdjust="spacingAndGlyphs" font-style="italic">detail so that it wraps around the terminal display.</text>
<text x="27" y="223" fill="#afafaf" textLength="675" lengthAdjust="spacingAndGlyphs" font-style="italic">explaining the plan in detail so that it wraps around the terminal display.</text>
<text x="9" y="240" fill="#afafaf" textLength="9" lengthAdjust="spacingAndGlyphs">│</text>
<text x="9" y="257" fill="#afafaf" textLength="9" lengthAdjust="spacingAndGlyphs">│</text>
<text x="27" y="257" fill="#ffffff" textLength="153" lengthAdjust="spacingAndGlyphs" font-weight="bold" font-style="italic">Refining approach</text>
<text x="9" y="274" fill="#afafaf" textLength="9" lengthAdjust="spacingAndGlyphs">│</text>
<text x="27" y="274" fill="#afafaf" textLength="792" lengthAdjust="spacingAndGlyphs" font-style="italic">And finally a third multiple line paragraph for the third thinking message to refine the</text>
<text x="27" y="274" fill="#afafaf" textLength="693" lengthAdjust="spacingAndGlyphs" font-style="italic">And finally a third multiple line paragraph for the third thinking message to</text>
<text x="9" y="291" fill="#afafaf" textLength="9" lengthAdjust="spacingAndGlyphs">│</text>
<text x="27" y="291" fill="#afafaf" textLength="81" lengthAdjust="spacingAndGlyphs" font-style="italic">solution.</text>
<text x="27" y="291" fill="#afafaf" textLength="180" lengthAdjust="spacingAndGlyphs" font-style="italic">refine the solution.</text>
</g>
</svg>
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 4.8 KiB

After

Width:  |  Height:  |  Size: 4.8 KiB

42
packages/cli/src/ui/components/__snapshots__/MainContent.test.tsx.snap
View File

@@ -96,15 +96,15 @@ exports[`MainContent > MainContent Tool Output Height Logic > 'Normal mode - Unc
exports[`MainContent > renders a split tool group without a gap between static and pending areas 1`] = `
"AppHeader(full)
╭──────────────────────────────────────────────────────────────────────────────────────────────╮
│ ✓ test-tool A tool for testing │
│ │
│ Part 1 │
│ │
│ ✓ test-tool A tool for testing │
│ │
│ Part 2 │
╰──────────────────────────────────────────────────────────────────────────────────────────────╯
╭──────────────────────────────────────────────────────────────────────────╮
│ ✓ test-tool A tool for testing │
│ │
│ Part 1 │
│ │
│ ✓ test-tool A tool for testing │
│ │
│ Part 2 │
╰──────────────────────────────────────────────────────────────────────────╯
"
`;
@@ -163,16 +163,16 @@ AppHeader(full)
Thinking...
│
│ Initial analysis
│ This is a multiple line paragraph for the first thinking message of how the model analyzes the
│ problem.
│ This is a multiple line paragraph for the first thinking message of how the
│ model analyzes the problem.
│
│ Planning execution
│ This a second multiple line paragraph for the second thinking message explaining the plan in
│ detail so that it wraps around the terminal display.
│ This a second multiple line paragraph for the second thinking message
│ explaining the plan in detail so that it wraps around the terminal display.
│
│ Refining approach
│ And finally a third multiple line paragraph for the third thinking message to refine the
│ solution.
│ And finally a third multiple line paragraph for the third thinking message to
│ refine the solution.
"
`;
@@ -185,14 +185,14 @@ AppHeader(full)
Thinking...
│
│ Initial analysis
│ This is a multiple line paragraph for the first thinking message of how the model analyzes the
│ problem.
│ This is a multiple line paragraph for the first thinking message of how the
│ model analyzes the problem.
│
│ Planning execution
│ This a second multiple line paragraph for the second thinking message explaining the plan in
│ detail so that it wraps around the terminal display.
│ This a second multiple line paragraph for the second thinking message
│ explaining the plan in detail so that it wraps around the terminal display.
│
│ Refining approach
│ And finally a third multiple line paragraph for the third thinking message to refine the
│ solution."
│ And finally a third multiple line paragraph for the third thinking message to
│ refine the solution."
`;

130
packages/cli/src/ui/components/__snapshots__/ToolConfirmationQueue-ToolConfirmationQueue-height-allocation-and-layout-should-handle-security-warning-height-correctly.snap.svg Normal file
View File

@@ -0,0 +1,130 @@
<svg xmlns="http://www.w3.org/2000/svg" width="740" height="598" viewBox="0 0 740 598">
<style>
text { font-family: Consolas, "Courier New", monospace; font-size: 14px; dominant-baseline: text-before-edge; white-space: pre; }
</style>
<rect width="740" height="598" fill="#000000" />
<g transform="translate(10, 10)">
<text x="0" y="2" fill="#ffffaf" textLength="720" lengthAdjust="spacingAndGlyphs">╭──────────────────────────────────────────────────────────────────────────────╮</text>
<text x="0" y="19" fill="#ffffaf" textLength="9" lengthAdjust="spacingAndGlyphs">│</text>
<text x="18" y="19" fill="#ffffaf" textLength="135" lengthAdjust="spacingAndGlyphs" font-weight="bold">Action Required</text>
<text x="648" y="19" fill="#afafaf" textLength="54" lengthAdjust="spacingAndGlyphs">3 of 3</text>
<text x="711" y="19" fill="#ffffaf" textLength="9" lengthAdjust="spacingAndGlyphs">│</text>
<text x="0" y="36" fill="#ffffaf" textLength="9" lengthAdjust="spacingAndGlyphs">│</text>
<text x="711" y="36" fill="#ffffaf" textLength="9" lengthAdjust="spacingAndGlyphs">│</text>
<text x="0" y="53" fill="#ffffaf" textLength="9" lengthAdjust="spacingAndGlyphs">│</text>
<text x="18" y="53" fill="#87afff" textLength="9" lengthAdjust="spacingAndGlyphs">?</text>
<text x="45" y="53" fill="#ffffff" textLength="153" lengthAdjust="spacingAndGlyphs" font-weight="bold">run_shell_command</text>
<text x="207" y="53" fill="#afafaf" textLength="396" lengthAdjust="spacingAndGlyphs">Executes a bash command with a deceptive URL</text>
<text x="711" y="53" fill="#ffffaf" textLength="9" lengthAdjust="spacingAndGlyphs">│</text>
<text x="0" y="70" fill="#ffffaf" textLength="9" lengthAdjust="spacingAndGlyphs">│</text>
<text x="711" y="70" fill="#ffffaf" textLength="9" lengthAdjust="spacingAndGlyphs">│</text>
<text x="0" y="87" fill="#ffffaf" textLength="9" lengthAdjust="spacingAndGlyphs">│</text>
<text x="18" y="87" fill="#afafaf" textLength="225" lengthAdjust="spacingAndGlyphs">... 6 hidden (Ctrl+O) ...</text>
<text x="711" y="87" fill="#ffffaf" textLength="9" lengthAdjust="spacingAndGlyphs">│</text>
<text x="0" y="104" fill="#ffffaf" textLength="9" lengthAdjust="spacingAndGlyphs">│</text>
<text x="18" y="104" fill="#00cdcd" textLength="36" lengthAdjust="spacingAndGlyphs">echo</text>
<text x="63" y="104" fill="#cdcd00" textLength="81" lengthAdjust="spacingAndGlyphs">&quot;Line 37&quot;</text>
<text x="711" y="104" fill="#ffffaf" textLength="9" lengthAdjust="spacingAndGlyphs">│</text>
<text x="0" y="121" fill="#ffffaf" textLength="9" lengthAdjust="spacingAndGlyphs">│</text>
<text x="18" y="121" fill="#00cdcd" textLength="36" lengthAdjust="spacingAndGlyphs">echo</text>
<text x="63" y="121" fill="#cdcd00" textLength="81" lengthAdjust="spacingAndGlyphs">&quot;Line 38&quot;</text>
<text x="711" y="121" fill="#ffffaf" textLength="9" lengthAdjust="spacingAndGlyphs">│</text>
<text x="0" y="138" fill="#ffffaf" textLength="9" lengthAdjust="spacingAndGlyphs">│</text>
<text x="18" y="138" fill="#00cdcd" textLength="36" lengthAdjust="spacingAndGlyphs">echo</text>
<text x="63" y="138" fill="#cdcd00" textLength="81" lengthAdjust="spacingAndGlyphs">&quot;Line 39&quot;</text>
<text x="711" y="138" fill="#ffffaf" textLength="9" lengthAdjust="spacingAndGlyphs">│</text>
<text x="0" y="155" fill="#ffffaf" textLength="9" lengthAdjust="spacingAndGlyphs">│</text>
<text x="18" y="155" fill="#00cdcd" textLength="36" lengthAdjust="spacingAndGlyphs">echo</text>
<text x="63" y="155" fill="#cdcd00" textLength="81" lengthAdjust="spacingAndGlyphs">&quot;Line 40&quot;</text>
<text x="711" y="155" fill="#ffffaf" textLength="9" lengthAdjust="spacingAndGlyphs">│</text>
<text x="0" y="172" fill="#ffffaf" textLength="9" lengthAdjust="spacingAndGlyphs">│</text>
<text x="18" y="172" fill="#00cdcd" textLength="36" lengthAdjust="spacingAndGlyphs">echo</text>
<text x="63" y="172" fill="#cdcd00" textLength="81" lengthAdjust="spacingAndGlyphs">&quot;Line 41&quot;</text>
<text x="711" y="172" fill="#ffffaf" textLength="9" lengthAdjust="spacingAndGlyphs">│</text>
<text x="0" y="189" fill="#ffffaf" textLength="9" lengthAdjust="spacingAndGlyphs">│</text>
<text x="18" y="189" fill="#00cdcd" textLength="36" lengthAdjust="spacingAndGlyphs">echo</text>
<text x="63" y="189" fill="#cdcd00" textLength="81" lengthAdjust="spacingAndGlyphs">&quot;Line 42&quot;</text>
<text x="711" y="189" fill="#ffffaf" textLength="9" lengthAdjust="spacingAndGlyphs">│</text>
<text x="0" y="206" fill="#ffffaf" textLength="9" lengthAdjust="spacingAndGlyphs">│</text>
<text x="18" y="206" fill="#00cdcd" textLength="36" lengthAdjust="spacingAndGlyphs">echo</text>
<text x="63" y="206" fill="#cdcd00" textLength="81" lengthAdjust="spacingAndGlyphs">&quot;Line 43&quot;</text>
<text x="711" y="206" fill="#ffffaf" textLength="9" lengthAdjust="spacingAndGlyphs">│</text>
<text x="0" y="223" fill="#ffffaf" textLength="9" lengthAdjust="spacingAndGlyphs">│</text>
<text x="18" y="223" fill="#00cdcd" textLength="36" lengthAdjust="spacingAndGlyphs">echo</text>
<text x="63" y="223" fill="#cdcd00" textLength="81" lengthAdjust="spacingAndGlyphs">&quot;Line 44&quot;</text>
<text x="711" y="223" fill="#ffffaf" textLength="9" lengthAdjust="spacingAndGlyphs">│</text>
<text x="0" y="240" fill="#ffffaf" textLength="9" lengthAdjust="spacingAndGlyphs">│</text>
<text x="18" y="240" fill="#00cdcd" textLength="36" lengthAdjust="spacingAndGlyphs">echo</text>
<text x="63" y="240" fill="#cdcd00" textLength="81" lengthAdjust="spacingAndGlyphs">&quot;Line 45&quot;</text>
<text x="711" y="240" fill="#ffffaf" textLength="9" lengthAdjust="spacingAndGlyphs">│</text>
<text x="0" y="257" fill="#ffffaf" textLength="9" lengthAdjust="spacingAndGlyphs">│</text>
<text x="18" y="257" fill="#00cdcd" textLength="36" lengthAdjust="spacingAndGlyphs">echo</text>
<text x="63" y="257" fill="#cdcd00" textLength="81" lengthAdjust="spacingAndGlyphs">&quot;Line 46&quot;</text>
<text x="711" y="257" fill="#ffffaf" textLength="9" lengthAdjust="spacingAndGlyphs">│</text>
<text x="0" y="274" fill="#ffffaf" textLength="9" lengthAdjust="spacingAndGlyphs">│</text>
<text x="18" y="274" fill="#00cdcd" textLength="36" lengthAdjust="spacingAndGlyphs">echo</text>
<text x="63" y="274" fill="#cdcd00" textLength="81" lengthAdjust="spacingAndGlyphs">&quot;Line 47&quot;</text>
<text x="711" y="274" fill="#ffffaf" textLength="9" lengthAdjust="spacingAndGlyphs">│</text>
<text x="0" y="291" fill="#ffffaf" textLength="9" lengthAdjust="spacingAndGlyphs">│</text>
<text x="18" y="291" fill="#00cdcd" textLength="36" lengthAdjust="spacingAndGlyphs">echo</text>
<text x="63" y="291" fill="#cdcd00" textLength="81" lengthAdjust="spacingAndGlyphs">&quot;Line 48&quot;</text>
<text x="711" y="291" fill="#ffffaf" textLength="9" lengthAdjust="spacingAndGlyphs">│</text>
<text x="0" y="308" fill="#ffffaf" textLength="9" lengthAdjust="spacingAndGlyphs">│</text>
<text x="18" y="308" fill="#00cdcd" textLength="36" lengthAdjust="spacingAndGlyphs">echo</text>
<text x="63" y="308" fill="#cdcd00" textLength="81" lengthAdjust="spacingAndGlyphs">&quot;Line 49&quot;</text>
<text x="711" y="308" fill="#ffffaf" textLength="9" lengthAdjust="spacingAndGlyphs">│</text>
<text x="0" y="325" fill="#ffffaf" textLength="9" lengthAdjust="spacingAndGlyphs">│</text>
<text x="18" y="325" fill="#00cdcd" textLength="36" lengthAdjust="spacingAndGlyphs">echo</text>
<text x="63" y="325" fill="#cdcd00" textLength="81" lengthAdjust="spacingAndGlyphs">&quot;Line 50&quot;</text>
<text x="711" y="325" fill="#ffffaf" textLength="9" lengthAdjust="spacingAndGlyphs">│</text>
<text x="0" y="342" fill="#ffffaf" textLength="9" lengthAdjust="spacingAndGlyphs">│</text>
<text x="18" y="342" fill="#e5e5e5" textLength="189" lengthAdjust="spacingAndGlyphs">curl https://täst.com</text>
<text x="711" y="342" fill="#ffffaf" textLength="9" lengthAdjust="spacingAndGlyphs">│</text>
<text x="0" y="359" fill="#ffffaf" textLength="9" lengthAdjust="spacingAndGlyphs">│</text>
<text x="711" y="359" fill="#ffffaf" textLength="9" lengthAdjust="spacingAndGlyphs">│</text>
<text x="0" y="376" fill="#ffffaf" textLength="9" lengthAdjust="spacingAndGlyphs">│</text>
<text x="18" y="376" fill="#ffffaf" textLength="18" lengthAdjust="spacingAndGlyphs">⚠ </text>
<text x="45" y="376" fill="#ffffaf" textLength="72" lengthAdjust="spacingAndGlyphs" font-weight="bold">Warning:</text>
<text x="117" y="376" fill="#ffffaf" textLength="243" lengthAdjust="spacingAndGlyphs"> Deceptive URL(s) detected:</text>
<text x="711" y="376" fill="#ffffaf" textLength="9" lengthAdjust="spacingAndGlyphs">│</text>
<text x="0" y="393" fill="#ffffaf" textLength="9" lengthAdjust="spacingAndGlyphs">│</text>
<text x="711" y="393" fill="#ffffaf" textLength="9" lengthAdjust="spacingAndGlyphs">│</text>
<text x="0" y="410" fill="#ffffaf" textLength="9" lengthAdjust="spacingAndGlyphs">│</text>
<text x="72" y="410" fill="#ffffaf" textLength="81" lengthAdjust="spacingAndGlyphs" font-weight="bold">Original:</text>
<text x="162" y="410" fill="#87afff" textLength="153" lengthAdjust="spacingAndGlyphs">https://täst.com/</text>
<text x="711" y="410" fill="#ffffaf" textLength="9" lengthAdjust="spacingAndGlyphs">│</text>
<text x="0" y="427" fill="#ffffaf" textLength="9" lengthAdjust="spacingAndGlyphs">│</text>
<text x="72" y="427" fill="#ffffaf" textLength="207" lengthAdjust="spacingAndGlyphs" font-weight="bold">Actual Host (Punycode):</text>
<text x="288" y="427" fill="#87afff" textLength="216" lengthAdjust="spacingAndGlyphs">https://xn--tst-qla.com/</text>
<text x="711" y="427" fill="#ffffaf" textLength="9" lengthAdjust="spacingAndGlyphs">│</text>
<text x="0" y="444" fill="#ffffaf" textLength="9" lengthAdjust="spacingAndGlyphs">│</text>
<text x="711" y="444" fill="#ffffaf" textLength="9" lengthAdjust="spacingAndGlyphs">│</text>
<text x="0" y="461" fill="#ffffaf" textLength="9" lengthAdjust="spacingAndGlyphs">│</text>
<text x="18" y="461" fill="#ffffff" textLength="243" lengthAdjust="spacingAndGlyphs">Allow execution of: &apos;echo&apos;?</text>
<text x="711" y="461" fill="#ffffaf" textLength="9" lengthAdjust="spacingAndGlyphs">│</text>
<text x="0" y="478" fill="#ffffaf" textLength="9" lengthAdjust="spacingAndGlyphs">│</text>
<text x="711" y="478" fill="#ffffaf" textLength="9" lengthAdjust="spacingAndGlyphs">│</text>
<text x="0" y="495" fill="#ffffaf" textLength="9" lengthAdjust="spacingAndGlyphs">│</text>
<rect x="18" y="493" width="9" height="17" fill="#001a00" />
<text x="18" y="495" fill="#00cd00" textLength="9" lengthAdjust="spacingAndGlyphs">●</text>
<rect x="27" y="493" width="9" height="17" fill="#001a00" />
<rect x="36" y="493" width="18" height="17" fill="#001a00" />
<text x="36" y="495" fill="#00cd00" textLength="18" lengthAdjust="spacingAndGlyphs">1.</text>
<rect x="54" y="493" width="9" height="17" fill="#001a00" />
<rect x="63" y="493" width="90" height="17" fill="#001a00" />
<text x="63" y="495" fill="#00cd00" textLength="90" lengthAdjust="spacingAndGlyphs">Allow once</text>
<rect x="153" y="493" width="135" height="17" fill="#001a00" />
<text x="711" y="495" fill="#ffffaf" textLength="9" lengthAdjust="spacingAndGlyphs">│</text>
<text x="0" y="512" fill="#ffffaf" textLength="9" lengthAdjust="spacingAndGlyphs">│</text>
<text x="36" y="512" fill="#ffffff" textLength="18" lengthAdjust="spacingAndGlyphs">2.</text>
<text x="63" y="512" fill="#ffffff" textLength="198" lengthAdjust="spacingAndGlyphs">Allow for this session</text>
<text x="711" y="512" fill="#ffffaf" textLength="9" lengthAdjust="spacingAndGlyphs">│</text>
<text x="0" y="529" fill="#ffffaf" textLength="9" lengthAdjust="spacingAndGlyphs">│</text>
<text x="36" y="529" fill="#ffffff" textLength="18" lengthAdjust="spacingAndGlyphs">3.</text>
<text x="63" y="529" fill="#ffffff" textLength="225" lengthAdjust="spacingAndGlyphs">No, suggest changes (esc)</text>
<text x="711" y="529" fill="#ffffaf" textLength="9" lengthAdjust="spacingAndGlyphs">│</text>
<text x="0" y="546" fill="#ffffaf" textLength="9" lengthAdjust="spacingAndGlyphs">│</text>
<text x="711" y="546" fill="#ffffaf" textLength="9" lengthAdjust="spacingAndGlyphs">│</text>
<text x="0" y="563" fill="#ffffaf" textLength="720" lengthAdjust="spacingAndGlyphs">╰──────────────────────────────────────────────────────────────────────────────╯</text>
</g>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 13 KiB

458
packages/cli/src/ui/components/__snapshots__/ToolConfirmationQueue-ToolConfirmationQueue-height-allocation-and-layout-should-render-the-full-queue-wrapper-with-borders-and-content-for-large-edit-diffs.snap.svg Normal file
View File

@@ -0,0 +1,458 @@
<svg xmlns="http://www.w3.org/2000/svg" width="740" height="683" viewBox="0 0 740 683">
<style>
text { font-family: Consolas, "Courier New", monospace; font-size: 14px; dominant-baseline: text-before-edge; white-space: pre; }
</style>
<rect width="740" height="683" fill="#000000" />
<g transform="translate(10, 10)">
<text x="0" y="2" fill="#ffffaf" textLength="720" lengthAdjust="spacingAndGlyphs">╭──────────────────────────────────────────────────────────────────────────────╮</text>
<text x="0" y="19" fill="#ffffaf" textLength="9" lengthAdjust="spacingAndGlyphs">│</text>
<text x="18" y="19" fill="#ffffaf" textLength="135" lengthAdjust="spacingAndGlyphs" font-weight="bold">Action Required</text>
<text x="711" y="19" fill="#ffffaf" textLength="9" lengthAdjust="spacingAndGlyphs">│</text>
<text x="0" y="36" fill="#ffffaf" textLength="9" lengthAdjust="spacingAndGlyphs">│</text>
<text x="711" y="36" fill="#ffffaf" textLength="9" lengthAdjust="spacingAndGlyphs">│</text>
<text x="0" y="53" fill="#ffffaf" textLength="9" lengthAdjust="spacingAndGlyphs">│</text>
<text x="18" y="53" fill="#ffffaf" textLength="9" lengthAdjust="spacingAndGlyphs">?</text>
<text x="45" y="53" fill="#ffffff" textLength="63" lengthAdjust="spacingAndGlyphs" font-weight="bold">replace</text>
<text x="117" y="53" fill="#afafaf" textLength="234" lengthAdjust="spacingAndGlyphs">Replaces content in a file</text>
<text x="711" y="53" fill="#ffffaf" textLength="9" lengthAdjust="spacingAndGlyphs">│</text>
<text x="0" y="70" fill="#ffffaf" textLength="9" lengthAdjust="spacingAndGlyphs">│</text>
<text x="711" y="70" fill="#ffffaf" textLength="9" lengthAdjust="spacingAndGlyphs">│</text>
<text x="0" y="87" fill="#ffffaf" textLength="9" lengthAdjust="spacingAndGlyphs">│</text>
<text x="18" y="87" fill="#afafaf" textLength="234" lengthAdjust="spacingAndGlyphs">... 15 hidden (Ctrl+O) ...</text>
<text x="711" y="87" fill="#ffffaf" textLength="9" lengthAdjust="spacingAndGlyphs">│</text>
<text x="0" y="104" fill="#ffffaf" textLength="9" lengthAdjust="spacingAndGlyphs">│</text>
<rect x="18" y="102" width="9" height="17" fill="#005f00" />
<rect x="27" y="102" width="9" height="17" fill="#005f00" />
<text x="27" y="104" fill="#afafaf" textLength="9" lengthAdjust="spacingAndGlyphs">8</text>
<rect x="36" y="102" width="9" height="17" fill="#005f00" />
<rect x="45" y="102" width="9" height="17" fill="#005f00" />
<text x="45" y="104" fill="#d7ffd7" textLength="9" lengthAdjust="spacingAndGlyphs">+</text>
<rect x="54" y="102" width="9" height="17" fill="#005f00" />
<rect x="63" y="102" width="45" height="17" fill="#005f00" />
<text x="63" y="104" fill="#0000ee" textLength="45" lengthAdjust="spacingAndGlyphs">const</text>
<rect x="108" y="102" width="108" height="17" fill="#005f00" />
<text x="108" y="104" fill="#e5e5e5" textLength="108" lengthAdjust="spacingAndGlyphs"> newLine8 = </text>
<rect x="216" y="102" width="36" height="17" fill="#005f00" />
<text x="216" y="104" fill="#0000ee" textLength="36" lengthAdjust="spacingAndGlyphs">true</text>
<rect x="252" y="102" width="9" height="17" fill="#005f00" />
<text x="252" y="104" fill="#e5e5e5" textLength="9" lengthAdjust="spacingAndGlyphs">;</text>
<text x="711" y="104" fill="#ffffaf" textLength="9" lengthAdjust="spacingAndGlyphs">│</text>
<text x="0" y="121" fill="#ffffaf" textLength="9" lengthAdjust="spacingAndGlyphs">│</text>
<rect x="18" y="119" width="9" height="17" fill="#5f0000" />
<rect x="27" y="119" width="9" height="17" fill="#5f0000" />
<text x="27" y="121" fill="#afafaf" textLength="9" lengthAdjust="spacingAndGlyphs">9</text>
<rect x="36" y="119" width="9" height="17" fill="#5f0000" />
<rect x="45" y="119" width="9" height="17" fill="#5f0000" />
<text x="45" y="121" fill="#ff87af" textLength="9" lengthAdjust="spacingAndGlyphs">-</text>
<rect x="54" y="119" width="9" height="17" fill="#5f0000" />
<rect x="63" y="119" width="45" height="17" fill="#5f0000" />
<text x="63" y="121" fill="#0000ee" textLength="45" lengthAdjust="spacingAndGlyphs">const</text>
<rect x="108" y="119" width="108" height="17" fill="#5f0000" />
<text x="108" y="121" fill="#e5e5e5" textLength="108" lengthAdjust="spacingAndGlyphs"> oldLine9 = </text>
<rect x="216" y="119" width="36" height="17" fill="#5f0000" />
<text x="216" y="121" fill="#0000ee" textLength="36" lengthAdjust="spacingAndGlyphs">true</text>
<rect x="252" y="119" width="9" height="17" fill="#5f0000" />
<text x="252" y="121" fill="#e5e5e5" textLength="9" lengthAdjust="spacingAndGlyphs">;</text>
<text x="711" y="121" fill="#ffffaf" textLength="9" lengthAdjust="spacingAndGlyphs">│</text>
<text x="0" y="138" fill="#ffffaf" textLength="9" lengthAdjust="spacingAndGlyphs">│</text>
<rect x="18" y="136" width="9" height="17" fill="#005f00" />
<rect x="27" y="136" width="9" height="17" fill="#005f00" />
<text x="27" y="138" fill="#afafaf" textLength="9" lengthAdjust="spacingAndGlyphs">9</text>
<rect x="36" y="136" width="9" height="17" fill="#005f00" />
<rect x="45" y="136" width="9" height="17" fill="#005f00" />
<text x="45" y="138" fill="#d7ffd7" textLength="9" lengthAdjust="spacingAndGlyphs">+</text>
<rect x="54" y="136" width="9" height="17" fill="#005f00" />
<rect x="63" y="136" width="45" height="17" fill="#005f00" />
<text x="63" y="138" fill="#0000ee" textLength="45" lengthAdjust="spacingAndGlyphs">const</text>
<rect x="108" y="136" width="108" height="17" fill="#005f00" />
<text x="108" y="138" fill="#e5e5e5" textLength="108" lengthAdjust="spacingAndGlyphs"> newLine9 = </text>
<rect x="216" y="136" width="36" height="17" fill="#005f00" />
<text x="216" y="138" fill="#0000ee" textLength="36" lengthAdjust="spacingAndGlyphs">true</text>
<rect x="252" y="136" width="9" height="17" fill="#005f00" />
<text x="252" y="138" fill="#e5e5e5" textLength="9" lengthAdjust="spacingAndGlyphs">;</text>
<text x="711" y="138" fill="#ffffaf" textLength="9" lengthAdjust="spacingAndGlyphs">│</text>
<text x="0" y="155" fill="#ffffaf" textLength="9" lengthAdjust="spacingAndGlyphs">│</text>
<rect x="18" y="153" width="18" height="17" fill="#5f0000" />
<text x="18" y="155" fill="#afafaf" textLength="18" lengthAdjust="spacingAndGlyphs">10</text>
<rect x="36" y="153" width="9" height="17" fill="#5f0000" />
<rect x="45" y="153" width="9" height="17" fill="#5f0000" />
<text x="45" y="155" fill="#ff87af" textLength="9" lengthAdjust="spacingAndGlyphs">-</text>
<rect x="54" y="153" width="9" height="17" fill="#5f0000" />
<rect x="63" y="153" width="45" height="17" fill="#5f0000" />
<text x="63" y="155" fill="#0000ee" textLength="45" lengthAdjust="spacingAndGlyphs">const</text>
<rect x="108" y="153" width="117" height="17" fill="#5f0000" />
<text x="108" y="155" fill="#e5e5e5" textLength="117" lengthAdjust="spacingAndGlyphs"> oldLine10 = </text>
<rect x="225" y="153" width="36" height="17" fill="#5f0000" />
<text x="225" y="155" fill="#0000ee" textLength="36" lengthAdjust="spacingAndGlyphs">true</text>
<rect x="261" y="153" width="9" height="17" fill="#5f0000" />
<text x="261" y="155" fill="#e5e5e5" textLength="9" lengthAdjust="spacingAndGlyphs">;</text>
<text x="711" y="155" fill="#ffffaf" textLength="9" lengthAdjust="spacingAndGlyphs">│</text>
<text x="0" y="172" fill="#ffffaf" textLength="9" lengthAdjust="spacingAndGlyphs">│</text>
<rect x="18" y="170" width="18" height="17" fill="#005f00" />
<text x="18" y="172" fill="#afafaf" textLength="18" lengthAdjust="spacingAndGlyphs">10</text>
<rect x="36" y="170" width="9" height="17" fill="#005f00" />
<rect x="45" y="170" width="9" height="17" fill="#005f00" />
<text x="45" y="172" fill="#d7ffd7" textLength="9" lengthAdjust="spacingAndGlyphs">+</text>
<rect x="54" y="170" width="9" height="17" fill="#005f00" />
<rect x="63" y="170" width="45" height="17" fill="#005f00" />
<text x="63" y="172" fill="#0000ee" textLength="45" lengthAdjust="spacingAndGlyphs">const</text>
<rect x="108" y="170" width="117" height="17" fill="#005f00" />
<text x="108" y="172" fill="#e5e5e5" textLength="117" lengthAdjust="spacingAndGlyphs"> newLine10 = </text>
<rect x="225" y="170" width="36" height="17" fill="#005f00" />
<text x="225" y="172" fill="#0000ee" textLength="36" lengthAdjust="spacingAndGlyphs">true</text>
<rect x="261" y="170" width="9" height="17" fill="#005f00" />
<text x="261" y="172" fill="#e5e5e5" textLength="9" lengthAdjust="spacingAndGlyphs">;</text>
<text x="711" y="172" fill="#ffffaf" textLength="9" lengthAdjust="spacingAndGlyphs">│</text>
<text x="0" y="189" fill="#ffffaf" textLength="9" lengthAdjust="spacingAndGlyphs">│</text>
<rect x="18" y="187" width="18" height="17" fill="#5f0000" />
<text x="18" y="189" fill="#afafaf" textLength="18" lengthAdjust="spacingAndGlyphs">11</text>
<rect x="36" y="187" width="9" height="17" fill="#5f0000" />
<rect x="45" y="187" width="9" height="17" fill="#5f0000" />
<text x="45" y="189" fill="#ff87af" textLength="9" lengthAdjust="spacingAndGlyphs">-</text>
<rect x="54" y="187" width="9" height="17" fill="#5f0000" />
<rect x="63" y="187" width="45" height="17" fill="#5f0000" />
<text x="63" y="189" fill="#0000ee" textLength="45" lengthAdjust="spacingAndGlyphs">const</text>
<rect x="108" y="187" width="117" height="17" fill="#5f0000" />
<text x="108" y="189" fill="#e5e5e5" textLength="117" lengthAdjust="spacingAndGlyphs"> oldLine11 = </text>
<rect x="225" y="187" width="36" height="17" fill="#5f0000" />
<text x="225" y="189" fill="#0000ee" textLength="36" lengthAdjust="spacingAndGlyphs">true</text>
<rect x="261" y="187" width="9" height="17" fill="#5f0000" />
<text x="261" y="189" fill="#e5e5e5" textLength="9" lengthAdjust="spacingAndGlyphs">;</text>
<text x="711" y="189" fill="#ffffaf" textLength="9" lengthAdjust="spacingAndGlyphs">│</text>
<text x="0" y="206" fill="#ffffaf" textLength="9" lengthAdjust="spacingAndGlyphs">│</text>
<rect x="18" y="204" width="18" height="17" fill="#005f00" />
<text x="18" y="206" fill="#afafaf" textLength="18" lengthAdjust="spacingAndGlyphs">11</text>
<rect x="36" y="204" width="9" height="17" fill="#005f00" />
<rect x="45" y="204" width="9" height="17" fill="#005f00" />
<text x="45" y="206" fill="#d7ffd7" textLength="9" lengthAdjust="spacingAndGlyphs">+</text>
<rect x="54" y="204" width="9" height="17" fill="#005f00" />
<rect x="63" y="204" width="45" height="17" fill="#005f00" />
<text x="63" y="206" fill="#0000ee" textLength="45" lengthAdjust="spacingAndGlyphs">const</text>
<rect x="108" y="204" width="117" height="17" fill="#005f00" />
<text x="108" y="206" fill="#e5e5e5" textLength="117" lengthAdjust="spacingAndGlyphs"> newLine11 = </text>
<rect x="225" y="204" width="36" height="17" fill="#005f00" />
<text x="225" y="206" fill="#0000ee" textLength="36" lengthAdjust="spacingAndGlyphs">true</text>
<rect x="261" y="204" width="9" height="17" fill="#005f00" />
<text x="261" y="206" fill="#e5e5e5" textLength="9" lengthAdjust="spacingAndGlyphs">;</text>
<text x="711" y="206" fill="#ffffaf" textLength="9" lengthAdjust="spacingAndGlyphs">│</text>
<text x="0" y="223" fill="#ffffaf" textLength="9" lengthAdjust="spacingAndGlyphs">│</text>
<rect x="18" y="221" width="18" height="17" fill="#5f0000" />
<text x="18" y="223" fill="#afafaf" textLength="18" lengthAdjust="spacingAndGlyphs">12</text>
<rect x="36" y="221" width="9" height="17" fill="#5f0000" />
<rect x="45" y="221" width="9" height="17" fill="#5f0000" />
<text x="45" y="223" fill="#ff87af" textLength="9" lengthAdjust="spacingAndGlyphs">-</text>
<rect x="54" y="221" width="9" height="17" fill="#5f0000" />
<rect x="63" y="221" width="45" height="17" fill="#5f0000" />
<text x="63" y="223" fill="#0000ee" textLength="45" lengthAdjust="spacingAndGlyphs">const</text>
<rect x="108" y="221" width="117" height="17" fill="#5f0000" />
<text x="108" y="223" fill="#e5e5e5" textLength="117" lengthAdjust="spacingAndGlyphs"> oldLine12 = </text>
<rect x="225" y="221" width="36" height="17" fill="#5f0000" />
<text x="225" y="223" fill="#0000ee" textLength="36" lengthAdjust="spacingAndGlyphs">true</text>
<rect x="261" y="221" width="9" height="17" fill="#5f0000" />
<text x="261" y="223" fill="#e5e5e5" textLength="9" lengthAdjust="spacingAndGlyphs">;</text>
<text x="711" y="223" fill="#ffffaf" textLength="9" lengthAdjust="spacingAndGlyphs">│</text>
<text x="0" y="240" fill="#ffffaf" textLength="9" lengthAdjust="spacingAndGlyphs">│</text>
<rect x="18" y="238" width="18" height="17" fill="#005f00" />
<text x="18" y="240" fill="#afafaf" textLength="18" lengthAdjust="spacingAndGlyphs">12</text>
<rect x="36" y="238" width="9" height="17" fill="#005f00" />
<rect x="45" y="238" width="9" height="17" fill="#005f00" />
<text x="45" y="240" fill="#d7ffd7" textLength="9" lengthAdjust="spacingAndGlyphs">+</text>
<rect x="54" y="238" width="9" height="17" fill="#005f00" />
<rect x="63" y="238" width="45" height="17" fill="#005f00" />
<text x="63" y="240" fill="#0000ee" textLength="45" lengthAdjust="spacingAndGlyphs">const</text>
<rect x="108" y="238" width="117" height="17" fill="#005f00" />
<text x="108" y="240" fill="#e5e5e5" textLength="117" lengthAdjust="spacingAndGlyphs"> newLine12 = </text>
<rect x="225" y="238" width="36" height="17" fill="#005f00" />
<text x="225" y="240" fill="#0000ee" textLength="36" lengthAdjust="spacingAndGlyphs">true</text>
<rect x="261" y="238" width="9" height="17" fill="#005f00" />
<text x="261" y="240" fill="#e5e5e5" textLength="9" lengthAdjust="spacingAndGlyphs">;</text>
<text x="711" y="240" fill="#ffffaf" textLength="9" lengthAdjust="spacingAndGlyphs">│</text>
<text x="0" y="257" fill="#ffffaf" textLength="9" lengthAdjust="spacingAndGlyphs">│</text>
<rect x="18" y="255" width="18" height="17" fill="#5f0000" />
<text x="18" y="257" fill="#afafaf" textLength="18" lengthAdjust="spacingAndGlyphs">13</text>
<rect x="36" y="255" width="9" height="17" fill="#5f0000" />
<rect x="45" y="255" width="9" height="17" fill="#5f0000" />
<text x="45" y="257" fill="#ff87af" textLength="9" lengthAdjust="spacingAndGlyphs">-</text>
<rect x="54" y="255" width="9" height="17" fill="#5f0000" />
<rect x="63" y="255" width="45" height="17" fill="#5f0000" />
<text x="63" y="257" fill="#0000ee" textLength="45" lengthAdjust="spacingAndGlyphs">const</text>
<rect x="108" y="255" width="117" height="17" fill="#5f0000" />
<text x="108" y="257" fill="#e5e5e5" textLength="117" lengthAdjust="spacingAndGlyphs"> oldLine13 = </text>
<rect x="225" y="255" width="36" height="17" fill="#5f0000" />
<text x="225" y="257" fill="#0000ee" textLength="36" lengthAdjust="spacingAndGlyphs">true</text>
<rect x="261" y="255" width="9" height="17" fill="#5f0000" />
<text x="261" y="257" fill="#e5e5e5" textLength="9" lengthAdjust="spacingAndGlyphs">;</text>
<text x="711" y="257" fill="#ffffaf" textLength="9" lengthAdjust="spacingAndGlyphs">│</text>
<text x="0" y="274" fill="#ffffaf" textLength="9" lengthAdjust="spacingAndGlyphs">│</text>
<rect x="18" y="272" width="18" height="17" fill="#005f00" />
<text x="18" y="274" fill="#afafaf" textLength="18" lengthAdjust="spacingAndGlyphs">13</text>
<rect x="36" y="272" width="9" height="17" fill="#005f00" />
<rect x="45" y="272" width="9" height="17" fill="#005f00" />
<text x="45" y="274" fill="#d7ffd7" textLength="9" lengthAdjust="spacingAndGlyphs">+</text>
<rect x="54" y="272" width="9" height="17" fill="#005f00" />
<rect x="63" y="272" width="45" height="17" fill="#005f00" />
<text x="63" y="274" fill="#0000ee" textLength="45" lengthAdjust="spacingAndGlyphs">const</text>
<rect x="108" y="272" width="117" height="17" fill="#005f00" />
<text x="108" y="274" fill="#e5e5e5" textLength="117" lengthAdjust="spacingAndGlyphs"> newLine13 = </text>
<rect x="225" y="272" width="36" height="17" fill="#005f00" />
<text x="225" y="274" fill="#0000ee" textLength="36" lengthAdjust="spacingAndGlyphs">true</text>
<rect x="261" y="272" width="9" height="17" fill="#005f00" />
<text x="261" y="274" fill="#e5e5e5" textLength="9" lengthAdjust="spacingAndGlyphs">;</text>
<text x="711" y="274" fill="#ffffaf" textLength="9" lengthAdjust="spacingAndGlyphs">│</text>
<text x="0" y="291" fill="#ffffaf" textLength="9" lengthAdjust="spacingAndGlyphs">│</text>
<rect x="18" y="289" width="18" height="17" fill="#5f0000" />
<text x="18" y="291" fill="#afafaf" textLength="18" lengthAdjust="spacingAndGlyphs">14</text>
<rect x="36" y="289" width="9" height="17" fill="#5f0000" />
<rect x="45" y="289" width="9" height="17" fill="#5f0000" />
<text x="45" y="291" fill="#ff87af" textLength="9" lengthAdjust="spacingAndGlyphs">-</text>
<rect x="54" y="289" width="9" height="17" fill="#5f0000" />
<rect x="63" y="289" width="45" height="17" fill="#5f0000" />
<text x="63" y="291" fill="#0000ee" textLength="45" lengthAdjust="spacingAndGlyphs">const</text>
<rect x="108" y="289" width="117" height="17" fill="#5f0000" />
<text x="108" y="291" fill="#e5e5e5" textLength="117" lengthAdjust="spacingAndGlyphs"> oldLine14 = </text>
<rect x="225" y="289" width="36" height="17" fill="#5f0000" />
<text x="225" y="291" fill="#0000ee" textLength="36" lengthAdjust="spacingAndGlyphs">true</text>
<rect x="261" y="289" width="9" height="17" fill="#5f0000" />
<text x="261" y="291" fill="#e5e5e5" textLength="9" lengthAdjust="spacingAndGlyphs">;</text>
<text x="711" y="291" fill="#ffffaf" textLength="9" lengthAdjust="spacingAndGlyphs">│</text>
<text x="0" y="308" fill="#ffffaf" textLength="9" lengthAdjust="spacingAndGlyphs">│</text>
<rect x="18" y="306" width="18" height="17" fill="#005f00" />
<text x="18" y="308" fill="#afafaf" textLength="18" lengthAdjust="spacingAndGlyphs">14</text>
<rect x="36" y="306" width="9" height="17" fill="#005f00" />
<rect x="45" y="306" width="9" height="17" fill="#005f00" />
<text x="45" y="308" fill="#d7ffd7" textLength="9" lengthAdjust="spacingAndGlyphs">+</text>
<rect x="54" y="306" width="9" height="17" fill="#005f00" />
<rect x="63" y="306" width="45" height="17" fill="#005f00" />
<text x="63" y="308" fill="#0000ee" textLength="45" lengthAdjust="spacingAndGlyphs">const</text>
<rect x="108" y="306" width="117" height="17" fill="#005f00" />
<text x="108" y="308" fill="#e5e5e5" textLength="117" lengthAdjust="spacingAndGlyphs"> newLine14 = </text>
<rect x="225" y="306" width="36" height="17" fill="#005f00" />
<text x="225" y="308" fill="#0000ee" textLength="36" lengthAdjust="spacingAndGlyphs">true</text>
<rect x="261" y="306" width="9" height="17" fill="#005f00" />
<text x="261" y="308" fill="#e5e5e5" textLength="9" lengthAdjust="spacingAndGlyphs">;</text>
<text x="711" y="308" fill="#ffffaf" textLength="9" lengthAdjust="spacingAndGlyphs">│</text>
<text x="0" y="325" fill="#ffffaf" textLength="9" lengthAdjust="spacingAndGlyphs">│</text>
<rect x="18" y="323" width="18" height="17" fill="#5f0000" />
<text x="18" y="325" fill="#afafaf" textLength="18" lengthAdjust="spacingAndGlyphs">15</text>
<rect x="36" y="323" width="9" height="17" fill="#5f0000" />
<rect x="45" y="323" width="9" height="17" fill="#5f0000" />
<text x="45" y="325" fill="#ff87af" textLength="9" lengthAdjust="spacingAndGlyphs">-</text>
<rect x="54" y="323" width="9" height="17" fill="#5f0000" />
<rect x="63" y="323" width="45" height="17" fill="#5f0000" />
<text x="63" y="325" fill="#0000ee" textLength="45" lengthAdjust="spacingAndGlyphs">const</text>
<rect x="108" y="323" width="117" height="17" fill="#5f0000" />
<text x="108" y="325" fill="#e5e5e5" textLength="117" lengthAdjust="spacingAndGlyphs"> oldLine15 = </text>
<rect x="225" y="323" width="36" height="17" fill="#5f0000" />
<text x="225" y="325" fill="#0000ee" textLength="36" lengthAdjust="spacingAndGlyphs">true</text>
<rect x="261" y="323" width="9" height="17" fill="#5f0000" />
<text x="261" y="325" fill="#e5e5e5" textLength="9" lengthAdjust="spacingAndGlyphs">;</text>
<text x="711" y="325" fill="#ffffaf" textLength="9" lengthAdjust="spacingAndGlyphs">│</text>
<text x="0" y="342" fill="#ffffaf" textLength="9" lengthAdjust="spacingAndGlyphs">│</text>
<rect x="18" y="340" width="18" height="17" fill="#005f00" />
<text x="18" y="342" fill="#afafaf" textLength="18" lengthAdjust="spacingAndGlyphs">15</text>
<rect x="36" y="340" width="9" height="17" fill="#005f00" />
<rect x="45" y="340" width="9" height="17" fill="#005f00" />
<text x="45" y="342" fill="#d7ffd7" textLength="9" lengthAdjust="spacingAndGlyphs">+</text>
<rect x="54" y="340" width="9" height="17" fill="#005f00" />
<rect x="63" y="340" width="45" height="17" fill="#005f00" />
<text x="63" y="342" fill="#0000ee" textLength="45" lengthAdjust="spacingAndGlyphs">const</text>
<rect x="108" y="340" width="117" height="17" fill="#005f00" />
<text x="108" y="342" fill="#e5e5e5" textLength="117" lengthAdjust="spacingAndGlyphs"> newLine15 = </text>
<rect x="225" y="340" width="36" height="17" fill="#005f00" />
<text x="225" y="342" fill="#0000ee" textLength="36" lengthAdjust="spacingAndGlyphs">true</text>
<rect x="261" y="340" width="9" height="17" fill="#005f00" />
<text x="261" y="342" fill="#e5e5e5" textLength="9" lengthAdjust="spacingAndGlyphs">;</text>
<text x="711" y="342" fill="#ffffaf" textLength="9" lengthAdjust="spacingAndGlyphs">│</text>
<text x="0" y="359" fill="#ffffaf" textLength="9" lengthAdjust="spacingAndGlyphs">│</text>
<rect x="18" y="357" width="18" height="17" fill="#5f0000" />
<text x="18" y="359" fill="#afafaf" textLength="18" lengthAdjust="spacingAndGlyphs">16</text>
<rect x="36" y="357" width="9" height="17" fill="#5f0000" />
<rect x="45" y="357" width="9" height="17" fill="#5f0000" />
<text x="45" y="359" fill="#ff87af" textLength="9" lengthAdjust="spacingAndGlyphs">-</text>
<rect x="54" y="357" width="9" height="17" fill="#5f0000" />
<rect x="63" y="357" width="45" height="17" fill="#5f0000" />
<text x="63" y="359" fill="#0000ee" textLength="45" lengthAdjust="spacingAndGlyphs">const</text>
<rect x="108" y="357" width="117" height="17" fill="#5f0000" />
<text x="108" y="359" fill="#e5e5e5" textLength="117" lengthAdjust="spacingAndGlyphs"> oldLine16 = </text>
<rect x="225" y="357" width="36" height="17" fill="#5f0000" />
<text x="225" y="359" fill="#0000ee" textLength="36" lengthAdjust="spacingAndGlyphs">true</text>
<rect x="261" y="357" width="9" height="17" fill="#5f0000" />
<text x="261" y="359" fill="#e5e5e5" textLength="9" lengthAdjust="spacingAndGlyphs">;</text>
<text x="711" y="359" fill="#ffffaf" textLength="9" lengthAdjust="spacingAndGlyphs">│</text>
<text x="0" y="376" fill="#ffffaf" textLength="9" lengthAdjust="spacingAndGlyphs">│</text>
<rect x="18" y="374" width="18" height="17" fill="#005f00" />
<text x="18" y="376" fill="#afafaf" textLength="18" lengthAdjust="spacingAndGlyphs">16</text>
<rect x="36" y="374" width="9" height="17" fill="#005f00" />
<rect x="45" y="374" width="9" height="17" fill="#005f00" />
<text x="45" y="376" fill="#d7ffd7" textLength="9" lengthAdjust="spacingAndGlyphs">+</text>
<rect x="54" y="374" width="9" height="17" fill="#005f00" />
<rect x="63" y="374" width="45" height="17" fill="#005f00" />
<text x="63" y="376" fill="#0000ee" textLength="45" lengthAdjust="spacingAndGlyphs">const</text>
<rect x="108" y="374" width="117" height="17" fill="#005f00" />
<text x="108" y="376" fill="#e5e5e5" textLength="117" lengthAdjust="spacingAndGlyphs"> newLine16 = </text>
<rect x="225" y="374" width="36" height="17" fill="#005f00" />
<text x="225" y="376" fill="#0000ee" textLength="36" lengthAdjust="spacingAndGlyphs">true</text>
<rect x="261" y="374" width="9" height="17" fill="#005f00" />
<text x="261" y="376" fill="#e5e5e5" textLength="9" lengthAdjust="spacingAndGlyphs">;</text>
<text x="711" y="376" fill="#ffffaf" textLength="9" lengthAdjust="spacingAndGlyphs">│</text>
<text x="0" y="393" fill="#ffffaf" textLength="9" lengthAdjust="spacingAndGlyphs">│</text>
<rect x="18" y="391" width="18" height="17" fill="#5f0000" />
<text x="18" y="393" fill="#afafaf" textLength="18" lengthAdjust="spacingAndGlyphs">17</text>
<rect x="36" y="391" width="9" height="17" fill="#5f0000" />
<rect x="45" y="391" width="9" height="17" fill="#5f0000" />
<text x="45" y="393" fill="#ff87af" textLength="9" lengthAdjust="spacingAndGlyphs">-</text>
<rect x="54" y="391" width="9" height="17" fill="#5f0000" />
<rect x="63" y="391" width="45" height="17" fill="#5f0000" />
<text x="63" y="393" fill="#0000ee" textLength="45" lengthAdjust="spacingAndGlyphs">const</text>
<rect x="108" y="391" width="117" height="17" fill="#5f0000" />
<text x="108" y="393" fill="#e5e5e5" textLength="117" lengthAdjust="spacingAndGlyphs"> oldLine17 = </text>
<rect x="225" y="391" width="36" height="17" fill="#5f0000" />
<text x="225" y="393" fill="#0000ee" textLength="36" lengthAdjust="spacingAndGlyphs">true</text>
<rect x="261" y="391" width="9" height="17" fill="#5f0000" />
<text x="261" y="393" fill="#e5e5e5" textLength="9" lengthAdjust="spacingAndGlyphs">;</text>
<text x="711" y="393" fill="#ffffaf" textLength="9" lengthAdjust="spacingAndGlyphs">│</text>
<text x="0" y="410" fill="#ffffaf" textLength="9" lengthAdjust="spacingAndGlyphs">│</text>
<rect x="18" y="408" width="18" height="17" fill="#005f00" />
<text x="18" y="410" fill="#afafaf" textLength="18" lengthAdjust="spacingAndGlyphs">17</text>
<rect x="36" y="408" width="9" height="17" fill="#005f00" />
<rect x="45" y="408" width="9" height="17" fill="#005f00" />
<text x="45" y="410" fill="#d7ffd7" textLength="9" lengthAdjust="spacingAndGlyphs">+</text>
<rect x="54" y="408" width="9" height="17" fill="#005f00" />
<rect x="63" y="408" width="45" height="17" fill="#005f00" />
<text x="63" y="410" fill="#0000ee" textLength="45" lengthAdjust="spacingAndGlyphs">const</text>
<rect x="108" y="408" width="117" height="17" fill="#005f00" />
<text x="108" y="410" fill="#e5e5e5" textLength="117" lengthAdjust="spacingAndGlyphs"> newLine17 = </text>
<rect x="225" y="408" width="36" height="17" fill="#005f00" />
<text x="225" y="410" fill="#0000ee" textLength="36" lengthAdjust="spacingAndGlyphs">true</text>
<rect x="261" y="408" width="9" height="17" fill="#005f00" />
<text x="261" y="410" fill="#e5e5e5" textLength="9" lengthAdjust="spacingAndGlyphs">;</text>
<text x="711" y="410" fill="#ffffaf" textLength="9" lengthAdjust="spacingAndGlyphs">│</text>
<text x="0" y="427" fill="#ffffaf" textLength="9" lengthAdjust="spacingAndGlyphs">│</text>
<rect x="18" y="425" width="18" height="17" fill="#5f0000" />
<text x="18" y="427" fill="#afafaf" textLength="18" lengthAdjust="spacingAndGlyphs">18</text>
<rect x="36" y="425" width="9" height="17" fill="#5f0000" />
<rect x="45" y="425" width="9" height="17" fill="#5f0000" />
<text x="45" y="427" fill="#ff87af" textLength="9" lengthAdjust="spacingAndGlyphs">-</text>
<rect x="54" y="425" width="9" height="17" fill="#5f0000" />
<rect x="63" y="425" width="45" height="17" fill="#5f0000" />
<text x="63" y="427" fill="#0000ee" textLength="45" lengthAdjust="spacingAndGlyphs">const</text>
<rect x="108" y="425" width="117" height="17" fill="#5f0000" />
<text x="108" y="427" fill="#e5e5e5" textLength="117" lengthAdjust="spacingAndGlyphs"> oldLine18 = </text>
<rect x="225" y="425" width="36" height="17" fill="#5f0000" />
<text x="225" y="427" fill="#0000ee" textLength="36" lengthAdjust="spacingAndGlyphs">true</text>
<rect x="261" y="425" width="9" height="17" fill="#5f0000" />
<text x="261" y="427" fill="#e5e5e5" textLength="9" lengthAdjust="spacingAndGlyphs">;</text>
<text x="711" y="427" fill="#ffffaf" textLength="9" lengthAdjust="spacingAndGlyphs">│</text>
<text x="0" y="444" fill="#ffffaf" textLength="9" lengthAdjust="spacingAndGlyphs">│</text>
<rect x="18" y="442" width="18" height="17" fill="#005f00" />
<text x="18" y="444" fill="#afafaf" textLength="18" lengthAdjust="spacingAndGlyphs">18</text>
<rect x="36" y="442" width="9" height="17" fill="#005f00" />
<rect x="45" y="442" width="9" height="17" fill="#005f00" />
<text x="45" y="444" fill="#d7ffd7" textLength="9" lengthAdjust="spacingAndGlyphs">+</text>
<rect x="54" y="442" width="9" height="17" fill="#005f00" />
<rect x="63" y="442" width="45" height="17" fill="#005f00" />
<text x="63" y="444" fill="#0000ee" textLength="45" lengthAdjust="spacingAndGlyphs">const</text>
<rect x="108" y="442" width="117" height="17" fill="#005f00" />
<text x="108" y="444" fill="#e5e5e5" textLength="117" lengthAdjust="spacingAndGlyphs"> newLine18 = </text>
<rect x="225" y="442" width="36" height="17" fill="#005f00" />
<text x="225" y="444" fill="#0000ee" textLength="36" lengthAdjust="spacingAndGlyphs">true</text>
<rect x="261" y="442" width="9" height="17" fill="#005f00" />
<text x="261" y="444" fill="#e5e5e5" textLength="9" lengthAdjust="spacingAndGlyphs">;</text>
<text x="711" y="444" fill="#ffffaf" textLength="9" lengthAdjust="spacingAndGlyphs">│</text>
<text x="0" y="461" fill="#ffffaf" textLength="9" lengthAdjust="spacingAndGlyphs">│</text>
<rect x="18" y="459" width="18" height="17" fill="#5f0000" />
<text x="18" y="461" fill="#afafaf" textLength="18" lengthAdjust="spacingAndGlyphs">19</text>
<rect x="36" y="459" width="9" height="17" fill="#5f0000" />
<rect x="45" y="459" width="9" height="17" fill="#5f0000" />
<text x="45" y="461" fill="#ff87af" textLength="9" lengthAdjust="spacingAndGlyphs">-</text>
<rect x="54" y="459" width="9" height="17" fill="#5f0000" />
<rect x="63" y="459" width="45" height="17" fill="#5f0000" />
<text x="63" y="461" fill="#0000ee" textLength="45" lengthAdjust="spacingAndGlyphs">const</text>
<rect x="108" y="459" width="117" height="17" fill="#5f0000" />
<text x="108" y="461" fill="#e5e5e5" textLength="117" lengthAdjust="spacingAndGlyphs"> oldLine19 = </text>
<rect x="225" y="459" width="36" height="17" fill="#5f0000" />
<text x="225" y="461" fill="#0000ee" textLength="36" lengthAdjust="spacingAndGlyphs">true</text>
<rect x="261" y="459" width="9" height="17" fill="#5f0000" />
<text x="261" y="461" fill="#e5e5e5" textLength="9" lengthAdjust="spacingAndGlyphs">;</text>
<text x="711" y="461" fill="#ffffaf" textLength="9" lengthAdjust="spacingAndGlyphs">│</text>
<text x="0" y="478" fill="#ffffaf" textLength="9" lengthAdjust="spacingAndGlyphs">│</text>
<rect x="18" y="476" width="18" height="17" fill="#005f00" />
<text x="18" y="478" fill="#afafaf" textLength="18" lengthAdjust="spacingAndGlyphs">19</text>
<rect x="36" y="476" width="9" height="17" fill="#005f00" />
<rect x="45" y="476" width="9" height="17" fill="#005f00" />
<text x="45" y="478" fill="#d7ffd7" textLength="9" lengthAdjust="spacingAndGlyphs">+</text>
<rect x="54" y="476" width="9" height="17" fill="#005f00" />
<rect x="63" y="476" width="45" height="17" fill="#005f00" />
<text x="63" y="478" fill="#0000ee" textLength="45" lengthAdjust="spacingAndGlyphs">const</text>
<rect x="108" y="476" width="117" height="17" fill="#005f00" />
<text x="108" y="478" fill="#e5e5e5" textLength="117" lengthAdjust="spacingAndGlyphs"> newLine19 = </text>
<rect x="225" y="476" width="36" height="17" fill="#005f00" />
<text x="225" y="478" fill="#0000ee" textLength="36" lengthAdjust="spacingAndGlyphs">true</text>
<rect x="261" y="476" width="9" height="17" fill="#005f00" />
<text x="261" y="478" fill="#e5e5e5" textLength="9" lengthAdjust="spacingAndGlyphs">;</text>
<text x="711" y="478" fill="#ffffaf" textLength="9" lengthAdjust="spacingAndGlyphs">│</text>
<text x="0" y="495" fill="#ffffaf" textLength="9" lengthAdjust="spacingAndGlyphs">│</text>
<rect x="18" y="493" width="18" height="17" fill="#5f0000" />
<text x="18" y="495" fill="#afafaf" textLength="18" lengthAdjust="spacingAndGlyphs">20</text>
<rect x="36" y="493" width="9" height="17" fill="#5f0000" />
<rect x="45" y="493" width="9" height="17" fill="#5f0000" />
<text x="45" y="495" fill="#ff87af" textLength="9" lengthAdjust="spacingAndGlyphs">-</text>
<rect x="54" y="493" width="9" height="17" fill="#5f0000" />
<rect x="63" y="493" width="45" height="17" fill="#5f0000" />
<text x="63" y="495" fill="#0000ee" textLength="45" lengthAdjust="spacingAndGlyphs">const</text>
<rect x="108" y="493" width="117" height="17" fill="#5f0000" />
<text x="108" y="495" fill="#e5e5e5" textLength="117" lengthAdjust="spacingAndGlyphs"> oldLine20 = </text>
<rect x="225" y="493" width="36" height="17" fill="#5f0000" />
<text x="225" y="495" fill="#0000ee" textLength="36" lengthAdjust="spacingAndGlyphs">true</text>
<rect x="261" y="493" width="9" height="17" fill="#5f0000" />
<text x="261" y="495" fill="#e5e5e5" textLength="9" lengthAdjust="spacingAndGlyphs">;</text>
<text x="711" y="495" fill="#ffffaf" textLength="9" lengthAdjust="spacingAndGlyphs">│</text>
<text x="0" y="512" fill="#ffffaf" textLength="9" lengthAdjust="spacingAndGlyphs">│</text>
<rect x="18" y="510" width="18" height="17" fill="#005f00" />
<text x="18" y="512" fill="#afafaf" textLength="18" lengthAdjust="spacingAndGlyphs">20</text>
<rect x="36" y="510" width="9" height="17" fill="#005f00" />
<rect x="45" y="510" width="9" height="17" fill="#005f00" />
<text x="45" y="512" fill="#d7ffd7" textLength="9" lengthAdjust="spacingAndGlyphs">+</text>
<rect x="54" y="510" width="9" height="17" fill="#005f00" />
<rect x="63" y="510" width="45" height="17" fill="#005f00" />
<text x="63" y="512" fill="#0000ee" textLength="45" lengthAdjust="spacingAndGlyphs">const</text>
<rect x="108" y="510" width="117" height="17" fill="#005f00" />
<text x="108" y="512" fill="#e5e5e5" textLength="117" lengthAdjust="spacingAndGlyphs"> newLine20 = </text>
<rect x="225" y="510" width="36" height="17" fill="#005f00" />
<text x="225" y="512" fill="#0000ee" textLength="36" lengthAdjust="spacingAndGlyphs">true</text>
<rect x="261" y="510" width="9" height="17" fill="#005f00" />
<text x="261" y="512" fill="#e5e5e5" textLength="9" lengthAdjust="spacingAndGlyphs">;</text>
<text x="711" y="512" fill="#ffffaf" textLength="9" lengthAdjust="spacingAndGlyphs">│</text>
<text x="0" y="529" fill="#ffffaf" textLength="9" lengthAdjust="spacingAndGlyphs">│</text>
<text x="18" y="529" fill="#ffffff" textLength="162" lengthAdjust="spacingAndGlyphs">Apply this change?</text>
<text x="711" y="529" fill="#ffffaf" textLength="9" lengthAdjust="spacingAndGlyphs">│</text>
<text x="0" y="546" fill="#ffffaf" textLength="9" lengthAdjust="spacingAndGlyphs">│</text>
<text x="711" y="546" fill="#ffffaf" textLength="9" lengthAdjust="spacingAndGlyphs">│</text>
<text x="0" y="563" fill="#ffffaf" textLength="9" lengthAdjust="spacingAndGlyphs">│</text>
<rect x="18" y="561" width="9" height="17" fill="#001a00" />
<text x="18" y="563" fill="#00cd00" textLength="9" lengthAdjust="spacingAndGlyphs">●</text>
<rect x="27" y="561" width="9" height="17" fill="#001a00" />
<rect x="36" y="561" width="18" height="17" fill="#001a00" />
<text x="36" y="563" fill="#00cd00" textLength="18" lengthAdjust="spacingAndGlyphs">1.</text>
<rect x="54" y="561" width="9" height="17" fill="#001a00" />
<rect x="63" y="561" width="90" height="17" fill="#001a00" />
<text x="63" y="563" fill="#00cd00" textLength="90" lengthAdjust="spacingAndGlyphs">Allow once</text>
<rect x="153" y="561" width="153" height="17" fill="#001a00" />
<text x="711" y="563" fill="#ffffaf" textLength="9" lengthAdjust="spacingAndGlyphs">│</text>
<text x="0" y="580" fill="#ffffaf" textLength="9" lengthAdjust="spacingAndGlyphs">│</text>
<text x="36" y="580" fill="#ffffff" textLength="18" lengthAdjust="spacingAndGlyphs">2.</text>
<text x="63" y="580" fill="#ffffff" textLength="198" lengthAdjust="spacingAndGlyphs">Allow for this session</text>
<text x="711" y="580" fill="#ffffaf" textLength="9" lengthAdjust="spacingAndGlyphs">│</text>
<text x="0" y="597" fill="#ffffaf" textLength="9" lengthAdjust="spacingAndGlyphs">│</text>
<text x="36" y="597" fill="#ffffff" textLength="18" lengthAdjust="spacingAndGlyphs">3.</text>
<text x="63" y="597" fill="#ffffff" textLength="243" lengthAdjust="spacingAndGlyphs">Modify with external editor</text>
<text x="711" y="597" fill="#ffffaf" textLength="9" lengthAdjust="spacingAndGlyphs">│</text>
<text x="0" y="614" fill="#ffffaf" textLength="9" lengthAdjust="spacingAndGlyphs">│</text>
<text x="36" y="614" fill="#ffffff" textLength="18" lengthAdjust="spacingAndGlyphs">4.</text>
<text x="63" y="614" fill="#ffffff" textLength="225" lengthAdjust="spacingAndGlyphs">No, suggest changes (esc)</text>
<text x="711" y="614" fill="#ffffaf" textLength="9" lengthAdjust="spacingAndGlyphs">│</text>
<text x="0" y="631" fill="#ffffaf" textLength="9" lengthAdjust="spacingAndGlyphs">│</text>
<text x="711" y="631" fill="#ffffaf" textLength="9" lengthAdjust="spacingAndGlyphs">│</text>
<text x="0" y="648" fill="#ffffaf" textLength="720" lengthAdjust="spacingAndGlyphs">╰──────────────────────────────────────────────────────────────────────────────╯</text>
</g>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 38 KiB

156
packages/cli/src/ui/components/__snapshots__/ToolConfirmationQueue-ToolConfirmationQueue-height-allocation-and-layout-should-render-the-full-queue-wrapper-with-borders-and-content-for-large-exec-commands.snap.svg Normal file
View File

@@ -0,0 +1,156 @@
<svg xmlns="http://www.w3.org/2000/svg" width="740" height="683" viewBox="0 0 740 683">
<style>
text { font-family: Consolas, "Courier New", monospace; font-size: 14px; dominant-baseline: text-before-edge; white-space: pre; }
</style>
<rect width="740" height="683" fill="#000000" />
<g transform="translate(10, 10)">
<text x="0" y="2" fill="#ffffaf" textLength="720" lengthAdjust="spacingAndGlyphs">╭──────────────────────────────────────────────────────────────────────────────╮</text>
<text x="0" y="19" fill="#ffffaf" textLength="9" lengthAdjust="spacingAndGlyphs">│</text>
<text x="18" y="19" fill="#ffffaf" textLength="135" lengthAdjust="spacingAndGlyphs" font-weight="bold">Action Required</text>
<text x="648" y="19" fill="#afafaf" textLength="54" lengthAdjust="spacingAndGlyphs">2 of 3</text>
<text x="711" y="19" fill="#ffffaf" textLength="9" lengthAdjust="spacingAndGlyphs">│</text>
<text x="0" y="36" fill="#ffffaf" textLength="9" lengthAdjust="spacingAndGlyphs">│</text>
<text x="711" y="36" fill="#ffffaf" textLength="9" lengthAdjust="spacingAndGlyphs">│</text>
<text x="0" y="53" fill="#ffffaf" textLength="9" lengthAdjust="spacingAndGlyphs">│</text>
<text x="18" y="53" fill="#87afff" textLength="9" lengthAdjust="spacingAndGlyphs">?</text>
<text x="45" y="53" fill="#ffffff" textLength="153" lengthAdjust="spacingAndGlyphs" font-weight="bold">run_shell_command</text>
<text x="207" y="53" fill="#afafaf" textLength="207" lengthAdjust="spacingAndGlyphs">Executes a bash command</text>
<text x="711" y="53" fill="#ffffaf" textLength="9" lengthAdjust="spacingAndGlyphs">│</text>
<text x="0" y="70" fill="#ffffaf" textLength="9" lengthAdjust="spacingAndGlyphs">│</text>
<text x="711" y="70" fill="#ffffaf" textLength="9" lengthAdjust="spacingAndGlyphs">│</text>
<text x="0" y="87" fill="#ffffaf" textLength="9" lengthAdjust="spacingAndGlyphs">│</text>
<text x="18" y="87" fill="#afafaf" textLength="234" lengthAdjust="spacingAndGlyphs">... 24 hidden (Ctrl+O) ...</text>
<text x="711" y="87" fill="#ffffaf" textLength="9" lengthAdjust="spacingAndGlyphs">│</text>
<text x="0" y="104" fill="#ffffaf" textLength="9" lengthAdjust="spacingAndGlyphs">│</text>
<text x="18" y="104" fill="#00cdcd" textLength="36" lengthAdjust="spacingAndGlyphs">echo</text>
<text x="63" y="104" fill="#cdcd00" textLength="81" lengthAdjust="spacingAndGlyphs">&quot;Line 25&quot;</text>
<text x="711" y="104" fill="#ffffaf" textLength="9" lengthAdjust="spacingAndGlyphs">│</text>
<text x="0" y="121" fill="#ffffaf" textLength="9" lengthAdjust="spacingAndGlyphs">│</text>
<text x="18" y="121" fill="#00cdcd" textLength="36" lengthAdjust="spacingAndGlyphs">echo</text>
<text x="63" y="121" fill="#cdcd00" textLength="81" lengthAdjust="spacingAndGlyphs">&quot;Line 26&quot;</text>
<text x="711" y="121" fill="#ffffaf" textLength="9" lengthAdjust="spacingAndGlyphs">│</text>
<text x="0" y="138" fill="#ffffaf" textLength="9" lengthAdjust="spacingAndGlyphs">│</text>
<text x="18" y="138" fill="#00cdcd" textLength="36" lengthAdjust="spacingAndGlyphs">echo</text>
<text x="63" y="138" fill="#cdcd00" textLength="81" lengthAdjust="spacingAndGlyphs">&quot;Line 27&quot;</text>
<text x="711" y="138" fill="#ffffaf" textLength="9" lengthAdjust="spacingAndGlyphs">│</text>
<text x="0" y="155" fill="#ffffaf" textLength="9" lengthAdjust="spacingAndGlyphs">│</text>
<text x="18" y="155" fill="#00cdcd" textLength="36" lengthAdjust="spacingAndGlyphs">echo</text>
<text x="63" y="155" fill="#cdcd00" textLength="81" lengthAdjust="spacingAndGlyphs">&quot;Line 28&quot;</text>
<text x="711" y="155" fill="#ffffaf" textLength="9" lengthAdjust="spacingAndGlyphs">│</text>
<text x="0" y="172" fill="#ffffaf" textLength="9" lengthAdjust="spacingAndGlyphs">│</text>
<text x="18" y="172" fill="#00cdcd" textLength="36" lengthAdjust="spacingAndGlyphs">echo</text>
<text x="63" y="172" fill="#cdcd00" textLength="81" lengthAdjust="spacingAndGlyphs">&quot;Line 29&quot;</text>
<text x="711" y="172" fill="#ffffaf" textLength="9" lengthAdjust="spacingAndGlyphs">│</text>
<text x="0" y="189" fill="#ffffaf" textLength="9" lengthAdjust="spacingAndGlyphs">│</text>
<text x="18" y="189" fill="#00cdcd" textLength="36" lengthAdjust="spacingAndGlyphs">echo</text>
<text x="63" y="189" fill="#cdcd00" textLength="81" lengthAdjust="spacingAndGlyphs">&quot;Line 30&quot;</text>
<text x="711" y="189" fill="#ffffaf" textLength="9" lengthAdjust="spacingAndGlyphs">│</text>
<text x="0" y="206" fill="#ffffaf" textLength="9" lengthAdjust="spacingAndGlyphs">│</text>
<text x="18" y="206" fill="#00cdcd" textLength="36" lengthAdjust="spacingAndGlyphs">echo</text>
<text x="63" y="206" fill="#cdcd00" textLength="81" lengthAdjust="spacingAndGlyphs">&quot;Line 31&quot;</text>
<text x="711" y="206" fill="#ffffaf" textLength="9" lengthAdjust="spacingAndGlyphs">│</text>
<text x="0" y="223" fill="#ffffaf" textLength="9" lengthAdjust="spacingAndGlyphs">│</text>
<text x="18" y="223" fill="#00cdcd" textLength="36" lengthAdjust="spacingAndGlyphs">echo</text>
<text x="63" y="223" fill="#cdcd00" textLength="81" lengthAdjust="spacingAndGlyphs">&quot;Line 32&quot;</text>
<text x="711" y="223" fill="#ffffaf" textLength="9" lengthAdjust="spacingAndGlyphs">│</text>
<text x="0" y="240" fill="#ffffaf" textLength="9" lengthAdjust="spacingAndGlyphs">│</text>
<text x="18" y="240" fill="#00cdcd" textLength="36" lengthAdjust="spacingAndGlyphs">echo</text>
<text x="63" y="240" fill="#cdcd00" textLength="81" lengthAdjust="spacingAndGlyphs">&quot;Line 33&quot;</text>
<text x="711" y="240" fill="#ffffaf" textLength="9" lengthAdjust="spacingAndGlyphs">│</text>
<text x="0" y="257" fill="#ffffaf" textLength="9" lengthAdjust="spacingAndGlyphs">│</text>
<text x="18" y="257" fill="#00cdcd" textLength="36" lengthAdjust="spacingAndGlyphs">echo</text>
<text x="63" y="257" fill="#cdcd00" textLength="81" lengthAdjust="spacingAndGlyphs">&quot;Line 34&quot;</text>
<text x="711" y="257" fill="#ffffaf" textLength="9" lengthAdjust="spacingAndGlyphs">│</text>
<text x="0" y="274" fill="#ffffaf" textLength="9" lengthAdjust="spacingAndGlyphs">│</text>
<text x="18" y="274" fill="#00cdcd" textLength="36" lengthAdjust="spacingAndGlyphs">echo</text>
<text x="63" y="274" fill="#cdcd00" textLength="81" lengthAdjust="spacingAndGlyphs">&quot;Line 35&quot;</text>
<text x="711" y="274" fill="#ffffaf" textLength="9" lengthAdjust="spacingAndGlyphs">│</text>
<text x="0" y="291" fill="#ffffaf" textLength="9" lengthAdjust="spacingAndGlyphs">│</text>
<text x="18" y="291" fill="#00cdcd" textLength="36" lengthAdjust="spacingAndGlyphs">echo</text>
<text x="63" y="291" fill="#cdcd00" textLength="81" lengthAdjust="spacingAndGlyphs">&quot;Line 36&quot;</text>
<text x="711" y="291" fill="#ffffaf" textLength="9" lengthAdjust="spacingAndGlyphs">│</text>
<text x="0" y="308" fill="#ffffaf" textLength="9" lengthAdjust="spacingAndGlyphs">│</text>
<text x="18" y="308" fill="#00cdcd" textLength="36" lengthAdjust="spacingAndGlyphs">echo</text>
<text x="63" y="308" fill="#cdcd00" textLength="81" lengthAdjust="spacingAndGlyphs">&quot;Line 37&quot;</text>
<text x="711" y="308" fill="#ffffaf" textLength="9" lengthAdjust="spacingAndGlyphs">│</text>
<text x="0" y="325" fill="#ffffaf" textLength="9" lengthAdjust="spacingAndGlyphs">│</text>
<text x="18" y="325" fill="#00cdcd" textLength="36" lengthAdjust="spacingAndGlyphs">echo</text>
<text x="63" y="325" fill="#cdcd00" textLength="81" lengthAdjust="spacingAndGlyphs">&quot;Line 38&quot;</text>
<text x="711" y="325" fill="#ffffaf" textLength="9" lengthAdjust="spacingAndGlyphs">│</text>
<text x="0" y="342" fill="#ffffaf" textLength="9" lengthAdjust="spacingAndGlyphs">│</text>
<text x="18" y="342" fill="#00cdcd" textLength="36" lengthAdjust="spacingAndGlyphs">echo</text>
<text x="63" y="342" fill="#cdcd00" textLength="81" lengthAdjust="spacingAndGlyphs">&quot;Line 39&quot;</text>
<text x="711" y="342" fill="#ffffaf" textLength="9" lengthAdjust="spacingAndGlyphs">│</text>
<text x="0" y="359" fill="#ffffaf" textLength="9" lengthAdjust="spacingAndGlyphs">│</text>
<text x="18" y="359" fill="#00cdcd" textLength="36" lengthAdjust="spacingAndGlyphs">echo</text>
<text x="63" y="359" fill="#cdcd00" textLength="81" lengthAdjust="spacingAndGlyphs">&quot;Line 40&quot;</text>
<text x="711" y="359" fill="#ffffaf" textLength="9" lengthAdjust="spacingAndGlyphs">│</text>
<text x="0" y="376" fill="#ffffaf" textLength="9" lengthAdjust="spacingAndGlyphs">│</text>
<text x="18" y="376" fill="#00cdcd" textLength="36" lengthAdjust="spacingAndGlyphs">echo</text>
<text x="63" y="376" fill="#cdcd00" textLength="81" lengthAdjust="spacingAndGlyphs">&quot;Line 41&quot;</text>
<text x="711" y="376" fill="#ffffaf" textLength="9" lengthAdjust="spacingAndGlyphs">│</text>
<text x="0" y="393" fill="#ffffaf" textLength="9" lengthAdjust="spacingAndGlyphs">│</text>
<text x="18" y="393" fill="#00cdcd" textLength="36" lengthAdjust="spacingAndGlyphs">echo</text>
<text x="63" y="393" fill="#cdcd00" textLength="81" lengthAdjust="spacingAndGlyphs">&quot;Line 42&quot;</text>
<text x="711" y="393" fill="#ffffaf" textLength="9" lengthAdjust="spacingAndGlyphs">│</text>
<text x="0" y="410" fill="#ffffaf" textLength="9" lengthAdjust="spacingAndGlyphs">│</text>
<text x="18" y="410" fill="#00cdcd" textLength="36" lengthAdjust="spacingAndGlyphs">echo</text>
<text x="63" y="410" fill="#cdcd00" textLength="81" lengthAdjust="spacingAndGlyphs">&quot;Line 43&quot;</text>
<text x="711" y="410" fill="#ffffaf" textLength="9" lengthAdjust="spacingAndGlyphs">│</text>
<text x="0" y="427" fill="#ffffaf" textLength="9" lengthAdjust="spacingAndGlyphs">│</text>
<text x="18" y="427" fill="#00cdcd" textLength="36" lengthAdjust="spacingAndGlyphs">echo</text>
<text x="63" y="427" fill="#cdcd00" textLength="81" lengthAdjust="spacingAndGlyphs">&quot;Line 44&quot;</text>
<text x="711" y="427" fill="#ffffaf" textLength="9" lengthAdjust="spacingAndGlyphs">│</text>
<text x="0" y="444" fill="#ffffaf" textLength="9" lengthAdjust="spacingAndGlyphs">│</text>
<text x="18" y="444" fill="#00cdcd" textLength="36" lengthAdjust="spacingAndGlyphs">echo</text>
<text x="63" y="444" fill="#cdcd00" textLength="81" lengthAdjust="spacingAndGlyphs">&quot;Line 45&quot;</text>
<text x="711" y="444" fill="#ffffaf" textLength="9" lengthAdjust="spacingAndGlyphs">│</text>
<text x="0" y="461" fill="#ffffaf" textLength="9" lengthAdjust="spacingAndGlyphs">│</text>
<text x="18" y="461" fill="#00cdcd" textLength="36" lengthAdjust="spacingAndGlyphs">echo</text>
<text x="63" y="461" fill="#cdcd00" textLength="81" lengthAdjust="spacingAndGlyphs">&quot;Line 46&quot;</text>
<text x="711" y="461" fill="#ffffaf" textLength="9" lengthAdjust="spacingAndGlyphs">│</text>
<text x="0" y="478" fill="#ffffaf" textLength="9" lengthAdjust="spacingAndGlyphs">│</text>
<text x="18" y="478" fill="#00cdcd" textLength="36" lengthAdjust="spacingAndGlyphs">echo</text>
<text x="63" y="478" fill="#cdcd00" textLength="81" lengthAdjust="spacingAndGlyphs">&quot;Line 47&quot;</text>
<text x="711" y="478" fill="#ffffaf" textLength="9" lengthAdjust="spacingAndGlyphs">│</text>
<text x="0" y="495" fill="#ffffaf" textLength="9" lengthAdjust="spacingAndGlyphs">│</text>
<text x="18" y="495" fill="#00cdcd" textLength="36" lengthAdjust="spacingAndGlyphs">echo</text>
<text x="63" y="495" fill="#cdcd00" textLength="81" lengthAdjust="spacingAndGlyphs">&quot;Line 48&quot;</text>
<text x="711" y="495" fill="#ffffaf" textLength="9" lengthAdjust="spacingAndGlyphs">│</text>
<text x="0" y="512" fill="#ffffaf" textLength="9" lengthAdjust="spacingAndGlyphs">│</text>
<text x="18" y="512" fill="#00cdcd" textLength="36" lengthAdjust="spacingAndGlyphs">echo</text>
<text x="63" y="512" fill="#cdcd00" textLength="81" lengthAdjust="spacingAndGlyphs">&quot;Line 49&quot;</text>
<text x="711" y="512" fill="#ffffaf" textLength="9" lengthAdjust="spacingAndGlyphs">│</text>
<text x="0" y="529" fill="#ffffaf" textLength="9" lengthAdjust="spacingAndGlyphs">│</text>
<text x="18" y="529" fill="#00cdcd" textLength="36" lengthAdjust="spacingAndGlyphs">echo</text>
<text x="63" y="529" fill="#cdcd00" textLength="81" lengthAdjust="spacingAndGlyphs">&quot;Line 50&quot;</text>
<text x="711" y="529" fill="#ffffaf" textLength="9" lengthAdjust="spacingAndGlyphs">│</text>
<text x="0" y="546" fill="#ffffaf" textLength="9" lengthAdjust="spacingAndGlyphs">│</text>
<text x="18" y="546" fill="#ffffff" textLength="243" lengthAdjust="spacingAndGlyphs">Allow execution of: &apos;echo&apos;?</text>
<text x="711" y="546" fill="#ffffaf" textLength="9" lengthAdjust="spacingAndGlyphs">│</text>
<text x="0" y="563" fill="#ffffaf" textLength="9" lengthAdjust="spacingAndGlyphs">│</text>
<text x="711" y="563" fill="#ffffaf" textLength="9" lengthAdjust="spacingAndGlyphs">│</text>
<text x="0" y="580" fill="#ffffaf" textLength="9" lengthAdjust="spacingAndGlyphs">│</text>
<rect x="18" y="578" width="9" height="17" fill="#001a00" />
<text x="18" y="580" fill="#00cd00" textLength="9" lengthAdjust="spacingAndGlyphs">●</text>
<rect x="27" y="578" width="9" height="17" fill="#001a00" />
<rect x="36" y="578" width="18" height="17" fill="#001a00" />
<text x="36" y="580" fill="#00cd00" textLength="18" lengthAdjust="spacingAndGlyphs">1.</text>
<rect x="54" y="578" width="9" height="17" fill="#001a00" />
<rect x="63" y="578" width="90" height="17" fill="#001a00" />
<text x="63" y="580" fill="#00cd00" textLength="90" lengthAdjust="spacingAndGlyphs">Allow once</text>
<rect x="153" y="578" width="135" height="17" fill="#001a00" />
<text x="711" y="580" fill="#ffffaf" textLength="9" lengthAdjust="spacingAndGlyphs">│</text>
<text x="0" y="597" fill="#ffffaf" textLength="9" lengthAdjust="spacingAndGlyphs">│</text>
<text x="36" y="597" fill="#ffffff" textLength="18" lengthAdjust="spacingAndGlyphs">2.</text>
<text x="63" y="597" fill="#ffffff" textLength="198" lengthAdjust="spacingAndGlyphs">Allow for this session</text>
<text x="711" y="597" fill="#ffffaf" textLength="9" lengthAdjust="spacingAndGlyphs">│</text>
<text x="0" y="614" fill="#ffffaf" textLength="9" lengthAdjust="spacingAndGlyphs">│</text>
<text x="36" y="614" fill="#ffffff" textLength="18" lengthAdjust="spacingAndGlyphs">3.</text>
<text x="63" y="614" fill="#ffffff" textLength="225" lengthAdjust="spacingAndGlyphs">No, suggest changes (esc)</text>
<text x="711" y="614" fill="#ffffaf" textLength="9" lengthAdjust="spacingAndGlyphs">│</text>
<text x="0" y="631" fill="#ffffaf" textLength="9" lengthAdjust="spacingAndGlyphs">│</text>
<text x="711" y="631" fill="#ffffaf" textLength="9" lengthAdjust="spacingAndGlyphs">│</text>
<text x="0" y="648" fill="#ffffaf" textLength="720" lengthAdjust="spacingAndGlyphs">╰──────────────────────────────────────────────────────────────────────────────╯</text>
</g>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 15 KiB

145
packages/cli/src/ui/components/__snapshots__/ToolConfirmationQueue.test.tsx.snap
View File

@@ -16,7 +16,6 @@ exports[`ToolConfirmationQueue > calculates availableContentHeight based on avai
│ 4. No, suggest changes (esc) │
│ │
╰──────────────────────────────────────────────────────────────────────────────╯
Press Ctrl+O to show more lines
"
`;
@@ -42,6 +41,130 @@ exports[`ToolConfirmationQueue > does not render expansion hint when constrainHe
"
`;
exports[`ToolConfirmationQueue > height allocation and layout > should handle security warning height correctly 1`] = `
"╭──────────────────────────────────────────────────────────────────────────────╮
│ Action Required 3 of 3 │
│ │
│ ? run_shell_command Executes a bash command with a deceptive URL │
│ │
│ ... 6 hidden (Ctrl+O) ... │
│ echo "Line 37" │
│ echo "Line 38" │
│ echo "Line 39" │
│ echo "Line 40" │
│ echo "Line 41" │
│ echo "Line 42" │
│ echo "Line 43" │
│ echo "Line 44" │
│ echo "Line 45" │
│ echo "Line 46" │
│ echo "Line 47" │
│ echo "Line 48" │
│ echo "Line 49" │
│ echo "Line 50" │
│ curl https://täst.com │
│ │
│ ⚠ Warning: Deceptive URL(s) detected: │
│ │
│ Original: https://täst.com/ │
│ Actual Host (Punycode): https://xn--tst-qla.com/ │
│ │
│ Allow execution of: 'echo'? │
│ │
│ ● 1. Allow once │
│ 2. Allow for this session │
│ 3. No, suggest changes (esc) │
│ │
╰──────────────────────────────────────────────────────────────────────────────╯
"
`;
exports[`ToolConfirmationQueue > height allocation and layout > should render the full queue wrapper with borders and content for large edit diffs 1`] = `
"╭──────────────────────────────────────────────────────────────────────────────╮
│ Action Required │
│ │
│ ? replace Replaces content in a file │
│ │
│ ... 15 hidden (Ctrl+O) ... │
│ 8 + const newLine8 = true; │
│ 9 - const oldLine9 = true; │
│ 9 + const newLine9 = true; │
│ 10 - const oldLine10 = true; │
│ 10 + const newLine10 = true; │
│ 11 - const oldLine11 = true; │
│ 11 + const newLine11 = true; │
│ 12 - const oldLine12 = true; │
│ 12 + const newLine12 = true; │
│ 13 - const oldLine13 = true; │
│ 13 + const newLine13 = true; │
│ 14 - const oldLine14 = true; │
│ 14 + const newLine14 = true; │
│ 15 - const oldLine15 = true; │
│ 15 + const newLine15 = true; │
│ 16 - const oldLine16 = true; │
│ 16 + const newLine16 = true; │
│ 17 - const oldLine17 = true; │
│ 17 + const newLine17 = true; │
│ 18 - const oldLine18 = true; │
│ 18 + const newLine18 = true; │
│ 19 - const oldLine19 = true; │
│ 19 + const newLine19 = true; │
│ 20 - const oldLine20 = true; │
│ 20 + const newLine20 = true; │
│ Apply this change? │
│ │
│ ● 1. Allow once │
│ 2. Allow for this session │
│ 3. Modify with external editor │
│ 4. No, suggest changes (esc) │
│ │
╰──────────────────────────────────────────────────────────────────────────────╯
"
`;
exports[`ToolConfirmationQueue > height allocation and layout > should render the full queue wrapper with borders and content for large exec commands 1`] = `
"╭──────────────────────────────────────────────────────────────────────────────╮
│ Action Required 2 of 3 │
│ │
│ ? run_shell_command Executes a bash command │
│ │
│ ... 24 hidden (Ctrl+O) ... │
│ echo "Line 25" │
│ echo "Line 26" │
│ echo "Line 27" │
│ echo "Line 28" │
│ echo "Line 29" │
│ echo "Line 30" │
│ echo "Line 31" │
│ echo "Line 32" │
│ echo "Line 33" │
│ echo "Line 34" │
│ echo "Line 35" │
│ echo "Line 36" │
│ echo "Line 37" │
│ echo "Line 38" │
│ echo "Line 39" │
│ echo "Line 40" │
│ echo "Line 41" │
│ echo "Line 42" │
│ echo "Line 43" │
│ echo "Line 44" │
│ echo "Line 45" │
│ echo "Line 46" │
│ echo "Line 47" │
│ echo "Line 48" │
│ echo "Line 49" │
│ echo "Line 50" │
│ Allow execution of: 'echo'? │
│ │
│ ● 1. Allow once │
│ 2. Allow for this session │
│ 3. No, suggest changes (esc) │
│ │
╰──────────────────────────────────────────────────────────────────────────────╯
"
`;
exports[`ToolConfirmationQueue > provides more height for ask_user by subtracting less overhead 1`] = `
"╭──────────────────────────────────────────────────────────────────────────────╮
│ Answer Questions │
@@ -91,26 +214,6 @@ exports[`ToolConfirmationQueue > renders ExitPlanMode tool confirmation with Suc
"
`;
exports[`ToolConfirmationQueue > renders expansion hint when content is long and constrained 1`] = `
"╭──────────────────────────────────────────────────────────────────────────────╮
│ Action Required │
│ │
│ ? replace edit file │
│ │
│ ... 49 hidden (Ctrl+O) ... │
│ 50 line │
│ Apply this change? │
│ │
│ ● 1. Allow once │
│ 2. Allow for this session │
│ 3. Modify with external editor │
│ 4. No, suggest changes (esc) │
│ │
╰──────────────────────────────────────────────────────────────────────────────╯
Press Ctrl+O to show more lines
"
`;
exports[`ToolConfirmationQueue > renders the confirming tool with progress indicator 1`] = `
"╭──────────────────────────────────────────────────────────────────────────────╮
│ Action Required 1 of 3 │

79
packages/cli/src/ui/components/messages/ToolConfirmationMessage.test.tsx
View File

@@ -232,7 +232,7 @@ describe('ToolConfirmationMessage', () => {
unmount();
});
it('should render multiline shell scripts with correct newlines and syntax highlighting (SVG snapshot)', async () => {
it('should render multiline shell scripts with correct newlines and syntax highlighting', async () => {
const confirmationDetails: SerializableConfirmationDetails = {
type: 'exec',
title: 'Confirm Multiline Script',
@@ -628,6 +628,83 @@ describe('ToolConfirmationMessage', () => {
unmount();
});
describe('height allocation and layout', () => {
it('should expand to available height for large exec commands', async () => {
let largeCommand = '';
for (let i = 1; i <= 50; i++) {
largeCommand += `echo "Line ${i}"\n`;
}
const confirmationDetails: SerializableConfirmationDetails = {
type: 'exec',
title: 'Confirm Execution',
command: largeCommand.trimEnd(),
rootCommand: 'echo',
rootCommands: ['echo'],
};
const { waitUntilReady, lastFrame, generateSvg, unmount } =
await renderWithProviders(
<ToolConfirmationMessage
callId="test-call-id"
confirmationDetails={confirmationDetails}
config={mockConfig}
getPreferredEditor={vi.fn()}
availableTerminalHeight={40}
terminalWidth={80}
/>,
);
await waitUntilReady();
const outputLines = lastFrame().split('\n');
// Should use the entire terminal height minus 1 line for the "Press Ctrl+O to show more lines" hint
expect(outputLines.length).toBe(39);
await expect({ lastFrame, generateSvg }).toMatchSvgSnapshot();
unmount();
});
it('should expand to available height for large edit diffs', async () => {
// Create a large diff string
let largeDiff = '--- a/file.ts\n+++ b/file.ts\n@@ -1,10 +1,15 @@\n';
for (let i = 1; i <= 20; i++) {
largeDiff += `-const oldLine${i} = true;\n`;
largeDiff += `+const newLine${i} = true;\n`;
}
const confirmationDetails: SerializableConfirmationDetails = {
type: 'edit',
title: 'Confirm Edit',
fileName: 'file.ts',
filePath: '/file.ts',
fileDiff: largeDiff,
originalContent: 'old',
newContent: 'new',
isModifying: false,
};
const { waitUntilReady, lastFrame, generateSvg, unmount } =
await renderWithProviders(
<ToolConfirmationMessage
callId="test-call-id"
confirmationDetails={confirmationDetails}
config={mockConfig}
getPreferredEditor={vi.fn()}
availableTerminalHeight={40}
terminalWidth={80}
/>,
);
await waitUntilReady();
const outputLines = lastFrame().split('\n');
// Should use the entire terminal height minus 1 line for the "Press Ctrl+O to show more lines" hint
expect(outputLines.length).toBe(39);
await expect({ lastFrame, generateSvg }).toMatchSvgSnapshot();
unmount();
});
});
describe('ESCAPE key behavior', () => {
beforeEach(() => {
vi.useFakeTimers();

126
packages/cli/src/ui/components/messages/ToolConfirmationMessage.tsx
View File

@@ -5,8 +5,8 @@
*/
import type React from 'react';
import { useEffect, useMemo, useCallback, useState } from 'react';
import { Box, Text } from 'ink';
import { useEffect, useMemo, useCallback, useState, useRef } from 'react';
import { Box, Text, ResizeObserver, type DOMElement } from 'ink';
import { DiffRenderer } from './DiffRenderer.js';
import { RenderInline } from '../../utils/InlineMarkdownRenderer.js';
import {
@@ -85,6 +85,64 @@ export const ToolConfirmationMessage: React.FC<
? mcpDetailsExpansionState.expanded
: false;
const [measuredSecurityWarningsHeight, setMeasuredSecurityWarningsHeight] =
useState(0);
const observerRef = useRef<ResizeObserver | null>(null);
const deceptiveUrlWarnings = useMemo(() => {
const urls: string[] = [];
if (confirmationDetails.type === 'info' && confirmationDetails.urls) {
urls.push(...confirmationDetails.urls);
} else if (confirmationDetails.type === 'exec') {
const commands =
confirmationDetails.commands && confirmationDetails.commands.length > 0
? confirmationDetails.commands
: [confirmationDetails.command];
for (const cmd of commands) {
const matches = cmd.match(/https?:\/\/[^\s"'`<>;&|()]+/g);
if (matches) urls.push(...matches);
}
}
const uniqueUrls = Array.from(new Set(urls));
return uniqueUrls
.map(getDeceptiveUrlDetails)
.filter((d): d is DeceptiveUrlDetails => d !== null);
}, [confirmationDetails]);
const deceptiveUrlWarningText = useMemo(() => {
if (deceptiveUrlWarnings.length === 0) return null;
return `**Warning:** Deceptive URL(s) detected:\n\n${deceptiveUrlWarnings
.map(
(w) =>
` **Original:** ${w.originalUrl}\n **Actual Host (Punycode):** ${w.punycodeUrl}`,
)
.join('\n\n')}`;
}, [deceptiveUrlWarnings]);
const onSecurityWarningsRefChange = useCallback((node: DOMElement | null) => {
if (observerRef.current) {
observerRef.current.disconnect();
observerRef.current = null;
}
if (node) {
const observer = new ResizeObserver((entries) => {
const entry = entries[0];
if (entry) {
const newHeight = Math.round(entry.contentRect.height);
setMeasuredSecurityWarningsHeight((prev) =>
newHeight !== prev ? newHeight : prev,
);
}
});
observer.observe(node);
observerRef.current = observer;
} else {
setMeasuredSecurityWarningsHeight((prev) => (prev !== 0 ? 0 : prev));
}
}, []);
const settings = useSettings();
const allowPermanentApproval =
settings.merged.security.enablePermanentToolApproval &&
@@ -216,37 +274,6 @@ export const ToolConfirmationMessage: React.FC<
[handleConfirm],
);
const deceptiveUrlWarnings = useMemo(() => {
const urls: string[] = [];
if (confirmationDetails.type === 'info' && confirmationDetails.urls) {
urls.push(...confirmationDetails.urls);
} else if (confirmationDetails.type === 'exec') {
const commands =
confirmationDetails.commands && confirmationDetails.commands.length > 0
? confirmationDetails.commands
: [confirmationDetails.command];
for (const cmd of commands) {
const matches = cmd.match(/https?:\/\/[^\s"'`<>;&|()]+/g);
if (matches) urls.push(...matches);
}
}
const uniqueUrls = Array.from(new Set(urls));
return uniqueUrls
.map(getDeceptiveUrlDetails)
.filter((d): d is DeceptiveUrlDetails => d !== null);
}, [confirmationDetails]);
const deceptiveUrlWarningText = useMemo(() => {
if (deceptiveUrlWarnings.length === 0) return null;
return `**Warning:** Deceptive URL(s) detected:\n\n${deceptiveUrlWarnings
.map(
(w) =>
` **Original:** ${w.originalUrl}\n **Actual Host (Punycode):** ${w.punycodeUrl}`,
)
.join('\n\n')}`;
}, [deceptiveUrlWarnings]);
const getOptions = useCallback(() => {
const options: Array<RadioSelectItem<ToolConfirmationOutcome>> = [];
@@ -389,23 +416,36 @@ export const ToolConfirmationMessage: React.FC<
// Calculate the vertical space (in lines) consumed by UI elements
// surrounding the main body content.
const PADDING_OUTER_Y = 2; // Main container has `padding={1}` (top & bottom).
const MARGIN_BODY_BOTTOM = 1; // margin on the body container.
const PADDING_OUTER_Y = 1; // Main container has `paddingBottom={1}`.
const HEIGHT_QUESTION = 1; // The question text is one line.
const MARGIN_QUESTION_BOTTOM = 1; // Margin on the question container.
const SECURITY_WARNING_BOTTOM_MARGIN = 1; // Margin on the securityWarnings container.
const SHOW_MORE_LINES_HEIGHT = 1; // The "Press Ctrl+O to show more lines" hint.
const optionsCount = getOptions().length;
// The measured height includes the margin inside WarningMessage (1 line).
// We also add 1 line for the marginBottom on the securityWarnings container.
const securityWarningsHeight = deceptiveUrlWarningText
? measuredSecurityWarningsHeight + SECURITY_WARNING_BOTTOM_MARGIN
: 0;
const surroundingElementsHeight =
PADDING_OUTER_Y +
MARGIN_BODY_BOTTOM +
HEIGHT_QUESTION +
MARGIN_QUESTION_BOTTOM +
SHOW_MORE_LINES_HEIGHT +
optionsCount +
1; // Reserve one line for 'ShowMoreLines' hint
securityWarningsHeight;
return Math.max(availableTerminalHeight - surroundingElementsHeight, 1);
}, [availableTerminalHeight, getOptions, handlesOwnUI]);
}, [
availableTerminalHeight,
handlesOwnUI,
getOptions,
measuredSecurityWarningsHeight,
deceptiveUrlWarningText,
]);
const { question, bodyContent, options, securityWarnings, initialIndex } =
useMemo<{
@@ -547,10 +587,6 @@ export const ToolConfirmationMessage: React.FC<
let bodyContentHeight = availableBodyContentHeight();
let warnings: React.ReactNode = null;
if (bodyContentHeight !== undefined) {
bodyContentHeight -= 2; // Account for padding;
}
if (containsRedirection) {
// Calculate lines needed for Note and Tip
const safeWidth = Math.max(terminalWidth, 1);
@@ -759,7 +795,11 @@ export const ToolConfirmationMessage: React.FC<
</Box>
{securityWarnings && (
<Box flexShrink={0} marginBottom={1}>
<Box
flexShrink={0}
marginBottom={1}
ref={onSecurityWarningsRefChange}
>
{securityWarnings}
</Box>
)}

468
packages/cli/src/ui/components/messages/__snapshots__/ToolConfirmationMessage-ToolConfirmationMessage-height-allocation-and-layout-should-expand-to-available-height-for-large-edit-diffs.snap.svg Normal file
View File

@@ -0,0 +1,468 @@
<svg xmlns="http://www.w3.org/2000/svg" width="920" height="666" viewBox="0 0 920 666">
<style>
text { font-family: Consolas, "Courier New", monospace; font-size: 14px; dominant-baseline: text-before-edge; white-space: pre; }
</style>
<rect width="920" height="666" fill="#000000" />
<g transform="translate(10, 10)">
<text x="0" y="2" fill="#afafaf" textLength="405" lengthAdjust="spacingAndGlyphs">... first 9 lines hidden (Ctrl+O to show) ...</text>
<rect x="0" y="17" width="9" height="17" fill="#005f00" />
<rect x="9" y="17" width="9" height="17" fill="#005f00" />
<text x="9" y="19" fill="#afafaf" textLength="9" lengthAdjust="spacingAndGlyphs">5</text>
<rect x="18" y="17" width="9" height="17" fill="#005f00" />
<rect x="27" y="17" width="9" height="17" fill="#005f00" />
<text x="27" y="19" fill="#d7ffd7" textLength="9" lengthAdjust="spacingAndGlyphs">+</text>
<rect x="36" y="17" width="9" height="17" fill="#005f00" />
<rect x="45" y="17" width="45" height="17" fill="#005f00" />
<text x="45" y="19" fill="#0000ee" textLength="45" lengthAdjust="spacingAndGlyphs">const</text>
<rect x="90" y="17" width="108" height="17" fill="#005f00" />
<text x="90" y="19" fill="#e5e5e5" textLength="108" lengthAdjust="spacingAndGlyphs"> newLine5 = </text>
<rect x="198" y="17" width="36" height="17" fill="#005f00" />
<text x="198" y="19" fill="#0000ee" textLength="36" lengthAdjust="spacingAndGlyphs">true</text>
<rect x="234" y="17" width="9" height="17" fill="#005f00" />
<text x="234" y="19" fill="#e5e5e5" textLength="9" lengthAdjust="spacingAndGlyphs">;</text>
<rect x="0" y="34" width="9" height="17" fill="#5f0000" />
<rect x="9" y="34" width="9" height="17" fill="#5f0000" />
<text x="9" y="36" fill="#afafaf" textLength="9" lengthAdjust="spacingAndGlyphs">6</text>
<rect x="18" y="34" width="9" height="17" fill="#5f0000" />
<rect x="27" y="34" width="9" height="17" fill="#5f0000" />
<text x="27" y="36" fill="#ff87af" textLength="9" lengthAdjust="spacingAndGlyphs">-</text>
<rect x="36" y="34" width="9" height="17" fill="#5f0000" />
<rect x="45" y="34" width="45" height="17" fill="#5f0000" />
<text x="45" y="36" fill="#0000ee" textLength="45" lengthAdjust="spacingAndGlyphs">const</text>
<rect x="90" y="34" width="108" height="17" fill="#5f0000" />
<text x="90" y="36" fill="#e5e5e5" textLength="108" lengthAdjust="spacingAndGlyphs"> oldLine6 = </text>
<rect x="198" y="34" width="36" height="17" fill="#5f0000" />
<text x="198" y="36" fill="#0000ee" textLength="36" lengthAdjust="spacingAndGlyphs">true</text>
<rect x="234" y="34" width="9" height="17" fill="#5f0000" />
<text x="234" y="36" fill="#e5e5e5" textLength="9" lengthAdjust="spacingAndGlyphs">;</text>
<rect x="0" y="51" width="9" height="17" fill="#005f00" />
<rect x="9" y="51" width="9" height="17" fill="#005f00" />
<text x="9" y="53" fill="#afafaf" textLength="9" lengthAdjust="spacingAndGlyphs">6</text>
<rect x="18" y="51" width="9" height="17" fill="#005f00" />
<rect x="27" y="51" width="9" height="17" fill="#005f00" />
<text x="27" y="53" fill="#d7ffd7" textLength="9" lengthAdjust="spacingAndGlyphs">+</text>
<rect x="36" y="51" width="9" height="17" fill="#005f00" />
<rect x="45" y="51" width="45" height="17" fill="#005f00" />
<text x="45" y="53" fill="#0000ee" textLength="45" lengthAdjust="spacingAndGlyphs">const</text>
<rect x="90" y="51" width="108" height="17" fill="#005f00" />
<text x="90" y="53" fill="#e5e5e5" textLength="108" lengthAdjust="spacingAndGlyphs"> newLine6 = </text>
<rect x="198" y="51" width="36" height="17" fill="#005f00" />
<text x="198" y="53" fill="#0000ee" textLength="36" lengthAdjust="spacingAndGlyphs">true</text>
<rect x="234" y="51" width="9" height="17" fill="#005f00" />
<text x="234" y="53" fill="#e5e5e5" textLength="9" lengthAdjust="spacingAndGlyphs">;</text>
<rect x="0" y="68" width="9" height="17" fill="#5f0000" />
<rect x="9" y="68" width="9" height="17" fill="#5f0000" />
<text x="9" y="70" fill="#afafaf" textLength="9" lengthAdjust="spacingAndGlyphs">7</text>
<rect x="18" y="68" width="9" height="17" fill="#5f0000" />
<rect x="27" y="68" width="9" height="17" fill="#5f0000" />
<text x="27" y="70" fill="#ff87af" textLength="9" lengthAdjust="spacingAndGlyphs">-</text>
<rect x="36" y="68" width="9" height="17" fill="#5f0000" />
<rect x="45" y="68" width="45" height="17" fill="#5f0000" />
<text x="45" y="70" fill="#0000ee" textLength="45" lengthAdjust="spacingAndGlyphs">const</text>
<rect x="90" y="68" width="108" height="17" fill="#5f0000" />
<text x="90" y="70" fill="#e5e5e5" textLength="108" lengthAdjust="spacingAndGlyphs"> oldLine7 = </text>
<rect x="198" y="68" width="36" height="17" fill="#5f0000" />
<text x="198" y="70" fill="#0000ee" textLength="36" lengthAdjust="spacingAndGlyphs">true</text>
<rect x="234" y="68" width="9" height="17" fill="#5f0000" />
<text x="234" y="70" fill="#e5e5e5" textLength="9" lengthAdjust="spacingAndGlyphs">;</text>
<rect x="0" y="85" width="9" height="17" fill="#005f00" />
<rect x="9" y="85" width="9" height="17" fill="#005f00" />
<text x="9" y="87" fill="#afafaf" textLength="9" lengthAdjust="spacingAndGlyphs">7</text>
<rect x="18" y="85" width="9" height="17" fill="#005f00" />
<rect x="27" y="85" width="9" height="17" fill="#005f00" />
<text x="27" y="87" fill="#d7ffd7" textLength="9" lengthAdjust="spacingAndGlyphs">+</text>
<rect x="36" y="85" width="9" height="17" fill="#005f00" />
<rect x="45" y="85" width="45" height="17" fill="#005f00" />
<text x="45" y="87" fill="#0000ee" textLength="45" lengthAdjust="spacingAndGlyphs">const</text>
<rect x="90" y="85" width="108" height="17" fill="#005f00" />
<text x="90" y="87" fill="#e5e5e5" textLength="108" lengthAdjust="spacingAndGlyphs"> newLine7 = </text>
<rect x="198" y="85" width="36" height="17" fill="#005f00" />
<text x="198" y="87" fill="#0000ee" textLength="36" lengthAdjust="spacingAndGlyphs">true</text>
<rect x="234" y="85" width="9" height="17" fill="#005f00" />
<text x="234" y="87" fill="#e5e5e5" textLength="9" lengthAdjust="spacingAndGlyphs">;</text>
<rect x="0" y="102" width="9" height="17" fill="#5f0000" />
<rect x="9" y="102" width="9" height="17" fill="#5f0000" />
<text x="9" y="104" fill="#afafaf" textLength="9" lengthAdjust="spacingAndGlyphs">8</text>
<rect x="18" y="102" width="9" height="17" fill="#5f0000" />
<rect x="27" y="102" width="9" height="17" fill="#5f0000" />
<text x="27" y="104" fill="#ff87af" textLength="9" lengthAdjust="spacingAndGlyphs">-</text>
<rect x="36" y="102" width="9" height="17" fill="#5f0000" />
<rect x="45" y="102" width="45" height="17" fill="#5f0000" />
<text x="45" y="104" fill="#0000ee" textLength="45" lengthAdjust="spacingAndGlyphs">const</text>
<rect x="90" y="102" width="108" height="17" fill="#5f0000" />
<text x="90" y="104" fill="#e5e5e5" textLength="108" lengthAdjust="spacingAndGlyphs"> oldLine8 = </text>
<rect x="198" y="102" width="36" height="17" fill="#5f0000" />
<text x="198" y="104" fill="#0000ee" textLength="36" lengthAdjust="spacingAndGlyphs">true</text>
<rect x="234" y="102" width="9" height="17" fill="#5f0000" />
<text x="234" y="104" fill="#e5e5e5" textLength="9" lengthAdjust="spacingAndGlyphs">;</text>
<rect x="0" y="119" width="9" height="17" fill="#005f00" />
<rect x="9" y="119" width="9" height="17" fill="#005f00" />
<text x="9" y="121" fill="#afafaf" textLength="9" lengthAdjust="spacingAndGlyphs">8</text>
<rect x="18" y="119" width="9" height="17" fill="#005f00" />
<rect x="27" y="119" width="9" height="17" fill="#005f00" />
<text x="27" y="121" fill="#d7ffd7" textLength="9" lengthAdjust="spacingAndGlyphs">+</text>
<rect x="36" y="119" width="9" height="17" fill="#005f00" />
<rect x="45" y="119" width="45" height="17" fill="#005f00" />
<text x="45" y="121" fill="#0000ee" textLength="45" lengthAdjust="spacingAndGlyphs">const</text>
<rect x="90" y="119" width="108" height="17" fill="#005f00" />
<text x="90" y="121" fill="#e5e5e5" textLength="108" lengthAdjust="spacingAndGlyphs"> newLine8 = </text>
<rect x="198" y="119" width="36" height="17" fill="#005f00" />
<text x="198" y="121" fill="#0000ee" textLength="36" lengthAdjust="spacingAndGlyphs">true</text>
<rect x="234" y="119" width="9" height="17" fill="#005f00" />
<text x="234" y="121" fill="#e5e5e5" textLength="9" lengthAdjust="spacingAndGlyphs">;</text>
<rect x="0" y="136" width="9" height="17" fill="#5f0000" />
<rect x="9" y="136" width="9" height="17" fill="#5f0000" />
<text x="9" y="138" fill="#afafaf" textLength="9" lengthAdjust="spacingAndGlyphs">9</text>
<rect x="18" y="136" width="9" height="17" fill="#5f0000" />
<rect x="27" y="136" width="9" height="17" fill="#5f0000" />
<text x="27" y="138" fill="#ff87af" textLength="9" lengthAdjust="spacingAndGlyphs">-</text>
<rect x="36" y="136" width="9" height="17" fill="#5f0000" />
<rect x="45" y="136" width="45" height="17" fill="#5f0000" />
<text x="45" y="138" fill="#0000ee" textLength="45" lengthAdjust="spacingAndGlyphs">const</text>
<rect x="90" y="136" width="108" height="17" fill="#5f0000" />
<text x="90" y="138" fill="#e5e5e5" textLength="108" lengthAdjust="spacingAndGlyphs"> oldLine9 = </text>
<rect x="198" y="136" width="36" height="17" fill="#5f0000" />
<text x="198" y="138" fill="#0000ee" textLength="36" lengthAdjust="spacingAndGlyphs">true</text>
<rect x="234" y="136" width="9" height="17" fill="#5f0000" />
<text x="234" y="138" fill="#e5e5e5" textLength="9" lengthAdjust="spacingAndGlyphs">;</text>
<rect x="0" y="153" width="9" height="17" fill="#005f00" />
<rect x="9" y="153" width="9" height="17" fill="#005f00" />
<text x="9" y="155" fill="#afafaf" textLength="9" lengthAdjust="spacingAndGlyphs">9</text>
<rect x="18" y="153" width="9" height="17" fill="#005f00" />
<rect x="27" y="153" width="9" height="17" fill="#005f00" />
<text x="27" y="155" fill="#d7ffd7" textLength="9" lengthAdjust="spacingAndGlyphs">+</text>
<rect x="36" y="153" width="9" height="17" fill="#005f00" />
<rect x="45" y="153" width="45" height="17" fill="#005f00" />
<text x="45" y="155" fill="#0000ee" textLength="45" lengthAdjust="spacingAndGlyphs">const</text>
<rect x="90" y="153" width="108" height="17" fill="#005f00" />
<text x="90" y="155" fill="#e5e5e5" textLength="108" lengthAdjust="spacingAndGlyphs"> newLine9 = </text>
<rect x="198" y="153" width="36" height="17" fill="#005f00" />
<text x="198" y="155" fill="#0000ee" textLength="36" lengthAdjust="spacingAndGlyphs">true</text>
<rect x="234" y="153" width="9" height="17" fill="#005f00" />
<text x="234" y="155" fill="#e5e5e5" textLength="9" lengthAdjust="spacingAndGlyphs">;</text>
<rect x="0" y="170" width="18" height="17" fill="#5f0000" />
<text x="0" y="172" fill="#afafaf" textLength="18" lengthAdjust="spacingAndGlyphs">10</text>
<rect x="18" y="170" width="9" height="17" fill="#5f0000" />
<rect x="27" y="170" width="9" height="17" fill="#5f0000" />
<text x="27" y="172" fill="#ff87af" textLength="9" lengthAdjust="spacingAndGlyphs">-</text>
<rect x="36" y="170" width="9" height="17" fill="#5f0000" />
<rect x="45" y="170" width="45" height="17" fill="#5f0000" />
<text x="45" y="172" fill="#0000ee" textLength="45" lengthAdjust="spacingAndGlyphs">const</text>
<rect x="90" y="170" width="117" height="17" fill="#5f0000" />
<text x="90" y="172" fill="#e5e5e5" textLength="117" lengthAdjust="spacingAndGlyphs"> oldLine10 = </text>
<rect x="207" y="170" width="36" height="17" fill="#5f0000" />
<text x="207" y="172" fill="#0000ee" textLength="36" lengthAdjust="spacingAndGlyphs">true</text>
<rect x="243" y="170" width="9" height="17" fill="#5f0000" />
<text x="243" y="172" fill="#e5e5e5" textLength="9" lengthAdjust="spacingAndGlyphs">;</text>
<rect x="0" y="187" width="18" height="17" fill="#005f00" />
<text x="0" y="189" fill="#afafaf" textLength="18" lengthAdjust="spacingAndGlyphs">10</text>
<rect x="18" y="187" width="9" height="17" fill="#005f00" />
<rect x="27" y="187" width="9" height="17" fill="#005f00" />
<text x="27" y="189" fill="#d7ffd7" textLength="9" lengthAdjust="spacingAndGlyphs">+</text>
<rect x="36" y="187" width="9" height="17" fill="#005f00" />
<rect x="45" y="187" width="45" height="17" fill="#005f00" />
<text x="45" y="189" fill="#0000ee" textLength="45" lengthAdjust="spacingAndGlyphs">const</text>
<rect x="90" y="187" width="117" height="17" fill="#005f00" />
<text x="90" y="189" fill="#e5e5e5" textLength="117" lengthAdjust="spacingAndGlyphs"> newLine10 = </text>
<rect x="207" y="187" width="36" height="17" fill="#005f00" />
<text x="207" y="189" fill="#0000ee" textLength="36" lengthAdjust="spacingAndGlyphs">true</text>
<rect x="243" y="187" width="9" height="17" fill="#005f00" />
<text x="243" y="189" fill="#e5e5e5" textLength="9" lengthAdjust="spacingAndGlyphs">;</text>
<rect x="0" y="204" width="18" height="17" fill="#5f0000" />
<text x="0" y="206" fill="#afafaf" textLength="18" lengthAdjust="spacingAndGlyphs">11</text>
<rect x="18" y="204" width="9" height="17" fill="#5f0000" />
<rect x="27" y="204" width="9" height="17" fill="#5f0000" />
<text x="27" y="206" fill="#ff87af" textLength="9" lengthAdjust="spacingAndGlyphs">-</text>
<rect x="36" y="204" width="9" height="17" fill="#5f0000" />
<rect x="45" y="204" width="45" height="17" fill="#5f0000" />
<text x="45" y="206" fill="#0000ee" textLength="45" lengthAdjust="spacingAndGlyphs">const</text>
<rect x="90" y="204" width="117" height="17" fill="#5f0000" />
<text x="90" y="206" fill="#e5e5e5" textLength="117" lengthAdjust="spacingAndGlyphs"> oldLine11 = </text>
<rect x="207" y="204" width="36" height="17" fill="#5f0000" />
<text x="207" y="206" fill="#0000ee" textLength="36" lengthAdjust="spacingAndGlyphs">true</text>
<rect x="243" y="204" width="9" height="17" fill="#5f0000" />
<text x="243" y="206" fill="#e5e5e5" textLength="9" lengthAdjust="spacingAndGlyphs">;</text>
<rect x="0" y="221" width="18" height="17" fill="#005f00" />
<text x="0" y="223" fill="#afafaf" textLength="18" lengthAdjust="spacingAndGlyphs">11</text>
<rect x="18" y="221" width="9" height="17" fill="#005f00" />
<rect x="27" y="221" width="9" height="17" fill="#005f00" />
<text x="27" y="223" fill="#d7ffd7" textLength="9" lengthAdjust="spacingAndGlyphs">+</text>
<rect x="36" y="221" width="9" height="17" fill="#005f00" />
<rect x="45" y="221" width="45" height="17" fill="#005f00" />
<text x="45" y="223" fill="#0000ee" textLength="45" lengthAdjust="spacingAndGlyphs">const</text>
<rect x="90" y="221" width="117" height="17" fill="#005f00" />
<text x="90" y="223" fill="#e5e5e5" textLength="117" lengthAdjust="spacingAndGlyphs"> newLine11 = </text>
<rect x="207" y="221" width="36" height="17" fill="#005f00" />
<text x="207" y="223" fill="#0000ee" textLength="36" lengthAdjust="spacingAndGlyphs">true</text>
<rect x="243" y="221" width="9" height="17" fill="#005f00" />
<text x="243" y="223" fill="#e5e5e5" textLength="9" lengthAdjust="spacingAndGlyphs">;</text>
<rect x="0" y="238" width="18" height="17" fill="#5f0000" />
<text x="0" y="240" fill="#afafaf" textLength="18" lengthAdjust="spacingAndGlyphs">12</text>
<rect x="18" y="238" width="9" height="17" fill="#5f0000" />
<rect x="27" y="238" width="9" height="17" fill="#5f0000" />
<text x="27" y="240" fill="#ff87af" textLength="9" lengthAdjust="spacingAndGlyphs">-</text>
<rect x="36" y="238" width="9" height="17" fill="#5f0000" />
<rect x="45" y="238" width="45" height="17" fill="#5f0000" />
<text x="45" y="240" fill="#0000ee" textLength="45" lengthAdjust="spacingAndGlyphs">const</text>
<rect x="90" y="238" width="117" height="17" fill="#5f0000" />
<text x="90" y="240" fill="#e5e5e5" textLength="117" lengthAdjust="spacingAndGlyphs"> oldLine12 = </text>
<rect x="207" y="238" width="36" height="17" fill="#5f0000" />
<text x="207" y="240" fill="#0000ee" textLength="36" lengthAdjust="spacingAndGlyphs">true</text>
<rect x="243" y="238" width="9" height="17" fill="#5f0000" />
<text x="243" y="240" fill="#e5e5e5" textLength="9" lengthAdjust="spacingAndGlyphs">;</text>
<rect x="0" y="255" width="18" height="17" fill="#005f00" />
<text x="0" y="257" fill="#afafaf" textLength="18" lengthAdjust="spacingAndGlyphs">12</text>
<rect x="18" y="255" width="9" height="17" fill="#005f00" />
<rect x="27" y="255" width="9" height="17" fill="#005f00" />
<text x="27" y="257" fill="#d7ffd7" textLength="9" lengthAdjust="spacingAndGlyphs">+</text>
<rect x="36" y="255" width="9" height="17" fill="#005f00" />
<rect x="45" y="255" width="45" height="17" fill="#005f00" />
<text x="45" y="257" fill="#0000ee" textLength="45" lengthAdjust="spacingAndGlyphs">const</text>
<rect x="90" y="255" width="117" height="17" fill="#005f00" />
<text x="90" y="257" fill="#e5e5e5" textLength="117" lengthAdjust="spacingAndGlyphs"> newLine12 = </text>
<rect x="207" y="255" width="36" height="17" fill="#005f00" />
<text x="207" y="257" fill="#0000ee" textLength="36" lengthAdjust="spacingAndGlyphs">true</text>
<rect x="243" y="255" width="9" height="17" fill="#005f00" />
<text x="243" y="257" fill="#e5e5e5" textLength="9" lengthAdjust="spacingAndGlyphs">;</text>
<rect x="0" y="272" width="18" height="17" fill="#5f0000" />
<text x="0" y="274" fill="#afafaf" textLength="18" lengthAdjust="spacingAndGlyphs">13</text>
<rect x="18" y="272" width="9" height="17" fill="#5f0000" />
<rect x="27" y="272" width="9" height="17" fill="#5f0000" />
<text x="27" y="274" fill="#ff87af" textLength="9" lengthAdjust="spacingAndGlyphs">-</text>
<rect x="36" y="272" width="9" height="17" fill="#5f0000" />
<rect x="45" y="272" width="45" height="17" fill="#5f0000" />
<text x="45" y="274" fill="#0000ee" textLength="45" lengthAdjust="spacingAndGlyphs">const</text>
<rect x="90" y="272" width="117" height="17" fill="#5f0000" />
<text x="90" y="274" fill="#e5e5e5" textLength="117" lengthAdjust="spacingAndGlyphs"> oldLine13 = </text>
<rect x="207" y="272" width="36" height="17" fill="#5f0000" />
<text x="207" y="274" fill="#0000ee" textLength="36" lengthAdjust="spacingAndGlyphs">true</text>
<rect x="243" y="272" width="9" height="17" fill="#5f0000" />
<text x="243" y="274" fill="#e5e5e5" textLength="9" lengthAdjust="spacingAndGlyphs">;</text>
<rect x="0" y="289" width="18" height="17" fill="#005f00" />
<text x="0" y="291" fill="#afafaf" textLength="18" lengthAdjust="spacingAndGlyphs">13</text>
<rect x="18" y="289" width="9" height="17" fill="#005f00" />
<rect x="27" y="289" width="9" height="17" fill="#005f00" />
<text x="27" y="291" fill="#d7ffd7" textLength="9" lengthAdjust="spacingAndGlyphs">+</text>
<rect x="36" y="289" width="9" height="17" fill="#005f00" />
<rect x="45" y="289" width="45" height="17" fill="#005f00" />
<text x="45" y="291" fill="#0000ee" textLength="45" lengthAdjust="spacingAndGlyphs">const</text>
<rect x="90" y="289" width="117" height="17" fill="#005f00" />
<text x="90" y="291" fill="#e5e5e5" textLength="117" lengthAdjust="spacingAndGlyphs"> newLine13 = </text>
<rect x="207" y="289" width="36" height="17" fill="#005f00" />
<text x="207" y="291" fill="#0000ee" textLength="36" lengthAdjust="spacingAndGlyphs">true</text>
<rect x="243" y="289" width="9" height="17" fill="#005f00" />
<text x="243" y="291" fill="#e5e5e5" textLength="9" lengthAdjust="spacingAndGlyphs">;</text>
<rect x="0" y="306" width="18" height="17" fill="#5f0000" />
<text x="0" y="308" fill="#afafaf" textLength="18" lengthAdjust="spacingAndGlyphs">14</text>
<rect x="18" y="306" width="9" height="17" fill="#5f0000" />
<rect x="27" y="306" width="9" height="17" fill="#5f0000" />
<text x="27" y="308" fill="#ff87af" textLength="9" lengthAdjust="spacingAndGlyphs">-</text>
<rect x="36" y="306" width="9" height="17" fill="#5f0000" />
<rect x="45" y="306" width="45" height="17" fill="#5f0000" />
<text x="45" y="308" fill="#0000ee" textLength="45" lengthAdjust="spacingAndGlyphs">const</text>
<rect x="90" y="306" width="117" height="17" fill="#5f0000" />
<text x="90" y="308" fill="#e5e5e5" textLength="117" lengthAdjust="spacingAndGlyphs"> oldLine14 = </text>
<rect x="207" y="306" width="36" height="17" fill="#5f0000" />
<text x="207" y="308" fill="#0000ee" textLength="36" lengthAdjust="spacingAndGlyphs">true</text>
<rect x="243" y="306" width="9" height="17" fill="#5f0000" />
<text x="243" y="308" fill="#e5e5e5" textLength="9" lengthAdjust="spacingAndGlyphs">;</text>
<rect x="0" y="323" width="18" height="17" fill="#005f00" />
<text x="0" y="325" fill="#afafaf" textLength="18" lengthAdjust="spacingAndGlyphs">14</text>
<rect x="18" y="323" width="9" height="17" fill="#005f00" />
<rect x="27" y="323" width="9" height="17" fill="#005f00" />
<text x="27" y="325" fill="#d7ffd7" textLength="9" lengthAdjust="spacingAndGlyphs">+</text>
<rect x="36" y="323" width="9" height="17" fill="#005f00" />
<rect x="45" y="323" width="45" height="17" fill="#005f00" />
<text x="45" y="325" fill="#0000ee" textLength="45" lengthAdjust="spacingAndGlyphs">const</text>
<rect x="90" y="323" width="117" height="17" fill="#005f00" />
<text x="90" y="325" fill="#e5e5e5" textLength="117" lengthAdjust="spacingAndGlyphs"> newLine14 = </text>
<rect x="207" y="323" width="36" height="17" fill="#005f00" />
<text x="207" y="325" fill="#0000ee" textLength="36" lengthAdjust="spacingAndGlyphs">true</text>
<rect x="243" y="323" width="9" height="17" fill="#005f00" />
<text x="243" y="325" fill="#e5e5e5" textLength="9" lengthAdjust="spacingAndGlyphs">;</text>
<rect x="0" y="340" width="18" height="17" fill="#5f0000" />
<text x="0" y="342" fill="#afafaf" textLength="18" lengthAdjust="spacingAndGlyphs">15</text>
<rect x="18" y="340" width="9" height="17" fill="#5f0000" />
<rect x="27" y="340" width="9" height="17" fill="#5f0000" />
<text x="27" y="342" fill="#ff87af" textLength="9" lengthAdjust="spacingAndGlyphs">-</text>
<rect x="36" y="340" width="9" height="17" fill="#5f0000" />
<rect x="45" y="340" width="45" height="17" fill="#5f0000" />
<text x="45" y="342" fill="#0000ee" textLength="45" lengthAdjust="spacingAndGlyphs">const</text>
<rect x="90" y="340" width="117" height="17" fill="#5f0000" />
<text x="90" y="342" fill="#e5e5e5" textLength="117" lengthAdjust="spacingAndGlyphs"> oldLine15 = </text>
<rect x="207" y="340" width="36" height="17" fill="#5f0000" />
<text x="207" y="342" fill="#0000ee" textLength="36" lengthAdjust="spacingAndGlyphs">true</text>
<rect x="243" y="340" width="9" height="17" fill="#5f0000" />
<text x="243" y="342" fill="#e5e5e5" textLength="9" lengthAdjust="spacingAndGlyphs">;</text>
<rect x="0" y="357" width="18" height="17" fill="#005f00" />
<text x="0" y="359" fill="#afafaf" textLength="18" lengthAdjust="spacingAndGlyphs">15</text>
<rect x="18" y="357" width="9" height="17" fill="#005f00" />
<rect x="27" y="357" width="9" height="17" fill="#005f00" />
<text x="27" y="359" fill="#d7ffd7" textLength="9" lengthAdjust="spacingAndGlyphs">+</text>
<rect x="36" y="357" width="9" height="17" fill="#005f00" />
<rect x="45" y="357" width="45" height="17" fill="#005f00" />
<text x="45" y="359" fill="#0000ee" textLength="45" lengthAdjust="spacingAndGlyphs">const</text>
<rect x="90" y="357" width="117" height="17" fill="#005f00" />
<text x="90" y="359" fill="#e5e5e5" textLength="117" lengthAdjust="spacingAndGlyphs"> newLine15 = </text>
<rect x="207" y="357" width="36" height="17" fill="#005f00" />
<text x="207" y="359" fill="#0000ee" textLength="36" lengthAdjust="spacingAndGlyphs">true</text>
<rect x="243" y="357" width="9" height="17" fill="#005f00" />
<text x="243" y="359" fill="#e5e5e5" textLength="9" lengthAdjust="spacingAndGlyphs">;</text>
<rect x="0" y="374" width="18" height="17" fill="#5f0000" />
<text x="0" y="376" fill="#afafaf" textLength="18" lengthAdjust="spacingAndGlyphs">16</text>
<rect x="18" y="374" width="9" height="17" fill="#5f0000" />
<rect x="27" y="374" width="9" height="17" fill="#5f0000" />
<text x="27" y="376" fill="#ff87af" textLength="9" lengthAdjust="spacingAndGlyphs">-</text>
<rect x="36" y="374" width="9" height="17" fill="#5f0000" />
<rect x="45" y="374" width="45" height="17" fill="#5f0000" />
<text x="45" y="376" fill="#0000ee" textLength="45" lengthAdjust="spacingAndGlyphs">const</text>
<rect x="90" y="374" width="117" height="17" fill="#5f0000" />
<text x="90" y="376" fill="#e5e5e5" textLength="117" lengthAdjust="spacingAndGlyphs"> oldLine16 = </text>
<rect x="207" y="374" width="36" height="17" fill="#5f0000" />
<text x="207" y="376" fill="#0000ee" textLength="36" lengthAdjust="spacingAndGlyphs">true</text>
<rect x="243" y="374" width="9" height="17" fill="#5f0000" />
<text x="243" y="376" fill="#e5e5e5" textLength="9" lengthAdjust="spacingAndGlyphs">;</text>
<rect x="0" y="391" width="18" height="17" fill="#005f00" />
<text x="0" y="393" fill="#afafaf" textLength="18" lengthAdjust="spacingAndGlyphs">16</text>
<rect x="18" y="391" width="9" height="17" fill="#005f00" />
<rect x="27" y="391" width="9" height="17" fill="#005f00" />
<text x="27" y="393" fill="#d7ffd7" textLength="9" lengthAdjust="spacingAndGlyphs">+</text>
<rect x="36" y="391" width="9" height="17" fill="#005f00" />
<rect x="45" y="391" width="45" height="17" fill="#005f00" />
<text x="45" y="393" fill="#0000ee" textLength="45" lengthAdjust="spacingAndGlyphs">const</text>
<rect x="90" y="391" width="117" height="17" fill="#005f00" />
<text x="90" y="393" fill="#e5e5e5" textLength="117" lengthAdjust="spacingAndGlyphs"> newLine16 = </text>
<rect x="207" y="391" width="36" height="17" fill="#005f00" />
<text x="207" y="393" fill="#0000ee" textLength="36" lengthAdjust="spacingAndGlyphs">true</text>
<rect x="243" y="391" width="9" height="17" fill="#005f00" />
<text x="243" y="393" fill="#e5e5e5" textLength="9" lengthAdjust="spacingAndGlyphs">;</text>
<rect x="0" y="408" width="18" height="17" fill="#5f0000" />
<text x="0" y="410" fill="#afafaf" textLength="18" lengthAdjust="spacingAndGlyphs">17</text>
<rect x="18" y="408" width="9" height="17" fill="#5f0000" />
<rect x="27" y="408" width="9" height="17" fill="#5f0000" />
<text x="27" y="410" fill="#ff87af" textLength="9" lengthAdjust="spacingAndGlyphs">-</text>
<rect x="36" y="408" width="9" height="17" fill="#5f0000" />
<rect x="45" y="408" width="45" height="17" fill="#5f0000" />
<text x="45" y="410" fill="#0000ee" textLength="45" lengthAdjust="spacingAndGlyphs">const</text>
<rect x="90" y="408" width="117" height="17" fill="#5f0000" />
<text x="90" y="410" fill="#e5e5e5" textLength="117" lengthAdjust="spacingAndGlyphs"> oldLine17 = </text>
<rect x="207" y="408" width="36" height="17" fill="#5f0000" />
<text x="207" y="410" fill="#0000ee" textLength="36" lengthAdjust="spacingAndGlyphs">true</text>
<rect x="243" y="408" width="9" height="17" fill="#5f0000" />
<text x="243" y="410" fill="#e5e5e5" textLength="9" lengthAdjust="spacingAndGlyphs">;</text>
<rect x="0" y="425" width="18" height="17" fill="#005f00" />
<text x="0" y="427" fill="#afafaf" textLength="18" lengthAdjust="spacingAndGlyphs">17</text>
<rect x="18" y="425" width="9" height="17" fill="#005f00" />
<rect x="27" y="425" width="9" height="17" fill="#005f00" />
<text x="27" y="427" fill="#d7ffd7" textLength="9" lengthAdjust="spacingAndGlyphs">+</text>
<rect x="36" y="425" width="9" height="17" fill="#005f00" />
<rect x="45" y="425" width="45" height="17" fill="#005f00" />
<text x="45" y="427" fill="#0000ee" textLength="45" lengthAdjust="spacingAndGlyphs">const</text>
<rect x="90" y="425" width="117" height="17" fill="#005f00" />
<text x="90" y="427" fill="#e5e5e5" textLength="117" lengthAdjust="spacingAndGlyphs"> newLine17 = </text>
<rect x="207" y="425" width="36" height="17" fill="#005f00" />
<text x="207" y="427" fill="#0000ee" textLength="36" lengthAdjust="spacingAndGlyphs">true</text>
<rect x="243" y="425" width="9" height="17" fill="#005f00" />
<text x="243" y="427" fill="#e5e5e5" textLength="9" lengthAdjust="spacingAndGlyphs">;</text>
<rect x="0" y="442" width="18" height="17" fill="#5f0000" />
<text x="0" y="444" fill="#afafaf" textLength="18" lengthAdjust="spacingAndGlyphs">18</text>
<rect x="18" y="442" width="9" height="17" fill="#5f0000" />
<rect x="27" y="442" width="9" height="17" fill="#5f0000" />
<text x="27" y="444" fill="#ff87af" textLength="9" lengthAdjust="spacingAndGlyphs">-</text>
<rect x="36" y="442" width="9" height="17" fill="#5f0000" />
<rect x="45" y="442" width="45" height="17" fill="#5f0000" />
<text x="45" y="444" fill="#0000ee" textLength="45" lengthAdjust="spacingAndGlyphs">const</text>
<rect x="90" y="442" width="117" height="17" fill="#5f0000" />
<text x="90" y="444" fill="#e5e5e5" textLength="117" lengthAdjust="spacingAndGlyphs"> oldLine18 = </text>
<rect x="207" y="442" width="36" height="17" fill="#5f0000" />
<text x="207" y="444" fill="#0000ee" textLength="36" lengthAdjust="spacingAndGlyphs">true</text>
<rect x="243" y="442" width="9" height="17" fill="#5f0000" />
<text x="243" y="444" fill="#e5e5e5" textLength="9" lengthAdjust="spacingAndGlyphs">;</text>
<rect x="0" y="459" width="18" height="17" fill="#005f00" />
<text x="0" y="461" fill="#afafaf" textLength="18" lengthAdjust="spacingAndGlyphs">18</text>
<rect x="18" y="459" width="9" height="17" fill="#005f00" />
<rect x="27" y="459" width="9" height="17" fill="#005f00" />
<text x="27" y="461" fill="#d7ffd7" textLength="9" lengthAdjust="spacingAndGlyphs">+</text>
<rect x="36" y="459" width="9" height="17" fill="#005f00" />
<rect x="45" y="459" width="45" height="17" fill="#005f00" />
<text x="45" y="461" fill="#0000ee" textLength="45" lengthAdjust="spacingAndGlyphs">const</text>
<rect x="90" y="459" width="117" height="17" fill="#005f00" />
<text x="90" y="461" fill="#e5e5e5" textLength="117" lengthAdjust="spacingAndGlyphs"> newLine18 = </text>
<rect x="207" y="459" width="36" height="17" fill="#005f00" />
<text x="207" y="461" fill="#0000ee" textLength="36" lengthAdjust="spacingAndGlyphs">true</text>
<rect x="243" y="459" width="9" height="17" fill="#005f00" />
<text x="243" y="461" fill="#e5e5e5" textLength="9" lengthAdjust="spacingAndGlyphs">;</text>
<rect x="0" y="476" width="18" height="17" fill="#5f0000" />
<text x="0" y="478" fill="#afafaf" textLength="18" lengthAdjust="spacingAndGlyphs">19</text>
<rect x="18" y="476" width="9" height="17" fill="#5f0000" />
<rect x="27" y="476" width="9" height="17" fill="#5f0000" />
<text x="27" y="478" fill="#ff87af" textLength="9" lengthAdjust="spacingAndGlyphs">-</text>
<rect x="36" y="476" width="9" height="17" fill="#5f0000" />
<rect x="45" y="476" width="45" height="17" fill="#5f0000" />
<text x="45" y="478" fill="#0000ee" textLength="45" lengthAdjust="spacingAndGlyphs">const</text>
<rect x="90" y="476" width="117" height="17" fill="#5f0000" />
<text x="90" y="478" fill="#e5e5e5" textLength="117" lengthAdjust="spacingAndGlyphs"> oldLine19 = </text>
<rect x="207" y="476" width="36" height="17" fill="#5f0000" />
<text x="207" y="478" fill="#0000ee" textLength="36" lengthAdjust="spacingAndGlyphs">true</text>
<rect x="243" y="476" width="9" height="17" fill="#5f0000" />
<text x="243" y="478" fill="#e5e5e5" textLength="9" lengthAdjust="spacingAndGlyphs">;</text>
<rect x="0" y="493" width="18" height="17" fill="#005f00" />
<text x="0" y="495" fill="#afafaf" textLength="18" lengthAdjust="spacingAndGlyphs">19</text>
<rect x="18" y="493" width="9" height="17" fill="#005f00" />
<rect x="27" y="493" width="9" height="17" fill="#005f00" />
<text x="27" y="495" fill="#d7ffd7" textLength="9" lengthAdjust="spacingAndGlyphs">+</text>
<rect x="36" y="493" width="9" height="17" fill="#005f00" />
<rect x="45" y="493" width="45" height="17" fill="#005f00" />
<text x="45" y="495" fill="#0000ee" textLength="45" lengthAdjust="spacingAndGlyphs">const</text>
<rect x="90" y="493" width="117" height="17" fill="#005f00" />
<text x="90" y="495" fill="#e5e5e5" textLength="117" lengthAdjust="spacingAndGlyphs"> newLine19 = </text>
<rect x="207" y="493" width="36" height="17" fill="#005f00" />
<text x="207" y="495" fill="#0000ee" textLength="36" lengthAdjust="spacingAndGlyphs">true</text>
<rect x="243" y="493" width="9" height="17" fill="#005f00" />
<text x="243" y="495" fill="#e5e5e5" textLength="9" lengthAdjust="spacingAndGlyphs">;</text>
<rect x="0" y="510" width="18" height="17" fill="#5f0000" />
<text x="0" y="512" fill="#afafaf" textLength="18" lengthAdjust="spacingAndGlyphs">20</text>
<rect x="18" y="510" width="9" height="17" fill="#5f0000" />
<rect x="27" y="510" width="9" height="17" fill="#5f0000" />
<text x="27" y="512" fill="#ff87af" textLength="9" lengthAdjust="spacingAndGlyphs">-</text>
<rect x="36" y="510" width="9" height="17" fill="#5f0000" />
<rect x="45" y="510" width="45" height="17" fill="#5f0000" />
<text x="45" y="512" fill="#0000ee" textLength="45" lengthAdjust="spacingAndGlyphs">const</text>
<rect x="90" y="510" width="117" height="17" fill="#5f0000" />
<text x="90" y="512" fill="#e5e5e5" textLength="117" lengthAdjust="spacingAndGlyphs"> oldLine20 = </text>
<rect x="207" y="510" width="36" height="17" fill="#5f0000" />
<text x="207" y="512" fill="#0000ee" textLength="36" lengthAdjust="spacingAndGlyphs">true</text>
<rect x="243" y="510" width="9" height="17" fill="#5f0000" />
<text x="243" y="512" fill="#e5e5e5" textLength="9" lengthAdjust="spacingAndGlyphs">;</text>
<rect x="0" y="527" width="18" height="17" fill="#005f00" />
<text x="0" y="529" fill="#afafaf" textLength="18" lengthAdjust="spacingAndGlyphs">20</text>
<rect x="18" y="527" width="9" height="17" fill="#005f00" />
<rect x="27" y="527" width="9" height="17" fill="#005f00" />
<text x="27" y="529" fill="#d7ffd7" textLength="9" lengthAdjust="spacingAndGlyphs">+</text>
<rect x="36" y="527" width="9" height="17" fill="#005f00" />
<rect x="45" y="527" width="45" height="17" fill="#005f00" />
<text x="45" y="529" fill="#0000ee" textLength="45" lengthAdjust="spacingAndGlyphs">const</text>
<rect x="90" y="527" width="117" height="17" fill="#005f00" />
<text x="90" y="529" fill="#e5e5e5" textLength="117" lengthAdjust="spacingAndGlyphs"> newLine20 = </text>
<rect x="207" y="527" width="36" height="17" fill="#005f00" />
<text x="207" y="529" fill="#0000ee" textLength="36" lengthAdjust="spacingAndGlyphs">true</text>
<rect x="243" y="527" width="9" height="17" fill="#005f00" />
<text x="243" y="529" fill="#e5e5e5" textLength="9" lengthAdjust="spacingAndGlyphs">;</text>
<text x="0" y="546" fill="#ffffff" textLength="162" lengthAdjust="spacingAndGlyphs">Apply this change?</text>
<rect x="0" y="578" width="9" height="17" fill="#001a00" />
<text x="0" y="580" fill="#00cd00" textLength="9" lengthAdjust="spacingAndGlyphs">●</text>
<rect x="9" y="578" width="9" height="17" fill="#001a00" />
<rect x="18" y="578" width="18" height="17" fill="#001a00" />
<text x="18" y="580" fill="#00cd00" textLength="18" lengthAdjust="spacingAndGlyphs">1.</text>
<rect x="36" y="578" width="9" height="17" fill="#001a00" />
<rect x="45" y="578" width="90" height="17" fill="#001a00" />
<text x="45" y="580" fill="#00cd00" textLength="90" lengthAdjust="spacingAndGlyphs">Allow once</text>
<rect x="135" y="578" width="153" height="17" fill="#001a00" />
<text x="18" y="597" fill="#ffffff" textLength="18" lengthAdjust="spacingAndGlyphs">2.</text>
<text x="45" y="597" fill="#ffffff" textLength="198" lengthAdjust="spacingAndGlyphs">Allow for this session</text>
<text x="18" y="614" fill="#ffffff" textLength="18" lengthAdjust="spacingAndGlyphs">3.</text>
<text x="45" y="614" fill="#ffffff" textLength="243" lengthAdjust="spacingAndGlyphs">Modify with external editor</text>
<text x="18" y="631" fill="#ffffff" textLength="18" lengthAdjust="spacingAndGlyphs">4.</text>
<text x="45" y="631" fill="#ffffff" textLength="225" lengthAdjust="spacingAndGlyphs">No, suggest changes (esc)</text>
</g>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 36 KiB

87
packages/cli/src/ui/components/messages/__snapshots__/ToolConfirmationMessage-ToolConfirmationMessage-height-allocation-and-layout-should-expand-to-available-height-for-large-exec-commands.snap.svg Normal file
View File

@@ -0,0 +1,87 @@
<svg xmlns="http://www.w3.org/2000/svg" width="920" height="666" viewBox="0 0 920 666">
<style>
text { font-family: Consolas, "Courier New", monospace; font-size: 14px; dominant-baseline: text-before-edge; white-space: pre; }
</style>
<rect width="920" height="666" fill="#000000" />
<g transform="translate(10, 10)">
<text x="0" y="2" fill="#afafaf" textLength="414" lengthAdjust="spacingAndGlyphs">... first 18 lines hidden (Ctrl+O to show) ...</text>
<text x="0" y="19" fill="#00cdcd" textLength="36" lengthAdjust="spacingAndGlyphs">echo</text>
<text x="45" y="19" fill="#cdcd00" textLength="81" lengthAdjust="spacingAndGlyphs">&quot;Line 19&quot;</text>
<text x="0" y="36" fill="#00cdcd" textLength="36" lengthAdjust="spacingAndGlyphs">echo</text>
<text x="45" y="36" fill="#cdcd00" textLength="81" lengthAdjust="spacingAndGlyphs">&quot;Line 20&quot;</text>
<text x="0" y="53" fill="#00cdcd" textLength="36" lengthAdjust="spacingAndGlyphs">echo</text>
<text x="45" y="53" fill="#cdcd00" textLength="81" lengthAdjust="spacingAndGlyphs">&quot;Line 21&quot;</text>
<text x="0" y="70" fill="#00cdcd" textLength="36" lengthAdjust="spacingAndGlyphs">echo</text>
<text x="45" y="70" fill="#cdcd00" textLength="81" lengthAdjust="spacingAndGlyphs">&quot;Line 22&quot;</text>
<text x="0" y="87" fill="#00cdcd" textLength="36" lengthAdjust="spacingAndGlyphs">echo</text>
<text x="45" y="87" fill="#cdcd00" textLength="81" lengthAdjust="spacingAndGlyphs">&quot;Line 23&quot;</text>
<text x="0" y="104" fill="#00cdcd" textLength="36" lengthAdjust="spacingAndGlyphs">echo</text>
<text x="45" y="104" fill="#cdcd00" textLength="81" lengthAdjust="spacingAndGlyphs">&quot;Line 24&quot;</text>
<text x="0" y="121" fill="#00cdcd" textLength="36" lengthAdjust="spacingAndGlyphs">echo</text>
<text x="45" y="121" fill="#cdcd00" textLength="81" lengthAdjust="spacingAndGlyphs">&quot;Line 25&quot;</text>
<text x="0" y="138" fill="#00cdcd" textLength="36" lengthAdjust="spacingAndGlyphs">echo</text>
<text x="45" y="138" fill="#cdcd00" textLength="81" lengthAdjust="spacingAndGlyphs">&quot;Line 26&quot;</text>
<text x="0" y="155" fill="#00cdcd" textLength="36" lengthAdjust="spacingAndGlyphs">echo</text>
<text x="45" y="155" fill="#cdcd00" textLength="81" lengthAdjust="spacingAndGlyphs">&quot;Line 27&quot;</text>
<text x="0" y="172" fill="#00cdcd" textLength="36" lengthAdjust="spacingAndGlyphs">echo</text>
<text x="45" y="172" fill="#cdcd00" textLength="81" lengthAdjust="spacingAndGlyphs">&quot;Line 28&quot;</text>
<text x="0" y="189" fill="#00cdcd" textLength="36" lengthAdjust="spacingAndGlyphs">echo</text>
<text x="45" y="189" fill="#cdcd00" textLength="81" lengthAdjust="spacingAndGlyphs">&quot;Line 29&quot;</text>
<text x="0" y="206" fill="#00cdcd" textLength="36" lengthAdjust="spacingAndGlyphs">echo</text>
<text x="45" y="206" fill="#cdcd00" textLength="81" lengthAdjust="spacingAndGlyphs">&quot;Line 30&quot;</text>
<text x="0" y="223" fill="#00cdcd" textLength="36" lengthAdjust="spacingAndGlyphs">echo</text>
<text x="45" y="223" fill="#cdcd00" textLength="81" lengthAdjust="spacingAndGlyphs">&quot;Line 31&quot;</text>
<text x="0" y="240" fill="#00cdcd" textLength="36" lengthAdjust="spacingAndGlyphs">echo</text>
<text x="45" y="240" fill="#cdcd00" textLength="81" lengthAdjust="spacingAndGlyphs">&quot;Line 32&quot;</text>
<text x="0" y="257" fill="#00cdcd" textLength="36" lengthAdjust="spacingAndGlyphs">echo</text>
<text x="45" y="257" fill="#cdcd00" textLength="81" lengthAdjust="spacingAndGlyphs">&quot;Line 33&quot;</text>
<text x="0" y="274" fill="#00cdcd" textLength="36" lengthAdjust="spacingAndGlyphs">echo</text>
<text x="45" y="274" fill="#cdcd00" textLength="81" lengthAdjust="spacingAndGlyphs">&quot;Line 34&quot;</text>
<text x="0" y="291" fill="#00cdcd" textLength="36" lengthAdjust="spacingAndGlyphs">echo</text>
<text x="45" y="291" fill="#cdcd00" textLength="81" lengthAdjust="spacingAndGlyphs">&quot;Line 35&quot;</text>
<text x="0" y="308" fill="#00cdcd" textLength="36" lengthAdjust="spacingAndGlyphs">echo</text>
<text x="45" y="308" fill="#cdcd00" textLength="81" lengthAdjust="spacingAndGlyphs">&quot;Line 36&quot;</text>
<text x="0" y="325" fill="#00cdcd" textLength="36" lengthAdjust="spacingAndGlyphs">echo</text>
<text x="45" y="325" fill="#cdcd00" textLength="81" lengthAdjust="spacingAndGlyphs">&quot;Line 37&quot;</text>
<text x="0" y="342" fill="#00cdcd" textLength="36" lengthAdjust="spacingAndGlyphs">echo</text>
<text x="45" y="342" fill="#cdcd00" textLength="81" lengthAdjust="spacingAndGlyphs">&quot;Line 38&quot;</text>
<text x="0" y="359" fill="#00cdcd" textLength="36" lengthAdjust="spacingAndGlyphs">echo</text>
<text x="45" y="359" fill="#cdcd00" textLength="81" lengthAdjust="spacingAndGlyphs">&quot;Line 39&quot;</text>
<text x="0" y="376" fill="#00cdcd" textLength="36" lengthAdjust="spacingAndGlyphs">echo</text>
<text x="45" y="376" fill="#cdcd00" textLength="81" lengthAdjust="spacingAndGlyphs">&quot;Line 40&quot;</text>
<text x="0" y="393" fill="#00cdcd" textLength="36" lengthAdjust="spacingAndGlyphs">echo</text>
<text x="45" y="393" fill="#cdcd00" textLength="81" lengthAdjust="spacingAndGlyphs">&quot;Line 41&quot;</text>
<text x="0" y="410" fill="#00cdcd" textLength="36" lengthAdjust="spacingAndGlyphs">echo</text>
<text x="45" y="410" fill="#cdcd00" textLength="81" lengthAdjust="spacingAndGlyphs">&quot;Line 42&quot;</text>
<text x="0" y="427" fill="#00cdcd" textLength="36" lengthAdjust="spacingAndGlyphs">echo</text>
<text x="45" y="427" fill="#cdcd00" textLength="81" lengthAdjust="spacingAndGlyphs">&quot;Line 43&quot;</text>
<text x="0" y="444" fill="#00cdcd" textLength="36" lengthAdjust="spacingAndGlyphs">echo</text>
<text x="45" y="444" fill="#cdcd00" textLength="81" lengthAdjust="spacingAndGlyphs">&quot;Line 44&quot;</text>
<text x="0" y="461" fill="#00cdcd" textLength="36" lengthAdjust="spacingAndGlyphs">echo</text>
<text x="45" y="461" fill="#cdcd00" textLength="81" lengthAdjust="spacingAndGlyphs">&quot;Line 45&quot;</text>
<text x="0" y="478" fill="#00cdcd" textLength="36" lengthAdjust="spacingAndGlyphs">echo</text>
<text x="45" y="478" fill="#cdcd00" textLength="81" lengthAdjust="spacingAndGlyphs">&quot;Line 46&quot;</text>
<text x="0" y="495" fill="#00cdcd" textLength="36" lengthAdjust="spacingAndGlyphs">echo</text>
<text x="45" y="495" fill="#cdcd00" textLength="81" lengthAdjust="spacingAndGlyphs">&quot;Line 47&quot;</text>
<text x="0" y="512" fill="#00cdcd" textLength="36" lengthAdjust="spacingAndGlyphs">echo</text>
<text x="45" y="512" fill="#cdcd00" textLength="81" lengthAdjust="spacingAndGlyphs">&quot;Line 48&quot;</text>
<text x="0" y="529" fill="#00cdcd" textLength="36" lengthAdjust="spacingAndGlyphs">echo</text>
<text x="45" y="529" fill="#cdcd00" textLength="81" lengthAdjust="spacingAndGlyphs">&quot;Line 49&quot;</text>
<text x="0" y="546" fill="#00cdcd" textLength="36" lengthAdjust="spacingAndGlyphs">echo</text>
<text x="45" y="546" fill="#cdcd00" textLength="81" lengthAdjust="spacingAndGlyphs">&quot;Line 50&quot;</text>
<text x="0" y="563" fill="#ffffff" textLength="243" lengthAdjust="spacingAndGlyphs">Allow execution of: &apos;echo&apos;?</text>
<rect x="0" y="595" width="9" height="17" fill="#001a00" />
<text x="0" y="597" fill="#00cd00" textLength="9" lengthAdjust="spacingAndGlyphs">●</text>
<rect x="9" y="595" width="9" height="17" fill="#001a00" />
<rect x="18" y="595" width="18" height="17" fill="#001a00" />
<text x="18" y="597" fill="#00cd00" textLength="18" lengthAdjust="spacingAndGlyphs">1.</text>
<rect x="36" y="595" width="9" height="17" fill="#001a00" />
<rect x="45" y="595" width="90" height="17" fill="#001a00" />
<text x="45" y="597" fill="#00cd00" textLength="90" lengthAdjust="spacingAndGlyphs">Allow once</text>
<rect x="135" y="595" width="135" height="17" fill="#001a00" />
<text x="18" y="614" fill="#ffffff" textLength="18" lengthAdjust="spacingAndGlyphs">2.</text>
<text x="45" y="614" fill="#ffffff" textLength="198" lengthAdjust="spacingAndGlyphs">Allow for this session</text>
<text x="18" y="631" fill="#ffffff" textLength="18" lengthAdjust="spacingAndGlyphs">3.</text>
<text x="45" y="631" fill="#ffffff" textLength="225" lengthAdjust="spacingAndGlyphs">No, suggest changes (esc)</text>
</g>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 8.4 KiB

0
packages/cli/src/ui/components/messages/__snapshots__/ToolConfirmationMessage-ToolConfirmationMessage-should-render-multiline-shell-scripts-with-correct-newlines-and-syntax-highlighting-SVG-snapshot-.snap.svg → packages/cli/src/ui/components/messages/__snapshots__/ToolConfirmationMessage-ToolConfirmationMessage-should-render-multiline-shell-scripts-with-correct-newlines-and-syntax-highlighting.snap.svg
View File

Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 2.5 KiB

After

Width:  |  Height:  |  Size: 2.5 KiB

86
packages/cli/src/ui/components/messages/__snapshots__/ToolConfirmationMessage.test.tsx.snap
View File

@@ -16,6 +16,90 @@ Apply this change?
"
`;
exports[`ToolConfirmationMessage > height allocation and layout > should expand to available height for large edit diffs 1`] = `
"... first 9 lines hidden (Ctrl+O to show) ...
5 + const newLine5 = true;
6 - const oldLine6 = true;
6 + const newLine6 = true;
7 - const oldLine7 = true;
7 + const newLine7 = true;
8 - const oldLine8 = true;
8 + const newLine8 = true;
9 - const oldLine9 = true;
9 + const newLine9 = true;
10 - const oldLine10 = true;
10 + const newLine10 = true;
11 - const oldLine11 = true;
11 + const newLine11 = true;
12 - const oldLine12 = true;
12 + const newLine12 = true;
13 - const oldLine13 = true;
13 + const newLine13 = true;
14 - const oldLine14 = true;
14 + const newLine14 = true;
15 - const oldLine15 = true;
15 + const newLine15 = true;
16 - const oldLine16 = true;
16 + const newLine16 = true;
17 - const oldLine17 = true;
17 + const newLine17 = true;
18 - const oldLine18 = true;
18 + const newLine18 = true;
19 - const oldLine19 = true;
19 + const newLine19 = true;
20 - const oldLine20 = true;
20 + const newLine20 = true;
Apply this change?
● 1. Allow once
2. Allow for this session
3. Modify with external editor
4. No, suggest changes (esc)
"
`;
exports[`ToolConfirmationMessage > height allocation and layout > should expand to available height for large exec commands 1`] = `
"... first 18 lines hidden (Ctrl+O to show) ...
echo "Line 19"
echo "Line 20"
echo "Line 21"
echo "Line 22"
echo "Line 23"
echo "Line 24"
echo "Line 25"
echo "Line 26"
echo "Line 27"
echo "Line 28"
echo "Line 29"
echo "Line 30"
echo "Line 31"
echo "Line 32"
echo "Line 33"
echo "Line 34"
echo "Line 35"
echo "Line 36"
echo "Line 37"
echo "Line 38"
echo "Line 39"
echo "Line 40"
echo "Line 41"
echo "Line 42"
echo "Line 43"
echo "Line 44"
echo "Line 45"
echo "Line 46"
echo "Line 47"
echo "Line 48"
echo "Line 49"
echo "Line 50"
Allow execution of: 'echo'?
● 1. Allow once
2. Allow for this session
3. No, suggest changes (esc)
"
`;
exports[`ToolConfirmationMessage > should display multiple commands for exec type when provided 1`] = `
"echo "hello"
@@ -53,7 +137,7 @@ Do you want to proceed?
"
`;
exports[`ToolConfirmationMessage > should render multiline shell scripts with correct newlines and syntax highlighting (SVG snapshot) 1`] = `
exports[`ToolConfirmationMessage > should render multiline shell scripts with correct newlines and syntax highlighting 1`] = `
"echo "hello"
for i in 1 2 3; do
echo $i