fss-link 1.0.40 → 1.0.45

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

@@ -0,0 +1,252 @@
+/**
+ * @license
+ * Copyright 2025 Google LLC
+ * SPDX-License-Identifier: Apache-2.0
+ */
+
+import { render } from 'ink-testing-library';
+import { describe, it, expect, vi, beforeAll, afterAll } from 'vitest';
+import { ModelStatsDisplay } from './ModelStatsDisplay.js';
+import * as SessionContext from '../contexts/SessionContext.js';
+import { SessionMetrics } from '../contexts/SessionContext.js';
+
+// Mock the context to provide controlled data for testing
+vi.mock('../contexts/SessionContext.js', async (importOriginal) => {
+  const actual = await importOriginal<typeof SessionContext>();
+  return {
+    ...actual,
+    useSessionStats: vi.fn(),
+  };
+});
+
+const useSessionStatsMock = vi.mocked(SessionContext.useSessionStats);
+
+const renderWithMockedStats = (metrics: SessionMetrics) => {
+  useSessionStatsMock.mockReturnValue({
+    stats: {
+      sessionStartTime: new Date(),
+      metrics,
+      lastPromptTokenCount: 0,
+      promptCount: 5,
+    },
+
+    getPromptCount: () => 5,
+    startNewPrompt: vi.fn(),
+  });
+
+  return render(<ModelStatsDisplay />);
+};
+
+describe('<ModelStatsDisplay />', () => {
+  beforeAll(() => {
+    vi.spyOn(Number.prototype, 'toLocaleString').mockImplementation(function (
+      this: number,
+    ) {
+      // Use a stable 'en-US' format for test consistency.
+      return new Intl.NumberFormat('en-US').format(this);
+    });
+  });
+
+  afterAll(() => {
+    vi.restoreAllMocks();
+  });
+
+  it('should render "no API calls" message when there are no active models', () => {
+    const { lastFrame } = renderWithMockedStats({
+      models: {},
+      tools: {
+        totalCalls: 0,
+        totalSuccess: 0,
+        totalFail: 0,
+        totalDurationMs: 0,
+        totalDecisions: { accept: 0, reject: 0, modify: 0 },
+        byName: {},
+      },
+    });
+
+    expect(lastFrame()).toContain(
+      'No API calls have been made in this session.',
+    );
+    expect(lastFrame()).toMatchSnapshot();
+  });
+
+  it('should not display conditional rows if no model has data for them', () => {
+    const { lastFrame } = renderWithMockedStats({
+      models: {
+        'gemini-2.5-pro': {
+          api: { totalRequests: 1, totalErrors: 0, totalLatencyMs: 100 },
+          tokens: {
+            prompt: 10,
+            candidates: 20,
+            total: 30,
+            cached: 0,
+            thoughts: 0,
+            tool: 0,
+          },
+        },
+      },
+      tools: {
+        totalCalls: 0,
+        totalSuccess: 0,
+        totalFail: 0,
+        totalDurationMs: 0,
+        totalDecisions: { accept: 0, reject: 0, modify: 0 },
+        byName: {},
+      },
+    });
+
+    const output = lastFrame();
+    expect(output).not.toContain('Cached');
+    expect(output).not.toContain('Thoughts');
+    expect(output).not.toContain('Tool');
+    expect(output).toMatchSnapshot();
+  });
+
+  it('should display conditional rows if at least one model has data', () => {
+    const { lastFrame } = renderWithMockedStats({
+      models: {
+        'gemini-2.5-pro': {
+          api: { totalRequests: 1, totalErrors: 0, totalLatencyMs: 100 },
+          tokens: {
+            prompt: 10,
+            candidates: 20,
+            total: 30,
+            cached: 5,
+            thoughts: 2,
+            tool: 0,
+          },
+        },
+        'gemini-2.5-flash': {
+          api: { totalRequests: 1, totalErrors: 0, totalLatencyMs: 50 },
+          tokens: {
+            prompt: 5,
+            candidates: 10,
+            total: 15,
+            cached: 0,
+            thoughts: 0,
+            tool: 3,
+          },
+        },
+      },
+      tools: {
+        totalCalls: 0,
+        totalSuccess: 0,
+        totalFail: 0,
+        totalDurationMs: 0,
+        totalDecisions: { accept: 0, reject: 0, modify: 0 },
+        byName: {},
+      },
+    });
+
+    const output = lastFrame();
+    expect(output).toContain('Cached');
+    expect(output).toContain('Thoughts');
+    expect(output).toContain('Tool');
+    expect(output).toMatchSnapshot();
+  });
+
+  it('should display stats for multiple models correctly', () => {
+    const { lastFrame } = renderWithMockedStats({
+      models: {
+        'gemini-2.5-pro': {
+          api: { totalRequests: 10, totalErrors: 1, totalLatencyMs: 1000 },
+          tokens: {
+            prompt: 100,
+            candidates: 200,
+            total: 300,
+            cached: 50,
+            thoughts: 10,
+            tool: 5,
+          },
+        },
+        'gemini-2.5-flash': {
+          api: { totalRequests: 20, totalErrors: 2, totalLatencyMs: 500 },
+          tokens: {
+            prompt: 200,
+            candidates: 400,
+            total: 600,
+            cached: 100,
+            thoughts: 20,
+            tool: 10,
+          },
+        },
+      },
+      tools: {
+        totalCalls: 0,
+        totalSuccess: 0,
+        totalFail: 0,
+        totalDurationMs: 0,
+        totalDecisions: { accept: 0, reject: 0, modify: 0 },
+        byName: {},
+      },
+    });
+
+    const output = lastFrame();
+    expect(output).toContain('gemini-2.5-pro');
+    expect(output).toContain('gemini-2.5-flash');
+    expect(output).toMatchSnapshot();
+  });
+
+  it('should handle large values without wrapping or overlapping', () => {
+    const { lastFrame } = renderWithMockedStats({
+      models: {
+        'gemini-2.5-pro': {
+          api: {
+            totalRequests: 999999999,
+            totalErrors: 123456789,
+            totalLatencyMs: 9876,
+          },
+          tokens: {
+            prompt: 987654321,
+            candidates: 123456789,
+            total: 999999999,
+            cached: 123456789,
+            thoughts: 111111111,
+            tool: 222222222,
+          },
+        },
+      },
+      tools: {
+        totalCalls: 0,
+        totalSuccess: 0,
+        totalFail: 0,
+        totalDurationMs: 0,
+        totalDecisions: { accept: 0, reject: 0, modify: 0 },
+        byName: {},
+      },
+    });
+
+    expect(lastFrame()).toMatchSnapshot();
+  });
+
+  it('should display a single model correctly', () => {
+    const { lastFrame } = renderWithMockedStats({
+      models: {
+        'gemini-2.5-pro': {
+          api: { totalRequests: 1, totalErrors: 0, totalLatencyMs: 100 },
+          tokens: {
+            prompt: 10,
+            candidates: 20,
+            total: 30,
+            cached: 5,
+            thoughts: 2,
+            tool: 1,
+          },
+        },
+      },
+      tools: {
+        totalCalls: 0,
+        totalSuccess: 0,
+        totalFail: 0,
+        totalDurationMs: 0,
+        totalDecisions: { accept: 0, reject: 0, modify: 0 },
+        byName: {},
+      },
+    });
+
+    const output = lastFrame();
+    expect(output).toContain('gemini-2.5-pro');
+    expect(output).not.toContain('gemini-2.5-flash');
+    expect(output).toMatchSnapshot();
+  });
+});

