Added Trace type

Author: matt-aitken

apps/webapp/app/components/LogLevelTooltipInfo.tsx

@@ -11,6 +11,14 @@ export function LogLevelTooltipInfo() {
           Structured logging helps you debug and monitor your tasks.
         </Paragraph>
       </div>
+      <div>
+        <div className="mb-1">
+          <LogLevel level="TRACE" />
+        </div>
+        <Paragraph variant="small" className="text-text-dimmed">
+          Traces and spans representing the execution flow of your tasks.
+        </Paragraph>
+      </div>
       <div>
         <div className="mb-1">
           <LogLevel level="INFO" />

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

@@ -16,6 +16,7 @@ import type { LogLevel } from "~/presenters/v3/LogsListPresenter.server";
 import { cn } from "~/utils/cn";
 
 const allLogLevels: { level: LogLevel; label: string; color: string }[] = [
+  { level: "TRACE", label: "Trace", color: "text-purple-400" },
   { level: "INFO", label: "Info", color: "text-blue-400" },
   { level: "WARN", label: "Warning", color: "text-warning" },
   { level: "ERROR", label: "Error", color: "text-error" },
@@ -33,6 +34,8 @@ function getLevelBadgeColor(level: LogLevel): string {
       return "text-error bg-error/10 border-error/20";
     case "WARN":
       return "text-warning bg-warning/10 border-warning/20";
+    case "TRACE":
+      return "text-purple-400 bg-purple-500/10 border-purple-500/20";
     case "DEBUG":
       return "text-charcoal-400 bg-charcoal-700 border-charcoal-600";
     case "INFO":

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

@@ -49,6 +49,8 @@ function getLevelBoxShadow(level: LogEntry["level"]): string {
       return "inset 2px 0 0 0 rgb(234, 179, 8)";
     case "INFO":
       return "inset 2px 0 0 0 rgb(59, 130, 246)";
+    case "TRACE":
+      return "inset 2px 0 0 0 rgb(168, 85, 247)";
     case "DEBUG":
     default:
       return "none";

apps/webapp/app/presenters/v3/LogsListPresenter.server.ts

@@ -108,10 +108,12 @@ function decodeCursor(cursor: string): LogCursor | null {
 // Convert display level to ClickHouse kinds and statuses
 function levelToKindsAndStatuses(level: LogLevel): { kinds?: string[]; statuses?: string[] } {
   switch (level) {
+    case "TRACE":
+      return { kinds: ["SPAN"] };
     case "DEBUG":
       return { kinds: ["LOG_DEBUG"] };
     case "INFO":
-      return { kinds: ["LOG_INFO", "LOG_LOG", "SPAN"] };
+      return { kinds: ["LOG_INFO", "LOG_LOG"] };
     case "WARN":
       return { kinds: ["LOG_WARN"] };
     case "ERROR":

apps/webapp/app/routes/_app.orgs.$organizationSlug.projects.$projectParam.env.$envParam.logs/route.tsx

@@ -40,7 +40,7 @@ import { Button } from "~/components/primitives/Buttons";
 import { FEATURE_FLAG, validateFeatureFlagValue } from "~/v3/featureFlags.server";
 
 // Valid log levels for filtering
-const validLevels: LogLevel[] = ["DEBUG", "INFO", "WARN", "ERROR"];
+const validLevels: LogLevel[] = ["TRACE", "DEBUG", "INFO", "WARN", "ERROR"];
 
 function parseLevelsFromUrl(url: URL): LogLevel[] | undefined {
   const levelParams = url.searchParams.getAll("levels").filter((v) => v.length > 0);

apps/webapp/app/routes/resources.orgs.$organizationSlug.projects.$projectParam.env.$envParam.logs.ts

@@ -10,7 +10,7 @@ import { clickhouseClient } from "~/services/clickhouseInstance.server";
 import { getCurrentPlan } from "~/services/platform.v3.server";
 
 // Valid log levels for filtering
-const validLevels: LogLevel[] = ["DEBUG", "INFO", "WARN", "ERROR"];
+const validLevels: LogLevel[] = ["TRACE", "DEBUG", "INFO", "WARN", "ERROR"];
 
 function parseLevelsFromUrl(url: URL): LogLevel[] | undefined {
   const levelParams = url.searchParams.getAll("levels").filter((v) => v.length > 0);

apps/webapp/app/utils/logUtils.ts

@@ -1,10 +1,10 @@
 import { createElement, Fragment, type ReactNode } from "react";
 import { z } from "zod";
 
-export const LogLevelSchema = z.enum(["DEBUG", "INFO", "WARN", "ERROR"]);
+export const LogLevelSchema = z.enum(["TRACE", "DEBUG", "INFO", "WARN", "ERROR"]);
 export type LogLevel = z.infer<typeof LogLevelSchema>;
 
-export const validLogLevels: LogLevel[] = ["DEBUG", "INFO", "WARN", "ERROR",];
+export const validLogLevels: LogLevel[] = ["TRACE", "DEBUG", "INFO", "WARN", "ERROR"];
 
 // Default styles for search highlighting
 const DEFAULT_HIGHLIGHT_STYLES: React.CSSProperties = {
@@ -87,6 +87,7 @@ export function kindToLevel(kind: string, status: string): LogLevel {
     case "LOG_LOG":
       return "INFO"; // Changed from "LOG"
     case "SPAN":
+      return "TRACE";
     case "ANCESTOR_OVERRIDE":
     case "SPAN_EVENT":
     default:
@@ -101,6 +102,8 @@ export function getLevelColor(level: LogLevel): string {
       return "text-error bg-error/10 border-error/20";
     case "WARN":
       return "text-warning bg-warning/10 border-warning/20";
+    case "TRACE":
+      return "text-purple-400 bg-purple-500/10 border-purple-500/20";
     case "DEBUG":
       return "text-charcoal-400 bg-charcoal-700 border-charcoal-600";
     case "INFO":