Display details as a property table instead of pills

Author: samejr

apps/webapp/app/components/runs/v3/ai/AIChatMessages.tsx

@@ -1,5 +1,6 @@
 import { lazy, Suspense, useState } from "react";
 import { CodeBlock } from "~/components/code/CodeBlock";
+import { Header3 } from "~/components/primitives/Headers";
 import type { DisplayItem, ToolUse } from "./types";
 
 // Lazy load streamdown to avoid SSR issues
@@ -45,7 +46,7 @@ function SectionHeader({
 }) {
   return (
     <div className="flex items-center justify-between">
-      <span className="text-xs font-medium uppercase tracking-wide text-text-dimmed">{label}</span>
+      <Header3>{label}</Header3>
       {right && <div className="flex items-center gap-2">{right}</div>}
     </div>
   );

apps/webapp/app/components/runs/v3/ai/AIModelSummary.tsx

@@ -1,47 +1,53 @@
 import { formatCurrencyAccurate } from "~/utils/numberFormatter";
+import { Header3 } from "~/components/primitives/Headers";
 import type { AISpanData } from "./types";
 
 export function AITagsRow({ aiData }: { aiData: AISpanData }) {
   return (
-    <div className="flex flex-wrap items-center gap-1.5 py-2.5">
-      <Pill>{aiData.model}</Pill>
-      {aiData.provider !== "unknown" && <Pill variant="dimmed">{aiData.provider}</Pill>}
-      {aiData.resolvedProvider && (
-        <Pill variant="dimmed">via {aiData.resolvedProvider}</Pill>
-      )}
-      {aiData.finishReason && <Pill variant="dimmed">{aiData.finishReason}</Pill>}
-      {aiData.serviceTier && <Pill variant="dimmed">tier: {aiData.serviceTier}</Pill>}
-      {aiData.toolChoice && <Pill variant="dimmed">tools: {aiData.toolChoice}</Pill>}
-      {aiData.toolCount != null && aiData.toolCount > 0 && (
-        <Pill variant="dimmed">
-          {aiData.toolCount} {aiData.toolCount === 1 ? "tool" : "tools"}
-        </Pill>
-      )}
-      {aiData.messageCount != null && (
-        <Pill variant="dimmed">
-          {aiData.messageCount} {aiData.messageCount === 1 ? "msg" : "msgs"}
-        </Pill>
-      )}
-      {aiData.telemetryMetadata &&
-        Object.entries(aiData.telemetryMetadata).map(([key, value]) => (
-          <Pill key={key} variant="dimmed">
-            {key}: {value}
-          </Pill>
-        ))}
+    <div className="flex flex-col gap-1 py-2.5">
+      <div className="flex flex-col text-xs @container">
+        <MetricRow label="Model" value={aiData.model} />
+        {aiData.provider !== "unknown" && <MetricRow label="Provider" value={aiData.provider} />}
+        {aiData.resolvedProvider && (
+          <MetricRow label="Resolved provider" value={aiData.resolvedProvider} />
+        )}
+        {aiData.finishReason && <MetricRow label="Finish reason" value={aiData.finishReason} />}
+        {aiData.serviceTier && <MetricRow label="Service tier" value={aiData.serviceTier} />}
+        {aiData.toolChoice && <MetricRow label="Tool choice" value={aiData.toolChoice} />}
+        {aiData.toolCount != null && aiData.toolCount > 0 && (
+          <MetricRow
+            label="Tools provided"
+            value={`${aiData.toolCount} ${aiData.toolCount === 1 ? "tool" : "tools"}`}
+          />
+        )}
+        {aiData.messageCount != null && (
+          <MetricRow
+            label="Messages"
+            value={`${aiData.messageCount} ${aiData.messageCount === 1 ? "message" : "messages"}`}
+          />
+        )}
+        {aiData.telemetryMetadata &&
+          Object.entries(aiData.telemetryMetadata).map(([key, value]) => (
+            <MetricRow key={key} label={key} value={value} />
+          ))}
+      </div>
     </div>
   );
 }
 
 export function AIStatsSummary({ aiData }: { aiData: AISpanData }) {
   return (
     <div className="flex flex-col gap-1 py-2.5">
-      <span className="text-xs font-medium uppercase tracking-wide text-text-dimmed">Stats</span>
-
-      <div className="flex flex-col text-[11px]">
+      <Header3>Stats</Header3>
+      <div className="flex flex-col text-xs @container">
         <MetricRow label="Input" value={aiData.inputTokens.toLocaleString()} unit="tokens" />
         <MetricRow label="Output" value={aiData.outputTokens.toLocaleString()} unit="tokens" />
         {aiData.cachedTokens != null && aiData.cachedTokens > 0 && (
-          <MetricRow label="Cache read" value={aiData.cachedTokens.toLocaleString()} unit="tokens" />
+          <MetricRow
+            label="Cache read"
+            value={aiData.cachedTokens.toLocaleString()}
+            unit="tokens"
+          />
         )}
         {aiData.cacheCreationTokens != null && aiData.cacheCreationTokens > 0 && (
           <MetricRow
@@ -57,13 +63,7 @@ export function AIStatsSummary({ aiData }: { aiData: AISpanData }) {
             unit="tokens"
           />
         )}
-        <MetricRow
-          label="Total"
-          value={aiData.totalTokens.toLocaleString()}
-          unit="tokens"
-          bold
-          border
-        />
+        <MetricRow label="Total" value={aiData.totalTokens.toLocaleString()} unit="tokens" bold />
 
         {aiData.totalCost != null && (
           <MetricRow label="Cost" value={formatCurrencyAccurate(aiData.totalCost)} />
@@ -84,22 +84,20 @@ function MetricRow({
   value,
   unit,
   bold,
-  border,
 }: {
   label: string;
   value: string;
   unit?: string;
   bold?: boolean;
-  border?: boolean;
 }) {
   return (
-    <div
-      className={`flex items-center justify-between py-1 ${
-        border ? "border-t border-grid-dimmed" : ""
-      }`}
-    >
+    <div className="grid h-7 grid-cols-[1fr_auto] items-center gap-4 rounded-sm px-1.5 transition odd:bg-charcoal-750/40 @[28rem]:grid-cols-[8rem_1fr] hover:bg-white/[0.04]">
       <span className="text-text-dimmed">{label}</span>
-      <span className={bold ? "font-medium text-text-bright" : "text-text-bright"}>
+      <span
+        className={`text-right @[28rem]:text-left ${
+          bold ? "font-medium text-text-bright" : "text-text-bright"
+        }`}
+      >
         {value}
         {unit && <span className="ml-1 text-text-dimmed">{unit}</span>}
       </span>
@@ -113,23 +111,3 @@ function formatTtfc(ms: number): string {
   }
   return `${Math.round(ms)}ms`;
 }
-
-function Pill({
-  children,
-  variant = "default",
-}: {
-  children: React.ReactNode;
-  variant?: "default" | "dimmed";
-}) {
-  return (
-    <span
-      className={`inline-flex items-center rounded-sm px-1.5 py-0.5 text-[11px] font-medium ${
-        variant === "dimmed"
-          ? "bg-charcoal-750 text-text-dimmed"
-          : "bg-charcoal-700 text-text-bright"
-      }`}
-    >
-      {children}
-    </span>
-  );
-}

apps/webapp/app/components/runs/v3/ai/AISpanDetails.tsx

@@ -1,6 +1,7 @@
 import { CheckIcon, ClipboardDocumentIcon } from "@heroicons/react/20/solid";
 import { useState } from "react";
 import { Button } from "~/components/primitives/Buttons";
+import { Header3 } from "~/components/primitives/Headers";
 import { TabButton, TabContainer } from "~/components/primitives/Tabs";
 import { useHasAdminAccess } from "~/hooks/useUser";
 import { AIChatMessages, AssistantResponse } from "./AIChatMessages";
@@ -77,17 +78,15 @@ function OverviewTab({ aiData }: { aiData: AISpanData }) {
   const { userText, outputText, outputToolNames } = extractInputOutput(aiData);
 
   return (
-    <div className="flex flex-col divide-y divide-grid-bright px-3">
+    <div className="flex flex-col px-3">
       {/* Tags + Stats */}
       <AITagsRow aiData={aiData} />
       <AIStatsSummary aiData={aiData} />
 
       {/* Input (last user prompt) */}
       {userText && (
         <div className="flex flex-col gap-1 py-2.5">
-          <span className="text-xs font-medium uppercase tracking-wide text-text-dimmed">
-            Input
-          </span>
+          <Header3>Input</Header3>
           <p className="text-sm text-text-bright">{userText}</p>
         </div>
       )}
@@ -96,9 +95,7 @@ function OverviewTab({ aiData }: { aiData: AISpanData }) {
       {outputText && <AssistantResponse text={outputText} headerLabel="Output" />}
       {outputToolNames.length > 0 && !outputText && (
         <div className="flex flex-col gap-1 py-2.5">
-          <span className="text-xs font-medium uppercase tracking-wide text-text-dimmed">
-            Output
-          </span>
+          <Header3>Output</Header3>
           <p className="text-sm text-text-dimmed">
             Called {outputToolNames.length === 1 ? "tool" : "tools"}:{" "}
             <span className="font-mono text-text-bright">{outputToolNames.join(", ")}</span>