@agentprojectcontext/apx 1.81.0 → 1.89.1

package/src/interfaces/web/src/screens/modules/ImagesScreen.tsx

@@ -0,0 +1,172 @@
+import { useMemo, useState } from "react";
+import useSWR from "swr";
+import { Section } from "../../components/Section";
+import { Empty, Loading } from "../../components/ui";
+import { useToast } from "../../components/Toast";
+import { useGlobalConfig } from "../../hooks/useGlobalConfig";
+import { ImageProviderList } from "../../components/images/ImageProviderList";
+import { ImageProviderModal, type ImageProviderSave } from "../../components/images/ImageProviderModal";
+import { ImageTestCard } from "../../components/images/ImageTestCard";
+import { ImageDefaultsCard } from "../../components/images/ImageDefaultsCard";
+import { Images, type ImagesConfig } from "../../lib/api/images";
+import { ConfirmDialog } from "../../components/common/ConfirmDialog";
+import { t } from "../../i18n";
+
+// Images module — configure the engines that draw, set the shared defaults,
+// and prove one works. Availability comes from the daemon (/images/providers);
+// everything else persists through the admin config PATCH under images.*.
+//
+// Same shape as the Voices module on purpose: these are the same problem
+// (several providers, one router, per-provider credentials) and a person who
+// has configured one should recognise the other immediately.
+export function ImagesScreen() {
+  const toast = useToast();
+  const { config, isLoading: cfgLoading, patch, mutate: mutateCfg } = useGlobalConfig();
+  const {
+    data: providersData,
+    isLoading: provLoading,
+    error: provError,
+    mutate: mutateProviders,
+  } = useSWR("/api/images/providers", () => Images.providers());
+
+  const [editing, setEditing] = useState<string | null>(null);
+  const [busy, setBusy] = useState(false);
+  const [confirmRemove, setConfirmRemove] = useState<string | null>(null);
+
+  // `images` is not on the typed GlobalConfig (it is owned here) — read it off
+  // a local view, the way the Voices module reads voice/transcription. Memoised
+  // because the `|| {}` fallback would otherwise be a fresh object on every
+  // render, and the memo below depends on it.
+  const imagesCfg = useMemo<ImagesConfig>(
+    () => ((config as unknown as { images?: ImagesConfig }).images || {}),
+    [config],
+  );
+  const configuredProvider = providersData?.configured_provider || imagesCfg.provider || "auto";
+  const mode = providersData?.mode || imagesCfg.mode || "chain";
+  const order = useMemo(() => providersData?.order || [], [providersData]);
+  const engines = providersData?.engines || [];
+
+  const editingConfig = useMemo<Record<string, unknown>>(() => {
+    if (!editing || editing === "__new__") return {};
+    if (editing.startsWith("custom:")) {
+      return (imagesCfg.custom?.[editing.slice(7)] as unknown as Record<string, unknown>) || {};
+    }
+    return ((imagesCfg as unknown as Record<string, unknown>)[editing] as Record<string, unknown>) || {};
+  }, [editing, imagesCfg]);
+
+  const toggleEnabled = async (id: string, enabled: boolean) => {
+    setBusy(true);
+    try {
+      const key = id.startsWith("custom:")
+        ? `images.custom.${id.slice(7)}.enabled`
+        : `images.${id}.enabled`;
+      await patch({ [key]: enabled });
+      await mutateProviders();
+    } catch (e) {
+      toast.error((e as Error).message);
+    } finally {
+      setBusy(false);
+    }
+  };
+
+  const reorder = async (nextOrder: string[]) => {
+    setBusy(true);
+    try {
+      await patch({ "images.order": nextOrder });
+      await mutateProviders();
+    } catch (e) {
+      toast.error((e as Error).message);
+    } finally {
+      setBusy(false);
+    }
+  };
+
+  const saveProvider = async ({ set, unset }: ImageProviderSave) => {
+    await patch(set, unset.length ? unset : undefined);
+    await mutateProviders();
+    await mutateCfg();
+    toast.success(t("images_ui.toast_config_saved"));
+  };
+
+  const saveDefaults = async (set: Record<string, unknown>, unset?: string[]) => {
+    try {
+      await patch(set, unset);
+      await mutateProviders();
+      await mutateCfg();
+      toast.success(t("images_ui.toast_defaults_saved"));
+    } catch (e) {
+      toast.error((e as Error).message);
+    }
+  };
+
+  const doRemoveCustom = async () => {
+    const id = confirmRemove;
+    if (!id || !id.startsWith("custom:")) return;
+    setBusy(true);
+    try {
+      // Drop the block and any reference to it in the chain order, or the
+      // router would keep walking past a provider that no longer exists.
+      await patch({ "images.order": order.filter((x) => x !== id) }, [`images.custom.${id.slice(7)}`]);
+      await mutateProviders();
+      await mutateCfg();
+      toast.success(t("images_ui.toast_provider_removed"));
+    } catch (e) {
+      toast.error((e as Error).message);
+    } finally {
+      setBusy(false);
+      setConfirmRemove(null);
+    }
+  };
+
+  return (
+    <div data-testid="screen-images">
+      <div className="grid gap-6 xl:grid-cols-2">
+        <Section title={t("images_screen.providers_title")} description={t("images_ui.providers_desc")}>
+          {provLoading || cfgLoading ? (
+            <Loading />
+          ) : provError ? (
+            <Empty>{t("images_ui.providers_load_error", { msg: (provError as Error).message })}</Empty>
+          ) : (
+            <ImageProviderList
+              engines={engines}
+              order={order}
+              onToggleEnabled={toggleEnabled}
+              onReorder={reorder}
+              onConfigure={(id) => setEditing(id)}
+              onRemove={(id) => setConfirmRemove(id)}
+              onAddNew={() => setEditing("__new__")}
+              busy={busy}
+            />
+          )}
+        </Section>
+
+        <div className="space-y-6">
+          <Section title={t("images_screen.test_title")} description={t("images_ui.test_desc")}>
+            <ImageTestCard engines={engines} defaultProvider={configuredProvider} mode={mode} />
+          </Section>
+
+          <Section title={t("images_screen.defaults_title")} description={t("images_ui.defaults_desc")}>
+            {cfgLoading ? <Loading /> : <ImageDefaultsCard config={imagesCfg} onPatch={saveDefaults} />}
+          </Section>
+        </div>
+      </div>
+
+      <ImageProviderModal
+        open={!!editing}
+        providerId={editing}
+        config={editingConfig}
+        onClose={() => setEditing(null)}
+        onSave={saveProvider}
+      />
+
+      <ConfirmDialog
+        open={!!confirmRemove}
+        onClose={() => setConfirmRemove(null)}
+        onConfirm={doRemoveCustom}
+        title={t("images_ui.remove_confirm")}
+        confirmLabel={t("common.remove")}
+        testId="image-remove-provider-confirm"
+      />
+    </div>
+  );
+}

