From f6a0ead2acbaa55a3c3922895e13b06a9588e8c3 Mon Sep 17 00:00:00 2001
From: Oleksandr Zabolotnyi <zabolotny1111@gmail.com>
Date: Wed, 2 Sep 2026 16:08:54 +0200
Subject: [PATCH] fix(web,mobile): replace native title tooltips, fix stale
 interaction-mode test

Replaces the native `title` attribute with the Tooltip/TooltipTrigger/
TooltipPopup components in the workspace-scope-mismatch warning, the
quiet board-badge list, and the thread provider icon label, satisfying
the no-native-title-tooltip lint rule (4 CI lint errors).

Updates legacy-plan-mode.test.ts's fallback-mode assertions from
"default" to "build": DEFAULT_PROVIDER_INTERACTION_MODE was changed
from "default" to "build" without updating this test, so 3 of its 4
cases asserted the wrong literal despite their titles already saying
"build mode".

Co-Authored-By: Claude Sonnet 5 <noreply@anthropic.com>
---
 .../features/threads/legacy-plan-mode.test.ts |  6 +--
 .../src/components/chat/MessagesTimeline.tsx  | 18 ++++++---
 .../components/chat/ThreadProviderIcons.tsx   | 39 +++++++++++--------
 apps/web/src/workspaceScopeWarningUi.tsx      | 27 +++++++------
 4 files changed, 52 insertions(+), 38 deletions(-)

diff --git a/apps/mobile/src/features/threads/legacy-plan-mode.test.ts b/apps/mobile/src/features/threads/legacy-plan-mode.test.ts
index e556318855ff..5bcbb5d9947e 100644
--- a/apps/mobile/src/features/threads/legacy-plan-mode.test.ts
+++ b/apps/mobile/src/features/threads/legacy-plan-mode.test.ts
@@ -22,7 +22,7 @@ describe("resolvePendingTaskInteractionMode", () => {
         draftInteractionMode: "plan",
         queuedInteractionMode: "plan",
       }),
-    ).toBe("default");
+    ).toBe("build");
   });
 
   it("keeps a fresh draft in build mode while the preference is loading", () => {
@@ -33,7 +33,7 @@ describe("resolvePendingTaskInteractionMode", () => {
         draftInteractionMode: "plan",
         queuedInteractionMode: undefined,
       }),
-    ).toBe("default");
+    ).toBe("build");
   });
 
   it("honors the draft's mode when the plan preference is enabled", () => {
@@ -52,6 +52,6 @@ describe("resolvePendingTaskInteractionMode", () => {
         draftInteractionMode: undefined,
         queuedInteractionMode: "plan",
       }),
-    ).toBe("default");
+    ).toBe("build");
   });
 });
diff --git a/apps/web/src/components/chat/MessagesTimeline.tsx b/apps/web/src/components/chat/MessagesTimeline.tsx
index c8da4fb77074..325e29bee2e5 100644
--- a/apps/web/src/components/chat/MessagesTimeline.tsx
+++ b/apps/web/src/components/chat/MessagesTimeline.tsx
@@ -1037,12 +1037,18 @@ function BoardTurnBadges({ turnId }: { turnId: TurnId | null | undefined }) {
   const titles = items.map((item) => item.title).join("\n");
   return (
     <div className="mb-1.5 flex max-w-full">
-      <span
-        className="inline-flex max-w-full items-center truncate rounded bg-muted px-1.5 py-0.5 text-[10px] font-medium uppercase tracking-wide text-muted-foreground"
-        title={titles}
-      >
-        {formatQuietBoardLabel(items.length)}
-      </span>
+      <Tooltip>
+        <TooltipTrigger
+          render={
+            <span className="inline-flex max-w-full items-center truncate rounded bg-muted px-1.5 py-0.5 text-[10px] font-medium uppercase tracking-wide text-muted-foreground" />
+          }
+        >
+          {formatQuietBoardLabel(items.length)}
+        </TooltipTrigger>
+        <TooltipPopup side="top" className="whitespace-pre-wrap">
+          {titles}
+        </TooltipPopup>
+      </Tooltip>
     </div>
   );
 }
