Create AI/LLM metrics dashboard, with support for a model filter

Author: ericallam

apps/webapp/app/components/code/QueryResultsChart.tsx

@@ -1217,6 +1217,11 @@ function createYAxisFormatter(
   if (format === "costInDollars" || format === "cost") {
     return (value: number): string => {
       const dollars = format === "cost" ? value / 100 : value;
+      if (dollars === 0) return "$0";
+      if (Math.abs(dollars) >= 1000) return `$${(dollars / 1000).toFixed(1)}K`;
+      if (Math.abs(dollars) >= 1) return `$${dollars.toFixed(2)}`;
+      if (Math.abs(dollars) >= 0.01) return `$${dollars.toFixed(4)}`;
+      if (Math.abs(dollars) >= 0.0001) return `$${dollars.toFixed(6)}`;
       return formatCurrencyAccurate(dollars);
     };
   }

apps/webapp/app/components/metrics/ModelsFilter.tsx

@@ -0,0 +1,159 @@
+import { CubeIcon } from "@heroicons/react/20/solid";
+import * as Ariakit from "@ariakit/react";
+import { type ReactNode, useMemo } from "react";
+import { AppliedFilter } from "~/components/primitives/AppliedFilter";
+import {
+  ComboBox,
+  SelectItem,
+  SelectList,
+  SelectPopover,
+  SelectProvider,
+  SelectTrigger,
+} from "~/components/primitives/Select";
+import { useSearchParams } from "~/hooks/useSearchParam";
+import { appliedSummary, FilterMenuProvider } from "~/components/runs/v3/SharedFilters";
+import { tablerIcons } from "~/utils/tablerIcons";
+import tablerSpritePath from "~/components/primitives/tabler-sprite.svg";
+import { AnthropicLogoIcon } from "~/assets/icons/AnthropicLogoIcon";
+
+const shortcut = { key: "m" };
+
+export type ModelOption = {
+  model: string;
+  system: string;
+};
+
+interface ModelsFilterProps {
+  possibleModels: ModelOption[];
+}
+
+function modelIcon(system: string, model: string): ReactNode {
+  // For gateway/openrouter, derive provider from model prefix
+  let provider = system.split(".")[0];
+  if (provider === "gateway" || provider === "openrouter") {
+    if (model.includes("/")) {
+      provider = model.split("/")[0].replace(/-/g, "");
+    }
+  }
+
+  // Special case: Anthropic uses a custom SVG icon
+  if (provider === "anthropic") {
+    return <AnthropicLogoIcon className="size-4 shrink-0" />;
+  }
+
+  const iconName = `tabler-brand-${provider}`;
+  if (tablerIcons.has(iconName)) {
+    return (
+      <svg className="size-4 shrink-0 stroke-[1.5]">
+        <use xlinkHref={`${tablerSpritePath}#${iconName}`} />
+      </svg>
+    );
+  }
+
+  return <CubeIcon className="size-4 shrink-0" />;
+}
+
+export function ModelsFilter({ possibleModels }: ModelsFilterProps) {
+  const { values, replace, del } = useSearchParams();
+  const selectedModels = values("models");
+
+  if (selectedModels.length === 0 || selectedModels.every((v) => v === "")) {
+    return (
+      <FilterMenuProvider>
+        {(search, setSearch) => (
+          <ModelsDropdown
+            trigger={
+              <SelectTrigger
+                icon={<CubeIcon className="size-4" />}
+                variant="secondary/small"
+                shortcut={shortcut}
+                tooltipTitle="Filter by model"
+              >
+                <span className="ml-0.5">Models</span>
+              </SelectTrigger>
+            }
+            searchValue={search}
+            clearSearchValue={() => setSearch("")}
+            possibleModels={possibleModels}
+          />
+        )}
+      </FilterMenuProvider>
+    );
+  }
+
+  return (
+    <FilterMenuProvider>
+      {(search, setSearch) => (
+        <ModelsDropdown
+          trigger={
+            <Ariakit.Select render={<div className="group cursor-pointer focus-custom" />}>
+              <AppliedFilter
+                label="Model"
+                icon={<CubeIcon className="size-4" />}
+                value={appliedSummary(selectedModels)}
+                onRemove={() => del(["models"])}
+                variant="secondary/small"
+              />
+            </Ariakit.Select>
+          }
+          searchValue={search}
+          clearSearchValue={() => setSearch("")}
+          possibleModels={possibleModels}
+        />
+      )}
+    </FilterMenuProvider>
+  );
+}
+
+function ModelsDropdown({
+  trigger,
+  clearSearchValue,
+  searchValue,
+  onClose,
+  possibleModels,
+}: {
+  trigger: ReactNode;
+  clearSearchValue: () => void;
+  searchValue: string;
+  onClose?: () => void;
+  possibleModels: ModelOption[];
+}) {
+  const { values, replace } = useSearchParams();
+
+  const handleChange = (values: string[]) => {
+    clearSearchValue();
+    replace({ models: values });
+  };
+
+  const filtered = useMemo(() => {
+    return possibleModels.filter((m) => {
+      return m.model?.toLowerCase().includes(searchValue.toLowerCase());
+    });
+  }, [searchValue, possibleModels]);
+
+  return (
+    <SelectProvider value={values("models")} setValue={handleChange} virtualFocus={true}>
+      {trigger}
+      <SelectPopover
+        className="min-w-0 max-w-[min(360px,var(--popover-available-width))]"
+        hideOnEscape={() => {
+          if (onClose) {
+            onClose();
+            return false;
+          }
+          return true;
+        }}
+      >
+        <ComboBox placeholder="Filter by model..." value={searchValue} />
+        <SelectList>
+          {filtered.map((m) => (
+            <SelectItem key={m.model} value={m.model} icon={modelIcon(m.system, m.model)}>
+              {m.model}
+            </SelectItem>
+          ))}
+          {filtered.length === 0 && <SelectItem disabled>No models found</SelectItem>}
+        </SelectList>
+      </SelectPopover>
+    </SelectProvider>
+  );
+}