Dustin4444 · pull · May 8, 2026 · May 8, 2026
diff --git a/apps/webapp/app/components/MachineLabelCombo.tsx b/apps/webapp/app/components/MachineLabelCombo.tsx
@@ -31,7 +31,9 @@ export function MachineLabel({
   className?: string;
 }) {
   return (
-    <span className={cn("text-text-dimmed", className)}>{formatMachinePresetName(preset)}</span>
+    <span className={cn("text-text-dimmed group-hover/table-row:text-text-bright", className)}>
+      {formatMachinePresetName(preset)}
+    </span>
   );
 }
 

diff --git a/apps/webapp/app/components/logs/LogsLevelFilter.tsx b/apps/webapp/app/components/logs/LogsLevelFilter.tsx
@@ -53,7 +53,7 @@ export function LogsLevelFilter() {
   const hasLevels = selectedLevels.length > 0 && selectedLevels.some((v) => v !== "");
 
   if (hasLevels) {
-    return <AppliedLevelFilter/>;
+    return <AppliedLevelFilter />;
   }
 
   return (
@@ -64,19 +64,16 @@ export function LogsLevelFilter() {
           variant="secondary/small"
           shortcut={shortcut}
           tooltipTitle="Filter by level"
+          className="pl-1.5"
         >
-          Level
+          <span className="ml-1">Level</span>
         </SelectTrigger>
       }
     />
   );
 }
 
