fss-link 1.0.43 → 1.0.45

package/dist/ui/components/Header.test.tsx

@@ -0,0 +1,44 @@
+/**
+ * @license
+ * Copyright 2025 Google LLC
+ * SPDX-License-Identifier: Apache-2.0
+ */
+
+import { render } from 'ink-testing-library';
+import { describe, it, expect, vi, beforeEach } from 'vitest';
+import { Header } from './Header.js';
+import * as useTerminalSize from '../hooks/useTerminalSize.js';
+import { longAsciiLogo } from './AsciiArt.js';
+
+vi.mock('../hooks/useTerminalSize.js');
+
+describe('<Header />', () => {
+  beforeEach(() => {});
+
+  it('renders the long logo on a wide terminal', () => {
+    vi.spyOn(useTerminalSize, 'useTerminalSize').mockReturnValue({
+      columns: 120,
+      rows: 20,
+    });
+    const { lastFrame } = render(<Header version="1.0.0" nightly={false} />);
+    expect(lastFrame()).toContain(longAsciiLogo);
+  });
+
+  it('renders custom ASCII art when provided', () => {
+    const customArt = 'CUSTOM ART';
+    const { lastFrame } = render(
+      <Header version="1.0.0" nightly={false} customAsciiArt={customArt} />,
+    );
+    expect(lastFrame()).toContain(customArt);
+  });
+
+  it('displays the version number when nightly is true', () => {
+    const { lastFrame } = render(<Header version="1.0.0" nightly={true} />);
+    expect(lastFrame()).toContain('v1.0.0');
+  });
+
+  it('does not display the version number when nightly is false', () => {
+    const { lastFrame } = render(<Header version="1.0.0" nightly={false} />);
+    expect(lastFrame()).not.toContain('v1.0.0');
+  });
+});

package/dist/ui/components/Header.tsx

@@ -0,0 +1,70 @@
+/**
+ * @license
+ * Copyright 2025 Google LLC
+ * SPDX-License-Identifier: Apache-2.0
+ */
+
+import React from 'react';
+import { Box, Text } from 'ink';
+import Gradient from 'ink-gradient';
+import { Colors } from '../colors.js';
+import { shortAsciiLogo, longAsciiLogo, tinyAsciiLogo } from './AsciiArt.js';
+import { getAsciiArtWidth } from '../utils/textUtils.js';
+import { useTerminalSize } from '../hooks/useTerminalSize.js';
+
+interface HeaderProps {
+  customAsciiArt?: string; // For user-defined ASCII art
+  version: string;
+  nightly: boolean;
+}
+
+export const Header: React.FC<HeaderProps> = ({
+  customAsciiArt,
+  version,
+  nightly,
+}) => {
+  const { columns: terminalWidth } = useTerminalSize();
+  let displayTitle;
+  const widthOfLongLogo = getAsciiArtWidth(longAsciiLogo);
+  const widthOfShortLogo = getAsciiArtWidth(shortAsciiLogo);
+
+  if (customAsciiArt) {
+    displayTitle = customAsciiArt;
+  } else if (terminalWidth >= widthOfLongLogo) {
+    displayTitle = longAsciiLogo;
+  } else if (terminalWidth >= widthOfShortLogo) {
+    displayTitle = shortAsciiLogo;
+  } else {
+    displayTitle = tinyAsciiLogo;
+  }
+
+  const artWidth = getAsciiArtWidth(displayTitle);
+
+  return (
+    <Box
+      alignItems="flex-start"
+      width={artWidth}
+      flexShrink={0}
+      flexDirection="column"
+    >
+      {Colors.GradientColors ? (
+        <Gradient colors={Colors.GradientColors}>
+          <Text>{displayTitle}</Text>
+        </Gradient>
+      ) : (
+        <Text>{displayTitle}</Text>
+      )}
+      {nightly && (
+        <Box width="100%" flexDirection="row" justifyContent="flex-end">
+          {Colors.GradientColors ? (
+            <Gradient colors={Colors.GradientColors}>
+              <Text>v{version}</Text>
+            </Gradient>
+          ) : (
+            <Text>v{version}</Text>
+          )}
+        </Box>
+      )}
+    </Box>
+  );
+};

package/dist/ui/components/Help.tsx

