From b839af2fe664ebe7c28e68aba76f005688db35f3 Mon Sep 17 00:00:00 2001
From: Taylor Ho <taylorkmho@gmail.com>
Date: Sun, 14 Jun 2026 23:53:35 -0700
Subject: [PATCH] refactor(agents): move transcript context toggle styling into
 shared variants

- Add an xs size variant to the shared Toggle component for compact pill-style controls.
- Update the outline toggle variant so pressed state uses the muted visual treatment instead of the primary fill.
- Simplify the agent transcript context toggle to use size="xs" and remove the visible context section count.
---
 .../src/features/agents/ui/AgentSessionTranscriptList.tsx   | 6 +-----
 desktop/src/shared/ui/toggle.tsx                            | 4 +++-
 2 files changed, 4 insertions(+), 6 deletions(-)

diff --git a/desktop/src/features/agents/ui/AgentSessionTranscriptList.tsx b/desktop/src/features/agents/ui/AgentSessionTranscriptList.tsx
index faef6fed7..8f76ea088 100644
--- a/desktop/src/features/agents/ui/AgentSessionTranscriptList.tsx
+++ b/desktop/src/features/agents/ui/AgentSessionTranscriptList.tsx
@@ -608,17 +608,13 @@ function TurnSetupFooter({
       {showContext ? (
         <Toggle
           aria-label={`${contextOpen ? "Hide" : "Show"} prompt context`}
-          className="h-5 min-h-0 min-w-0 gap-1 rounded-md px-1.5 text-xs font-medium data-[state=on]:bg-muted data-[state=on]:text-foreground"
           data-testid="transcript-prompt-context-toggle"
           onPressedChange={onContextOpenChange}
           pressed={contextOpen}
-          size="sm"
+          size="xs"
           variant="outline"
         >
           Context
-          <span className="text-muted-foreground/70">
-            {context.sections.length}
-          </span>
         </Toggle>
       ) : null}
       <TranscriptTimestamp timestamp={timestamp} />
diff --git a/desktop/src/shared/ui/toggle.tsx b/desktop/src/shared/ui/toggle.tsx
index 5d3671d8b..939b2df16 100644
--- a/desktop/src/shared/ui/toggle.tsx
+++ b/desktop/src/shared/ui/toggle.tsx
@@ -10,10 +10,12 @@ const toggleVariants = cva(
     variants: {
       variant: {
         default: "bg-transparent",
-        outline: "border border-input/40 bg-background hover:bg-muted/70",
+        outline:
+          "border border-input/40 bg-background hover:bg-muted/70 data-[state=on]:bg-muted data-[state=on]:text-foreground",
       },
       size: {
         default: "h-9 px-3 min-w-9",
+        xs: "h-5 min-h-0 min-w-0 gap-1 rounded-md px-1.5 text-xs font-medium",
         sm: "h-8 px-2 min-w-8",
         lg: "h-10 px-3 min-w-10",
       },