fss-link 1.0.40 → 1.0.45

package/dist/ui/hooks/useKittyKeyboardProtocol.ts

@@ -0,0 +1,31 @@
+/**
+ * @license
+ * Copyright 2025 Google LLC
+ * SPDX-License-Identifier: Apache-2.0
+ */
+
+import { useState } from 'react';
+import {
+  isKittyProtocolEnabled,
+  isKittyProtocolSupported,
+} from '../utils/kittyProtocolDetector.js';
+
+export interface KittyProtocolStatus {
+  supported: boolean;
+  enabled: boolean;
+  checking: boolean;
+}
+
+/**
+ * Hook that returns the cached Kitty keyboard protocol status.
+ * Detection is done once at app startup to avoid repeated queries.
+ */
+export function useKittyKeyboardProtocol(): KittyProtocolStatus {
+  const [status] = useState<KittyProtocolStatus>({
+    supported: isKittyProtocolSupported(),
+    enabled: isKittyProtocolEnabled(),
+    checking: false,
+  });
+
+  return status;
+}

package/dist/ui/hooks/useLoadingIndicator.test.ts

@@ -0,0 +1,139 @@
+/**
+ * @license
+ * Copyright 2025 Google LLC
+ * SPDX-License-Identifier: Apache-2.0
+ */
+
+import { describe, it, expect, vi, beforeEach, afterEach } from 'vitest';
+import { renderHook, act } from '@testing-library/react';
+import { useLoadingIndicator } from './useLoadingIndicator.js';
+import { StreamingState } from '../types.js';
+import {
+  WITTY_LOADING_PHRASES,
+  PHRASE_CHANGE_INTERVAL_MS,
+} from './usePhraseCycler.js';
+
+describe('useLoadingIndicator', () => {
+  beforeEach(() => {
+    vi.useFakeTimers();
+  });
+
+  afterEach(() => {
+    vi.useRealTimers(); // Restore real timers after each test
+    act(() => vi.runOnlyPendingTimers);
+  });
+
+  it('should initialize with default values when Idle', () => {
+    const { result } = renderHook(() =>
+      useLoadingIndicator(StreamingState.Idle),
+    );
+    expect(result.current.elapsedTime).toBe(0);
+    expect(result.current.currentLoadingPhrase).toBe(WITTY_LOADING_PHRASES[0]);
+  });
+
+  it('should reflect values when Responding', async () => {
+    const { result } = renderHook(() =>
+      useLoadingIndicator(StreamingState.Responding),
+    );
+
+    // Initial state before timers advance
+    expect(result.current.elapsedTime).toBe(0);
+    expect(WITTY_LOADING_PHRASES).toContain(
+      result.current.currentLoadingPhrase,
+    );
+
+    await act(async () => {
+      await vi.advanceTimersByTimeAsync(PHRASE_CHANGE_INTERVAL_MS + 1);
+    });
+
+    // Phrase should cycle if PHRASE_CHANGE_INTERVAL_MS has passed
+    expect(WITTY_LOADING_PHRASES).toContain(
+      result.current.currentLoadingPhrase,
+    );
+  });
+
+  it('should show waiting phrase and retain elapsedTime when WaitingForConfirmation', async () => {
+    const { result, rerender } = renderHook(
+      ({ streamingState }) => useLoadingIndicator(streamingState),
+      { initialProps: { streamingState: StreamingState.Responding } },
+    );
+
+    await act(async () => {
+      await vi.advanceTimersByTimeAsync(60000);
+    });
+    expect(result.current.elapsedTime).toBe(60);
+
+    act(() => {
+      rerender({ streamingState: StreamingState.WaitingForConfirmation });
+    });
+
+    expect(result.current.currentLoadingPhrase).toBe(
+      'Waiting for user confirmation...',
+    );
+    expect(result.current.elapsedTime).toBe(60); // Elapsed time should be retained
+
+    // Timer should not advance further
+    await act(async () => {
+      await vi.advanceTimersByTimeAsync(2000);
+    });
+    expect(result.current.elapsedTime).toBe(60);
+  });
+
+  it('should reset elapsedTime and use a witty phrase when transitioning from WaitingForConfirmation to Responding', async () => {
+    const { result, rerender } = renderHook(
+      ({ streamingState }) => useLoadingIndicator(streamingState),
+      { initialProps: { streamingState: StreamingState.Responding } },
+    );
+
+    await act(async () => {
+      await vi.advanceTimersByTimeAsync(5000); // 5s
+    });
+    expect(result.current.elapsedTime).toBe(5);
+
+    act(() => {
+      rerender({ streamingState: StreamingState.WaitingForConfirmation });
+    });
+    expect(result.current.elapsedTime).toBe(5);
+    expect(result.current.currentLoadingPhrase).toBe(
+      'Waiting for user confirmation...',
+    );
+
+    act(() => {
+      rerender({ streamingState: StreamingState.Responding });
+    });
+    expect(result.current.elapsedTime).toBe(0); // Should reset
+    expect(WITTY_LOADING_PHRASES).toContain(
+      result.current.currentLoadingPhrase,
+    );
+
+    await act(async () => {
+      await vi.advanceTimersByTimeAsync(1000);
+    });
+    expect(result.current.elapsedTime).toBe(1);
+  });
+
+  it('should reset timer and phrase when streamingState changes from Responding to Idle', async () => {
+    const { result, rerender } = renderHook(
+      ({ streamingState }) => useLoadingIndicator(streamingState),
+      { initialProps: { streamingState: StreamingState.Responding } },
+    );
+
+    await act(async () => {
+      await vi.advanceTimersByTimeAsync(10000); // 10s
+    });
+    expect(result.current.elapsedTime).toBe(10);
+
+    act(() => {
+      rerender({ streamingState: StreamingState.Idle });
+    });
+
+    expect(result.current.elapsedTime).toBe(0);
+    expect(result.current.currentLoadingPhrase).toBe(WITTY_LOADING_PHRASES[0]);
+
+    // Timer should not advance
+    await act(async () => {
+      await vi.advanceTimersByTimeAsync(2000);
+    });
+    expect(result.current.elapsedTime).toBe(0);
+  });
+});

