removed time presets

debug level only for admins
removed AI helper

Author: mpcgrid

apps/webapp/app/components/logs/LogsLevelFilter.tsx

@@ -16,7 +16,7 @@ import { FilterMenuProvider, appliedSummary } from "~/components/runs/v3/SharedF
 import type { LogLevel } from "~/presenters/v3/LogsListPresenter.server";
 import { cn } from "~/utils/cn";
 
-const logLevels: { level: LogLevel; label: string; color: string }[] = [
+const allLogLevels: { level: LogLevel; label: string; color: string }[] = [
   { level: "ERROR", label: "Error", color: "text-error" },
   { level: "WARN", label: "Warning", color: "text-warning" },
   { level: "INFO", label: "Info", color: "text-blue-400" },
@@ -25,6 +25,13 @@ const logLevels: { level: LogLevel; label: string; color: string }[] = [
   { level: "TRACE", label: "Trace", color: "text-charcoal-500" },
 ];
 
+function getAvailableLevels(showDebug: boolean): typeof allLogLevels {
+  if (showDebug) {
+    return allLogLevels;
+  }
+  return allLogLevels.filter((level) => level.level !== "DEBUG");
+}
+
 function getLevelBadgeColor(level: LogLevel): string {
   switch (level) {
     case "ERROR":
@@ -45,13 +52,13 @@ function getLevelBadgeColor(level: LogLevel): string {
 
 const shortcut = { key: "l" };
 
-export function LogsLevelFilter() {
+export function LogsLevelFilter({ showDebug = false }: { showDebug?: boolean }) {
   const { values } = useSearchParams();
   const selectedLevels = values("levels");
   const hasLevels = selectedLevels.length > 0 && selectedLevels.some((v) => v !== "");
 
   if (hasLevels) {
-    return <AppliedLevelFilter />;
+    return <AppliedLevelFilter showDebug={showDebug} />;
   }
 
   return (
@@ -70,6 +77,7 @@ export function LogsLevelFilter() {
           }
           searchValue={search}
           clearSearchValue={() => setSearch("")}
+          showDebug={showDebug}
         />
       )}
     </FilterMenuProvider>
@@ -81,11 +89,13 @@ function LevelDropdown({
   clearSearchValue,
   searchValue,
   onClose,
+  showDebug = false,
 }: {
   trigger: ReactNode;
   clearSearchValue: () => void;
   searchValue: string;
   onClose?: () => void;
+  showDebug?: boolean;
 }) {
   const { values, replace } = useSearchParams();
 
@@ -94,11 +104,12 @@ function LevelDropdown({
     replace({ levels: values, cursor: undefined, direction: undefined });
   };
 
+  const availableLevels = getAvailableLevels(showDebug);
   const filtered = useMemo(() => {
-    return logLevels.filter((item) =>
+    return availableLevels.filter((item) =>
       item.label.toLowerCase().includes(searchValue.toLowerCase())
     );
-  }, [searchValue]);
+  }, [searchValue, availableLevels]);
 
   return (
     <SelectProvider value={values("levels")} setValue={handleChange} virtualFocus={true}>
@@ -137,7 +148,7 @@ function LevelDropdown({
   );
 }
 
-function AppliedLevelFilter() {
+function AppliedLevelFilter({ showDebug = false }: { showDebug?: boolean }) {
   const { values, del } = useSearchParams();
   const levels = values("levels");
 
@@ -162,6 +173,7 @@ function AppliedLevelFilter() {
           }
           searchValue={search}
           clearSearchValue={() => setSearch("")}
+          showDebug={showDebug}
         />
       )}
     </FilterMenuProvider>

apps/webapp/app/components/logs/LogsSearchInput.tsx

@@ -1,14 +1,10 @@
 import { MagnifyingGlassIcon, XMarkIcon } from "@heroicons/react/20/solid";
 import { useNavigate } from "@remix-run/react";
 import { useCallback, useEffect, useRef, useState } from "react";
-import { AISparkleIcon } from "~/assets/icons/AISparkleIcon";
 import { Input } from "~/components/primitives/Input";
 import { ShortcutKey } from "~/components/primitives/ShortcutKey";
 import { cn } from "~/utils/cn";
 import { useOptimisticLocation } from "~/hooks/useOptimisticLocation";
-import { AIFilterInput } from "~/components/runs/v3/AIFilterInput";
-
-type SearchMode = "ai" | "text";
 
 export function LogsSearchInput() {
   const location = useOptimisticLocation();
@@ -19,7 +15,6 @@ export function LogsSearchInput() {
   const searchParams = new URLSearchParams(location.search);
   const initialSearch = searchParams.get("search") ?? "";
 
-  const [mode, setMode] = useState<SearchMode>("text");
   const [text, setText] = useState(initialSearch);
   const [isFocused, setIsFocused] = useState(false);
 
@@ -54,81 +49,47 @@ export function LogsSearchInput() {
     navigate(`${location.pathname}?${params.toString()}`, { replace: true });
   }, [location.pathname, location.search, navigate]);
 
-  const toggleMode = useCallback(() => {
-    // Clear text search when switching modes
-    if (mode === "text" && text.trim()) {
-      handleClear();
-    }
-    setMode((prev) => (prev === "ai" ? "text" : "ai"));
-  }, [mode, text, handleClear]);
-
   return (
     <div className="flex items-center gap-1">
-      {/* Mode toggle button */}
-      <button
-        type="button"
-        onClick={toggleMode}
-        className={cn(
-          "flex size-6 items-center justify-center rounded border transition-colors",
-          mode === "ai"
-            ? "border-indigo-500/50 bg-indigo-500/10 text-indigo-400 hover:bg-indigo-500/20"
-            : "border-charcoal-700 bg-charcoal-750 text-text-dimmed hover:bg-charcoal-700 hover:text-text-bright"
-        )}
-        title={mode === "ai" ? "Switch to text search" : "Switch to AI search"}
-      >
-        {mode === "ai" ? (
-          <AISparkleIcon className="size-3.5" />
-        ) : (
-          <MagnifyingGlassIcon className="size-3.5" />
-        )}
-      </button>
-
-      {/* Show AI or text search based on mode */}
-      {mode === "ai" ? (
-        <AIFilterInput />
-      ) : (
-        <div className="flex items-center gap-1">
-          <div className="relative h-6 min-w-52">
-            <Input
-              type="text"
-              ref={inputRef}
-              variant="secondary-small"
-              placeholder="Search messages…"
-              value={text}
-              onChange={(e) => setText(e.target.value)}
-              fullWidth
-              className={cn(isFocused && "placeholder:text-text-dimmed/70")}
-              onKeyDown={(e) => {
-                if (e.key === "Enter") {
-                  e.preventDefault();
-                  handleSubmit();
-                }
-                if (e.key === "Escape") {
-                  e.currentTarget.blur();
-                }
-              }}
-              onFocus={() => setIsFocused(true)}
-              onBlur={() => setIsFocused(false)}
-              icon={<MagnifyingGlassIcon className="size-4" />}
-              accessory={
-                text.length > 0 ? (
-                  <ShortcutKey shortcut={{ key: "enter" }} variant="small" />
-                ) : undefined
-              }
-            />
-          </div>
+      <div className="relative h-6 min-w-52">
+        <Input
+          type="text"
+          ref={inputRef}
+          variant="secondary-small"
+          placeholder="Search logs…"
+          value={text}
+          onChange={(e) => setText(e.target.value)}
+          fullWidth
+          className={cn(isFocused && "placeholder:text-text-dimmed/70")}
+          onKeyDown={(e) => {
+            if (e.key === "Enter") {
+              e.preventDefault();
+              handleSubmit();
+            }
+            if (e.key === "Escape") {
+              e.currentTarget.blur();
+            }
+          }}
+          onFocus={() => setIsFocused(true)}
+          onBlur={() => setIsFocused(false)}
+          icon={<MagnifyingGlassIcon className="size-4" />}
+          accessory={
+            text.length > 0 ? (
+              <ShortcutKey shortcut={{ key: "enter" }} variant="small" />
+            ) : undefined
+          }
+        />
+      </div>
 
-          {text.length > 0 && (
-            <button
-              type="button"
-              onClick={handleClear}
-              className="flex size-6 items-center justify-center rounded text-text-dimmed hover:bg-charcoal-700 hover:text-text-bright"
-              title="Clear search"
-            >
-              <XMarkIcon className="size-4" />
-            </button>
-          )}
-        </div>
+      {text.length > 0 && (
+        <button
+          type="button"
+          onClick={handleClear}
+          className="flex size-6 items-center justify-center rounded text-text-dimmed hover:bg-charcoal-700 hover:text-text-bright"
+          title="Clear search"
+        >
+          <XMarkIcon className="size-4" />
+        </button>
       )}
     </div>
   );

apps/webapp/app/components/logs/LogsTable.tsx

@@ -12,7 +12,7 @@ import { v3RunSpanPath } from "~/utils/pathBuilder";
 import { DateTime } from "../primitives/DateTime";
 import { Paragraph } from "../primitives/Paragraph";
 import { Spinner } from "../primitives/Spinner";
-import { SimpleTooltip } from "../primitives/Tooltip";
+import { TruncatedCopyableValue } from "../primitives/TruncatedCopyableValue";
 import {
   Table,
   TableBlankRow,
@@ -209,21 +209,10 @@ export function LogsTable({
                   >
                     <DateTime date={log.startTime} />
                   </TableCell>
-                  <TableCell>
-                    <SimpleTooltip
-                      content="Jump to run"
-                      disableHoverableContent
-                      button={
-                        <Link
-                          to={runPath}
-                          className="flex items-center gap-1 text-blue-500 hover:text-blue-400"
-                        >
-                          {log.runId.slice(0, 12)}…
-                        </Link>
-                      }
-                    />
+                  <TableCell className="min-w-24">
+                    <TruncatedCopyableValue value={log.runId} />
                   </TableCell>
-                  <TableCell onClick={handleRowClick} hasAction>
+                  <TableCell className="min-w-32"  onClick={handleRowClick} hasAction>
                     <span className="font-mono text-xs">{log.taskIdentifier}</span>
                   </TableCell>
                   <TableCell onClick={handleRowClick} hasAction>

apps/webapp/app/components/logs/LogsTimePresets.tsx

@@ -42,6 +42,7 @@ export type LogsListOptions = {
   levels?: LogLevel[];
   // search
   search?: string;
+  includeDebugLogs?: boolean;
   // pagination
   direction?: Direction;
   cursor?: string;
@@ -155,6 +156,7 @@ export class LogsListPresenter {
       direction = "forward",
       cursor,
       pageSize = DEFAULT_PAGE_SIZE,
+      includeDebugLogs = true,
     }: LogsListOptions
   ) {
     // Get time values from raw values (including default period)
@@ -381,11 +383,16 @@ export class LogsListPresenter {
       queryBuilder.where("run_id IN {runIds: Array(String)}", { runIds });
     }
 
-    // Case-insensitive contains message search using ilike
+    // Case-insensitive search in message and status fields
     if (search && search.trim() !== "") {
-      queryBuilder.where("message ilike {searchPattern: String}", {
-        searchPattern: `%${search.trim()}%`,
-      });
+      const searchTerm = search.trim();
+      queryBuilder.where(
+        "(message ilike {searchPattern: String} OR status = {statusTerm: String})",
+        {
+          searchPattern: `%${searchTerm}%`,
+          statusTerm: searchTerm.toUpperCase(),
+        }
+      );
     }
 
     // Level filter (map display levels to ClickHouse kinds)
@@ -394,6 +401,22 @@ export class LogsListPresenter {
       queryBuilder.where("kind IN {kinds: Array(String)}", { kinds });
     }
 
+    // Exclude DEBUG logs if not included
+    if (includeDebugLogs === false) {
+      queryBuilder.where("kind NOT IN {debugKinds: Array(String)}", {
+        debugKinds: ["DEBUG_EVENT", "LOG_DEBUG"],
+      });
+    }
+
+    // Exclude TRACE logs with PARTIAL status
+    // const traceKinds = ["SPAN", "ANCESTOR_OVERRIDE", "SPAN_EVENT"];
+    // queryBuilder.where(
+    //   "NOT (kind IN {traceKinds: Array(String)} AND status = 'PARTIAL')",
+    //   { traceKinds }
+    // );
+    queryBuilder.where("NOT (kind = 'SPAN' AND status = 'PARTIAL')");
+
+
     // Cursor pagination
     const decodedCursor = cursor ? decodeCursor(cursor) : null;
     if (decodedCursor) {