fss-link 1.0.40 → 1.0.45

package/dist/ui/components/messages/ToolConfirmationMessage.tsx

@@ -0,0 +1,297 @@
+/**
+ * @license
+ * Copyright 2025 Google LLC
+ * SPDX-License-Identifier: Apache-2.0
+ */
+
+import React from 'react';
+import { Box, Text } from 'ink';
+import { DiffRenderer } from './DiffRenderer.js';
+import { Colors } from '../../colors.js';
+import { RenderInline } from '../../utils/InlineMarkdownRenderer.js';
+import {
+  ToolCallConfirmationDetails,
+  ToolConfirmationOutcome,
+  ToolExecuteConfirmationDetails,
+  ToolMcpConfirmationDetails,
+  Config,
+} from 'fss-link-core';
+import {
+  RadioButtonSelect,
+  RadioSelectItem,
+} from '../shared/RadioButtonSelect.js';
+import { MaxSizedBox } from '../shared/MaxSizedBox.js';
+import { useKeypress } from '../../hooks/useKeypress.js';
+
+export interface ToolConfirmationMessageProps {
+  confirmationDetails: ToolCallConfirmationDetails;
+  config?: Config;
+  isFocused?: boolean;
+  availableTerminalHeight?: number;
+  terminalWidth: number;
+}
+
+export const ToolConfirmationMessage: React.FC<
+  ToolConfirmationMessageProps
+> = ({
+  confirmationDetails,
+  config,
+  isFocused = true,
+  availableTerminalHeight,
+  terminalWidth,
+}) => {
+  const { onConfirm } = confirmationDetails;
+  const childWidth = terminalWidth - 2; // 2 for padding
+
+  const handleConfirm = async (outcome: ToolConfirmationOutcome) => {
+    if (confirmationDetails.type === 'edit') {
+      const ideClient = config?.getIdeClient();
+      if (config?.getIdeMode()) {
+        const cliOutcome =
+          outcome === ToolConfirmationOutcome.Cancel ? 'rejected' : 'accepted';
+        await ideClient?.resolveDiffFromCli(
+          confirmationDetails.filePath,
+          cliOutcome,
+        );
+      }
+    }
+    onConfirm(outcome);
+  };
+
+  useKeypress(
+    (key) => {
+      if (!isFocused) return;
+      if (key.name === 'escape' || (key.ctrl && key.name === 'c')) {
+        handleConfirm(ToolConfirmationOutcome.Cancel);
+      }
+    },
+    { isActive: isFocused },
+  );
+
+  const handleSelect = (item: ToolConfirmationOutcome) => handleConfirm(item);
+
+  let bodyContent: React.ReactNode | null = null; // Removed contextDisplay here
+  let question: string;
+
+  const options: Array<RadioSelectItem<ToolConfirmationOutcome>> = new Array<
+    RadioSelectItem<ToolConfirmationOutcome>
+  >();
+
+  // Body content is now the DiffRenderer, passing filename to it
+  // The bordered box is removed from here and handled within DiffRenderer
+
+  function availableBodyContentHeight() {
+    if (options.length === 0) {
+      // This should not happen in practice as options are always added before this is called.
+      throw new Error('Options not provided for confirmation message');
+    }
+
+    if (availableTerminalHeight === undefined) {
+      return undefined;
+    }
+
+    // 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 HEIGHT_QUESTION = 1; // The question text is one line.
+    const MARGIN_QUESTION_BOTTOM = 1; // Margin on the question container.
+    const HEIGHT_OPTIONS = options.length; // Each option in the radio select takes one line.
+
+    const surroundingElementsHeight =
+      PADDING_OUTER_Y +
+      MARGIN_BODY_BOTTOM +
+      HEIGHT_QUESTION +
+      MARGIN_QUESTION_BOTTOM +
+      HEIGHT_OPTIONS;
+    return Math.max(availableTerminalHeight - surroundingElementsHeight, 1);
+  }
+
+  if (confirmationDetails.type === 'edit') {
+    if (confirmationDetails.isModifying) {
+      return (
+        <Box
+          minWidth="90%"
+          borderStyle="round"
+          borderColor={Colors.Gray}
+          justifyContent="space-around"
+          padding={1}
+          overflow="hidden"
+        >
+          <Text>Modify in progress: </Text>
+          <Text color={Colors.AccentGreen}>
+            Save and close external editor to continue
+          </Text>
+        </Box>
+      );
+    }
+
+    question = `Apply this change?`;
+    options.push(
+      {
+        label: 'Yes, allow once',
+        value: ToolConfirmationOutcome.ProceedOnce,
+      },
+      {
+        label: 'Yes, allow always',
+        value: ToolConfirmationOutcome.ProceedAlways,
+      },
+    );
+    if (config?.getIdeMode()) {
+      options.push({
+        label: 'No (esc)',
+        value: ToolConfirmationOutcome.Cancel,
+      });
+    } else {
+      options.push({
+        label: 'Modify with external editor',
+        value: ToolConfirmationOutcome.ModifyWithEditor,
+      });
+      options.push({
+        label: 'No, suggest changes (esc)',
+        value: ToolConfirmationOutcome.Cancel,
+      });
+    }
+
+    bodyContent = (
+      <DiffRenderer
+        diffContent={confirmationDetails.fileDiff}
+        filename={confirmationDetails.fileName}
+        availableTerminalHeight={availableBodyContentHeight()}
+        terminalWidth={childWidth}
+      />
+    );
+  } else if (confirmationDetails.type === 'exec') {
+    const executionProps =
+      confirmationDetails as ToolExecuteConfirmationDetails;
+
+    question = `Allow execution of: '${executionProps.rootCommand}'?`;
+    options.push(
+      {
+        label: `Yes, allow once`,
+        value: ToolConfirmationOutcome.ProceedOnce,
+      },
+      {
+        label: `Yes, allow always ...`,
+        value: ToolConfirmationOutcome.ProceedAlways,
+      },
+      {
+        label: 'No, suggest changes (esc)',
+        value: ToolConfirmationOutcome.Cancel,
+      },
+    );
+
+    let bodyContentHeight = availableBodyContentHeight();
+    if (bodyContentHeight !== undefined) {
+      bodyContentHeight -= 2; // Account for padding;
+    }
+    bodyContent = (
+      <Box flexDirection="column">
+        <Box paddingX={1} marginLeft={1}>
+          <MaxSizedBox
+            maxHeight={bodyContentHeight}
+            maxWidth={Math.max(childWidth - 4, 1)}
+          >
+            <Box>
+              <Text color={Colors.AccentCyan}>{executionProps.command}</Text>
+            </Box>
+          </MaxSizedBox>
+        </Box>
+      </Box>
+    );
+  } else if (confirmationDetails.type === 'info') {
+    const infoProps = confirmationDetails;
+    const displayUrls =
+      infoProps.urls &&
+      !(infoProps.urls.length === 1 && infoProps.urls[0] === infoProps.prompt);
+
+    question = `Do you want to proceed?`;
+    options.push(
+      {
+        label: 'Yes, allow once',
+        value: ToolConfirmationOutcome.ProceedOnce,
+      },
+      {
+        label: 'Yes, allow always',
+        value: ToolConfirmationOutcome.ProceedAlways,
+      },
+      {
+        label: 'No, suggest changes (esc)',
+        value: ToolConfirmationOutcome.Cancel,
+      },
+    );
+
+    bodyContent = (
+      <Box flexDirection="column" paddingX={1} marginLeft={1}>
+        <Text color={Colors.AccentCyan}>
+          <RenderInline text={infoProps.prompt} />
+        </Text>
+        {displayUrls && infoProps.urls && infoProps.urls.length > 0 && (
+          <Box flexDirection="column" marginTop={1}>
+            <Text>URLs to fetch:</Text>
+            {infoProps.urls.map((url) => (
+              <Text key={url}>
+                {' '}
+                - <RenderInline text={url} />
+              </Text>
+            ))}
+          </Box>
+        )}
+      </Box>
+    );
+  } else {
+    // mcp tool confirmation
+    const mcpProps = confirmationDetails as ToolMcpConfirmationDetails;
+
+    bodyContent = (
+      <Box flexDirection="column" paddingX={1} marginLeft={1}>
+        <Text color={Colors.AccentCyan}>MCP Server: {mcpProps.serverName}</Text>
+        <Text color={Colors.AccentCyan}>Tool: {mcpProps.toolName}</Text>
+      </Box>
+    );
+
+    question = `Allow execution of MCP tool "${mcpProps.toolName}" from server "${mcpProps.serverName}"?`;
+    options.push(
+      {
+        label: 'Yes, allow once',
+        value: ToolConfirmationOutcome.ProceedOnce,
+      },
+      {
+        label: `Yes, always allow tool "${mcpProps.toolName}" from server "${mcpProps.serverName}"`,
+        value: ToolConfirmationOutcome.ProceedAlwaysTool, // Cast until types are updated
+      },
+      {
+        label: `Yes, always allow all tools from server "${mcpProps.serverName}"`,
+        value: ToolConfirmationOutcome.ProceedAlwaysServer,
+      },
+      {
+        label: 'No, suggest changes (esc)',
+        value: ToolConfirmationOutcome.Cancel,
+      },
+    );
+  }
+
+  return (
+    <Box flexDirection="column" padding={1} width={childWidth}>
+      {/* Body Content (Diff Renderer or Command Info) */}
+      {/* No separate context display here anymore for edits */}
+      <Box flexGrow={1} flexShrink={1} overflow="hidden" marginBottom={1}>
+        {bodyContent}
+      </Box>
+
+      {/* Confirmation Question */}
+      <Box marginBottom={1} flexShrink={0}>
+        <Text wrap="truncate">{question}</Text>
+      </Box>
+
+      {/* Select Input for Options */}
+      <Box flexShrink={0}>
+        <RadioButtonSelect
+          items={options}
+          onSelect={handleSelect}
+          isFocused={isFocused}
+        />
+      </Box>
+    </Box>
+  );
+};