@@ -0,0 +1,174 @@
+/**
+ * @license
+ * Copyright 2025 Google LLC
+ * SPDX-License-Identifier: Apache-2.0
+ */
+
+import React from 'react';
+import { Box, Text } from 'ink';
+import { Colors } from '../colors.js';
+import { SlashCommand } from '../commands/types.js';
+
+interface Help {
+  commands: readonly SlashCommand[];
+}
+
+export const Help: React.FC<Help> = ({ commands }) => (
+  <Box
+    flexDirection="column"
+    marginBottom={1}
+    borderColor={Colors.Gray}
+    borderStyle="round"
+    padding={1}
+  >
+    {/* Basics */}
+    <Text bold color={Colors.Foreground}>
+      Basics:
+    </Text>
+    <Text color={Colors.Foreground}>
+      <Text bold color={Colors.AccentPurple}>
+        Add context
+      </Text>
+      : Use{' '}
+      <Text bold color={Colors.AccentPurple}>
+        @
+      </Text>{' '}
+      to specify files for context (e.g.,{' '}
+      <Text bold color={Colors.AccentPurple}>
+        @src/myFile.ts
+      </Text>
+      ) to target specific files or folders.
+    </Text>
+    <Text color={Colors.Foreground}>
+      <Text bold color={Colors.AccentPurple}>
+        Shell mode
+      </Text>
+      : Execute shell commands via{' '}
+      <Text bold color={Colors.AccentPurple}>
+        !
+      </Text>{' '}
+      (e.g.,{' '}
+      <Text bold color={Colors.AccentPurple}>
+        !npm run start
+      </Text>
+      ) or use natural language (e.g.{' '}
+      <Text bold color={Colors.AccentPurple}>
+        start server
+      </Text>
+      ).
+    </Text>
+
+    <Box height={1} />
+
+    {/* Commands */}
+    <Text bold color={Colors.Foreground}>
+      Commands:
+    </Text>
+    {commands
+      .filter((command) => command.description)
+      .map((command: SlashCommand) => (
+        <Box key={command.name} flexDirection="column">
+          <Text color={Colors.Foreground}>
+            <Text bold color={Colors.AccentPurple}>
+              {' '}
+              /{command.name}
+            </Text>
+            {command.description && ' - ' + command.description}
+          </Text>
+          {command.subCommands &&
+            command.subCommands.map((subCommand) => (
+              <Text key={subCommand.name} color={Colors.Foreground}>
+                <Text bold color={Colors.AccentPurple}>
+                  {'   '}
+                  {subCommand.name}
+                </Text>
+                {subCommand.description && ' - ' + subCommand.description}
+              </Text>
+            ))}
+        </Box>
+      ))}
+    <Text color={Colors.Foreground}>
+      <Text bold color={Colors.AccentPurple}>
+        {' '}
+        !{' '}
+      </Text>
+      - shell command
+    </Text>
+
+    <Box height={1} />
+
+    {/* Shortcuts */}
+    <Text bold color={Colors.Foreground}>
+      Keyboard Shortcuts:
+    </Text>
+    <Text color={Colors.Foreground}>
+      <Text bold color={Colors.AccentPurple}>
+        Alt+Left/Right
+      </Text>{' '}
+      - Jump through words in the input
+    </Text>
+    <Text color={Colors.Foreground}>
+      <Text bold color={Colors.AccentPurple}>
+        Ctrl+C
+      </Text>{' '}
+      - Quit application
+    </Text>
+    <Text color={Colors.Foreground}>
+      <Text bold color={Colors.AccentPurple}>
+        {process.platform === 'win32' ? 'Ctrl+Enter' : 'Ctrl+J'}
+      </Text>{' '}
+      {process.platform === 'linux'
+        ? '- New line (Alt+Enter works for certain linux distros)'
+        : '- New line'}
+    </Text>
+    <Text color={Colors.Foreground}>
+      <Text bold color={Colors.AccentPurple}>
+        Ctrl+L
+      </Text>{' '}
+      - Clear the screen
+    </Text>
+    <Text color={Colors.Foreground}>
+      <Text bold color={Colors.AccentPurple}>
+        {process.platform === 'darwin' ? 'Ctrl+X / Meta+Enter' : 'Ctrl+X'}
+      </Text>{' '}
+      - Open input in external editor
+    </Text>
+    <Text color={Colors.Foreground}>
+      <Text bold color={Colors.AccentPurple}>
+        Ctrl+Y
+      </Text>{' '}
+      - Toggle YOLO mode
+    </Text>
+    <Text color={Colors.Foreground}>
+      <Text bold color={Colors.AccentPurple}>
+        Enter
+      </Text>{' '}
+      - Send message
+    </Text>
+    <Text color={Colors.Foreground}>
+      <Text bold color={Colors.AccentPurple}>
+        Esc
+      </Text>{' '}
+      - Cancel operation
+    </Text>
+    <Text color={Colors.Foreground}>
+      <Text bold color={Colors.AccentPurple}>
+        Shift+Tab
+      </Text>{' '}
+      - Toggle auto-accepting edits
+    </Text>
+    <Text color={Colors.Foreground}>
+      <Text bold color={Colors.AccentPurple}>
+        Up/Down
+      </Text>{' '}
+      - Cycle through your prompt history
+    </Text>
+    <Box height={1} />
+    <Text color={Colors.Foreground}>
+      For a full list of shortcuts, see{' '}
+      <Text bold color={Colors.AccentPurple}>
+        docs/keyboard-shortcuts.md
+      </Text>
+    </Text>
+  </Box>
+);

