Simplify agents and teams cards

desktop/src/features/agents/ui/AgentIdentityCard.tsx

@@ -0,0 +1,69 @@
+import type { ReactNode } from "react";
+
+import { ProfileAvatar } from "@/features/profile/ui/ProfileAvatar";
+import { cn } from "@/shared/lib/cn";
+import { IdentityInitialsAvatar } from "./IdentityInitialsAvatar";
+
+type AgentIdentityCardProps = {
+  actions?: ReactNode;
+  ariaLabel: string;
+  avatarUrl?: string | null;
+  dataTestId: string;
+  label: string;
+  modelLabel: string;
+  onClick: () => void;
+};
+
+export function AgentIdentityCard({
+  actions,
+  ariaLabel,
+  avatarUrl,
+  dataTestId,
+  label,
+  modelLabel,
+  onClick,
+}: AgentIdentityCardProps) {
+  const trimmedAvatarUrl = avatarUrl?.trim() || null;
+
+  return (
+    <div
+      className={cn(
+        "group relative aspect-[4/5] w-full min-w-0 overflow-hidden rounded-xl border border-border/70 bg-muted/50 text-left shadow-xs transition-colors hover:border-border hover:bg-muted/65",
+      )}
+      data-testid={dataTestId}
+    >
+      <button
+        aria-label={ariaLabel}
+        className="flex h-full w-full min-w-0 flex-col items-center justify-center gap-5 px-4 pb-12 text-center focus-visible:outline-hidden focus-visible:ring-2 focus-visible:ring-ring"
+        onClick={onClick}
+        type="button"
+      >
+        <div className="flex h-24 w-24 items-center justify-center">
+          {trimmedAvatarUrl ? (
+            <ProfileAvatar
+              avatarUrl={trimmedAvatarUrl}
+              className="h-full w-full border-[3px] border-background bg-muted shadow-sm"
+              iconClassName="h-8 w-8"
+              label={label}
+            />
+          ) : (
+            <IdentityInitialsAvatar label={label} size={96} />
+          )}
+        </div>
+      </button>
+
+      {actions ? (
+        <div className="absolute top-3 right-3 z-40">{actions}</div>
+      ) : null}
+
+      <div className="absolute right-3 bottom-3 left-3 z-30 flex min-w-0 flex-col gap-0.5 text-left text-sm leading-5">
+        <span className="min-w-0 truncate font-semibold text-foreground tracking-normal">
+          {label}
+        </span>
+        <span className="min-w-0 truncate font-normal text-secondary-foreground/75">
+          {modelLabel}
+        </span>
+      </div>
+    </div>
+  );
+}

desktop/src/features/agents/ui/CreateIdentityCard.tsx

@@ -0,0 +1,37 @@
+import * as React from "react";
+import { Plus } from "lucide-react";
+
+import { cn } from "@/shared/lib/cn";
+
+type CreateIdentityCardProps = React.ButtonHTMLAttributes<HTMLButtonElement> & {
+  ariaLabel: string;
+  dataTestId: string;
+  label: string;
+};
+
+export const CreateIdentityCard = React.forwardRef<
+  HTMLButtonElement,
+  CreateIdentityCardProps
+>(function CreateIdentityCard(
+  { ariaLabel, className, dataTestId, label, ...buttonProps },
+  ref,
+) {
+  return (
+    <button
+      aria-label={ariaLabel}
+      className={cn(
+        "group relative flex aspect-[4/5] w-full min-w-0 items-center justify-center overflow-hidden rounded-xl border border-dashed border-border/80 bg-transparent text-muted-foreground shadow-xs transition-colors hover:border-border hover:bg-muted/70 hover:text-foreground focus-visible:outline-hidden focus-visible:ring-2 focus-visible:ring-ring",
+        className,
+      )}
+      data-testid={dataTestId}
+      ref={ref}
+      type="button"
+      {...buttonProps}
+    >
+      <span className="flex flex-col items-center justify-center gap-2 text-center">
+        <Plus className="h-7 w-7 transition-colors" />
+        <span className="text-sm font-medium leading-5">{label}</span>
+      </span>
+    </button>
+  );
+});

desktop/src/features/agents/ui/IdentityInitialsAvatar.tsx

