feat: add telemetry page displaying telemetry logs grouped by tool calls (#1112)

This adds a telemetry page for viewing logs grouped by tool call. This
is the initial MVP - there are a lot of design improvements we can make
in the future, but I'd rather ship this and iterate over time.

## Screenshots

<img width="1276" height="1269" alt="image"
src="https://github.com/user-attachments/assets/a0857643-ef81-4315-8235-ec6b886ba352"
/>
<img width="1244" height="586" alt="image"
src="https://github.com/user-attachments/assets/f3bf5609-3328-4a19-b9fa-ee037083cd7b"
/>
<img width="1230" height="347" alt="image"
src="https://github.com/user-attachments/assets/23fbf1fe-548b-4cf6-9a1c-267d041d4fba"
/>

Author: tgmendes

.changeset/thirty-zebras-fly.md

@@ -0,0 +1,5 @@
+---
+"dashboard": minor
+---
+
+Add a new telemetry page to view logs grouped by tool calls

client/dashboard/src/components/app-sidebar.tsx

@@ -87,6 +87,14 @@ export function AppSidebar({ ...props }: React.ComponentProps<typeof Sidebar>) {
                   active={routes.logs.active}
                 />
               </SidebarMenuItem>
+              <SidebarMenuItem>
+                <NavButton
+                  title="Telemetry"
+                  Icon={routes.telemetry.Icon}
+                  href={routes.telemetry.href()}
+                  active={routes.telemetry.active}
+                />
+              </SidebarMenuItem>
               <SidebarMenuItem>
                 <NavButton
                   title="Metrics"

client/dashboard/src/pages/telemetry/StatusBadge.tsx

@@ -0,0 +1,128 @@
+import { parseGramUrn } from "./utils";
+
+interface StatusBadgeProps {
+  isSuccess: boolean;
+  httpStatusCode?: number;
+  severity?: string;
+}
+
+export function StatusBadge({
+  isSuccess,
+  httpStatusCode,
+  severity,
+}: StatusBadgeProps) {
+  // For log entries with severity
+  if (severity) {
+    return <SeverityBadge severity={severity} />;
+  }
+
+  // For trace entries with HTTP status
+  if (httpStatusCode) {
+    const is4xx = httpStatusCode >= 400 && httpStatusCode < 500;
+    const is5xx = httpStatusCode >= 500;
+
+    if (is5xx) {
+      return (
+        <span className="px-1.5 py-0.5 text-[10px] font-medium rounded bg-destructive-softest text-destructive-default">
+          {httpStatusCode}
+        </span>
+      );
+    }
+    if (is4xx) {
+      return (
+        <span className="px-1.5 py-0.5 text-[10px] font-medium rounded bg-warning-softest text-warning-default">
+          {httpStatusCode}
+        </span>
+      );
+    }
+    return (
+      <span className="px-1.5 py-0.5 text-[10px] font-medium rounded bg-success-softest text-success-default">
+        {httpStatusCode}
+      </span>
+    );
+  }
+
+  // Default OK/ERROR badge
+  if (isSuccess) {
+    return (
+      <span className="px-1.5 py-0.5 text-[10px] font-medium rounded bg-success-softest text-success-default">
+        OK
+      </span>
+    );
+  }
+
+  return (
+    <span className="px-1.5 py-0.5 text-[10px] font-medium rounded bg-destructive-softest text-destructive-default">
+      ERROR
+    </span>
+  );
+}
+
+function SeverityBadge({ severity }: { severity: string }) {
+  const upper = severity.toUpperCase();
+
+  switch (upper) {
+    case "ERROR":
+    case "FATAL":
+      return (
+        <span className="px-1.5 py-0.5 text-[10px] font-medium rounded bg-destructive-softest text-destructive-default">
+          {upper}
+        </span>
+      );
+    case "WARN":
+    case "WARNING":
+      return (
+        <span className="px-1.5 py-0.5 text-[10px] font-medium rounded bg-warning-softest text-warning-default">
+          WARN
+        </span>
+      );
+    case "DEBUG":
+      return (
+        <span className="px-1.5 py-0.5 text-[10px] font-medium rounded bg-surface-secondary-default text-muted-foreground">
+          DEBUG
+        </span>
+      );
+    case "INFO":
+    default:
+      return (
+        <span className="px-1.5 py-0.5 text-[10px] font-medium rounded bg-primary-softest text-primary-default">
+          INFO
+        </span>
+      );
+  }
+}
+
+interface SpanTypeBadgeProps {
+  urn: string;
+}
+
+export function SpanTypeBadge({ urn }: SpanTypeBadgeProps) {
+  const { kind } = parseGramUrn(urn);
+
+  switch (kind) {
+    case "http":
+      return (
+        <span className="px-1.5 py-0.5 text-[10px] font-medium rounded bg-cyan-500/20 text-cyan-400 uppercase">
+          HTTP
+        </span>
+      );
+    case "function":
+      return (
+        <span className="px-1.5 py-0.5 text-[10px] font-medium rounded bg-purple-500/20 text-purple-400 uppercase">
+          FN
+        </span>
+      );
+    case "prompt":
+      return (
+        <span className="px-1.5 py-0.5 text-[10px] font-medium rounded bg-amber-500/20 text-amber-400 uppercase">
+          PROMPT
+        </span>
+      );
+    default:
+      return (
+        <span className="px-1.5 py-0.5 text-[10px] font-medium rounded bg-surface-secondary-default text-muted-foreground uppercase">
+          {kind || "SPAN"}
+        </span>
+      );
+  }
+}