fss-link 1.0.40 → 1.0.45

package/dist/ui/types.ts

@@ -0,0 +1,255 @@
+/**
+ * @license
+ * Copyright 2025 Google LLC
+ * SPDX-License-Identifier: Apache-2.0
+ */
+
+import {
+  ToolCallConfirmationDetails,
+  ToolResultDisplay,
+} from 'fss-link-core';
+
+// Only defining the state enum needed by the UI
+export enum StreamingState {
+  Idle = 'idle',
+  Responding = 'responding',
+  WaitingForConfirmation = 'waiting_for_confirmation',
+}
+
+// Copied from server/src/core/turn.ts for CLI usage
+export enum GeminiEventType {
+  Content = 'content',
+  ToolCallRequest = 'tool_call_request',
+  // Add other event types if the UI hook needs to handle them
+}
+
+export enum ToolCallStatus {
+  Pending = 'Pending',
+  Canceled = 'Canceled',
+  Confirming = 'Confirming',
+  Executing = 'Executing',
+  Success = 'Success',
+  Error = 'Error',
+}
+
+export interface ToolCallEvent {
+  type: 'tool_call';
+  status: ToolCallStatus;
+  callId: string;
+  name: string;
+  args: Record<string, never>;
+  resultDisplay: ToolResultDisplay | undefined;
+  confirmationDetails: ToolCallConfirmationDetails | undefined;
+}
+
+export interface IndividualToolCallDisplay {
+  callId: string;
+  name: string;
+  description: string;
+  resultDisplay: ToolResultDisplay | undefined;
+  status: ToolCallStatus;
+  confirmationDetails: ToolCallConfirmationDetails | undefined;
+  renderOutputAsMarkdown?: boolean;
+}
+
+export interface CompressionProps {
+  isPending: boolean;
+  originalTokenCount: number | null;
+  newTokenCount: number | null;
+}
+
+export interface HistoryItemBase {
+  text?: string; // Text content for user/gemini/info/error messages
+}
+
+export type HistoryItemUser = HistoryItemBase & {
+  type: 'user';
+  text: string;
+};
+
+export type HistoryItemGemini = HistoryItemBase & {
+  type: 'gemini';
+  text: string;
+};
+
+export type HistoryItemGeminiContent = HistoryItemBase & {
+  type: 'gemini_content';
+  text: string;
+};
+
+export type HistoryItemInfo = HistoryItemBase & {
+  type: 'info';
+  text: string;
+};
+
+export type HistoryItemError = HistoryItemBase & {
+  type: 'error';
+  text: string;
+};
+
+export type HistoryItemAbout = HistoryItemBase & {
+  type: 'about';
+  cliVersion: string;
+  osVersion: string;
+  sandboxEnv: string;
+  modelVersion: string;
+  selectedAuthType: string;
+  gcpProject: string;
+  ideClient: string;
+};
+
+export type HistoryItemHelp = HistoryItemBase & {
+  type: 'help';
+  timestamp: Date;
+};
+
+export type HistoryItemStats = HistoryItemBase & {
+  type: 'stats';
+  duration: string;
+};
+
+export type HistoryItemModelStats = HistoryItemBase & {
+  type: 'model_stats';
+};
+
+export type HistoryItemToolStats = HistoryItemBase & {
+  type: 'tool_stats';
+};
+
+export type HistoryItemQuit = HistoryItemBase & {
+  type: 'quit';
+  duration: string;
+};
+
+export type HistoryItemToolGroup = HistoryItemBase & {
+  type: 'tool_group';
+  tools: IndividualToolCallDisplay[];
+};
+
+export type HistoryItemUserShell = HistoryItemBase & {
+  type: 'user_shell';
+  text: string;
+};
+
+export type HistoryItemCompression = HistoryItemBase & {
+  type: 'compression';
+  compression: CompressionProps;
+};
+
+// Using Omit<HistoryItem, 'id'> seems to have some issues with typescript's
+// type inference e.g. historyItem.type === 'tool_group' isn't auto-inferring that
+// 'tools' in historyItem.
+// Individually exported types extending HistoryItemBase
+export type HistoryItemWithoutId =
+  | HistoryItemUser
+  | HistoryItemUserShell
+  | HistoryItemGemini
+  | HistoryItemGeminiContent
+  | HistoryItemInfo
+  | HistoryItemError
+  | HistoryItemAbout
+  | HistoryItemHelp
+  | HistoryItemToolGroup
+  | HistoryItemStats
+  | HistoryItemModelStats
+  | HistoryItemToolStats
+  | HistoryItemQuit
+  | HistoryItemCompression;
+
+export type HistoryItem = HistoryItemWithoutId & { id: number };
+
+// Message types used by internal command feedback (subset of HistoryItem types)
+export enum MessageType {
+  INFO = 'info',
+  ERROR = 'error',
+  USER = 'user',
+  ABOUT = 'about',
+  HELP = 'help',
+  STATS = 'stats',
+  MODEL_STATS = 'model_stats',
+  TOOL_STATS = 'tool_stats',
+  QUIT = 'quit',
+  FSS_LINK = 'fss_link',
+  COMPRESSION = 'compression',
+}
+
+// Simplified message structure for internal feedback
+export type Message =
+  | {
+      type: MessageType.INFO | MessageType.ERROR | MessageType.USER;
+      content: string; // Renamed from text for clarity in this context
+      timestamp: Date;
+    }
+  | {
+      type: MessageType.ABOUT;
+      timestamp: Date;
+      cliVersion: string;
+      osVersion: string;
+      sandboxEnv: string;
+      modelVersion: string;
+      selectedAuthType: string;
+      gcpProject: string;
+      ideClient: string;
+      content?: string; // Optional content, not really used for ABOUT
+    }
+  | {
+      type: MessageType.HELP;
+      timestamp: Date;
+      content?: string; // Optional content, not really used for HELP
+    }
+  | {
+      type: MessageType.STATS;
+      timestamp: Date;
+      duration: string;
+      content?: string;
+    }
+  | {
+      type: MessageType.MODEL_STATS;
+      timestamp: Date;
+      content?: string;
+    }
+  | {
+      type: MessageType.TOOL_STATS;
+      timestamp: Date;
+      content?: string;
+    }
+  | {
+      type: MessageType.QUIT;
+      timestamp: Date;
+      duration: string;
+      content?: string;
+    }
+  | {
+      type: MessageType.COMPRESSION;
+      compression: CompressionProps;
+      timestamp: Date;
+    };
+
+export interface ConsoleMessageItem {
+  type: 'log' | 'warn' | 'error' | 'debug' | 'info';
+  content: string;
+  count: number;
+}
+
+/**
+ * Result type for a slash command that should immediately result in a prompt
+ * being submitted to the Gemini model.
+ */
+export interface SubmitPromptResult {
+  type: 'submit_prompt';
+  content: string;
+}
+
+/**
+ * Defines the result of the slash command processor for its consumer (useGeminiStream).
+ */
+export type SlashCommandProcessorResult =
+  | {
+      type: 'schedule_tool';
+      toolName: string;
+      toolArgs: Record<string, unknown>;
+    }
+  | {
+      type: 'handled'; // Indicates the command was processed and no further action is needed.
+    }
+  | SubmitPromptResult;