package/dist/ui/components/HistoryItemDisplay.test.tsx

@@ -0,0 +1,125 @@
+/**
+ * @license
+ * Copyright 2025 Google LLC
+ * SPDX-License-Identifier: Apache-2.0
+ */
+
+import { render } from 'ink-testing-library';
+import { describe, it, expect, vi } from 'vitest';
+import { HistoryItemDisplay } from './HistoryItemDisplay.js';
+import { HistoryItem, MessageType } from '../types.js';
+import { SessionStatsProvider } from '../contexts/SessionContext.js';
+
+// Mock child components
+vi.mock('./messages/ToolGroupMessage.js', () => ({
+  ToolGroupMessage: () => <div />,
+}));
+
+describe('<HistoryItemDisplay />', () => {
+  const baseItem = {
+    id: 1,
+    timestamp: 12345,
+    isPending: false,
+    terminalWidth: 80,
+  };
+
+  it('renders UserMessage for "user" type', () => {
+    const item: HistoryItem = {
+      ...baseItem,
+      type: MessageType.USER,
+      text: 'Hello',
+    };
+    const { lastFrame } = render(
+      <HistoryItemDisplay {...baseItem} item={item} />,
+    );
+    expect(lastFrame()).toContain('Hello');
+  });
+
+  it('renders UserMessage for "user" type with slash command', () => {
+    const item: HistoryItem = {
+      ...baseItem,
+      type: MessageType.USER,
+      text: '/theme',
+    };
+    const { lastFrame } = render(
+      <HistoryItemDisplay {...baseItem} item={item} />,
+    );
+    expect(lastFrame()).toContain('/theme');
+  });
+
+  it('renders StatsDisplay for "stats" type', () => {
+    const item: HistoryItem = {
+      ...baseItem,
+      type: MessageType.STATS,
+      duration: '1s',
+    };
+    const { lastFrame } = render(
+      <SessionStatsProvider>
+        <HistoryItemDisplay {...baseItem} item={item} />
+      </SessionStatsProvider>,
+    );
+    expect(lastFrame()).toContain('Stats');
+  });
+
+  it('renders AboutBox for "about" type', () => {
+    const item: HistoryItem = {
+      ...baseItem,
+      type: MessageType.ABOUT,
+      cliVersion: '1.0.0',
+      osVersion: 'test-os',
+      sandboxEnv: 'test-env',
+      modelVersion: 'test-model',
+      selectedAuthType: 'test-auth',
+      gcpProject: 'test-project',
+      ideClient: 'test-ide',
+    };
+    const { lastFrame } = render(
+      <HistoryItemDisplay {...baseItem} item={item} />,
+    );
+    expect(lastFrame()).toContain('About FSS Link');
+  });
+
+  it('renders ModelStatsDisplay for "model_stats" type', () => {
+    const item: HistoryItem = {
+      ...baseItem,
+      type: 'model_stats',
+    };
+    const { lastFrame } = render(
+      <SessionStatsProvider>
+        <HistoryItemDisplay {...baseItem} item={item} />
+      </SessionStatsProvider>,
+    );
+    expect(lastFrame()).toContain(
+      'No API calls have been made in this session.',
+    );
+  });
+
+  it('renders ToolStatsDisplay for "tool_stats" type', () => {
+    const item: HistoryItem = {
+      ...baseItem,
+      type: 'tool_stats',
+    };
+    const { lastFrame } = render(
+      <SessionStatsProvider>
+        <HistoryItemDisplay {...baseItem} item={item} />
+      </SessionStatsProvider>,
+    );
+    expect(lastFrame()).toContain(
+      'No tool calls have been made in this session.',
+    );
+  });
+
+  it('renders SessionSummaryDisplay for "quit" type', () => {
+    const item: HistoryItem = {
+      ...baseItem,
+      type: 'quit',
+      duration: '1s',
+    };
+    const { lastFrame } = render(
+      <SessionStatsProvider>
+        <HistoryItemDisplay {...baseItem} item={item} />
+      </SessionStatsProvider>,
+    );
+    expect(lastFrame()).toContain('Agent powering down. Goodbye!');
+  });
+});

