fss-link 1.0.40 → 1.0.45

package/dist/ui/components/LMStudioModelPrompt.tsx

@@ -0,0 +1,215 @@
+/**
+ * @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 LMStudioModel {
+  id: string;
+  object: string;
+  isRecommended: boolean;
+}
+
+interface LMStudioModelPromptProps {
+  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',
+  'llama-3.1-8b',
+  'llama-3.1-70b',
+  'codellama-7b',
+  'codellama-13b',
+  'mistral-7b',
+  'deepseek-coder-6.7b',
+  'codegemma-7b'
+]);
+
+function normalizeModelName(modelId: string): string {
+  // Extract base name from LM Studio model IDs for recommendation matching
+  return modelId.toLowerCase()
+    .replace(/[-_]/g, '-')
+    .replace(/\.(gguf|bin|safetensors)$/, '')
+    .split('/').pop() || modelId;
+}
+
+export function LMStudioModelPrompt({
+  onSubmit,
+  onCancel,
+}: LMStudioModelPromptProps): React.JSX.Element {
+  const [availableModels, setAvailableModels] = useState<LMStudioModel[]>([]);
+  const [selectedModelIndex, setSelectedModelIndex] = useState(0);
+  const [loading, setLoading] = useState(true);
+  const [error, setError] = useState<string | null>(null);
+
+  // Fetch available models from LM Studio on component mount
+  useEffect(() => {
+    const fetchModels = async () => {
+      try {
+        const response = await fetch('http://localhost:1234/v1/models');
+        if (!response.ok) {
+          throw new Error('LM Studio server not accessible');
+        }
+        
+        const data = await response.json();
+        // eslint-disable-next-line @typescript-eslint/no-explicit-any
+        const models: LMStudioModel[] = data.data?.map((model: any) => ({
+          id: model.id,
+          object: model.object || 'model',
+          isRecommended: RECOMMENDED_MODELS.has(normalizeModelName(model.id))
+        })) || [];
+        
+        // Sort: recommended models first, then alphabetically
+        models.sort((a, b) => {
+          if (a.isRecommended && !b.isRecommended) return -1;
+          if (!a.isRecommended && b.isRecommended) return 1;
+          return a.id.localeCompare(b.id);
+        });
+        
+        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 LM Studio
+        onSubmit('1', 'http://localhost:1234/v1', selectedModel.id);
+      }
+      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}>
+          LM Studio Model Selection
+        </Text>
+        <Box marginTop={1}>
+          <Text>Loading available models from LM Studio...</Text>
+        </Box>
+      </Box>
+    );
+  }
+
+  if (error) {
+    return (
+      <Box
+        borderStyle="round"
+        borderColor={Colors.AccentRed}
+        flexDirection="column"
+        padding={1}
+        width="100%"
+      >
+        <Text bold color={Colors.AccentRed}>
+          LM Studio Connection Error
+        </Text>
+        <Box marginTop={1}>
+          <Text>{error}</Text>
+        </Box>
+        <Box marginTop={1}>
+          <Text color={Colors.Gray}>
+            Make sure LM Studio is running with a model loaded
+          </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 LM Studio Model
+      </Text>
+      <Box marginTop={1}>
+        <Text>Choose from loaded models in your LM Studio server:</Text>
+      </Box>
+      
+      <Box marginTop={1} flexDirection="column">
+        {availableModels.slice(0, 10).map((model, index) => (
+          <Box key={model.id} flexDirection="row">
+            <Text color={index === selectedModelIndex ? Colors.AccentBlue : Colors.Gray}>
+              {index === selectedModelIndex ? '> ' : '  '}
+              {model.isRecommended ? '⭐ ' : '   '}
+              {model.id}
+            </Text>
+          </Box>
+        ))}
+        {availableModels.length > 10 && (
+          <Text color={Colors.Gray}>
+            ... and {availableModels.length - 10} more models
+          </Text>
+        )}
+      </Box>
+      
+      {availableModels.length === 0 && (
+        <Box marginTop={1}>
+          <Text color={Colors.AccentYellow}>
+            No models found. Load a model in LM Studio first.
+          </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:1234/v1
+        </Text>
+      </Box>
+    </Box>
+  );
+}

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

@@ -0,0 +1,296 @@
+/**
+ * @license
+ * Copyright 2025 Google LLC
+ * SPDX-License-Identifier: Apache-2.0
+ */
+
+import React from 'react';
+import { render } from 'ink-testing-library';
+import { Text } from 'ink';
+import { LoadingIndicator } from './LoadingIndicator.js';
+import { StreamingContext } from '../contexts/StreamingContext.js';
+import { StreamingState } from '../types.js';
+import { vi } from 'vitest';
+import * as useTerminalSize from '../hooks/useTerminalSize.js';
+
+// Mock GeminiRespondingSpinner
+vi.mock('./GeminiRespondingSpinner.js', () => ({
+  GeminiRespondingSpinner: ({
+    nonRespondingDisplay,
+  }: {
+    nonRespondingDisplay?: string;
+  }) => {
+    const streamingState = React.useContext(StreamingContext)!;
+    if (streamingState === StreamingState.Responding) {
+      return <Text>MockRespondingSpinner</Text>;
+    } else if (nonRespondingDisplay) {
+      return <Text>{nonRespondingDisplay}</Text>;
+    }
+    return null;
+  },
+}));
+
+vi.mock('../hooks/useTerminalSize.js', () => ({
+  useTerminalSize: vi.fn(),
+}));
+
+const useTerminalSizeMock = vi.mocked(useTerminalSize.useTerminalSize);
+
+const renderWithContext = (
+  ui: React.ReactElement,
+  streamingStateValue: StreamingState,
+  width = 120,
+) => {
+  useTerminalSizeMock.mockReturnValue({ columns: width, rows: 24 });
+  const contextValue: StreamingState = streamingStateValue;
+  return render(
+    <StreamingContext.Provider value={contextValue}>
+      {ui}
+    </StreamingContext.Provider>,
+  );
+};
+
+describe('<LoadingIndicator />', () => {
+  const defaultProps = {
+    currentLoadingPhrase: 'Loading...',
+    elapsedTime: 5,
+  };
+
+  it('should not render when streamingState is Idle', () => {
+    const { lastFrame } = renderWithContext(
+      <LoadingIndicator {...defaultProps} />,
+      StreamingState.Idle,
+    );
+    expect(lastFrame()).toBe('');
+  });
+
+  it('should render spinner, phrase, and time when streamingState is Responding', () => {
+    const { lastFrame } = renderWithContext(
+      <LoadingIndicator {...defaultProps} />,
+      StreamingState.Responding,
+    );
+    const output = lastFrame();
+    expect(output).toContain('MockRespondingSpinner');
+    expect(output).toContain('Loading...');
+    expect(output).toContain('(esc to cancel, 5s)');
+  });
+
+  it('should render spinner (static), phrase but no time/cancel when streamingState is WaitingForConfirmation', () => {
+    const props = {
+      currentLoadingPhrase: 'Confirm action',
+      elapsedTime: 10,
+    };
+    const { lastFrame } = renderWithContext(
+      <LoadingIndicator {...props} />,
+      StreamingState.WaitingForConfirmation,
+    );
+    const output = lastFrame();
+    expect(output).toContain('⠏'); // Static char for WaitingForConfirmation
+    expect(output).toContain('Confirm action');
+    expect(output).not.toContain('(esc to cancel)');
+    expect(output).not.toContain(', 10s');
+  });
+
+  it('should display the currentLoadingPhrase correctly', () => {
+    const props = {
+      currentLoadingPhrase: 'Processing data...',
+      elapsedTime: 3,
+    };
+    const { lastFrame } = renderWithContext(
+      <LoadingIndicator {...props} />,
+      StreamingState.Responding,
+    );
+    expect(lastFrame()).toContain('Processing data...');
+  });
+
+  it('should display the elapsedTime correctly when Responding', () => {
+    const props = {
+      currentLoadingPhrase: 'Working...',
+      elapsedTime: 60,
+    };
+    const { lastFrame } = renderWithContext(
+      <LoadingIndicator {...props} />,
+      StreamingState.Responding,
+    );
+    expect(lastFrame()).toContain('(esc to cancel, 1m)');
+  });
+
+  it('should display the elapsedTime correctly in human-readable format', () => {
+    const props = {
+      currentLoadingPhrase: 'Working...',
+      elapsedTime: 125,
+    };
+    const { lastFrame } = renderWithContext(
+      <LoadingIndicator {...props} />,
+      StreamingState.Responding,
+    );
+    expect(lastFrame()).toContain('(esc to cancel, 2m 5s)');
+  });
+
+  it('should render rightContent when provided', () => {
+    const rightContent = <Text>Extra Info</Text>;
+    const { lastFrame } = renderWithContext(
+      <LoadingIndicator {...defaultProps} rightContent={rightContent} />,
+      StreamingState.Responding,
+    );
+    expect(lastFrame()).toContain('Extra Info');
+  });
+
+  it('should transition correctly between states using rerender', () => {
+    const { lastFrame, rerender } = renderWithContext(
+      <LoadingIndicator {...defaultProps} />,
+      StreamingState.Idle,
+    );
+    expect(lastFrame()).toBe(''); // Initial: Idle
+
+    // Transition to Responding
+    rerender(
+      <StreamingContext.Provider value={StreamingState.Responding}>
+        <LoadingIndicator
+          currentLoadingPhrase="Now Responding"
+          elapsedTime={2}
+        />
+      </StreamingContext.Provider>,
+    );
+    let output = lastFrame();
+    expect(output).toContain('MockRespondingSpinner');
+    expect(output).toContain('Now Responding');
+    expect(output).toContain('(esc to cancel, 2s)');
+
+    // Transition to WaitingForConfirmation
+    rerender(
+      <StreamingContext.Provider value={StreamingState.WaitingForConfirmation}>
+        <LoadingIndicator
+          currentLoadingPhrase="Please Confirm"
+          elapsedTime={15}
+        />
+      </StreamingContext.Provider>,
+    );
+    output = lastFrame();
+    expect(output).toContain('⠏');
+    expect(output).toContain('Please Confirm');
+    expect(output).not.toContain('(esc to cancel)');
+    expect(output).not.toContain(', 15s');
+
+    // Transition back to Idle
+    rerender(
+      <StreamingContext.Provider value={StreamingState.Idle}>
+        <LoadingIndicator {...defaultProps} />
+      </StreamingContext.Provider>,
+    );
+    expect(lastFrame()).toBe('');
+  });
+
+  it('should display fallback phrase if thought is empty', () => {
+    const props = {
+      thought: null,
+      currentLoadingPhrase: 'Loading...',
+      elapsedTime: 5,
+    };
+    const { lastFrame } = renderWithContext(
+      <LoadingIndicator {...props} />,
+      StreamingState.Responding,
+    );
+    const output = lastFrame();
+    expect(output).toContain('Loading...');
+  });
+
+  it('should display the subject of a thought', () => {
+    const props = {
+      thought: {
+        subject: 'Thinking about something...',
+        description: 'and other stuff.',
+      },
+      elapsedTime: 5,
+    };
+    const { lastFrame } = renderWithContext(
+      <LoadingIndicator {...props} />,
+      StreamingState.Responding,
+    );
+    const output = lastFrame();
+    expect(output).toBeDefined();
+    if (output) {
+      expect(output).toContain('Thinking about something...');
+      expect(output).not.toContain('and other stuff.');
+    }
+  });
+
+  it('should prioritize thought.subject over currentLoadingPhrase', () => {
+    const props = {
+      thought: {
+        subject: 'This should be displayed',
+        description: 'A description',
+      },
+      currentLoadingPhrase: 'This should not be displayed',
+      elapsedTime: 5,
+    };
+    const { lastFrame } = renderWithContext(
+      <LoadingIndicator {...props} />,
+      StreamingState.Responding,
+    );
+    const output = lastFrame();
+    expect(output).toContain('This should be displayed');
+    expect(output).not.toContain('This should not be displayed');
+  });
+
+  describe('responsive layout', () => {
+    it('should render on a single line on a wide terminal', () => {
+      const { lastFrame } = renderWithContext(
+        <LoadingIndicator
+          {...defaultProps}
+          rightContent={<Text>Right</Text>}
+        />,
+        StreamingState.Responding,
+        120,
+      );
+      const output = lastFrame();
+      // Check for single line output
+      expect(output?.includes('\n')).toBe(false);
+      expect(output).toContain('Loading...');
+      expect(output).toContain('(esc to cancel, 5s)');
+      expect(output).toContain('Right');
+    });
+
+    it('should render on multiple lines on a narrow terminal', () => {
+      const { lastFrame } = renderWithContext(
+        <LoadingIndicator
+          {...defaultProps}
+          rightContent={<Text>Right</Text>}
+        />,
+        StreamingState.Responding,
+        79,
+      );
+      const output = lastFrame();
+      const lines = output?.split('\n');
+      // Expecting 3 lines:
+      // 1. Spinner + Primary Text
+      // 2. Cancel + Timer
+      // 3. Right Content
+      expect(lines).toHaveLength(3);
+      if (lines) {
+        expect(lines[0]).toContain('Loading...');
+        expect(lines[0]).not.toContain('(esc to cancel, 5s)');
+        expect(lines[1]).toContain('(esc to cancel, 5s)');
+        expect(lines[2]).toContain('Right');
+      }
+    });
+
+    it('should use wide layout at 80 columns', () => {
+      const { lastFrame } = renderWithContext(
+        <LoadingIndicator {...defaultProps} />,
+        StreamingState.Responding,
+        80,
+      );
+      expect(lastFrame()?.includes('\n')).toBe(false);
+    });
+
+    it('should use narrow layout at 79 columns', () => {
+      const { lastFrame } = renderWithContext(
+        <LoadingIndicator {...defaultProps} />,
+        StreamingState.Responding,
+        79,
+      );
+      expect(lastFrame()?.includes('\n')).toBe(true);
+    });
+  });
+});

