From 8bc0af21cd4ed883c76df8bc1591ca613f551e4d Mon Sep 17 00:00:00 2001
From: tulsi <tulsi@block.xyz>
Date: Wed, 29 Apr 2026 10:53:06 -0700
Subject: [PATCH] =?UTF-8?q?feat(goose2):=20Alex=20redesign=20=E2=80=94=20t?=
 =?UTF-8?q?ighten=20agents=20page?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- Card and figure sized down ~20% (w-200→160, h-420→336) for a tighter grid.
- Persona name promoted out of the description paragraph onto its own row
  above the body, so the pill reads as a label rather than an inline prefix.
- Gallery container switches from fixed gap-32 to justify-evenly with a gap-8
  floor — cards redistribute evenly when the sidebar collapses and fall back
  to horizontal scroll when they overflow.
- SkeletonCard updated to match the new dimensions and the split
  name/description layout.

Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
---
 ui/goose2/src/features/agents/ui/PersonaCard.tsx    | 11 +++++++----
 ui/goose2/src/features/agents/ui/PersonaGallery.tsx | 13 +++++++------
 2 files changed, 14 insertions(+), 10 deletions(-)

diff --git a/ui/goose2/src/features/agents/ui/PersonaCard.tsx b/ui/goose2/src/features/agents/ui/PersonaCard.tsx
index 6bc046671d..246ebeca6a 100644
--- a/ui/goose2/src/features/agents/ui/PersonaCard.tsx
+++ b/ui/goose2/src/features/agents/ui/PersonaCard.tsx
@@ -76,14 +76,14 @@ export function PersonaCard({
       onKeyDown={handleCardKeyDown}
       tabIndex={0}
       className={cn(
-        "group relative flex w-[200px] shrink-0 cursor-pointer flex-col py-4",
+        "group relative flex w-[160px] shrink-0 cursor-pointer flex-col py-4",
         "transition-colors duration-200",
         isActive && "bg-black/[0.03]",
       )}
     >
       {/* Fixed-height figure box: figure aligned to bottom, centered horizontally;
           wider figures bleed into the gap between cells (intentional editorial overflow) */}
-      <div className="flex h-[420px] w-full items-end justify-center">
+      <div className="flex h-[336px] w-full items-end justify-center">
         <img
           src={resolvePersonaFigure(persona.displayName)}
           alt=""
@@ -94,10 +94,13 @@ export function PersonaCard({
 
       <div className="mt-4 h-px w-full bg-black/30" />
 
-      <p className="mt-4 line-clamp-6 h-[144px] w-full text-[16px] leading-[24px] text-[var(--text-muted-alex)]">
-        <span className="mr-1 inline-flex h-5 items-center rounded-full bg-[var(--surface-button)] px-[6px] pb-[3px] align-middle text-[14px] text-[var(--text-title-alex)]">
+      <div className="mt-4 w-full">
+        <span className="inline-flex h-5 items-center rounded-full bg-[var(--surface-button)] px-[6px] pb-[3px] text-[14px] text-[var(--text-title-alex)]">
           {persona.displayName}
         </span>
+      </div>
+
+      <p className="mt-2 line-clamp-6 h-[144px] w-full text-[16px] leading-[24px] text-[var(--text-muted-alex)]">
         {persona.systemPrompt}
       </p>
 
diff --git a/ui/goose2/src/features/agents/ui/PersonaGallery.tsx b/ui/goose2/src/features/agents/ui/PersonaGallery.tsx
index fc8638d115..4c05c0edc4 100644
--- a/ui/goose2/src/features/agents/ui/PersonaGallery.tsx
+++ b/ui/goose2/src/features/agents/ui/PersonaGallery.tsx
@@ -20,12 +20,13 @@ interface PersonaGalleryProps {
 
 function SkeletonCard() {
   return (
-    <div aria-hidden="true" className="flex w-[200px] shrink-0 flex-col py-4">
-      <div className="flex h-[420px] w-full items-end justify-center">
-        <Skeleton className="h-full w-[140px]" />
+    <div aria-hidden="true" className="flex w-[160px] shrink-0 flex-col py-4">
+      <div className="flex h-[336px] w-full items-end justify-center">
+        <Skeleton className="h-full w-[112px]" />
       </div>
       <Skeleton className="mt-4 h-px w-full" />
-      <Skeleton className="mt-4 h-[144px] w-full" />
+      <Skeleton className="mt-4 h-5 w-24 rounded-full" />
+      <Skeleton className="mt-2 h-[144px] w-full" />
     </div>
   );
 }
@@ -58,7 +59,7 @@ export function PersonaGallery({
       <section
         role="status"
         aria-label={t("gallery.loading")}
-        className="flex h-full items-center gap-32 overflow-x-auto px-16"
+        className="flex h-full items-center justify-evenly gap-8 overflow-x-auto px-16"
       >
         <SkeletonCard />
         <SkeletonCard />
@@ -72,7 +73,7 @@ export function PersonaGallery({
     <section
       {...dropHandlers}
       className={cn(
-        "flex h-full items-center gap-32 overflow-x-auto px-16 transition-colors",
+        "flex h-full items-center justify-evenly gap-8 overflow-x-auto px-16 transition-colors",
         isDragOver && "ring-2 ring-ring ring-offset-2 ring-inset",
       )}
     >