fix(ui): distinguish Memory and Model icons (BrainCog / BrainCircuit) (#13111)

Memory base and Model Providers both rendered the plain "Brain" Lucide
icon, which QA flagged as confusing — the two sections felt
interchangeable at a glance.

Repoint each surface to its own variant per product/manager direction:

  Model Providers / model trigger / settings nav: Brain → BrainCircuit
  Memory base (sidebar nav, modal, details header, empty states):
    Brain → BrainCog

BrainCircuit was already in use for Language Models / LLM Operations in
the component library, so the Model Providers surface now lines up with
that family. Memory keeps its own distinct glyph (cog) to read as
"managed knowledge" rather than "a model".

Test fixture in sidebarSegmentedNav.test.tsx updated. Provider-list
fixtures that happened to default to "Brain" for unrelated test data are
left as-is.
This commit is contained in:
keval shah
2026-05-13 15:30:07 -04:00
committed by GitHub
parent fb0587c23a
commit 3cbd07b68d
9 changed files with 13 additions and 10 deletions

View File

@ -57,7 +57,7 @@ const ModelTrigger = ({
onClick={onOpenManageProviders}
>
<ForwardedIconComponent
name="Brain"
name="BrainCircuit"
className="h-4 w-4 flex-shrink-0 text-muted-foreground"
/>
<div className="text-[13px] text-muted-foreground">

View File

@ -57,7 +57,7 @@ export default function CreateMemoryModal({
onSubmit={handleSubmit}
>
<BaseModal.Header description={`Create a memory for \"${flowName}\"`}>
<ForwardedIconComponent name="Brain" className="mr-2 h-4 w-4" />
<ForwardedIconComponent name="BrainCog" className="mr-2 h-4 w-4" />
Create Memory
</BaseModal.Header>
<BaseModal.Content className="flex flex-col gap-6 px-6 py-4">

View File

@ -34,7 +34,7 @@ export function MemoriesSidebar({
<div className="flex items-center justify-between gap-2">
<div className="flex items-center gap-2">
<IconComponent
name="Brain"
name="BrainCog"
className="h-4 w-4 text-muted-foreground"
/>
<h2 className="text-sm font-semibold">Memories</h2>
@ -69,7 +69,7 @@ export function MemoriesSidebar({
{!filteredMemories.length ? (
<div className="px-3 py-6 text-center">
<IconComponent
name="Brain"
name="BrainCog"
className="mx-auto mb-2 h-8 w-8 text-muted-foreground opacity-50"
/>
<p className="text-xs text-muted-foreground">

View File

@ -39,7 +39,10 @@ export function MemoryDetailsHeader({
return (
<div className="flex items-center justify-between border-b border-border bg-background px-6 py-3">
<div className="flex items-center gap-3">
<IconComponent name="Brain" className="h-5 w-5 text-muted-foreground" />
<IconComponent
name="BrainCog"
className="h-5 w-5 text-muted-foreground"
/>
<div>
<h2 className="text-sm font-semibold">{memory.name}</h2>
{memory.description && (

View File

@ -11,7 +11,7 @@ export const NoMemorySelected = () => (
>
<span aria-hidden="true">
<IconComponent
name="Brain"
name="BrainCog"
className="mb-3 h-12 w-12 text-muted-foreground opacity-50"
/>
</span>

View File

@ -422,7 +422,7 @@ describe("SidebarSegmentedNav", () => {
});
expect(NAV_ITEMS[6]).toEqual({
id: "memories",
icon: "Brain",
icon: "BrainCog",
label: "Memories",
tooltip: "Memories",
});

View File

@ -60,7 +60,7 @@ export const NAV_ITEMS: NavItem[] = [
},
{
id: "memories",
icon: "Brain",
icon: "BrainCog",
label: "Memories",
tooltip: "Memories",
},

View File

@ -75,7 +75,7 @@ export default function SettingsPage(): JSX.Element {
href: "/settings/model-providers",
icon: (
<ForwardedIconComponent
name="Brain"
name="BrainCircuit"
className="w-4 flex-shrink-0 justify-start stroke-[1.5]"
/>
),

View File

@ -14,7 +14,7 @@ export default function ModelProvidersPage() {
>
{t("modelProviders.pageTitle")}
<ForwardedIconComponent
name="Brain"
name="BrainCircuit"
className="ml-2 h-5 w-5 text-primary"
/>
</h2>