Tighten dashboard agent pane typography

Co-Authored-By: Paperclip <noreply@paperclip.ing>
This commit is contained in:
Dotta
2026-03-12 07:02:06 -05:00
parent 6fe7f7a510
commit 778afd31b1
2 changed files with 10 additions and 2 deletions

View File

@@ -108,7 +108,7 @@ function AgentRunCard({
) : ( ) : (
<span className="inline-flex h-2.5 w-2.5 rounded-full bg-muted-foreground/35" /> <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>
<div className="mt-2 flex items-center gap-2 text-[11px] text-muted-foreground"> <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> <span>{isActive ? "Live now" : run.finishedAt ? `Finished ${relativeTime(run.finishedAt)}` : `Started ${relativeTime(run.createdAt)}`}</span>
@@ -147,6 +147,7 @@ function AgentRunCard({
limit={5} limit={5}
streaming={isActive} streaming={isActive}
collapseStdout collapseStdout
thinkingClassName="!text-[10px] !leading-4"
emptyMessage={hasOutput ? "Waiting for transcript parsing..." : isActive ? "Waiting for output..." : "No transcript captured."} emptyMessage={hasOutput ? "Waiting for transcript parsing..." : isActive ? "Waiting for output..." : "No transcript captured."}
/> />
</div> </div>

View File

@@ -24,6 +24,7 @@ interface RunTranscriptViewProps {
collapseStdout?: boolean; collapseStdout?: boolean;
emptyMessage?: string; emptyMessage?: string;
className?: string; className?: string;
thinkingClassName?: string;
} }
type TranscriptBlock = type TranscriptBlock =
@@ -552,15 +553,18 @@ function TranscriptMessageBlock({
function TranscriptThinkingBlock({ function TranscriptThinkingBlock({
block, block,
density, density,
className,
}: { }: {
block: Extract<TranscriptBlock, { type: "thinking" }>; block: Extract<TranscriptBlock, { type: "thinking" }>;
density: TranscriptDensity; density: TranscriptDensity;
className?: string;
}) { }) {
return ( return (
<MarkdownBody <MarkdownBody
className={cn( className={cn(
"italic text-foreground/70 [&>*:first-child]:mt-0 [&>*:last-child]:mb-0", "italic text-foreground/70 [&>*:first-child]:mt-0 [&>*:last-child]:mb-0",
density === "compact" ? "text-[11px] leading-5" : "text-sm leading-6", density === "compact" ? "text-[11px] leading-5" : "text-sm leading-6",
className,
)} )}
> >
{block.text} {block.text}
@@ -964,6 +968,7 @@ export function RunTranscriptView({
collapseStdout = false, collapseStdout = false,
emptyMessage = "No transcript yet.", emptyMessage = "No transcript yet.",
className, className,
thinkingClassName,
}: RunTranscriptViewProps) { }: RunTranscriptViewProps) {
const blocks = useMemo(() => normalizeTranscript(entries, streaming), [entries, streaming]); const blocks = useMemo(() => normalizeTranscript(entries, streaming), [entries, streaming]);
const visibleBlocks = limit ? blocks.slice(-limit) : blocks; 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")} 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 === "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 === "tool" && <TranscriptToolCard block={block} density={density} />}
{block.type === "command_group" && <TranscriptCommandGroup block={block} density={density} />} {block.type === "command_group" && <TranscriptCommandGroup block={block} density={density} />}
{block.type === "stdout" && ( {block.type === "stdout" && (