From 74951807c4f3052ce39869cee620c4b4aa57385c Mon Sep 17 00:00:00 2001
From: Andrei Shypta <shypta2k@gmail.com>
Date: Fri, 30 Oct 2026 00:39:08 +0100
Subject: [PATCH] feat(web): Build/Plan toggle moves beside the attach button

Build shows only its icon; Plan keeps its label so the non-default mode stays visible.
The collapsed mobile row keeps the toggle in its controls, since it has no attach slot.
---
 apps/web/src/components/chat/ChatComposer.tsx | 13 ++++-
 .../components/chat/ComposerControlsBar.tsx   | 11 +++-
 .../chat/ComposerFooterControls.tsx           | 48 ++--------------
 .../chat/ComposerInteractionModeToggle.tsx    | 56 +++++++++++++++++++
 4 files changed, 82 insertions(+), 46 deletions(-)
 create mode 100644 apps/web/src/components/chat/ComposerInteractionModeToggle.tsx

diff --git a/apps/web/src/components/chat/ChatComposer.tsx b/apps/web/src/components/chat/ChatComposer.tsx
index d7878cc29a165..66b575360f5e5 100644
--- a/apps/web/src/components/chat/ChatComposer.tsx
+++ b/apps/web/src/components/chat/ChatComposer.tsx
@@ -276,6 +276,7 @@ import {
   usePreparingComposerImages,
 } from "./preparingComposerImages";
 import { ComposerControlsBar } from "./ComposerControlsBar";
+import { ComposerInteractionModeToggle } from "./ComposerInteractionModeToggle";
 import { composerCommandKeyHandler } from "./composerCommandKey";
 
 function consumePasteAsTextShortcut(deadline: { current: number }): boolean {
@@ -3429,7 +3430,17 @@ export const ChatComposer = memo(function ChatComposer(props: ChatComposerProps)
                   showMobilePendingAnswerActions && "hidden sm:flex",
                 )}
               >
-                {composerAttachButton ? <div className="me-2">{composerAttachButton}</div> : null}
+                {composerAttachButton || planModeUiEnabled ? (
+                  <div className="me-2 flex shrink-0 items-center gap-0.5">
+                    {composerAttachButton}
+                    {planModeUiEnabled ? (
+                      <ComposerInteractionModeToggle
+                        interactionMode={interactionMode}
+                        onToggle={toggleInteractionMode}
+                      />
+                    ) : null}
+                  </div>
+                ) : null}
                 <div
                   data-chat-composer-actions="right"
                   data-chat-composer-transition-actions="true"
diff --git a/apps/web/src/components/chat/ComposerControlsBar.tsx b/apps/web/src/components/chat/ComposerControlsBar.tsx
index 4dd547393ff74..794fc251f7e3b 100644
--- a/apps/web/src/components/chat/ComposerControlsBar.tsx
+++ b/apps/web/src/components/chat/ComposerControlsBar.tsx
@@ -150,6 +150,9 @@ export function ComposerControlsBar(props: {
     onPromptEdit,
     planModeEnabled,
   });