package/dist/ui/components/ModelStatsDisplay.tsx

@@ -0,0 +1,197 @@
+/**
+ * @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 { formatDuration } from '../utils/formatters.js';
+import {
+  calculateAverageLatency,
+  calculateCacheHitRate,
+  calculateErrorRate,
+} from '../utils/computeStats.js';
+import { useSessionStats, ModelMetrics } from '../contexts/SessionContext.js';
+
+const METRIC_COL_WIDTH = 28;
+const MODEL_COL_WIDTH = 22;
+
+interface StatRowProps {
+  title: string;
+  values: Array<string | React.ReactElement>;
+  isSubtle?: boolean;
+  isSection?: boolean;
+}
+
+const StatRow: React.FC<StatRowProps> = ({
+  title,
+  values,
+  isSubtle = false,
+  isSection = false,
+}) => (
+  <Box>
+    <Box width={METRIC_COL_WIDTH}>
+      <Text bold={isSection} color={isSection ? undefined : Colors.LightBlue}>
+        {isSubtle ? `  ↳ ${title}` : title}
+      </Text>
+    </Box>
+    {values.map((value, index) => (
+      <Box width={MODEL_COL_WIDTH} key={index}>
+        <Text>{value}</Text>
+      </Box>
+    ))}
+  </Box>
+);
+
+export const ModelStatsDisplay: React.FC = () => {
+  const { stats } = useSessionStats();
+  const { models } = stats.metrics;
+  const activeModels = Object.entries(models).filter(
+    ([, metrics]) => metrics.api.totalRequests > 0,
+  );
+
+  if (activeModels.length === 0) {
+    return (
+      <Box
+        borderStyle="round"
+        borderColor={Colors.Gray}
+        paddingY={1}
+        paddingX={2}
+      >
+        <Text>No API calls have been made in this session.</Text>
+      </Box>
+    );
+  }
+
+  const modelNames = activeModels.map(([name]) => name);
+
+  const getModelValues = (
+    getter: (metrics: ModelMetrics) => string | React.ReactElement,
+  ) => activeModels.map(([, metrics]) => getter(metrics));
+
+  const hasThoughts = activeModels.some(
+    ([, metrics]) => metrics.tokens.thoughts > 0,
+  );
+  const hasTool = activeModels.some(([, metrics]) => metrics.tokens.tool > 0);
+  const hasCached = activeModels.some(
+    ([, metrics]) => metrics.tokens.cached > 0,
+  );
+
+  return (
+    <Box
+      borderStyle="round"
+      borderColor={Colors.Gray}
+      flexDirection="column"
+      paddingY={1}
+      paddingX={2}
+    >
+      <Text bold color={Colors.AccentPurple}>
+        Model Stats For Nerds
+      </Text>
+      <Box height={1} />
+
+      {/* Header */}
+      <Box>
+        <Box width={METRIC_COL_WIDTH}>
+          <Text bold>Metric</Text>
+        </Box>
+        {modelNames.map((name) => (
+          <Box width={MODEL_COL_WIDTH} key={name}>
+            <Text bold>{name}</Text>
+          </Box>
+        ))}
+      </Box>
+
+      {/* Divider */}
+      <Box
+        borderStyle="single"
+        borderBottom={true}
+        borderTop={false}
+        borderLeft={false}
+        borderRight={false}
+      />
+
+      {/* API Section */}
+      <StatRow title="API" values={[]} isSection />
+      <StatRow
+        title="Requests"
+        values={getModelValues((m) => m.api.totalRequests.toLocaleString())}
+      />
+      <StatRow
+        title="Errors"
+        values={getModelValues((m) => {
+          const errorRate = calculateErrorRate(m);
+          return (
+            <Text
+              color={
+                m.api.totalErrors > 0 ? Colors.AccentRed : Colors.Foreground
+              }
+            >
+              {m.api.totalErrors.toLocaleString()} ({errorRate.toFixed(1)}%)
+            </Text>
+          );
+        })}
+      />
+      <StatRow
+        title="Avg Latency"
+        values={getModelValues((m) => {
+          const avgLatency = calculateAverageLatency(m);
+          return formatDuration(avgLatency);
+        })}
+      />
+
+      <Box height={1} />
+
+      {/* Tokens Section */}
+      <StatRow title="Tokens" values={[]} isSection />
+      <StatRow
+        title="Total"
+        values={getModelValues((m) => (
+          <Text color={Colors.AccentYellow}>
+            {m.tokens.total.toLocaleString()}
+          </Text>
+        ))}
+      />
+      <StatRow
+        title="Prompt"
+        isSubtle
+        values={getModelValues((m) => m.tokens.prompt.toLocaleString())}
+      />
+      {hasCached && (
+        <StatRow
+          title="Cached"
+          isSubtle
+          values={getModelValues((m) => {
+            const cacheHitRate = calculateCacheHitRate(m);
+            return (
+              <Text color={Colors.AccentGreen}>
+                {m.tokens.cached.toLocaleString()} ({cacheHitRate.toFixed(1)}%)
+              </Text>
+            );
+          })}
+        />
+      )}
+      {hasThoughts && (
+        <StatRow
+          title="Thoughts"
+          isSubtle
+          values={getModelValues((m) => m.tokens.thoughts.toLocaleString())}
+        />
+      )}
+      {hasTool && (
+        <StatRow
+          title="Tool"
+          isSubtle
+          values={getModelValues((m) => m.tokens.tool.toLocaleString())}
+        />
+      )}
+      <StatRow
+        title="Output"
+        isSubtle
+        values={getModelValues((m) => m.tokens.candidates.toLocaleString())}
+      />
+    </Box>
+  );
+};

