fss-link 1.0.40 → 1.0.45

package/dist/ui/components/StatsDisplay.tsx

@@ -0,0 +1,273 @@
+/**
+ * @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

@@ -0,0 +1,102 @@
+/**
+ * @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

@@ -0,0 +1,310 @@
+/**
+ * @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>
+  );
+}