package/dist/ui/utils/CodeColorizer.tsx

@@ -0,0 +1,217 @@
+/**
+ * @license
+ * Copyright 2025 Google LLC
+ * SPDX-License-Identifier: Apache-2.0
+ */
+
+import React from 'react';
+import { Text, Box } from 'ink';
+import { common, createLowlight } from 'lowlight';
+import type {
+  Root,
+  Element,
+  Text as HastText,
+  ElementContent,
+  RootContent,
+} from 'hast';
+import { themeManager } from '../themes/theme-manager.js';
+import { Theme } from '../themes/theme.js';
+import {
+  MaxSizedBox,
+  MINIMUM_MAX_HEIGHT,
+} from '../components/shared/MaxSizedBox.js';
+import { LoadedSettings } from '../../config/settings.js';
+
+// Configure theming and parsing utilities.
+const lowlight = createLowlight(common);
+
+function renderHastNode(
+  node: Root | Element | HastText | RootContent,
+  theme: Theme,
+  inheritedColor: string | undefined,
+): React.ReactNode {
+  if (node.type === 'text') {
+    // Use the color passed down from parent element, if any
+    return <Text color={inheritedColor}>{node.value}</Text>;
+  }
+
+  // Handle Element Nodes: Determine color and pass it down, don't wrap
+  if (node.type === 'element') {
+    const nodeClasses: string[] =
+      (node.properties?.['className'] as string[]) || [];
+    let elementColor: string | undefined = undefined;
+
+    // Find color defined specifically for this element's class
+    for (let i = nodeClasses.length - 1; i >= 0; i--) {
+      const color = theme.getInkColor(nodeClasses[i]);
+      if (color) {
+        elementColor = color;
+        break;
+      }
+    }
+
+    // Determine the color to pass down: Use this element's specific color
+    // if found; otherwise, continue passing down the already inherited color.
+    const colorToPassDown = elementColor || inheritedColor;
+
+    // Recursively render children, passing the determined color down
+    // Ensure child type matches expected HAST structure (ElementContent is common)
+    const children = node.children?.map(
+      (child: ElementContent, index: number) => (
+        <React.Fragment key={index}>
+          {renderHastNode(child, theme, colorToPassDown)}
+        </React.Fragment>
+      ),
+    );
+
+    // Element nodes now only group children; color is applied by Text nodes.
+    // Use a React Fragment to avoid adding unnecessary elements.
+    return <React.Fragment>{children}</React.Fragment>;
+  }
+
+  // Handle Root Node: Start recursion with initially inherited color
+  if (node.type === 'root') {
+    // Check if children array is empty - this happens when lowlight can't detect language – fall back to plain text
+    if (!node.children || node.children.length === 0) {
+      return null;
+    }
+
+    // Pass down the initial inheritedColor (likely undefined from the top call)
+    // Ensure child type matches expected HAST structure (RootContent is common)
+    return node.children?.map((child: RootContent, index: number) => (
+      <React.Fragment key={index}>
+        {renderHastNode(child, theme, inheritedColor)}
+      </React.Fragment>
+    ));
+  }
+
+  // Handle unknown or unsupported node types
+  return null;
+}
+
+function highlightAndRenderLine(
+  line: string,
+  language: string | null,
+  theme: Theme,
+): React.ReactNode {
+  try {
+    const getHighlightedLine = () =>
+      !language || !lowlight.registered(language)
+        ? lowlight.highlightAuto(line)
+        : lowlight.highlight(language, line);
+
+    const renderedNode = renderHastNode(getHighlightedLine(), theme, undefined);
+
+    return renderedNode !== null ? renderedNode : line;
+  } catch (_error) {
+    return line;
+  }
+}
+
+export function colorizeLine(
+  line: string,
+  language: string | null,
+  theme?: Theme,
+): React.ReactNode {
+  const activeTheme = theme || themeManager.getActiveTheme();
+  return highlightAndRenderLine(line, language, activeTheme);
+}
+
+/**
+ * Renders syntax-highlighted code for Ink applications using a selected theme.
+ *
+ * @param code The code string to highlight.
+ * @param language The language identifier (e.g., 'javascript', 'css', 'html')
+ * @returns A React.ReactNode containing Ink <Text> elements for the highlighted code.
+ */
+export function colorizeCode(
+  code: string,
+  language: string | null,
+  availableHeight?: number,
+  maxWidth?: number,
+  theme?: Theme,
+  settings?: LoadedSettings,
+): React.ReactNode {
+  const codeToHighlight = code.replace(/\n$/, '');
+  const activeTheme = theme || themeManager.getActiveTheme();
+  const showLineNumbers = settings?.merged.showLineNumbers ?? true;
+
+  try {
+    // Render the HAST tree using the adapted theme
+    // Apply the theme's default foreground color to the top-level Text element
+    let lines = codeToHighlight.split('\n');
+    const padWidth = String(lines.length).length; // Calculate padding width based on number of lines
+
+    let hiddenLinesCount = 0;
+
+    // Optimization to avoid highlighting lines that cannot possibly be displayed.
+    if (availableHeight !== undefined) {
+      availableHeight = Math.max(availableHeight, MINIMUM_MAX_HEIGHT);
+      if (lines.length > availableHeight) {
+        const sliceIndex = lines.length - availableHeight;
+        hiddenLinesCount = sliceIndex;
+        lines = lines.slice(sliceIndex);
+      }
+    }
+
+    return (
+      <MaxSizedBox
+        maxHeight={availableHeight}
+        maxWidth={maxWidth}
+        additionalHiddenLinesCount={hiddenLinesCount}
+        overflowDirection="top"
+      >
+        {lines.map((line, index) => {
+          const contentToRender = highlightAndRenderLine(
+            line,
+            language,
+            activeTheme,
+          );
+
+          return (
+            <Box key={index}>
+              {showLineNumbers && (
+                <Text color={activeTheme.colors.Gray}>
+                  {`${String(index + 1 + hiddenLinesCount).padStart(
+                    padWidth,
+                    ' ',
+                  )} `}
+                </Text>
+              )}
+              <Text color={activeTheme.defaultColor} wrap="wrap">
+                {contentToRender}
+              </Text>
+            </Box>
+          );
+        })}
+      </MaxSizedBox>
+    );
+  } catch (error) {
+    console.error(
+      `[colorizeCode] Error highlighting code for language "${language}":`,
+      error,
+    );
+    // Fall back to plain text with default color on error
+    // Also display line numbers in fallback
+    const lines = codeToHighlight.split('\n');
+    const padWidth = String(lines.length).length; // Calculate padding width based on number of lines
+    return (
+      <MaxSizedBox
+        maxHeight={availableHeight}
+        maxWidth={maxWidth}
+        overflowDirection="top"
+      >
+        {lines.map((line, index) => (
+          <Box key={index}>
+            {showLineNumbers && (
+              <Text color={activeTheme.defaultColor}>
+                {`${String(index + 1).padStart(padWidth, ' ')} `}
+              </Text>
+            )}
+            <Text color={activeTheme.colors.Gray}>{line}</Text>
+          </Box>
+        ))}
+      </MaxSizedBox>
+    );
+  }
+}