package/dist/ui/components/HistoryItemDisplay.tsx

@@ -0,0 +1,98 @@
+/**
+ * @license
+ * Copyright 2025 Google LLC
+ * SPDX-License-Identifier: Apache-2.0
+ */
+
+import React from 'react';
+import type { HistoryItem } from '../types.js';
+import { UserMessage } from './messages/UserMessage.js';
+import { UserShellMessage } from './messages/UserShellMessage.js';
+import { GeminiMessage } from './messages/GeminiMessage.js';
+import { InfoMessage } from './messages/InfoMessage.js';
+import { ErrorMessage } from './messages/ErrorMessage.js';
+import { ToolGroupMessage } from './messages/ToolGroupMessage.js';
+import { GeminiMessageContent } from './messages/GeminiMessageContent.js';
+import { CompressionMessage } from './messages/CompressionMessage.js';
+import { Box } from 'ink';
+import { AboutBox } from './AboutBox.js';
+import { StatsDisplay } from './StatsDisplay.js';
+import { ModelStatsDisplay } from './ModelStatsDisplay.js';
+import { ToolStatsDisplay } from './ToolStatsDisplay.js';
+import { SessionSummaryDisplay } from './SessionSummaryDisplay.js';
+import { Config } from 'fss-link-core';
+import { Help } from './Help.js';
+import { SlashCommand } from '../commands/types.js';
+
+interface HistoryItemDisplayProps {
+  item: HistoryItem;
+  availableTerminalHeight?: number;
+  terminalWidth: number;
+  isPending: boolean;
+  config?: Config;
+  isFocused?: boolean;
+  commands?: readonly SlashCommand[];
+}
+
+export const HistoryItemDisplay: React.FC<HistoryItemDisplayProps> = ({
+  item,
+  availableTerminalHeight,
+  terminalWidth,
+  isPending,
+  config,
+  commands,
+  isFocused = true,
+}) => (
+  <Box flexDirection="column" key={item.id}>
+    {/* Render standard message types */}
+    {item.type === 'user' && <UserMessage text={item.text} />}
+    {item.type === 'user_shell' && <UserShellMessage text={item.text} />}
+    {item.type === 'gemini' && (
+      <GeminiMessage
+        text={item.text}
+        isPending={isPending}
+        availableTerminalHeight={availableTerminalHeight}
+        terminalWidth={terminalWidth}
+      />
+    )}
+    {item.type === 'gemini_content' && (
+      <GeminiMessageContent
+        text={item.text}
+        isPending={isPending}
+        availableTerminalHeight={availableTerminalHeight}
+        terminalWidth={terminalWidth}
+      />
+    )}
+    {item.type === 'info' && <InfoMessage text={item.text} />}
+    {item.type === 'error' && <ErrorMessage text={item.text} />}
+    {item.type === 'about' && (
+      <AboutBox
+        cliVersion={item.cliVersion}
+        osVersion={item.osVersion}
+        sandboxEnv={item.sandboxEnv}
+        modelVersion={item.modelVersion}
+        selectedAuthType={item.selectedAuthType}
+        gcpProject={item.gcpProject}
+        ideClient={item.ideClient}
+      />
+    )}
+    {item.type === 'help' && commands && <Help commands={commands} />}
+    {item.type === 'stats' && <StatsDisplay duration={item.duration} />}
+    {item.type === 'model_stats' && <ModelStatsDisplay />}
+    {item.type === 'tool_stats' && <ToolStatsDisplay />}
+    {item.type === 'quit' && <SessionSummaryDisplay duration={item.duration} />}
+    {item.type === 'tool_group' && (
+      <ToolGroupMessage
+        toolCalls={item.tools}
+        groupId={item.id}
+        availableTerminalHeight={availableTerminalHeight}
+        terminalWidth={terminalWidth}
+        config={config}
+        isFocused={isFocused}
+      />
+    )}
+    {item.type === 'compression' && (
+      <CompressionMessage compression={item.compression} />
+    )}
+  </Box>
+);