From a154eb4e242c6b16a39b97fa69b8b7b312197f4b Mon Sep 17 00:00:00 2001
From: "pouriade.com" <did:plc:3sapfnszmvjc6wa4ml3ybkwb>
Date: Fri, 23 Oct 2026 10:31:21 -0700
Subject: [PATCH] Move the composer's model and effort under the card

The composer's toolbar now holds only Attach and Send, and the model
and effort selects sit in a quiet line under the card, ComposerSettings
in composer-parts.tsx, with their text in line with the box's. The
reply and edit composers and the composer's frame all use it, so the
frame still gives way without moving.

The line never wraps: everything after the model keeps its width, so
a long model name is cut short rather than pushing the effort onto a
second line. ModelSelect's tooltip is now the chosen model's name by
default, so the whole name is still a hover away.
---
 CHANGELOG.md                                  |  1 +
 .../conversation/components/Composer.tsx      |  6 +++++-
 .../conversation/components/ComposerFrame.tsx | 21 +++++++++++--------
 .../conversation/components/EditComposer.tsx  |  6 ++++--
 .../conversation/components/ReplyComposer.tsx | 13 +++++++-----
 .../components/composer-parts.tsx             | 17 +++++++++++++--
 .../models/components/EffortSelect.tsx        |  2 +-
 .../models/components/ModelSelect.tsx         |  6 ++++--
 apps/web/src/shared/ui/Select.tsx             |  4 ++--
 specs/web-ui.md                               |  4 ++--
 10 files changed, 54 insertions(+), 26 deletions(-)

diff --git a/CHANGELOG.md b/CHANGELOG.md
index 6ac229b..164dbe3 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -13,6 +13,7 @@ What changed in each release of SCN Chat, for the people who use it, run it, or
 - Screen readers read a setting's description and any problem found with it along with its field, and a field the server found a problem with rings red.
 - When a plugin's settings can't be read, the message beside Reset is in red, as the other errors in a card are.
 - The Tags section in the sidebar unfolds and folds as a reply's sources and steps do, rather than jumping open and shut.
+- The composer's model and thinking effort choices moved out of the card into a quiet line under it, leaving only Attach and Send beside the box. A long model name is cut short there rather than pushing the effort onto a second line, and hovering it shows the whole name.
 
 ## [0.5.1] - 2026-10-22
 
