feat(ui): give logged-in users their own chat bubble color (#112070)

fuller-stack-dev · claude · web-flow · commit b521a85d85f6 · 2026-07-20T23:42:04.000-06:00
Attributed senders' bubbles, footer names, and avatar initials now share a stable identity hue (same FNV-1a seed as avatar initials, hash % 360). Only the hue varies per user; saturation/lightness/alpha are fixed per theme mode so text contrast holds for every hue in light and dark themes. Unattributed local, assistant, and tool bubbles are unchanged. Closes #112068 Co-authored-by: Claude Fable 5 <noreply@anthropic.com>
diff --git a/ui/src/lib/identity-avatar.test.ts b/ui/src/lib/identity-avatar.test.ts
@@ -1,6 +1,6 @@
 // @vitest-environment node
 import { afterEach, describe, expect, it } from "vitest";
-import { resolveAvatar, setAvatarGatewayOrigin } from "./identity-avatar.ts";
+import { resolveAvatar, resolveIdentityHue, setAvatarGatewayOrigin } from "./identity-avatar.ts";
 
 afterEach(() => {
   setAvatarGatewayOrigin(null);
@@ -31,6 +31,18 @@ describe("resolveAvatar", () => {
     }
   });
 
+  it("derives a stable identity hue from the same seed as the initials color", () => {
+    const first = resolveIdentityHue({ id: "profile_123", name: "Ada Lovelace" });
+    const second = resolveIdentityHue({ id: "profile_123", name: "Renamed User" });
+    expect(first).toBe(second);
+    expect(first).toBeGreaterThanOrEqual(0);
+    expect(first).toBeLessThan(360);
+    const resolved = resolveAvatar({ id: "profile_123" });
+    if (resolved.kind === "initials") {
+      expect(first).toBe(resolved.colorSeed % 360);
+    }
+  });
+
   it("lets an already-resolved profile avatar win", () => {
     expect(
       resolveAvatar({ id: "alice@example.com", profileAvatarUrl: "/api/users/p1/avatar" }),
diff --git a/ui/src/lib/identity-avatar.ts b/ui/src/lib/identity-avatar.ts
@@ -91,6 +91,15 @@ export function resolveAvatarInitials(
   };
 }
 
+/**
+ * Stable identity hue (0-359) shared by avatar initials and per-sender chat
+ * bubble tints; both must derive from the same seed or a user's bubble and
+ * avatar drift apart. Lightness/alpha stay theme-owned in CSS.
+ */
+export function resolveIdentityHue(input: IdentityAvatarInput): number {
+  return resolveAvatarInitials(input).colorSeed % 360;
+}
+
 /**
  * Resolves a trusted gateway avatar route, else deterministic initials.
  * Gravatar is served by the gateway inside the profile avatar route itself, so
diff --git a/ui/src/pages/chat/chat-avatar.ts b/ui/src/pages/chat/chat-avatar.ts
@@ -17,7 +17,11 @@ import {
 import { normalizeRoleForGrouping } from "../../lib/chat/message-normalizer.ts";
 import type { SenderIdentity } from "../../lib/chat/sender-label.ts";
 import { formatSenderLabel } from "../../lib/chat/sender-label.ts";
-import { resolveAvatar, resolveAvatarInitials } from "../../lib/identity-avatar.ts";
+import {
+  resolveAvatar,
+  resolveAvatarInitials,
+  resolveIdentityHue,
+} from "../../lib/identity-avatar.ts";
 import {
   DEFAULT_AGENT_ID,
   isUiGlobalSessionKey,
@@ -41,7 +45,7 @@ export function renderChatAvatar(
     const initials = resolveAvatarInitials(sender);
     const initialsAvatar = html`<div
       class="chat-avatar user chat-avatar--sender-initials"
-      style=${`background: hsl(${initials.colorSeed % 360} 48% 42%)`}
+      style=${`background: hsl(${resolveIdentityHue(sender)} 48% 42%)`}
       aria-label="${label}"
     >
       ${initials.initials}
diff --git a/ui/src/pages/chat/components/chat-message.test.ts b/ui/src/pages/chat/components/chat-message.test.ts
@@ -1535,6 +1535,45 @@ describe("grouped chat rendering", () => {
     });
   });
 
+  it("tints attributed user groups with the sender's stable identity hue", () => {
+    const renderGroupFor = (sender?: { id: string; name: string }) => {
+      const container = document.createElement("div");
+      render(
+        renderMessageGroup(
+          {
+            kind: "group",
+            key: "tint-group",
+            role: "user",
+            ...(sender ? { sender, senderLabel: sender.name } : {}),
+            messages: [
+              { key: "tint-message", message: { role: "user", content: "hi", timestamp: 1000 } },
+            ],
+            timestamp: 1000,
+            isStreaming: false,
+          },
+          { showReasoning: true, showToolCalls: true },
+        ),
+        container,
+      );
+      return container.querySelector<HTMLElement>(".chat-group.user");
+    };
+
+    const attributed = renderGroupFor({ id: "profile-1", name: "Alice Example" });
+    expect(attributed?.classList.contains("chat-group--sender-tint")).toBe(true);
+    const hue = Number(attributed?.style.getPropertyValue("--chat-sender-hue"));
+    expect(Number.isInteger(hue)).toBe(true);
+    expect(hue).toBeGreaterThanOrEqual(0);
+    expect(hue).toBeLessThan(360);
+
+    // Same sender always lands on the same hue; the local unattributed viewer
+    // keeps the accent skin.
+    const again = renderGroupFor({ id: "profile-1", name: "Alice Example" });
+    expect(again?.style.getPropertyValue("--chat-sender-hue")).toBe(String(hue));
+    const local = renderGroupFor();
+    expect(local?.classList.contains("chat-group--sender-tint")).toBe(false);
+    expect(local?.style.getPropertyValue("--chat-sender-hue")).toBe("");
+  });
+
   it("uses the current profile display name for the signed-in user's historical messages", () => {
     const container = document.createElement("div");
     render(
diff --git a/ui/src/pages/chat/components/chat-message.ts b/ui/src/pages/chat/components/chat-message.ts
@@ -48,6 +48,7 @@ import {
   formatTimeAgo,
 } from "../../../lib/format.ts";
 import "../../../components/tooltip.ts";
+import { resolveIdentityHue } from "../../../lib/identity-avatar.ts";
 import { getMediaFileExtension } from "../../../lib/media-file-extension.ts";
 import {
   openExternalUrlSafe,
@@ -1006,8 +1007,19 @@ export function renderMessageGroup(group: MessageGroup, opts: RenderMessageGroup
   const lastMessageIndex = group.messages.length - 1;
   const footerActionDetails = messageActionDetails[lastMessageIndex] ?? null;
 
+  // Attributed (logged-in) senders tint their bubbles with the same stable
+  // identity hue as their avatar initials; CSS owns per-theme lightness so
+  // the tint stays readable in both light and dark modes. Unattributed local
+  // messages keep the accent skin.
+  const senderHue =
+    normalizedRole === "user" && group.sender ? resolveIdentityHue(group.sender) : null;
+
   return html`
-    <div class="chat-group ${roleClass}" data-chat-row-key=${group.key}>
+    <div
+      class="chat-group ${roleClass}${senderHue === null ? "" : " chat-group--sender-tint"}"
+      style=${senderHue === null ? nothing : `--chat-sender-hue: ${senderHue}`}
+      data-chat-row-key=${group.key}
+    >
       ${renderChatAvatar(
         group.role,
         {
diff --git a/ui/src/styles/chat/grouped.css b/ui/src/styles/chat/grouped.css
@@ -633,6 +633,38 @@ img.chat-avatar {
   box-shadow: none;
 }
 
+/* Per-user bubble tint: --chat-sender-hue is the sender's stable identity hue
+   (same seed as their avatar initials). Only hue varies per user; saturation/
+   lightness/alpha are fixed per theme mode so bubble text keeps contrast for
+   every hue. Order contract: stays below the light-mode reset above — the
+   dark rule outranks it by specificity, so light mode needs its own skin. */
+.chat-group.user.chat-group--sender-tint .chat-bubble {
+  background: hsl(var(--chat-sender-hue) 48% 42% / 0.16);
+}
+
+.chat-group.user.chat-group--sender-tint .chat-bubble:hover {
+  border-color: hsl(var(--chat-sender-hue) 48% 55% / 0.4);
+}
+
+.chat-group.user.chat-group--sender-tint .chat-sender-name {
+  color: hsl(var(--chat-sender-hue) 45% 70%);
+}
+
+:root[data-theme-mode="light"] .chat-group.user.chat-group--sender-tint .chat-bubble {
+  background: hsl(var(--chat-sender-hue) 65% 94%);
+  border-color: hsl(var(--chat-sender-hue) 45% 82%);
+}
+
+/* Outranks the light skin above (it also sets border-color); without this the
+   tinted hover border never applies in light mode. */
+:root[data-theme-mode="light"] .chat-group.user.chat-group--sender-tint .chat-bubble:hover {
+  border-color: hsl(var(--chat-sender-hue) 48% 62%);
+}
+
+:root[data-theme-mode="light"] .chat-group.user.chat-group--sender-tint .chat-sender-name {
+  color: hsl(var(--chat-sender-hue) 60% 36%);
+}
+
 /* ── Message metadata (tokens, cost, model, context %) ── */
 .msg-meta {
   display: inline-flex;