package/dist/ui/utils/ConsolePatcher.ts

@@ -0,0 +1,71 @@
+/**
+ * @license
+ * Copyright 2025 Google LLC
+ * SPDX-License-Identifier: Apache-2.0
+ */
+
+import util from 'util';
+import { ConsoleMessageItem } from '../types.js';
+
+interface ConsolePatcherParams {
+  onNewMessage?: (message: Omit<ConsoleMessageItem, 'id'>) => void;
+  debugMode: boolean;
+  stderr?: boolean;
+}
+
+export class ConsolePatcher {
+  private originalConsoleLog = console.log;
+  private originalConsoleWarn = console.warn;
+  private originalConsoleError = console.error;
+  private originalConsoleDebug = console.debug;
+  private originalConsoleInfo = console.info;
+
+  private params: ConsolePatcherParams;
+
+  constructor(params: ConsolePatcherParams) {
+    this.params = params;
+  }
+
+  patch() {
+    console.log = this.patchConsoleMethod('log', this.originalConsoleLog);
+    console.warn = this.patchConsoleMethod('warn', this.originalConsoleWarn);
+    console.error = this.patchConsoleMethod('error', this.originalConsoleError);
+    console.debug = this.patchConsoleMethod('debug', this.originalConsoleDebug);
+    console.info = this.patchConsoleMethod('info', this.originalConsoleInfo);
+  }
+
+  cleanup = () => {
+    console.log = this.originalConsoleLog;
+    console.warn = this.originalConsoleWarn;
+    console.error = this.originalConsoleError;
+    console.debug = this.originalConsoleDebug;
+    console.info = this.originalConsoleInfo;
+  };
+
+  private formatArgs = (args: unknown[]): string => util.format(...args);
+
+  private patchConsoleMethod =
+    (
+      type: 'log' | 'warn' | 'error' | 'debug' | 'info',
+      originalMethod: (...args: unknown[]) => void,
+    ) =>
+    (...args: unknown[]) => {
+      if (this.params.stderr) {
+        if (type !== 'debug' || this.params.debugMode) {
+          this.originalConsoleError(this.formatArgs(args));
+        }
+      } else {
+        if (this.params.debugMode) {
+          originalMethod.apply(console, args);
+        }
+
+        if (type !== 'debug' || this.params.debugMode) {
+          this.params.onNewMessage?.({
+            type,
+            content: this.formatArgs(args),
+            count: 1,
+          });
+        }
+      }
+    };
+}

