@@ -1101,6 +1101,7 @@ function renderFeedEntry(
         environmentId={props.environmentId}
         projectedItem={entry.activities[0]!.projectedItem}
         iconColor={iconSubtleColor}
+        surfaceColor={props.screenColor}
       />
     );
   }
@@ -2546,6 +2547,7 @@ export const ThreadFeed = memo(function ThreadFeed(props: ThreadFeedProps) {
                   environmentId={props.environmentId}
                   endpoints={props.pendingHandoff}
                   iconColor={iconSubtleColor}
+                  surfaceColor={screenColor}
                   label="Context handoff pending"
                 />
               ) : null
 
@@ -2,10 +2,15 @@ import * as Dialog from "../../components/ui/Dialog";
 import { useAtomValue } from "@effect/atom-react";
 import { scopeThreadRef } from "@t3tools/client-runtime/environment";
 import { resolveHandoffEndpoints, type HandoffEndpoints } 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,
+  ProviderInstanceConfig,
   ProviderInstanceId,
   ServerProvider,
 } from "@t3tools/contracts";
@@ -14,7 +19,7 @@ import { useMemo } from "react";
 import { Pressable, View, type ColorValue } from "react-native";
 import { AppText as Text } from "../../components/ui/AppText";
 import { SymbolView } from "../../components/ui/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";