@@ -0,0 +1,59 @@
+import { UserRound } from "lucide-react";
+
+import { getInitials } from "@/shared/lib/initials";
+import { cn } from "@/shared/lib/cn";
+
+const IDENTITY_INITIAL_AVATAR_CLASS_NAMES = [
+  "bg-muted text-foreground",
+  "bg-secondary text-secondary-foreground",
+  "bg-accent text-accent-foreground",
+  "bg-card text-card-foreground",
+  "bg-popover text-popover-foreground",
+  "bg-background text-foreground",
+] as const;
+
+type IdentityInitialsAvatarProps = {
+  className?: string;
+  colorIndex?: number;
+  colorSeed?: string;
+  label: string;
+  size: number;
+};
+
+export function IdentityInitialsAvatar({
+  className,
+  colorIndex,
+  colorSeed,
+  label,
+  size,
+}: IdentityInitialsAvatarProps) {
+  const initials = getInitials(label);
+  const seed = colorSeed ?? (label || "agent");
+  const paletteIndex = colorIndex ?? getStableColorIndex(seed);
+  const colorClassName =
+    IDENTITY_INITIAL_AVATAR_CLASS_NAMES[
+      paletteIndex % IDENTITY_INITIAL_AVATAR_CLASS_NAMES.length
+    ];
+  const fontSize = Math.round(Math.min(40, Math.max(22, size * 0.28)));
+
+  return (
+    <span
+      className={cn(
+        "flex h-full w-full items-center justify-center rounded-full border-[3px] border-background font-semibold shadow-sm",
+        colorClassName,
+        className,
+      )}
+      style={{ fontSize }}
+    >
+      {initials.length > 0 ? initials : <UserRound className="h-8 w-8" />}
+    </span>
+  );
+}
+
+function getStableColorIndex(seed: string) {
+  let hash = 0;
+  for (let index = 0; index < seed.length; index += 1) {
+    hash = (hash * 31 + seed.charCodeAt(index)) >>> 0;
+  }
+  return hash;
+}

desktop/src/features/agents/ui/TeamIdentityCard.tsx

