fss-link 1.0.49 → 1.0.51

package/dist/ui/components/StatsDisplay.tsx

@@ -1,273 +0,0 @@
-/**
- * @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 { theme } from '../semantic-colors.js';
-import { formatDuration } from '../utils/formatters.js';
-import { useSessionStats, ModelMetrics } from '../contexts/SessionContext.js';
-import {
-  getStatusColor,
-  TOOL_SUCCESS_RATE_HIGH,
-  TOOL_SUCCESS_RATE_MEDIUM,
-  USER_AGREEMENT_RATE_HIGH,
-  USER_AGREEMENT_RATE_MEDIUM,
-} from '../utils/displayUtils.js';
-import { computeSessionStats } from '../utils/computeStats.js';
-
-// A more flexible and powerful StatRow component
-interface StatRowProps {
-  title: string;
-  children: React.ReactNode; // Use children to allow for complex, colored values
-}
-
-const StatRow: React.FC<StatRowProps> = ({ title, children }) => (
-  <Box>
-    {/* Fixed width for the label creates a clean "gutter" for alignment */}
-    <Box width={28}>
-      <Text color={theme.text.link}>{title}</Text>
-    </Box>
-    {children}
-  </Box>
-);
-
-// A SubStatRow for indented, secondary information
-interface SubStatRowProps {
-  title: string;
-  children: React.ReactNode;
-}
-
-const SubStatRow: React.FC<SubStatRowProps> = ({ title, children }) => (
-  <Box paddingLeft={2}>
-    {/* Adjust width for the "» " prefix */}
-    <Box width={26}>
-      <Text>» {title}</Text>
-    </Box>
-    {children}
-  </Box>
-);
-
-// A Section component to group related stats
-interface SectionProps {
-  title: string;
-  children: React.ReactNode;
-}
-
-const Section: React.FC<SectionProps> = ({ title, children }) => (
-  <Box flexDirection="column" width="100%" marginBottom={1}>
-    <Text bold>{title}</Text>
-    {children}
-  </Box>
-);
-
-const ModelUsageTable: React.FC<{
-  models: Record<string, ModelMetrics>;
-  totalCachedTokens: number;
-  cacheEfficiency: number;
-}> = ({ models, totalCachedTokens, cacheEfficiency }) => {
-  const nameWidth = 25;
-  const requestsWidth = 8;
-  const inputTokensWidth = 15;
-  const outputTokensWidth = 15;
-
-  return (
-    <Box flexDirection="column" marginTop={1}>
-      {/* Header */}
-      <Box>
-        <Box width={nameWidth}>
-          <Text bold>Model Usage</Text>
-        </Box>
-        <Box width={requestsWidth} justifyContent="flex-end">
-          <Text bold>Reqs</Text>
-        </Box>
-        <Box width={inputTokensWidth} justifyContent="flex-end">
-          <Text bold>Input Tokens</Text>
-        </Box>
-        <Box width={outputTokensWidth} justifyContent="flex-end">
-          <Text bold>Output Tokens</Text>
-        </Box>
-      </Box>
-      {/* Divider */}
-      <Box
-        borderStyle="round"
-        borderBottom={true}
-        borderTop={false}
-        borderLeft={false}
-        borderRight={false}
-        width={nameWidth + requestsWidth + inputTokensWidth + outputTokensWidth}
-      ></Box>
-
-      {/* Rows */}
-      {Object.entries(models).map(([name, modelMetrics]) => (
-        <Box key={name}>
-          <Box width={nameWidth}>
-            <Text>{name.replace('-001', '')}</Text>
-          </Box>
-          <Box width={requestsWidth} justifyContent="flex-end">
-            <Text>{modelMetrics.api.totalRequests}</Text>
-          </Box>
-          <Box width={inputTokensWidth} justifyContent="flex-end">
-            <Text color={theme.status.warning}>
-              {modelMetrics.tokens.prompt.toLocaleString()}
-            </Text>
-          </Box>
-          <Box width={outputTokensWidth} justifyContent="flex-end">
-            <Text color={theme.status.warning}>
-              {modelMetrics.tokens.candidates.toLocaleString()}
-            </Text>
-          </Box>
-        </Box>
-      ))}
-      {cacheEfficiency > 0 && (
-        <Box flexDirection="column" marginTop={1}>
-          <Text>
-            <Text color={theme.status.success}>Savings Highlight:</Text>{' '}
-            {totalCachedTokens.toLocaleString()} ({cacheEfficiency.toFixed(1)}
-            %) of input tokens were served from the cache, reducing costs.
-          </Text>
-          <Box height={1} />
-          <Text color={theme.text.secondary}>
-            » Tip: For a full token breakdown, run `/stats model`.
-          </Text>
-        </Box>
-      )}
-    </Box>
-  );
-};
-
-interface StatsDisplayProps {
-  duration: string;
-  title?: string;
-}
-
-export const StatsDisplay: React.FC<StatsDisplayProps> = ({
-  duration,
-  title,
-}) => {
-  const { stats } = useSessionStats();
-  const { metrics } = stats;
-  const { models, tools, files } = metrics;
-  const computed = computeSessionStats(metrics);
-
-  const successThresholds = {
-    green: TOOL_SUCCESS_RATE_HIGH,
-    yellow: TOOL_SUCCESS_RATE_MEDIUM,
-  };
-  const agreementThresholds = {
-    green: USER_AGREEMENT_RATE_HIGH,
-    yellow: USER_AGREEMENT_RATE_MEDIUM,
-  };
-  const successColor = getStatusColor(computed.successRate, successThresholds);
-  const agreementColor = getStatusColor(
-    computed.agreementRate,
-    agreementThresholds,
-  );
-
-  const renderTitle = () => {
-    if (title) {
-      return theme.ui.gradient && theme.ui.gradient.length > 0 ? (
-        <Gradient colors={theme.ui.gradient}>
-          <Text bold>{title}</Text>
-        </Gradient>
-      ) : (
-        <Text bold color={theme.text.accent}>
-          {title}
-        </Text>
-      );
-    }
-    return (
-      <Text bold color={theme.text.accent}>
-        Session Stats
-      </Text>
-    );
-  };
-
-  return (
-    <Box
-      borderStyle="round"
-      borderColor={theme.border.default}
-      flexDirection="column"
-      paddingY={1}
-      paddingX={2}
-    >
-      {renderTitle()}
-      <Box height={1} />
-
-      <Section title="Interaction Summary">
-        <StatRow title="Session ID:">
-          <Text>{stats.sessionId}</Text>
-        </StatRow>
-        <StatRow title="Tool Calls:">
-          <Text>
-            {tools.totalCalls} ({' '}
-            <Text color={theme.status.success}>✔ {tools.totalSuccess}</Text>{' '}
-            <Text color={theme.status.error}>✖ {tools.totalFail}</Text> )
-          </Text>
-        </StatRow>
-        <StatRow title="Success Rate:">
-          <Text color={successColor}>{computed.successRate.toFixed(1)}%</Text>
-        </StatRow>
-        {computed.totalDecisions > 0 && (
-          <StatRow title="User Agreement:">
-            <Text color={agreementColor}>
-              {computed.agreementRate.toFixed(1)}%{' '}
-              <Text color={theme.text.secondary}>
-                ({computed.totalDecisions} reviewed)
-              </Text>
-            </Text>
-          </StatRow>
-        )}
-        {files &&
-          (files.totalLinesAdded > 0 || files.totalLinesRemoved > 0) && (
-            <StatRow title="Code Changes:">
-              <Text>
-                <Text color={theme.status.success}>
-                  +{files.totalLinesAdded}
-                </Text>{' '}
-                <Text color={theme.status.error}>
-                  -{files.totalLinesRemoved}
-                </Text>
-              </Text>
-            </StatRow>
-          )}
-      </Section>
-
-      <Section title="Performance">
-        <StatRow title="Wall Time:">
-          <Text>{duration}</Text>
-        </StatRow>
-        <StatRow title="Agent Active:">
-          <Text>{formatDuration(computed.agentActiveTime)}</Text>
-        </StatRow>
-        <SubStatRow title="API Time:">
-          <Text>
-            {formatDuration(computed.totalApiTime)}{' '}
-            <Text color={theme.text.secondary}>
-              ({computed.apiTimePercent.toFixed(1)}%)
-            </Text>
-          </Text>
-        </SubStatRow>
-        <SubStatRow title="Tool Time:">
-          <Text>
-            {formatDuration(computed.totalToolTime)}{' '}
-            <Text color={theme.text.secondary}>
-              ({computed.toolTimePercent.toFixed(1)}%)
-            </Text>
-          </Text>
-        </SubStatRow>
-      </Section>
-
-      {Object.keys(models).length > 0 && (
-        <ModelUsageTable
-          models={models}
-          totalCachedTokens={computed.totalCachedTokens}
-          cacheEfficiency={computed.cacheEfficiency}
-        />
-      )}
-    </Box>
-  );
-};