package/dist/ui/components/messages/ToolGroupMessage.tsx

@@ -0,0 +1,126 @@
+/**
+ * @license
+ * Copyright 2025 Google LLC
+ * SPDX-License-Identifier: Apache-2.0
+ */
+
+import React, { useMemo } from 'react';
+import { Box } from 'ink';
+import { IndividualToolCallDisplay, ToolCallStatus } from '../../types.js';
+import { ToolMessage } from './ToolMessage.js';
+import { ToolConfirmationMessage } from './ToolConfirmationMessage.js';
+import { Colors } from '../../colors.js';
+import { Config } from 'fss-link-core';
+import { SHELL_COMMAND_NAME } from '../../constants.js';
+
+interface ToolGroupMessageProps {
+  groupId: number;
+  toolCalls: IndividualToolCallDisplay[];
+  availableTerminalHeight?: number;
+  terminalWidth: number;
+  config?: Config;
+  isFocused?: boolean;
+}
+
+// Main component renders the border and maps the tools using ToolMessage
+export const ToolGroupMessage: React.FC<ToolGroupMessageProps> = ({
+  toolCalls,
+  availableTerminalHeight,
+  terminalWidth,
+  config,
+  isFocused = true,
+}) => {
+  const hasPending = !toolCalls.every(
+    (t) => t.status === ToolCallStatus.Success,
+  );
+  const isShellCommand = toolCalls.some((t) => t.name === SHELL_COMMAND_NAME);
+  const borderColor =
+    hasPending || isShellCommand ? Colors.AccentYellow : Colors.Gray;
+
+  const staticHeight = /* border */ 2 + /* marginBottom */ 1;
+  // This is a bit of a magic number, but it accounts for the border and
+  // marginLeft.
+  const innerWidth = terminalWidth - 4;
+
+  // only prompt for tool approval on the first 'confirming' tool in the list
+  // note, after the CTA, this automatically moves over to the next 'confirming' tool
+  const toolAwaitingApproval = useMemo(
+    () => toolCalls.find((tc) => tc.status === ToolCallStatus.Confirming),
+    [toolCalls],
+  );
+
+  let countToolCallsWithResults = 0;
+  for (const tool of toolCalls) {
+    if (tool.resultDisplay !== undefined && tool.resultDisplay !== '') {
+      countToolCallsWithResults++;
+    }
+  }
+  const countOneLineToolCalls = toolCalls.length - countToolCallsWithResults;
+  const availableTerminalHeightPerToolMessage = availableTerminalHeight
+    ? Math.max(
+        Math.floor(
+          (availableTerminalHeight - staticHeight - countOneLineToolCalls) /
+            Math.max(1, countToolCallsWithResults),
+        ),
+        1,
+      )
+    : undefined;
+
+  return (
+    <Box
+      flexDirection="column"
+      borderStyle="round"
+      /*
+        This width constraint is highly important and protects us from an Ink rendering bug.
+        Since the ToolGroup can typically change rendering states frequently, it can cause
+        Ink to render the border of the box incorrectly and span multiple lines and even
+        cause tearing.
+      */
+      width="100%"
+      marginLeft={1}
+      borderDimColor={hasPending}
+      borderColor={borderColor}
+    >
+      {toolCalls.map((tool) => {
+        const isConfirming = toolAwaitingApproval?.callId === tool.callId;
+        return (
+          <Box key={tool.callId} flexDirection="column" minHeight={1}>
+            <Box flexDirection="row" alignItems="center">
+              <ToolMessage
+                callId={tool.callId}
+                name={tool.name}
+                description={tool.description}
+                resultDisplay={tool.resultDisplay}
+                status={tool.status}
+                confirmationDetails={tool.confirmationDetails}
+                availableTerminalHeight={availableTerminalHeightPerToolMessage}
+                terminalWidth={innerWidth}
+                emphasis={
+                  isConfirming
+                    ? 'high'
+                    : toolAwaitingApproval
+                      ? 'low'
+                      : 'medium'
+                }
+                renderOutputAsMarkdown={tool.renderOutputAsMarkdown}
+              />
+            </Box>
+            {tool.status === ToolCallStatus.Confirming &&
+              isConfirming &&
+              tool.confirmationDetails && (
+                <ToolConfirmationMessage
+                  confirmationDetails={tool.confirmationDetails}
+                  config={config}
+                  isFocused={isFocused}
+                  availableTerminalHeight={
+                    availableTerminalHeightPerToolMessage
+                  }
+                  terminalWidth={innerWidth}
+                />
+              )}
+          </Box>
+        );
+      })}
+    </Box>
+  );
+};

