fix(web): align thread details summaries and usage rows with the design

Author: maria-rcks

apps/web/src/components/chat/ThreadDetailsControl.tsx

@@ -17,6 +17,8 @@ const parts = {
   row: THREAD_DETAILS_PANEL_ROW_CLASS,
   heading:
     "flex min-w-0 flex-1 items-center gap-2 rounded-md text-left text-caption text-muted-foreground hover:text-foreground focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-ring",
+  usage:
+    "col-span-4 grid min-w-0 grid-cols-subgrid items-center rounded-md text-left text-meta text-muted-foreground hover:text-foreground focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-ring",
   choice: THREAD_DETAILS_PANEL_CHOICE_ROW_CLASS,
   icon: THREAD_DETAILS_PANEL_ICON_ACTION_CLASS,
   meta: THREAD_DETAILS_PANEL_META_ACTION_CLASS,

apps/web/src/components/chat/ThreadDetailsSection.tsx

@@ -97,7 +97,7 @@ export function ThreadDetailsSection({
               setDisclosure({ empty, collapsed: empty ? !isCollapsed : null });
             }}
           >
-            <span>{title}</span>
+            <span className="shrink-0">{title}</span>
             {summary ? (
               <span className="ms-auto truncate text-caption text-muted-foreground">{summary}</span>
             ) : null}

apps/web/src/components/chat/ThreadDetailsUsage.tsx

@@ -21,10 +21,15 @@ import { type ContextWindowSnapshot, formatContextWindowTokens } from "../../lib
 import { cn } from "../../lib/utils";
 import { formatUpcomingTimestamp } from "../../timestampFormat";
 import { Tooltip, TooltipPopup, TooltipTrigger } from "../ui/tooltip";
+import { Button } from "../ui/button";
 import { ThreadDetailsControl } from "./ThreadDetailsControl";
-import { ContextWindowMeter } from "./ContextWindowMeter";
+import { ContextWindowMeter, ContextWindowSegments } from "./ContextWindowMeter";
 import { ThreadDetailsSection } from "./ThreadDetailsSection";
 
+// The canvas reserves the same icon, label, meter, percent and trailing columns in every row.
+const USAGE_ROW_CLASS =
+  "grid grid-cols-[1rem_3.625rem_minmax(0,1fr)_1.875rem_2.75rem] items-center gap-x-2 ps-3 pe-2 text-meta";
+
 const PACE_LABEL: Record<LimitPace, string> = {
   ahead: "Ahead of pace",
   on: "On pace",
@@ -97,18 +102,13 @@ export function ThreadDetailsContext({
   }
   const maxTokens = usage.maxTokens != null && usage.maxTokens > 0 ? usage.maxTokens : null;
   const used = maxTokens !== null ? Math.max(0, Math.min(100, usage.usedPercentage ?? 0)) : null;
-  const threshold = usage.autoCompactThreshold ?? null;
-  const tick =
-    maxTokens !== null && threshold !== null && threshold > 0 && threshold < maxTokens
-      ? (threshold / maxTokens) * 100
-      : null;
   const tokens =
     maxTokens !== null
       ? `${formatContextWindowTokens(usage.usedTokens)} / ${formatContextWindowTokens(maxTokens)}`
       : `${formatContextWindowTokens(usage.usedTokens)} tokens`;
   return (
     <ThreadDetailsSection title="Context window" variant="usage">
-      <div className="flex min-h-11 items-center gap-2 ps-3 pe-2 text-meta">
+      <div className={cn(USAGE_ROW_CLASS, "h-8")}>
         <ContextWindowMeter
           usage={usage}
           side="left"
@@ -117,54 +117,29 @@ export function ThreadDetailsContext({
           compactDisabledReason={compactDisabledReason}
           trigger={
             <ThreadDetailsControl
-              part="heading"
+              part="usage"
               aria-label={`Context: ${tokens}${maxTokens !== null ? " tokens" : ""}${used !== null ? `, ${Math.round(used)}% used` : " used"}`}
             >
               <GaugeIcon className="size-4 shrink-0" />
-              <span className="flex min-w-0 flex-1 flex-col gap-1 text-meta">
-                <span className="flex items-center justify-between gap-2 text-foreground">
-                  <span>Context</span>
-                  {used !== null ? (
-                    <span className="tabular-nums text-muted-foreground">{Math.round(used)}%</span>
-                  ) : null}
-                </span>
-                <span className="flex items-center gap-2">
-                  {used !== null ? (
-                    <span className="relative h-1 min-w-0 flex-1 rounded-full bg-muted-foreground/20">
-                      <span
-                        className={cn(
-                          "absolute inset-y-0 left-0 rounded-full",
-                          used >= 90 ? "bg-error" : used >= 80 ? "bg-warning" : "bg-foreground/80",
-                        )}
-                        style={{ width: used > 0 ? `max(${used}%, 2px)` : "0%" }}
-                      />
-                      {tick !== null ? (
-                        <span
-                          aria-hidden
-                          className="absolute -top-[3px] h-2.5 w-0.5 rounded-sm bg-muted-foreground"
-                          style={{ left: `${tick}%` }}
-                        />
-                      ) : null}
-                    </span>
-                  ) : null}
-                  <span className="shrink-0 text-caption tabular-nums text-muted-foreground">
-                    {tokens}
-                  </span>
-                </span>
+              <span className="flex h-6 items-center text-foreground">Context</span>
+              {used !== null ? <ContextWindowSegments usage={usage} /> : <span />}
+              <span className="text-end tabular-nums text-muted-foreground">
+                {used !== null ? `${Math.round(used)}%` : ""}
               </span>
             </ThreadDetailsControl>
           }
         />
-        <span className="flex w-11 shrink-0 justify-end">
+        <span className="flex justify-end">
           {onCompact ? (
-            <ThreadDetailsControl
-              part="icon"
+            <Button
+              size="icon-xs"
+              variant="secondary"
               aria-label="Compact context"
               disabled={compactDisabled}
               onClick={onCompact}
             >
-              <Minimize2Icon className="size-3.5" />
-            </ThreadDetailsControl>
+              <Minimize2Icon className="size-[13px]" />
+            </Button>
           ) : null}
         </span>
       </div>
@@ -249,18 +224,21 @@ function UsageRow({
 }) {
   return (
     <Tooltip>
-      <div className="flex h-8 items-center gap-2 ps-3 pe-2 text-meta">
+      <div className={cn(USAGE_ROW_CLASS, "h-8")}>
         <TooltipTrigger
           render={
             <div
               tabIndex={0}
               aria-label={`${label}: ${ariaValue}`}
-              className="flex min-w-0 flex-1 cursor-default items-center gap-2 rounded-lg outline-none focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-ring"
+              className={cn(
+                "grid min-w-0 cursor-default grid-cols-subgrid items-center gap-x-2 rounded-lg outline-none focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-ring",
+                fill === null ? "col-span-5" : "col-span-4",
+              )}
             />
           }
         >
           <span className="shrink-0 text-muted-foreground [&>svg]:size-4">{icon}</span>
-          <span className="w-14.5 shrink-0 truncate">{label}</span>
+          <span className="truncate">{label}</span>
           {fill !== null ? (
             <span className="relative h-1 min-w-0 flex-1 rounded-full bg-muted-foreground/20">
               {fill > 0 ? (
@@ -284,21 +262,19 @@ function UsageRow({
                 />
               ) : null}
             </span>
-          ) : (
-            <span className="flex-1" />
-          )}
+          ) : null}
           <span
             className={cn(
-              "w-7.5 shrink-0 text-end tabular-nums text-muted-foreground",
-              fill === null && "w-auto",
+              "text-end tabular-nums text-muted-foreground",
+              fill === null && "col-span-3",
               tone === "error" && "text-error-foreground",
               tone === "warning" && "text-warning-foreground",
             )}
           >
             {value}
           </span>
         </TooltipTrigger>
-        <span className="flex w-11 shrink-0 justify-end">{trailing}</span>
+        {fill !== null ? <span className="flex justify-end">{trailing}</span> : null}
       </div>
       <TooltipPopup side="left" sideOffset={16}>
         <div className="flex flex-col gap-0.5 text-muted-foreground">{tooltip}</div>