fixes

otel-ui/src/lib/routes.ts

@@ -57,7 +57,10 @@ export function useSubRoute(): {
   go: (segments: string[], options?: { replace?: boolean }) => void
 } {
   const [location, navigate] = useLocation()
-  const { base, rest } = splitPath(location)
+  const split = splitPath(location)
+  // "/" is the default (issues) tab; building "//<id>" from it would be parsed as a host.
+  const base = split.base === "/" ? "/issues" : split.base
+  const rest = split.rest
   const key = rest.join("/")
   // Stable identity per URL so effects can depend on `segments` directly.
   // eslint-disable-next-line react-hooks/exhaustive-deps

otel-ui/src/lib/types.ts

@@ -178,6 +178,8 @@ export interface IssueSample {
   httpRoute?: string;
   httpStatus?: number;
   userAgent?: string;
+  /** Client class derived from userAgent by the backend (see lib/ua-class.ts). */
+  uaClass?: string;
   sourceIp?: string;
   release?: string;
   environment?: string;

otel-ui/src/lib/ua-class.ts

@@ -0,0 +1,19 @@
+// Client classes derived server-side from the User-Agent (internal/uaclass in
+// the Go backend owns the crawler list; this is only the display side).
+// A UA is self-declared, so a class means "says it is", not "is".
+export const UA_CLASSES: { value: string; label: string }[] = [
+  { value: "ai_crawler", label: "AI crawler" },
+  { value: "ai_agent", label: "AI agent" },
+  { value: "search_crawler", label: "Search crawler" },
+  { value: "seo_crawler", label: "SEO crawler" },
+  { value: "monitor", label: "Monitor" },
+  { value: "scan_tool", label: "Scan tool" },
+  { value: "other_bot", label: "Other bot" },
+  { value: "library", label: "HTTP library" },
+  { value: "browser", label: "Browser" },
+  { value: "unknown", label: "Unknown UA" },
+  { value: "none", label: "No UA" },
+]
+
+export const uaClassLabel = (value?: string): string =>
+  UA_CLASSES.find((c) => c.value === value)?.label ?? value ?? ""