From 3c9489a6950db44fc52eda82715a1cbbed8a6cc3 Mon Sep 17 00:00:00 2001
From: Taylor Ho <taylorkmho@gmail.com>
Date: Sun, 14 Jun 2026 23:46:21 -0700
Subject: [PATCH] refactor(agents): standardize activity transcript typography
 to text-xs
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- Replace arbitrary text-[7px]–text-[11px] sizes with Tailwind text-xs across the agent activity/session surface
- AgentSessionTranscriptList, AgentSessionThreadPanel, AgentSessionToolItem, RawEventRail, and BotActivityBar
- UserAvatar xs/sm size tokens now use text-xs so transcript and activity-bar avatars need no per-call font overrides
---
 .../src/features/agents/ui/AgentSessionToolItem.tsx    |  8 ++++----
 .../features/agents/ui/AgentSessionTranscriptList.tsx  |  2 +-
 desktop/src/features/agents/ui/RawEventRail.tsx        |  2 +-
 .../features/channels/ui/AgentSessionThreadPanel.tsx   |  9 +++------
 desktop/src/features/channels/ui/BotActivityBar.tsx    | 10 ++++++----
 desktop/src/shared/ui/UserAvatar.tsx                   |  4 ++--
 6 files changed, 17 insertions(+), 18 deletions(-)

