The chat's settings at the top right of its header; the composer keeps the message

Model, effort, subagents and an agent chat's mode were chips inside the composer, cut off or out
of reach with a long model name or every chip on. They are in the chat's header now, beside the
Terminal, the activity panel, a Tools and skills button and the menu; a new agent chat's computer
and folder sit beside the title (where an open one says where it works), and its Terminal is the
header's button as an open chat's is. The composer keeps text, attach, Dictate, Draw a picture
and Send/Stop. Where the header has no room -- measured by fitHead on every drawing and resize:
the settings cut at their end, or the place squeezed under 10rem -- they fold behind Chat
settings, which opens them as a wrapped row under the header. The new chat page shows its header.

Tests (tests/ui CI2): the composer holds only the message's controls; at 1920/1280/1024/800/390
px, for a chat and an agent chat with long model names and every chip, every button is inside the
window and not clipped by its container, nothing is drawn over another, folded or not, and the
model's menu opens; a new agent chat at 1280 and 390. Earlier tests follow the chips' new places.

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>

ui/app.css

@@ -497,7 +497,29 @@ label, .label { font: var(--text-sm) / var(--leading-tight) var(--font-body); co
 .head__title { font: 600 var(--text-base) / var(--leading-tight) var(--font-body); overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
 .head__place { display: flex; gap: var(--sp-2); align-items: center; min-width: 0; }
 .head__tools { display: flex; gap: var(--sp-1); align-items: center; justify-content: end; }
-.main[data-new="true"] .head { display: none; }
+/* The chat's header: the title, where it works, then its settings and tools at the right. The
+   settings take what room is left after the title's minimum; where they do not fit they fold
+   behind Chat settings (chat.js `fitHead`, measured), which opens them as a wrapped row of their
+   own under the header. */
+.head.chathead {
+  grid-template-columns: minmax(min(6rem, 30%), max-content) minmax(0, 1fr) minmax(0, max-content) auto auto;
+  grid-template-areas: "title place set fold tools";
+  column-gap: var(--sp-2);
+}
+.chathead > .head__title { grid-area: title; }
+.chathead > .head__place { grid-area: place; overflow: hidden; }
+.chathead > .head__tools { grid-area: tools; }
+.chathead__fold { grid-area: fold; }
+.chathead__fold[hidden] { display: none; }
+.chathead__settings { grid-area: set; display: flex; flex-wrap: nowrap; gap: var(--sp-1); align-items: center; justify-content: start; min-width: 0; overflow: hidden; }
+.chathead__settings > * { flex: none; }
+.chathead__settings:empty { display: none; }
+.chathead[data-fold="true"] .chathead__settings { display: none; }
+.head.chathead[data-fold="true"][data-unfold="true"] { grid-template-areas: "title place set fold tools" "row row row row row"; row-gap: var(--sp-2); }
+.chathead[data-fold="true"][data-unfold="true"] .chathead__settings { grid-area: row; display: flex; flex-wrap: wrap; justify-content: start; overflow: visible; padding-bottom: var(--sp-1); }
+.chathead__settings .cchip { max-width: min(var(--w-field), 100%); }
+.head__place .cchip { min-width: 0; }
+.head__place > .cchip:last-child { flex: 0 1 auto; }
 .main > .head { grid-row: 1; }
 .main > .thread { grid-row: 2; }
 .main > .dock { grid-row: 3; }
@@ -530,7 +552,7 @@ label, .label { font: var(--text-sm) / var(--leading-tight) var(--font-body); co
 
 /* A new chat is the same page, empty: the greeting low in the space above the composer, which
    sits in the middle of the window rather than at its foot. */
-.main[data-new="true"] { grid-template-rows: 0 minmax(0, 1fr) auto minmax(0, 0.8fr); }
+.main[data-new="true"] { grid-template-rows: auto minmax(0, 1fr) auto minmax(0, 0.8fr); }
 .main[data-new="true"] .thread { display: grid; align-content: end; padding-bottom: var(--sp-6); }
 .hello { display: grid; justify-items: center; gap: var(--sp-3); text-align: center; }
 .hello__mark { width: var(--sp-10); height: var(--sp-10); }
@@ -1928,6 +1950,8 @@ details[open] > summary .step__chev .icon { transform: rotate(90deg); }
   .head__place { grid-column: 1 / -1; grid-row: 2; }
   .head__place:empty { display: none; }
   .cchip { max-width: var(--w-field-xs); }
+  .head.chathead { grid-template-columns: minmax(min(6rem, 30%), 1fr) minmax(0, max-content) auto auto; grid-template-areas: "title set fold tools" "place place place place"; }
+  .head.chathead[data-fold="true"][data-unfold="true"] { grid-template-areas: "title set fold tools" "place place place place" "row row row row"; }
 }
 
 /* 48rem (--bp-narrow): the sidebar is a drawer over the page, opened from the title bar. */

ui/i18n.js

@@ -81,6 +81,7 @@ const LEMBAS_I18N = {
     "Carry it out": "Provést to",
     "Changed": "Změněno",
     "Chat": "Konverzace",
+    "Chat settings": "Nastavení konverzace",
     "Chats": "Konverzace",
     "Check for updates…": "Zkontrolovat aktualizace…",
     "Choose": "Vybrat",
@@ -585,6 +586,7 @@ const LEMBAS_I18N = {
     "Carry it out": "Ausführen",
     "Changed": "Geändert",
     "Chat": "Chat",
+    "Chat settings": "Chat-Einstellungen",
     "Chats": "Chats",
     "Check for updates…": "Nach Updates suchen…",
     "Choose": "Auswählen",
@@ -1089,6 +1091,7 @@ const LEMBAS_I18N = {
     "Carry it out": "Llevarlo a cabo",
     "Changed": "Cambiado",
     "Chat": "Chat",
+    "Chat settings": "Ajustes del chat",
     "Chats": "Chats",
     "Check for updates…": "Buscar actualizaciones…",
     "Choose": "Elegir",
@@ -1593,6 +1596,7 @@ const LEMBAS_I18N = {
     "Carry it out": "Exécuter",
     "Changed": "Modifié",
     "Chat": "Conversation",
+    "Chat settings": "Paramètres de la conversation",
     "Chats": "Conversations",
     "Check for updates…": "Rechercher des mises à jour…",
     "Choose": "Choisir",
@@ -2097,6 +2101,7 @@ const LEMBAS_I18N = {
     "Carry it out": "Végrehajtás",
     "Changed": "Módosítva",
     "Chat": "Csevegés",
+    "Chat settings": "Csevegés beállításai",
     "Chats": "Csevegések",
     "Check for updates…": "Frissítések keresése…",
     "Choose": "Kiválasztás",
@@ -2601,6 +2606,7 @@ const LEMBAS_I18N = {
     "Carry it out": "Eseguilo",
     "Changed": "Modificato",
     "Chat": "Chat",
+    "Chat settings": "Impostazioni della chat",
     "Chats": "Chat",
     "Check for updates…": "Cerca aggiornamenti…",
     "Choose": "Scegli",
@@ -3105,6 +3111,7 @@ const LEMBAS_I18N = {
     "Carry it out": "Wykonaj",
     "Changed": "Zmieniono",
     "Chat": "Czat",
+    "Chat settings": "Ustawienia czatu",
     "Chats": "Czaty",
     "Check for updates…": "Sprawdź aktualizacje…",
     "Choose": "Wybierz",
@@ -3609,6 +3616,7 @@ const LEMBAS_I18N = {
     "Carry it out": "Vykonať to",
     "Changed": "Zmenené",
     "Chat": "Konverzácia",
+    "Chat settings": "Nastavenia konverzácie",
     "Chats": "Konverzácie",
     "Check for updates…": "Skontrolovať aktualizácie…",
     "Choose": "Vybrať",

ui/index.html

@@ -64,9 +64,11 @@
     <div class="scrim" id="scrim" aria-hidden="true"></div>
 
     <main class="main" id="main" aria-labelledby="chat-title" data-new="false">
-      <header class="head">
+      <header class="head chathead" id="chat-head" data-fold="false" data-unfold="false">
         <h1 class="head__title" id="chat-title"></h1>
         <div class="head__place" id="chat-place"></div>
+        <div class="chathead__settings" id="chat-settings" role="toolbar" aria-label="Chat settings" data-i18n-aria-label></div>
+        <button type="button" class="tool chathead__fold" id="chat-fold" aria-expanded="false" aria-controls="chat-settings" aria-label="Chat settings" title="Chat settings" data-i18n-aria-label data-i18n-title></button>
         <div class="head__tools" id="chat-tools"></div>
       </header>
       <div class="thread" id="thread">

ui/js/chat.js

@@ -731,8 +731,49 @@ function renderHead(chat) {
   }
   // An archived chat says so where it is read, with the way back into the sidebar.
   if (chat.archived) tools.append(h("button", { type: "button", class: "btn btn--sm head__unarchive", text: t("Restore chat"), title: t("Archived"), onclick: () => unarchiveChat(open?.chat || chat) }))
+  if (!chat.archived) tools.append(h("button", { type: "button", class: "tool", id: "scope-open", "aria-label": t("Tools and skills…"), title: t("Tools and skills…"), "aria-haspopup": "dialog", onclick: (e) => scopePopover(e.currentTarget, open?.chat || chat) }, icon(ICONS.tools)))
   tools.append(activityButton())
   tools.append(h("button", { type: "button", class: "tool", "aria-label": t("More"), title: t("More"), onclick: (e) => chatMenu(e.currentTarget, open?.chat || chat) }, icon(ICONS.more)))
+  fitHead()
+}
+
+// --- The chat's settings, top right ---------------------------------------------------------------
+//
+// The model, how hard it thinks, the subagents and an agent chat's mode sit in the chat's header,
+// beside the Terminal, the activity panel, the tools and skills and the chat's menu; the composer
+// keeps only what belongs to the message. Where the header has no room for them all on its line,
+// they fold behind one button (Chat settings), which opens them as a row of their own under the
+// header -- wrapped, every one reachable, never a line cut off at its end. Whether they fit is
+// measured, not guessed: a long model name or one more chip folds them at any width.
+
+function fitHead() {
+  const head = $("chat-head")
+  const box = $("chat-settings")
+  if (!head || !box) return
+  const any = box.childElementCount > 0
+  head.dataset.fold = "false"
+  // Folded when the settings are cut at their end, or when they leave where the chat works (its
+  // folder) less than its own width or 10rem, whichever is less.
+  const place = $("chat-place")
+  const room = Math.min(place.scrollWidth, 10 * parseFloat(getComputedStyle(document.documentElement).fontSize))
+  const squeezed = place.childElementCount > 0 && place.clientWidth + 1 < room
+  const fold = any && (box.scrollWidth > box.clientWidth + 1 || squeezed)
+  head.dataset.fold = String(fold)
+  if (!fold) head.dataset.unfold = "false"
+  $("chat-fold").hidden = !fold
+  $("chat-fold").setAttribute("aria-expanded", String(head.dataset.unfold === "true"))
+}
+
+function initHead() {
+  $("chat-fold").replaceChildren(icon(ICONS.sliders))
+  $("chat-fold").hidden = true
+  $("chat-fold").addEventListener("click", () => {
+    const head = $("chat-head")
+    head.dataset.unfold = String(head.dataset.unfold !== "true")
+    $("chat-fold").setAttribute("aria-expanded", head.dataset.unfold)
+    if (head.dataset.unfold === "true") $("chat-settings").querySelector("button")?.focus()
+  })
+  new ResizeObserver(() => fitHead()).observe($("chat-head"))
 }
 
 /** The models this chat may switch to (its data group's), or the account's when that fails. */
@@ -966,7 +1007,8 @@ let chipsDrawn = 0 // which drawing is the latest: an older one's late answers a
 
 /** The chips for what the composer is writing to: a new chat (`draft`) or the open chat. */
 async function renderChips() {
-  const box = $("composer-chips")
+  const box = $("chat-settings")
+  const message = $("composer-chips")
   const drawing = ++chipsDrawn
   const mayPick = ctx.me()?.permissions?.["chat.model_select"] !== false
   if (draft) {
@@ -974,18 +1016,20 @@ async function renderChips() {
     const models = ctx.models()
     const model = models.find((m) => m.id === draft.model)
     const parts = []
+    const where = [] // an agent chat's computer and folder: where it works, beside the title
     if (draft.kind === "agent") {
       const others = otherDevices()
-      if (others.length) parts.push(deviceChip(others))
+      if (others.length) where.push(deviceChip(others))
       if (draftHere()) {
         const roots = s?.remote?.enabled ? s.remote.roots : []
         if (!roots.includes(draft.dir)) draft.dir = roots[0] || ""
-        parts.push(folderChip(roots, draft.dir, (d) => ((draft.dir = d), renderChips())))
+        where.push(folderChip(roots, draft.dir, (d) => ((draft.dir = d), renderChips())))
       } else {
-        parts.push(elsewhereFolderChip(draftDevice(), draft.dir, (d) => ((draft.dir = d), renderChips())))
+        where.push(elsewhereFolderChip(draftDevice(), draft.dir, (d) => ((draft.dir = d), renderChips())))
       }
       parts.push(modeChip(draft.mode, (m) => ((draft.mode = m), renderChips())))
     }
+    $("chat-place").replaceChildren(...where)
     const shell = terminalTarget()
     aimTerminal(shell)
     parts.push(modelChip(models, draft.model, (id) => {
@@ -994,8 +1038,11 @@ async function renderChips() {
       renderChips()
     }, mayPick))
     if (model) parts.push(effortChip(model, draft.effort, (l) => ((draft.effort = l), renderChips())))
-    if (draft.kind === "chat" && picturesOffered()) parts.push(pictureChip())
-    else wantPicture = false
+    if (draft.kind === "chat" && picturesOffered()) message.replaceChildren(pictureChip())
+    else {
+      wantPicture = false
+      message.replaceChildren()
+    }
     if (draft.kind === "chat" && teamPossible(model)) parts.push(agentsChip(draft.agents, (a) => ((draft.agents = a), renderChips()), { cap: subagentsCap(), own: namedOnly(model?.subagents) }))
     // An agent chat's subagents run on its device: offered as the server says for that device.
     const device = draft.kind === "agent" ? draftDevice() : ""
@@ -1007,20 +1054,20 @@ async function renderChips() {
         if (f && drawing === chipsDrawn && draft?.kind === "agent") renderChips()
       })
     }
-    // Last, so the chat's own settings come first where the line scrolls.
-    if (shell) {
-      const b = chip({ ico: ICONS.terminal, label: t("Terminal"), menuish: false, cls: "cchip--terminal", onclick: toggleTerminal })
-      b.dataset.terminalToggle = ""
-      b.setAttribute("aria-pressed", String(terminalOpen()))
-      b.setAttribute("aria-controls", "terminal")
-      parts.push(b)
-    }
+    // The Terminal, as an open chat has it: in the header's tools.
+    $("chat-tools").replaceChildren(...(shell ? [terminalButton()] : []))
     box.replaceChildren(...parts.filter(Boolean))
+    fitHead()
     return
   }
   const chat = open?.chat
   aimTerminal(terminalTarget())
-  if (!chat?.kind) return box.replaceChildren()
+  if (!chat?.kind) {
+    box.replaceChildren()
+    message.replaceChildren()
+    fitHead()
+    return
+  }
   const save = async (body) => {
     try {
       const r = await patch(`/chats/${encodeURIComponent(chat.id)}`, body)
@@ -1041,12 +1088,17 @@ async function renderChips() {
   if (chat.kind === "agent") parts.push(modeChip(chat.mode || "edit", (m) => save({ mode: m })))
   if (chat.model) parts.push(modelChip(models, chat.model, (id) => save({ model: id }), mayPick))
   parts.push(effortChip(current, chat.effort || levelsOf(current).start, (l) => save({ effort: l })))
-  if (chat.kind === "chat" && picturesOffered()) parts.push(pictureChip())
-  else wantPicture = false
+  if (chat.kind === "chat" && picturesOffered() && !chat.archived) message.replaceChildren(pictureChip())
+  else {
+    wantPicture = false
+    message.replaceChildren()
+  }
   box.replaceChildren(...parts.filter(Boolean))
+  fitHead()
   const offer = await teamOffered(chat)
   if (!offer || drawing !== chipsDrawn || open?.chat?.id !== chat.id) return
   box.append(agentsChip(open.chat.agents || chat.agents, (a) => save({ agents: a }), offer))
+  fitHead()
 }
 
 /**
@@ -1505,5 +1557,6 @@ export function initChat(context) {
     }
   })
   onAgentChange(renderNotice)
+  initHead()
   showComposer(false)
 }

ui/js/dom.js

@@ -104,6 +104,8 @@ export const ICONS = {
   mic: ["M8 1.5a2.5 2.5 0 012.5 2.5v4a2.5 2.5 0 01-5 0V4A2.5 2.5 0 018 1.5zM8 3a1 1 0 00-1 1v4a1 1 0 002 0V4a1 1 0 00-1-1z", "M3.5 7.5H5a3 3 0 006 0h1.5a4.5 4.5 0 01-3.75 4.44V14h-1.5v-2.06A4.5 4.5 0 013.5 7.5z"],
   speaker: ["M2 6h2.5L8 3v10L4.5 10H2z", "M10.2 5.2a4 4 0 010 5.6l-1.06-1.06a2.5 2.5 0 000-3.48z", "M12.3 3.1a7 7 0 010 9.8l-1.06-1.06a5.5 5.5 0 000-7.68z"],
   picture: ["M1.5 2.5h13v11h-13zM3 4v6.4l2.75-2.75 2.5 2.5 1.75-1.75L13 11.4V4z", "M10.5 5a1.25 1.25 0 110 2.5 1.25 1.25 0 010-2.5z"],
+  tools: "M10.6 1.5a3.9 3.9 0 00-3.7 5.1L1.8 11.7a1.6 1.6 0 002.3 2.3l5.1-5.1a3.9 3.9 0 005.1-3.7l-.1-.9-2.1 2.1-1.9-.4-.4-1.9 2.1-2.1zM3 12.4l.6.6 5.3-5.3-.6-.6z",
+  sliders: ["M2 4h7v1.5H2zM12 4h2v1.5h-2zM2 10.5h2V12H2zM7 10.5h7V12H7z", "M9.5 2.75h2v4h-2zM4.5 9.25h2v4h-2z"],
   fileText: ["M3 1.5h6.5L13 5v9.5H3zM4.5 3v10h7V6H8.5V3z", "M6 8h4v1H6zM6 10h4v1H6z"],
   fileCode: ["M3 1.5h6.5L13 5v9.5H3zM4.5 3v10h7V6H8.5V3z", "M6.7 7.6l.7.7-1.2 1.2 1.2 1.2-.7.7-1.9-1.9z", "M9.3 7.6l1.9 1.9-1.9 1.9-.7-.7 1.2-1.2-1.2-1.2z"],
   drive: ["M1.5 4h13v8h-13zM3 5.5v5h10v-5z", "M10.5 7.25h1.5v1.5h-1.5z"],