The composer decides what a chat is, and the topbar stops trying

The mode select in the topbar posted with hx-post against a route that only
answers PATCH, so every change returned 405 and the mode never moved. htmx
shows nothing when a request fails, so the control looked like it worked: the
select stayed where you put it and the server ignored you. It has never worked.

Two more of the same kind. A mode could not be chosen at all until the chat
existed, so reaching Plan meant sending something in Manual first and letting
the model answer under the wrong rules. And the project directory box was real
and submitted, but unlabelled and squeezed to a few characters by the select
beside it, so it read as broken -- which is how it was reported.

So the kind, the connection, the directory and the mode move out of the strip
above the text and into one toolbar row beneath it, where attach and send
already are. The directory becomes a button that opens a browser over SFTP,
because a path is something you would rather find than spell. `scan_dir` is new
beside `list_dir`: a picker has to tell a directory from a file before it can
draw the row, and `list_dir` backs a tool whose contract is a list of names and
must not change under a model mid-conversation.

Browsing is a person clicking, not a model calling, so it does not pass through
policy.py -- the same argument the terminal panel rests on. It does mean Manual
mode has a second exception now.

Also: .chip was two components with one name, and the attachment card won, so
the Chat/Agent pills silently wore its padding. --radius-md was used twice and
declared nowhere, so both fell back to 0. .btn.is-active has been set by
syncToggles since the terminal landed and styled by nothing. Enter-to-send
ignored isComposing, so committing an IME candidate sent the message. The
terminal had five colours of a sixteen-colour palette, with fallbacks from a
palette that no longer exists.

Co-Authored-By: Claude Opus 5 (1M context) <noreply@anthropic.com>

src/lembas/web/static/css/app.css

@@ -165,6 +165,26 @@ button, input, textarea, select {
   border-color: var(--accent);
 }
 
+/*
+  A toggle whose panel is open.
+
+  `syncToggles` in app.js has been setting this class on every toggle pointing
+  at a panel since the terminal landed, and nothing has ever styled it -- so an
+  open inspector and a closed one gave their topbar buttons an identical
+  appearance, and the only signal was the panel itself, which is off-screen at
+  narrow widths. Written against `.btn` rather than `.btn--icon` so anything
+  that becomes a toggle later is covered.
+*/
+.btn.is-active {
+  background: var(--accent-soft);
+  border-color: transparent;
+  color: var(--accent);
+}
+.btn.is-active:hover:not(:disabled) {
+  background: var(--accent-soft);
+  color: var(--accent-hover);
+}
+
 .btn--sm { height: var(--control-h-sm); padding: 0 var(--control-px-sm); font-size: var(--text-xs); }
 .btn--sm.btn--icon { width: var(--control-h-sm); padding: 0; }
 .btn--lg { height: var(--control-h-lg); padding: 0 var(--sp-5); font-size: var(--text-base); }
@@ -432,7 +452,13 @@ button, input, textarea, select {
   border-left: 1px solid var(--border);
 }
 