package/dist/ui/hooks/useLoadingIndicator.ts

@@ -0,0 +1,57 @@
+/**
+ * @license
+ * Copyright 2025 Google LLC
+ * SPDX-License-Identifier: Apache-2.0
+ */
+
+import { StreamingState } from '../types.js';
+import { useTimer } from './useTimer.js';
+import { usePhraseCycler } from './usePhraseCycler.js';
+import { useState, useEffect, useRef } from 'react'; // Added useRef
+
+export const useLoadingIndicator = (streamingState: StreamingState) => {
+  const [timerResetKey, setTimerResetKey] = useState(0);
+  const isTimerActive = streamingState === StreamingState.Responding;
+
+  const elapsedTimeFromTimer = useTimer(isTimerActive, timerResetKey);
+
+  const isPhraseCyclingActive = streamingState === StreamingState.Responding;
+  const isWaiting = streamingState === StreamingState.WaitingForConfirmation;
+  const currentLoadingPhrase = usePhraseCycler(
+    isPhraseCyclingActive,
+    isWaiting,
+  );
+
+  const [retainedElapsedTime, setRetainedElapsedTime] = useState(0);
+  const prevStreamingStateRef = useRef<StreamingState | null>(null);
+
+  useEffect(() => {
+    if (
+      prevStreamingStateRef.current === StreamingState.WaitingForConfirmation &&
+      streamingState === StreamingState.Responding
+    ) {
+      setTimerResetKey((prevKey) => prevKey + 1);
+      setRetainedElapsedTime(0); // Clear retained time when going back to responding
+    } else if (
+      streamingState === StreamingState.Idle &&
+      prevStreamingStateRef.current === StreamingState.Responding
+    ) {
+      setTimerResetKey((prevKey) => prevKey + 1); // Reset timer when becoming idle from responding
+      setRetainedElapsedTime(0);
+    } else if (streamingState === StreamingState.WaitingForConfirmation) {
+      // Capture the time when entering WaitingForConfirmation
+      // elapsedTimeFromTimer will hold the last value from when isTimerActive was true.
+      setRetainedElapsedTime(elapsedTimeFromTimer);
+    }
+
+    prevStreamingStateRef.current = streamingState;
+  }, [streamingState, elapsedTimeFromTimer]);
+
+  return {
+    elapsedTime:
+      streamingState === StreamingState.WaitingForConfirmation
+        ? retainedElapsedTime
+        : elapsedTimeFromTimer,
+    currentLoadingPhrase,
+  };
+};

