feat(desktop): emoji avatar picker for agents + reliable picker scroll (#1576)

Signed-off-by: npub13fn4ahfnvaa2qwylvegdgeajqs0mph6v4qsw4jcqnw4mjh3hzh2quuucm5 <8a675edd33677aa0389f6650d467b2041fb0df4ca820eacb009babb95e3715d4@sprout-oss.stage.blox.sqprod.co> Co-authored-by: npub1n6taw59js7ztz8pt9vma9uqx6g3gcvrwg37nmx9m8lq88yla0tjqfy2ncn <9e97d750b28784b11c2b2b37d2f006d2228c306e447d3d98bb3fc07393fd7ae4@sprout-oss.stage.blox.sqprod.co> Co-authored-by: npub13fn4ahfnvaa2qwylvegdgeajqs0mph6v4qsw4jcqnw4mjh3hzh2quuucm5 <8a675edd33677aa0389f6650d467b2041fb0df4ca820eacb009babb95e3715d4@sprout-oss.stage.blox.sqprod.co>
2026-08-18 06:50:31 +02:00 · 2026-07-07 07:16:31 -07:00
parent 1f5ba5bb27
commit ed84a87358
7 changed files with 758 additions and 198 deletions
@@ -25,6 +25,7 @@ const rules = [
 const overrides = new Set([
  "src/features/settings/ui/ProfileSettingsCard.tsx:584",
  "src/features/onboarding/ui/AvatarStep.tsx:89",
+  "src/features/agents/ui/AgentCreationPreview.tsx:711",
 ]);

 await runPxTextCheck({
@@ -6,6 +6,7 @@ import {
 } from "@/features/agents/agentReuse";
 export { findReusableAgent } from "@/features/agents/agentReuse";
 import { normalizePubkey } from "@/shared/lib/pubkey";
+import { resolveManagedAgentAvatarUrl } from "@/features/agents/ui/managedAgentAvatar";
 import {
  addChannelMembers,
  createManagedAgent,
@@ -13,7 +14,6 @@ import {
  listManagedAgents,
  startManagedAgent,
  updateManagedAgent,
-  uploadMediaBytes,
 } from "@/shared/api/tauri";
 import type {
  AcpRuntime,
@@ -341,21 +341,12 @@ export async function createChannelManagedAgent(
    }
  }

-  // If the avatar is a data URI (e.g. from a persona PNG card import),
-  // upload it to get a hosted URL the relay can serve.
-  let resolvedAvatarUrl = input.avatarUrl?.trim() || undefined;
-  if (resolvedAvatarUrl?.startsWith("data:image/")) {
-    try {
-      const [, b64] = resolvedAvatarUrl.split(",", 2);
-      if (!b64) throw new Error("empty data URI payload");
-      const bytes = Array.from(atob(b64), (c) => c.charCodeAt(0));
-      const blob = await uploadMediaBytes(bytes);
-      resolvedAvatarUrl = blob.url;
-    } catch (err) {
-      console.warn("Avatar upload failed, proceeding without avatar:", err);
-      resolvedAvatarUrl = undefined;
-    }
-  }
+  // Resolve the avatar for the channel-managed agent. Base64 data URIs (e.g.
+  // from a persona PNG card import) are uploaded to a hosted URL the relay can
+  // serve; percent-encoded emoji SVG data URLs pass through unchanged so the
+  // selected emoji survives deployment. Shared with agent creation so both
+  // paths handle emoji avatars identically.
+  const resolvedAvatarUrl = await resolveManagedAgentAvatarUrl(input.avatarUrl);

  const isProviderMode = input.backend?.type === "provider";

@@ -1,14 +1,43 @@
+import emojiData from "@emoji-mart/data";
+import Picker from "@emoji-mart/react";
 import * as React from "react";
-import { Pencil, Plus } from "lucide-react";
+import { Link2, Pencil, Plus, UploadCloud } from "lucide-react";
 import { AnimatePresence, motion, useReducedMotion } from "motion/react";

+import { MaskedAvatarBadgeFrame } from "@/features/profile/ui/MaskedAvatarBadgeFrame";
 import { ProfileAvatar } from "@/features/profile/ui/ProfileAvatar";
+import {
+  AVATAR_COLORS,
+  AVATAR_COLOR_SWATCHES,
+  CUSTOM_AVATAR_COLOR_SWATCH,
+  DEFAULT_CUSTOM_HUE,
+  DEFAULT_CUSTOM_SATURATION,
+  DEFAULT_CUSTOM_VALUE,
+  DEFAULT_EMOJI_AVATAR_COLOR,
+  EMOJI_MART_CATEGORIES,
+  type AvatarColorSwatch,
+  contrastColorForBackground,
+  emojiAvatarDataUrl,
+  hexToHsv,
+  hsvToHex,
+  normalizeHue,
+  parseEmojiAvatarDataUrl,
+  useEmojiMartStyles,
+  useEmojiMartThemeVars,
+} from "@/features/profile/ui/ProfileAvatarEditor.utils";
+import { AvatarCustomColorPanel } from "@/features/profile/ui/AvatarCustomColorPanel";
 import { useAvatarUpload } from "@/features/profile/useAvatarUpload";
 import { cn } from "@/shared/lib/cn";
 import { Button } from "@/shared/ui/button";
-import { Input } from "@/shared/ui/input";
-import { Popover, PopoverContent, PopoverTrigger } from "@/shared/ui/popover";
+import { useEmojiBurst } from "@/shared/ui/EmojiBurstProvider";
+import {
+  Popover,
+  PopoverAnchor,
+  PopoverContent,
+  PopoverTrigger,
+} from "@/shared/ui/popover";
 import { Spinner } from "@/shared/ui/spinner";
+import { Tabs, TabsList, TabsTrigger } from "@/shared/ui/tabs";

 function isAvatarFileDrag(event: React.DragEvent<HTMLElement>) {
  return Array.from(event.dataTransfer.types).includes("Files");
@@ -19,6 +48,12 @@ const AVATAR_APPLY_MOTION_TRANSITION = {
  ease: [0.23, 1, 0.32, 1],
 } as const;

+type AvatarTab = "image" | "emoji";
+
+type EmojiMartEmoji = {
+  native?: string;
+};
+
 export function AgentCreationPreview({
  avatarUrl,
  disabled = false,
@@ -34,14 +69,34 @@ export function AgentCreationPreview({
  onUploadPendingChange?: (isPending: boolean) => void;
  onSelectAvatar: (avatarUrl: string) => void;
 }) {
-  const avatarEditClipId = React.useId().replace(/:/g, "");
  const [isDragOverAvatar, setIsDragOverAvatar] = React.useState(false);
  const [isAvatarMenuOpen, setIsAvatarMenuOpen] = React.useState(false);
  const [avatarUrlDraft, setAvatarUrlDraft] = React.useState("");
-  const [isAvatarUrlInputFocused, setIsAvatarUrlInputFocused] =
+  const [activeTab, setActiveTab] = React.useState<AvatarTab>("image");
+  const [selectedEmoji, setSelectedEmoji] = React.useState<string | null>(null);
+  const [selectedColor, setSelectedColor] = React.useState(
+    DEFAULT_EMOJI_AVATAR_COLOR,
+  );
+  // Whether the user has explicitly picked a color swatch (vs. the default).
+  // The color grid is always visible, so a user can choose a background color
+  // before their first emoji — in that case the first emoji must honor the
+  // chosen color instead of a random one.
+  const [hasChosenColor, setHasChosenColor] = React.useState(false);
+  const [customHue, setCustomHue] = React.useState(DEFAULT_CUSTOM_HUE);
+  const [customSaturation, setCustomSaturation] = React.useState(
+    DEFAULT_CUSTOM_SATURATION,
+  );
+  const [customValue, setCustomValue] = React.useState(DEFAULT_CUSTOM_VALUE);
+  const [isCustomColorPickerOpen, setIsCustomColorPickerOpen] =
    React.useState(false);
+  const [isPopoverDragOver, setIsPopoverDragOver] = React.useState(false);
+  const [squishKey, setSquishKey] = React.useState(0);
  const avatarDragDepthRef = React.useRef(0);
+  const popoverDragDepthRef = React.useRef(0);
  const shouldReduceMotion = useReducedMotion();
+  const emojiPickerContainerRef = React.useRef<HTMLDivElement | null>(null);
+  const emojiMartThemeVars = useEmojiMartThemeVars();
+  const { burstEmoji } = useEmojiBurst();
  const {
    inputRef: avatarUploadInputRef,
    isUploading,
@@ -51,9 +106,22 @@ export function AgentCreationPreview({
    uploadFile: uploadAvatarFile,
    handleFileChange: handleAvatarUploadFileChange,
  } = useAvatarUpload({
-    onUploadSuccess: onSelectAvatar,
+    onUploadSuccess: (url) => {
+      onSelectAvatar(url);
+      setIsAvatarMenuOpen(false);
+    },
  });

+  useEmojiMartStyles(
+    emojiPickerContainerRef,
+    isAvatarMenuOpen && activeTab === "emoji",
+  );
+
+  const customColorDraft = React.useMemo(
+    () => hsvToHex(customHue, customSaturation, customValue),
+    [customHue, customSaturation, customValue],
+  );
+
  React.useEffect(() => {
    onUploadPendingChange?.(isUploading);
    return () => {
@@ -61,12 +129,48 @@ export function AgentCreationPreview({
    };
  }, [isUploading, onUploadPendingChange]);

+  // Sync emoji state from avatarUrl when the popover opens
  React.useEffect(() => {
    if (isAvatarMenuOpen) {
      setAvatarUrlDraft("");
-      setIsAvatarUrlInputFocused(false);
+      setIsPopoverDragOver(false);
+      popoverDragDepthRef.current = 0;
+
+      const parsed = parseEmojiAvatarDataUrl(avatarUrl ?? "");
+      if (parsed) {
+        setSelectedEmoji(parsed.emoji);
+        setSelectedColor(parsed.color);
+        setHasChosenColor(true);
+        setActiveTab("emoji");
+      } else {
+        // Non-emoji avatar (image/URL or empty): clear any stale emoji
+        // selection so a later color-swatch tap can't re-apply an old emoji
+        // over the current avatar.
+        setSelectedEmoji(null);
+        setSelectedColor(DEFAULT_EMOJI_AVATAR_COLOR);
+        setHasChosenColor(false);
+        setActiveTab("image");
+      }
    }
-  }, [isAvatarMenuOpen]);
+  }, [isAvatarMenuOpen, avatarUrl]);
+
+  // Keep the custom color picker in sync when the selected color changes
+  React.useEffect(() => {
+    if (!isCustomColorPickerOpen || !selectedEmoji) {
+      return;
+    }
+    const nextAvatarUrl = emojiAvatarDataUrl(selectedEmoji, customColorDraft);
+    if (avatarUrl === nextAvatarUrl) {
+      return;
+    }
+    onSelectAvatar(nextAvatarUrl);
+  }, [
+    avatarUrl,
+    customColorDraft,
+    isCustomColorPickerOpen,
+    onSelectAvatar,
+    selectedEmoji,
+  ]);

  function applyAvatarUrl() {
    const nextUrl = avatarUrlDraft.trim();
@@ -78,22 +182,59 @@ export function AgentCreationPreview({
    setIsAvatarMenuOpen(false);
  }

-  const avatarClipStyle = React.useMemo<React.CSSProperties>(
-    () => ({
-      clipPath: `url(#${avatarEditClipId})`,
-      transform: "translateZ(0)",
-    }),
-    [avatarEditClipId],
-  );
-  const hasAvatarUrlDraft = avatarUrlDraft.trim().length > 0;
+  function applyEmojiAvatar(emoji: string, color = selectedColor) {
+    onSelectAvatar(emojiAvatarDataUrl(emoji, color));
+    setSquishKey((key) => key + 1);
+  }
+
+  function handleColorSelect(swatch: AvatarColorSwatch) {
+    if (disabled) {
+      return;
+    }
+    if (swatch === CUSTOM_AVATAR_COLOR_SWATCH) {
+      if (!selectedEmoji) {
+        return;
+      }
+      openCustomColorPicker();
+      return;
+    }
+    setSelectedColor(swatch);
+    setHasChosenColor(true);
+    if (selectedEmoji) {
+      applyEmojiAvatar(selectedEmoji, swatch);
+    }
+  }
+
+  function openCustomColorPicker() {
+    const nextColor = hexToHsv(selectedColor);
+    setCustomHue(normalizeHue(nextColor.hue));
+    setCustomSaturation(nextColor.saturation);
+    setCustomValue(nextColor.value);
+    setIsCustomColorPickerOpen(true);
+  }
+
+  function commitCustomColor() {
+    setSelectedColor(customColorDraft);
+    setHasChosenColor(true);
+    if (selectedEmoji) {
+      applyEmojiAvatar(selectedEmoji, customColorDraft);
+    }
+    setIsCustomColorPickerOpen(false);
+  }
+
  const hasAvatar = (avatarUrl?.trim().length ?? 0) > 0;
+  const emojiAvatarPreview = React.useMemo(
+    () => parseEmojiAvatarDataUrl(avatarUrl ?? ""),
+    [avatarUrl],
+  );
  const applyButtonTransition = shouldReduceMotion
    ? { duration: 0 }
    : AVATAR_APPLY_MOTION_TRANSITION;

+  // Outer avatar drag — only active when popover is closed
  const handleAvatarDragEnter = React.useCallback(
    (event: React.DragEvent<HTMLFieldSetElement>) => {
-      if (disabled || !isAvatarFileDrag(event)) {
+      if (disabled || isAvatarMenuOpen || !isAvatarFileDrag(event)) {
        return;
      }
      event.preventDefault();
@@ -102,12 +243,12 @@ export function AgentCreationPreview({
      event.dataTransfer.dropEffect = "copy";
      setIsDragOverAvatar(true);
    },
-    [disabled],
+    [disabled, isAvatarMenuOpen],
  );

  const handleAvatarDragOver = React.useCallback(
    (event: React.DragEvent<HTMLFieldSetElement>) => {
-      if (disabled || !isAvatarFileDrag(event)) {
+      if (disabled || isAvatarMenuOpen || !isAvatarFileDrag(event)) {
        return;
      }
      event.preventDefault();
@@ -115,12 +256,12 @@ export function AgentCreationPreview({
      event.dataTransfer.dropEffect = "copy";
      setIsDragOverAvatar(true);
    },
-    [disabled],
+    [disabled, isAvatarMenuOpen],
  );

  const handleAvatarDragLeave = React.useCallback(
    (event: React.DragEvent<HTMLFieldSetElement>) => {
-      if (!isAvatarFileDrag(event)) {
+      if (isAvatarMenuOpen || !isAvatarFileDrag(event)) {
        return;
      }
      event.preventDefault();
@@ -130,12 +271,12 @@ export function AgentCreationPreview({
        setIsDragOverAvatar(false);
      }
    },
-    [],
+    [isAvatarMenuOpen],
  );

  const handleAvatarDrop = React.useCallback(
    (event: React.DragEvent<HTMLFieldSetElement>) => {
-      if (!isAvatarFileDrag(event)) {
+      if (isAvatarMenuOpen || !isAvatarFileDrag(event)) {
        return;
      }
      event.preventDefault();
@@ -151,88 +292,355 @@ export function AgentCreationPreview({
      clearUploadError();
      void uploadAvatarFile(file);
    },
+    [
+      clearUploadError,
+      disabled,
+      isAvatarMenuOpen,
+      isUploading,
+      uploadAvatarFile,
+    ],
+  );
+
+  // Popover-level drag — one big drop zone for the entire popover
+  const handlePopoverDragEnter = React.useCallback(
+    (event: React.DragEvent<HTMLElement>) => {
+      if (disabled || !isAvatarFileDrag(event)) {
+        return;
+      }
+      event.preventDefault();
+      event.stopPropagation();
+      popoverDragDepthRef.current += 1;
+      event.dataTransfer.dropEffect = "copy";
+      setIsPopoverDragOver(true);
+      setActiveTab("image");
+    },
+    [disabled],
+  );
+
+  const handlePopoverDragOver = React.useCallback(
+    (event: React.DragEvent<HTMLElement>) => {
+      if (disabled || !isAvatarFileDrag(event)) {
+        return;
+      }
+      event.preventDefault();
+      event.stopPropagation();
+      event.dataTransfer.dropEffect = "copy";
+    },
+    [disabled],
+  );
+
+  const handlePopoverDragLeave = React.useCallback(
+    (event: React.DragEvent<HTMLElement>) => {
+      if (!isAvatarFileDrag(event)) {
+        return;
+      }
+      event.preventDefault();
+      event.stopPropagation();
+      popoverDragDepthRef.current = Math.max(
+        0,
+        popoverDragDepthRef.current - 1,
+      );
+      if (popoverDragDepthRef.current === 0) {
+        setIsPopoverDragOver(false);
+      }
+    },
+    [],
+  );
+
+  const handlePopoverDrop = React.useCallback(
+    (event: React.DragEvent<HTMLElement>) => {
+      if (!isAvatarFileDrag(event)) {
+        return;
+      }
+      event.preventDefault();
+      event.stopPropagation();
+      popoverDragDepthRef.current = 0;
+      setIsPopoverDragOver(false);
+
+      const file = event.dataTransfer.files[0];
+      if (!file || disabled || isUploading) {
+        return;
+      }
+
+      clearUploadError();
+      void uploadAvatarFile(file);
+    },
    [clearUploadError, disabled, isUploading, uploadAvatarFile],
  );

+  const isCustomColorPickerVisible =
+    isCustomColorPickerOpen && selectedEmoji !== null;
+
  const avatarMenuContent = (
-    <PopoverContent align="center" className="w-72 space-y-1 p-1">
-      <button
-        className="flex min-h-9 w-full items-center rounded-lg px-2.5 text-left text-sm outline-hidden transition-colors duration-150 ease-out hover:bg-muted/50 focus-visible:bg-muted/50 focus-visible:outline-none disabled:pointer-events-none disabled:opacity-50"
-        disabled={disabled || isUploading}
-        onClick={() => {
-          clearUploadError();
-          openUploadPicker();
-          setIsAvatarMenuOpen(false);
-        }}
-        type="button"
+    <PopoverContent
+      align="center"
+      className="w-[400px] p-3"
+      side="bottom"
+      sideOffset={8}
+    >
+      {/* Single drop zone covering the entire popover */}
+      <fieldset
+        aria-label="Avatar picker"
+        className={cn(
+          "relative m-0 rounded-lg border-2 border-transparent p-0 transition-[border-color,background-color] duration-150",
+          isPopoverDragOver && "border-dashed border-primary bg-primary/5",
+        )}
+        onDragEnter={handlePopoverDragEnter}
+        onDragLeave={handlePopoverDragLeave}
+        onDragOver={handlePopoverDragOver}
+        onDrop={handlePopoverDrop}
      >
-        Upload an image
-      </button>
-      <form
-        className="flex min-h-9 items-center gap-2 rounded-lg px-2.5 py-1.5 transition-colors duration-150 ease-out focus-within:bg-muted/50"
-        onSubmit={(event) => {
-          event.preventDefault();
-          event.stopPropagation();
-          applyAvatarUrl();
-        }}
-      >
-        <label className="sr-only" htmlFor="agent-avatar-url">
-          Use a URL
-        </label>
-        <Input
-          autoCapitalize="none"
-          autoComplete="off"
-          autoCorrect="off"
-          className={cn(
-            "h-7 min-w-0 flex-1 border-0 bg-transparent px-0 py-0 text-sm shadow-none outline-none focus-visible:ring-0",
-            isAvatarUrlInputFocused
-              ? "placeholder:text-muted-foreground/55"
-              : "placeholder:text-popover-foreground",
-          )}
-          disabled={disabled || isUploading}
-          id="agent-avatar-url"
-          onBlur={() => setIsAvatarUrlInputFocused(false)}
-          onChange={(event) => setAvatarUrlDraft(event.target.value)}
-          onFocus={() => setIsAvatarUrlInputFocused(true)}
-          placeholder={isAvatarUrlInputFocused ? "https://..." : "Use a URL"}
-          spellCheck={false}
-          value={avatarUrlDraft}
-        />
-        <AnimatePresence initial={false}>
-          {hasAvatarUrlDraft ? (
-            <motion.div
-              animate={{ opacity: 1, scale: 1, width: "auto" }}
-              className="overflow-hidden"
-              exit={{ opacity: 0, scale: 0.96, width: 0 }}
-              initial={{ opacity: 0, scale: 0.96, width: 0 }}
-              key="apply-avatar-url"
-              transition={applyButtonTransition}
-            >
-              <Button
-                className="h-7 px-2 text-xs"
-                disabled={disabled || isUploading}
-                size="xs"
-                type="submit"
-              >
-                Apply
-              </Button>
-            </motion.div>
-          ) : null}
-        </AnimatePresence>
-      </form>
-      {hasAvatar && onClearAvatar ? (
-        <button
-          className="flex min-h-9 w-full items-center rounded-lg px-2.5 text-left text-sm text-destructive outline-hidden transition-colors duration-150 ease-out hover:bg-destructive/10 focus-visible:bg-destructive/10 focus-visible:outline-none disabled:pointer-events-none disabled:opacity-50"
-          disabled={disabled || isUploading}
-          onClick={() => {
-            onClearAvatar();
-            setIsAvatarMenuOpen(false);
+        <Tabs
+          className="w-full"
+          onValueChange={(tab) => {
+            setActiveTab(tab as AvatarTab);
+            setIsCustomColorPickerOpen(false);
          }}
-          type="button"
+          value={activeTab}
        >
-          Remove avatar
-        </button>
-      ) : null}
+          <TabsList className="relative isolate mb-3 grid h-9 w-full grid-cols-2 overflow-hidden rounded-lg bg-muted p-0.5">
+            <div
+              aria-hidden="true"
+              className="absolute bottom-0.5 left-0.5 top-0.5 z-0 rounded-md bg-background shadow-sm transition-transform duration-[250ms] ease-out"
+              style={{
+                transform: `translateX(${activeTab === "emoji" ? 100 : 0}%)`,
+                width: "calc((100% - 4px) / 2)",
+              }}
+            />
+            <TabsTrigger
+              className="relative z-10 h-full rounded-md bg-transparent text-xs font-medium shadow-none transition-colors data-[state=active]:bg-transparent data-[state=active]:shadow-none"
+              value="image"
+            >
+              Image
+            </TabsTrigger>
+            <TabsTrigger
+              className="relative z-10 h-full rounded-md bg-transparent text-xs font-medium shadow-none transition-colors data-[state=active]:bg-transparent data-[state=active]:shadow-none"
+              value="emoji"
+            >
+              Emoji
+            </TabsTrigger>
+          </TabsList>
+        </Tabs>
+
+        {activeTab === "image" ? (
+          <div className="grid gap-2.5">
+            {/* Click to browse zone */}
+            <button
+              className="relative flex h-[80px] flex-col items-center justify-center gap-1.5 overflow-hidden rounded-lg border border-transparent bg-muted text-foreground transition-[background-color,border-color,box-shadow,color] duration-200 ease-out hover:bg-muted/80 disabled:opacity-60"
+              disabled={disabled || isUploading}
+              onClick={() => {
+                clearUploadError();
+                openUploadPicker();
+              }}
+              type="button"
+            >
+              {isUploading ? (
+                <Spinner
+                  aria-hidden
+                  className="h-5 w-5 border-2 text-muted-foreground"
+                />
+              ) : (
+                <UploadCloud className="h-5 w-5 text-muted-foreground" />
+              )}
+              <span className="text-xs font-medium text-muted-foreground">
+                {isUploading ? "Uploading..." : "Drop or browse"}
+              </span>
+            </button>
+
+            {/* URL input */}
+            <div className="flex h-10 items-center gap-2.5 rounded-lg bg-muted px-3">
+              <Link2 className="h-3.5 w-3.5 shrink-0 text-muted-foreground/60" />
+              <input
+                autoCapitalize="none"
+                autoCorrect="off"
+                className="min-w-0 flex-1 bg-transparent text-xs font-medium text-foreground outline-none placeholder:text-muted-foreground/50"
+                disabled={disabled || isUploading}
+                onChange={(event) => setAvatarUrlDraft(event.target.value)}
+                onKeyDown={(event) => {
+                  if (event.key === "Enter") {
+                    event.preventDefault();
+                    applyAvatarUrl();
+                  }
+                }}
+                placeholder="Paste a URL"
+                spellCheck={false}
+                type="url"
+                value={avatarUrlDraft}
+              />
+              <AnimatePresence initial={false}>
+                {avatarUrlDraft.trim().length > 0 ? (
+                  <motion.div
+                    animate={{ opacity: 1, scale: 1, width: "auto" }}
+                    className="overflow-hidden"
+                    exit={{ opacity: 0, scale: 0.96, width: 0 }}
+                    initial={{ opacity: 0, scale: 0.96, width: 0 }}
+                    key="apply-url"
+                    transition={applyButtonTransition}
+                  >
+                    <Button
+                      className="h-6 px-2 text-2xs"
+                      disabled={disabled || isUploading}
+                      onClick={() => applyAvatarUrl()}
+                      size="xs"
+                      type="button"
+                    >
+                      Apply
+                    </Button>
+                  </motion.div>
+                ) : null}
+              </AnimatePresence>
+            </div>
+
+            {uploadErrorMessage ? (
+              <p className="rounded-lg bg-destructive/10 px-3 py-2 text-xs font-medium text-destructive">
+                {uploadErrorMessage}
+              </p>
+            ) : null}
+
+            {hasAvatar && onClearAvatar ? (
+              <button
+                className="flex min-h-8 w-full items-center justify-center rounded-lg text-xs text-destructive outline-hidden transition-colors duration-150 ease-out hover:bg-destructive/10 focus-visible:bg-destructive/10 focus-visible:outline-none disabled:pointer-events-none disabled:opacity-50"
+                disabled={disabled || isUploading}
+                onClick={() => {
+                  onClearAvatar();
+                  setIsAvatarMenuOpen(false);
+                }}
+                type="button"
+              >
+                Remove avatar
+              </button>
+            ) : null}
+          </div>
+        ) : null}
+
+        {activeTab === "emoji" ? (
+          <div className="relative grid content-start gap-3">
+            <div
+              className="buzz-emoji-mart relative z-0 h-[280px] overflow-hidden rounded-lg bg-muted"
+              ref={emojiPickerContainerRef}
+              style={emojiMartThemeVars}
+            >
+              <Picker
+                categories={EMOJI_MART_CATEGORIES}
+                data={emojiData}
+                dynamicWidth
+                emojiButtonRadius="999px"
+                emojiButtonSize={44}
+                emojiSize={32}
+                icons="outline"
+                navPosition="bottom"
+                onEmojiSelect={(emoji: EmojiMartEmoji, event?: MouseEvent) => {
+                  if (disabled) {
+                    return;
+                  }
+                  if (!emoji.native) {
+                    return;
+                  }
+                  const nextColor =
+                    selectedEmoji === null && !hasChosenColor
+                      ? (AVATAR_COLORS[
+                          Math.floor(Math.random() * AVATAR_COLORS.length)
+                        ] ?? DEFAULT_EMOJI_AVATAR_COLOR)
+                      : selectedColor;
+                  burstEmoji(emoji.native, event);
+                  setSelectedEmoji(emoji.native);
+                  setSelectedColor(nextColor);
+                  applyEmojiAvatar(emoji.native, nextColor);
+                }}
+                previewPosition="none"
+                searchPosition="none"
+                set="native"
+                skinTonePosition="none"
+                theme="auto"
+              />
+            </div>
+
+            {/* Color swatches — always visible */}
+            <div className="grid grid-cols-12 justify-items-center gap-1.5 rounded-lg bg-muted p-3">
+              {AVATAR_COLOR_SWATCHES.map((swatch) => {
+                const isCustomSwatch = swatch === CUSTOM_AVATAR_COLOR_SWATCH;
+                const isSelected = isCustomSwatch
+                  ? !AVATAR_COLORS.some(
+                      (color) =>
+                        color.toUpperCase() === selectedColor.toUpperCase(),
+                    )
+                  : swatch.toUpperCase() === selectedColor.toUpperCase();
+
+                return (
+                  <button
+                    aria-label={
+                      isCustomSwatch
+                        ? selectedEmoji
+                          ? "Choose custom color"
+                          : "Choose an emoji first"
+                        : `Use ${swatch} background`
+                    }
+                    aria-pressed={isSelected}
+                    className={cn(
+                      "relative h-6 w-6 rounded-full border border-border transition-transform duration-150 ease-out hover:scale-[1.15] focus-visible:scale-[1.15] focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring",
+                      isCustomSwatch &&
+                        !selectedEmoji &&
+                        "cursor-not-allowed opacity-45 hover:scale-100 focus-visible:scale-100",
+                    )}
+                    disabled={isCustomSwatch && !selectedEmoji}
+                    key={swatch}
+                    onClick={() => handleColorSelect(swatch)}
+                    style={{
+                      background: isCustomSwatch
+                        ? isSelected
+                          ? selectedColor
+                          : "conic-gradient(from 0deg, #ff4d4d, #ffe75c, #73ef75, #63c6f2, #b141ff, #ff4d4d)"
+                        : swatch,
+                    }}
+                    type="button"
+                  >
+                    {isSelected ? (
+                      <span
+                        className="absolute inset-0.5 rounded-full border-2"
+                        style={{
+                          borderColor: contrastColorForBackground(
+                            isCustomSwatch ? selectedColor : swatch,
+                          ),
+                        }}
+                      />
+                    ) : null}
+                  </button>
+                );
+              })}
+            </div>
+
+            <AvatarCustomColorPanel
+              colorDraft={customColorDraft}
+              hue={customHue}
+              onCommit={commitCustomColor}
+              onHueChange={setCustomHue}
+              onSaturationValueChange={(nextSaturation, nextValue) => {
+                setCustomSaturation(nextSaturation);
+                setCustomValue(nextValue);
+              }}
+              saturation={customSaturation}
+              testIdPrefix="agent-avatar"
+              value={customValue}
+              visible={isCustomColorPickerVisible}
+            />
+
+            {hasAvatar && onClearAvatar ? (
+              <button
+                className="flex min-h-8 w-full items-center justify-center rounded-lg text-xs text-destructive outline-hidden transition-colors duration-150 ease-out hover:bg-destructive/10 focus-visible:bg-destructive/10 focus-visible:outline-none disabled:pointer-events-none disabled:opacity-50"
+                disabled={disabled}
+                onClick={() => {
+                  onClearAvatar();
+                  setSelectedEmoji(null);
+                  setIsAvatarMenuOpen(false);
+                }}
+                type="button"
+              >
+                Remove avatar
+              </button>
+            ) : null}
+          </div>
+        ) : null}
+      </fieldset>
    </PopoverContent>
  );

@@ -243,6 +651,7 @@ export function AgentCreationPreview({
        className={cn(
          "group/avatar-preview relative m-0 flex min-h-[190px] min-w-0 flex-col items-center justify-center gap-3 rounded-xl border border-transparent p-0 transition-[background-color,border-color,box-shadow] duration-150",
          isDragOverAvatar &&
+            !isAvatarMenuOpen &&
            "border-dashed border-primary/70 bg-primary/5 ring-2 ring-primary/15",
        )}
        onDragEnter={handleAvatarDragEnter}
@@ -258,94 +667,103 @@ export function AgentCreationPreview({
          type="file"
        />

-        <div className="relative h-36 w-36">
-          {hasAvatar ? (
-            <>
-              <svg
-                aria-hidden="true"
-                className="pointer-events-none absolute inset-0 h-full w-full"
-                fill="none"
-                height="144"
-                viewBox="0 0 144 144"
-                width="144"
-                xmlns="http://www.w3.org/2000/svg"
-              >
-                <clipPath clipPathUnits="userSpaceOnUse" id={avatarEditClipId}>
-                  <path
-                    clipRule="evenodd"
-                    d="M100.734 83.3298C102.415 84.1574 104.616 83.8757 105.495 82.2207C109.647 74.3981 112 65.4738 112 56C112 25.0721 86.9279 0 56 0C25.0721 0 0 25.0721 0 56C0 86.9279 25.0721 112 56 112C65.4738 112 74.3981 109.647 82.2207 105.495C83.8757 104.616 84.1574 102.415 83.3298 100.734C82.4783 99.0047 82 97.0582 82 95C82 87.8203 87.8203 82 95 82C97.0582 82 99.0047 82.4783 100.734 83.3298Z"
-                    fillRule="evenodd"
-                    transform="translate(-25.875 -25.875) scale(1.575)"
-                  />
-                </clipPath>
-              </svg>
-
-              <div className="relative h-full w-full" style={avatarClipStyle}>
-                <ProfileAvatar
-                  avatarUrl={avatarUrl}
-                  className={cn(
-                    "h-full w-full text-4xl transition-shadow duration-150",
-                    isDragOverAvatar && "ring-2 ring-primary/30",
-                  )}
-                  label={label}
-                />
-              </div>
-
-              <div className="absolute bottom-0 right-0 z-10 flex h-[42px] w-[42px] items-center justify-center rounded-full bg-background">
-                <Popover
-                  open={isAvatarMenuOpen}
-                  onOpenChange={setIsAvatarMenuOpen}
+        <Popover open={isAvatarMenuOpen} onOpenChange={setIsAvatarMenuOpen}>
+          <PopoverAnchor asChild>
+            <div className="relative h-36 w-36">
+              {hasAvatar ? (
+                <MaskedAvatarBadgeFrame
+                  badge={
+                    <PopoverTrigger asChild>
+                      <button
+                        aria-label="Edit avatar"
+                        className="flex h-9 w-9 items-center justify-center rounded-full bg-sidebar-active text-sidebar-active-foreground shadow-lg transition-[background-color,scale] duration-150 ease-out hover:scale-[1.04] hover:bg-sidebar-active focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-default disabled:opacity-90 disabled:hover:scale-100"
+                        disabled={disabled || isUploading}
+                        title="Edit avatar"
+                        type="button"
+                      >
+                        {isUploading ? (
+                          <Spinner
+                            aria-label="Uploading avatar"
+                            className="h-4 w-4 border-2"
+                          />
+                        ) : (
+                          <Pencil className="h-4 w-4" />
+                        )}
+                      </button>
+                    </PopoverTrigger>
+                  }
+                  badgeBox={{ bottom: 0, height: 42, right: 0, width: 42 }}
+                  className="h-36 w-36"
+                  cutout={{ cx: 123, cy: 123, r: 24 }}
+                  size={144}
                >
-                  <PopoverTrigger asChild>
-                    <button
-                      aria-label="Edit avatar"
-                      className="flex h-9 w-9 items-center justify-center rounded-full bg-sidebar-active text-sidebar-active-foreground shadow-lg transition-[background-color,scale] duration-150 ease-out hover:scale-[1.04] hover:bg-sidebar-active focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-default disabled:opacity-90 disabled:hover:scale-100"
-                      disabled={disabled || isUploading}
-                      title="Edit avatar"
-                      type="button"
+                  {emojiAvatarPreview ? (
+                    <div
+                      aria-label={`${label} avatar`}
+                      className="relative flex h-full w-full shrink-0 items-center justify-center overflow-hidden rounded-full shadow-xs transition-[background-color] duration-200 ease-out"
+                      role="img"
+                      style={{
+                        backgroundColor: emojiAvatarPreview.color,
+                      }}
                    >
-                      {isUploading ? (
-                        <Spinner
-                          aria-label="Uploading avatar"
-                          className="h-4 w-4 border-2"
-                        />
-                      ) : (
-                        <Pencil className="h-4 w-4" />
-                      )}
-                    </button>
-                  </PopoverTrigger>
-                  {avatarMenuContent}
-                </Popover>
-              </div>
-            </>
-          ) : (
-            <Popover open={isAvatarMenuOpen} onOpenChange={setIsAvatarMenuOpen}>
-              <PopoverTrigger asChild>
-                <button
-                  aria-label="Add avatar"
-                  className={cn(
-                    "flex h-full w-full items-center justify-center rounded-full border-2 border-dashed border-border bg-background text-primary shadow-xs transition-[background-color,border-color,color,box-shadow] duration-150 ease-out hover:border-primary/50 hover:bg-primary/5 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring disabled:cursor-default disabled:opacity-70",
-                    isDragOverAvatar &&
-                      "border-primary/70 bg-primary/5 ring-2 ring-primary/15",
-                  )}
-                  disabled={disabled || isUploading}
-                  title="Add avatar"
-                  type="button"
-                >
-                  {isUploading ? (
-                    <Spinner
-                      aria-label="Uploading avatar"
-                      className="h-4 w-4 border-2"
-                    />
+                      <span
+                        className={cn(
+                          "flex h-full w-full items-center justify-center text-[4rem] leading-none",
+                          squishKey > 0 && "buzz-avatar-squish",
+                        )}
+                        key={squishKey}
+                        style={
+                          {
+                            "--buzz-avatar-emoji-offset-x": "0px",
+                            "--buzz-avatar-emoji-offset-y": "0px",
+                          } as React.CSSProperties
+                        }
+                      >
+                        {emojiAvatarPreview.emoji}
+                      </span>
+                    </div>
                  ) : (
-                    <Plus aria-hidden="true" className="h-14 w-14" />
+                    <ProfileAvatar
+                      avatarUrl={avatarUrl}
+                      className={cn(
+                        "h-full w-full text-4xl transition-shadow duration-150",
+                        isDragOverAvatar &&
+                          !isAvatarMenuOpen &&
+                          "ring-2 ring-primary/30",
+                      )}
+                      label={label}
+                    />
                  )}
-                </button>
-              </PopoverTrigger>
-              {avatarMenuContent}
-            </Popover>
-          )}
-        </div>
+                </MaskedAvatarBadgeFrame>
+              ) : (
+                <PopoverTrigger asChild>
+                  <button
+                    aria-label="Add avatar"
+                    className={cn(
+                      "flex h-36 w-36 items-center justify-center rounded-full border-2 border-dashed border-border bg-background text-primary shadow-xs transition-[background-color,border-color,color,box-shadow,scale] duration-150 ease-out hover:scale-[1.02] hover:border-primary/60 hover:bg-primary/5 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-default disabled:opacity-60 disabled:hover:scale-100",
+                      isDragOverAvatar &&
+                        !isAvatarMenuOpen &&
+                        "border-primary/70 bg-primary/5 ring-2 ring-primary/15",
+                    )}
+                    disabled={disabled || isUploading}
+                    title="Add avatar"
+                    type="button"
+                  >
+                    {isUploading ? (
+                      <Spinner
+                        aria-label="Uploading avatar"
+                        className="h-4 w-4 border-2"
+                      />
+                    ) : (
+                      <Plus aria-hidden="true" className="h-14 w-14" />
+                    )}
+                  </button>
+                </PopoverTrigger>
+              )}
+            </div>
+          </PopoverAnchor>
+          {avatarMenuContent}
+        </Popover>

        {uploadErrorMessage ? (
          <p className="max-w-full rounded-md bg-background/95 px-2 py-1 text-center text-xs text-destructive shadow-xs">
@@ -21,6 +21,16 @@ test("resolveManagedAgentAvatarUrl uploads data image URIs", async () => {
  assert.equal(uploaded, "https://relay.example/avatar.png");
 });

+test("resolveManagedAgentAvatarUrl passes emoji svg data URLs through", async () => {
+  const emojiUrl =
+    "data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3C%2Fsvg%3E";
+  const uploaded = await resolveManagedAgentAvatarUrl(emojiUrl, async () => {
+    throw new Error("should not upload inline emoji svg data URLs");
+  });
+
+  assert.equal(uploaded, emojiUrl);
+});
+
 test("resolveManagedAgentAvatarUrl passes non-data URLs through", async () => {
  const uploaded = await resolveManagedAgentAvatarUrl(
    " https://relay.example/already-hosted.png ",
@@ -21,6 +21,14 @@ export async function resolveManagedAgentAvatarUrl(
    return resolvedAvatarUrl;
  }

+  // Emoji avatars are stored as inline, percent-encoded SVG data URLs
+  // (`data:image/svg+xml,%3C...`) — the same self-contained form profile
+  // persists. They are not base64 and must not be run through `atob`/upload;
+  // pass them through unchanged so the emoji survives agent creation.
+  if (!isBase64DataUri(resolvedAvatarUrl)) {
+    return resolvedAvatarUrl;
+  }
+
  try {
    const [, b64] = resolvedAvatarUrl.split(",", 2);
    if (!b64) {
@@ -39,6 +47,11 @@ async function defaultUploadMediaBytes(data: number[], filename?: string) {
  return uploadMediaBytes(data, filename);
 }

+function isBase64DataUri(dataUri: string) {
+  const header = dataUri.slice(0, dataUri.indexOf(","));
+  return header.includes(";base64");
+}
+
 function safeFallbackAvatarUrl(avatarUrl: string | null | undefined) {
  const trimmed = avatarUrl?.trim() || undefined;
  return trimmed?.startsWith("data:image/") ? undefined : trimmed;
@@ -430,6 +430,86 @@ export function dataTransferHasImage(dataTransfer: DataTransfer | null) {
  );
 }

+function normalizedWheelDeltaY(event: WheelEvent, scrollElement: HTMLElement) {
+  if (event.deltaMode === WheelEvent.DOM_DELTA_LINE) {
+    return event.deltaY * 16;
+  }
+
+  if (event.deltaMode === WheelEvent.DOM_DELTA_PAGE) {
+    return event.deltaY * scrollElement.clientHeight;
+  }
+
+  return event.deltaY;
+}
+
+function clampScrollTop(scrollElement: HTMLElement, scrollTop: number) {
+  const maxScrollTop = Math.max(
+    0,
+    scrollElement.scrollHeight - scrollElement.clientHeight,
+  );
+  return Math.max(0, Math.min(maxScrollTop, scrollTop));
+}
+
+// Wheel events are retargeted to the emoji-mart host outside its shadow root,
+// so the browser does not reliably apply the default scroll to `.scroll`.
+function installEmojiMartWheelScroll(shadowRoot: ShadowRoot) {
+  let removeWheelListener: (() => void) | null = null;
+  let currentScrollElement: HTMLElement | null = null;
+
+  function connectScrollElement() {
+    const nextScrollElement = shadowRoot.querySelector<HTMLElement>(".scroll");
+
+    if (nextScrollElement === currentScrollElement) {
+      return;
+    }
+
+    removeWheelListener?.();
+    currentScrollElement = nextScrollElement;
+
+    if (!nextScrollElement) {
+      removeWheelListener = null;
+      return;
+    }
+
+    const handleWheel = (event: WheelEvent) => {
+      if (event.defaultPrevented || event.ctrlKey || event.deltaY === 0) {
+        return;
+      }
+
+      const deltaY = normalizedWheelDeltaY(event, nextScrollElement);
+      const nextScrollTop = clampScrollTop(
+        nextScrollElement,
+        nextScrollElement.scrollTop + deltaY,
+      );
+
+      if (nextScrollTop === nextScrollElement.scrollTop) {
+        return;
+      }
+
+      event.preventDefault();
+      event.stopPropagation();
+      nextScrollElement.scrollTop = nextScrollTop;
+    };
+
+    nextScrollElement.addEventListener("wheel", handleWheel, {
+      passive: false,
+    });
+    removeWheelListener = () => {
+      nextScrollElement.removeEventListener("wheel", handleWheel);
+    };
+  }
+
+  connectScrollElement();
+
+  const observer = new MutationObserver(connectScrollElement);
+  observer.observe(shadowRoot, { childList: true, subtree: true });
+
+  return () => {
+    observer.disconnect();
+    removeWheelListener?.();
+  };
+}
+
 export function useEmojiMartStyles(
  containerRef: React.RefObject<HTMLDivElement | null>,
  enabled: boolean,
@@ -440,6 +520,7 @@ export function useEmojiMartStyles(
    }

    let animationFrame = 0;
+    let removeWheelScroll: (() => void) | null = null;

    const installEmojiMartStyles = () => {
      const host = containerRef.current?.querySelector("em-emoji-picker");
@@ -456,12 +537,15 @@ export function useEmojiMartStyles(
        style.textContent = EMOJI_MART_SHADOW_CSS;
        shadowRoot.appendChild(style);
      }
+
+      removeWheelScroll ??= installEmojiMartWheelScroll(shadowRoot);
    };

    animationFrame = window.requestAnimationFrame(installEmojiMartStyles);

    return () => {
      window.cancelAnimationFrame(animationFrame);
+      removeWheelScroll?.();
    };
  }, [containerRef, enabled]);
 }
@@ -230,6 +230,49 @@ test("built-in personas are used from the catalog dialog", async ({ page }) => {
  await expect.poll(() => getCatalogOrder(page)).toEqual(initialCatalogOrder);
 });

+test("agent avatar emoji picker scrolls inside its popover", async ({
+  page,
+}) => {
+  await gotoApp(page);
+  await page.getByTestId("open-agents-view").click();
+  await page.getByTestId("new-agent-card").click();
+  await page.getByRole("menuitem", { name: "New agent" }).click();
+
+  await expect(page.getByTestId("persona-dialog")).toBeVisible();
+  await page.getByLabel("Add avatar").click();
+  await page.getByRole("tab", { name: "Emoji" }).click();
+  await expect(page.locator("em-emoji-picker")).toBeVisible();
+
+  await page.waitForFunction(() => {
+    const picker = document.querySelector("em-emoji-picker");
+    const scroll = picker?.shadowRoot?.querySelector(".scroll");
+    return (
+      scroll instanceof HTMLElement && scroll.scrollHeight > scroll.clientHeight
+    );
+  });
+
+  const before = await page.locator("em-emoji-picker").evaluate((picker) => {
+    const scroll = picker.shadowRoot?.querySelector(".scroll");
+    return scroll instanceof HTMLElement ? scroll.scrollTop : -1;
+  });
+
+  const box = await page.locator("em-emoji-picker").boundingBox();
+  if (!box) {
+    throw new Error("Could not measure emoji picker bounds.");
+  }
+  await page.mouse.move(box.x + box.width / 2, box.y + box.height / 2);
+  await page.mouse.wheel(0, 500);
+
+  await expect
+    .poll(async () =>
+      page.locator("em-emoji-picker").evaluate((picker) => {
+        const scroll = picker.shadowRoot?.querySelector(".scroll");
+        return scroll instanceof HTMLElement ? scroll.scrollTop : -1;
+      }),
+    )
+    .toBeGreaterThan(before);
+});
+
 test("agent catalog can reopen from the populated library header", async ({
  page,
 }) => {