diff --git a/apps/web/src/features/conversation/components/Composer.tsx b/apps/web/src/features/conversation/components/Composer.tsx
index 6863111..cd74700 100644
--- a/apps/web/src/features/conversation/components/Composer.tsx
+++ b/apps/web/src/features/conversation/components/Composer.tsx
@@ -45,12 +45,17 @@ import {
  *           <Composer.Send />
  *         </Composer.Toolbar>
  *       </Composer.Card>
+ *       <Composer.Settings>
+ *         <Composer.Model />
+ *         <Composer.Effort />
+ *       </Composer.Settings>
  *     </Composer.Form>
  *   </Composer.Provider>
  */
 
 export {
   ComposerCard as Card,
+  ComposerSettings as Settings,
   ComposerToolbar as Toolbar,
   StopButton as Stop,
 } from './composer-parts.tsx'
@@ -329,7 +334,6 @@ export function Model() {
       models={draft.models}
       value={draft.selected}
       onChange={(next) => draft.form.setFieldValue('model', next)}
-      title="Model"
       none={draft.defaultOption}
     />
   )
diff --git a/apps/web/src/features/conversation/components/ComposerFrame.tsx b/apps/web/src/features/conversation/components/ComposerFrame.tsx
index 0c085cc..4c2a297 100644
--- a/apps/web/src/features/conversation/components/ComposerFrame.tsx
+++ b/apps/web/src/features/conversation/components/ComposerFrame.tsx
@@ -5,6 +5,7 @@ import {
   AttachButton,
   ComposerCard,
   ComposerDock,
+  ComposerSettings,
   ComposerToolbar,
   MessageBox,
   messagePlaceholder,
@@ -38,18 +39,20 @@ export function ComposerFrame(props: Props) {
         <MessageBox ref={box} placeholder={messagePlaceholder({ waiting: props.waiting })} />
         <ComposerToolbar>
           <AttachButton disabled />
-          <ModelSelect
-            aria-label="Model"
-            title="Model"
-            quiet
-            loading
-            models={[]}
-            value={null}
-            onChange={() => {}}
-          />
           <SendButton disabled />
         </ComposerToolbar>
       </ComposerCard>
+      <ComposerSettings>
+        <ModelSelect
+          aria-label="Model"
+          title="Model"
+          quiet
+          loading
+          models={[]}
+          value={null}
+          onChange={() => {}}
+        />
+      </ComposerSettings>
     </ComposerDock>
   )
 }
diff --git a/apps/web/src/features/conversation/components/EditComposer.tsx b/apps/web/src/features/conversation/components/EditComposer.tsx
index 852a0d9..1cb54c4 100644
--- a/apps/web/src/features/conversation/components/EditComposer.tsx
+++ b/apps/web/src/features/conversation/components/EditComposer.tsx
@@ -42,11 +42,13 @@ export function EditComposer({ ref, ...props }: Props) {
           <Composer.Clear />
           <Composer.Toolbar>
             <Composer.Attach />
-            <Composer.Model />
-            <Composer.Effort />
             <Composer.Send title="Send as a new version" />
           </Composer.Toolbar>
         </Composer.Card>
+        <Composer.Settings>
+          <Composer.Model />
+          <Composer.Effort />
+        </Composer.Settings>
         <Composer.Notices />
       </Composer.Form>
     </Composer.Provider>
diff --git a/apps/web/src/features/conversation/components/ReplyComposer.tsx b/apps/web/src/features/conversation/components/ReplyComposer.tsx
index 6a08ac7..190c0cc 100644
--- a/apps/web/src/features/conversation/components/ReplyComposer.tsx
+++ b/apps/web/src/features/conversation/components/ReplyComposer.tsx
@@ -26,9 +26,10 @@ interface Props {
 /**
  * The message box for a new message, starting a chat or replying at the end of its branch: one
  * white card floating at the bottom of the panel, over the conversation fading under it, with
- * quotes and attachments at its top, the text, and a toolbar of Attach, the model and effort, and
- * Send, which nests in the card's corner as the main action. While a reply runs, Stop takes Send's
- * place. It carries on from the frame that stood in for it while the page loaded.
+ * quotes and attachments at its top, the text, and a toolbar of Attach and Send, which nests in the
+ * card's corner as the main action, and the model and effort in a quiet line under the card. While
+ * a reply runs, Stop takes Send's place. It carries on from the frame that stood in for it while
+ * the page loaded.
  */
 // The ref is kept out of `props`: React Compiler treats an object holding a ref as one, so reading
 // any other prop in render would stop it memoizing the composer.
@@ -55,11 +56,13 @@ export function ReplyComposer({ ref, ...props }: Props) {
           <Composer.Clear />
           <Composer.Toolbar>
             <Composer.Attach />
-            <Composer.Model />
-            <Composer.Effort />
             {props.onStop ? <Composer.Stop onClick={props.onStop} /> : <Composer.Send />}
           </Composer.Toolbar>
         </Composer.Card>
+        <Composer.Settings>
+          <Composer.Model />
+          <Composer.Effort />
+        </Composer.Settings>
         <Composer.Notices />
       </Composer.Form>
     </Composer.Provider>
diff --git a/apps/web/src/features/conversation/components/composer-parts.tsx b/apps/web/src/features/conversation/components/composer-parts.tsx
index 17fc27a..d92e28a 100644
--- a/apps/web/src/features/conversation/components/composer-parts.tsx
+++ b/apps/web/src/features/conversation/components/composer-parts.tsx
@@ -74,13 +74,13 @@ export function MessageBox(props: ComponentProps<'textarea'>) {
   )
 }
 
-/** The toolbar along the card's foot: Attach, the model and effort, and Send. */
+/** The toolbar along the card's foot: Attach at its start and Send in its corner. */
 export function ComposerToolbar(props: ChildrenProps) {
   return (
     <div
       className={cn(
         composerPart,
-        'flex flex-wrap items-center gap-1.75 rounded-b-composer border-b ps-3.25 pe-2.25 pt-1.75 pb-2.25 text-small',
+        'flex items-center gap-1.75 rounded-b-composer border-b ps-3.25 pe-2.25 pt-1.75 pb-2.25',
       )}
     >
       {props.children}
@@ -88,6 +88,19 @@ export function ComposerToolbar(props: ChildrenProps) {
   )
 }
 
+/**
+ * The model and effort, a quiet line under the card, its text in line with the box's. It stays one
+ * line, where everything after the first part, the model, keeps its width, so a long model name
+ * cuts short rather than pushing the effort under it.
+ */
+export function ComposerSettings(props: ChildrenProps) {
+  return (
+    <div className="mt-1.5 flex min-w-0 items-center gap-0.5 ps-2.5 text-caption *:not-first:flex-none">
+      {props.children}
+    </div>
+  )
+}
+
 /** A round button at the toolbar's end or start, nesting in the composer's corner. */
 const round = 'inline-grid size-composer-button flex-none place-items-center rounded-full p-0'
 
diff --git a/apps/web/src/features/models/components/EffortSelect.tsx b/apps/web/src/features/models/components/EffortSelect.tsx
index ec0f3ea..2468b9e 100644
--- a/apps/web/src/features/models/components/EffortSelect.tsx
+++ b/apps/web/src/features/models/components/EffortSelect.tsx
@@ -62,7 +62,7 @@ interface Props {
   'aria-label'?: string
   /** What the option for no level is called where it shows, and who decides then. */
   auto: AutoEffort
-  /** Whether the button is quiet text in a toolbar, as in the composer. */
+  /** Whether the button is quiet text, as in the line under the composer. */
   quiet?: boolean
   className?: string
 }
diff --git a/apps/web/src/features/models/components/ModelSelect.tsx b/apps/web/src/features/models/components/ModelSelect.tsx
index cdd2eee..55e9e94 100644
--- a/apps/web/src/features/models/components/ModelSelect.tsx
+++ b/apps/web/src/features/models/components/ModelSelect.tsx
@@ -20,8 +20,9 @@ interface Props {
   none?: None
   id?: string
   'aria-label'?: string
+  /** The button's tooltip, by default the chosen model's name, which the button may cut short. */
   title?: string
-  /** How the button looks: a field, or quiet text in a toolbar, as in the composer. */
+  /** How the button looks: a field, or quiet text, as in the line under the composer. */
   quiet?: boolean
   /** Whether the models are on their way, which holds the button with a line in place of a name. */
   loading?: boolean
@@ -41,6 +42,7 @@ export function ModelSelect(props: Props) {
     ...props.models.map((m) => ({ value: keyOf(m), label: m.name, keywords: keyOf(m) })),
   ]
   const key = value ? keyOf(value) : ''
+  const name = options.find((option) => option.value === key)?.label ?? props.none?.label
   if (props.loading)
     return (
       <Select
@@ -62,7 +64,7 @@ export function ModelSelect(props: Props) {
     <Select
       id={props.id}
       aria-label={props['aria-label']}
-      title={props.title}
+      title={props.title ?? name}
       quiet={props.quiet}
       className={props.className}
       options={options}
diff --git a/apps/web/src/shared/ui/Select.tsx b/apps/web/src/shared/ui/Select.tsx
index 24ce5f0..93dcca4 100644
--- a/apps/web/src/shared/ui/Select.tsx
+++ b/apps/web/src/shared/ui/Select.tsx
@@ -38,7 +38,7 @@ interface Props {
   title?: string
   /** Classes for the button, such as its width. */
   className?: string
-  /** Whether the button is quiet text rather than a field, as in the composer's toolbar. */
+  /** Whether the button is quiet text rather than a field, as in the line under the composer. */
   quiet?: boolean
   disabled?: boolean
   /** A quiet title at the top of the open list, saying what the options choose. */
@@ -270,7 +270,7 @@ export function Select(props: Props) {
         className={cn(
           field,
           'inline-flex max-w-full cursor-pointer items-center justify-between gap-1.5 pe-2.25 text-start disabled:cursor-default aria-expanded:border-focus aria-expanded:ring-3 aria-expanded:ring-accent-soft',
-          // Quiet, it reads as the toolbar's text until hovered or open.
+          // Quiet, it reads as the text around it until hovered or open.
           props.quiet &&
             'min-w-0 border-transparent bg-transparent px-2 py-1 font-medium text-muted-quiet hover:not-disabled:bg-hover hover:not-disabled:text-ink aria-expanded:border-transparent aria-expanded:text-ink aria-expanded:ring-0',
           props.className,
diff --git a/specs/web-ui.md b/specs/web-ui.md
index 58fb616..b89e55d 100644
--- a/specs/web-ui.md
+++ b/specs/web-ui.md
@@ -91,8 +91,8 @@ The root route's `beforeLoad` asks `/api/me` who is signed in, through the query
   - Steps are timed where time is spent, as chat apps time thinking. While reasoning streams, its step and the block's summary count up, as "Thinking… 8s", and when it ends the step reads "Thought for 12s" and the finished reply's footer button totals it, as "Thought for 12s · web_search". A running tool counts up the same way, and its time goes once it finishes. The record holds no times, so they are measured in the browser while the reply streams and kept in memory by reply and step, so they carry over from the stream to the finished record. A reply not watched while it streamed, as after a reload, reads "Thought". An errored reply says it failed and why, with a "Try again" button beside it that regenerates it with the same model, as Regenerate does, and is disabled while a regenerate is on its way. A cancelled one carries a small amber Stopped badge, with the Stop button's square, under where it broke off.
   - The message element carries `data-status`, and live steps `data-live`, `data-current`, and `data-state`, so a theme can style each state.
 - **Message actions.** On user messages, edit, which opens the composer prefilled and sends a sibling, copy, and details. Editing another message starts the composer over from that message. On assistant replies, copy, regenerate, which regenerates with the reply's own model, sent with the request so a later default or a sibling's model never takes its place, and More, a menu holding the rest: quote, which adds the text selected inside the reply when the menu opened, or the whole reply when nothing in it was selected, to the composer as a quote chip and focuses it, and says which it will quote; regenerate with, which shows the models in the menu's place and regenerates with the one picked at once; and details. Details, as a button or from More, opens a card of what the message's record says: the model, effort, tokens, status, when it was written in full, its record key, and where it is stored. Regenerate with and details each take the menu's place under a button back to it, and each view starts with focus on its first control. Escape or a click outside closes the menu or card and returns focus to its button. While generating, stop. The actions are icon buttons named by their labels, grouped as the message's actions, and sit at the message's edge, so a reply's start its footer and the user's end theirs, with the most used nearest the edge. A reply's steps button comes after them. The actions show on hover and on keyboard focus, while a menu or card is open, always on the latest reply, since its actions are the ones most often wanted next, and always on a touch screen, which has no hover. The shared view shows details as each message's only action.
-- **Composer.** A textarea that grows with its text up to a cap, then scrolls, whose placeholder instructs rather than asks: "Ask anything" in a new chat, and "Reply" under a message, and nothing while an open chat's messages are on their way, so a chat opened on a reload never says one and then the other, and a chat just started goes from "Ask anything" to nothing to "Reply" as it opens, and a row under it with an attach button, a model select from `/api/models`, and Send. Attach and Send are icon buttons at either end of the row, a paperclip that opens the hidden file input and an up arrow, so the main action always sits in the corner. The model select sits just before Send. Once its list holds eight entries or more, about as many as it shows before scrolling, it opens with a Search models box, which finds a model by its name, its ID, or its provider, as the model select in Preferences does. For a model with the reasoning capability, the chosen one or, with none chosen, the model the server falls back to, a quiet effort select, the same one as in Preferences, sits beside it, between it and Send, and shows the chosen level's pie and name. Each message names the model that answers it, the one chosen or, with none chosen, the one the select names, so a chat started on the default keeps that model whatever later becomes of the default. In a chat with a model of its own, the model last used on the branch, the select shows that model by name and offers no "Default", following a switch of model from the moment the message that made it arrives, through a reply that is running, stopped, or failed, and on reopening the chat. A chosen model the catalog no longer offers shows as unavailable, and is never swapped for another. Before the chat has a model, "Default" is the default from settings, the user's or the admin's, and names it, as "Default · Claude Sonnet", once the catalog offers it, and says "Default model" otherwise. While an open chat's messages are on their way, the select shows a loading line and no effort, since nothing yet says which model the chat uses. The theme grows the textarea with `field-sizing: content`, and where a browser lacks it, `useAutoGrow` sets its height from its text. The effort is sent only while its select is shown. It starts on the effort last chosen in the composer on this device, kept in `localStorage` as a convenience, or on Auto. The attach button accepts images only for models with vision, plus any type an ingester supports. With no model chosen it follows the fallback model's capabilities when the catalog lists it, and otherwise accepts images and leaves the check to the server. Files also attach when pasted into the textarea or dropped anywhere on the conversation, which marks itself with `data-dropping` while files are dragged over it. A paste that carries text as well as files pastes as text, since office apps copy a picture of the copied text alongside it. Pasted and dropped files skip the attach button's filter, so the server refuses a type no ingester reads, and an image for a model without vision is refused before upload. Each file uploads as soon as it is added and shows as a chip above the textarea, with a local preview for an image or a file icon, its name over its kind and size, as "PDF · 1.2 MB", with "Uploading…" in their place until its upload finishes, and a button that removes it. Removing a file while it uploads cancels the upload. A failed upload drops its chip and says which file failed and why. An image attached before switching to a model without vision stays, and Send is disabled under a note that the model can't read images, until the image is removed or a model that can is chosen. Send waits until every upload has finished, and sending lets go of the attachments it sent, keeping any added while it was on its way. Quotes from a reply show above the attachments, each as a block quote across the card cut to two lines, the whole text on hover, and a button that removes it, so the user sees what the model will be shown apart from what they wrote. Sending puts each quote at the start of the message as a Markdown block quote, in the order they were added, above the text, and lets go of the quotes it sent, keeping any added while it was on its way. Send is disabled while there is nothing to send, no text but spaces, no quotes, and no attachments. Once the composer holds any text, quote, or attachment, a Clear button, an × in the top corner of the box, as a field's own clear button rather than among the controls under it, empties the textarea, removes every quote and attachment, cancelling uploads still running, clears the composer's error, and focuses the textarea. It is disabled while a message is on its way, since sending clears the composer itself. Each paragraph in the textarea runs in the direction of its own text, as Persian runs right to left, while the box keeps the page's direction, so text either way stops short of Clear. Enter sends, and Shift+Enter adds a newline. On a touch screen, which has no hover, Enter adds a newline too and Send sends, as phone keyboards lead people to expect, and an Enter that an input method uses to pick its words, as for Japanese, never sends. Send is disabled while a message is on its way, and Enter does nothing then, so a message is sent once. Until an open chat's messages arrive, Send is disabled and Enter does nothing too, since the message would not yet know which one it answers. While the reply at the end of the branch runs, Stop, a square icon, takes Send's place and Enter does nothing, and that reply's own actions leave Stop to the composer. A composer editing an earlier message says so above the box, that sending adds the message as a new version, with a Cancel button, and Escape in the textarea cancels too. Its Send's tooltip says "Send as a new version", and it sends as usual. The file input clears after each pick, so choosing the same file again attaches it again. The model select offers "Default model" only when the server can choose a model without one, following chat-turns: the user's preferences or the admin set a default. Otherwise the composer asks for a model, and sending waits until one is chosen. When `/api/models` lists no models at all, Send is disabled and a note points to Settings to add an API key.
-  - While the page's code loads, the composer's frame stands in for it, in the same card at the same place: a plain textarea with the composer's placeholder, which is "Ask anything" for a new chat and nothing for an open one, whose messages haven't said yet whether it replies, the attach button, the model select's loading line, and Send, all disabled but the textarea. The server sends it with the page's frame, so the box takes typing before any script runs, and Enter only adds a line, since there is nothing yet to send it. The conversation's column shows it again while its own code downloads. Each frame that gives way leaves what its box holds, with the cursor and whether it had the focus, in `composer-handoff.ts`, and the frame or composer that takes its place shows the text, puts the cursor back, and takes the focus, so the swap can't be seen. A frame with no text that never had the focus leaves nothing. Only a composer that starts empty takes a draft, never one editing a message, and a draft nothing took, as when the page fails to load, waits for the next one. The frame and the composer are built from the same parts, in `composer-parts.tsx`. The composer's own parts, in `Composer.tsx`, read its draft from a `Composer.Provider`, and `ReplyComposer` and `EditComposer` each compose the parts they show.
+- **Composer.** A textarea that grows with its text up to a cap, then scrolls, whose placeholder instructs rather than asks: "Ask anything" in a new chat, and "Reply" under a message, and nothing while an open chat's messages are on their way, so a chat opened on a reload never says one and then the other, and a chat just started goes from "Ask anything" to nothing to "Reply" as it opens, and a row under it with an attach button and Send, and under the card a model select from `/api/models`. Attach and Send are icon buttons at either end of the row, a paperclip that opens the hidden file input and an up arrow, so the main action always sits in the corner. The model select is quiet caption text in a line under the card, starting in line with the textarea's text. The line never wraps, so a long model name is cut short with an ellipsis, with the whole name in the button's tooltip and in its list where the list has room. Once its list holds eight entries or more, about as many as it shows before scrolling, it opens with a Search models box, which finds a model by its name, its ID, or its provider, as the model select in Preferences does. For a model with the reasoning capability, the chosen one or, with none chosen, the model the server falls back to, a quiet effort select, the same one as in Preferences, sits after it on that line, keeping its width, and shows the chosen level's pie and name. Each message names the model that answers it, the one chosen or, with none chosen, the one the select names, so a chat started on the default keeps that model whatever later becomes of the default. In a chat with a model of its own, the model last used on the branch, the select shows that model by name and offers no "Default", following a switch of model from the moment the message that made it arrives, through a reply that is running, stopped, or failed, and on reopening the chat. A chosen model the catalog no longer offers shows as unavailable, and is never swapped for another. Before the chat has a model, "Default" is the default from settings, the user's or the admin's, and names it, as "Default · Claude Sonnet", once the catalog offers it, and says "Default model" otherwise. While an open chat's messages are on their way, the select shows a loading line and no effort, since nothing yet says which model the chat uses. The theme grows the textarea with `field-sizing: content`, and where a browser lacks it, `useAutoGrow` sets its height from its text. The effort is sent only while its select is shown. It starts on the effort last chosen in the composer on this device, kept in `localStorage` as a convenience, or on Auto. The attach button accepts images only for models with vision, plus any type an ingester supports. With no model chosen it follows the fallback model's capabilities when the catalog lists it, and otherwise accepts images and leaves the check to the server. Files also attach when pasted into the textarea or dropped anywhere on the conversation, which marks itself with `data-dropping` while files are dragged over it. A paste that carries text as well as files pastes as text, since office apps copy a picture of the copied text alongside it. Pasted and dropped files skip the attach button's filter, so the server refuses a type no ingester reads, and an image for a model without vision is refused before upload. Each file uploads as soon as it is added and shows as a chip above the textarea, with a local preview for an image or a file icon, its name over its kind and size, as "PDF · 1.2 MB", with "Uploading…" in their place until its upload finishes, and a button that removes it. Removing a file while it uploads cancels the upload. A failed upload drops its chip and says which file failed and why. An image attached before switching to a model without vision stays, and Send is disabled under a note that the model can't read images, until the image is removed or a model that can is chosen. Send waits until every upload has finished, and sending lets go of the attachments it sent, keeping any added while it was on its way. Quotes from a reply show above the attachments, each as a block quote across the card cut to two lines, the whole text on hover, and a button that removes it, so the user sees what the model will be shown apart from what they wrote. Sending puts each quote at the start of the message as a Markdown block quote, in the order they were added, above the text, and lets go of the quotes it sent, keeping any added while it was on its way. Send is disabled while there is nothing to send, no text but spaces, no quotes, and no attachments. Once the composer holds any text, quote, or attachment, a Clear button, an × in the top corner of the box, as a field's own clear button rather than among the controls under it, empties the textarea, removes every quote and attachment, cancelling uploads still running, clears the composer's error, and focuses the textarea. It is disabled while a message is on its way, since sending clears the composer itself. Each paragraph in the textarea runs in the direction of its own text, as Persian runs right to left, while the box keeps the page's direction, so text either way stops short of Clear. Enter sends, and Shift+Enter adds a newline. On a touch screen, which has no hover, Enter adds a newline too and Send sends, as phone keyboards lead people to expect, and an Enter that an input method uses to pick its words, as for Japanese, never sends. Send is disabled while a message is on its way, and Enter does nothing then, so a message is sent once. Until an open chat's messages arrive, Send is disabled and Enter does nothing too, since the message would not yet know which one it answers. While the reply at the end of the branch runs, Stop, a square icon, takes Send's place and Enter does nothing, and that reply's own actions leave Stop to the composer. A composer editing an earlier message says so above the box, that sending adds the message as a new version, with a Cancel button, and Escape in the textarea cancels too. Its Send's tooltip says "Send as a new version", and it sends as usual. The file input clears after each pick, so choosing the same file again attaches it again. The model select offers "Default model" only when the server can choose a model without one, following chat-turns: the user's preferences or the admin set a default. Otherwise the composer asks for a model, and sending waits until one is chosen. When `/api/models` lists no models at all, Send is disabled and a note points to Settings to add an API key.
+  - While the page's code loads, the composer's frame stands in for it, in the same card at the same place: a plain textarea with the composer's placeholder, which is "Ask anything" for a new chat and nothing for an open one, whose messages haven't said yet whether it replies, the attach button and Send, and the model select's loading line under the card, all disabled but the textarea. The server sends it with the page's frame, so the box takes typing before any script runs, and Enter only adds a line, since there is nothing yet to send it. The conversation's column shows it again while its own code downloads. Each frame that gives way leaves what its box holds, with the cursor and whether it had the focus, in `composer-handoff.ts`, and the frame or composer that takes its place shows the text, puts the cursor back, and takes the focus, so the swap can't be seen. A frame with no text that never had the focus leaves nothing. Only a composer that starts empty takes a draft, never one editing a message, and a draft nothing took, as when the page fails to load, waits for the next one. The frame and the composer are built from the same parts, in `composer-parts.tsx`. The composer's own parts, in `Composer.tsx`, read its draft from a `Composer.Provider`, and `ReplyComposer` and `EditComposer` each compose the parts they show.
 - **Settings.** A sidebar links back to the chats and to each section, with an icon, marks the current one, and links to the admin area for admins. Under the links, a quiet line names the app's version, from the root `package.json`, so anyone can tell which release a deployment runs. Signing out is in the chat sidebar's account menu. Only the current section is shown, under its title and a line saying what it is for, as cards of related settings in one narrow column. A setting is a row with its label and a description on the left and its control on the right, which drops under them on a narrow screen. On/off settings are checkboxes drawn as switches, except several on one row, such as what a key's model can do, which are toggle chips. A form's Save sits in a bar that sticks to the foot of the panel, shows "Saved" after a save until the next change, and shows a failed save's message. Save is disabled until the form differs from what was saved, and the bar says "Unsaved changes" beside it until then, though not beside a button that adds, such as Add plugin. Leaving the page doesn't ask, so unsaved changes are lost. Below 720px the sidebar is a drawer, as on the chat page, opened by a toggle at the top of the page and closed by the backdrop or by following a link in it. The admin area shares this layout and these pieces, which live in `src/shared/ui/SettingsPage.tsx`.
   - Preferences: a theme of System, Light, or Dark under Appearance, which applies at once and is kept on this device in `localStorage` rather than in the preferences record, as the styling spec says. The account menu offers the same choice. Then default model and thinking effort under Models, custom instructions, and generate titles under Chats. Saving also stores the browser's time zone, which the app saves on sign-in as well when it differs from the stored one. A stored default model the model list no longer offers, as after its key is deleted, shows as unavailable and is kept on save until the user picks another. When the preferences can't load, the section shows why and no form.
   - API keys: a list of the user's keys, each with its name, provider, how many models it covers, and last four characters, or a note when there are none. Each row opens the key's page. Deleting a key asks to confirm in its row first. Below it, a form to add a key, with its labels over its fields: provider, key, an optional name, and model IDs, with a button to load the provider's models where it lists them. Loaded models appear below the field as a checklist, none ticked, and the key is added with the ticked ones and any typed IDs. For providers with user endpoints, base URL and slug fields. The slug fills in from the name as it is typed, until the user edits the slug, and clearing it hands it back to the name. A key's page (`/settings/api-keys/<id>`), under a link back to the list, is titled with the key's name over its provider and base URL. Its Models card has a row for each model: its name, its ID when that differs, Vision, Thinking, and Tools as chips that stay pressed while on, and a button that removes it. In a narrow column the chips go under the name. Under it, Add models has a field to type a model ID, where Enter adds rather than saves, and, for providers that list their models, Load models, which lists them with the saved key to tick the ones to use. Unticking one takes it out of the draft, as its remove button does. A key that can't be read anymore shows a red note asking for it to be deleted and added again, and a page for a key that isn't saved anymore says so in place of the form. The changes are one draft under one Save, which is disabled while the key has no models. Below the draft, a red-edged card deletes the key, asking to confirm in place first, then returns to the list. The API keys section stays marked in the sidebar there.
-- 
knotmirror 0.0.1