package/dist/ui/hooks/useLogger.ts

@@ -0,0 +1,32 @@
+/**
+ * @license
+ * Copyright 2025 Google LLC
+ * SPDX-License-Identifier: Apache-2.0
+ */
+
+import { useState, useEffect } from 'react';
+import { sessionId, Logger } from 'fss-link-core';
+
+/**
+ * Hook to manage the logger instance.
+ */
+export const useLogger = () => {
+  const [logger, setLogger] = useState<Logger | null>(null);
+
+  useEffect(() => {
+    const newLogger = new Logger(sessionId);
+    /**
+     * Start async initialization, no need to await. Using await slows down the
+     * time from launch to see the gemini-cli prompt and it's better to not save
+     * messages than for the cli to hanging waiting for the logger to loading.
+     */
+    newLogger
+      .initialize()
+      .then(() => {
+        setLogger(newLogger);
+      })
+      .catch(() => {});
+  }, []);
+
+  return logger;
+};

package/dist/ui/hooks/useMessageQueue.test.ts

@@ -0,0 +1,226 @@
+/**
+ * @license
+ * Copyright 2025 Google LLC
+ * SPDX-License-Identifier: Apache-2.0
+ */
+
+import { describe, it, expect, vi, beforeEach, afterEach } from 'vitest';
+import { renderHook, act } from '@testing-library/react';
+import { useMessageQueue } from './useMessageQueue.js';
+import { StreamingState } from '../types.js';
+
+describe('useMessageQueue', () => {
+  let mockSubmitQuery: ReturnType<typeof vi.fn>;
+
+  beforeEach(() => {
+    mockSubmitQuery = vi.fn();
+    vi.useFakeTimers();
+  });
+
+  afterEach(() => {
+    vi.useRealTimers();
+    vi.clearAllMocks();
+  });
+
+  it('should initialize with empty queue', () => {
+    const { result } = renderHook(() =>
+      useMessageQueue({
+        streamingState: StreamingState.Idle,
+        submitQuery: mockSubmitQuery,
+      }),
+    );
+
+    expect(result.current.messageQueue).toEqual([]);
+    expect(result.current.getQueuedMessagesText()).toBe('');
+  });
+
+  it('should add messages to queue', () => {
+    const { result } = renderHook(() =>
+      useMessageQueue({
+        streamingState: StreamingState.Responding,
+        submitQuery: mockSubmitQuery,
+      }),
+    );
+
+    act(() => {
+      result.current.addMessage('Test message 1');
+      result.current.addMessage('Test message 2');
+    });
+
+    expect(result.current.messageQueue).toEqual([
+      'Test message 1',
+      'Test message 2',
+    ]);
+  });
+
+  it('should filter out empty messages', () => {
+    const { result } = renderHook(() =>
+      useMessageQueue({
+        streamingState: StreamingState.Responding,
+        submitQuery: mockSubmitQuery,
+      }),
+    );
+
+    act(() => {
+      result.current.addMessage('Valid message');
+      result.current.addMessage('   '); // Only whitespace
+      result.current.addMessage(''); // Empty
+      result.current.addMessage('Another valid message');
+    });
+
+    expect(result.current.messageQueue).toEqual([
+      'Valid message',
+      'Another valid message',
+    ]);
+  });
+
+  it('should clear queue', () => {
+    const { result } = renderHook(() =>
+      useMessageQueue({
+        streamingState: StreamingState.Responding,
+        submitQuery: mockSubmitQuery,
+      }),
+    );
+
+    act(() => {
+      result.current.addMessage('Test message');
+    });
+
+    expect(result.current.messageQueue).toEqual(['Test message']);
+
+    act(() => {
+      result.current.clearQueue();
+    });
+
+    expect(result.current.messageQueue).toEqual([]);
+  });
+
+  it('should return queued messages as text with double newlines', () => {
+    const { result } = renderHook(() =>
+      useMessageQueue({
+        streamingState: StreamingState.Responding,
+        submitQuery: mockSubmitQuery,
+      }),
+    );
+
+    act(() => {
+      result.current.addMessage('Message 1');
+      result.current.addMessage('Message 2');
+      result.current.addMessage('Message 3');
+    });
+
+    expect(result.current.getQueuedMessagesText()).toBe(
+      'Message 1\n\nMessage 2\n\nMessage 3',
+    );
+  });
+
+  it('should auto-submit queued messages when transitioning to Idle', () => {
+    const { result, rerender } = renderHook(
+      ({ streamingState }) =>
+        useMessageQueue({
+          streamingState,
+          submitQuery: mockSubmitQuery,
+        }),
+      {
+        initialProps: { streamingState: StreamingState.Responding },
+      },
+    );
+
+    // Add some messages
+    act(() => {
+      result.current.addMessage('Message 1');
+      result.current.addMessage('Message 2');
+    });
+
+    expect(result.current.messageQueue).toEqual(['Message 1', 'Message 2']);
+
+    // Transition to Idle
+    rerender({ streamingState: StreamingState.Idle });
+
+    expect(mockSubmitQuery).toHaveBeenCalledWith('Message 1\n\nMessage 2');
+    expect(result.current.messageQueue).toEqual([]);
+  });
+
+  it('should not auto-submit when queue is empty', () => {
+    const { rerender } = renderHook(
+      ({ streamingState }) =>
+        useMessageQueue({
+          streamingState,
+          submitQuery: mockSubmitQuery,
+        }),
+      {
+        initialProps: { streamingState: StreamingState.Responding },
+      },
+    );
+
+    // Transition to Idle with empty queue
+    rerender({ streamingState: StreamingState.Idle });
+
+    expect(mockSubmitQuery).not.toHaveBeenCalled();
+  });
+
+  it('should not auto-submit when not transitioning to Idle', () => {
+    const { result, rerender } = renderHook(
+      ({ streamingState }) =>
+        useMessageQueue({
+          streamingState,
+          submitQuery: mockSubmitQuery,
+        }),
+      {
+        initialProps: { streamingState: StreamingState.Responding },
+      },
+    );
+
+    // Add messages
+    act(() => {
+      result.current.addMessage('Message 1');
+    });
+
+    // Transition to WaitingForConfirmation (not Idle)
+    rerender({ streamingState: StreamingState.WaitingForConfirmation });
+
+    expect(mockSubmitQuery).not.toHaveBeenCalled();
+    expect(result.current.messageQueue).toEqual(['Message 1']);
+  });
+
+  it('should handle multiple state transitions correctly', () => {
+    const { result, rerender } = renderHook(
+      ({ streamingState }) =>
+        useMessageQueue({
+          streamingState,
+          submitQuery: mockSubmitQuery,
+        }),
+      {
+        initialProps: { streamingState: StreamingState.Idle },
+      },
+    );
+
+    // Start responding
+    rerender({ streamingState: StreamingState.Responding });
+
+    // Add messages while responding
+    act(() => {
+      result.current.addMessage('First batch');
+    });
+
+    // Go back to idle - should submit
+    rerender({ streamingState: StreamingState.Idle });
+
+    expect(mockSubmitQuery).toHaveBeenCalledWith('First batch');
+    expect(result.current.messageQueue).toEqual([]);
+
+    // Start responding again
+    rerender({ streamingState: StreamingState.Responding });
+
+    // Add more messages
+    act(() => {
+      result.current.addMessage('Second batch');
+    });
+
+    // Go back to idle - should submit again
+    rerender({ streamingState: StreamingState.Idle });
+
+    expect(mockSubmitQuery).toHaveBeenCalledWith('Second batch');
+    expect(mockSubmitQuery).toHaveBeenCalledTimes(2);
+  });
+});

