style: standardize card hover states to DESIGN.md spec across dashboard and agents

marian2js · marian2js · commit 31ce5be6c8c7 · 2026-04-05T15:36:38.000+02:00
Normalize all interactive cards to use consistent hover treatment:
transition-all duration-100 ease-out, hover:-translate-y-px, hover:shadow-md,
hover:border-primary/25. Fixes inconsistent translate, shadow, border opacity,
and duration values across 10 card components.
diff --git a/apps/desktop/src/features/agents/components/SpecialistCard.tsx b/apps/desktop/src/features/agents/components/SpecialistCard.tsx
@@ -33,11 +33,11 @@ export function SpecialistCard({ specialist, onChat, recentOutputs, recentBundle
   return (
     <article
       className={cn(
-        "group/card relative flex flex-col rounded-xl border bg-card transition-all duration-150",
-        "hover:-translate-y-0.5 hover:shadow-lg hover:shadow-black/5 dark:hover:shadow-black/20",
+        "group/card relative flex flex-col rounded-xl border bg-card transition-all duration-100 ease-out",
+        "hover:-translate-y-px hover:shadow-md hover:border-primary/25",
         isManager
-          ? "border-primary/20 bg-primary/[0.02] ring-1 ring-primary/[0.06] hover:border-primary/30 hover:ring-primary/10"
-          : cn("dark:border-white/[0.06]", colors.chipBorder, colors.hoverBorder),
+          ? "border-primary/20 bg-primary/[0.02] ring-1 ring-primary/[0.06] hover:ring-primary/10"
+          : cn("dark:border-white/[0.06]", colors.chipBorder),
       )}
     >
       {/* Card body */}
diff --git a/apps/desktop/src/features/dashboard/components/ActionCardItem.tsx b/apps/desktop/src/features/dashboard/components/ActionCardItem.tsx
@@ -39,12 +39,12 @@ export function ActionCardItem({ card, isCompleted, isHero, isLoading, specialis
         isLoading
           ? "pointer-events-none border-border/30 bg-card/50 opacity-60"
           : isCompleted
-            ? "cursor-pointer border-primary/15 bg-card hover:border-primary/25 hover:shadow-sm"
+            ? "cursor-pointer border-primary/15 bg-card hover:-translate-y-px hover:border-primary/25 hover:shadow-md"
             : isSecondary
-              ? "cursor-pointer border-border/10 bg-card/50 hover:border-border/25 hover:bg-card hover:shadow-sm dark:border-white/[0.04] dark:hover:border-white/[0.08]"
+              ? "cursor-pointer border-border/10 bg-card/50 hover:-translate-y-px hover:border-primary/25 hover:bg-card hover:shadow-md dark:border-white/[0.04]"
               : isHero
-                ? "cursor-pointer border-border/30 bg-card hover:-translate-y-0.5 hover:border-primary/25 hover:shadow-lg hover:shadow-black/5 dark:border-white/[0.08] dark:hover:shadow-black/20"
-                : "cursor-pointer border-border/20 bg-card hover:-translate-y-0.5 hover:border-primary/20 hover:shadow-lg hover:shadow-black/5 dark:hover:shadow-black/20"
+                ? "cursor-pointer border-border/30 bg-card hover:-translate-y-px hover:border-primary/25 hover:shadow-md dark:border-white/[0.08]"
+                : "cursor-pointer border-border/20 bg-card hover:-translate-y-px hover:border-primary/25 hover:shadow-md"
       }`}
       onClick={() => {
         if (!isLoading) {
diff --git a/apps/desktop/src/features/dashboard/components/ArtifactCard.tsx b/apps/desktop/src/features/dashboard/components/ArtifactCard.tsx
@@ -32,7 +32,7 @@ export function ArtifactCard({ artifact, specialistId, specialistName, onPreview
       tabIndex={onNavigate ? 0 : undefined}
       onClick={onNavigate ? handleClick : undefined}
       onKeyDown={onNavigate ? (e) => { if (e.key === "Enter" || e.key === " ") handleClick(); } : undefined}
-      className={`group/artifact relative rounded-lg border transition-all duration-100 hover:-translate-y-px hover:border-primary/30 hover:shadow-sm ${onNavigate ? "cursor-pointer" : ""} ${compact ? "p-2" : "p-3"}`}
+      className={`group/artifact relative rounded-lg border transition-all duration-100 ease-out hover:-translate-y-px hover:border-primary/25 hover:shadow-md ${onNavigate ? "cursor-pointer" : ""} ${compact ? "p-2" : "p-3"}`}
     >
       {/* Left accent bar */}
       <div
diff --git a/apps/desktop/src/features/dashboard/components/BundleCard.tsx b/apps/desktop/src/features/dashboard/components/BundleCard.tsx
@@ -24,7 +24,7 @@ export function BundleCard({ bundle, specialistId, specialistName, onPreview, on
   }
 
   return (
-    <div className="relative rounded-lg border transition-all duration-100 hover:border-primary/30">
+    <div className="relative rounded-lg border transition-all duration-100 ease-out hover:-translate-y-px hover:border-primary/25 hover:shadow-md">
       {/* Left accent bar — primary emerald for bundles */}
       <div className="absolute inset-y-0 left-0 w-[3px] rounded-l-[inherit] bg-primary opacity-60 transition-opacity hover:opacity-100" />
 
diff --git a/apps/desktop/src/features/dashboard/components/FeedItem.tsx b/apps/desktop/src/features/dashboard/components/FeedItem.tsx
@@ -23,7 +23,7 @@ export function FeedItemCard({ item }: FeedItemCardProps) {
   const Icon = item.icon;
 
   return (
-    <div className="group/feed relative flex flex-col overflow-hidden rounded-lg border border-border/50 bg-card/80 transition-all duration-150 hover:-translate-y-px hover:border-primary/30 hover:shadow-sm">
+    <div className="group/feed relative flex flex-col overflow-hidden rounded-lg border border-border/50 bg-card/80 transition-all duration-100 ease-out hover:-translate-y-px hover:border-primary/25 hover:shadow-md">
       <div
         className={`absolute inset-y-0 left-0 w-[3px] rounded-l-[inherit] ${item.accentColor} opacity-50 transition-opacity group-hover/feed:opacity-100`}
       />
diff --git a/apps/desktop/src/features/dashboard/components/HeroRecommendedMove.tsx b/apps/desktop/src/features/dashboard/components/HeroRecommendedMove.tsx
@@ -20,7 +20,7 @@ export function HeroRecommendedMove({
       <button
         type="button"
         onClick={() => onActionClick?.(recommendation.actionId)}
-        className="group/move mt-2.5 flex w-full items-center gap-3 rounded-xl border border-primary/15 bg-primary/[0.03] px-4 py-3.5 text-left transition-all duration-100 hover:-translate-y-px hover:border-primary/30 hover:bg-primary/[0.06] hover:shadow-sm hover:shadow-primary/5 dark:border-primary/10 dark:bg-primary/[0.03] dark:hover:border-primary/25 dark:hover:bg-primary/[0.06]"
+        className="group/move mt-2.5 flex w-full items-center gap-3 rounded-xl border border-primary/15 bg-primary/[0.03] px-4 py-3.5 text-left transition-all duration-100 ease-out hover:-translate-y-px hover:border-primary/25 hover:bg-primary/[0.06] hover:shadow-md dark:border-primary/10 dark:bg-primary/[0.03]"
       >
         <div className="flex size-8 shrink-0 items-center justify-center rounded-lg bg-primary/12 text-primary transition-colors duration-100 group-hover/move:bg-primary group-hover/move:text-white">
           <ZapIcon className="size-3.5" />
diff --git a/apps/desktop/src/features/dashboard/components/OpportunityCard.tsx b/apps/desktop/src/features/dashboard/components/OpportunityCard.tsx
@@ -31,7 +31,7 @@ export function OpportunityCard({ completedActions, opportunity, onActionClick,
     <div
       role="button"
       tabIndex={0}
-      className="group/insight relative flex flex-col overflow-hidden rounded-lg border border-border/50 bg-card/80 transition-all duration-150 hover:-translate-y-px hover:border-primary/30 hover:shadow-sm cursor-pointer"
+      className="group/insight relative flex flex-col overflow-hidden rounded-lg border border-border/50 bg-card/80 transition-all duration-100 ease-out hover:-translate-y-px hover:border-primary/25 hover:shadow-md cursor-pointer"
       onClick={handleCardClick}
       onKeyDown={(e) => { if (e.key === "Enter" || e.key === " ") { e.preventDefault(); handleCardClick(); } }}
     >
diff --git a/apps/desktop/src/features/dashboard/components/PlaybookCard.tsx b/apps/desktop/src/features/dashboard/components/PlaybookCard.tsx
@@ -64,7 +64,7 @@ export function PlaybookCard({ playbook, onClick }: PlaybookCardProps) {
 
   return (
     <Card
-      className="group/playbook relative flex flex-col overflow-hidden border border-border/50 bg-card/90 transition-all duration-100 cursor-pointer hover:-translate-y-px hover:border-primary/30 hover:shadow-md hover:shadow-primary/5"
+      className="group/playbook relative flex flex-col overflow-hidden border border-border/50 bg-card/90 transition-all duration-100 ease-out cursor-pointer hover:-translate-y-px hover:border-primary/25 hover:shadow-md"
       onClick={() => onClick?.(playbook)}
     >
       {/* Goal type accent — thin left border */}
diff --git a/apps/desktop/src/features/dashboard/components/RecentOutputs.tsx b/apps/desktop/src/features/dashboard/components/RecentOutputs.tsx
@@ -103,7 +103,7 @@ export function RecentOutputs({ agentId, client, onPreview, onNavigate, onSpecia
                 <button
                   key={example.name}
                   type="button"
-                  className="group/example flex flex-col items-start gap-2 rounded-lg border border-border/20 bg-card/50 p-3 text-left transition-all duration-100 hover:-translate-y-px hover:border-primary/20 hover:bg-card hover:shadow-sm dark:border-white/[0.04] dark:hover:border-primary/15 dark:hover:bg-white/[0.03]"
+                  className="group/example flex flex-col items-start gap-2 rounded-lg border border-border/20 bg-card/50 p-3 text-left transition-all duration-100 ease-out hover:-translate-y-px hover:border-primary/25 hover:bg-card hover:shadow-md dark:border-white/[0.04]"
                   onClick={() => onSpecialistChat?.(example.specialistId)}
                 >
                   {/* Type badge */}
diff --git a/apps/desktop/src/features/dashboard/components/RecommendedJobCard.tsx b/apps/desktop/src/features/dashboard/components/RecommendedJobCard.tsx
@@ -16,8 +16,8 @@ export function RecommendedJobCard({ job, isHero, onClick }: RecommendedJobCardP
       type="button"
       className={`group/job relative flex flex-col items-start gap-2.5 overflow-hidden rounded-xl border bg-card text-left transition-all duration-100 ease-out ${
         isHero
-          ? "border-primary/15 p-5 hover:-translate-y-0.5 hover:border-primary/30 hover:shadow-lg hover:shadow-primary/5 dark:border-primary/10 dark:hover:border-primary/25 dark:hover:shadow-primary/5"
-          : "border-border/20 p-4 hover:-translate-y-0.5 hover:border-primary/20 hover:shadow-md hover:shadow-black/5 dark:border-white/[0.06] dark:hover:shadow-black/20"
+          ? "border-primary/15 p-5 hover:-translate-y-px hover:border-primary/25 hover:shadow-md dark:border-primary/10"
+          : "border-border/20 p-4 hover:-translate-y-px hover:border-primary/25 hover:shadow-md dark:border-white/[0.06]"
       }`}
       onClick={() => onClick?.(job.id, buildActionPrompt(job), job.title)}
     >
diff --git a/test/ui/card-hover-states.test.ts b/test/ui/card-hover-states.test.ts
@@ -0,0 +1,147 @@
+import { describe, expect, it } from "vitest";
+import { readFileSync } from "node:fs";
+import { resolve } from "node:path";
+
+/**
+ * Per DESIGN.md, all interactive cards must share:
+ *   transition-all duration-100 ease-out
+ *   hover:-translate-y-px
+ *   hover:shadow-md
+ *   hover:border-primary/25
+ */
+
+const DASHBOARD_DIR = "apps/desktop/src/features/dashboard/components";
+const AGENTS_DIR = "apps/desktop/src/features/agents/components";
+
+function readComponent(dir: string, file: string): string {
+  return readFileSync(resolve(__dirname, "../..", dir, file), "utf-8");
+}
+
+const STANDARD_HOVER_CLASSES = [
+  "hover:-translate-y-px",
+  "hover:shadow-md",
+  "hover:border-primary/25",
+  "duration-100",
+];
+
+describe("Card hover states — DESIGN.md compliance", () => {
+  describe("ActionCardItem (dashboard specialist cards)", () => {
+    const src = readComponent(DASHBOARD_DIR, "ActionCardItem.tsx");
+
+    it("uses 100ms duration", () => {
+      expect(src).toContain("duration-100");
+    });
+
+    it("hero cards have hover:-translate-y-px", () => {
+      expect(src).toContain("hover:-translate-y-px");
+    });
+
+    it("hero cards have hover:shadow-md", () => {
+      expect(src).toContain("hover:shadow-md");
+    });
+
+    it("hero cards have hover:border-primary/25", () => {
+      expect(src).toContain("hover:border-primary/25");
+    });
+  });
+
+  describe("RecommendedJobCard (dashboard job cards)", () => {
+    const src = readComponent(DASHBOARD_DIR, "RecommendedJobCard.tsx");
+
+    for (const cls of STANDARD_HOVER_CLASSES) {
+      it(`has ${cls}`, () => {
+        expect(src).toContain(cls);
+      });
+    }
+  });
+
+  describe("ArtifactCard (dashboard output cards)", () => {
+    const src = readComponent(DASHBOARD_DIR, "ArtifactCard.tsx");
+
+    for (const cls of STANDARD_HOVER_CLASSES) {
+      it(`has ${cls}`, () => {
+        expect(src).toContain(cls);
+      });
+    }
+  });
+
+  describe("BundleCard (dashboard bundle cards)", () => {
+    const src = readComponent(DASHBOARD_DIR, "BundleCard.tsx");
+
+    for (const cls of STANDARD_HOVER_CLASSES) {
+      it(`has ${cls}`, () => {
+        expect(src).toContain(cls);
+      });
+    }
+  });
+
+  describe("PlaybookCard (dashboard playbook cards)", () => {
+    const src = readComponent(DASHBOARD_DIR, "PlaybookCard.tsx");
+
+    for (const cls of STANDARD_HOVER_CLASSES) {
+      it(`has ${cls}`, () => {
+        expect(src).toContain(cls);
+      });
+    }
+  });
+
+  describe("OpportunityCard (dashboard insight cards)", () => {
+    const src = readComponent(DASHBOARD_DIR, "OpportunityCard.tsx");
+
+    for (const cls of STANDARD_HOVER_CLASSES) {
+      it(`has ${cls}`, () => {
+        expect(src).toContain(cls);
+      });
+    }
+  });
+
+  describe("FeedItemCard (dashboard feed cards)", () => {
+    const src = readComponent(DASHBOARD_DIR, "FeedItem.tsx");
+
+    for (const cls of STANDARD_HOVER_CLASSES) {
+      it(`has ${cls}`, () => {
+        expect(src).toContain(cls);
+      });
+    }
+  });
+
+  describe("HeroRecommendedMove (dashboard hero CTA)", () => {
+    const src = readComponent(DASHBOARD_DIR, "HeroRecommendedMove.tsx");
+
+    for (const cls of STANDARD_HOVER_CLASSES) {
+      it(`has ${cls}`, () => {
+        expect(src).toContain(cls);
+      });
+    }
+  });
+
+  describe("RecentOutputs example cards (dashboard empty state)", () => {
+    const src = readComponent(DASHBOARD_DIR, "RecentOutputs.tsx");
+
+    for (const cls of STANDARD_HOVER_CLASSES) {
+      it(`has ${cls}`, () => {
+        expect(src).toContain(cls);
+      });
+    }
+  });
+
+  describe("SpecialistCard (agents page)", () => {
+    const src = readComponent(AGENTS_DIR, "SpecialistCard.tsx");
+
+    for (const cls of STANDARD_HOVER_CLASSES) {
+      it(`has ${cls}`, () => {
+        expect(src).toContain(cls);
+      });
+    }
+  });
+
+  describe("Non-interactive containers are NOT affected", () => {
+    it("BrainWorkspace does not use interactive hover translate", () => {
+      const src = readComponent(
+        "apps/desktop/src/features/brain/components",
+        "BrainWorkspace.tsx",
+      );
+      expect(src).not.toContain("hover:-translate-y-px");
+    });
+  });
+});

Original file line number	Diff line number	Diff line change
`@@ -32,7 +32,7 @@ export function ArtifactCard({ artifact, specialistId, specialistName, onPreview`
`32`	`32`	`tabIndex={onNavigate ? 0 : undefined}`
`33`	`33`	`onClick={onNavigate ? handleClick : undefined}`
`34`	`34`	`onKeyDown={onNavigate ? (e) => { if (e.key === "Enter" \|\| e.key === " ") handleClick(); } : undefined}`
`35`		- className={`group/artifact relative rounded-lg border transition-all duration-100 hover:-translate-y-px hover:border-primary/30 hover:shadow-sm ${onNavigate ? "cursor-pointer" : ""} ${compact ? "p-2" : "p-3"}`}
	`35`	+ className={`group/artifact relative rounded-lg border transition-all duration-100 ease-out hover:-translate-y-px hover:border-primary/25 hover:shadow-md ${onNavigate ? "cursor-pointer" : ""} ${compact ? "p-2" : "p-3"}`}
`36`	`36`	`>`
`37`	`37`	`{/* Left accent bar */}`
`38`	`38`	`<div`
Original file line number	Diff line number	Diff line change
`@@ -24,7 +24,7 @@ export function BundleCard({ bundle, specialistId, specialistName, onPreview, on`
`24`	`24`	`}`
`25`	`25`
`26`	`26`	`return (`
`27`		`- <div className="relative rounded-lg border transition-all duration-100 hover:border-primary/30">`
	`27`	`+ <div className="relative rounded-lg border transition-all duration-100 ease-out hover:-translate-y-px hover:border-primary/25 hover:shadow-md">`
`28`	`28`	`{/* Left accent bar — primary emerald for bundles */}`
`29`	`29`	`<div className="absolute inset-y-0 left-0 w-[3px] rounded-l-[inherit] bg-primary opacity-60 transition-opacity hover:opacity-100" />`
`30`	`30`
Original file line number	Diff line number	Diff line change
`@@ -20,7 +20,7 @@ export function HeroRecommendedMove({`
`20`	`20`	`<button`
`21`	`21`	`type="button"`
`22`	`22`	`onClick={() => onActionClick?.(recommendation.actionId)}`
`23`		`- className="group/move mt-2.5 flex w-full items-center gap-3 rounded-xl border border-primary/15 bg-primary/[0.03] px-4 py-3.5 text-left transition-all duration-100 hover:-translate-y-px hover:border-primary/30 hover:bg-primary/[0.06] hover:shadow-sm hover:shadow-primary/5 dark:border-primary/10 dark:bg-primary/[0.03] dark:hover:border-primary/25 dark:hover:bg-primary/[0.06]"`
	`23`	`+ className="group/move mt-2.5 flex w-full items-center gap-3 rounded-xl border border-primary/15 bg-primary/[0.03] px-4 py-3.5 text-left transition-all duration-100 ease-out hover:-translate-y-px hover:border-primary/25 hover:bg-primary/[0.06] hover:shadow-md dark:border-primary/10 dark:bg-primary/[0.03]"`
`24`	`24`	`>`
`25`	`25`	`<div className="flex size-8 shrink-0 items-center justify-center rounded-lg bg-primary/12 text-primary transition-colors duration-100 group-hover/move:bg-primary group-hover/move:text-white">`
`26`	`26`	`<ZapIcon className="size-3.5" />`
Original file line number	Diff line number	Diff line change
`@@ -31,7 +31,7 @@ export function OpportunityCard({ completedActions, opportunity, onActionClick,`
`31`	`31`	`<div`
`32`	`32`	`role="button"`
`33`	`33`	`tabIndex={0}`
`34`		`- className="group/insight relative flex flex-col overflow-hidden rounded-lg border border-border/50 bg-card/80 transition-all duration-150 hover:-translate-y-px hover:border-primary/30 hover:shadow-sm cursor-pointer"`
	`34`	`+ className="group/insight relative flex flex-col overflow-hidden rounded-lg border border-border/50 bg-card/80 transition-all duration-100 ease-out hover:-translate-y-px hover:border-primary/25 hover:shadow-md cursor-pointer"`
`35`	`35`	`onClick={handleCardClick}`
`36`	`36`	`onKeyDown={(e) => { if (e.key === "Enter" \|\| e.key === " ") { e.preventDefault(); handleCardClick(); } }}`
`37`	`37`	`>`
Original file line number	Diff line number	Diff line change
`@@ -64,7 +64,7 @@ export function PlaybookCard({ playbook, onClick }: PlaybookCardProps) {`
`64`	`64`
`65`	`65`	`return (`
`66`	`66`	`<Card`
`67`		`- className="group/playbook relative flex flex-col overflow-hidden border border-border/50 bg-card/90 transition-all duration-100 cursor-pointer hover:-translate-y-px hover:border-primary/30 hover:shadow-md hover:shadow-primary/5"`
	`67`	`+ className="group/playbook relative flex flex-col overflow-hidden border border-border/50 bg-card/90 transition-all duration-100 ease-out cursor-pointer hover:-translate-y-px hover:border-primary/25 hover:shadow-md"`
`68`	`68`	`onClick={() => onClick?.(playbook)}`
`69`	`69`	`>`
`70`	`70`	`{/* Goal type accent — thin left border */}`
Original file line number	Diff line number	Diff line change
`@@ -103,7 +103,7 @@ export function RecentOutputs({ agentId, client, onPreview, onNavigate, onSpecia`
`103`	`103`	`<button`
`104`	`104`	`key={example.name}`
`105`	`105`	`type="button"`
`106`		`- className="group/example flex flex-col items-start gap-2 rounded-lg border border-border/20 bg-card/50 p-3 text-left transition-all duration-100 hover:-translate-y-px hover:border-primary/20 hover:bg-card hover:shadow-sm dark:border-white/[0.04] dark:hover:border-primary/15 dark:hover:bg-white/[0.03]"`
	`106`	`+ className="group/example flex flex-col items-start gap-2 rounded-lg border border-border/20 bg-card/50 p-3 text-left transition-all duration-100 ease-out hover:-translate-y-px hover:border-primary/25 hover:bg-card hover:shadow-md dark:border-white/[0.04]"`
`107`	`107`	`onClick={() => onSpecialistChat?.(example.specialistId)}`
`108`	`108`	`>`
`109`	`109`	`{/* Type badge */}`