package/dist/ui/components/OllamaModelPrompt.tsx

@@ -0,0 +1,206 @@
+/**
+ * @license
+ * Copyright 2025 Google LLC
+ * SPDX-License-Identifier: Apache-2.0
+ */
+
+import React, { useState, useEffect } from 'react';
+import { Box, Text, useInput } from 'ink';
+import { Colors } from '../colors.js';
+
+interface OllamaModel {
+  name: string;
+  size: string;
+  isRecommended: boolean;
+}
+
+interface OllamaModelPromptProps {
+  onSubmit: (apiKey: string, baseUrl: string, model: string) => void;
+  onCancel: () => void;
+}
+
+// Hardcoded recommended models with stars - based on quality and performance
+const RECOMMENDED_MODELS = new Set([
+  'qwen3-coder-4b',
+  'qwen3-coder-30b', 
+  'qwen3-30b-a3b-2507',
+  'qwen3-4b-2507',
+  'llama3.1:8b',
+  'llama3.1:70b',
+  'codellama:7b',
+  'codellama:13b',
+  'mistral:7b',
+  'deepseek-coder:6.7b',
+  'codegemma:7b'
+]);
+
+export function OllamaModelPrompt({
+  onSubmit,
+  onCancel,
+}: OllamaModelPromptProps): React.JSX.Element {
+  const [availableModels, setAvailableModels] = useState<OllamaModel[]>([]);
+  const [selectedModelIndex, setSelectedModelIndex] = useState(0);
+  const [loading, setLoading] = useState(true);
+  const [error, setError] = useState<string | null>(null);
+
+  // Fetch available models from Ollama on component mount
+  useEffect(() => {
+    const fetchModels = async () => {
+      try {
+        const response = await fetch('http://localhost:11434/api/tags');
+        if (!response.ok) {
+          throw new Error('Ollama server not accessible');
+        }
+        
+        const data = await response.json();
+        // eslint-disable-next-line @typescript-eslint/no-explicit-any
+        const models: OllamaModel[] = data.models?.map((model: any) => ({
+          name: model.name,
+          size: model.size || 'Unknown size',
+          isRecommended: RECOMMENDED_MODELS.has(model.name.split(':')[0])
+        })) || [];
+        
+        // Sort: recommended models first, then by size (largest first)
+        models.sort((a, b) => {
+          if (a.isRecommended && !b.isRecommended) return -1;
+          if (!a.isRecommended && b.isRecommended) return 1;
+          // For models with size info, try to sort by size
+          return 0; // Keep original order for now
+        });
+        
+        setAvailableModels(models);
+        setLoading(false);
+      } catch (err) {
+        setError(err instanceof Error ? err.message : 'Failed to fetch models');
+        setLoading(false);
+      }
+    };
+
+    fetchModels();
+  }, []);
+
+  useInput((input, key) => {
+    if (loading) return;
+
+    if (key.escape) {
+      onCancel();
+      return;
+    }
+
+    if (input.includes('\n') || input.includes('\r')) {
+      if (availableModels.length > 0) {
+        const selectedModel = availableModels[selectedModelIndex];
+        // Use dummy API key "1" - required for persistence but not used by Ollama
+        onSubmit('1', 'http://localhost:11434/v1', selectedModel.name);
+      }
+      return;
+    }
+
+    // Handle arrow keys for model selection
+    if (key.upArrow && selectedModelIndex > 0) {
+      setSelectedModelIndex(selectedModelIndex - 1);
+    }
+
+    if (key.downArrow && selectedModelIndex < availableModels.length - 1) {
+      setSelectedModelIndex(selectedModelIndex + 1);
+    }
+  });
+
+  if (loading) {
+    return (
+      <Box
+        borderStyle="round"
+        borderColor={Colors.AccentBlue}
+        flexDirection="column"
+        padding={1}
+        width="100%"
+      >
+        <Text bold color={Colors.AccentBlue}>
+          Ollama Model Selection
+        </Text>
+        <Box marginTop={1}>
+          <Text>Loading available models from Ollama...</Text>
+        </Box>
+      </Box>
+    );
+  }
+
+  if (error) {
+    return (
+      <Box
+        borderStyle="round"
+        borderColor={Colors.AccentRed}
+        flexDirection="column"
+        padding={1}
+        width="100%"
+      >
+        <Text bold color={Colors.AccentRed}>
+          Ollama Connection Error
+        </Text>
+        <Box marginTop={1}>
+          <Text>{error}</Text>
+        </Box>
+        <Box marginTop={1}>
+          <Text color={Colors.Gray}>
+            Make sure Ollama is running: ollama serve
+          </Text>
+        </Box>
+        <Box marginTop={1}>
+          <Text color={Colors.Gray}>Press Esc to cancel</Text>
+        </Box>
+      </Box>
+    );
+  }
+
+  return (
+    <Box
+      borderStyle="round"
+      borderColor={Colors.AccentBlue}
+      flexDirection="column"
+      padding={1}
+      width="100%"
+    >
+      <Text bold color={Colors.AccentBlue}>
+        Select Ollama Model
+      </Text>
+      <Box marginTop={1}>
+        <Text>Choose from available models on your Ollama server:</Text>
+      </Box>
+      
+      <Box marginTop={1} flexDirection="column">
+        {availableModels.map((model, index) => (
+          <Box key={model.name} flexDirection="row">
+            <Text color={index === selectedModelIndex ? Colors.AccentBlue : Colors.Gray}>
+              {index === selectedModelIndex ? '> ' : '  '}
+              {model.isRecommended ? '⭐ ' : '   '}
+              {model.name}
+            </Text>
+            <Text color={Colors.Gray}>
+              {' '}({model.size})
+            </Text>
+          </Box>
+        ))}
+      </Box>
+      
+      {availableModels.length === 0 && (
+        <Box marginTop={1}>
+          <Text color={Colors.AccentYellow}>
+            No models found. Pull a model with: ollama pull qwen3-coder-4b
+          </Text>
+        </Box>
+      )}
+      
+      <Box marginTop={1}>
+        <Text color={Colors.Gray}>
+          ⭐ = Recommended for coding • Press ↑↓ to select, Enter to confirm, Esc to cancel
+        </Text>
+      </Box>
+      
+      <Box marginTop={1}>
+        <Text color={Colors.AccentBlue}>
+          Endpoint: http://localhost:11434/v1
+        </Text>
+      </Box>
+    </Box>
+  );
+}