Deploy 89f5564

The composer chip was stealing the whole input

Source: https://github.com/WINTER4000/turingDNA/commit/89f55640721fd670b6f18460c232eaf6c79b590c

dee/static/app.css

@@ -7936,11 +7936,11 @@ body[data-ui="bench"] #navTuring { display: none; }
     display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
     padding: 9px 14px; border-bottom: 1px solid var(--line);
     background: var(--bg-raised); flex: 0 0 auto;
-    /* Wrap, don't clip. The tools row is `flex: 0 0 auto` — it cannot shrink,
-       by design, because a button narrower than its label is the bug this
-       header already had once. So when the pane gets too narrow for one row,
-       the honest outcome is a second row, not a control sliced in half by
-       the overflow below. */
+    /* Wrap, don't clip. The tools row wraps internally and the hint beside
+       it yields first (see .pe-pane-hint), so a narrow pane costs a second
+       row of buttons rather than a control sliced in half by the overflow
+       below. Buttons themselves stay `flex: 0 0 auto` — one narrower than
+       its own label is the bug this header already had once. */
     /* Nothing escapes the header. `align-items: baseline` also mis-aligned
        the 11px hint against 24px buttons — the text sat low enough to look
        like it belonged to the row below. */
@@ -8339,13 +8339,20 @@ body[data-pe-full="1"] .pe-fullbar { display: flex; }
    to send, not as a notification about something that already happened. */
 .cp-selchip {
     display: flex; align-items: center; gap: 8px;
-    margin: 0 0 8px; padding: 5px 6px 5px 11px;
+    /* Spans both composer columns, so it sits ABOVE the input rather than
+       beside it. `1 / -1` (not `span 2`) keeps it correct if a column is ever
+       added. */
+    grid-column: 1 / -1;
+    margin: 0 0 6px; padding: 5px 6px 5px 11px;
     border: 1px solid var(--line-strong); border-radius: 75px;
     background: var(--bg-raised);
     font-family: var(--font-mono); font-size: 11px; color: var(--ink-soft);
     max-width: 100%;
 }
 .cp-selchip-t { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
+/* The range never shrinks: it is the part of the chip you cannot get from
+   anywhere else on screen. The name above it yields instead. */
+.cp-selchip-n { flex: 0 0 auto; white-space: nowrap; color: var(--ink-faint); }
 .cp-selchip-x {
     flex: 0 0 auto; width: 20px; height: 20px; margin-left: auto;
     display: grid; place-items: center;
@@ -8353,6 +8360,13 @@ body[data-pe-full="1"] .pe-fullbar { display: flex; }
     color: var(--ink-faint); font-size: 14px; line-height: 1; cursor: pointer;
 }
 .cp-selchip-x:hover { background: var(--bg-app); color: var(--ink); }
+/* `[hidden]` is a UA rule (`display: none`) and loses to ANY author
+   `display:` — including the `display: flex` above. So with nothing selected
+   the chip kept its border and padding and rendered as a stray 19x12 pill
+   inside the composer, permanently. Same class of bug that
+   tests/test_hidden_attribute.py guards against; invisible to that test
+   because this node is built in cockpit.js, not in index.html. */
+.cp-selchip[hidden] { display: none; }
 
 /* ═══════════════════════════════════════════════════════════════════════
    THE STAGE — what the agent is doing, shown ON the workspace.
@@ -9123,15 +9137,35 @@ body[data-cockpit]:not([data-bench="open"]) .cockpit { top: 0; }
 
 /* ── composer ───────────────────────────────────────────────────────── */
 .cp-compose {
-    flex: 0 0 auto; display: flex; align-items: flex-end; gap: 6px;
-    margin: 10px 12px 12px; padding: 4px 4px 4px 16px;
+    /* GRID, not flex. The attached-region chip is a CHILD of this form, and
+       under flex it became a third item on the SAME ROW as the textarea and
+       the send button. A chip carrying a construct name runs ~340px wide and
+       cannot shrink; the textarea is `flex: 1 1 0%`, so it absorbed the whole
+       shortfall, collapsed to 0px, and shoved the send button 39px OUTSIDE
+       the rounded border. Two columns plus an auto-placed full-width chip row
+       mean the chip can never take the input's width away from it again.
+       Auto-placement handles both states: with the chip display:none it is
+       not a grid item, so the input and send sit on row 1 and no empty row
+       is reserved. */
+    flex: 0 0 auto;
+    display: grid;
+    grid-template-columns: minmax(0, 1fr) auto;
+    align-items: end;
+    column-gap: 6px;
+    margin: 10px 12px 12px;
+    /* Symmetric. This was `4px 4px 4px 16px` — 16px of inset on the left and
+       4px on the right, which is what makes the bar read as lopsided. The
+       text's 16px inset now comes from the textarea's own padding-left, so
+       the shell can inset the chip and the send button equally on both
+       sides. */
+    padding: 5px;
     border: 1px solid var(--line-strong); border-radius: 22px;
     background: var(--bg-app);
 }
 .cp-compose:focus-within { border-color: var(--ink-soft); box-shadow: 0 0 0 3px var(--brand-ring); }
 .cp-compose textarea {
     flex: 1; resize: none; border: 0; border-radius: 0;
-    padding: 8px 0; font: inherit; line-height: 1.45;
+    padding: 8px 0 8px 11px; font: inherit; line-height: 1.45;
     background: none; color: var(--ink); font-family: inherit;
     /* The global `textarea { min-height: 160px }` above is for SEQUENCE
        boxes. It also hit the chat composer, which only set max-height: 160px
@@ -9160,6 +9194,16 @@ body[data-cockpit]:not([data-bench="open"]) .cockpit { top: 0; }
     color: var(--on-ink); font-size: 15px; line-height: 1;
 }
 .cp-send:hover { opacity: 0.86; }
+@media (min-width: 901px) {
+    /* Matched to the textarea's one-line height. At 32px against a 34px input
+       the bottoms aligned (align-items: end) but the tops did not, so the
+       button sat 2px low in the pill — the other half of "asymmetric".
+       This block sits AFTER `.cp-send` deliberately: same specificity, so the
+       later rule is the one that wins. Written above the base rule first, it
+       lost silently and the button stayed 32px. On a phone the 46px
+       tap-target floor further down outranks this on purpose. */
+    .cp-send { width: 34px; height: 34px; }
+}
 
 /* ── Model picker, under the composer ────────────────────────────────────
    Deliberately quiet: it is a setting you touch rarely, sitting under the one
@@ -9309,7 +9353,7 @@ body[data-cockpit]:not([data-bench="open"]) .cockpit { top: 0; }
        reopen, which is why the rail felt like a modal. */
     body[data-cockpit="min"] .cp-transcript,
     body[data-cockpit="min"] .cp-meter { display: none; }
-    body[data-cockpit="min"] .cp-compose { display: flex; }
+    body[data-cockpit="min"] .cp-compose { display: grid; }
 
     /* A desktop rule pins the rail to top:0 when it's a full-height column
        beside the canvas. On a phone the rail is the BOTTOM half, so `bottom`
@@ -10155,7 +10199,7 @@ body.de-agent-run .dna-edit-actions { display: none; }
        slide-over: this is a bottom sheet again. */
     body[data-cockpit="min"] .cp-transcript,
     body[data-cockpit="min"] .cp-meter { display: none; }
-    body[data-cockpit="min"] .cp-compose { display: flex; }
+    body[data-cockpit="min"] .cp-compose { display: grid; }
     body[data-cockpit="min"] .cp-head {
         writing-mode: horizontal-tb; height: auto;
         justify-content: space-between; padding: 12px 12px 8px; gap: 10px;

dee/static/cockpit.js

@@ -1905,8 +1905,13 @@
         if (!el) return;
         if (!_sel) { el.hidden = true; el.innerHTML = ""; return; }
         el.hidden = false;
-        el.innerHTML = '<span class="cp-selchip-t">'
-            + esc(_sel.name) + " \u00b7 " + _sel.from.toLocaleString()
+        // Name and coordinates are SEPARATE spans on purpose. As one string
+        // the whole thing ellipsised from the right, so a long construct name
+        // ate the coordinates — "pCambia2300-LUX6_-_SEB - 7,347-8,810 (1,464 b…"
+        // dropped the one part you cannot reconstruct from the editor title.
+        // Now the name truncates and the range always survives.
+        el.innerHTML = '<span class="cp-selchip-t">' + esc(_sel.name) + '</span>'
+            + '<span class="cp-selchip-n">' + _sel.from.toLocaleString()
             + "\u2013" + _sel.to.toLocaleString()
             + " (" + _sel.length.toLocaleString() + " bp)</span>"
             + '<button type="button" class="cp-selchip-x" aria-label="Don\'t send this selection">\u00d7</button>';

dee/static/index.html

@@ -112,7 +112,7 @@
     <!-- ?v= query bumps invalidate browser + iframe asset caches when app.css /
          app.js change. Bump these numbers whenever you ship a frontend update —
          without them, users keep getting the stale file for up to a week. -->
-    <link rel="stylesheet" href="/static/app.css?v=20260823-grid2" />
+    <link rel="stylesheet" href="/static/app.css?v=20260824-composer4" />
     <!-- The work catalog + the draggable rail. Kept out of app.css so two new
          self-contained surfaces stay reviewable; every colour is an app.css
          token, so both themes work with nothing added. -->
@@ -2394,7 +2394,7 @@
                                       <button class="pe-mapbtn pe-mapbtn--icon" type="button" id="peZoomIn" title="Zoom in" aria-label="Zoom in">+</button>
                                       <button class="pe-mapbtn" type="button" id="peZoomFit" title="Fit the whole map">Fit</button>
                                       <button class="pe-mapbtn" type="button" id="peZoomSel"
-                                              title="Zoom the map to the selected region">To sel</button>
+                                              title="Zoom the map to the selected region">Selection</button>
                                       <!-- The map draws unique cutters by
                                            default: an enzyme that cuts once is
                                            a cloning handle, one that cuts
@@ -3132,9 +3132,9 @@
     <!-- Cloning reference data must load before app.js so the Designer
          can read VECTORS / ENZYMES / CLONING_METHODS / TAGS / LINKERS. -->
     <script src="/static/cloning_db.js?v=20260530-ui-polish" defer></script>
-    <script src="/static/context.js?v=20260823-grid2" defer></script>
-    <script src="/static/lineage.js?v=20260823-grid2" defer></script>
-    <script src="/static/app.js?v=20260823-grid2" defer></script>
+    <script src="/static/context.js?v=20260824-composer4" defer></script>
+    <script src="/static/lineage.js?v=20260824-composer4" defer></script>
+    <script src="/static/app.js?v=20260824-composer4" defer></script>
     <!-- The decision trace, BEFORE cockpit.js: applyEvent calls TDTrace.push
          on the very first event, and both are `defer`, so document order is
          load order. Loading it after would drop the opening events of a
@@ -3143,7 +3143,7 @@
     <!-- THE COCKPIT — the persistent orchestrator rail. Loads after app.js so
          TDBench/TDStructure exist when a tool result asks the workspace to
          render something. This is the only conversation surface in the app. -->
-    <script src="/static/cockpit.js?v=20260823-grid2" defer></script>
+    <script src="/static/cockpit.js?v=20260824-composer4" defer></script>
     <!-- structcard before catalog: the catalog calls TDStructCard.observe as
          soon as it paints. Both are defer, so document order is load order. -->
     <script src="/static/structcard.js?v=20260811-buildC" defer></script>

tests/test_mobile_reach.py

@@ -194,8 +194,18 @@ def test_the_small_detent_is_a_working_state_not_a_closed_one():
     Hiding the composer would turn it into a dead bar you can only reopen,
     which is what made the rail feel like a modal."""
     block = _all_phone_css(_read(_APP_CSS))
-    m = re.search(r'body\[data-cockpit="min"\] \.cp-compose \{([^}]*)\}', block)
-    assert m and "display: flex" in m.group(1), "peek must keep the composer"
+    # The guarantee is that the composer is still DISPLAYED at peek — not
+    # which layout mode it uses. It was `display: flex` until the attached-
+    # region chip was given its own row and the composer became a grid;
+    # pinning the mechanism made a correct change look like a regression.
+    # An author `display: none` here is the thing that would actually break
+    # peek, so that is what this asserts. Every occurrence, not the first:
+    # two phone blocks set this and `re.search` would only ever see one.
+    decls = re.findall(r'body\[data-cockpit="min"\] \.cp-compose \{([^}]*)\}', block)
+    assert decls, "peek must keep the composer"
+    for d in decls:
+        assert "display:" in d and "display: none" not in d, (
+            "peek must keep the composer visible, got: " + d.strip())
     # and the transcript is what yields, not the head — the head carries the
     # live status, so "Designing guides…" is readable at 132px.
     assert 'body[data-cockpit="min"] .cp-transcript' in block