From 778afd31b10438694c069cc6a617430480155436 Mon Sep 17 00:00:00 2001
From: Dotta <bippadotta@protonmail.com>
Date: Thu, 12 Mar 2026 07:02:06 -0500
Subject: [PATCH] Tighten dashboard agent pane typography

Co-Authored-By: Paperclip <noreply@paperclip.ing>
---
 ui/src/components/ActiveAgentsPanel.tsx            | 3 ++-
 ui/src/components/transcript/RunTranscriptView.tsx | 9 ++++++++-
 2 files changed, 10 insertions(+), 2 deletions(-)

diff --git a/ui/src/components/ActiveAgentsPanel.tsx b/ui/src/components/ActiveAgentsPanel.tsx
index 5991bb9a..c0883192 100644
--- a/ui/src/components/ActiveAgentsPanel.tsx
+++ b/ui/src/components/ActiveAgentsPanel.tsx
@@ -108,7 +108,7 @@ function AgentRunCard({
               ) : (
                 <span className="inline-flex h-2.5 w-2.5 rounded-full bg-muted-foreground/35" />
               )}
-              <Identity name={run.agentName} size="sm" />
+              <Identity name={run.agentName} size="sm" className="[&>span:last-child]:!text-[11px]" />
             </div>
             <div className="mt-2 flex items-center gap-2 text-[11px] text-muted-foreground">
               <span>{isActive ? "Live now" : run.finishedAt ? `Finished ${relativeTime(run.finishedAt)}` : `Started ${relativeTime(run.createdAt)}`}</span>
@@ -147,6 +147,7 @@ function AgentRunCard({
           limit={5}
           streaming={isActive}
           collapseStdout
+          thinkingClassName="!text-[10px] !leading-4"
           emptyMessage={hasOutput ? "Waiting for transcript parsing..." : isActive ? "Waiting for output..." : "No transcript captured."}
         />
       </div>
diff --git a/ui/src/components/transcript/RunTranscriptView.tsx b/ui/src/components/transcript/RunTranscriptView.tsx
index e64d21d3..5f42ec0e 100644
--- a/ui/src/components/transcript/RunTranscriptView.tsx
+++ b/ui/src/components/transcript/RunTranscriptView.tsx
@@ -24,6 +24,7 @@ interface RunTranscriptViewProps {
   collapseStdout?: boolean;
   emptyMessage?: string;
   className?: string;
+  thinkingClassName?: string;
 }
 
 type TranscriptBlock =
@@ -552,15 +553,18 @@ function TranscriptMessageBlock({
 function TranscriptThinkingBlock({
   block,
   density,
+  className,
 }: {
   block: Extract<TranscriptBlock, { type: "thinking" }>;
   density: TranscriptDensity;
+  className?: string;
 }) {
   return (
     <MarkdownBody
       className={cn(
         "italic text-foreground/70 [&>*:first-child]:mt-0 [&>*:last-child]:mb-0",
         density === "compact" ? "text-[11px] leading-5" : "text-sm leading-6",
+        className,
       )}
     >
       {block.text}
@@ -964,6 +968,7 @@ export function RunTranscriptView({
   collapseStdout = false,
   emptyMessage = "No transcript yet.",
   className,
+  thinkingClassName,
 }: RunTranscriptViewProps) {
   const blocks = useMemo(() => normalizeTranscript(entries, streaming), [entries, streaming]);
   const visibleBlocks = limit ? blocks.slice(-limit) : blocks;
@@ -993,7 +998,9 @@ export function RunTranscriptView({
           className={cn(index === visibleBlocks.length - 1 && streaming && "animate-in fade-in slide-in-from-bottom-1 duration-300")}
         >
           {block.type === "message" && <TranscriptMessageBlock block={block} density={density} />}
-          {block.type === "thinking" && <TranscriptThinkingBlock block={block} density={density} />}
+          {block.type === "thinking" && (
+            <TranscriptThinkingBlock block={block} density={density} className={thinkingClassName} />
+          )}
           {block.type === "tool" && <TranscriptToolCard block={block} density={density} />}
           {block.type === "command_group" && <TranscriptCommandGroup block={block} density={density} />}
           {block.type === "stdout" && (