cue-console 0.1.6 → 0.1.7

package/README.md

@@ -1,5 +1,12 @@
 # cue-console
 
+[![Repo: cue-stack](https://img.shields.io/badge/repo-cue--stack-111827)](https://github.com/nmhjklnm/cue-stack)
+[![Repo: cue-console](https://img.shields.io/badge/repo-cue--console-111827)](https://github.com/nmhjklnm/cue-console)
+[![Repo: cue-mcp](https://img.shields.io/badge/repo-cue--mcp-111827)](https://github.com/nmhjklnm/cue-mcp)
+
+[![npm](https://img.shields.io/npm/v/cue-console?label=cue-console&color=CB3837)](https://www.npmjs.com/package/cue-console)
+[![npm downloads](https://img.shields.io/npm/dw/cue-console?color=CB3837)](https://www.npmjs.com/package/cue-console)
+
 | Mobile | Desktop |
 | --- | --- |
 | ![Mobile screenshot](./assets/iphone.png) | ![Desktop screenshot](./assets/desktop.png) |

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "cue-console",
-  "version": "0.1.6",
+  "version": "0.1.7",
   "description": "Cue Hub console launcher (Next.js UI)",
   "license": "Apache-2.0",
   "keywords": ["mcp", "cue", "console", "nextjs"],
@@ -34,6 +34,8 @@
     "@radix-ui/react-slot": "^1.2.4",
     "@tailwindcss/postcss": "^4",
     "@types/node": "^20",
+    "@dicebear/core": "^9.2.4",
+    "@dicebear/thumbs": "^9.2.4",
     "better-sqlite3": "^12.5.0",
     "class-variance-authority": "^0.7.1",
     "clsx": "^2.1.1",

package/src/components/chat-view.tsx

@@ -24,6 +24,14 @@ import {
   formatFullTime,
   getWaitingDuration,
 } from "@/lib/utils";
+import {
+  getOrInitAvatarSeed,
+  getOrInitGroupAvatarSeed,
+  randomSeed,
+  setAvatarSeed,
+  setGroupAvatarSeed,
+  thumbsAvatarDataUrl,
+} from "@/lib/avatar";
 import {
   fetchAgentTimeline,
   fetchGroupTimeline,
@@ -85,6 +93,15 @@ export function ChatView({ type, id, name, onBack }: ChatViewProps) {
   const [mentionActive, setMentionActive] = useState(0);
   const [mentionAtIndex, setMentionAtIndex] = useState<number | null>(null);
 
+  const [avatarUrlMap, setAvatarUrlMap] = useState<Record<string, string>>({});
+  const [avatarPickerOpen, setAvatarPickerOpen] = useState(false);
+  const [avatarPickerTarget, setAvatarPickerTarget] = useState<
+    | { kind: "agent"; id: string }
+    | { kind: "group"; id: string }
+    | null
+  >(null);
+  const [avatarCandidates, setAvatarCandidates] = useState<{ seed: string; url: string }[]>([]);
+
   const textareaRef = useRef<HTMLTextAreaElement>(null);
   const inputWrapRef = useRef<HTMLDivElement>(null);
   const mentionListRef = useRef<HTMLDivElement>(null);
@@ -194,6 +211,41 @@ export function ChatView({ type, id, name, onBack }: ChatViewProps) {
     return groupTitle;
   }, [agentNameMap, groupTitle, id, type]);
 
+  const ensureAvatarUrl = useCallback(async (kind: "agent" | "group", rawId: string) => {
+    if (!rawId) return;
+    const key = `${kind}:${rawId}`;
+    setAvatarUrlMap((prev) => {
+      if (prev[key]) return prev;
+      return { ...prev, [key]: "" };
+    });
+
+    try {
+      const seed =
+        kind === "agent" ? getOrInitAvatarSeed(rawId) : getOrInitGroupAvatarSeed(rawId);
+      const url = await thumbsAvatarDataUrl(seed);
+      setAvatarUrlMap((prev) => ({ ...prev, [key]: url }));
+    } catch {
+      // ignore
+    }
+  }, []);
+
+  const setTargetAvatarSeed = useCallback(
+    async (kind: "agent" | "group", rawId: string, seed: string) => {
+      if (!rawId) return;
+      if (kind === "agent") setAvatarSeed(rawId, seed);
+      else setGroupAvatarSeed(rawId, seed);
+
+      const key = `${kind}:${rawId}`;
+      try {
+        const url = await thumbsAvatarDataUrl(seed);
+        setAvatarUrlMap((prev) => ({ ...prev, [key]: url }));
+      } catch {
+        // ignore
+      }
+    },
+    []
+  );
+
   useEffect(() => {
     if (type !== "group") return;
     setGroupTitle(name);
@@ -375,6 +427,38 @@ export function ChatView({ type, id, name, onBack }: ChatViewProps) {
     void loadNames();
   }, [id, members, type]);
 
+  useEffect(() => {
+    if (type === "agent") {
+      void ensureAvatarUrl("agent", id);
+      return;
+    }
+
+    // group header avatar
+    void ensureAvatarUrl("group", id);
+
+    // message bubble avatars
+    for (const mid of members) {
+      void ensureAvatarUrl("agent", mid);
+    }
+  }, [ensureAvatarUrl, id, members, type]);
+
+  const openAvatarPicker = useCallback(
+    async (target: { kind: "agent" | "group"; id: string }) => {
+      setAvatarPickerTarget(target);
+      setAvatarPickerOpen(true);
+      void ensureAvatarUrl(target.kind, target.id);
+
+      try {
+        const seeds = Array.from({ length: 20 }, () => randomSeed());
+        const urls = await Promise.all(seeds.map((s) => thumbsAvatarDataUrl(s)));
+        setAvatarCandidates(seeds.map((seed, i) => ({ seed, url: urls[i] || "" })));
+      } catch {
+        setAvatarCandidates([]);
+      }
+    },
+    [ensureAvatarUrl]
+  );
+
   const closeMention = () => {
     setMentionQuery("");
     setMentionOpen(false);
@@ -1064,9 +1148,35 @@ export function ChatView({ type, id, name, onBack }: ChatViewProps) {
             <ChevronLeft className="h-5 w-5" />
           </Button>
         )}
-        <span className="text-2xl">
-          {type === "group" ? "👥" : getAgentEmoji(id)}
-        </span>
+        {type === "group" ? (
+          <button
+            type="button"
+            className="h-9 w-9 shrink-0 rounded-full bg-muted overflow-hidden"
+            onClick={() => openAvatarPicker({ kind: "group", id })}
+            title="Change avatar"
+          >
+            {avatarUrlMap[`group:${id}`] ? (
+              <img src={avatarUrlMap[`group:${id}`]} alt="" className="h-full w-full" />
+            ) : (
+              <span className="flex h-full w-full items-center justify-center text-lg">👥</span>
+            )}
+          </button>
+        ) : (
+          <button
+            type="button"
+            className="h-9 w-9 shrink-0 rounded-full bg-muted overflow-hidden"
+            onClick={() => openAvatarPicker({ kind: "agent", id })}
+            title="Change avatar"
+          >
+            {avatarUrlMap[`agent:${id}`] ? (
+              <img src={avatarUrlMap[`agent:${id}`]} alt="" className="h-full w-full" />
+            ) : (
+              <span className="flex h-full w-full items-center justify-center text-lg">
+                {getAgentEmoji(id)}
+              </span>
+            )}
+          </button>
+        )}
         <div className="flex-1">
           {editingTitle ? (
             <input
@@ -1185,6 +1295,7 @@ export function ChatView({ type, id, name, onBack }: ChatViewProps) {
                     request={item.request}
                     showAgent={type === "group"}
                     agentNameMap={agentNameMap}
+                    avatarUrlMap={avatarUrlMap}
                     showName={!prevSameSender}
                     showAvatar={!prevSameSender}
                     compact={compact}
@@ -1284,6 +1395,74 @@ export function ChatView({ type, id, name, onBack }: ChatViewProps) {
           )}
         </DialogContent>
       </Dialog>
+
+      <Dialog open={avatarPickerOpen} onOpenChange={setAvatarPickerOpen}>
+        <DialogContent className="max-w-lg glass-surface glass-noise">
+          <DialogHeader>
+            <DialogTitle>Avatar</DialogTitle>
+          </DialogHeader>
+          {avatarPickerTarget && (
+            <div className="flex flex-col gap-4">
+              <div className="flex items-center gap-3">
+                <div className="h-14 w-14 rounded-full bg-muted overflow-hidden">
+                  {avatarUrlMap[`${avatarPickerTarget.kind}:${avatarPickerTarget.id}`] ? (
+                    <img
+                      src={
+                        avatarUrlMap[`${avatarPickerTarget.kind}:${avatarPickerTarget.id}`]
+                      }
+                      alt=""
+                      className="h-full w-full"
+                    />
+                  ) : (
+                    <div className="flex h-full w-full items-center justify-center text-xl">
+                      {avatarPickerTarget.kind === "group" ? "👥" : getAgentEmoji(id)}
+                    </div>
+                  )}
+                </div>
+                <div className="flex-1 min-w-0">
+                  <p className="text-sm font-semibold truncate">{titleDisplay}</p>
+                  <p className="text-xs text-muted-foreground truncate">Click a thumb to apply</p>
+                </div>
+                <Button
+                  variant="outline"
+                  size="sm"
+                  onClick={async () => {
+                    const s = randomSeed();
+                    await setTargetAvatarSeed(avatarPickerTarget.kind, avatarPickerTarget.id, s);
+                    // refresh candidate grid
+                    void openAvatarPicker(avatarPickerTarget);
+                  }}
+                >
+                  Random
+                </Button>
+              </div>
+
+              <div className="max-h-52 overflow-y-auto pr-1">
+                <div className="grid grid-cols-5 gap-2">
+                {avatarCandidates.map((c) => (
+                  <button
+                    key={c.seed}
+                    type="button"
+                    className="h-12 w-12 rounded-full bg-muted overflow-hidden hover:ring-2 hover:ring-ring/40"
+                    onClick={async () => {
+                      await setTargetAvatarSeed(
+                        avatarPickerTarget.kind,
+                        avatarPickerTarget.id,
+                        c.seed
+                      );
+                      setAvatarPickerOpen(false);
+                    }}
+                    title="Apply"
+                  >
+                    {c.url ? <img src={c.url} alt="" className="h-full w-full" /> : null}
+                  </button>
+                ))}
+                </div>
+              </div>
+            </div>
+          )}
+        </DialogContent>
+      </Dialog>
     </div>
   );
 }
@@ -1292,6 +1471,7 @@ function MessageBubble({
   request,
   showAgent,
   agentNameMap,
+  avatarUrlMap,
   isHistory,
   showName,
   showAvatar,
@@ -1308,6 +1488,7 @@ function MessageBubble({
   request: CueRequest;
   showAgent?: boolean;
   agentNameMap?: Record<string, string>;
+  avatarUrlMap?: Record<string, string>;
   isHistory?: boolean;
   showName?: boolean;
   showAvatar?: boolean;
@@ -1347,6 +1528,7 @@ function MessageBubble({
   const rawId = request.agent_id || "";
   const displayName = (agentNameMap && rawId ? agentNameMap[rawId] || rawId : rawId) || "";
   const cardMaxWidth = (showAvatar ?? true) ? "calc(100% - 3rem)" : "100%";
+  const avatarUrl = rawId && avatarUrlMap ? avatarUrlMap[`agent:${rawId}`] : "";
 
   return (
     <div
@@ -1374,7 +1556,11 @@ function MessageBubble({
             onMentionAgent?.(agentId);
           }}
         >
-          {getAgentEmoji(request.agent_id || "")}
+          {avatarUrl ? (
+            <img src={avatarUrl} alt="" className="h-full w-full rounded-full" />
+          ) : (
+            getAgentEmoji(request.agent_id || "")
+          )}
         </span>
       ) : (
         <span className="h-9 w-9 shrink-0" />

package/src/components/conversation-list.tsx

@@ -10,6 +10,11 @@ import {
   CollapsibleTrigger,
 } from "@/components/ui/collapsible";
 import { cn, getAgentEmoji, formatTime, truncateText } from "@/lib/utils";
+import {
+  getOrInitAvatarSeed,
+  getOrInitGroupAvatarSeed,
+  thumbsAvatarDataUrl,
+} from "@/lib/avatar";
 import {
   archiveConversations,
   deleteConversations,
@@ -56,6 +61,7 @@ export function ConversationList({
   onToggleCollapsed,
 }: ConversationListProps) {
   const [items, setItems] = useState<ConversationItem[]>([]);
+  const [avatarUrlMap, setAvatarUrlMap] = useState<Record<string, string>>({});
   const [search, setSearch] = useState("");
   const [view, setView] = useState<"active" | "archived">("active");
   const [archivedCount, setArchivedCount] = useState(0);
@@ -76,6 +82,24 @@ export function ConversationList({
       }
   >({ open: false });
 
+  const ensureAvatarUrl = useCallback(async (kind: "agent" | "group", rawId: string) => {
+    if (!rawId) return;
+    const key = `${kind}:${rawId}`;
+    setAvatarUrlMap((prev) => {
+      if (prev[key]) return prev;
+      return { ...prev, [key]: "" };
+    });
+
+    try {
+      const seed =
+        kind === "agent" ? getOrInitAvatarSeed(rawId) : getOrInitGroupAvatarSeed(rawId);
+      const url = await thumbsAvatarDataUrl(seed);
+      setAvatarUrlMap((prev) => ({ ...prev, [key]: url }));
+    } catch {
+      // ignore
+    }
+  }, []);
+
   const [moreMenu, setMoreMenu] = useState<
     | { open: false }
     | {
@@ -115,9 +139,27 @@ export function ConversationList({
       );
     };
 
+    const onAvatarSeedUpdated = (evt: Event) => {
+      const e = evt as CustomEvent<{ kind: "agent" | "group"; id: string; seed: string }>;
+      const kind = e.detail?.kind;
+      const rawId = e.detail?.id;
+      const seed = e.detail?.seed;
+      if (!kind || !rawId || !seed) return;
+      void (async () => {
+        try {
+          const url = await thumbsAvatarDataUrl(seed);
+          setAvatarUrlMap((prev) => ({ ...prev, [`${kind}:${rawId}`]: url }));
+        } catch {
+          // ignore
+        }
+      })();
+    };
+
     window.addEventListener("cuehub:agentDisplayNameUpdated", onAgentNameUpdated);
+    window.addEventListener("cue-console:avatarSeedUpdated", onAvatarSeedUpdated);
     return () => {
       window.removeEventListener("cuehub:agentDisplayNameUpdated", onAgentNameUpdated);
+      window.removeEventListener("cue-console:avatarSeedUpdated", onAvatarSeedUpdated);
     };
   }, []);
 
@@ -128,6 +170,12 @@ export function ConversationList({
     setArchivedCount(count);
   }, [view]);
 
+  useEffect(() => {
+    for (const it of items) {
+      void ensureAvatarUrl(it.type, it.id);
+    }
+  }, [ensureAvatarUrl, items]);
+
   useEffect(() => {
     const t0 = setTimeout(() => {
       void loadData();
@@ -512,6 +560,7 @@ export function ConversationList({
                   <div key={item.id} data-conversation-item="true">
                     <ConversationIconButton
                       item={item}
+                      avatarUrl={avatarUrlMap[`group:${item.id}`]}
                       isSelected={selectedId === item.id && selectedType === "group"}
                       onClick={() => onSelect(item.id, "group", item.name)}
                     />
@@ -529,6 +578,7 @@ export function ConversationList({
                   <div key={item.id} data-conversation-item="true">
                     <ConversationIconButton
                       item={item}
+                      avatarUrl={avatarUrlMap[`agent:${item.id}`]}
                       isSelected={selectedId === item.id && selectedType === "agent"}
                       onClick={() => onSelect(item.id, "agent", item.name)}
                     />
@@ -602,6 +652,7 @@ export function ConversationList({
                   >
                     <ConversationItemCard
                       item={item}
+                      avatarUrl={avatarUrlMap[`group:${item.id}`]}
                       isSelected={selectedId === item.id && selectedType === "group"}
                       bulkMode={bulkMode}
                       checked={selectedKeys.has(conversationKey(item))}
@@ -643,6 +694,7 @@ export function ConversationList({
                   >
                     <ConversationItemCard
                       item={item}
+                      avatarUrl={avatarUrlMap[`agent:${item.id}`]}
                       isSelected={selectedId === item.id && selectedType === "agent"}
                       bulkMode={bulkMode}
                       checked={selectedKeys.has(conversationKey(item))}
@@ -850,10 +902,12 @@ export function ConversationList({
 
 function ConversationIconButton({
   item,
+  avatarUrl,
   isSelected,
   onClick,
 }: {
   item: ConversationItem;
+  avatarUrl?: string;
   isSelected: boolean;
   onClick: () => void;
 }) {
@@ -870,7 +924,11 @@ function ConversationIconButton({
       onClick={onClick}
       title={item.displayName}
     >
-      <span className="text-xl">{emoji}</span>
+      {avatarUrl ? (
+        <img src={avatarUrl} alt="" className="h-7 w-7 rounded-full" />
+      ) : (
+        <span className="text-xl">{emoji}</span>
+      )}
       {item.pendingCount > 0 && (
         <span className="absolute -right-0.5 -top-0.5 h-2.5 w-2.5 rounded-full bg-destructive ring-2 ring-sidebar" />
       )}
@@ -880,6 +938,7 @@ function ConversationIconButton({
 
 function ConversationItemCard({
   item,
+  avatarUrl,
   isSelected,
   onClick,
   bulkMode,
@@ -888,6 +947,7 @@ function ConversationItemCard({
   view,
 }: {
   item: ConversationItem;
+  avatarUrl?: string;
   isSelected: boolean;
   onClick: () => void;
   bulkMode?: boolean;
@@ -918,8 +978,12 @@ function ConversationItemCard({
           />
         </span>
       )}
-      <span className="relative flex h-9 w-9 shrink-0 items-center justify-center rounded-full bg-white/55 ring-1 ring-white/40 text-[18px]">
-        {emoji}
+      <span className="relative flex h-9 w-9 shrink-0 items-center justify-center rounded-full bg-white/55 ring-1 ring-white/40 text-[18px] overflow-hidden">
+        {avatarUrl ? (
+          <img src={avatarUrl} alt="" className="h-full w-full" />
+        ) : (
+          emoji
+        )}
         {item.pendingCount > 0 && (
           <span className="absolute -right-0.5 -top-0.5 h-2.5 w-2.5 rounded-full bg-destructive ring-2 ring-background" />
         )}

package/src/lib/avatar.ts

@@ -0,0 +1,96 @@
+export function safeLocalStorageGet(key: string): string | null {
+  try {
+    if (typeof window === "undefined") return null;
+    return window.localStorage.getItem(key);
+  } catch {
+    return null;
+  }
+}
+
+export function safeLocalStorageSet(key: string, value: string): void {
+  try {
+    if (typeof window === "undefined") return;
+    window.localStorage.setItem(key, value);
+  } catch {
+    // ignore
+  }
+}
+
+export function randomSeed(): string {
+  if (typeof crypto !== "undefined" && "randomUUID" in crypto) {
+    return crypto.randomUUID();
+  }
+  return String(Date.now()) + "-" + Math.random().toString(16).slice(2);
+}
+
+export function avatarSeedKey(agentId: string): string {
+  return `cue-console.avatarSeed.agent.${agentId}`;
+}
+
+export function groupAvatarSeedKey(groupId: string): string {
+  return `cue-console.avatarSeed.group.${groupId}`;
+}
+
+export function notifyAvatarSeedUpdated(
+  kind: "agent" | "group",
+  id: string,
+  seed: string
+): void {
+  try {
+    if (typeof window === "undefined") return;
+    window.dispatchEvent(
+      new CustomEvent("cue-console:avatarSeedUpdated", {
+        detail: { kind, id, seed },
+      })
+    );
+  } catch {
+    // ignore
+  }
+}
+
+export function getOrInitAvatarSeed(agentId: string): string {
+  const key = avatarSeedKey(agentId);
+  const existing = safeLocalStorageGet(key);
+  if (existing) return existing;
+  const seed = randomSeed();
+  safeLocalStorageSet(key, seed);
+  return seed;
+}
+
+export function getOrInitGroupAvatarSeed(groupId: string): string {
+  const key = groupAvatarSeedKey(groupId);
+  const existing = safeLocalStorageGet(key);
+  if (existing) return existing;
+  const seed = randomSeed();
+  safeLocalStorageSet(key, seed);
+  return seed;
+}
+
+export function setAvatarSeed(agentId: string, seed: string): void {
+  safeLocalStorageSet(avatarSeedKey(agentId), seed);
+  notifyAvatarSeedUpdated("agent", agentId, seed);
+}
+
+export function setGroupAvatarSeed(groupId: string, seed: string): void {
+  safeLocalStorageSet(groupAvatarSeedKey(groupId), seed);
+  notifyAvatarSeedUpdated("group", groupId, seed);
+}
+
+export async function thumbsAvatarDataUrl(seed: string): Promise<string> {
+  const [{ createAvatar }, thumbsStyle] = await Promise.all([
+    import("@dicebear/core"),
+    import("@dicebear/thumbs"),
+  ]);
+
+  const svg = createAvatar(thumbsStyle as any, {
+    seed,
+  }).toString();
+
+  // Use base64 to avoid data-uri escaping issues (spaces/newlines/quotes) that can break rendering.
+  const utf8 = new TextEncoder().encode(svg);
+  let binary = "";
+  for (let i = 0; i < utf8.length; i++) binary += String.fromCharCode(utf8[i]);
+  const b64 = btoa(binary);
+
+  return `data:image/svg+xml;base64,${b64}`;
+}

package/src/types/dicebear.d.ts

@@ -0,0 +1,3 @@
+declare module "@dicebear/core";
+
+declare module "@dicebear/thumbs";