fix(web): refine tool card and jira chip states

- hide jira chip labels on smaller header layouts
- animate tool card border and radius state changes
- update tests for the new tool card classes

Author: tyulyukov

apps/web/src/components/GitActionsJiraChips.tsx

@@ -44,8 +44,12 @@ export function GitActionsJiraChips({ implementingJiraTicketKeys }: GitActionsJi
             fill="#2684FF"
           />
         </svg>
-        <span className="font-mono">{primaryKey}</span>
-        {remainingCount > 0 ? <span className="text-foreground/50">+{remainingCount}</span> : null}
+        <span className="sr-only font-mono @3xl/header-actions:not-sr-only">{primaryKey}</span>
+        {remainingCount > 0 ? (
+          <span className="sr-only text-foreground/50 @3xl/header-actions:not-sr-only">
+            +{remainingCount}
+          </span>
+        ) : null}
       </PopoverTrigger>
       <PopoverPopup tooltipStyle side="bottom" align="end">
         <div className="text-xs">

apps/web/src/components/chat/_shared/ToolCard.test.ts

@@ -32,6 +32,14 @@ describe("ToolCard", () => {
     expect(markup).toContain('data-slot="collapsible-panel"');
     expect(markup).toContain("transition-[opacity,translate]");
     expect(markup).toContain("data-starting-style:opacity-0");
+    expect(markup).toContain("data-starting-style:[&>div]:border-t-transparent");
+    expect(markup).toContain("transition-[border-color]");
+    expect(markup).toContain("transition-[border-color,box-shadow]");
+    expect(markup).toContain("data-[state=preview]:border-border/65");
+    expect(markup).toContain("rounded-xl");
+    expect(markup).toContain("transition-[background-color,border-radius]");
+    expect(markup).toContain("data-[state=preview]:rounded-b-none");
+    expect(markup).not.toContain("data-[state=preview]:rounded-lg");
     expect(markup).not.toContain("transition-[height]");
   });
 });

apps/web/src/components/chat/_shared/ToolCard.tsx

@@ -122,7 +122,13 @@ export function ToolCard(props: ToolCardProps) {
   return (
     <div
       data-scroll-anchor-target
-      className={cn("overflow-hidden rounded-xl border border-border/40 bg-card/25")}
+      data-state={state}
+      className={cn(
+        "overflow-hidden rounded-xl border bg-card/25 transition-[border-color,box-shadow] duration-200 ease-out",
+        "data-[state=collapsed]:border-border/35 data-[state=collapsed]:shadow-none",
+        "data-[state=expanded]:border-border/65 data-[state=expanded]:shadow-sm/10",
+        "data-[state=preview]:border-border/65 data-[state=preview]:shadow-sm/10",
+      )}
     >
       <HeaderRow
         showChevron={showChevron}
@@ -156,9 +162,14 @@ export function ToolCard(props: ToolCardProps) {
         <Collapsible open={isOpen}>
           <CollapsiblePanel
             animated={false}
-            className="transition-[opacity,translate] duration-150 ease-out will-change-[opacity,transform] data-ending-style:-translate-y-1 data-ending-style:opacity-0 data-starting-style:-translate-y-1 data-starting-style:opacity-0"
+            className="transition-[opacity,translate] duration-150 ease-out will-change-[opacity,transform] data-ending-style:-translate-y-1 data-ending-style:opacity-0 data-starting-style:-translate-y-1 data-starting-style:opacity-0 data-ending-style:[&>div]:border-t-transparent data-starting-style:[&>div]:border-t-transparent"
           >
-            <div className={cn("border-t border-border/20", bodyClassName)}>
+            <div
+              className={cn(
+                "border-t border-border/35 transition-[border-color] duration-200 ease-out",
+                bodyClassName,
+              )}
+            >
               {showPreview && bodyAvailable && (
                 <div className="relative">
                   <div
@@ -263,7 +274,7 @@ function HeaderRow(props: HeaderRowProps) {
         data-state={state}
         onClick={onClick}
         className={cn(
-          "flex w-full cursor-pointer items-center gap-2 px-3 py-2 text-left transition-colors duration-100 hover:bg-muted/20 focus-visible:bg-muted/20 focus-visible:outline-none",
+          "flex w-full cursor-pointer items-center gap-2 px-3 py-2 text-left transition-[background-color,border-radius] duration-200 hover:bg-muted/20 focus-visible:bg-muted/20 focus-visible:outline-none data-[state=collapsed]:rounded-xl data-[state=expanded]:rounded-b-none data-[state=preview]:rounded-b-none",
           headerClassName,
         )}
       >
@@ -273,7 +284,13 @@ function HeaderRow(props: HeaderRowProps) {
   }
 
   return (
-    <div data-state={state} className={cn("flex items-center gap-2 px-3 py-2", headerClassName)}>
+    <div
+      data-state={state}
+      className={cn(
+        "flex items-center gap-2 px-3 py-2 transition-[border-radius] duration-150 data-[state=collapsed]:rounded-xl data-[state=expanded]:rounded-b-none data-[state=preview]:rounded-b-none",
+        headerClassName,
+      )}
+    >
       {children}
     </div>
   );