package/dist/ui/hooks/useMessageQueue.ts

@@ -0,0 +1,69 @@
+/**
+ * @license
+ * Copyright 2025 Google LLC
+ * SPDX-License-Identifier: Apache-2.0
+ */
+
+import { useCallback, useEffect, useState } from 'react';
+import { StreamingState } from '../types.js';
+
+export interface UseMessageQueueOptions {
+  streamingState: StreamingState;
+  submitQuery: (query: string) => void;
+}
+
+export interface UseMessageQueueReturn {
+  messageQueue: string[];
+  addMessage: (message: string) => void;
+  clearQueue: () => void;
+  getQueuedMessagesText: () => string;
+}
+
+/**
+ * Hook for managing message queuing during streaming responses.
+ * Allows users to queue messages while the AI is responding and automatically
+ * sends them when streaming completes.
+ */
+export function useMessageQueue({
+  streamingState,
+  submitQuery,
+}: UseMessageQueueOptions): UseMessageQueueReturn {
+  const [messageQueue, setMessageQueue] = useState<string[]>([]);
+
+  // Add a message to the queue
+  const addMessage = useCallback((message: string) => {
+    const trimmedMessage = message.trim();
+    if (trimmedMessage.length > 0) {
+      setMessageQueue((prev) => [...prev, trimmedMessage]);
+    }
+  }, []);
+
+  // Clear the entire queue
+  const clearQueue = useCallback(() => {
+    setMessageQueue([]);
+  }, []);
+
+  // Get all queued messages as a single text string
+  const getQueuedMessagesText = useCallback(() => {
+    if (messageQueue.length === 0) return '';
+    return messageQueue.join('\n\n');
+  }, [messageQueue]);
+
+  // Process queued messages when streaming becomes idle
+  useEffect(() => {
+    if (streamingState === StreamingState.Idle && messageQueue.length > 0) {
+      // Combine all messages with double newlines for clarity
+      const combinedMessage = messageQueue.join('\n\n');
+      // Clear the queue and submit
+      setMessageQueue([]);
+      submitQuery(combinedMessage);
+    }
+  }, [streamingState, messageQueue, submitQuery]);
+
+  return {
+    messageQueue,
+    addMessage,
+    clearQueue,
+    getQueuedMessagesText,
+  };
+}