package/dist/ui/components/messages/ToolMessage.test.tsx

@@ -0,0 +1,183 @@
+/**
+ * @license
+ * Copyright 2025 Google LLC
+ * SPDX-License-Identifier: Apache-2.0
+ */
+
+import React from 'react';
+import { render } from 'ink-testing-library';
+import { ToolMessage, ToolMessageProps } from './ToolMessage.js';
+import { StreamingState, ToolCallStatus } from '../../types.js';
+import { Text } from 'ink';
+import { StreamingContext } from '../../contexts/StreamingContext.js';
+
+// Mock child components or utilities if they are complex or have side effects
+vi.mock('../GeminiRespondingSpinner.js', () => ({
+  GeminiRespondingSpinner: ({
+    nonRespondingDisplay,
+  }: {
+    nonRespondingDisplay?: string;
+  }) => {
+    const streamingState = React.useContext(StreamingContext)!;
+    if (streamingState === StreamingState.Responding) {
+      return <Text>MockRespondingSpinner</Text>;
+    }
+    return nonRespondingDisplay ? <Text>{nonRespondingDisplay}</Text> : null;
+  },
+}));
+vi.mock('./DiffRenderer.js', () => ({
+  DiffRenderer: function MockDiffRenderer({
+    diffContent,
+  }: {
+    diffContent: string;
+  }) {
+    return <Text>MockDiff:{diffContent}</Text>;
+  },
+}));
+vi.mock('../../utils/MarkdownDisplay.js', () => ({
+  MarkdownDisplay: function MockMarkdownDisplay({ text }: { text: string }) {
+    return <Text>MockMarkdown:{text}</Text>;
+  },
+}));
+
+// Helper to render with context
+const renderWithContext = (
+  ui: React.ReactElement,
+  streamingState: StreamingState,
+) => {
+  const contextValue: StreamingState = streamingState;
+  return render(
+    <StreamingContext.Provider value={contextValue}>
+      {ui}
+    </StreamingContext.Provider>,
+  );
+};
+
+describe('<ToolMessage />', () => {
+  const baseProps: ToolMessageProps = {
+    callId: 'tool-123',
+    name: 'test-tool',
+    description: 'A tool for testing',
+    resultDisplay: 'Test result',
+    status: ToolCallStatus.Success,
+    terminalWidth: 80,
+    confirmationDetails: undefined,
+    emphasis: 'medium',
+  };
+
+  it('renders basic tool information', () => {
+    const { lastFrame } = renderWithContext(
+      <ToolMessage {...baseProps} />,
+      StreamingState.Idle,
+    );
+    const output = lastFrame();
+    expect(output).toContain('✔'); // Success indicator
+    expect(output).toContain('test-tool');
+    expect(output).toContain('A tool for testing');
+    expect(output).toContain('MockMarkdown:Test result');
+  });
+
+  describe('ToolStatusIndicator rendering', () => {
+    it('shows ✔ for Success status', () => {
+      const { lastFrame } = renderWithContext(
+        <ToolMessage {...baseProps} status={ToolCallStatus.Success} />,
+        StreamingState.Idle,
+      );
+      expect(lastFrame()).toContain('✔');
+    });
+
+    it('shows o for Pending status', () => {
+      const { lastFrame } = renderWithContext(
+        <ToolMessage {...baseProps} status={ToolCallStatus.Pending} />,
+        StreamingState.Idle,
+      );
+      expect(lastFrame()).toContain('o');
+    });
+
+    it('shows ? for Confirming status', () => {
+      const { lastFrame } = renderWithContext(
+        <ToolMessage {...baseProps} status={ToolCallStatus.Confirming} />,
+        StreamingState.Idle,
+      );
+      expect(lastFrame()).toContain('?');
+    });
+
+    it('shows - for Canceled status', () => {
+      const { lastFrame } = renderWithContext(
+        <ToolMessage {...baseProps} status={ToolCallStatus.Canceled} />,
+        StreamingState.Idle,
+      );
+      expect(lastFrame()).toContain('-');
+    });
+
+    it('shows x for Error status', () => {
+      const { lastFrame } = renderWithContext(
+        <ToolMessage {...baseProps} status={ToolCallStatus.Error} />,
+        StreamingState.Idle,
+      );
+      expect(lastFrame()).toContain('x');
+    });
+
+    it('shows paused spinner for Executing status when streamingState is Idle', () => {
+      const { lastFrame } = renderWithContext(
+        <ToolMessage {...baseProps} status={ToolCallStatus.Executing} />,
+        StreamingState.Idle,
+      );
+      expect(lastFrame()).toContain('⊷');
+      expect(lastFrame()).not.toContain('MockRespondingSpinner');
+      expect(lastFrame()).not.toContain('✔');
+    });
+
+    it('shows paused spinner for Executing status when streamingState is WaitingForConfirmation', () => {
+      const { lastFrame } = renderWithContext(
+        <ToolMessage {...baseProps} status={ToolCallStatus.Executing} />,
+        StreamingState.WaitingForConfirmation,
+      );
+      expect(lastFrame()).toContain('⊷');
+      expect(lastFrame()).not.toContain('MockRespondingSpinner');
+      expect(lastFrame()).not.toContain('✔');
+    });
+
+    it('shows MockRespondingSpinner for Executing status when streamingState is Responding', () => {
+      const { lastFrame } = renderWithContext(
+        <ToolMessage {...baseProps} status={ToolCallStatus.Executing} />,
+        StreamingState.Responding, // Simulate app still responding
+      );
+      expect(lastFrame()).toContain('MockRespondingSpinner');
+      expect(lastFrame()).not.toContain('✔');
+    });
+  });
+
+  it('renders DiffRenderer for diff results', () => {
+    const diffResult = {
+      fileDiff: '--- a/file.txt\n+++ b/file.txt\n@@ -1 +1 @@\n-old\n+new',
+      fileName: 'file.txt',
+      originalContent: 'old',
+      newContent: 'new',
+    };
+    const { lastFrame } = renderWithContext(
+      <ToolMessage {...baseProps} resultDisplay={diffResult} />,
+      StreamingState.Idle,
+    );
+    // Check that the output contains the MockDiff content as part of the whole message
+    expect(lastFrame()).toMatch(/MockDiff:--- a\/file\.txt/);
+  });
+
+  it('renders emphasis correctly', () => {
+    const { lastFrame: highEmphasisFrame } = renderWithContext(
+      <ToolMessage {...baseProps} emphasis="high" />,
+      StreamingState.Idle,
+    );
+    // Check for trailing indicator or specific color if applicable (Colors are not easily testable here)
+    expect(highEmphasisFrame()).toContain('←'); // Trailing indicator for high emphasis
+
+    const { lastFrame: lowEmphasisFrame } = renderWithContext(
+      <ToolMessage {...baseProps} emphasis="low" />,
+      StreamingState.Idle,
+    );
+    // For low emphasis, the name and description might be dimmed (check for dimColor if possible)
+    // This is harder to assert directly in text output without color checks.
+    // We can at least ensure it doesn't have the high emphasis indicator.
+    expect(lowEmphasisFrame()).not.toContain('←');
+  });
+});