From b4d4b0712c15db8d06c7f383dfe2a344d4208e07 Mon Sep 17 00:00:00 2001
From: Miguel Palhas <mpalhas@gmail.com>
Date: Mon, 7 Sep 2026 10:23:15 +0100
Subject: [PATCH] fix(maestro): keep the composer's one-row layout
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Reverts the stacked control strip from f78aa13. The floating card is still
gone — flush band, one hairline against the transcript that doubles as the
focus indicator — but the composer keeps its own `--surface` fill so it
still reads as distinct from the pane, and the draft, gear and Send stay on
one bottom-aligned row.

At phone width that row cannot hold a draft plus three controls, so it
wraps: the draft takes a full line and the controls drop below it.

Co-Authored-By: Claude Opus 5 (1M context) <noreply@anthropic.com>
---
 web/src/structured.ts | 20 +++++------
 web/src/styles.css    | 82 +++++++++++++++++++------------------------
 2 files changed, 46 insertions(+), 56 deletions(-)

diff --git a/web/src/structured.ts b/web/src/structured.ts
index b1cd30d..3064c21 100644
--- a/web/src/structured.ts
+++ b/web/src/structured.ts
@@ -97,19 +97,17 @@ export function createStructuredConnection(
               autocomplete="off" aria-autocomplete="list" aria-expanded="false"
               aria-controls="structured-command-menu-${sessionId}"></textarea>
           </div>
-          <div class="structured-actions">
-            <div class="structured-config" hidden>
-              <button type="button" class="structured-config-trigger" aria-haspopup="true"
-                aria-expanded="false" aria-label="Session settings" title="Session settings">
-                <svg viewBox="0 0 24 24" aria-hidden="true"><path d="M4 7h10M18 7h2M4 17h2M10 17h10M14 4v6M6 14v6"/></svg>
-              </button>
-              <div class="structured-config-menu" role="group" aria-label="Session settings" hidden></div>
-            </div>
-            <button type="button" class="btn structured-cancel" hidden>Cancel turn</button>
-            <button type="submit" class="btn btn-primary structured-send"><span>Send</span>
-              <svg viewBox="0 0 20 20" aria-hidden="true"><path d="m7 5 5 5-5 5M12 10H3"/></svg>
+          <div class="structured-config" hidden>
+            <button type="button" class="structured-config-trigger" aria-haspopup="true"
+              aria-expanded="false" aria-label="Session settings" title="Session settings">
+              <svg viewBox="0 0 24 24" aria-hidden="true"><path d="M4 7h10M18 7h2M4 17h2M10 17h10M14 4v6M6 14v6"/></svg>
             </button>
+            <div class="structured-config-menu" role="group" aria-label="Session settings" hidden></div>
           </div>
+          <button type="submit" class="btn btn-primary structured-send"><span>Send</span>
+            <svg viewBox="0 0 20 20" aria-hidden="true"><path d="m7 5 5 5-5 5M12 10H3"/></svg>
+          </button>
+          <button type="button" class="btn structured-cancel" hidden>Cancel turn</button>
         </form>
       </div>
     </div>
diff --git a/web/src/styles.css b/web/src/styles.css
index dcf89db..f5310ce 100644
--- a/web/src/styles.css
+++ b/web/src/styles.css
@@ -2176,14 +2176,12 @@ input.leaf-rename:focus {
 
 .structured-config {
   position: relative;
-  flex: 0 0 32px;
-  width: 32px;
-  height: 32px;
+  flex: 0 0 40px;
 }
 
 .structured-config-trigger {
-  width: 100%;
-  height: 100%;
+  width: 40px;
+  height: 40px;
   display: inline-flex;
   justify-content: center;
   align-items: center;
@@ -2221,7 +2219,7 @@ input.leaf-rename:focus {
   position: absolute;
   z-index: 20;
   bottom: calc(100% + var(--sp-2));
-  left: 0;
+  right: 0;
   width: min(320px, 86vw);
   padding: var(--sp-2);
   border: 1px solid var(--border-strong);
@@ -3065,18 +3063,18 @@ input.leaf-rename:focus {
 
 /* The composer is a sibling of the scrolling transcript, not part of it: it
    stays reachable at the pane edge without changing transcript scroll math.
-   It is a flush band at the foot of the pane rather than a floating card —
-   one hairline separates it from the transcript, and that hairline is also
-   the focus indicator. Input and controls stack, so the send button keeps a
-   fixed place at the composer's foot however tall the draft grows. */
+   It is a flush band at the foot of the pane rather than a floating card: its
+   own `--surface` fill is what separates it from the transcript, over a
+   hairline that doubles as the focus indicator. Inner metrics line the draft
+   up with the transcript's own 12px gutter. */
 .structured-composer {
   flex: 0 0 auto;
-  display: flex;
-  flex-direction: column;
-  gap: var(--sp-1);
-  padding: var(--sp-2) var(--sp-3) max(var(--sp-2), env(safe-area-inset-bottom));
+  padding: var(--sp-1) var(--sp-1) max(var(--sp-1), env(safe-area-inset-bottom));
   border-top: 1px solid var(--border);
-  background: var(--bg);
+  background: var(--surface);
+  display: flex;
+  align-items: flex-end;
+  gap: var(--sp-1);
   transition: border-color var(--dur-fast) var(--ease-out);
 }
 
@@ -3086,6 +3084,7 @@ input.leaf-rename:focus {
 
 .structured-input-wrap {
   position: relative;
+  flex: 1 1 auto;
   min-width: 0;
 }
 
@@ -3094,11 +3093,12 @@ input.leaf-rename:focus {
   width: 100%;
   min-width: 0;
   max-height: 160px;
-  min-height: 20px;
+  min-height: 40px;
   resize: none;
   overflow-y: hidden;
-  padding: 0;
+  padding: 10px var(--sp-2);
   border: 0;
+  border-radius: var(--r-2);
   background: transparent;
   color: var(--ink);
   font-size: var(--fs-13);
@@ -3109,25 +3109,12 @@ input.leaf-rename:focus {
   outline: none;
 }
 
-.structured-actions {
-  display: flex;
-  align-items: center;
-  justify-content: flex-end;
-  gap: var(--sp-1);
-  min-height: 32px;
-}
-
-.structured-actions .structured-config {
-  margin-right: auto;
-}
-
 .structured-composer .structured-send,
 .structured-composer .structured-cancel {
-  height: 32px;
-  min-height: 32px;
+  height: 40px;
+  min-height: 40px;
   border-radius: var(--r-2);
   font-family: var(--font-sans);
-  font-size: var(--fs-12);
 }
 
 .structured-composer .structured-send {
@@ -3148,8 +3135,8 @@ input.leaf-rename:focus {
 }
 
 .structured-composer .structured-send svg {
-  width: 15px;
-  height: 15px;
+  width: 16px;
+  height: 16px;
   fill: none;
   stroke: currentColor;
   stroke-width: 1.7;
@@ -3179,21 +3166,26 @@ input.leaf-rename:focus {
 }
 
 @media (max-width: 520px) {
-  .structured-composer .structured-send,
-  .structured-composer .structured-cancel {
-    height: var(--tap);
-    min-height: var(--tap);
-    font-size: var(--fs-13);
+  /* One row cannot hold a draft plus three controls at phone width — the
+     draft gets a line of its own and the controls drop below it. */
+  .structured-composer {
+    flex-wrap: wrap;
+    justify-content: flex-end;
+    padding-left: var(--sp-2);
+    padding-right: var(--sp-2);
   }
 
-  .structured-actions {
-    min-height: var(--tap);
+  .structured-input-wrap {
+    flex: 1 1 100%;
   }
 
-  .structured-config,
-  .structured-config-trigger {
-    width: var(--tap);
-    height: var(--tap);
+  .structured-composer .structured-config {
+    margin-right: auto;
+  }
+
+  .structured-config-menu {
+    left: 0;
+    right: auto;
   }
 }