History

fix(web): label compact agents action

t3-code[bot] committed 3 months ago

Commit 6bd7bdb1 parent 4cd17fd2 files · +23 −5Browse files

Unified · Split

2 files
  1. apps/web/src/components/chat/AgentSpawnCtaRow.test.ts +10 −1
  2. apps/web/src/components/chat/MessagesTimeline.tsx +13 −4
apps/web/src/components/chat/AgentSpawnCtaRow.test.ts+10−1
@@ -1,6 +1,10 @@
1import { describe, expect, it } from "vite-plus/test";1import { describe, expect, it } from "vite-plus/test";
2 2
3import { AGENT_SPAWN_CTA_CLASS_NAME, AGENT_SPAWN_CTA_TRIGGER_CLASS_NAME } from "./MessagesTimeline";3import {
4 AGENT_SPAWN_CTA_CLASS_NAME,
5 AGENT_SPAWN_CTA_TRIGGER_CLASS_NAME,
6 resolveAgentSpawnActionLabel,
7} from "./MessagesTimeline";
4 8
5describe("AgentSpawnCtaRow", () => {9describe("AgentSpawnCtaRow", () => {
6 it("uses the changed-files card shell", () => {10 it("uses the changed-files card shell", () => {
@@ -15,4 +19,9 @@ describe("AgentSpawnCtaRow", () => { · 8 unmodified lines
15 expect(AGENT_SPAWN_CTA_TRIGGER_CLASS_NAME).toContain("flex-1");19 expect(AGENT_SPAWN_CTA_TRIGGER_CLASS_NAME).toContain("flex-1");
16 expect(AGENT_SPAWN_CTA_TRIGGER_CLASS_NAME).toContain("rounded-lg");20 expect(AGENT_SPAWN_CTA_TRIGGER_CLASS_NAME).toContain("rounded-lg");
17 });21 });
22
23 it("names the agents action when its visible label is hidden", () => {
24 expect(resolveAgentSpawnActionLabel(true)).toBe("Open agents");
25 expect(resolveAgentSpawnActionLabel(false)).toBe("View agents");
26 });
18});27});
apps/web/src/components/chat/MessagesTimeline.tsx+13−4
@@ -2130,6 +2130,9 @@ export const AGENT_SPAWN_CTA_CLASS_NAME = · 2129 unmodified lines
2130export const AGENT_SPAWN_CTA_TRIGGER_CLASS_NAME =2130export const AGENT_SPAWN_CTA_TRIGGER_CLASS_NAME =
2131 "group flex min-w-0 flex-1 items-center gap-1.5 overflow-hidden rounded-lg px-1 py-1.5 text-left transition-colors hover:bg-accent/60 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring";2131 "group flex min-w-0 flex-1 items-center gap-1.5 overflow-hidden rounded-lg px-1 py-1.5 text-left transition-colors hover:bg-accent/60 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring";
2132 2132
2133export const resolveAgentSpawnActionLabel = (live: boolean) =>
2134 live ? "Open agents" : "View agents";
2135
2133const AgentSpawnCtaRow = memo(function AgentSpawnCtaRow(props: { workEntry: TimelineWorkEntry }) {2136const AgentSpawnCtaRow = memo(function AgentSpawnCtaRow(props: { workEntry: TimelineWorkEntry }) {
2134 const { workEntry } = props;2137 const { workEntry } = props;
2135 const { agentPanelModel, onOpenAgents } = use(TimelineRowCtx);2138 const { agentPanelModel, onOpenAgents } = use(TimelineRowCtx);
@@ -2194,6 +2197,8 @@ const AgentSpawnCtaRow = memo(function AgentSpawnCtaRow(props: { workEntry: Time · 58 unmodified lines
2194 ? `${failed} failed`2197 ? `${failed} failed`
2195 : "✓ completed";2198 : "✓ completed";
2196 2199
2200 const actionLabel = resolveAgentSpawnActionLabel(live);
2201
2197 return (2202 return (
2198 <div className={AGENT_SPAWN_CTA_CLASS_NAME}>2203 <div className={AGENT_SPAWN_CTA_CLASS_NAME}>
2199 <div className="flex items-center justify-between gap-2 rounded-xl px-1">2204 <div className="flex items-center justify-between gap-2 rounded-xl px-1">
@@ -2217,11 +2222,15 @@ const AgentSpawnCtaRow = memo(function AgentSpawnCtaRow(props: { workEntry: Time · 17 unmodified lines
2217 {totalTokens > 0 ? ` · Σ ${formatSubagentTokenCount(totalTokens)}` : ""}2222 {totalTokens > 0 ? ` · Σ ${formatSubagentTokenCount(totalTokens)}` : ""}
2218 </span>2223 </span>
2219 </button>2224 </button>
2220 <Button type="button" size="xs" variant="outline" onClick={onOpenAgents}>2225 <Button
2226 type="button"
2227 size="xs"
2228 variant="outline"
2229 aria-label={actionLabel}
2230 onClick={onOpenAgents}
2231 >
2221 <BotIcon className="size-3" />2232 <BotIcon className="size-3" />
2222 <span className="hidden @[24rem]/agent-spawn:inline">2233 <span className="hidden @[24rem]/agent-spawn:inline">{actionLabel}</span>
2223 {live ? "Open agents" : "View agents"}
2224 </span>
2225 </Button>2234 </Button>
2226 </div>2235 </div>
2227 </div>2236 </div>