fix(ui): move log severity off the row and onto the rail (#5112)

Co-authored-by: Claude Opus 5 (1M context) <noreply@anthropic.com>

Author: amir20

assets/auto-imports.d.ts

@@ -91,6 +91,7 @@ declare global {
   const hasIcon: typeof import('./utils/index').hasIcon
   const hasViewContext: typeof import('./composable/logs/viewContext').hasViewContext
   const hashCode: typeof import('./utils/index').hashCode
+  const highlightErrors: typeof import('./stores/settings').highlightErrors
   const highlightSubstringInHtml: typeof import('./utils/index').highlightSubstringInHtml
   const hourStyle: typeof import('./stores/settings').hourStyle
   const iconSlugForImage: typeof import('./utils/index').iconSlugForImage
@@ -628,6 +629,7 @@ declare module 'vue' {
     readonly hasIcon: UnwrapRef<typeof import('./utils/index')['hasIcon']>
     readonly hasViewContext: UnwrapRef<typeof import('./composable/logs/viewContext')['hasViewContext']>
     readonly hashCode: UnwrapRef<typeof import('./utils/index')['hashCode']>
+    readonly highlightErrors: UnwrapRef<typeof import('./stores/settings')['highlightErrors']>
     readonly hourStyle: UnwrapRef<typeof import('./stores/settings')['hourStyle']>
     readonly iconSlugForImage: UnwrapRef<typeof import('./utils/index')['iconSlugForImage']>
     readonly iconUrl: UnwrapRef<typeof import('./utils/index')['iconUrl']>

assets/components/logs/LogList.vue

@@ -1,5 +1,9 @@
 <template>
-  <ul class="group pt-4" :class="{ 'disable-wrap': !softWrap, [size]: true, compact }" data-logs>
+  <ul
+    class="group pt-4"
+    :class="{ 'disable-wrap': !softWrap, [size]: true, compact, 'highlight-errors': highlightErrors }"
+    data-logs
+  >
     <li
       v-for="item in messages"
       ref="list"
@@ -83,37 +87,35 @@ ul {
     }
 
     /* Written long-hand rather than as odd:/hover: utilities because the order
-       below is the whole point: hover beats the zebra, and a level tint beats
-       both, with its own (stronger) hover on top. */
+       below is the whole point: hover has to beat the zebra, and the error tint
+       has to beat both. */
     &:nth-child(odd) {
-      background-color: color-mix(in oklab, var(--color-base-content) 4%, transparent);
+      background-color: color-mix(in oklab, var(--color-base-content) 2.5%, transparent);
     }
 
     &:hover {
       background-color: color-mix(in oklab, var(--color-base-content) 8%, transparent);
     }
 
+    &.log-permalink-target {
+      @apply bg-secondary/15;
+      animation: log-permalink-pulse 1.4s ease-out;
+    }
+  }
+
+  /* Severity primarily rides on the level rail in LogLevel.vue, so this is a
+     hint rather than the signal, and warn does not get one at all: an orange
+     wash on a routine retry line was the noisiest thing in the stream. Off by
+     choice for anyone who wants the field completely flat. */
+  &.highlight-errors > li {
     &[data-log-level="error"],
     &[data-log-level="fatal"] {
-      background-color: color-mix(in oklab, var(--color-red) 9%, transparent);
+      background-color: color-mix(in oklab, var(--color-red) 5%, transparent);
     }
 
     &[data-log-level="error"]:hover,
     &[data-log-level="fatal"]:hover {
-      background-color: color-mix(in oklab, var(--color-red) 15%, transparent);
-    }
-
-    &[data-log-level="warn"] {
-      background-color: color-mix(in oklab, var(--color-orange) 8%, transparent);
-    }
-
-    &[data-log-level="warn"]:hover {
-      background-color: color-mix(in oklab, var(--color-orange) 14%, transparent);
-    }
-
-    &.log-permalink-target {
-      @apply bg-secondary/15;
-      animation: log-permalink-pulse 1.4s ease-out;
+      background-color: color-mix(in oklab, var(--color-red) 12%, transparent);
     }
   }
 

assets/components/logs/__snapshots__/EventSource.spec.ts.snap

@@ -1,7 +1,7 @@
 // Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
 
 exports[`<ContainerEventSource /> > render html correctly > should render dates with 12 hour style 1`] = `
-"<ul data-v-8dc5da81="" class="group pt-4 medium" data-logs="" show-container-name="false">
+"<ul data-v-8dc5da81="" class="group pt-4 medium highlight-errors" data-logs="" show-container-name="false">
   <li data-v-8dc5da81="" id="1560336942509" data-time="1560336942509" class="group/entry">
     <div data-v-8dc5da81="" class="flex min-h-px flex-1 content-center justify-center"><span class="loading loading-bars loading-md text-primary m-2" style="display: none;"></span></div>
   </li>
@@ -56,7 +56,7 @@ exports[`<ContainerEventSource /> > render html correctly > should render dates
 `;
 
 exports[`<ContainerEventSource /> > render html correctly > should render dates with 24 hour style 1`] = `
-"<ul data-v-8dc5da81="" class="group pt-4 medium" data-logs="" show-container-name="false">
+"<ul data-v-8dc5da81="" class="group pt-4 medium highlight-errors" data-logs="" show-container-name="false">
   <li data-v-8dc5da81="" id="1560336942509" data-time="1560336942509" class="group/entry">
     <div data-v-8dc5da81="" class="flex min-h-px flex-1 content-center justify-center"><span class="loading loading-bars loading-md text-primary m-2" style="display: none;"></span></div>
   </li>
@@ -111,7 +111,7 @@ exports[`<ContainerEventSource /> > render html correctly > should render dates
 `;
 
 exports[`<ContainerEventSource /> > render html correctly > should render messages 1`] = `
-"<ul data-v-8dc5da81="" class="group pt-4 medium" data-logs="" show-container-name="false">
+"<ul data-v-8dc5da81="" class="group pt-4 medium highlight-errors" data-logs="" show-container-name="false">
   <li data-v-8dc5da81="" id="1560336942509" data-time="1560336942509" class="group/entry">
     <div data-v-8dc5da81="" class="flex min-h-px flex-1 content-center justify-center"><span class="loading loading-bars loading-md text-primary m-2" style="display: none;"></span></div>
   </li>

assets/components/logs/entries/LogLevel.vue

@@ -24,7 +24,7 @@
     <div
       :data-level="level"
       class="rounded-full"
-      :class="[position ? 'h-full w-[3px]' : 'size-[0.45em] min-h-1 min-w-1', { 'show-unknown': showUnknown }]"
+      :class="[rail ? 'h-full w-[3px]' : 'size-[0.45em] min-h-1 min-w-1', { 'show-unknown': showUnknown }]"
     ></div>
   </div>
 </template>
@@ -42,6 +42,11 @@ const {
   event?: MatchedEvent;
   showUnknown?: boolean;
 }>();
+
+// A single error line gets the rail a grouped entry gets rather than a 4px dot:
+// with the row background left neutral, this marker is the only thing carrying
+// severity, so it has to be visible from a scroll.
+const rail = computed(() => !!position || level === "error" || level === "fatal");
 </script>
 
 <style scoped>

assets/components/nav/HostMenu.vue

@@ -2,7 +2,7 @@
   <NavHeader :title="$t('label.hosts')" :back="selectedHost ? $t('label.hosts') : undefined" @back="setHost(null)">
     <template #title v-if="selectedHost">
       <HostIcon :type="selectedHost.type" class="text-base-content/50 size-4 shrink-0" />
-      <span class="truncate text-sm font-medium">{{ selectedHost.name }}</span>
+      <span class="truncate text-[0.9375rem] font-medium">{{ selectedHost.name }}</span>
     </template>
 
     <template #actions>

assets/components/nav/K8sMenu.vue

@@ -6,7 +6,7 @@
   >
     <template #title v-if="selectedNamespace && selectedNamespace !== 'all'">
       <ph:circles-four class="text-base-content/50 size-4 shrink-0" />
-      <span class="truncate text-sm font-medium">{{ selectedNamespace }}</span>
+      <span class="truncate text-[0.9375rem] font-medium">{{ selectedNamespace }}</span>
     </template>
 
     <template #actions>

assets/components/nav/NavHeader.vue

@@ -6,7 +6,7 @@
 
     <div class="flex min-w-0 flex-1 items-center gap-1.5">
       <slot name="title">
-        <span class="truncate text-sm font-medium">{{ title }}</span>
+        <span class="truncate text-[0.9375rem] font-medium">{{ title }}</span>
       </slot>
     </div>
 

assets/components/nav/NavItem.vue

@@ -48,7 +48,7 @@ const bindings = computed(() => (to ? { to, activeClass: "is-active" } : { type:
 @reference "@/main.css";
 
 .nav-item {
-  @apply text-base-content/85 hover:text-base-content hover:bg-base-content/8 relative flex h-8 w-full cursor-pointer items-center gap-2 rounded-md px-2 text-left text-sm transition-colors;
+  @apply text-base-content/85 hover:text-base-content hover:bg-base-content/8 relative flex h-8 w-full cursor-pointer items-center gap-2 rounded-md px-2 text-left text-[0.9375rem] transition-colors;
 }
 
 /* Tinted rather than filled: a solid primary block on the selected row shouted

assets/pages/settings.vue

@@ -111,6 +111,13 @@
           <SettingRow tag="label" :label="$t('settings.soft-wrap')" :description="$t('settings.soft-wrap-desc')">
             <input type="checkbox" class="toggle toggle-primary toggle-sm" v-model="softWrap" />
           </SettingRow>
+          <SettingRow
+            tag="label"
+            :label="$t('settings.highlight-errors')"
+            :description="$t('settings.highlight-errors-desc')"
+          >
+            <input type="checkbox" class="toggle toggle-primary toggle-sm" v-model="highlightErrors" />
+          </SettingRow>
           <SettingRow :label="$t('settings.datetime-format')" :description="$t('settings.datetime-format-desc')">
             <DropdownMenu
               v-model="dateLocale"
@@ -264,6 +271,7 @@ import {
   groupContainers,
   showImageUpdateAlert,
   showAppIcons,
+  highlightErrors,
 } from "@/stores/settings";
 
 import { availableLocales, i18n } from "@/modules/i18n";

assets/stores/settings.ts

@@ -20,6 +20,7 @@ export type Settings = {
   groupContainers: "always" | "at-least-2" | "never";
   showImageUpdateAlert: boolean;
   showAppIcons: boolean;
+  highlightErrors: boolean;
   terminalFontSize: number;
 };
 export const DEFAULT_SETTINGS: Settings = {
@@ -42,6 +43,7 @@ export const DEFAULT_SETTINGS: Settings = {
   groupContainers: "at-least-2",
   showImageUpdateAlert: false,
   showAppIcons: true,
+  highlightErrors: true,
   terminalFontSize: 13,
 };
 
@@ -75,5 +77,6 @@ export const {
   automaticRedirect,
   groupContainers,
   showAppIcons,
+  highlightErrors,
   terminalFontSize,
 } = toRefs(settings.value);