-function LevelDropdown({
-  trigger,
-}: {
-  trigger: ReactNode;
-}) {
+function LevelDropdown({ trigger }: { trigger: ReactNode }) {
   const { values, replace } = useSearchParams();
 
   const handleChange = (values: string[]) => {

diff --git a/apps/webapp/app/components/logs/LogsRunIdFilter.tsx b/apps/webapp/app/components/logs/LogsRunIdFilter.tsx
@@ -6,11 +6,7 @@ import { Button } from "~/components/primitives/Buttons";
 import { FormError } from "~/components/primitives/FormError";
 import { Input } from "~/components/primitives/Input";
 import { Label } from "~/components/primitives/Label";
-import {
-  SelectPopover,
-  SelectProvider,
-  SelectTrigger,
-} from "~/components/primitives/Select";
+import { SelectPopover, SelectProvider, SelectTrigger } from "~/components/primitives/Select";
 import { useSearchParams } from "~/hooks/useSearchParam";
 import { FilterMenuProvider } from "~/components/runs/v3/SharedFilters";
 
@@ -34,8 +30,9 @@ export function LogsRunIdFilter() {
               variant="secondary/small"
               shortcut={shortcut}
               tooltipTitle="Filter by run ID"
+              className="pl-1.5"
             >
-              Run ID
+              <span className="ml-1">Run ID</span>
             </SelectTrigger>
           }
           clearSearchValue={() => setSearch("")}

diff --git a/apps/webapp/app/components/logs/LogsTaskFilter.tsx b/apps/webapp/app/components/logs/LogsTaskFilter.tsx
@@ -45,8 +45,9 @@ export function LogsTaskFilter({ possibleTasks }: LogsTaskFilterProps) {
                 variant="secondary/small"
                 shortcut={shortcut}
                 tooltipTitle="Filter by task"
+                className="pl-1.5"
               >
-                <span className="ml-0.5">Tasks</span>
+                <span className="ml-1">Tasks</span>
               </SelectTrigger>
             }
             searchValue={search}
@@ -133,8 +134,9 @@ function TasksDropdown({
             .filter((item) => item.isInLatestDeployment)
             .map((item) => (
               <SelectItem
-                key={item.slug}
+                key={`${item.triggerSource}-${item.slug}`}
                 value={item.slug}
+                className="text-text-bright"
                 icon={
                   <TaskTriggerSourceIcon source={item.triggerSource} className="size-4 flex-none" />
                 }
@@ -149,8 +151,9 @@ function TasksDropdown({
                 .filter((item) => !item.isInLatestDeployment)
                 .map((item) => (
                   <SelectItem
-                    key={item.slug}
+                    key={`${item.triggerSource}-${item.slug}`}
                     value={item.slug}
+                    className="text-text-bright"
                     icon={
                       <span className="opacity-50">
                         <TaskTriggerSourceIcon

diff --git a/apps/webapp/app/components/logs/LogsVersionFilter.tsx b/apps/webapp/app/components/logs/LogsVersionFilter.tsx
@@ -22,8 +22,9 @@ export function LogsVersionFilter() {
                 variant="secondary/small"
                 shortcut={shortcut}
                 tooltipTitle="Filter by version"
+                className="pl-1.5"
               >
-                <span className="ml-0.5">Versions</span>
+                <span className="ml-1">Versions</span>
               </SelectTrigger>
             }
             searchValue={search}

diff --git a/apps/webapp/app/components/metrics/ModelsFilter.tsx b/apps/webapp/app/components/metrics/ModelsFilter.tsx
@@ -16,7 +16,7 @@ import { tablerIcons } from "~/utils/tablerIcons";
 import tablerSpritePath from "~/components/primitives/tabler-sprite.svg";
 import { AnthropicLogoIcon } from "~/assets/icons/AnthropicLogoIcon";
 
-const shortcut = { key: "l" };
+const shortcut = { key: "m" };
 
 export type ModelOption = {
   model: string;
@@ -38,19 +38,19 @@ function modelIcon(system: string, model: string): ReactNode {
 
   // Special case: Anthropic uses a custom SVG icon
   if (provider === "anthropic") {
-    return <AnthropicLogoIcon className="size-4 shrink-0" />;
+    return <AnthropicLogoIcon className="size-4 shrink-0 text-text-dimmed" />;
   }
 
   const iconName = `tabler-brand-${provider}`;
   if (tablerIcons.has(iconName)) {
     return (
-      <svg className="size-4 shrink-0 stroke-[1.5]">
+      <svg className="size-4 shrink-0 stroke-[1.5] text-text-dimmed">
         <use xlinkHref={`${tablerSpritePath}#${iconName}`} />
       </svg>
     );
   }
 
-  return <CubeIcon className="size-4 shrink-0" />;
+  return <CubeIcon className="size-4 shrink-0 text-text-dimmed" />;
 }
 
 export function ModelsFilter({ possibleModels }: ModelsFilterProps) {
@@ -68,8 +68,9 @@ export function ModelsFilter({ possibleModels }: ModelsFilterProps) {
                 variant="secondary/small"
                 shortcut={shortcut}
                 tooltipTitle="Filter by model"
+                className="pl-1.5"
               >
-                <span className="ml-0.5">Models</span>
+                <span className="ml-1">Models</span>
               </SelectTrigger>
             }
             searchValue={search}
@@ -147,7 +148,7 @@ function ModelsDropdown({
         <ComboBox placeholder="Filter by model..." value={searchValue} />
         <SelectList>
           {filtered.map((m) => (
-            <SelectItem key={m.model} value={m.model} icon={modelIcon(m.system, m.model)}>
+            <SelectItem key={m.model} value={m.model} className="text-text-bright" icon={modelIcon(m.system, m.model)}>
               {m.model}
             </SelectItem>
           ))}

diff --git a/apps/webapp/app/components/metrics/OperationsFilter.tsx b/apps/webapp/app/components/metrics/OperationsFilter.tsx
@@ -13,7 +13,7 @@ import {
 import { useSearchParams } from "~/hooks/useSearchParam";
 import { appliedSummary, FilterMenuProvider } from "~/components/runs/v3/SharedFilters";
 
-const shortcut = { key: "n" };
+const shortcut = { key: "o" };
 
 interface OperationsFilterProps {
   possibleOperations: string[];
@@ -45,8 +45,9 @@ export function OperationsFilter({ possibleOperations }: OperationsFilterProps)
                 variant="secondary/small"
                 shortcut={shortcut}
                 tooltipTitle="Filter by operation"
+                className="pl-1.5"
               >
-                <span className="ml-0.5">Operations</span>
+                <span className="ml-1">Operations</span>
               </SelectTrigger>
             }
             searchValue={search}
@@ -125,7 +126,7 @@ function OperationsDropdown({
         <ComboBox placeholder="Filter by operation..." value={searchValue} />
         <SelectList>
           {filtered.map((op) => (
-            <SelectItem key={op} value={op} icon={<CommandLineIcon className="size-4" />}>
+            <SelectItem key={op} value={op} className="text-text-bright" icon={<CommandLineIcon className="size-4 text-text-dimmed" />}>
               {formatOperation(op)}
             </SelectItem>
           ))}

diff --git a/apps/webapp/app/components/metrics/PromptsFilter.tsx b/apps/webapp/app/components/metrics/PromptsFilter.tsx
@@ -34,8 +34,9 @@ export function PromptsFilter({ possiblePrompts }: PromptsFilterProps) {
                 variant="secondary/small"
                 shortcut={shortcut}
                 tooltipTitle="Filter by prompt"
+                className="pl-1.5"
               >
-                <span className="ml-0.5">Prompts</span>
+                <span className="ml-1">Prompts</span>
               </SelectTrigger>
             }
             searchValue={search}
@@ -113,7 +114,7 @@ function PromptsDropdown({
         <ComboBox placeholder="Filter by prompt..." value={searchValue} />
         <SelectList>
           {filtered.map((slug) => (
-            <SelectItem key={slug} value={slug} icon={<DocumentTextIcon className="size-4" />}>
+            <SelectItem key={slug} value={slug} className="text-text-bright" icon={<DocumentTextIcon className="size-4 text-text-dimmed" />}>
               {slug}
             </SelectItem>
           ))}

diff --git a/apps/webapp/app/components/metrics/ProvidersFilter.tsx b/apps/webapp/app/components/metrics/ProvidersFilter.tsx
@@ -34,8 +34,9 @@ export function ProvidersFilter({ possibleProviders }: ProvidersFilterProps) {
                 variant="secondary/small"
                 shortcut={shortcut}
                 tooltipTitle="Filter by provider"
+                className="pl-1.5"
               >
-                <span className="ml-0.5">Providers</span>
+                <span className="ml-1">Providers</span>
               </SelectTrigger>
             }
             searchValue={search}
@@ -111,7 +112,7 @@ function ProvidersDropdown({
         <ComboBox placeholder="Filter by provider..." value={searchValue} />
         <SelectList>
           {filtered.map((provider) => (
-            <SelectItem key={provider} value={provider} icon={<ServerIcon className="size-4" />}>
+            <SelectItem key={provider} value={provider} className="text-text-bright" icon={<ServerIcon className="size-4 text-text-dimmed" />}>
               {provider}
             </SelectItem>
           ))}

diff --git a/apps/webapp/app/components/metrics/QueuesFilter.tsx b/apps/webapp/app/components/metrics/QueuesFilter.tsx
@@ -39,6 +39,7 @@ export function QueuesFilter() {
                 variant="secondary/small"
                 shortcut={shortcut}
                 tooltipTitle="Filter by queue"
+                className="pl-1.5"
               >
                 <span className="ml-1">Queues</span>
               </SelectTrigger>
@@ -190,6 +191,7 @@ function QueuesDropdown({
                 <SelectItem
                   key={queue.value}
                   value={queue.value}
+                  className="text-text-bright"
                   icon={
                     queue.type === "task" ? (
                       <TaskIcon className="size-4 shrink-0 text-blue-500" />