package/src/interfaces/web/src/screens/modules/VoiceScreen.tsx

@@ -8,7 +8,11 @@ import { VoiceProviderList } from "../../components/voice/VoiceProviderList";
 import { VoiceProviderModal, type VoiceProviderSave } from "../../components/voice/VoiceProviderModal";
 import { VoiceTestCard } from "../../components/voice/VoiceTestCard";
 import { VoiceSttCard } from "../../components/voice/VoiceSttCard";
+import { VoiceQvoxStatusCard } from "../../components/voice/VoiceQvoxStatusCard";
+import { VoiceQvoxInstallCard } from "../../components/voice/VoiceQvoxInstallCard";
+import { shouldSuggestQvox } from "../../lib/qvox";
 import { Voice, type TranscriptionConfig, type TtsMode, type VoiceTtsConfig } from "../../lib/api/voice";
+import { ConfirmDialog } from "../../components/common/ConfirmDialog";
 import { t } from "../../i18n";
 
 // Voices module — configure TTS/STT providers, pick the default engine, and
@@ -29,6 +33,8 @@ export function VoiceScreen() {
   // "create custom provider" mode.
   const [editing, setEditing] = useState<string | null>(null);
   const [busyDefault, setBusyDefault] = useState(false);
+  // custom:<slug> engine id pending removal confirmation.
+  const [confirmRemove, setConfirmRemove] = useState<string | null>(null);
 
   // config.voice is typed as Record<string,unknown> and transcription isn't on
   // GlobalConfig (owned by another agent) — read both off a local view.
@@ -113,9 +119,14 @@ export function VoiceScreen() {
     toast.success(t("voice_ui.toast_config_saved"));
   };
 
-  const removeCustom = async (id: string) => {
+  const removeCustom = (id: string) => {
     if (!id.startsWith("custom:")) return;
-    if (!window.confirm(t("voice_ui.remove_confirm"))) return;
+    setConfirmRemove(id);
+  };
+
+  const doRemoveCustom = async () => {
+    const id = confirmRemove;
+    if (!id || !id.startsWith("custom:")) return;
     setBusyDefault(true);
     try {
       const slug = id.slice(7);
@@ -142,8 +153,11 @@ export function VoiceScreen() {
 
   return (
     <div data-testid="screen-voice">
-      <div className="grid gap-6 xl:grid-cols-2">
-        {/* Left: TTS providers */}
+      <div className="grid items-start gap-6 xl:grid-cols-2">
+        {/* Left: TTS providers, then the QVox cards — outside the providers
+            block, because they are about the local engine itself rather than
+            about the fallback order the list configures. */}
+        <div className="space-y-6">
         <Section
           title={t("voice_screen.providers_title")}
           description={t("voice_ui.providers_desc")}
@@ -167,6 +181,13 @@ export function VoiceScreen() {
           )}
         </Section>
 
+        {/* One card, chosen by state: the offer while QVox is missing, the
+            status once it is here. */}
+        {!provLoading && (shouldSuggestQvox(engines)
+          ? <VoiceQvoxInstallCard />
+          : <VoiceQvoxStatusCard />)}
+        </div>
+
         {/* Right: test + STT */}
         <div className="space-y-6">
           <Section title={t("voice_screen.test_title")} description={t("voice_ui.test_desc")}>
@@ -179,6 +200,8 @@ export function VoiceScreen() {
           >
             {cfgLoading ? <Loading /> : <VoiceSttCard config={transcriptionCfg} onPatch={patchStt} />}
           </Section>
+
+
         </div>
       </div>
 
@@ -189,6 +212,15 @@ export function VoiceScreen() {
         onClose={() => setEditing(null)}
         onSave={saveProvider}
       />
+
+      <ConfirmDialog
+        open={!!confirmRemove}
+        onClose={() => setConfirmRemove(null)}
+        onConfirm={doRemoveCustom}
+        title={t("voice_ui.remove_confirm")}
+        confirmLabel={t("common.remove")}
+        testId="voice-remove-provider-confirm"
+      />
     </div>
   );
 }

package/src/interfaces/web/src/screens/project/AgentBrainGraph.tsx

@@ -1,10 +1,15 @@
 import { useEffect, useRef, useState } from "react";
+import { Link } from "react-router-dom";
 import {
   forceSimulation, forceLink, forceManyBody, forceCenter, forceCollide, forceX, forceY,
   type Simulation,
 } from "d3-force";
-import { Maximize2, Minimize2, Plus, Minus, Frame } from "lucide-react";
+import { Eye, Frame, Maximize2, Minimize2, Minus, Pencil, Plus } from "lucide-react";
 import { t } from "../../i18n";
+import { BlobAvatar } from "../../components/agents/BlobAvatar";
+import { isBlobKey } from "../../components/agents/blobPresets";
+import { kindMeta, scheduleHuman } from "../../components/routines/shared";
+import type { RoutineEntry } from "../../types/daemon";
 
 // Generic animated "brain" graph (d3-force + SVG). It takes an explicit node +
 // edge set so callers can model *any* topology — a single agent's hubbed brain
@@ -28,7 +33,23 @@ export interface BrainNode {
   relation?: string;
   detail?: string;
   emoji?: string;
+  icon?: string;          // blob-preset key → animated avatar (see blobPresets)
   slug?: string;          // for navigation (project map)
+  href?: string;          // view this thing
+  editHref?: string;      // open its editor
+}
+
+// An animated blob avatar embedded in the SVG via <foreignObject>. Pointer
+// events pass through so the node's drag/click handlers still fire.
+function NodeBlob({ icon, size, seed }: { icon: string; size: number; seed?: string }) {
+  return (
+    <foreignObject x={-size / 2} y={-size / 2} width={size} height={size}
+      style={{ pointerEvents: "none", overflow: "visible" }}>
+      <div style={{ width: size, height: size }}>
+        <BlobAvatar preset={icon} size={size} seed={seed} />
+      </div>
+    </foreignObject>
+  );
 }
 export interface BrainEdge { source: string; target: string; }
 
@@ -60,13 +81,42 @@ const uniqById = <T extends { id: string }>(arr: T[]): T[] => {
 };
 const clip = (s: string, n = 26) => (s.length > n ? `${s.slice(0, n)}…` : s);
 
+export function clipPreview(s: string | null | undefined, n = 160): string | undefined {
+  const text = (s || "").replace(/\s+/g, " ").trim();
+  if (!text) return undefined;
+  return text.length > n ? `${text.slice(0, n)}…` : text;
+}
+
+export function agentPreview(a: {
+  description?: string | null;
+  role?: string | null;
+  type?: string | null;
+}): string | undefined {
+  const meta = [a.role, a.type].filter(Boolean).join(" · ");
+  const desc = clipPreview(a.description, 160);
+  if (meta && desc) return `${meta}\n${desc}`;
+  return desc || meta || undefined;
+}
+
+export function routinePreview(r: Pick<RoutineEntry, "kind" | "schedule" | "enabled"> & { spec?: Record<string, unknown> }): string {
+  const spec = r.spec || {};
+  const action = String(spec.prompt || spec.text || spec.message || spec.command || "").trim();
+  const kind = kindMeta()[r.kind]?.label || r.kind;
+  const head = [
+    kind,
+    scheduleHuman(r.schedule),
+    r.enabled ? null : t("agents_ui.paused"),
+  ].filter(Boolean).join(" · ");
+  const body = clipPreview(action, 140);
+  return body ? `${head}\n${body}` : head;
+}
+
 export function BrainGraph({
-  nodes, edges, height = 520, onNodeClick, toolbar,
+  nodes, edges, height = 520, toolbar,
 }: {
   nodes: BrainNode[];
   edges: BrainEdge[];
   height?: number;
-  onNodeClick?: (n: BrainNode) => void;
   toolbar?: React.ReactNode;   // extra controls (e.g. an Expand toggle)
 }) {
   const W = 1000, H = Math.round((W * height) / 760); // keep a wide-ish canvas
@@ -78,7 +128,7 @@ export function BrainGraph({
   const linksRef = useRef<SimLink[]>([]);
   const dragRef = useRef<SimNode | null>(null);
   const panRef = useRef<{ x: number; y: number } | null>(null);
-  // Press bookkeeping so a drag is never mistaken for a click (which navigates).
+  // Press bookkeeping so a drag is never mistaken for a click (which selects).
   const downRef = useRef<{ x: number; y: number } | null>(null);
   const movedRef = useRef(false);
   const viewRef = useRef({ tx: 0, ty: 0, k: 1 });
@@ -131,7 +181,10 @@ export function BrainGraph({
       .force("center", forceCenter(CX, CY).strength(0.03))
       .force("x", forceX(CX).strength(0.02))
       .force("y", forceY(CY).strength(0.02))
-      .force("collide", forceCollide<SimNode>((n) => RADIUS[roleOf(n)] + 8))
+      .force("collide", forceCollide<SimNode>((n) => {
+        const extra = isBlobKey(n.icon) && roleOf(n) !== "core" ? 10 : 0;
+        return RADIUS[roleOf(n)] + 8 + extra;
+      }))
       .alphaDecay(0.025)
       .on("tick", bump);
     simRef.current = sim;
@@ -236,7 +289,7 @@ export function BrainGraph({
   const links = linksRef.current;
   const v = viewRef.current;
   const legendKinds = [...new Set(nodes.map((n) => n.kind))].filter((k) => k !== "agent" && k !== "hub");
-  const pick = (n: SimNode) => { setSelected(n); onNodeClick?.(n); };
+  const pick = (n: SimNode) => { setSelected(n); };
 
   // For the detail panel: what the selected node hangs off (parents) and the
   // branches that hang off it (children), derived from the live edges.
@@ -326,7 +379,8 @@ export function BrainGraph({
                 if (role === "core") {
                   const display = (n.emoji && n.emoji.trim()) || n.label.slice(0, 2).toUpperCase();
                   return (
-                    <g key={n.id} transform={`translate(${n.x},${n.y})`}>
+                    <g key={n.id} transform={`translate(${n.x},${n.y})`} className="cursor-pointer"
+                       onPointerDown={(e) => e.stopPropagation()} onClick={() => pick(n)}>
                       <circle r={54} fill="url(#brain-core)">
                         <animate attributeName="r" values="50;58;50" dur="4s" repeatCount="indefinite" />
                         <animate attributeName="opacity" values="0.85;1;0.85" dur="4s" repeatCount="indefinite" />
@@ -335,11 +389,17 @@ export function BrainGraph({
                         <animate attributeName="r" values="26;48" dur="3.2s" repeatCount="indefinite" />
                         <animate attributeName="opacity" values="0.5;0" dur="3.2s" repeatCount="indefinite" />
                       </circle>
-                      <circle r={24} fill={KIND_COLOR.agent} filter="url(#brain-glow)" />
-                      <circle r={24} fill="none" stroke="#ffffff" strokeOpacity={0.35} strokeWidth={1} />
-                      <text textAnchor="middle" dominantBaseline="central" fontSize={display.length <= 2 ? 20 : 11} fontWeight={700} fill="#1a1030">
-                        {display.length > 8 ? display.slice(0, 8) : display}
-                      </text>
+                      {isBlobKey(n.icon) ? (
+                        <NodeBlob icon={n.icon} size={58} seed={n.slug || n.id} />
+                      ) : (
+                        <>
+                          <circle r={24} fill={KIND_COLOR.agent} filter="url(#brain-glow)" />
+                          <circle r={24} fill="none" stroke="#ffffff" strokeOpacity={0.35} strokeWidth={1} />
+                          <text textAnchor="middle" dominantBaseline="central" fontSize={display.length <= 2 ? 20 : 11} fontWeight={700} fill="#1a1030">
+                            {display.length > 8 ? display.slice(0, 8) : display}
+                          </text>
+                        </>
+                      )}
                     </g>
                   );
                 }
@@ -348,21 +408,33 @@ export function BrainGraph({
                 const beat = 2.4 + (idx % 6) * 0.4;
                 const begin = `${(idx % 6) * 0.3}s`;
                 const isHub = role === "hub";
+                const isAgentFace = n.kind === "agent" || n.kind === "agentlink";
+                const hasBlob = isBlobKey(n.icon);
+                const blobSize = hasBlob ? (isHub || isAgentFace ? 36 : 22) : 0;
+                const showEmoji = !hasBlob && !!n.emoji && (isHub || isAgentFace);
                 const showLabel = isHub || isSel || !hideLeafLabels;
+                const labelX = (hasBlob ? blobSize / 2 : r) + 4;
                 return (
                   <g key={n.id} transform={`translate(${n.x},${n.y})`} className="cursor-grab active:cursor-grabbing"
                      onPointerDown={onNodeDown(n)} onClick={onNodeClickGuarded(n)}>
-                    <circle r={r} fill={color} filter="url(#brain-glow)" opacity={0.3}>
-                      <animate attributeName="r" values={`${r};${r + 6};${r}`} dur={`${beat}s`} begin={begin} repeatCount="indefinite" />
+                    <circle r={hasBlob ? blobSize / 2 : r} fill={color} filter="url(#brain-glow)" opacity={0.3}>
+                      <animate attributeName="r" values={`${hasBlob ? blobSize / 2 : r};${(hasBlob ? blobSize / 2 : r) + 6};${hasBlob ? blobSize / 2 : r}`} dur={`${beat}s`} begin={begin} repeatCount="indefinite" />
                       <animate attributeName="opacity" values="0.32;0.08;0.32" dur={`${beat}s`} begin={begin} repeatCount="indefinite" />
                     </circle>
-                    <circle r={r} fill={color} fillOpacity={isSel ? 1 : 0.95}
-                      stroke={isSel ? "#fff" : "#ffffff"} strokeOpacity={isSel ? 1 : 0.25} strokeWidth={isSel ? 2 : 1} />
-                    {n.emoji && isHub && (
-                      <text textAnchor="middle" dominantBaseline="central" fontSize={11} style={{ pointerEvents: "none" }}>{n.emoji}</text>
+                    {!hasBlob && (
+                      <circle r={r} fill={color} fillOpacity={isSel ? 1 : 0.95}
+                        stroke={isSel ? "#fff" : "#ffffff"} strokeOpacity={isSel ? 1 : 0.25} strokeWidth={isSel ? 2 : 1} />
                     )}
+                    {hasBlob ? (
+                      <>
+                        {isSel && <circle r={blobSize / 2 + 3} fill="none" stroke="#fff" strokeWidth={2} />}
+                        <NodeBlob icon={n.icon!} size={blobSize} seed={n.slug || n.id} />
+                      </>
+                    ) : showEmoji ? (
+                      <text textAnchor="middle" dominantBaseline="central" fontSize={isHub ? 13 : 11} style={{ pointerEvents: "none" }}>{n.emoji}</text>
+                    ) : null}
                     {showLabel && (
-                      <text x={r + 4} y={4} fontSize={isHub ? 11 : 10}
+                      <text x={labelX} y={4} fontSize={isHub ? 11 : 10}
                         className={isHub ? "fill-foreground font-medium" : "fill-foreground/80"} style={{ pointerEvents: "none" }}>
                         {n.label.length > 22 ? `${n.label.slice(0, 22)}…` : n.label}
                       </text>
@@ -390,29 +462,40 @@ export function BrainGraph({
           {/* The clicked node: title, type, relation */}
           <div className="flex flex-wrap items-center gap-2">
             <span className="size-2.5 rounded-full" style={{ background: KIND_COLOR[selected.kind] }} />
-            {selected.emoji && <span className="text-sm leading-none">{selected.emoji}</span>}
+            {isBlobKey(selected.icon) ? (
+              <BlobAvatar preset={selected.icon} size={20} animated={false} seed={selected.slug || selected.id} className="shrink-0" />
+            ) : selected.emoji ? (
+              <span className="text-sm leading-none">{selected.emoji}</span>
+            ) : null}
             <span className="text-[13px] font-semibold">{selected.label}</span>
             <span className="rounded bg-muted px-1.5 py-0.5 text-[10px] uppercase tracking-wide text-muted-fg">
               {kindLabel(selected.kind)}
             </span>
             {selected.relation && <span className="text-muted-fg">· {selected.relation}</span>}
-            <div className="ml-auto flex items-center gap-2">
-              {selected.slug && onNodeClick && (
-                <button type="button" onClick={() => onNodeClick(selected)} className="text-primary hover:underline">
-                  {t("agents_ui.brain_open")}
-                </button>
+            <div className="ml-auto flex items-center gap-1.5">
+              {selected.href && (
+                <Link to={selected.href}
+                  className="inline-flex items-center gap-1 rounded-md border border-border px-2 py-0.5 text-[11px] font-medium hover:bg-muted">
+                  <Eye size={12} /> {t("agents_ui.brain_view")}
+                </Link>
+              )}
+              {selected.editHref && (
+                <Link to={selected.editHref}
+                  className="inline-flex items-center gap-1 rounded-md border border-border px-2 py-0.5 text-[11px] font-medium hover:bg-muted">
+                  <Pencil size={12} /> {t("agents_ui.brain_edit")}
+                </Link>
               )}
               <button type="button" onClick={() => setSelected(null)} className="text-muted-fg hover:text-foreground">✕</button>
             </div>
           </div>
 
-          {/* Internal info — only when it adds something beyond the title */}
-          {selDetail && <p className="whitespace-pre-wrap text-muted-fg">{selDetail}</p>}
+          {/* Short preview — only when it adds something beyond the title */}
+          {selDetail && <p className="max-w-prose whitespace-pre-wrap text-[12px] leading-relaxed text-muted-fg">{selDetail}</p>}
 
           {/* Where it hangs from */}
           {selParents.length > 0 && (
             <div className="flex flex-wrap items-center gap-1.5">
-              <span className="text-[10px] uppercase tracking-wide text-muted-fg/70">{t("agents_ui.brain_part_of")}</span>
+              <span className="text-[10px] uppercase tracking-wide text-muted-fg">{t("agents_ui.brain_part_of")}</span>
               {selParents.map((p) => <NeighborChip key={p.id} node={p} onClick={() => setSelected(p)} />)}
             </div>
           )}
@@ -420,7 +503,7 @@ export function BrainGraph({
           {/* Branches that follow it */}
           {selChildren.length > 0 && (
             <div className="flex flex-wrap items-center gap-1.5">
-              <span className="text-[10px] uppercase tracking-wide text-muted-fg/70">
+              <span className="text-[10px] uppercase tracking-wide text-muted-fg">
                 {t("agents_ui.brain_branches")} · {selChildren.length}
               </span>
               {selChildren.map((c) => <NeighborChip key={c.id} node={c} onClick={() => setSelected(c)} />)}
@@ -441,7 +524,11 @@ function NeighborChip({ node, onClick }: { node: BrainNode; onClick: () => void
       className="inline-flex max-w-[220px] items-center gap-1 rounded-md border border-border bg-muted/40 px-1.5 py-0.5 text-[11px] hover:border-muted-fg/50 hover:bg-muted"
     >
       <span className="size-1.5 shrink-0 rounded-full" style={{ background: KIND_COLOR[node.kind] }} />
-      {node.emoji && <span className="leading-none">{node.emoji}</span>}
+      {isBlobKey(node.icon) ? (
+        <BlobAvatar preset={node.icon} size={16} animated={false} seed={node.slug || node.id} className="shrink-0" />
+      ) : node.emoji ? (
+        <span className="leading-none">{node.emoji}</span>
+      ) : null}
       <span className="truncate">{clip(node.label, 28)}</span>
     </button>
   );