Feat: Log Search Frontend, Part I

frontend/app/package.json

@@ -25,6 +25,7 @@
     "@heroicons/react": "^2.2.0",
     "@hookform/resolvers": "^3.10.0",
     "@lukemorales/query-key-factory": "^1.3.4",
+    "@melloware/react-logviewer": "^6.3.5",
     "@monaco-editor/react": "^4.7.0",
     "@radix-ui/react-accordion": "^1.2.3",
     "@radix-ui/react-avatar": "^1.1.3",

frontend/app/src/components/v1/cloud/logging/components/Terminal.tsx

@@ -0,0 +1,117 @@
+import { cn } from '@/lib/utils';
+import { LazyLog, ScrollFollow } from '@melloware/react-logviewer';
+import { useCallback, useRef } from 'react';
+
+interface TerminalProps {
+  logs: string;
+  autoScroll?: boolean;
+  onScrollToTop?: () => void;
+  onScrollToBottom?: () => void;
+  onAtTopChange?: (atTop: boolean) => void;
+  className?: string;
+}
+
+function Terminal({
+  logs,
+  autoScroll = false,
+  onScrollToTop,
+  onScrollToBottom,
+  onAtTopChange,
+  className,
+}: TerminalProps) {
+  const lastScrollTopRef = useRef(0);
+  const wasAtTopRef = useRef(true);
+  const wasInTopRegionRef = useRef(false);
+  const wasInBottomRegionRef = useRef(false);
+
+  const handleLineClick = useCallback(
+    (event: React.MouseEvent<HTMLSpanElement>) => {
+      const lineElement = (event.target as HTMLElement).closest('.log-line');
+      if (lineElement) {
+        lineElement.classList.toggle('expanded');
+      }
+    },
+    [],
+  );
+
+  const handleScroll = useCallback(
+    ({
+      scrollTop,
+      scrollHeight,
+      clientHeight,
+    }: {
+      scrollTop: number;
+      scrollHeight: number;
+      clientHeight: number;
+    }) => {
+      const scrollableHeight = scrollHeight - clientHeight;
+      if (scrollableHeight <= 0) {
+        return;
+      }
+
+      const scrollPercentage = scrollTop / scrollableHeight;
+      const isScrollingUp = scrollTop < lastScrollTopRef.current;
+      const isScrollingDown = scrollTop > lastScrollTopRef.current;
+
+      const isAtTop = scrollPercentage < 0.05;
+      if (onAtTopChange && isAtTop !== wasAtTopRef.current) {
+        wasAtTopRef.current = isAtTop;
+        onAtTopChange(isAtTop);
+      }
+
+      // Near top (newest logs with newest-first) - for running tasks
+      // Only fire when entering the region (edge detection)
+      // The region is defined by both scroll direction AND position, so changing
+      // direction automatically resets the region state
+      const isInTopRegion = isScrollingUp && scrollPercentage < 0.3;
+      if (isInTopRegion && !wasInTopRegionRef.current && onScrollToTop) {
+        onScrollToTop();
+      }
+      wasInTopRegionRef.current = isInTopRegion;
+
+      // Near bottom (older logs with newest-first) - for infinite scroll
+      // Only fire when entering the region (edge detection)
+      // The region is defined by both scroll direction AND position, so changing
+      // direction automatically resets the region state
+      const isInBottomRegion = isScrollingDown && scrollPercentage > 0.7;
+      if (
+        isInBottomRegion &&
+        !wasInBottomRegionRef.current &&
+        onScrollToBottom
+      ) {
+        onScrollToBottom();
+      }
+      wasInBottomRegionRef.current = isInBottomRegion;
+
+      lastScrollTopRef.current = scrollTop;
+    },
+    [onScrollToTop, onScrollToBottom, onAtTopChange],
+  );
+
+  return (
+    <div
+      className={cn(
+        'terminal-root h-[500px] md:h-[600px] rounded-md w-full overflow-hidden',
+        className,
+      )}
+    >
+      <ScrollFollow
+        startFollowing={autoScroll}
+        render={({ follow, onScroll }) => (
+          <LazyLog
+            text={logs}
+            follow={follow}
+            onScroll={(args) => {
+              onScroll(args);
+              handleScroll(args);
+            }}
+            onLineContentClick={handleLineClick}
+            selectableLines
+          />
+        )}
+      />
+    </div>
+  );
+}
+
+export default Terminal;

frontend/app/src/components/v1/cloud/logging/log-search/autocomplete.ts

@@ -0,0 +1,85 @@
+import { AutocompleteSuggestion, LOG_LEVELS } from './types';
+
+const LEVEL_DESCRIPTIONS: Record<string, string> = {
+  error: 'Error messages',
+  warn: 'Warning messages',
+  info: 'Informational messages',
+  debug: 'Debug messages',
+};
+
+export type AutocompleteMode = 'key' | 'value' | 'none';
+
+export interface AutocompleteState {
+  mode: AutocompleteMode;
+  suggestions: AutocompleteSuggestion[];
+}
+
+export function getAutocomplete(query: string): AutocompleteState {
+  const trimmed = query.trimEnd();
+  const lastWord = trimmed.split(' ').pop() || '';
+
+  if (lastWord.startsWith('level:')) {
+    const partial = lastWord.slice(6).toLowerCase();
+    const suggestions = LOG_LEVELS.filter((level) =>
+      level.startsWith(partial),
+    ).map((level) => ({
+      type: 'value' as const,
+      label: level,
+      value: level,
+      description: LEVEL_DESCRIPTIONS[level],
+    }));
+    return { mode: 'value', suggestions };
+  }
+
+  if ('level:'.startsWith(lastWord.toLowerCase()) && lastWord.length > 0) {
+    return {
+      mode: 'key',
+      suggestions: [
+        {
+          type: 'key',
+          label: 'level',
+          value: 'level:',
+          description: 'Filter by log level',
+        },
+      ],
+    };
+  }
+
+  if (trimmed === '' || query.endsWith(' ')) {
+    return {
+      mode: 'key',
+      suggestions: [
+        {
+          type: 'key',
+          label: 'level',
+          value: 'level:',
+          description: 'Filter by log level',
+        },
+      ],
+    };
+  }
+
+  return { mode: 'none', suggestions: [] };
+}
+
+export function applySuggestion(
+  query: string,
+  suggestion: AutocompleteSuggestion,
+): string {
+  const trimmed = query.trimEnd();
+  const words = trimmed.split(' ');
+  const lastWord = words.pop() || '';
+
+  if (suggestion.type === 'value') {
+    const prefix = lastWord.slice(0, lastWord.indexOf(':') + 1);
+    words.push(prefix + suggestion.value);
+  } else {
+    if (lastWord && 'level:'.startsWith(lastWord.toLowerCase())) {
+      words.push(suggestion.value);
+    } else {
+      words.push(lastWord, suggestion.value);
+    }
+  }
+
+  return words.filter(Boolean).join(' ');
+}