diff --git a/desktop/src/features/agents/ui/AgentSessionToolItem.tsx b/desktop/src/features/agents/ui/AgentSessionToolItem.tsx
index 959a767d7..3ed633ac6 100644
--- a/desktop/src/features/agents/ui/AgentSessionToolItem.tsx
+++ b/desktop/src/features/agents/ui/AgentSessionToolItem.tsx
@@ -81,7 +81,7 @@ export function ToolItem({
           </span>
           {isActive ? (
             <Badge
-              className="h-4 gap-0.5 px-1 text-[9px] font-normal"
+              className="h-4 gap-0.5 px-1 text-xs font-normal"
               variant="default"
             >
               <CircleDot className="h-2 w-2" />
@@ -220,7 +220,7 @@ function ToolTimestamp({
   return (
     <Tooltip>
       <TooltipTrigger asChild>
-        <span className="shrink-0 cursor-default text-[11px] text-muted-foreground/60">
+        <span className="shrink-0 cursor-default text-xs text-muted-foreground/60">
           {time}
           {duration ? ` · ${duration}` : null}
         </span>
@@ -282,7 +282,7 @@ function BuzzToolInlineAction({
   if (action.onClick) {
     return (
       <button
-        className="inline-flex max-w-[14rem] shrink min-w-0 items-center gap-1 rounded-full border border-primary/20 bg-primary/[0.05] px-1.5 py-0.5 text-[11px] font-normal leading-none text-primary/90 transition-colors hover:border-primary/35 hover:bg-primary/10 hover:text-primary"
+        className="inline-flex max-w-[14rem] shrink min-w-0 items-center gap-1 rounded-full border border-primary/20 bg-primary/[0.05] px-1.5 py-0.5 text-xs font-normal leading-none text-primary/90 transition-colors hover:border-primary/35 hover:bg-primary/10 hover:text-primary"
         onClick={(event) => {
           event.preventDefault();
           event.stopPropagation();
@@ -301,7 +301,7 @@ function BuzzToolInlineAction({
 
   return (
     <span
-      className="inline-flex max-w-[14rem] shrink min-w-0 items-center gap-1 rounded-full border border-border/60 bg-muted/40 px-1.5 py-0.5 text-[11px] font-normal leading-none text-muted-foreground"
+      className="inline-flex max-w-[14rem] shrink min-w-0 items-center gap-1 rounded-full border border-border/60 bg-muted/40 px-1.5 py-0.5 text-xs font-normal leading-none text-muted-foreground"
       title={action.title}
     >
       {action.avatar}
diff --git a/desktop/src/features/agents/ui/AgentSessionTranscriptList.tsx b/desktop/src/features/agents/ui/AgentSessionTranscriptList.tsx
index 3017bb0d9..7769da2dd 100644
--- a/desktop/src/features/agents/ui/AgentSessionTranscriptList.tsx
+++ b/desktop/src/features/agents/ui/AgentSessionTranscriptList.tsx
@@ -800,7 +800,7 @@ function MessageItem({
           <div className="mb-0.5 flex items-center gap-1.5 text-xs">
             <UserAvatar
               avatarUrl={assistantAvatarUrl}
-              className="h-5 w-5 shrink-0 text-[8px]"
+              className="shrink-0"
               displayName={assistantLabel}
               size="xs"
               testId="transcript-assistant-avatar"
diff --git a/desktop/src/features/agents/ui/RawEventRail.tsx b/desktop/src/features/agents/ui/RawEventRail.tsx
index 89d2ac3a2..153b77e77 100644
--- a/desktop/src/features/agents/ui/RawEventRail.tsx
+++ b/desktop/src/features/agents/ui/RawEventRail.tsx
@@ -22,7 +22,7 @@ export function RawEventRail({ events }: { events: ObserverEvent[] }) {
                   </span>{" "}
                   {describeRawEvent(event)}
                 </summary>
-                <pre className="mt-2 max-h-72 overflow-auto whitespace-pre-wrap wrap-break-word rounded-md border border-border/40 bg-background/45 p-2 text-[11px] leading-5 text-muted-foreground">
+                <pre className="mt-2 max-h-72 overflow-auto whitespace-pre-wrap wrap-break-word rounded-md border border-border/40 bg-background/45 p-2 font-mono text-xs leading-5 text-muted-foreground">
                   {JSON.stringify(event.payload, null, 2)}
                 </pre>
               </details>
diff --git a/desktop/src/features/channels/ui/AgentSessionThreadPanel.tsx b/desktop/src/features/channels/ui/AgentSessionThreadPanel.tsx
index 96293ad62..98837376c 100644
--- a/desktop/src/features/channels/ui/AgentSessionThreadPanel.tsx
+++ b/desktop/src/features/channels/ui/AgentSessionThreadPanel.tsx
@@ -94,10 +94,7 @@ export function AgentSessionThreadPanel({
   const agentHeaderActions = (
     <div className="ml-auto flex shrink-0 items-center gap-2">
       {isLive && isWorking ? (
-        <Badge
-          className="shrink-0 gap-1 px-2 py-0 text-[10px]"
-          variant="default"
-        >
+        <Badge className="shrink-0 gap-1 px-2 py-0 text-xs" variant="default">
           <CircleDot className="h-2.5 w-2.5" />
           Live
         </Badge>
@@ -112,7 +109,7 @@ export function AgentSessionThreadPanel({
           }
         >
           <label
-            className="flex shrink-0 items-center gap-1.5 text-[11px] font-medium text-muted-foreground"
+            className="flex shrink-0 items-center gap-1.5 text-xs font-medium text-muted-foreground"
             htmlFor="agent-session-raw-feed-switch"
           >
             <TerminalSquare className="h-3 w-3" />
@@ -133,7 +130,7 @@ export function AgentSessionThreadPanel({
           <TooltipTrigger asChild>
             <Button
               aria-label="Stop current agent turn"
-              className="h-6 px-2 text-[11px]"
+              className="h-6 px-2 text-xs"
               data-testid="agent-session-stop-turn"
               disabled={!canInterruptTurn}
               onClick={() => {
diff --git a/desktop/src/features/channels/ui/BotActivityBar.tsx b/desktop/src/features/channels/ui/BotActivityBar.tsx
index 5e56422e1..ad992960a 100644
--- a/desktop/src/features/channels/ui/BotActivityBar.tsx
+++ b/desktop/src/features/channels/ui/BotActivityBar.tsx
@@ -171,16 +171,17 @@ export function BotActivityComposerAction({
                 className={cn(
                   "border border-background",
                   isInline
-                    ? "!h-[18px] !w-[18px] shadow-xs ring-1 ring-primary/25 text-[7px]"
-                    : "!h-5 !w-5 text-[8px]",
+                    ? "!h-[18px] !w-[18px] shadow-xs ring-1 ring-primary/25 text-xs leading-none"
+                    : "shrink-0",
                 )}
                 displayName={agent.name}
                 key={agent.pubkey}
+                size="xs"
               />
             ))}
           </span>
           {typingAgents.length > 2 ? (
-            <span className="text-[11px] leading-none">
+            <span className="text-xs leading-none">
               +{typingAgents.length - 2}
             </span>
           ) : null}
@@ -227,8 +228,9 @@ export function BotActivityComposerAction({
               >
                 <UserAvatar
                   avatarUrl={agentAvatarUrl(agent)}
-                  className="!h-6 !w-6 shrink-0 text-[9px]"
+                  className="shrink-0"
                   displayName={agent.name}
+                  size="sm"
                 />
                 <span className="min-w-0 flex-1 truncate">{agent.name}</span>
                 <Loader2 className="h-4 w-4 shrink-0 animate-spin text-muted-foreground/70" />
diff --git a/desktop/src/shared/ui/UserAvatar.tsx b/desktop/src/shared/ui/UserAvatar.tsx
index cab6a8fd6..8b7ede461 100644
--- a/desktop/src/shared/ui/UserAvatar.tsx
+++ b/desktop/src/shared/ui/UserAvatar.tsx
@@ -6,8 +6,8 @@ import { Avatar, AvatarFallback, AvatarImage } from "@/shared/ui/avatar";
 type UserAvatarSize = "xs" | "sm" | "md";
 
 const sizeClasses: Record<UserAvatarSize, string> = {
-  xs: "h-5 w-5 text-[8px]",
-  sm: "h-6 w-6 text-[9px]",
+  xs: "h-5 w-5 text-xs",
+  sm: "h-6 w-6 text-xs",
   md: "h-10 w-10 text-xs",
 };