package/dist/ui/components/LoadingIndicator.tsx

@@ -0,0 +1,82 @@
+/**
+ * @license
+ * Copyright 2025 Google LLC
+ * SPDX-License-Identifier: Apache-2.0
+ */
+
+import { ThoughtSummary } from 'fss-link-core';
+import React from 'react';
+import { Box, Text } from 'ink';
+import { Colors } from '../colors.js';
+import { useStreamingContext } from '../contexts/StreamingContext.js';
+import { StreamingState } from '../types.js';
+import { GeminiRespondingSpinner } from './GeminiRespondingSpinner.js';
+import { formatDuration } from '../utils/formatters.js';
+import { useTerminalSize } from '../hooks/useTerminalSize.js';
+import { isNarrowWidth } from '../utils/isNarrowWidth.js';
+
+interface LoadingIndicatorProps {
+  currentLoadingPhrase?: string;
+  elapsedTime: number;
+  rightContent?: React.ReactNode;
+  thought?: ThoughtSummary | null;
+}
+
+export const LoadingIndicator: React.FC<LoadingIndicatorProps> = ({
+  currentLoadingPhrase,
+  elapsedTime,
+  rightContent,
+  thought,
+}) => {
+  const streamingState = useStreamingContext();
+  const { columns: terminalWidth } = useTerminalSize();
+  const isNarrow = isNarrowWidth(terminalWidth);
+
+  if (streamingState === StreamingState.Idle) {
+    return null;
+  }
+
+  const primaryText = thought?.subject || currentLoadingPhrase;
+
+  const cancelAndTimerContent =
+    streamingState !== StreamingState.WaitingForConfirmation
+      ? `(esc to cancel, ${elapsedTime < 60 ? `${elapsedTime}s` : formatDuration(elapsedTime * 1000)})`
+      : null;
+
+  return (
+    <Box paddingLeft={0} flexDirection="column">
+      {/* Main loading line */}
+      <Box
+        width="100%"
+        flexDirection={isNarrow ? 'column' : 'row'}
+        alignItems={isNarrow ? 'flex-start' : 'center'}
+      >
+        <Box>
+          <Box marginRight={1}>
+            <GeminiRespondingSpinner
+              nonRespondingDisplay={
+                streamingState === StreamingState.WaitingForConfirmation
+                  ? '⠏'
+                  : ''
+              }
+            />
+          </Box>
+          {primaryText && (
+            <Text color={Colors.AccentPurple}>{primaryText}</Text>
+          )}
+          {!isNarrow && cancelAndTimerContent && (
+            <Text color={Colors.Gray}> {cancelAndTimerContent}</Text>
+          )}
+        </Box>
+        {!isNarrow && <Box flexGrow={1}>{/* Spacer */}</Box>}
+        {!isNarrow && rightContent && <Box>{rightContent}</Box>}
+      </Box>
+      {isNarrow && cancelAndTimerContent && (
+        <Box>
+          <Text color={Colors.Gray}>{cancelAndTimerContent}</Text>
+        </Box>
+      )}
+      {isNarrow && rightContent && <Box>{rightContent}</Box>}
+    </Box>
+  );
+};

