feat(agents): "save as persona template" on agent card + sidebar

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

@@ -0,0 +1,155 @@
+import {
+  BookmarkPlus,
+  Clipboard,
+  FileText,
+  Pencil,
+  Play,
+  Power,
+  Square,
+  Trash2,
+  UserPlus,
+} from "lucide-react";
+import { toast } from "sonner";
+
+import { isManagedAgentActive } from "@/features/agents/lib/managedAgentControlActions";
+import type { ManagedAgent } from "@/shared/api/types";
+import {
+  DropdownMenuItem,
+  DropdownMenuSeparator,
+} from "@/shared/ui/dropdown-menu";
+
+export type AgentMenuProps = {
+  isActionPending: boolean;
+  onAddToChannel: (agent: ManagedAgent) => void;
+  onDelete: (pubkey: string) => void;
+  onOpenLogs: (pubkey: string) => void;
+  onSaveAsTemplate: (agent: ManagedAgent) => void;
+  onStart: (pubkey: string) => void;
+  onStop: (pubkey: string) => void;
+  onToggleStartOnAppLaunch: (pubkey: string, startOnAppLaunch: boolean) => void;
+};
+
+/**
+ * The shared dropdown-menu item list for a managed agent. Rendered inside the
+ * standalone-agent menu, the persona-backed-agent menu, and the agent card
+ * menu — kept here so all three stay in lockstep.
+ */
+export function AgentActionItems({
+  agent,
+  isActionPending,
+  onAddToChannel,
+  onDelete,
+  onEdit,
+  onOpenLogs,
+  onSaveAsTemplate,
+  onStart,
+  onStop,
+  onToggleStartOnAppLaunch,
+}: { agent: ManagedAgent; onEdit?: () => void } & AgentMenuProps) {
+  const isActive = isManagedAgentActive(agent);
+
+  return (
+    <>
+      {agent.backend.type === "provider" ? (
+        <>
+          <DropdownMenuItem
+            disabled={isActionPending}
+            onClick={() => onStart(agent.pubkey)}
+          >
+            <Play className="h-4 w-4" />
+            {isActive ? "Redeploy" : "Deploy"}
+          </DropdownMenuItem>
+          <DropdownMenuItem
+            disabled={isActionPending}
+            onClick={() => onStop(agent.pubkey)}
+          >
+            <Square className="h-4 w-4" />
+            Shutdown
+          </DropdownMenuItem>
+        </>
+      ) : isActive ? (
+        <DropdownMenuItem
+          disabled={isActionPending}
+          onClick={() => onStop(agent.pubkey)}
+        >
+          <Square className="h-4 w-4" />
+          Stop
+        </DropdownMenuItem>
+      ) : (
+        <DropdownMenuItem
+          disabled={isActionPending}
+          onClick={() => onStart(agent.pubkey)}
+        >
+          <Play className="h-4 w-4" />
+          Spawn
+        </DropdownMenuItem>
+      )}
+
+      {agent.backend.type !== "provider" && onEdit ? (
+        <DropdownMenuItem onClick={onEdit}>
+          <Pencil className="h-4 w-4" />
+          Edit agent
+        </DropdownMenuItem>
+      ) : null}
+
+      {/* Opt-in promote — hidden for persona-backed agents (already reusable). */}
+      {!agent.personaId ? (
+        <DropdownMenuItem
+          disabled={isActionPending}
+          onClick={() => onSaveAsTemplate(agent)}
+        >
+          <BookmarkPlus className="h-4 w-4" />
+          Save as persona template
+        </DropdownMenuItem>
+      ) : null}
+
+      <DropdownMenuItem
+        disabled={isActionPending}
+        onClick={() => onAddToChannel(agent)}
+      >
+        <UserPlus className="h-4 w-4" />
+        Add to channel
+      </DropdownMenuItem>
+
+      <DropdownMenuItem
+        onClick={async () => {
+          await navigator.clipboard.writeText(agent.pubkey);
+          toast.success("Copied pubkey to clipboard");
+        }}
+      >
+        <Clipboard className="h-4 w-4" />
+        Copy pubkey
+      </DropdownMenuItem>
+
+      {agent.backend.type === "local" ? (
+        <DropdownMenuItem onClick={() => onOpenLogs(agent.pubkey)}>
+          <FileText className="h-4 w-4" />
+          View logs
+        </DropdownMenuItem>
+      ) : null}
+
+      {agent.backend.type === "local" ? (
+        <DropdownMenuItem
+          disabled={isActionPending}
+          onClick={() =>
+            onToggleStartOnAppLaunch(agent.pubkey, !agent.startOnAppLaunch)
+          }
+        >
+          <Power className="h-4 w-4" />
+          {agent.startOnAppLaunch ? "Disable auto-start" : "Enable auto-start"}
+        </DropdownMenuItem>
+      ) : null}
+
+      <DropdownMenuSeparator />
+
+      <DropdownMenuItem
+        className="text-destructive focus:text-destructive"
+        disabled={isActionPending}
+        onClick={() => onDelete(agent.pubkey)}
+      >
+        <Trash2 className="h-4 w-4" />
+        Delete
+      </DropdownMenuItem>
+    </>
+  );
+}

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

@@ -100,6 +100,7 @@ export function AgentsView() {
               onDeleteAgent={(pubkey) => {
                 void agents.handleDelete(pubkey);
               }}
+              onSaveAsTemplate={personas.openSaveAsTemplate}
               onSelectLogAgent={agents.setLogAgentPubkey}
               onStartAgent={(pubkey) => {
                 void agents.handleStart(pubkey);

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;
+}