package/dist/ui/utils/InlineMarkdownRenderer.tsx

@@ -0,0 +1,173 @@
+/**
+ * @license
+ * Copyright 2025 Google LLC
+ * SPDX-License-Identifier: Apache-2.0
+ */
+
+import React from 'react';
+import { Text } from 'ink';
+import { Colors } from '../colors.js';
+import stringWidth from 'string-width';
+
+// Constants for Markdown parsing
+const BOLD_MARKER_LENGTH = 2; // For "**"
+const ITALIC_MARKER_LENGTH = 1; // For "*" or "_"
+const STRIKETHROUGH_MARKER_LENGTH = 2; // For "~~"
+const INLINE_CODE_MARKER_LENGTH = 1; // For "`"
+const UNDERLINE_TAG_START_LENGTH = 3; // For "<u>"
+const UNDERLINE_TAG_END_LENGTH = 4; // For "</u>"
+
+interface RenderInlineProps {
+  text: string;
+}
+
+const RenderInlineInternal: React.FC<RenderInlineProps> = ({ text }) => {
+  // Early return for plain text without markdown or URLs
+  if (!/[*_~`<[https?:]/.test(text)) {
+    return <Text>{text}</Text>;
+  }
+
+  const nodes: React.ReactNode[] = [];
+  let lastIndex = 0;
+  const inlineRegex =
+    /(\*\*.*?\*\*|\*.*?\*|_.*?_|~~.*?~~|\[.*?\]\(.*?\)|`+.+?`+|<u>.*?<\/u>|https?:\/\/\S+)/g;
+  let match;
+
+  while ((match = inlineRegex.exec(text)) !== null) {
+    if (match.index > lastIndex) {
+      nodes.push(
+        <Text key={`t-${lastIndex}`}>
+          {text.slice(lastIndex, match.index)}
+        </Text>,
+      );
+    }
+
+    const fullMatch = match[0];
+    let renderedNode: React.ReactNode = null;
+    const key = `m-${match.index}`;
+
+    try {
+      if (
+        fullMatch.startsWith('**') &&
+        fullMatch.endsWith('**') &&
+        fullMatch.length > BOLD_MARKER_LENGTH * 2
+      ) {
+        renderedNode = (
+          <Text key={key} bold>
+            {fullMatch.slice(BOLD_MARKER_LENGTH, -BOLD_MARKER_LENGTH)}
+          </Text>
+        );
+      } else if (
+        fullMatch.length > ITALIC_MARKER_LENGTH * 2 &&
+        ((fullMatch.startsWith('*') && fullMatch.endsWith('*')) ||
+          (fullMatch.startsWith('_') && fullMatch.endsWith('_'))) &&
+        !/\w/.test(text.substring(match.index - 1, match.index)) &&
+        !/\w/.test(
+          text.substring(inlineRegex.lastIndex, inlineRegex.lastIndex + 1),
+        ) &&
+        !/\S[./\\]/.test(text.substring(match.index - 2, match.index)) &&
+        !/[./\\]\S/.test(
+          text.substring(inlineRegex.lastIndex, inlineRegex.lastIndex + 2),
+        )
+      ) {
+        renderedNode = (
+          <Text key={key} italic>
+            {fullMatch.slice(ITALIC_MARKER_LENGTH, -ITALIC_MARKER_LENGTH)}
+          </Text>
+        );
+      } else if (
+        fullMatch.startsWith('~~') &&
+        fullMatch.endsWith('~~') &&
+        fullMatch.length > STRIKETHROUGH_MARKER_LENGTH * 2
+      ) {
+        renderedNode = (
+          <Text key={key} strikethrough>
+            {fullMatch.slice(
+              STRIKETHROUGH_MARKER_LENGTH,
+              -STRIKETHROUGH_MARKER_LENGTH,
+            )}
+          </Text>
+        );
+      } else if (
+        fullMatch.startsWith('`') &&
+        fullMatch.endsWith('`') &&
+        fullMatch.length > INLINE_CODE_MARKER_LENGTH
+      ) {
+        const codeMatch = fullMatch.match(/^(`+)(.+?)\1$/s);
+        if (codeMatch && codeMatch[2]) {
+          renderedNode = (
+            <Text key={key} color={Colors.AccentPurple}>
+              {codeMatch[2]}
+            </Text>
+          );
+        }
+      } else if (
+        fullMatch.startsWith('[') &&
+        fullMatch.includes('](') &&
+        fullMatch.endsWith(')')
+      ) {
+        const linkMatch = fullMatch.match(/\[(.*?)\]\((.*?)\)/);
+        if (linkMatch) {
+          const linkText = linkMatch[1];
+          const url = linkMatch[2];
+          renderedNode = (
+            <Text key={key}>
+              {linkText}
+              <Text color={Colors.AccentBlue}> ({url})</Text>
+            </Text>
+          );
+        }
+      } else if (
+        fullMatch.startsWith('<u>') &&
+        fullMatch.endsWith('</u>') &&
+        fullMatch.length >
+          UNDERLINE_TAG_START_LENGTH + UNDERLINE_TAG_END_LENGTH - 1 // -1 because length is compared to combined length of start and end tags
+      ) {
+        renderedNode = (
+          <Text key={key} underline>
+            {fullMatch.slice(
+              UNDERLINE_TAG_START_LENGTH,
+              -UNDERLINE_TAG_END_LENGTH,
+            )}
+          </Text>
+        );
+      } else if (fullMatch.match(/^https?:\/\//)) {
+        renderedNode = (
+          <Text key={key} color={Colors.AccentBlue}>
+            {fullMatch}
+          </Text>
+        );
+      }
+    } catch (e) {
+      console.error('Error parsing inline markdown part:', fullMatch, e);
+      renderedNode = null;
+    }
+
+    nodes.push(renderedNode ?? <Text key={key}>{fullMatch}</Text>);
+    lastIndex = inlineRegex.lastIndex;
+  }
+
+  if (lastIndex < text.length) {
+    nodes.push(<Text key={`t-${lastIndex}`}>{text.slice(lastIndex)}</Text>);
+  }
+
+  return <>{nodes.filter((node) => node !== null)}</>;
+};
+
+export const RenderInline = React.memo(RenderInlineInternal);
+
+/**
+ * Utility function to get the plain text length of a string with markdown formatting
+ * This is useful for calculating column widths in tables
+ */
+export const getPlainTextLength = (text: string): number => {
+  const cleanText = text
+    .replace(/\*\*(.*?)\*\*/g, '$1')
+    .replace(/\*(.*?)\*/g, '$1')
+    .replace(/_(.*?)_/g, '$1')
+    .replace(/~~(.*?)~~/g, '$1')
+    .replace(/`(.*?)`/g, '$1')
+    .replace(/<u>(.*?)<\/u>/g, '$1')
+    .replace(/\[(.*?)\]\(.*?\)/g, '$1');
+  return stringWidth(cleanText);
+};