package/dist/ui/components/MemoryUsageDisplay.tsx

@@ -0,0 +1,36 @@
+/**
+ * @license
+ * Copyright 2025 Google LLC
+ * SPDX-License-Identifier: Apache-2.0
+ */
+
+import React, { useEffect, useState } from 'react';
+import { Box, Text } from 'ink';
+import { Colors } from '../colors.js';
+import process from 'node:process';
+import { formatMemoryUsage } from '../utils/formatters.js';
+
+export const MemoryUsageDisplay: React.FC = () => {
+  const [memoryUsage, setMemoryUsage] = useState<string>('');
+  const [memoryUsageColor, setMemoryUsageColor] = useState<string>(Colors.Gray);
+
+  useEffect(() => {
+    const updateMemory = () => {
+      const usage = process.memoryUsage().rss;
+      setMemoryUsage(formatMemoryUsage(usage));
+      setMemoryUsageColor(
+        usage >= 2 * 1024 * 1024 * 1024 ? Colors.AccentRed : Colors.Gray,
+      );
+    };
+    const intervalId = setInterval(updateMemory, 2000);
+    updateMemory(); // Initial update
+    return () => clearInterval(intervalId);
+  }, []);
+
+  return (
+    <Box>
+      <Text color={Colors.Gray}>| </Text>
+      <Text color={memoryUsageColor}>{memoryUsage}</Text>
+    </Box>
+  );
+};