+  // The expanded footer shows the Plan toggle beside the attach button; only the collapsed row,
+  // which has no such slot, keeps it here.
+  const barHoldsInteractionModeToggle = planModeUiEnabled && composerControlsCollapsed;
   const accessMatchesDefault = compatibleRuntimeMode === defaultRuntimeMode;
   const permissionsChipHidden = accessMatchesDefault || props.permissionsShownInStrip;
   const providerTraitsPickerInput = {
@@ -201,7 +204,7 @@ export function ComposerControlsBar(props: {
   } = resolveComposerControlsOwnership({
     matchesDefault: permissionsChipHidden,
     hasTraits: providerTraitsPicker !== null,
-    planModeUiEnabled,
+    planModeUiEnabled: barHoldsInteractionModeToggle,
     collapsed: composerControlsCollapsed,
     measuredHiddenBlockCount,
   });
@@ -227,7 +230,7 @@ export function ComposerControlsBar(props: {
             id: "mode",
             content: (
               <ComposerFooterModeControls
-                showInteractionModeToggle={planModeUiEnabled}
+                showInteractionModeToggle={barHoldsInteractionModeToggle}
                 interactionMode={interactionMode}
                 runtimeMode={compatibleRuntimeMode}
                 runtimeModeOptions={compatibleRuntimeModeOptions}
@@ -347,7 +350,9 @@ export function ComposerControlsBar(props: {
             runtimeModeOptions={compatibleRuntimeModeOptions}
             size={composerControlsCollapsed ? "xs" : "sm"}
             hidden={composerControlsHidden || hiddenRestingBlockIds.length === 0}
-            showInteractionModeToggle={planModeUiEnabled && hiddenRestingBlockIds.includes("mode")}
+            showInteractionModeToggle={
+              barHoldsInteractionModeToggle && hiddenRestingBlockIds.includes("mode")
+            }
             traitsMenuContent={
               hiddenRestingBlockIds.includes("traits") ? providerTraitsMenuContent : undefined
             }
diff --git a/apps/web/src/components/chat/ComposerFooterControls.tsx b/apps/web/src/components/chat/ComposerFooterControls.tsx
index 46de66194dd0d..8779bd8fc9b8e 100644
--- a/apps/web/src/components/chat/ComposerFooterControls.tsx
+++ b/apps/web/src/components/chat/ComposerFooterControls.tsx
@@ -5,7 +5,6 @@ import type {
   RuntimeMode,
 } from "@t3tools/contracts";
 import { createModelSelection } from "@t3tools/shared/model";
-import { BotIcon, PencilRulerIcon } from "lucide-react";
 import { type ComponentProps, memo, useId, useRef, useState } from "react";
 
 import type { ContextWindowSnapshot } from "../../lib/contextWindow";
@@ -13,6 +12,7 @@ import { Menu as MenuPrimitive } from "@base-ui/react/menu";
 import { Menu, MenuPopup, MenuTrigger } from "../ui/menu";
 import { Tooltip, TooltipPopup, TooltipTrigger } from "../ui/tooltip";
 import { ComposerControl, ComposerControlIcon } from "./ComposerControl";
+import { ComposerInteractionModeToggle } from "./ComposerInteractionModeToggle";
 import { focusRequestedPermission, useComposerMenuProps } from "./composerEventScope";
 import { ComposerPrimaryActions } from "./ComposerPrimaryActions";
 import { ContextWindowMeter, ContextWindowMeterPlaceholder } from "./ContextWindowMeter";
@@ -49,48 +49,12 @@ export const ComposerFooterModeControls = memo(function ComposerFooterModeContro
     props.runtimeModeOptions.find((option) => option.mode === props.runtimeMode) ??
     supervisedRuntimeModeOption;
   const RuntimeModeIcon = runtimeModeOption.icon;
-  const interactionModeTooltip =
-    props.interactionMode === "plan"
-      ? "Plan mode. Click to return to normal build mode"
-      : "Default mode. Click to enter plan mode";
-
   const interactionModeToggle = props.showInteractionModeToggle ? (
-    <Tooltip>
-      <TooltipTrigger
-        render={
-          <ComposerControl
-            size={size}
-            className="shrink-0 whitespace-nowrap"
-            aria-pressed={props.interactionMode === "plan"}
-            type="button"
-            onClick={props.onToggleInteractionMode}
-            aria-label={interactionModeTooltip}
-          />
-        }
-      >
-        {props.interactionMode === "plan" ? (
-          <ComposerControlIcon
-            icon={PencilRulerIcon}
-            size={size}
-            className="text-current opacity-100"
-          />
-        ) : (
-          <ComposerControlIcon
-            icon={BotIcon}
-            size={size}
-            opticalSize={size === "xs" ? "default" : "large"}
-          />
-        )}
-        {/* The compacted row (xs) keeps this icon-only, like the other controls there. */}
-        <span
-          data-composer-control-label
-          className={size === "xs" ? "sr-only" : "sr-only sm:not-sr-only"}
-        >
-          {props.interactionMode === "plan" ? "Plan" : "Build"}
-        </span>
-      </TooltipTrigger>
-      <TooltipPopup side="top">{interactionModeTooltip}</TooltipPopup>
-    </Tooltip>
+    <ComposerInteractionModeToggle
+      interactionMode={props.interactionMode}
+      size={size}
+      onToggle={props.onToggleInteractionMode}
+    />
   ) : null;
 
   // The chip opens the same Permissions toggle used in the effort menu.
diff --git a/apps/web/src/components/chat/ComposerInteractionModeToggle.tsx b/apps/web/src/components/chat/ComposerInteractionModeToggle.tsx
new file mode 100644
index 0000000000000..24a4517a77d70
--- /dev/null
+++ b/apps/web/src/components/chat/ComposerInteractionModeToggle.tsx
@@ -0,0 +1,56 @@
+import type { ProviderInteractionMode } from "@t3tools/contracts";
+import { BotIcon, PencilRulerIcon } from "lucide-react";
+import { memo } from "react";
+
+import { Tooltip, TooltipPopup, TooltipTrigger } from "../ui/tooltip";
+import { ComposerControl, ComposerControlIcon, type ComposerControlSize } from "./ComposerControl";
+
+/** Build shows only its icon; Plan also names itself, so the non-default mode is never missed. */
+export const ComposerInteractionModeToggle = memo(function ComposerInteractionModeToggle(props: {
+  interactionMode: ProviderInteractionMode;
+  size?: ComposerControlSize;
+  onToggle: () => void;
+}) {
+  const size = props.size ?? "sm";
+  const isPlan = props.interactionMode === "plan";
+  const tooltip = isPlan
+    ? "Plan mode. Click to return to normal build mode"
+    : "Build mode. Click to enter plan mode";
+  return (
+    <Tooltip>
+      <TooltipTrigger
+        render={
+          <ComposerControl
+            size={size}
+            className="shrink-0 whitespace-nowrap"
+            aria-pressed={isPlan}
+            type="button"
+            onClick={props.onToggle}
+            aria-label={tooltip}
+          />
+        }
+      >
+        {isPlan ? (
+          <ComposerControlIcon
+            icon={PencilRulerIcon}
+            size={size}
+            className="text-current opacity-100"
+          />
+        ) : (
+          <ComposerControlIcon
+            icon={BotIcon}
+            size={size}
+            opticalSize={size === "xs" ? "default" : "large"}
+          />
+        )}
+        {/* The compacted row (xs) keeps this icon-only, like the other controls there. */}
+        {isPlan ? (
+          <span data-composer-control-label className={size === "xs" ? "sr-only" : undefined}>
+            Plan
+          </span>
+        ) : null}
+      </TooltipTrigger>
+      <TooltipPopup side="top">{tooltip}</TooltipPopup>
+    </Tooltip>
+  );
+});