@@ -0,0 +1,180 @@
+import type { ReactNode } from "react";
+import { Link, Users } from "lucide-react";
+
+import { ProfileAvatar } from "@/features/profile/ui/ProfileAvatar";
+import type { AgentPersona } from "@/shared/api/types";
+import { Card } from "@/shared/ui/card";
+import { Tooltip, TooltipContent, TooltipTrigger } from "@/shared/ui/tooltip";
+import { IdentityInitialsAvatar } from "./IdentityInitialsAvatar";
+
+type TeamIdentityCardProps = {
+  actions: ReactNode;
+  children?: ReactNode;
+  dataTestId: string;
+  description?: string | null;
+  isSymlink?: boolean;
+  memberCount: number;
+  personas: AgentPersona[];
+  sourceDir?: string | null;
+  symlinkTarget?: string | null;
+  teamId: string;
+  teamName: string;
+  version?: string | null;
+};
+
+const MAX_VISIBLE_MEMBER_AVATARS = 4;
+
+export function TeamIdentityCard({
+  actions,
+  children,
+  dataTestId,
+  isSymlink = false,
+  memberCount,
+  personas,
+  sourceDir,
+  symlinkTarget,
+  teamName,
+  version,
+}: TeamIdentityCardProps) {
+  const footerModelLabel = getTeamFooterModelLabel(personas);
+
+  return (
+    <Card
+      className="min-w-0 overflow-hidden p-0 transition-colors hover:border-border hover:bg-muted/65"
+      data-testid={dataTestId}
+    >
+      <div className="relative aspect-[4/5] min-w-0 overflow-hidden bg-muted/50">
+        <div className="absolute top-3 left-3 z-30 flex max-w-[calc(100%-4rem)] flex-wrap items-center gap-1.5">
+          {isSymlink ? (
+            <Tooltip>
+              <TooltipTrigger asChild>
+                <span className="flex h-6 w-6 items-center justify-center rounded-full border border-border/65 bg-background/90 text-muted-foreground shadow-xs">
+                  <Link className="h-3.5 w-3.5" />
+                </span>
+              </TooltipTrigger>
+              <TooltipContent side="bottom" className="max-w-xs">
+                <p>Linked from {symlinkTarget ?? sourceDir}</p>
+              </TooltipContent>
+            </Tooltip>
+          ) : null}
+          {version ? (
+            <span className="rounded-full border border-border/65 bg-background/90 px-2 py-1 text-2xs font-medium leading-none text-muted-foreground shadow-xs">
+              v{version}
+            </span>
+          ) : null}
+        </div>
+
+        <div className="absolute top-3 right-3 z-40">{actions}</div>
+
+        <TeamAvatarRow
+          memberCount={memberCount}
+          personas={personas}
+          teamName={teamName}
+        />
+
+        <div className="absolute right-3 bottom-3 left-3 z-30 flex min-w-0 flex-col gap-0.5 text-left text-sm leading-5">
+          <span className="min-w-0 truncate font-semibold tracking-normal text-foreground">
+            {teamName}
+          </span>
+          <span className="min-w-0 truncate font-normal text-secondary-foreground/75">
+            {footerModelLabel}
+          </span>
+        </div>
+      </div>
+      {children}
+    </Card>
+  );
+}
+
+function TeamAvatarRow({
+  memberCount,
+  personas,
+  teamName,
+}: {
+  memberCount: number;
+  personas: AgentPersona[];
+  teamName: string;
+}) {
+  const visiblePersonas = personas.slice(0, MAX_VISIBLE_MEMBER_AVATARS);
+  const overflowCount = Math.max(0, memberCount - visiblePersonas.length);
+
+  if (visiblePersonas.length === 0 && overflowCount === 0) {
+    return (
+      <div className="absolute inset-x-4 top-0 bottom-12 flex items-center justify-center">
+        <div className="flex h-24 w-24 items-center justify-center rounded-full border border-border/65 bg-background/80 text-muted-foreground shadow-xs">
+          <Users className="h-9 w-9" />
+        </div>
+      </div>
+    );
+  }
+
+  return (
+    <div className="absolute inset-x-0 top-0 bottom-12 flex items-center justify-center">
+      <div
+        aria-label={`${teamName} member avatars`}
+        className="flex max-w-full items-center justify-center gap-2 px-4"
+        role="img"
+      >
+        {visiblePersonas.map((persona, index) => (
+          <TeamAvatarItem index={index} key={persona.id} persona={persona} />
+        ))}
+        {overflowCount > 0 ? (
+          <span className="flex h-14 w-14 items-center justify-center rounded-full border-[3px] border-background bg-card text-sm font-semibold text-muted-foreground shadow-sm">
+            +{overflowCount}
+          </span>
+        ) : null}
+      </div>
+    </div>
+  );
+}
+
+function TeamAvatarItem({
+  index,
+  persona,
+}: {
+  index: number;
+  persona: AgentPersona;
+}) {
+  const avatarUrl = persona.avatarUrl?.trim() ?? null;
+
+  return (
+    <div className="h-14 w-14" data-team-member-avatar="avatar">
+      {avatarUrl ? (
+        <ProfileAvatar
+          avatarUrl={avatarUrl}
+          className="h-full w-full border-[3px] border-background bg-muted shadow-sm"
+          iconClassName="h-6 w-6"
+          label={persona.displayName}
+          testId={`team-member-avatar-${persona.id}`}
+        />
+      ) : (
+        <IdentityInitialsAvatar
+          colorIndex={index}
+          label={persona.displayName}
+          size={56}
+        />
+      )}
+    </div>
+  );
+}
+
+function getTeamFooterModelLabel(personas: AgentPersona[]) {
+  const modelLabels = personas
+    .map((persona) => formatFooterModelLabel(persona.model))
+    .filter((model): model is string => Boolean(model));
+
+  if (modelLabels.length === 0) return "Auto";
+
+  const uniqueModels = new Map(
+    modelLabels.map((model) => [model.toLowerCase(), model]),
+  );
+
+  return uniqueModels.size === 1
+    ? (uniqueModels.values().next().value ?? "Auto")
+    : "Mixed models";
+}
+
+function formatFooterModelLabel(model: string | null | undefined) {
+  const trimmed = model?.trim();
+  return trimmed && trimmed.length > 0 ? trimmed : "Auto";
+}