fix(clients): context handoffs show each side's account badge

A handoff between two accounts of one provider showed the same glyph
and model on both sides. Each endpoint's provider icon now carries the
same colored initials badge as the sidebar and thread rows, using the
shared shouldShowInstanceBadge rule, on web and mobile.

Co-Authored-By: Claude Opus 5.5 (1M context) <noreply@anthropic.com>

Author: vitalyiegorov

apps/mobile/src/features/threads/ThreadFeed.tsx

@@ -1585,6 +1585,7 @@ function renderFeedEntry(
         environmentId={props.environmentId}
         projectedItem={entry.activities[0]!.projectedItem}
         iconColor={iconSubtleColor}
+        surfaceColor={props.screenColor}
       />
     );
   }

apps/mobile/src/features/threads/thread-handoff-row.tsx

@@ -1,7 +1,11 @@
 import { useAtomValue } from "@effect/atom-react";
 import { scopeThreadRef } from "@t3tools/client-runtime/environment";
 import { resolveHandoffEndpoints } from "@t3tools/client-runtime/handoff";
-import { resolveProviderInstanceDisplayName } from "@t3tools/client-runtime/state/provider-instance-display";
+import {
+  normalizeProviderAccentColor,
+  resolveProviderInstanceDisplayName,
+  shouldShowInstanceBadge,
+} from "@t3tools/client-runtime/state/provider-instance-display";
 import type {
   EnvironmentId,
   OrchestrationV2ProjectedTurnItem,
@@ -13,7 +17,7 @@ import { Fragment, useMemo } from "react";
 import { Alert, Pressable, View, type ColorValue } from "react-native";
 import { AppText as Text } from "../../components/AppText";
 import { SymbolView } from "../../components/AppSymbol";
-import { ProviderIcon } from "../../components/ProviderIcon";
+import { ProviderIcon, ProviderInstanceIcon } from "../../components/ProviderIcon";
 import { environmentThreadDetails } from "../../state/threads";
 import { serverEnvironment } from "../../state/server";
 import { ThreadContextDivider } from "./thread-context-divider";
@@ -38,6 +42,7 @@ export function ThreadHandoffRow(props: {
   environmentId: EnvironmentId;
   projectedItem: OrchestrationV2ProjectedTurnItem;
   iconColor: ColorValue;
+  surfaceColor: string;
 }) {
   const { item } = props.projectedItem;
   const endpointsAtom = useMemo(
@@ -48,6 +53,7 @@ export function ThreadHandoffRow(props: {
   const config = useAtomValue(serverEnvironment.configValueAtom(props.environmentId));
   if (item.type !== "handoff" || endpoints === null) return null;
   const color = item.status === "failed" ? "#e11d48" : props.iconColor;
+  const endpointProps = { providers: config?.providers ?? [], surfaceColor: props.surfaceColor };
   return (
     <ThreadContextDivider
       label="Context handoff"
@@ -63,13 +69,13 @@ export function ThreadHandoffRow(props: {
                 ,
               </Text>
             ) : null}
-            <HandoffEndpoint {...endpoint} providers={config?.providers ?? []} />
+            <HandoffEndpoint {...endpoint} {...endpointProps} />
           </Fragment>
         ))}
         {endpoints.from.length > 0 ? (
           <SymbolView name="arrow.right" size={12} tintColor={color} />
         ) : null}
-        <HandoffEndpoint {...endpoints.to} providers={config?.providers ?? []} />
+        <HandoffEndpoint {...endpoints.to} {...endpointProps} />
       </View>
     </ThreadContextDivider>
   );
@@ -79,6 +85,7 @@ function HandoffEndpoint(props: {
   instanceId: ProviderInstanceId;
   model?: string | undefined;
   providers: ReadonlyArray<ServerProvider>;
+  surfaceColor: string;
 }) {
   const provider = props.providers.find((candidate) => candidate.instanceId === props.instanceId);
   const model = provider?.models.find((candidate) => candidate.slug === props.model);
@@ -87,12 +94,21 @@ function HandoffEndpoint(props: {
     model?.name ??
     props.model ??
     (provider ? resolveProviderInstanceDisplayName(provider) : props.instanceId);
+  const accentColor = normalizeProviderAccentColor(provider?.accentColor);
+  // Same account badge as the thread rows: a handoff between two accounts of
+  // one provider would otherwise show the same glyph on both sides.
+  const showBadge =
+    provider !== undefined &&
+    shouldShowInstanceBadge(
+      { driverKind: provider.driver, accentColor },
+      props.providers.map((candidate) => ({ driverKind: candidate.driver })),
+    );
   return (
     <Pressable
       accessibilityRole="button"
       accessibilityLabel={label}
       accessibilityHint="Show provider account"
-      className="min-h-6 max-w-full flex-row items-center justify-center gap-1"
+      className="min-h-6 max-w-full flex-row items-center justify-center gap-1.5"
       hitSlop={{ top: 8, bottom: 8 }}
       onPress={() =>
         Alert.alert(
@@ -101,11 +117,23 @@ function HandoffEndpoint(props: {
         )
       }
     >
-      <ProviderIcon
-        provider={provider?.driver ?? props.instanceId}
-        iconUrl={provider?.iconUrl}
-        size={12}
-      />
+      {showBadge && provider !== undefined ? (
+        <ProviderInstanceIcon
+          provider={provider.driver}
+          iconUrl={provider.iconUrl}
+          size={14}
+          displayName={resolveProviderInstanceDisplayName(provider)}
+          accentColor={accentColor}
+          showBadge
+          surfaceColor={props.surfaceColor}
+        />
+      ) : (
+        <ProviderIcon
+          provider={provider?.driver ?? props.instanceId}
+          iconUrl={provider?.iconUrl}
+          size={12}
+        />
+      )}
       <Text numberOfLines={1} className="shrink text-xs text-foreground-muted">
         {label}
       </Text>

apps/web/src/components/chat/V2LifecycleRow.tsx

@@ -37,7 +37,7 @@ import {
 } from "lucide-react";
 
 import { Tooltip, TooltipTrigger, TooltipPopup } from "../ui/tooltip";
-import { getProviderInstanceEntry } from "../../providerInstances";
+import { deriveProviderInstanceEntries, shouldShowInstanceBadge } from "../../providerInstances";
 import { formatShortTimestamp } from "../../timestampFormat";
 import { getTriggerDisplayModelName } from "./providerIconUtils";
 import { ProviderInstanceIcon, providerTextColorClassName } from "./ProviderInstanceIcon";
@@ -556,7 +556,11 @@ function HandoffEndpoint(props: {
   readonly instanceId: ProviderInstanceId;
   readonly model?: string | undefined;
 }) {
-  const entry = getProviderInstanceEntry(props.providers, props.instanceId);
+  const entries = deriveProviderInstanceEntries(props.providers);
+  const entry = entries.find((candidate) => candidate.instanceId === props.instanceId);
+  // Same account badge as the sidebar: a handoff between two accounts of one
+  // provider would otherwise show the same glyph on both sides.
+  const showBadge = entry !== undefined && shouldShowInstanceBadge(entry, entries);
   const model = props.model?.trim();
   const providerModel =
     model === undefined || model.length === 0
@@ -574,14 +578,19 @@ function HandoffEndpoint(props: {
         render={
           <span
             tabIndex={0}
-            className="inline-flex min-w-0 items-center gap-1 rounded-sm focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring"
+            className="inline-flex min-w-0 items-center gap-1.5 rounded-sm focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring"
           >
             <ProviderInstanceIcon
               driverKind={entry?.driverKind ?? ProviderDriverKind.make(props.instanceId)}
               displayName={entry?.displayName ?? props.instanceId}
+              accentColor={entry?.accentColor}
               acpRegistryAgentId={entry?.acpRegistryAgentId}
               acpRegistryIconUrl={entry?.acpRegistryIconUrl}
-              iconClassName="size-3"
+              showBadge={showBadge}
+              // Glyph dims, badge stays saturated; sized like the sidebar row.
+              iconClassName={cn("size-3.5", showBadge && "opacity-60")}
+              badgeClassName="right-[-0.1875rem] bottom-[-0.1875rem] h-3 min-w-3 px-0.5 text-5xs"
+              indicatorBackground="var(--background)"
             />
             <span
               className={cn(