From ac574d6c64eebbc38d5d58e96ba2534c59e742a6 Mon Sep 17 00:00:00 2001
From: DodgyBadger <4453217+DodgyBadger@users.noreply.github.com>
Date: Sun, 20 Sep 2026 17:31:10 +0000
Subject: [PATCH] fix(mobile): compact the compose key

---
 src/web/public/keyboard-accessory.js | 14 ++++++++++++--
 test/mobile-prompt-composer.test.ts  | 15 +++++++++++++++
 2 files changed, 27 insertions(+), 2 deletions(-)

diff --git a/src/web/public/keyboard-accessory.js b/src/web/public/keyboard-accessory.js
index bf0d3cd5..f59ad81c 100644
--- a/src/web/public/keyboard-accessory.js
+++ b/src/web/public/keyboard-accessory.js
@@ -674,7 +674,12 @@ const KeyboardAccessoryBar = {
       <button class="accessory-btn" data-action="tab" title="Tab">Tab</button>
       <button class="accessory-btn accessory-btn-codex" data-action="shift-left" title="Shift+Left (Codex: edit queued message)" aria-label="Shift+Left (Codex: edit queued message)">⇧←</button>
       <button class="accessory-btn accessory-btn-codex" data-action="shift-right" title="Shift+Right (Codex: prompt stack back)" aria-label="Shift+Right (Codex: prompt stack back)">⇧→</button>
-      <button class="accessory-btn accessory-btn-compose" data-action="compose" title="Compose prompt">Compose</button>
+      <button class="accessory-btn accessory-btn-compose" data-action="compose" title="Compose prompt" aria-label="Compose prompt">
+        <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" aria-hidden="true">
+          <path d="M12 20h9"/>
+          <path d="M16.5 3.5a2.12 2.12 0 0 1 3 3L7 19l-4 1 1-4Z"/>
+        </svg>
+      </button>
       <button class="accessory-btn accessory-btn-rmm" data-action="readmymind" title="Read My Mind: predict your next prompt">🧠</button>
       <button class="accessory-btn" data-action="esc" title="Escape">Esc</button>
       <button class="accessory-btn accessory-btn-dismiss" data-action="dismiss" title="Dismiss keyboard">
@@ -744,7 +749,12 @@ const KeyboardAccessoryBar = {
           <path d="M9 5l7 7-7 7"/>
         </svg>
       </button>
-      <button class="accessory-btn accessory-btn-compose" data-action="compose" title="Compose prompt">Compose</button>
+      <button class="accessory-btn accessory-btn-compose" data-action="compose" title="Compose prompt" aria-label="Compose prompt">
+        <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" aria-hidden="true">
+          <path d="M12 20h9"/>
+          <path d="M16.5 3.5a2.12 2.12 0 0 1 3 3L7 19l-4 1 1-4Z"/>
+        </svg>
+      </button>
       <button class="accessory-btn" data-action="pick-path" title="Insert a file or folder path">&#x1F4C1; Path</button>
       <button class="accessory-btn" data-action="clear-input" title="Clear the current unsent input">&#x232B; All</button>
       <button class="accessory-btn accessory-btn-rmm" data-action="readmymind" title="Read My Mind: predict your next prompt">🧠</button>
diff --git a/test/mobile-prompt-composer.test.ts b/test/mobile-prompt-composer.test.ts
index 43c1d777..c2ea77e1 100644
--- a/test/mobile-prompt-composer.test.ts
+++ b/test/mobile-prompt-composer.test.ts
@@ -115,6 +115,21 @@ describe('mobile prompt composer', () => {
     expect(template('_shellButtons')).not.toContain('data-action="compose"');
   });
 
+  it('uses a compact accessible icon for Compose in both agent layouts', () => {
+    const { bar, document } = loadComposer();
+
+    for (const markup of [bar._simpleButtons, bar._extendedButtons]) {
+      const wrapper = document.createElement('div');
+      wrapper.innerHTML = markup;
+      const button = wrapper.querySelector('[data-action="compose"]') as HTMLButtonElement;
+
+      expect(button.getAttribute('aria-label')).toBe('Compose prompt');
+      expect(button.getAttribute('title')).toBe('Compose prompt');
+      expect(button.querySelector('svg[aria-hidden="true"]')).not.toBeNull();
+      expect(button.textContent?.trim()).toBe('');
+    }
+  });
+
   it('uses a native autocorrect-aware textarea and stores replacement text exactly once', () => {
     const { app, bar, document } = loadComposer();
     bar.composePrompt();