-.inspector__header {
+/*
+  The header a side panel wears. The inspector and the terminal had this
+  written out twice, identically, and they must stay identical: they sit side
+  by side in the same slot and one being a pixel off reads as a rendering bug.
+  Also the same height as .topbar, so the three line up across the shell.
+*/
+.panel-head {
   display: flex;
   align-items: center;
   gap: var(--sp-2);
@@ -441,11 +467,13 @@ button, input, textarea, select {
   padding: 0 var(--sp-3);
   border-bottom: 1px solid var(--border);
 }
-.inspector__title {
+.panel-head__title {
   display: flex;
   align-items: center;
   gap: var(--sp-2);
   flex: 1;
+  min-width: 0;
+  margin: 0;
   font-size: var(--text-sm);
   font-weight: 600;
   color: var(--ink-muted);
@@ -505,7 +533,7 @@ button, input, textarea, select {
   .inspector {
     position: fixed;
     inset: 0 0 0 auto;
-    z-index: 40;
+    z-index: var(--z-panel);
     box-shadow: var(--shadow-lg);
   }
 }
@@ -524,25 +552,6 @@ button, input, textarea, select {
   border-left: 1px solid var(--border);
 }
 
-.terminal__header {
-  display: flex;
-  align-items: center;
-  gap: var(--sp-2);
-  height: var(--header-height);
-  flex: none;
-  padding: 0 var(--sp-3);
-  border-bottom: 1px solid var(--border);
-}
-.terminal__title {
-  display: flex;
-  align-items: center;
-  gap: var(--sp-2);
-  flex: 1;
-  min-width: 0;
-  font-size: var(--text-sm);
-  font-weight: 600;
-  color: var(--ink-muted);
-}
 .terminal__where {
   font-weight: 400;
   font-family: var(--font-mono);
@@ -584,7 +593,7 @@ button, input, textarea, select {
     position: fixed;
     inset: 0 0 0 auto;
     width: min(var(--terminal-width), 100vw);
-    z-index: 40;
+    z-index: var(--z-panel);
     box-shadow: var(--shadow-lg);
   }
 }
@@ -793,7 +802,7 @@ button, input, textarea, select {
   .sidebar {
     position: fixed;
     inset: 0 auto 0 0;
-    z-index: 40;
+    z-index: var(--z-panel);
     box-shadow: var(--shadow-lg);
   }
   /* Hiding it is the `hidden` attribute, forced to win at the top of this
@@ -809,7 +818,7 @@ button, input, textarea, select {
   position: fixed;
   right: var(--sp-4);
   bottom: var(--sp-4);
-  z-index: 60;
+  z-index: var(--z-toast);
   display: flex;
   flex-direction: column;
   gap: var(--sp-2);
@@ -934,7 +943,7 @@ button, input, textarea, select {
   position: absolute;
   top: calc(100% + var(--sp-1));
   right: 0;
-  z-index: 30;
+  z-index: var(--z-dropdown);
   width: min(24rem, calc(100vw - var(--sp-8)));
   border: 1px solid var(--border);
   border-radius: var(--radius-lg);
@@ -961,6 +970,27 @@ button, input, textarea, select {
 
 /* A dialog that holds a searchable list rather than a question. */
 .dialog--wide { width: min(34rem, calc(100vw - var(--sp-6))); }
+.dialog__note { margin: 0; font-size: var(--text-sm); color: var(--ink-muted); }
+/* Where the directory browser currently stands. Sticky-feeling rather than
+   sticky: it is above the list, so walking deeper never scrolls it away. */
+.dialog__where {
+  display: flex;
+  align-items: center;
+  gap: var(--sp-2);
+  margin: 0;
+  min-width: 0;
+  padding: var(--sp-2) var(--sp-3);
+  border-bottom: 1px solid var(--border);
+  background: var(--bg-sunken);
+  font-size: var(--text-xs);
+  color: var(--ink-muted);
+}
+.dialog__where .mono { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
+/* A row that is shown but cannot be chosen -- a file in a directory picker.
+   Listed rather than hidden, because a directory of only files would otherwise
+   look empty. */
+.picker__option.is-inert { cursor: default; color: var(--ink-faint); }
+.picker__option.is-inert:hover { background: none; }
 .dialog__results {
   max-height: min(24rem, 50vh);
   overflow-y: auto;

src/lembas/web/static/css/chat.css

@@ -669,43 +669,96 @@
 }
 .composer__inner { max-width: var(--thread-max-width); margin: 0 auto; }
 
-/* A column: chips on top, then the control row. The chips are inside the form
-   so their hidden file_ids inputs are submitted with the message. */
+/*
+  A column: chips, then the text across the full width, then one toolbar row.
+
+  The text gets its own row rather than sharing one with the buttons, which is
+  what lets the toolbar hold more than two controls without the input shrinking
+  to nothing. The chips stay inside the form so their hidden file_ids inputs are
+  submitted with the message.
+*/
 .composer__form {
   display: flex;
   flex-direction: column;
-  gap: var(--sp-2);
+  gap: var(--sp-1);
   padding: var(--sp-2);
   border: 1px solid var(--border);
   border-radius: var(--radius-xl);
   background: var(--surface);
   transition: border-color var(--transition-fast), box-shadow var(--transition-fast);
 }
-.composer__row {
-  display: flex;
-  gap: var(--sp-1);
-  align-items: flex-end;
-}
-/* Attach and send are the same size and sit on the same baseline as the last
-   line of the textarea, so the control row reads as one object. */
-.composer__btn { flex: none; align-self: flex-end; border-radius: var(--radius-full); }
 .composer__form:focus-within {
   border-color: var(--accent);
-  box-shadow: 0 0 0 3px var(--accent-soft);
+  box-shadow: var(--ring);
 }
+
 .composer__input {
-  flex: 1;
+  width: 100%;
   min-width: 0;
   border: 0;
   background: none;
   resize: none;
-  padding: 0.5rem var(--sp-2);
+  padding: var(--sp-2) var(--sp-2) var(--sp-1);
   font-size: var(--text-base);
   line-height: var(--leading-normal);
   max-height: 20rem;
   color: var(--ink);
 }
 .composer__input:focus { outline: none; }
+
+/* Everything that acts on the message, on one line under it. It wraps rather
+   than scrolls: on a narrow window the context controls drop to their own row
+   and attach/send stay where the thumb expects them. */
+.composer__toolbar {
+  display: flex;
+  align-items: center;
+  flex-wrap: wrap;
+  gap: var(--sp-2);
+}
+.composer__tools { display: flex; align-items: center; gap: var(--sp-1); flex: none; }
+.composer__actions { display: flex; align-items: center; gap: var(--sp-1); margin-left: auto; }
+.composer__context {
+  display: flex;
+  align-items: center;
+  flex-wrap: wrap;
+  gap: var(--sp-2);
+  min-width: 0;
+}
+.composer__agent { display: flex; align-items: center; gap: var(--sp-2); min-width: 0; }
+
+/* Round, and the same size as each other: attach and send read as one pair
+   bracketing the row. */
+.composer__btn { flex: none; border-radius: var(--radius-full); }
+
+/* The directory, on a new chat. Monospace because it is a path, and it grows
+   to fit rather than being pinned to a width that truncates every real one. */
+.composer__dir { max-width: 16rem; font-family: var(--font-mono); font-weight: 400; }
+.composer__dir-path { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
+
+/* The connection and directory of a chat already under way. Not a control:
+   update_chat refuses to change either, so showing them as one is honest. */
+.composer__where {
+  display: inline-flex;
+  align-items: center;
+  gap: var(--sp-1);
+  min-width: 0;
+  max-width: 20rem;
+  padding: 0 var(--sp-2);
+  height: var(--control-h-sm);
+  border-radius: var(--radius-full);
+  background: var(--surface-hover);
+  color: var(--ink-muted);
+  font-size: var(--text-xs);
+  white-space: nowrap;
+}
+.composer__where-dir {
+  font-family: var(--font-mono);
+  color: var(--ink-faint);
+  overflow: hidden;
+  text-overflow: ellipsis;
+  min-width: 0;
+}
+
 .composer__hint {
   margin: var(--sp-2) 0 0;
   font-size: var(--text-xs);
@@ -746,7 +799,12 @@
   text-decoration: none;
 }
 
-/* --- Attachment chips (composer) ------------------------------------------ */
+/* --- Attachment chips (composer) ------------------------------------------
+   Named `attach-chip` and not `chip`, which is the radio pill above. The two
+   were both called `.chip` and both set padding, border and max-width, so the
+   later block won and the Chat/Agent pills silently inherited the padding of
+   an attachment card. Two components with one name is a collision, not a
+   family. */
 .composer { position: relative; }
 
 .composer__attachments {
@@ -757,7 +815,7 @@
 }
 .composer__attachments:empty { display: none; }
 
-.chip {
+.attach-chip {
   display: flex;
   align-items: center;
   gap: var(--sp-2);
@@ -768,10 +826,10 @@
   max-width: 20rem;
   font-size: var(--text-sm);
 }
-.chip--error { border-color: var(--danger); background: var(--danger-soft); }
-.chip--error .chip__icon { color: var(--danger); }
+.attach-chip--error { border-color: var(--danger); background: var(--danger-soft); }
+.attach-chip--error .attach-chip__icon { color: var(--danger); }
 
-.chip__thumb {
+.attach-chip__thumb {
   display: block;
   width: 2.25rem;
   height: 2.25rem;
@@ -779,17 +837,17 @@
   object-fit: cover;
   flex: none;
 }
-.chip__icon { color: var(--ink-muted); flex: none; display: flex; }
-.chip__body { min-width: 0; flex: 1; display: flex; flex-direction: column; }
-.chip__name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
-.chip__meta { font-size: var(--text-xs); color: var(--ink-faint); }
-.chip__warning { font-size: var(--text-xs); color: var(--danger); }
+.attach-chip__icon { color: var(--ink-muted); flex: none; display: flex; }
+.attach-chip__body { min-width: 0; flex: 1; display: flex; flex-direction: column; }
+.attach-chip__name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
+.attach-chip__meta { font-size: var(--text-xs); color: var(--ink-faint); }
+.attach-chip__warning { font-size: var(--text-xs); color: var(--danger); }
 
 /* --- Drag and drop -------------------------------------------------------- */
 .dropzone-overlay {
   position: absolute;
   inset: 0;
-  z-index: 5;
+  z-index: var(--z-raised);
   display: none;
   flex-direction: column;
   align-items: center;
@@ -894,33 +952,58 @@
 }
 .unread-dot[hidden] { display: none; }
 
-/* --- Agent chats ----------------------------------------------------------- */
-/* In the header, not the settings panel: the mode is the difference between
-   being interrupted and not, and it is looked at constantly. */
-.agent-bar { display: flex; align-items: center; gap: var(--sp-2); }
-.agent-bar__where {
+/* --- Agent chats -----------------------------------------------------------
+   `.select--sm` and `.input--sm` are defined once, in app.css, at
+   var(--control-h-sm). A second definition here made every small control on a
+   chat page 0.15rem taller than the same control anywhere else -- which is
+   exactly the drift --control-h exists to prevent.
+*/
+
+/*
+  Chat or Agent: one control with two halves, not two buttons that happen to be
+  adjacent. Radios underneath, because the choice is permanent and mutually
+  exclusive and should read as a fork -- and because a radio group is what a
+  screen reader already knows how to announce.
+*/
+.segmented {
+  display: inline-flex;
+  flex: none;
+  padding: 2px;
+  border: 1px solid var(--border);
+  border-radius: var(--radius-full);
+  background: var(--bg-sunken);
+}
+.segmented__option { position: relative; display: inline-flex; }
+.segmented__option input {
+  position: absolute;
+  inset: 0;
+  opacity: 0;
+  cursor: pointer;
+  margin: 0;
+}
+.segmented__option span {
   display: inline-flex;
   align-items: center;
   gap: var(--sp-1);
-  color: var(--ink-muted);
+  height: calc(var(--control-h-sm) - 2px);
+  padding: 0 var(--sp-3);
+  border-radius: var(--radius-full);
+  color: var(--ink-faint);
   font-size: var(--text-xs);
+  font-weight: 500;
   white-space: nowrap;
-  max-width: 14rem;
-  overflow: hidden;
-  text-overflow: ellipsis;
+  transition: background var(--transition-fast), color var(--transition-fast);
 }
-
-/* Chat or Agent, on the new-chat composer. */
-.composer__kind {
-  display: flex;
-  flex-wrap: wrap;
-  align-items: center;
-  gap: var(--sp-2);
-  padding: 0 var(--sp-2) var(--sp-2);
+.segmented__option input:hover + span { color: var(--ink-muted); }
+.segmented__option input:checked + span {
+  background: var(--surface-raised);
+  color: var(--ink);
+  box-shadow: var(--shadow-sm);
+}
+.segmented__option input:focus-visible + span {
+  outline: 2px solid var(--accent);
+  outline-offset: 1px;
 }
-.composer__kind-agent { display: flex; gap: var(--sp-2); flex: 1 1 18rem; min-width: 0; }
-.composer__kind-agent .input { flex: 1; min-width: 0; }
-.select--sm, .input--sm { height: calc(var(--control-h) - 0.35rem); font-size: var(--text-xs); }
 
 /* --- A plan, and the way to carry it out ----------------------------------- */
 .plan {

src/lembas/web/static/css/tokens.css

@@ -47,6 +47,7 @@
   /* --- Radius & shadow -------------------------------------------------- */
   --radius-sm: 4px;
   --radius: 8px;
+  --radius-md: 10px;
   --radius-lg: 12px;
   --radius-xl: 18px;
   --radius-full: 999px;
@@ -70,11 +71,35 @@
      of --font-mono do not fit in 24rem, and a terminal narrower than eighty
      re-wraps everything a program prints. */
   --terminal-width: 34rem;
+  --terminal-width-min: 24rem;
   --thread-max-width: 48rem;
   --header-height: 3.5rem;
 
+  /* The terminal's own type. xterm holds this as a number rather than reading
+     it from CSS, so terminal.js parses it back out -- it must stay a plain
+     pixel value. */
+  --terminal-font-size: 13px;
+
+  /*
+    --- Stacking ----------------------------------------------------------
+    These were four bare numbers scattered across two stylesheets, which is
+    fine until something new has to sit between two of them and nobody can
+    say what is already there.
+  */
+  --z-raised: 5;
+  --z-handle: 10;
+  --z-dropdown: 30;
+  --z-panel: 40;
+  --z-overlay: 50;
+  --z-toast: 60;
+
   --transition-fast: 120ms ease;
   --transition: 200ms ease;
+
+  /* The focus treatment, written once. Three components spelled it out. It
+     resolves --accent-soft at the point of use, so it follows the theme even
+     though it is declared above them. */
+  --ring: 0 0 0 3px var(--accent-soft);
 }
 
 /*
@@ -144,6 +169,35 @@
   --shadow-lg: 0 12px 34px rgba(0, 0, 0, 0.55);
 
   --scrim: rgba(6, 8, 10, 0.66);
+
+  /*
+    The sixteen ANSI colours, for the terminal panel.
+
+    A shell picks its own colours -- `ls --color`, a git diff, htop's meters --
+    and until these existed it got xterm's defaults, which are a different
+    palette from this one and read as a foreign window pasted into the
+    application. Where a slot has an obvious counterpart above it takes it, so
+    an error in the terminal is the same ember as an error anywhere else.
+
+    "black" is not #000: it is what a program picks for a dim background or
+    faint text, and on a near-black surface a true black is invisible.
+  */
+  --ansi-black: #1A1F26;
+  --ansi-red: #E2795A;
+  --ansi-green: #9BCC5A;
+  --ansi-yellow: #DFAE58;
+  --ansi-blue: #8FB3CC;
+  --ansi-magenta: #C08FCC;
+  --ansi-cyan: #5FBFA0;
+  --ansi-white: #C6CDD4;
+  --ansi-bright-black: #4A535E;
+  --ansi-bright-red: #EC8E72;
+  --ansi-bright-green: #B1DD74;
+  --ansi-bright-yellow: #EFC87A;
+  --ansi-bright-blue: #A9C6DA;
+  --ansi-bright-magenta: #D4A9DE;
+  --ansi-bright-cyan: #7FD4BA;
+  --ansi-bright-white: #E4E8EC;
 }
 
 /*
@@ -203,6 +257,30 @@
   --shadow-lg: 0 12px 34px rgba(72, 58, 34, 0.16);
 
   --scrim: rgba(44, 36, 25, 0.4);
+
+  /*
+    The same sixteen on parchment, and the reason they are not the Moria set
+    lightened: every one of these has to be readable as *text* on #F2EBD9, so
+    the whole palette is darkened rather than brightened. "bright" therefore
+    means more emphatic here, not lighter -- a light terminal theme that made
+    bright yellow actually bright would render it invisible.
+  */
+  --ansi-black: #2C2419;
+  --ansi-red: #A6432B;
+  --ansi-green: #4C7A22;
+  --ansi-yellow: #98701A;
+  --ansi-blue: #3E6B7A;
+  --ansi-magenta: #7A3E6B;
+  --ansi-cyan: #2C7360;
+  --ansi-white: #6A5C48;
+  --ansi-bright-black: #94856D;
+  --ansi-bright-red: #8C3722;
+  --ansi-bright-green: #3C6318;
+  --ansi-bright-yellow: #7A5A14;
+  --ansi-bright-blue: #325867;
+  --ansi-bright-magenta: #63325A;
+  --ansi-bright-cyan: #235C4D;
+  --ansi-bright-white: #453A2A;
 }
 
 /* Respect a stated preference for reduced motion everywhere, at once. */