@@ -39,6 +44,7 @@ export function ThreadHandoffRow(props: {
   environmentId: EnvironmentId;
   projectedItem: OrchestrationV2ProjectedTurnItem;
   iconColor: ColorValue;
+  surfaceColor: string;
 }) {
   const { item } = props.projectedItem;
   const endpointsAtom = useMemo(
@@ -53,6 +59,7 @@ export function ThreadHandoffRow(props: {
       environmentId={props.environmentId}
       endpoints={endpoints}
       iconColor={color}
+      surfaceColor={props.surfaceColor}
       label="Context handoff"
       failed={item.status === "failed"}
     />
@@ -63,11 +70,17 @@ export function ThreadHandoffDivider(props: {
   environmentId: EnvironmentId;
   endpoints: HandoffEndpoints;
   iconColor: ColorValue;
+  surfaceColor: string;
   label: string;
   failed?: boolean;
 }) {
   const config = useAtomValue(serverEnvironment.configValueAtom(props.environmentId));
   const { endpoints } = props;
+  const endpointProps = {
+    providers: config?.providers ?? [],
+    providerInstances: config?.settings.providerInstances,
+    surfaceColor: props.surfaceColor,
+  };
   return (
     <ThreadContextDivider
       label={props.label}
@@ -81,7 +94,7 @@ export function ThreadHandoffDivider(props: {
             key={`${endpoint.instanceId}:${endpoint.model ?? ""}`}
             className="max-w-full flex-row items-center"
           >
-            <HandoffEndpoint {...endpoint} providers={config?.providers ?? []} />
+            <HandoffEndpoint {...endpoint} {...endpointProps} />
             {index < endpoints.from.length - 1 ? (
               <Text accessible={false} className="text-xs text-foreground-muted">
                 ,
@@ -92,7 +105,7 @@ export function ThreadHandoffDivider(props: {
         {endpoints.from.length > 0 ? (
           <SymbolView name="arrow.right" size={12} tintColor={props.iconColor} />
         ) : null}
-        <HandoffEndpoint {...endpoints.to} providers={config?.providers ?? []} />
+        <HandoffEndpoint {...endpoints.to} {...endpointProps} />
       </View>
     </ThreadContextDivider>
   );
@@ -102,6 +115,8 @@ function HandoffEndpoint(props: {
   instanceId: ProviderInstanceId;
   model?: string | undefined;
   providers: ReadonlyArray<ServerProvider>;
+  providerInstances: Readonly<Record<string, ProviderInstanceConfig>> | undefined;
+  surfaceColor: string;
 }) {
   const provider = props.providers.find((candidate) => candidate.instanceId === props.instanceId);
   const model = provider?.models.find((candidate) => candidate.slug === props.model);
@@ -110,12 +125,36 @@ 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. Settings
+  // carry each ACP instance's agent, which tells its glyph apart.
+  const badgeEntry = (candidate: ServerProvider) => {
+    const config = props.providerInstances?.[candidate.instanceId]?.config;
+    // A local ACP command has no registry agent, as on web.
+    const agentId =
+      typeof config === "object" && config && Reflect.get(config, "source") !== "local"
+        ? Reflect.get(config, "agentId")
+        : null;
+    return {
+      driverKind: candidate.driver,
+      ...(typeof agentId === "string" && agentId.trim()
+        ? { acpRegistryAgentId: agentId.trim() }
+        : {}),
+    };
+  };
+  const showBadge =
+    provider !== undefined &&
+    shouldShowInstanceBadge(
+      { ...badgeEntry(provider), accentColor },
+      props.providers.map(badgeEntry),
+    );
   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={() =>
         Dialog.alert(
@@ -124,11 +163,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>
 
@@ -7990,6 +7990,7 @@ export default function ChatView(props: ChatViewProps) {
                     <>
                       <div className="chat-content-lane">
                         <HandoffRow
+                          environmentId={environmentId}
                           endpoints={pendingHandoff}
                           providers={providerStatuses}
                           pending
 
@@ -42,7 +42,12 @@ import {
 } from "lucide-react";
 
 import { Tooltip, TooltipTrigger, TooltipPopup } from "../ui/tooltip";
-import { getProviderInstanceEntry } from "../../providerInstances";
+import {
+  applyProviderInstanceSettings,
+  deriveProviderInstanceEntries,
+  shouldShowInstanceBadge,
+  type ProviderInstanceEntry,
+} from "../../providerInstances";
 import { formatShortTimestamp } from "../../timestampFormat";
 import { getTriggerDisplayModelName } from "./providerIconUtils";
 import { ProviderInstanceIcon, providerTextColor } from "./ProviderInstanceIcon";
@@ -575,16 +580,21 @@ function EnvironmentHandoffRow({
 }) {
   const providers =
     useAtomValue(serverEnvironment.providersValueAtom(environmentId)) ?? EMPTY_SERVER_PROVIDERS;
-  return <HandoffRow {...props} providers={providers} />;
+  return <HandoffRow {...props} environmentId={environmentId} providers={providers} />;
 }
 
 export function HandoffRow(props: {
+  readonly environmentId: EnvironmentId;
   readonly endpoints: HandoffEndpoints;
   readonly providers: ReadonlyArray<ServerProvider>;
   readonly pending?: boolean;
   readonly failed?: boolean;
 }) {
   const { from: fromEndpoints, to } = props.endpoints;
+  const settings = useAtomValue(serverEnvironment.settingsValueAtom(props.environmentId));
+  // Settings carry each ACP instance's agent, which tells its glyph apart.
+  const derived = deriveProviderInstanceEntries(props.providers);
+  const entries = settings ? applyProviderInstanceSettings(derived, settings, null) : derived;
   return (
     <TimelineSystemDivider
       label={props.pending ? "Context handoff pending" : "Context handoff"}
@@ -599,7 +609,7 @@ export function HandoffRow(props: {
               className="inline-flex min-w-0 items-center"
             >
               <HandoffEndpoint
-                providers={props.providers}
+                entries={entries}
                 instanceId={endpoint.instanceId}
                 model={endpoint.model}
               />
@@ -613,23 +623,22 @@ export function HandoffRow(props: {
           {fromEndpoints.length > 0 ? (
             <ArrowRightIcon aria-hidden="true" className="size-3 shrink-0" />
           ) : null}
-          <HandoffEndpoint
-            providers={props.providers}
-            instanceId={to.instanceId}
-            model={to.model}
-          />
+          <HandoffEndpoint entries={entries} instanceId={to.instanceId} model={to.model} />
         </span>
       }
     />
   );
 }
 
 function HandoffEndpoint(props: {
-  readonly providers: ReadonlyArray<ServerProvider>;
+  readonly entries: ReadonlyArray<ProviderInstanceEntry>;
   readonly instanceId: ProviderInstanceId;
   readonly model?: string | undefined;
 }) {
-  const entry = getProviderInstanceEntry(props.providers, props.instanceId);
+  const entry = props.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, props.entries);
   const model = props.model?.trim();
   const providerModel =
     model === undefined || model.length === 0
@@ -650,14 +659,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-inset 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-inset 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("truncate font-medium", labelColor.className)}