From 770439730ab8bc18a2715243b38f5bd9426a2cc0 Mon Sep 17 00:00:00 2001
From: Junmo Kim <me@junmo.kim>
Date: Sat, 1 Aug 2026 02:17:34 +0900
Subject: [PATCH] fix(web): keep abort next to Send by default (#988)
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

* refactor(web): pin abort button to end of composer left cluster

Abort's position shifted with conditional siblings (terminal/switch/
schedule), making the destructive action's location unpredictable.
Move it to the last child of the left button group so it's always
immediately left of Send — pure JSX reorder, no markup/props/handler
changes.

* fix(web): keep abort last in default toolbar

Keep the product default predictable without changing saved custom order or the registry used to append missing items.
---
 web/src/hooks/useComposerToolbarLayout.test.ts | 17 +++++++++++++++++
 web/src/hooks/useComposerToolbarLayout.ts      |  5 ++++-
 2 files changed, 21 insertions(+), 1 deletion(-)

diff --git a/web/src/hooks/useComposerToolbarLayout.test.ts b/web/src/hooks/useComposerToolbarLayout.test.ts
index e01d8b05..fa1eedf6 100644
--- a/web/src/hooks/useComposerToolbarLayout.test.ts
+++ b/web/src/hooks/useComposerToolbarLayout.test.ts
@@ -5,6 +5,23 @@ import {
     normalizeComposerToolbarLayout,
 } from './useComposerToolbarLayout'
 
+describe('DEFAULT_COMPOSER_TOOLBAR_LAYOUT', () => {
+    it('keeps abort last in the default order', () => {
+        expect(DEFAULT_COMPOSER_TOOLBAR_LAYOUT.left).toEqual([
+            'attachment',
+            'settings',
+            'piModel',
+            'piThinking',
+            'terminal',
+            'switch',
+            'voiceMic',
+            'scratchlist',
+            'schedule',
+            'abort',
+        ])
+    })
+})
+
 describe('normalizeComposerToolbarLayout', () => {
     beforeEach(() => localStorage.clear())
 
diff --git a/web/src/hooks/useComposerToolbarLayout.ts b/web/src/hooks/useComposerToolbarLayout.ts
index c732aa70..ac7ea082 100644
--- a/web/src/hooks/useComposerToolbarLayout.ts
+++ b/web/src/hooks/useComposerToolbarLayout.ts
@@ -25,7 +25,10 @@ export type ComposerToolbarLayout = {
 
 export const DEFAULT_COMPOSER_TOOLBAR_LAYOUT: ComposerToolbarLayout = {
     mode: 'left',
-    left: [...COMPOSER_TOOLBAR_ITEM_IDS],
+    left: [
+        ...COMPOSER_TOOLBAR_ITEM_IDS.filter((item) => item !== 'abort'),
+        'abort',
+    ],
     right: [],
 }