Simplify agents and teams cards

desktop/src/features/agents/lib/formatAgentModelLabel.ts

@@ -0,0 +1,8 @@
+/**
+ * Returns a human-readable model label for an agent or persona, falling back to
+ * "Auto" when no model is set (empty or whitespace-only).
+ */
+export function formatAgentModelLabel(model: string | null | undefined) {
+  const trimmed = model?.trim();
+  return trimmed && trimmed.length > 0 ? trimmed : "Auto";
+}

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

@@ -0,0 +1,91 @@
+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;
+  errorLabel?: string | null;
+  modelControl?: ReactNode;
+  modelLabel: string;
+  onClick: () => void;
+  status?: ReactNode;
+};
+
+export function AgentIdentityCard({
+  actions,
+  ariaLabel,
+  avatarUrl,
+  dataTestId,
+  errorLabel,
+  label,
+  modelControl,
+  modelLabel,
+  onClick,
+  status,
+}: 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}
+
+      {status ? (
+        <div className="absolute top-3 left-3 z-30 flex max-w-[calc(100%-4rem)] flex-wrap items-center gap-1.5">
+          {status}
+        </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>
+        {modelControl ?? (
+          <span className="min-w-0 truncate font-normal text-secondary-foreground/75">
+            {modelLabel}
+          </span>
+        )}
+        {errorLabel ? (
+          <span
+            className="min-w-0 truncate text-2xs font-medium text-destructive"
+            title={errorLabel}
+          >
+            {errorLabel}
+          </span>
+        ) : null}
+      </div>
+    </div>
+  );
+}

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

@@ -75,13 +75,6 @@ export function AgentsView() {
               }
               isActionPending={isActionPending}
               isAgentsLoading={agents.managedAgentsQuery.isLoading}
-              logContent={agents.managedAgentLogQuery.data?.content ?? null}
-              logError={
-                agents.managedAgentLogQuery.error instanceof Error
-                  ? agents.managedAgentLogQuery.error
-                  : null
-              }
-              logLoading={agents.managedAgentLogQuery.isLoading}
               personaLabelsById={personas.personaLabelsById}
               presenceLoaded={agents.managedPresenceQuery.isSuccess}
               presenceLookup={agents.managedPresenceQuery.data ?? {}}
@@ -100,8 +93,6 @@ export function AgentsView() {
               onOpenPersonaProfile={(persona) => {
                 openPersonaProfilePanel?.(persona);
               }}
-              onSelectLogAgent={agents.setLogAgentPubkey}
-              selectedLogAgentPubkey={agents.logAgentPubkey}
               // Persona props
               canChooseCatalog={personas.catalogPersonas.length > 0}
               personas={personas.libraryPersonas}

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 textSizeClassName = size >= 80 ? "text-3xl" : "text-xl";
+
+  return (
+    <span
+      className={cn(
+        "flex h-full w-full items-center justify-center rounded-full border-[3px] border-background font-semibold shadow-sm",
+        colorClassName,
+        textSizeClassName,
+        className,
+      )}
+    >
+      {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;
+}