package/dist/ui/components/SuggestionsDisplay.tsx

@@ -1,102 +0,0 @@
-/**
- * @license
- * Copyright 2025 Google LLC
- * SPDX-License-Identifier: Apache-2.0
- */
-
-import { Box, Text } from 'ink';
-import { Colors } from '../colors.js';
-import { PrepareLabel } from './PrepareLabel.js';
-export interface Suggestion {
-  label: string;
-  value: string;
-  description?: string;
-  matchedIndex?: number;
-}
-interface SuggestionsDisplayProps {
-  suggestions: Suggestion[];
-  activeIndex: number;
-  isLoading: boolean;
-  width: number;
-  scrollOffset: number;
-  userInput: string;
-}
-
-export const MAX_SUGGESTIONS_TO_SHOW = 8;
-
-export function SuggestionsDisplay({
-  suggestions,
-  activeIndex,
-  isLoading,
-  width,
-  scrollOffset,
-  userInput,
-}: SuggestionsDisplayProps) {
-  if (isLoading) {
-    return (
-      <Box paddingX={1} width={width}>
-        <Text color="gray">Loading suggestions...</Text>
-      </Box>
-    );
-  }
-
-  if (suggestions.length === 0) {
-    return null; // Don't render anything if there are no suggestions
-  }
-
-  // Calculate the visible slice based on scrollOffset
-  const startIndex = scrollOffset;
-  const endIndex = Math.min(
-    scrollOffset + MAX_SUGGESTIONS_TO_SHOW,
-    suggestions.length,
-  );
-  const visibleSuggestions = suggestions.slice(startIndex, endIndex);
-
-  return (
-    <Box flexDirection="column" paddingX={1} width={width}>
-      {scrollOffset > 0 && <Text color={Colors.Foreground}>▲</Text>}
-
-      {visibleSuggestions.map((suggestion, index) => {
-        const originalIndex = startIndex + index;
-        const isActive = originalIndex === activeIndex;
-        const textColor = isActive ? Colors.AccentPurple : Colors.Gray;
-        const labelElement = (
-          <PrepareLabel
-            label={suggestion.label}
-            matchedIndex={suggestion.matchedIndex}
-            userInput={userInput}
-            textColor={textColor}
-          />
-        );
-
-        return (
-          <Box key={`${suggestion.value}-${originalIndex}`} width={width}>
-            <Box flexDirection="row">
-              {userInput.startsWith('/') ? (
-                // only use box model for (/) command mode
-                <Box width={20} flexShrink={0}>
-                  {labelElement}
-                </Box>
-              ) : (
-                labelElement
-              )}
-              {suggestion.description ? (
-                <Box flexGrow={1}>
-                  <Text color={textColor} wrap="truncate">
-                    {suggestion.description}
-                  </Text>
-                </Box>
-              ) : null}
-            </Box>
-          </Box>
-        );
-      })}
-      {endIndex < suggestions.length && <Text color="gray">▼</Text>}
-      {suggestions.length > MAX_SUGGESTIONS_TO_SHOW && (
-        <Text color="gray">
-          ({activeIndex + 1}/{suggestions.length})
-        </Text>
-      )}
-    </Box>
-  );
-}

