From 5690062f9032f503505b6b8ef1474f92f48937e0 Mon Sep 17 00:00:00 2001
From: Alex Hancock <alexhancock@block.xyz>
Date: Wed, 22 Jul 2026 17:35:58 -0400
Subject: [PATCH 1/2] feat: adjust order of agent status and text box

---
 .../src/features/channels/ui/ChannelPane.tsx  | 65 +++++++++----------
 .../messages/ui/MessageThreadPanel.tsx        | 52 ++++++++-------
 2 files changed, 59 insertions(+), 58 deletions(-)

diff --git a/desktop/src/features/channels/ui/ChannelPane.tsx b/desktop/src/features/channels/ui/ChannelPane.tsx
index 121e211f47..c52edecb2b 100644
--- a/desktop/src/features/channels/ui/ChannelPane.tsx
+++ b/desktop/src/features/channels/ui/ChannelPane.tsx
@@ -322,7 +322,6 @@ export const ChannelPane = React.memo(function ChannelPane({
     isSending;
   const knownAgentPubkeys = React.useMemo(() => {
     const pubkeys = new Set<string>();
-
     for (const pubkey of agentPubkeys ?? []) {
       pubkeys.add(pubkey.toLowerCase());
     }
@@ -332,14 +331,12 @@ export const ChannelPane = React.memo(function ChannelPane({
     for (const agent of activityAgents) {
       pubkeys.add(agent.pubkey.toLowerCase());
     }
-
     return pubkeys;
   }, [activityAgents, agentPubkeys, agentSessionAgents]);
   const completeWelcomeComposerBanner = React.useCallback(() => {
     if (!activeChannelId || !isActiveWelcomeChannel) {
       return;
     }
-
     clearWelcomeComposerDismissTimer();
     completedWelcomeBannerChannelIdsRef.current.add(activeChannelId);
     setWelcomeComposerBannerState("complete");
@@ -748,11 +745,42 @@ export const ChannelPane = React.memo(function ChannelPane({
                     />
                   </div>
                 ) : null}
+                {hasComposerBotActivity || hasTypingActivity ? (
+                  <div
+                    className="min-h-8 overflow-visible bg-background px-5 pb-0 pt-1.5"
+                    data-testid="channel-composer-activity-row"
+                  >
+                    <div className="flex h-full w-full items-center gap-2 overflow-visible">
+                      {hasComposerBotActivity ? (
+                        <div className="flex min-w-0 flex-1 overflow-visible">
+                          <BotActivityComposerAction
+                            agents={activityAgents}
+                            channelId={activeChannel?.id ?? null}
+                            onOpenAgentSession={onOpenAgentSession}
+                            openAgentSessionPubkey={openAgentSessionPubkey}
+                            profiles={profiles}
+                            workingBotPubkeys={composerWorkingBotPubkeys}
+                            variant="inline"
+                          />
+                        </div>
+                      ) : null}
+                      {hasTypingActivity ? (
+                        <TypingIndicatorRow
+                          channel={activeChannel}
+                          className="min-w-0 flex-1 py-0 pl-[calc(0.75rem+1px)] pr-0 sm:pl-[calc(1rem+1px)]"
+                          currentPubkey={currentPubkey}
+                          profiles={profiles}
+                          typingPubkeys={typingPubkeys}
+                        />
+                      ) : null}
+                    </div>
+                  </div>
+                ) : null}
                 <MessageComposer
                   channelId={activeChannel?.id ?? null}
                   channelName={activeChannel?.name ?? "channel"}
                   channelType={activeChannel?.channelType ?? null}
-                  containerClassName="px-5"
+                  containerClassName="px-5 pb-5"
                   disabled={isComposerDisabled}
                   editTarget={mainEditTarget}
                   autoSubmitDraftKey={autoSendDraftKey}
@@ -787,35 +815,6 @@ export const ChannelPane = React.memo(function ChannelPane({
                   }
                   showTopBorder={false}
                 />
-                <div
-                  className="min-h-8 overflow-visible bg-background px-5 pb-1.5 pt-0"
-                  data-testid="channel-composer-activity-row"
-                >
-                  <div className="flex h-full w-full items-center gap-2 overflow-visible">
-                    {hasComposerBotActivity ? (
-                      <div className="flex min-w-0 flex-1 overflow-visible">
-                        <BotActivityComposerAction
-                          agents={activityAgents}
-                          channelId={activeChannel?.id ?? null}
-                          onOpenAgentSession={onOpenAgentSession}
-                          openAgentSessionPubkey={openAgentSessionPubkey}
-                          profiles={profiles}
-                          workingBotPubkeys={composerWorkingBotPubkeys}
-                          variant="inline"
-                        />
-                      </div>
-                    ) : null}
-                    {hasTypingActivity ? (
-                      <TypingIndicatorRow
-                        channel={activeChannel}
-                        className="min-w-0 flex-1 py-0 pl-[calc(0.75rem+1px)] pr-0 sm:pl-[calc(1rem+1px)]"
-                        currentPubkey={currentPubkey}
-                        profiles={profiles}
-                        typingPubkeys={typingPubkeys}
-                      />
-                    ) : null}
-                  </div>
-                </div>
               </div>
             </div>
           )}
diff --git a/desktop/src/features/messages/ui/MessageThreadPanel.tsx b/desktop/src/features/messages/ui/MessageThreadPanel.tsx
index c7624e43a5..42df131192 100644
--- a/desktop/src/features/messages/ui/MessageThreadPanel.tsx
+++ b/desktop/src/features/messages/ui/MessageThreadPanel.tsx
@@ -823,6 +823,32 @@ export function MessageThreadPanel({
             hasConstrainedColumn ? { maxWidth: columnMaxWidthPx } : undefined
           }
         >
+          {toolbarExtraActions || threadTypingPubkeys.length > 0 ? (
+            <div
+              className={cn(
+                "min-h-8 bg-background pb-0 pt-1.5",
+                THREAD_PANEL_COMPOSER_GUTTER_CLASS,
+              )}
+            >
+              <div className="mx-auto flex h-full w-full max-w-4xl items-center gap-2 overflow-visible">
+                {toolbarExtraActions ? (
+                  <div className="flex min-w-0 flex-1 overflow-visible">
+                    {toolbarExtraActions}
+                  </div>
+                ) : null}
+                {threadTypingPubkeys.length > 0 ? (
+                  <TypingIndicatorRow
+                    channel={channel}
+                    className="min-w-0 flex-1 py-0 pl-[calc(0.75rem+1px)] pr-0 sm:pl-[calc(1rem+1px)]"
+                    currentPubkey={currentPubkey}
+                    profiles={profiles}
+                    typingPubkeys={threadTypingPubkeys}
+                    variant="activity"
+                  />
+                ) : null}
+              </div>
+            </div>
+          ) : null}
           <MessageComposer
             audienceContext={{
               type: "thread",
@@ -832,7 +858,7 @@ export function MessageThreadPanel({
             channelId={channelId}
             channelName={channelName}
             channelType={channel?.channelType ?? null}
-            containerClassName={THREAD_PANEL_COMPOSER_GUTTER_CLASS}
+            containerClassName={cn(THREAD_PANEL_COMPOSER_GUTTER_CLASS, "pb-5")}
             disabled={disabled || isSending || !channelId}
             draftKey={`thread:${threadHead.id}`}
             autoSubmitDraftKey={autoSendDraftKey}
@@ -851,30 +877,6 @@ export function MessageThreadPanel({
             typingParentEventId={threadHead.id}
             typingRootEventId={threadHead.rootId}
           />
-          <div
-            className={cn(
-              "min-h-8 bg-background pb-1.5 pt-0",
-              THREAD_PANEL_COMPOSER_GUTTER_CLASS,
-            )}
-          >
-            <div className="mx-auto flex h-full w-full max-w-4xl items-center gap-2 overflow-visible">
-              {toolbarExtraActions ? (
-                <div className="flex min-w-0 flex-1 overflow-visible">
-                  {toolbarExtraActions}
-                </div>
-              ) : null}
-              {threadTypingPubkeys.length > 0 ? (
-                <TypingIndicatorRow
-                  channel={channel}
-                  className="min-w-0 flex-1 py-0 pl-[calc(0.75rem+1px)] pr-0 sm:pl-[calc(1rem+1px)]"
-                  currentPubkey={currentPubkey}
-                  profiles={profiles}
-                  typingPubkeys={threadTypingPubkeys}
-                  variant="activity"
-                />
-              ) : null}
-            </div>
-          </div>
         </div>
       </div>
     </>

From 86716b338ae784a1254371fd64fe25964f882b1d Mon Sep 17 00:00:00 2001
From: Alex Hancock <alexhancock@block.xyz>
Date: Thu, 23 Jul 2026 10:47:54 -0400
Subject: [PATCH 2/2] fix(desktop): realign composer overlay masks and E2E
 after status reorder

The composer status/activity row moved above the text box, so:

- The corner-mask CSS was pinned at bottom:2.5rem, calibrated for the
  old layout (composer pb-2 + 32px activity row below). With the row now
  above the composer and the composer padded to pb-5 (1.25rem), the masks
  no longer aligned to the composer's bottom edge, breaking the
  channel-composer-overflow overlay-mask tests. Repin to 1.25rem.

- The activity row is now conditionally rendered (only on bot/typing
  activity). The date-divider test navigates to a channel with no such
  activity, so its incidental activity-row style assertions failed with
  element-not-found. Drop those assertions; they are unrelated to the
  date-divider behavior under test.
---
 desktop/src/shared/styles/globals/composer.css | 2 +-
 desktop/tests/e2e/channels.spec.ts             | 8 --------
 2 files changed, 1 insertion(+), 9 deletions(-)

diff --git a/desktop/src/shared/styles/globals/composer.css b/desktop/src/shared/styles/globals/composer.css
index 912ed1c799..6ebe89226a 100644
--- a/desktop/src/shared/styles/globals/composer.css
+++ b/desktop/src/shared/styles/globals/composer.css
@@ -1,7 +1,7 @@
 .composer-overlay-corner-masks::before,
 .composer-overlay-corner-masks::after {
   position: absolute;
-  bottom: 2.5rem;
+  bottom: 1.25rem;
   z-index: 0;
   width: 1rem;
   height: 1rem;
diff --git a/desktop/tests/e2e/channels.spec.ts b/desktop/tests/e2e/channels.spec.ts
index 7da20334f3..6a20150b18 100644
--- a/desktop/tests/e2e/channels.spec.ts
+++ b/desktop/tests/e2e/channels.spec.ts
@@ -1740,14 +1740,6 @@ test("channel date divider keeps the date sticky while the separator rule scroll
     "backdrop-filter",
     "none",
   );
-  const composerActivityRow = composerOverlay.getByTestId(
-    "channel-composer-activity-row",
-  );
-  await expect(composerActivityRow).toHaveCSS("backdrop-filter", "none");
-  await expect(composerActivityRow).not.toHaveCSS(
-    "background-color",
-    "rgba(0, 0, 0, 0)",
-  );
   await expect
     .poll(async () => {
       const composerOverlayZIndex = await page