diff --git a/apps/web/src/components/chat/ThreadProviderIcons.tsx b/apps/web/src/components/chat/ThreadProviderIcons.tsx
index ef62d50a0943..4a6ee34dd8f7 100644
--- a/apps/web/src/components/chat/ThreadProviderIcons.tsx
+++ b/apps/web/src/components/chat/ThreadProviderIcons.tsx
@@ -8,6 +8,7 @@ import {
 
 import { ProviderInstanceIcon } from "./ProviderInstanceIcon";
 import { PROVIDER_ICON_BY_PROVIDER } from "./providerIconUtils";
+import { Tooltip, TooltipPopup, TooltipTrigger } from "~/components/ui/tooltip";
 import { cn } from "~/lib/utils";
 
 const INNER_KIND_TO_DRIVER: Record<JcodeInnerProviderIconKind, ProviderDriverKind> = {
@@ -83,22 +84,26 @@ export const ThreadProviderIcons = memo(function ThreadProviderIcons(props: {
       : props.displayName;
 
   return (
-    <span
-      className={cn("inline-flex shrink-0 items-center gap-0.5", props.className)}
-      title={title}
-    >
-      <ProviderInstanceIcon
-        driverKind={props.driverKind}
-        displayName={props.displayName}
-        {...(props.accentColor ? { accentColor: props.accentColor } : {})}
-        {...(props.showBadge !== undefined ? { showBadge: props.showBadge } : {})}
-        {...(props.badgeContent ? { badgeContent: props.badgeContent } : {})}
-        {...(props.iconClassName ? { iconClassName: props.iconClassName } : {})}
-        {...(props.badgeClassName ? { badgeClassName: props.badgeClassName } : {})}
-      />
-      {InnerIcon ? (
-        <InnerIcon className={cn("size-3.5 shrink-0", props.iconClassName)} aria-hidden />
-      ) : null}
-    </span>
+    <Tooltip>
+      <TooltipTrigger
+        render={
+          <span className={cn("inline-flex shrink-0 items-center gap-0.5", props.className)} />
+        }
+      >
+        <ProviderInstanceIcon
+          driverKind={props.driverKind}
+          displayName={props.displayName}
+          {...(props.accentColor ? { accentColor: props.accentColor } : {})}
+          {...(props.showBadge !== undefined ? { showBadge: props.showBadge } : {})}
+          {...(props.badgeContent ? { badgeContent: props.badgeContent } : {})}
+          {...(props.iconClassName ? { iconClassName: props.iconClassName } : {})}
+          {...(props.badgeClassName ? { badgeClassName: props.badgeClassName } : {})}
+        />
+        {InnerIcon ? (
+          <InnerIcon className={cn("size-3.5 shrink-0", props.iconClassName)} aria-hidden />
+        ) : null}
+      </TooltipTrigger>
+      <TooltipPopup side="top">{title}</TooltipPopup>
+    </Tooltip>
   );
 });
diff --git a/apps/web/src/workspaceScopeWarningUi.tsx b/apps/web/src/workspaceScopeWarningUi.tsx
index 9edec210d2d5..07de0769995e 100644
--- a/apps/web/src/workspaceScopeWarningUi.tsx
+++ b/apps/web/src/workspaceScopeWarningUi.tsx
@@ -2,6 +2,7 @@ import { isProviderDriverKind, type ProviderDriverKind } from "@t3tools/contract
 import { BotIcon } from "lucide-react";
 
 import { cn } from "~/lib/utils";
+import { Tooltip, TooltipPopup, TooltipTrigger } from "~/components/ui/tooltip";
 import { ProviderInstanceIcon } from "./components/chat/ProviderInstanceIcon";
 import { formatWorktreePathForDisplay } from "./worktreeCleanup";
 
@@ -86,19 +87,21 @@ export function WorkspaceScopeWarningRow(props: {
           <p className="truncate text-sm font-medium leading-6 text-warning">{props.label}</p>
           <dl className="mt-0.5 grid grid-cols-[3.25rem_minmax(0,1fr)] items-baseline gap-x-2 gap-y-0.5 text-xs leading-5">
             <dt className="text-end text-muted-foreground">Thread</dt>
-            <dd
-              className="min-w-0 truncate font-medium text-foreground"
-              title={props.mismatch.threadWorktree}
-            >
-              {threadLabel}
-            </dd>
+            <Tooltip>
+              <TooltipTrigger
+                render={<dd className="min-w-0 truncate font-medium text-foreground" />}
+              >
+                {threadLabel}
+              </TooltipTrigger>
+              <TooltipPopup side="top">{props.mismatch.threadWorktree}</TooltipPopup>
+            </Tooltip>
             <dt className="text-end text-muted-foreground">Agent</dt>
-            <dd
-              className="min-w-0 truncate font-medium text-warning"
-              title={props.mismatch.usedPath}
-            >
-              {usedLabel}
-            </dd>
+            <Tooltip>
+              <TooltipTrigger render={<dd className="min-w-0 truncate font-medium text-warning" />}>
+                {usedLabel}
+              </TooltipTrigger>
+              <TooltipPopup side="top">{props.mismatch.usedPath}</TooltipPopup>
+            </Tooltip>
           </dl>
         </div>
       </div>