package/dist/ui/components/ThemeDialog.tsx

@@ -1,310 +0,0 @@
-/**
- * @license
- * Copyright 2025 Google LLC
- * SPDX-License-Identifier: Apache-2.0
- */
-
-import React, { useCallback, useState } from 'react';
-import { Box, Text } from 'ink';
-import { Colors } from '../colors.js';
-import { themeManager, DEFAULT_THEME } from '../themes/theme-manager.js';
-import { RadioButtonSelect } from './shared/RadioButtonSelect.js';
-import { DiffRenderer } from './messages/DiffRenderer.js';
-import { colorizeCode } from '../utils/CodeColorizer.js';
-import { LoadedSettings, SettingScope } from '../../config/settings.js';
-import {
-  getScopeItems,
-  getScopeMessageForSetting,
-} from '../../utils/dialogScopeUtils.js';
-import { useKeypress } from '../hooks/useKeypress.js';
-
-interface ThemeDialogProps {
-  /** Callback function when a theme is selected */
-  onSelect: (themeName: string | undefined, scope: SettingScope) => void;
-
-  /** Callback function when a theme is highlighted */
-  onHighlight: (themeName: string | undefined) => void;
-  /** The settings object */
-  settings: LoadedSettings;
-  availableTerminalHeight?: number;
-  terminalWidth: number;
-}
-
-export function ThemeDialog({
-  onSelect,
-  onHighlight,
-  settings,
-  availableTerminalHeight,
-  terminalWidth,
-}: ThemeDialogProps): React.JSX.Element {
-  const [selectedScope, setSelectedScope] = useState<SettingScope>(
-    SettingScope.User,
-  );
-
-  // Track the currently highlighted theme name
-  const [highlightedThemeName, setHighlightedThemeName] = useState<
-    string | undefined
-  >(settings.merged.theme || DEFAULT_THEME.name);
-
-  // Generate theme items filtered by selected scope
-  const customThemes =
-    selectedScope === SettingScope.User
-      ? settings.user.settings.customThemes || {}
-      : settings.merged.customThemes || {};
-  const builtInThemes = themeManager
-    .getAvailableThemes()
-    .filter((theme) => theme.type !== 'custom');
-  const customThemeNames = Object.keys(customThemes);
-  const capitalize = (s: string) => s.charAt(0).toUpperCase() + s.slice(1);
-  // Generate theme items
-  const themeItems = [
-    ...builtInThemes.map((theme) => ({
-      label: theme.name,
-      value: theme.name,
-      themeNameDisplay: theme.name,
-      themeTypeDisplay: capitalize(theme.type),
-    })),
-    ...customThemeNames.map((name) => ({
-      label: name,
-      value: name,
-      themeNameDisplay: name,
-      themeTypeDisplay: 'Custom',
-    })),
-  ];
-  const [selectInputKey, setSelectInputKey] = useState(Date.now());
-
-  // Find the index of the selected theme, but only if it exists in the list
-  const selectedThemeName = settings.merged.theme || DEFAULT_THEME.name;
-  const initialThemeIndex = themeItems.findIndex(
-    (item) => item.value === selectedThemeName,
-  );
-  // If not found, fall back to the first theme
-  const safeInitialThemeIndex = initialThemeIndex >= 0 ? initialThemeIndex : 0;
-
-  const scopeItems = getScopeItems();
-
-  const handleThemeSelect = useCallback(
-    (themeName: string) => {
-      onSelect(themeName, selectedScope);
-    },
-    [onSelect, selectedScope],
-  );
-
-  const handleThemeHighlight = (themeName: string) => {
-    setHighlightedThemeName(themeName);
-    onHighlight(themeName);
-  };
-
-  const handleScopeHighlight = useCallback((scope: SettingScope) => {
-    setSelectedScope(scope);
-    setSelectInputKey(Date.now());
-  }, []);
-
-  const handleScopeSelect = useCallback(
-    (scope: SettingScope) => {
-      handleScopeHighlight(scope);
-      setFocusedSection('theme'); // Reset focus to theme section
-    },
-    [handleScopeHighlight],
-  );
-
-  const [focusedSection, setFocusedSection] = useState<'theme' | 'scope'>(
-    'theme',
-  );
-
-  useKeypress(
-    (key) => {
-      if (key.name === 'tab') {
-        setFocusedSection((prev) => (prev === 'theme' ? 'scope' : 'theme'));
-      }
-      if (key.name === 'escape') {
-        onSelect(undefined, selectedScope);
-      }
-    },
-    { isActive: true },
-  );
-
-  // Generate scope message for theme setting
-  const otherScopeModifiedMessage = getScopeMessageForSetting(
-    'theme',
-    selectedScope,
-    settings,
-  );
-
-  // Constants for calculating preview pane layout.
-  // These values are based on the JSX structure below.
-  const PREVIEW_PANE_WIDTH_PERCENTAGE = 0.55;
-  // A safety margin to prevent text from touching the border.
-  // This is a complete hack unrelated to the 0.9 used in App.tsx
-  const PREVIEW_PANE_WIDTH_SAFETY_MARGIN = 0.9;
-  // Combined horizontal padding from the dialog and preview pane.
-  const TOTAL_HORIZONTAL_PADDING = 4;
-  const colorizeCodeWidth = Math.max(
-    Math.floor(
-      (terminalWidth - TOTAL_HORIZONTAL_PADDING) *
-        PREVIEW_PANE_WIDTH_PERCENTAGE *
-        PREVIEW_PANE_WIDTH_SAFETY_MARGIN,
-    ),
-    1,
-  );
-
-  const DIALOG_PADDING = 2;
-  const selectThemeHeight = themeItems.length + 1;
-  const SCOPE_SELECTION_HEIGHT = 4; // Height for the scope selection section + margin.
-  const SPACE_BETWEEN_THEME_SELECTION_AND_APPLY_TO = 1;
-  const TAB_TO_SELECT_HEIGHT = 2;
-  availableTerminalHeight = availableTerminalHeight ?? Number.MAX_SAFE_INTEGER;
-  availableTerminalHeight -= 2; // Top and bottom borders.
-  availableTerminalHeight -= TAB_TO_SELECT_HEIGHT;
-
-  let totalLeftHandSideHeight =
-    DIALOG_PADDING +
-    selectThemeHeight +
-    SCOPE_SELECTION_HEIGHT +
-    SPACE_BETWEEN_THEME_SELECTION_AND_APPLY_TO;
-
-  let showScopeSelection = true;
-  let includePadding = true;
-
-  // Remove content from the LHS that can be omitted if it exceeds the available height.
-  if (totalLeftHandSideHeight > availableTerminalHeight) {
-    includePadding = false;
-    totalLeftHandSideHeight -= DIALOG_PADDING;
-  }
-
-  if (totalLeftHandSideHeight > availableTerminalHeight) {
-    // First, try hiding the scope selection
-    totalLeftHandSideHeight -= SCOPE_SELECTION_HEIGHT;
-    showScopeSelection = false;
-  }
-
-  // Don't focus the scope selection if it is hidden due to height constraints.
-  const currentFocusedSection = !showScopeSelection ? 'theme' : focusedSection;
-
-  // Vertical space taken by elements other than the two code blocks in the preview pane.
-  // Includes "Preview" title, borders, and margin between blocks.
-  const PREVIEW_PANE_FIXED_VERTICAL_SPACE = 8;
-
-  // The right column doesn't need to ever be shorter than the left column.
-  availableTerminalHeight = Math.max(
-    availableTerminalHeight,
-    totalLeftHandSideHeight,
-  );
-  const availableTerminalHeightCodeBlock =
-    availableTerminalHeight -
-    PREVIEW_PANE_FIXED_VERTICAL_SPACE -
-    (includePadding ? 2 : 0) * 2;
-
-  // Subtract margin between code blocks from available height.
-  const availableHeightForPanes = Math.max(
-    0,
-    availableTerminalHeightCodeBlock - 1,
-  );
-
-  // The code block is slightly longer than the diff, so give it more space.
-  const codeBlockHeight = Math.ceil(availableHeightForPanes * 0.6);
-  const diffHeight = Math.floor(availableHeightForPanes * 0.4);
-  return (
-    <Box
-      borderStyle="round"
-      borderColor={Colors.Gray}
-      flexDirection="column"
-      paddingTop={includePadding ? 1 : 0}
-      paddingBottom={includePadding ? 1 : 0}
-      paddingLeft={1}
-      paddingRight={1}
-      width="100%"
-    >
-      <Box flexDirection="row">
-        {/* Left Column: Selection */}
-        <Box flexDirection="column" width="45%" paddingRight={2}>
-          <Text bold={currentFocusedSection === 'theme'} wrap="truncate">
-            {currentFocusedSection === 'theme' ? '> ' : '  '}Select Theme{' '}
-            <Text color={Colors.Gray}>{otherScopeModifiedMessage}</Text>
-          </Text>
-          <RadioButtonSelect
-            key={selectInputKey}
-            items={themeItems}
-            initialIndex={safeInitialThemeIndex}
-            onSelect={handleThemeSelect}
-            onHighlight={handleThemeHighlight}
-            isFocused={currentFocusedSection === 'theme'}
-            maxItemsToShow={8}
-            showScrollArrows={true}
-            showNumbers={currentFocusedSection === 'theme'}
-          />
-
-          {/* Scope Selection */}
-          {showScopeSelection && (
-            <Box marginTop={1} flexDirection="column">
-              <Text bold={currentFocusedSection === 'scope'} wrap="truncate">
-                {currentFocusedSection === 'scope' ? '> ' : '  '}Apply To
-              </Text>
-              <RadioButtonSelect
-                items={scopeItems}
-                initialIndex={0} // Default to User Settings
-                onSelect={handleScopeSelect}
-                onHighlight={handleScopeHighlight}
-                isFocused={currentFocusedSection === 'scope'}
-                showNumbers={currentFocusedSection === 'scope'}
-              />
-            </Box>
-          )}
-        </Box>
-
-        {/* Right Column: Preview */}
-        <Box flexDirection="column" width="55%" paddingLeft={2}>
-          <Text bold>Preview</Text>
-          {/* Get the Theme object for the highlighted theme, fall back to default if not found */}
-          {(() => {
-            const previewTheme =
-              themeManager.getTheme(
-                highlightedThemeName || DEFAULT_THEME.name,
-              ) || DEFAULT_THEME;
-            return (
-              <Box
-                borderStyle="single"
-                borderColor={Colors.Gray}
-                paddingTop={includePadding ? 1 : 0}
-                paddingBottom={includePadding ? 1 : 0}
-                paddingLeft={1}
-                paddingRight={1}
-                flexDirection="column"
-              >
-                {colorizeCode(
-                  `# function
-def fibonacci(n):
-    a, b = 0, 1
-    for _ in range(n):
-        a, b = b, a + b
-    return a`,
-                  'python',
-                  codeBlockHeight,
-                  colorizeCodeWidth,
-                )}
-                <Box marginTop={1} />
-                <DiffRenderer
-                  diffContent={`--- a/util.py
-+++ b/util.py
-@@ -1,2 +1,2 @@
-- print("Hello, " + name)
-+ print(f"Hello, {name}!")
-`}
-                  availableTerminalHeight={diffHeight}
-                  terminalWidth={colorizeCodeWidth}
-                  theme={previewTheme}
-                />
-              </Box>
-            );
-          })()}
-        </Box>
-      </Box>
-      <Box marginTop={1}>
-        <Text color={Colors.Gray} wrap="truncate">
-          (Use Enter to select
-          {showScopeSelection ? ', Tab to change focus' : ''})
-        </Text>
-      </Box>
-    </Box>
-  );
-}