package/dist/ui/hooks/usePhraseCycler.test.ts

@@ -0,0 +1,145 @@
+/**
+ * @license
+ * Copyright 2025 Google LLC
+ * SPDX-License-Identifier: Apache-2.0
+ */
+
+import { describe, it, expect, vi, beforeEach, afterEach } from 'vitest';
+import { renderHook, act } from '@testing-library/react';
+import {
+  usePhraseCycler,
+  WITTY_LOADING_PHRASES,
+  PHRASE_CHANGE_INTERVAL_MS,
+} from './usePhraseCycler.js';
+
+describe('usePhraseCycler', () => {
+  beforeEach(() => {
+    vi.useFakeTimers();
+  });
+
+  afterEach(() => {
+    vi.restoreAllMocks();
+  });
+
+  it('should initialize with the first witty phrase when not active and not waiting', () => {
+    const { result } = renderHook(() => usePhraseCycler(false, false));
+    expect(result.current).toBe(WITTY_LOADING_PHRASES[0]);
+  });
+
+  it('should show "Waiting for user confirmation..." when isWaiting is true', () => {
+    const { result, rerender } = renderHook(
+      ({ isActive, isWaiting }) => usePhraseCycler(isActive, isWaiting),
+      { initialProps: { isActive: true, isWaiting: false } },
+    );
+    rerender({ isActive: true, isWaiting: true });
+    expect(result.current).toBe('Waiting for user confirmation...');
+  });
+
+  it('should not cycle phrases if isActive is false and not waiting', () => {
+    const { result } = renderHook(() => usePhraseCycler(false, false));
+    act(() => {
+      vi.advanceTimersByTime(PHRASE_CHANGE_INTERVAL_MS * 2);
+    });
+    expect(result.current).toBe(WITTY_LOADING_PHRASES[0]);
+  });
+
+  it('should cycle through witty phrases when isActive is true and not waiting', () => {
+    const { result } = renderHook(() => usePhraseCycler(true, false));
+    // Initial phrase should be one of the witty phrases
+    expect(WITTY_LOADING_PHRASES).toContain(result.current);
+    const _initialPhrase = result.current;
+
+    act(() => {
+      vi.advanceTimersByTime(PHRASE_CHANGE_INTERVAL_MS);
+    });
+    // Phrase should change and be one of the witty phrases
+    expect(WITTY_LOADING_PHRASES).toContain(result.current);
+
+    const _secondPhrase = result.current;
+    act(() => {
+      vi.advanceTimersByTime(PHRASE_CHANGE_INTERVAL_MS);
+    });
+    expect(WITTY_LOADING_PHRASES).toContain(result.current);
+  });
+
+  it('should reset to a witty phrase when isActive becomes true after being false (and not waiting)', () => {
+    // Ensure there are at least two phrases for this test to be meaningful.
+    if (WITTY_LOADING_PHRASES.length < 2) {
+      return;
+    }
+
+    // Mock Math.random to make the test deterministic.
+    let callCount = 0;
+    vi.spyOn(Math, 'random').mockImplementation(() => {
+      // Cycle through 0, 1, 0, 1, ...
+      const val = callCount % 2;
+      callCount++;
+      return val / WITTY_LOADING_PHRASES.length;
+    });
+
+    const { result, rerender } = renderHook(
+      ({ isActive, isWaiting }) => usePhraseCycler(isActive, isWaiting),
+      { initialProps: { isActive: false, isWaiting: false } },
+    );
+
+    // Activate
+    rerender({ isActive: true, isWaiting: false });
+    const firstActivePhrase = result.current;
+    expect(WITTY_LOADING_PHRASES).toContain(firstActivePhrase);
+    // With our mock, this should be the first phrase.
+    expect(firstActivePhrase).toBe(WITTY_LOADING_PHRASES[0]);
+
+    act(() => {
+      vi.advanceTimersByTime(PHRASE_CHANGE_INTERVAL_MS);
+    });
+
+    // Phrase should change to the second phrase.
+    expect(result.current).not.toBe(firstActivePhrase);
+    expect(result.current).toBe(WITTY_LOADING_PHRASES[1]);
+
+    // Set to inactive - should reset to the default initial phrase
+    rerender({ isActive: false, isWaiting: false });
+    expect(result.current).toBe(WITTY_LOADING_PHRASES[0]);
+
+    // Set back to active - should pick a random witty phrase (which our mock controls)
+    act(() => {
+      rerender({ isActive: true, isWaiting: false });
+    });
+    // The random mock will now return 0, so it should be the first phrase again.
+    expect(result.current).toBe(WITTY_LOADING_PHRASES[0]);
+  });
+
+  it('should clear phrase interval on unmount when active', () => {
+    const { unmount } = renderHook(() => usePhraseCycler(true, false));
+    const clearIntervalSpy = vi.spyOn(global, 'clearInterval');
+    unmount();
+    expect(clearIntervalSpy).toHaveBeenCalledOnce();
+  });
+
+  it('should reset to a witty phrase when transitioning from waiting to active', () => {
+    const { result, rerender } = renderHook(
+      ({ isActive, isWaiting }) => usePhraseCycler(isActive, isWaiting),
+      { initialProps: { isActive: true, isWaiting: false } },
+    );
+
+    const _initialPhrase = result.current;
+    expect(WITTY_LOADING_PHRASES).toContain(_initialPhrase);
+
+    // Cycle to a different phrase (potentially)
+    act(() => {
+      vi.advanceTimersByTime(PHRASE_CHANGE_INTERVAL_MS);
+    });
+    if (WITTY_LOADING_PHRASES.length > 1) {
+      // This check is probabilistic with random selection
+    }
+    expect(WITTY_LOADING_PHRASES).toContain(result.current);
+
+    // Go to waiting state
+    rerender({ isActive: false, isWaiting: true });
+    expect(result.current).toBe('Waiting for user confirmation...');
+
+    // Go back to active cycling - should pick a random witty phrase
+    rerender({ isActive: true, isWaiting: false });
+    expect(WITTY_LOADING_PHRASES).toContain(result.current);
+  });
+});