diff --git a/apps/mobile/src/features/threads/thread-handoff-row.tsx b/apps/mobile/src/features/threads/thread-handoff-row.tsx
index 4b05662595f8f0fccc917781de352660f72aced0..cc36efe1dad07183ff99c612892d70300c27c340 100644
--- a/apps/mobile/src/features/threads/thread-handoff-row.tsx
+++ b/apps/mobile/src/features/threads/thread-handoff-row.tsx
@@ -9,7 +9,7 @@ import type {
   ServerProvider,
 } from "@t3tools/contracts";
 import { Atom } from "effect/reactivity";
-import { Fragment, useMemo } from "react";
+import { useMemo } from "react";
 import { Alert, Pressable, View, type ColorValue } from "react-native";
 import { AppText as Text } from "../../components/AppText";
 import { SymbolView } from "../../components/AppSymbol";
@@ -76,14 +76,17 @@ export function ThreadHandoffDivider(props: {
     >
       <View className="flex-row flex-wrap items-center justify-center gap-1.5">
         {endpoints.from.map((endpoint, index) => (
-          <Fragment key={`${endpoint.instanceId}:${endpoint.model ?? ""}`}>
-            {index > 0 ? (
+          <View
+            key={`${endpoint.instanceId}:${endpoint.model ?? ""}`}
+            className="max-w-full flex-row items-center"
+          >
+            <HandoffEndpoint {...endpoint} providers={config?.providers ?? []} />
+            {index < endpoints.from.length - 1 ? (
               <Text accessible={false} className="text-xs text-foreground-muted">
                 ,
               </Text>
             ) : null}
-            <HandoffEndpoint {...endpoint} providers={config?.providers ?? []} />
-          </Fragment>
+          </View>
         ))}
         {endpoints.from.length > 0 ? (
           <SymbolView name="arrow.right" size={12} tintColor={props.iconColor} />
diff --git a/apps/web/src/components/ChatView.tsx b/apps/web/src/components/ChatView.tsx
index acd68260b9ad5bcc41c382f38c22e29a60bafdc0..ae891d75193ea69b3ecc58b86c8c66512564d430 100644
--- a/apps/web/src/components/ChatView.tsx
+++ b/apps/web/src/components/ChatView.tsx
@@ -7472,10 +7472,13 @@ export default function ChatView(props: ChatViewProps) {
           : `${childThreadInputs.length} subagents need input`,
       description: childThreadInputs.map((child, index) => (
         <Fragment key={child.id}>
-          {index > 0 ? ", " : null}
-          <InlineButton tone="muted" onClick={() => onOpenRelatedThread(child.id)}>
-            {child.title}
-          </InlineButton>
+          {index > 0 ? " " : null}
+          <span className="whitespace-nowrap">
+            <InlineButton tone="muted" onClick={() => onOpenRelatedThread(child.id)}>
+              {child.title}
+            </InlineButton>
+            {index < childThreadInputs.length - 1 ? "," : null}
+          </span>
         </Fragment>
       )),
       actions: (
@@ -7643,19 +7646,26 @@ export default function ChatView(props: ChatViewProps) {
           ? undefined
           : presentation.items.map((item, index) => {
               const childThreadId = item.childThreadId;
+              const separator = index < presentation.items.length - 1 ? "," : null;
               return (
                 <Fragment key={item.taskId}>
-                  {index > 0 ? ", " : null}
+                  {index > 0 ? " " : null}
                   {childThreadId === undefined ? (
-                    item.label
-                  ) : (
-                    <InlineButton
-                      tone="muted"
-                      aria-label={`Open subagent ${item.label}`}
-                      onClick={() => onOpenRelatedThread(childThreadId)}
-                    >
+                    <>
                       {item.label}
-                    </InlineButton>
+                      {separator}
+                    </>
+                  ) : (
+                    <span className="whitespace-nowrap">
+                      <InlineButton
+                        tone="muted"
+                        aria-label={`Open subagent ${item.label}`}
+                        onClick={() => onOpenRelatedThread(childThreadId)}
+                      >
+                        {item.label}
+                      </InlineButton>
+                      {separator}
+                    </span>
                   )}
                 </Fragment>
               );
diff --git a/apps/web/src/components/chat/V2LifecycleRow.tsx b/apps/web/src/components/chat/V2LifecycleRow.tsx
index 40421a34e3b77fcbf40c0fafe821e4f032502e72..5206d33acde022fa8c42990743b613dd440b4ed0 100644
--- a/apps/web/src/components/chat/V2LifecycleRow.tsx
+++ b/apps/web/src/components/chat/V2LifecycleRow.tsx
@@ -15,7 +15,6 @@ import {
   type HandoffEndpoints,
   type HandoffTimelineRun,
 } from "@t3tools/client-runtime/handoff";
-import { Fragment } from "react";
 import { formatSubagentDisplayTitle } from "@t3tools/client-runtime/state/subagent-display";
 import {
   ProviderDriverKind,
@@ -562,18 +561,21 @@ export function HandoffRow(props: {
       detail={
         <span className="inline-flex min-w-0 flex-wrap items-center justify-center gap-1.5">
           {fromEndpoints.map((endpoint, index) => (
-            <Fragment key={`${endpoint.instanceId}:${endpoint.model ?? ""}`}>
-              {index > 0 ? (
-                <span aria-hidden="true" className="-ml-1">
-                  ,
-                </span>
-              ) : null}
+            <span
+              key={`${endpoint.instanceId}:${endpoint.model ?? ""}`}
+              className="inline-flex min-w-0 items-center"
+            >
               <HandoffEndpoint
                 providers={props.providers}
                 instanceId={endpoint.instanceId}
                 model={endpoint.model}
               />
-            </Fragment>
+              {index < fromEndpoints.length - 1 ? (
+                <span aria-hidden="true" className="ml-0.5">
+                  ,
+                </span>
+              ) : null}
+            </span>
           ))}
           {fromEndpoints.length > 0 ? (
             <ArrowRightIcon aria-hidden="true" className="size-3 shrink-0" />