Houmeres/LLeMbas
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases 3 Wiki Activity

The menu that never appeared, and the reason it never did

Browse Source 
composer.js built its menu lazily inside show(), and refresh() wrote
list.innerHTML before calling it. `list` is null until build() has run, so the
first `/` or `@` ever typed threw a TypeError and took the handler with it. The
menu has never appeared in any browser. That is why /compact "isn't there":
nothing was. I shipped it having only run `node --check`, which parses the file
happily.

So this also brings the thing that catches it: a DOM stub driven under node --
not committed, hard rule 1 stands, it is an instrument like curl. It reproduced
the crash in one run and immediately found two more: choosing a command from the
menu left `/help` sitting in the box so the next Enter ran it again, and Tab
completed nothing. Tab now completes and Enter runs, which is the split that
matters for a command taking an argument.

`.select--sm` was used three times and defined nowhere. I deleted the copy in
chat.css and left a comment saying it "is defined once, in app.css", where it
did not exist -- so those selects fell back to plain `.select`: width 100% in a
flex row where four siblings wanted the same, all of them shrinking together
until each was a few characters wide, and half a rem taller than everything
beside them. That was the whole of "the connection switch needs to be wider".

The connection and directory move to the topbar. They cannot change -- update_chat
refuses both with a 409 -- so they are facts about the chat, of a kind with the
Temporary badge, not controls on the message. The mode stays by the box.

Compaction says it is working. It makes a model call that takes seconds and had
no indicator anywhere: `hx-indicator` appears nowhere in this codebase, and the
Generation.status channel that says "Summarising earlier messages…" for the
automatic path cannot be borrowed, because it lives in the streaming bubble and
this endpoint refuses to run while any message is unfinished. The overflow menu
now runs the same code as /compact rather than posting for itself, so there is
one implementation, one spinner, and one place the endpoint's four carefully
written 409s finally reach somebody.

/effort, low medium high, per chat with a per-model default. It goes out twice
because there is no field that works everywhere: OpenAI and vLLM read
reasoning_effort, llama.cpp's own docs say other values "have no effect" and its
maintainer says the field "simply gets dropped without error or logging" -- what
reaches gpt-oss behind it is chat_template_kwargs. Both are sent, and only once
an effort has been chosen, so a provider strict about unknown parameters sees
exactly the request it always did until somebody opts in. The control appears
only on a model marked `reasoning`, a flag that has existed since the beginning
with no reader at all.

Mentions and recognised commands are marked as you type -- a mirror behind the
textarea holding the same text with every character transparent, contributing
nothing but a rounded rectangle, so a pixel of drift is a misplaced rectangle
rather than a doubled glyph. A command is marked only when it resolves, so
`/thoughts on this` visibly is not one before you send it. And again in the
transcript, where user turns had no render step at all and now escape before
they inject.

Co-Authored-By: Claude Opus 5 (1M context) <noreply@anthropic.com>
This commit is contained in:
Jaroslav Beneš
2026-08-02 18:17:04 +02:00
parent 712b7b7cab
commit 439f1a5d84
22 changed files with 912 additions and 76 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/lembas/web/static/css/app.css
+59
View File
@@ -676,6 +676,43 @@ body.is-resizing .terminal__screen { pointer-events: none; }
}
.topbar__actions { display: flex; align-items: center; gap: var(--sp-2); flex: none; }
/*
Which machine an agent chat runs on, and where.
Its own flex item between the title and the actions, and it shrinks before
the title does: `flex: 0 1 auto` with `min-width: 0` means a long path gives
up its characters first, which is right -- a truncated title is a chat you
cannot identify, a truncated path is still a path you recognise. Below 64rem
it goes entirely; the terminal button beside it already says which machine.
*/
.topbar__where {
display: inline-flex;
align-items: center;
gap: var(--sp-1);
flex: 0 1 auto;
min-width: 0;
max-width: 24rem;
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;
}
.topbar__where-name { flex: none; }
.topbar__where-dir {
font-family: var(--font-mono);
color: var(--ink-faint);
overflow: hidden;
text-overflow: ellipsis;
min-width: 0;
}
@media (max-width: 64rem) {
.topbar__where { display: none; }
}
/* The model picker: an avatar and a select sharing one frame, so it reads as a
single control rather than two things that happen to be adjacent. */
.model-select {
@@ -1057,7 +1094,29 @@ body.is-resizing .terminal__screen { pointer-events: none; }
.dialog__results .picker__list { max-height: none; }
.picker__search { padding: var(--sp-2); border-bottom: 1px solid var(--border); }
/*
Small controls, declared here because this is the file every page loads.
`.select--sm` was used in three places and defined in none: chat.css had a
copy, it was deleted as a duplicate, and the replacement never landed. A
select with only `.select` takes `width: 100%` and `--control-h` -- so in a
flex row every one of them asked for the whole width, all of them shrank
together until each was a few characters wide, and each stood half a rem
taller than the buttons beside it. That is what "the connection switch needs
to be wider" was.
`width: auto` is the important half: a small select should be as wide as its
longest option, not as wide as it can get away with.
*/
.input--sm { height: var(--control-h-sm); font-size: var(--text-xs); }
.select--sm {
height: var(--control-h-sm);
padding: 0 var(--sp-6) 0 var(--control-px-sm);
font-size: var(--text-xs);
width: auto;
max-width: 14rem;
background-position: right 0.75rem center, right 0.5rem center;
}
.picker__list { max-height: 22rem; overflow-y: auto; scrollbar-width: thin; padding: var(--sp-1); }
.picker__option {
src/lembas/web/static/css/chat.css
+91 -28
View File
@@ -243,6 +243,18 @@
line-height: var(--leading-normal);
}
/* Something is happening to the whole thread rather than to one message --
compaction, which makes a model call and can take a while. Shaped like a
turn so it sits in the column rather than floating over it. */
.thread__working {
display: flex;
align-items: center;
gap: var(--sp-3);
padding: var(--sp-3) 0;
color: var(--ink-muted);
font-size: var(--text-sm);
}
/* --- Metrics ---------------------------------------------------------------
What a reply cost, under the bubble. Quiet by default: it is reference, not
something to read every time.
@@ -697,20 +709,76 @@
box-shadow: var(--ring);
}
.composer__input {
/*
The text, and the mirror behind it.
Every property that affects where a character lands is declared once, on both
-- font, size, line height, padding, wrapping. A single difference and the
rectangles slide off the words they are marking. `font: inherit` on the
textarea is not enough: a textarea's default font is not the page's.
*/
.composer__field { position: relative; }
.composer__input,
.composer__mirror {
width: 100%;
min-width: 0;
border: 0;
background: none;
resize: none;
margin: 0;
padding: var(--sp-2) var(--sp-2) var(--sp-1);
border: 0;
font-family: var(--font-body);
font-size: var(--text-base);
line-height: var(--leading-normal);
letter-spacing: normal;
white-space: pre-wrap;
overflow-wrap: break-word;
word-break: normal;
max-height: 20rem;
}
.composer__input {
position: relative;
display: block;
background: none;
resize: none;
color: var(--ink);
overflow-y: auto;
}
.composer__input:focus { outline: none; }
/* Behind, and contributing nothing but background rectangles: its own text is
transparent, so the glyphs on screen are always the textarea's. That is what
makes a pixel of drift invisible rather than a doubled letter. */
.composer__mirror {
position: absolute;
inset: 0;
z-index: 0;
overflow: hidden;
color: transparent;
pointer-events: none;
user-select: none;
}
.composer__mirror .tok-mention,
.composer__mirror .tok-command {
border-radius: var(--radius-sm);
/* Bled sideways so the rectangle does not sit hard against the next word,
and the negative margin keeps the text metrics identical. */
padding: 0 2px;
margin: 0 -2px;
}
.composer__mirror .tok-mention { background: var(--accent-soft); }
.composer__mirror .tok-command { background: var(--leaf-soft); }
/* The same two in a sent message, where they are text rather than a backdrop. */
.tok-mention {
border-radius: var(--radius-sm);
padding: 0 2px;
background: var(--accent-soft);
color: var(--accent);
font-family: var(--font-mono);
font-size: 0.95em;
}
/* 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. */
@@ -740,30 +808,6 @@
.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);
@@ -807,6 +851,20 @@
box-shadow: var(--shadow-lg);
}
/* What the keys do, pinned to the bottom of the menu. */
.composer-menu__keys {
position: sticky;
bottom: 0;
padding: var(--sp-1) var(--sp-3);
border-top: 1px solid var(--border);
background: var(--surface-raised);
color: var(--ink-faint);
font-size: var(--text-xs);
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.picker__group {
margin: 0;
padding: var(--sp-2) var(--sp-3) var(--sp-1);
@@ -1016,6 +1074,11 @@
exactly the drift --control-h exists to prevent.
*/
/* The connection. Wide enough to read a machine's name without truncating it
to three characters, which is what it did while `.select--sm` did not exist.
A floor rather than a fixed width, so a long name still grows. */
.composer__connection { min-width: 10rem; }
/*
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
src/lembas/web/static/js/app.js
+1
View File
@@ -641,6 +641,7 @@
if (!input) return;
input.value = suggestion.dataset.suggestion;
autosize(input);
if (window.lembas.paintComposer) window.lembas.paintComposer();
var form = input.closest("form");
/* requestSubmit, not submit(): it fires the submit event, which is what
htmx is listening for. Same call the Enter key makes. */
src/lembas/web/static/js/audio.js
+1
View File
@@ -48,6 +48,7 @@
var existing = input.value.trim();
input.value = existing ? existing + " " + text : text;
if (window.lembas && window.lembas.autosize) window.lembas.autosize(input);
if (window.lembas && window.lembas.paintComposer) window.lembas.paintComposer();
input.focus();
input.selectionStart = input.selectionEnd = input.value.length;
}
src/lembas/web/static/js/commands.js
+104 -19
View File
@@ -69,25 +69,14 @@
name: "compact",
summary: "Summarise the earlier turns so they stop costing context",
when: function () { return !!chat() && !!el("#thread .msg"); },
run: function () {
window.lembas.confirm(
"Summarise everything before the last reply? The messages stay in the " +
"transcript; they just stop being sent to the model.",
{ title: "Compact this chat", label: "Compact" }
).then(function (yes) {
if (!yes) return;
post("/api/chats/" + chat() + "/compact")
.then(function (r) { return r.ok ? r.text() : Promise.reject(r); })
.then(function (html) {
el("#thread").innerHTML = html;
if (window.htmx) window.htmx.process(el("#thread"));
})
.catch(function (r) {
if (r && r.json) r.json().then(function (body) { note(body.detail, "error"); });
else note("Could not compact this chat.", "error");
});
});
}
run: compact
},
{
name: "effort",
summary: "How hard a reasoning model should think",
argument: "low | medium | high",
when: function () { return !!chat() && !!el("[data-effort]"); },
run: function (rest) { setEffort(rest); }
},
{
name: "mode",
@@ -174,6 +163,102 @@
return function () { window.location = url; };
}
/* --- Reasoning effort ---------------------------------------------------
The command drives the same select the composer shows, so there is one
piece of state and the control updates itself when the command is used. */
var EFFORTS = ["low", "medium", "high"];
function setEffort(rest) {
var select = el("[data-effort]");
if (!select) {
return note("This model is not marked as a reasoning model.", "error");
}
var wanted = (rest || "").trim().toLowerCase();
if (!wanted) {
return note(
select.value
? "Effort is " + select.value + ". /effort low, medium, high, or default."
: "Effort is whatever the model does by default. Try low, medium or high."
);
}
if (wanted === "default" || wanted === "none") wanted = "";
else if (EFFORTS.indexOf(wanted) === -1) {
return note("“" + wanted + "” is not an effort. Try low, medium or high.", "error");
}
select.value = wanted;
select.dispatchEvent(new Event("change", { bubbles: true }));
note(
wanted
? "Effort set to " + wanted + "."
: "Effort cleared; the model decides."
);
}
/* --- Compacting --------------------------------------------------------
One implementation, reached from the command and from the overflow menu
alike. The menu used to do its own hx-post, which meant two code paths and
a spinner on neither -- so after confirming, the menu closed and nothing
visible happened for however long the summarising model took.
The `Generation.status` channel that says "Summarising earlier messages…"
during *automatic* compaction cannot be borrowed: it lives inside the
streaming bubble, and this endpoint refuses to run while any message is
unfinished, so there is no bubble to put it in. */
var compacting = false;
function compact() {
if (compacting) return note("Already summarising.");
var thread = el("#thread");
if (!thread) return;
window.lembas.confirm(
"Summarise everything before the last reply? The messages stay in the " +
"transcript; they just stop being sent to the model.",
{ title: "Compact this chat", label: "Compact" }
).then(function (yes) {
if (!yes) return;
compacting = true;
var working = document.createElement("div");
working.className = "thread__working";
// The same words the automatic path uses, so the two do not look like
// different features.
working.innerHTML =
'<span class="dots"><i></i><i></i><i></i></span>' +
"<span>Summarising the earlier messages…</span>";
thread.appendChild(working);
if (window.lembas.scrollThread) window.lembas.scrollThread(true);
function done() {
compacting = false;
working.remove();
}
post("/api/chats/" + chat() + "/compact")
.then(function (r) { return r.ok ? r.text() : Promise.reject(r); })
.then(function (html) {
compacting = false;
// The response replaces the thread wholesale, placeholder included.
thread.innerHTML = html;
if (window.htmx) window.htmx.process(thread);
if (window.lembas.scrollThread) window.lembas.scrollThread(true);
})
.catch(function (r) {
done();
/* The endpoint's four 409s are written for a person to read -- "Wait
for the current reply to finish, then compact." -- and until now
reached nobody at all. */
if (r && r.json) {
r.json()
.then(function (body) { note(body.detail || "Could not compact.", "error"); })
.catch(function () { note("Could not compact this chat.", "error"); });
} else {
note("Could not compact this chat.", "error");
}
});
});
}
function toggle(selector, group) {
var panel = el(selector);
if (panel && window.lembas.setPanel) {
src/lembas/web/static/js/composer.js
+129 -4
View File
@@ -27,6 +27,7 @@
var menu = null;
var list = null;
var footer = null;
var open = false;
var kind = "";
var pending = null;
@@ -105,6 +106,11 @@
menu.hidden = true;
list = document.createElement("div");
menu.appendChild(list);
/* What the keys do, in the one place somebody is looking when they need to
know. Cheaper than a help sheet nobody opens. */
footer = document.createElement("div");
footer.className = "composer-menu__keys";
menu.appendChild(footer);
host.insertBefore(menu, host.firstChild);
menu.addEventListener("mousedown", function (event) {
@@ -121,6 +127,15 @@
function show() {
build();
if (!menu) return;
if (footer) {
// textContent: nothing here is markup, and one day somebody will want to
// put a filename in it.
footer.textContent = options().length
? (kind === "/"
? "↑↓ choose · Tab complete · Enter run · Esc dismiss"
: "↑↓ choose · Enter attach · Esc dismiss")
: "Esc dismiss";
}
menu.hidden = false;
open = true;
}
@@ -161,7 +176,9 @@
fetch(url, { credentials: "same-origin" })
.then(function (response) { return response.text(); })
.then(function (html) {
if (kind !== "@") return;
/* The reply is a round trip late: the caret may have moved off the
mention, or onto a slash, by the time it lands. */
if (kind !== "@" || !list) return;
list.innerHTML = html;
show();
highlight(0);
@@ -172,6 +189,14 @@
function refresh() {
var input = composer();
if (!input) return;
/* Built here, not lazily inside `show()`. It used to be, and everything
below writes to `list` *before* calling `show()` -- so the first slash or
at-sign ever typed threw on a null `list` and took the whole handler with
it. The menu never appeared, in any browser, for the entire life of the
feature. Anything that touches `list` builds first. */
build();
if (!list) return;
var token = tokenAt(input);
if (!token) return hide();
@@ -203,9 +228,30 @@
input.focus();
}
function choose(option) {
/*
`complete` is Tab, `!complete` is Enter, and the difference matters for a
command that takes an argument: Tab writes `/mode ` and leaves the caret
after it so the value can be typed, Enter runs what is there. Picking with
the mouse runs, because there is nowhere else for a click to mean.
*/
function choose(option, complete) {
if (option.dataset.command) {
if (complete) {
replaceToken(option.dataset.command);
hide();
/* Straight back, because `/mode ` is now a token with a space in it and
the menu would otherwise stay open over the argument being typed. */
return;
}
var input = composer();
hide();
/* Cleared before running. A command is the whole message, never part of
one, so leaving `/help` sitting in the box after running it means the
next Enter runs it again. */
if (input) {
input.value = "";
if (window.lembas && window.lembas.autosize) window.lembas.autosize(input);
}
runCommand(option.dataset.command, "");
return;
}
@@ -245,6 +291,59 @@
});
}
/* --- Marking the tokens as they are typed --------------------------------
Backgrounds only. The mirror's text is transparent and exists purely to
put a rectangle in the right place; the visible glyphs are still the
textarea's own. Everything here is set as textContent or built with
createElement -- what is in the box is the one string a person controls
exactly, and it must never become markup. */
function mirrorEl() {
return document.querySelector("[data-composer-mirror]");
}
/* The same rule the server applies to a sent message: `@` at the start or
after whitespace, so an email address is not a file reference. */
var MENTION = /(^|\s)(@[^\s@]+)/g;
function paint() {
var mirror = mirrorEl();
var input = composer();
if (!mirror || !input) return;
var value = input.value;
mirror.replaceChildren();
/* A command is marked only when it resolves. `/thoughts on this` is not a
command and must not look like one before it is sent -- that ambiguity
is the whole reason `//` exists. */
var rest = value;
var command = commandIn(value);
if (command) {
var head = "/" + command.name;
mirror.appendChild(token(head, "tok-command"));
rest = value.slice(head.length);
}
var last = 0;
var match;
MENTION.lastIndex = 0;
while ((match = MENTION.exec(rest)) !== null) {
mirror.appendChild(document.createTextNode(rest.slice(last, match.index) + match[1]));
mirror.appendChild(token(match[2], "tok-mention"));
last = match.index + match[0].length;
}
// A trailing newline collapses in a div; the space keeps the last line.
mirror.appendChild(document.createTextNode(rest.slice(last) + "\n"));
mirror.scrollTop = input.scrollTop;
}
function token(text, cls) {
var span = document.createElement("span");
span.className = cls;
span.textContent = text;
return span;
}
/* --- Keys --------------------------------------------------------------- */
document.addEventListener(
"keydown",
@@ -274,7 +373,7 @@
item chosen. */
event.preventDefault();
event.stopPropagation();
choose(all[active]);
choose(all[active], event.key === "Tab");
return;
}
}
@@ -298,9 +397,31 @@
);
document.addEventListener("input", function (event) {
if (event.target.closest("[data-composer-input]")) refresh();
if (!event.target.closest("[data-composer-input]")) return;
refresh();
paint();
});
/* The textarea scrolls once it hits data-max-height, and the mirror has to
go with it or the rectangles drift off the words. */
document.addEventListener(
"scroll",
function (event) {
var input = event.target;
if (!input.closest || !input.closest("[data-composer-input]")) return;
var mirror = mirrorEl();
if (mirror) mirror.scrollTop = input.scrollTop;
},
true
);
/* Sending, resetting, dictating and pasting all change the value without an
`input` event that reaches here, so the mirror is repainted after any htmx
swap and once at load. */
document.addEventListener("DOMContentLoaded", paint);
document.addEventListener("htmx:afterSwap", paint);
document.addEventListener("htmx:afterSettle", paint);
document.addEventListener("click", function (event) {
if (!event.target.closest(".composer-menu") &&
!event.target.closest("[data-composer-input]")) hide();
@@ -323,4 +444,8 @@
window.lembas = window.lembas || {};
window.lembas.closeComposerMenu = hide;
/* Anything that writes into the composer from outside -- dictation, the
terminal's Send, a slash command that clears it -- calls this so the
rectangles keep up. */
window.lembas.paintComposer = paint;
})();
src/lembas/web/static/js/terminal.js
+1
View File
@@ -373,6 +373,7 @@
if (!input) return;
input.value = input.value ? input.value.replace(/\s*$/, "\n\n") + text : text;
if (window.lembas && window.lembas.autosize) window.lembas.autosize(input);
if (window.lembas && window.lembas.paintComposer) window.lembas.paintComposer();
/* Auto-send never steals focus: it fires while somebody is typing in the
terminal, and yanking the caret out of a shell mid-command is the sort
of thing that gets a feature switched off for good. */
src/lembas/web/templates/admin/model_detail.html
+26
View File
@@ -104,6 +104,32 @@
</p>
</div>
<div class="field">
<label class="field__label" for="default-effort">Default reasoning effort</label>
<select class="select" id="default-effort" name="default_effort">
<option value="">Whatever the model does</option>
{% for value in efforts %}
<option value="{{ value }}"
{{ 'selected' if model.params_json.get('reasoning_effort') == value }}>
{{ value }}
</option>
{% endfor %}
</select>
<p class="field__hint">
Where new chats on this model start. Anyone can change it per chat with
<span class="mono">/effort</span>, and the control only appears on a
model marked <strong>Reasoning</strong> above.
<br>
Sent two ways at once, because there is no one field that works: OpenAI
and vLLM read <span class="mono">reasoning_effort</span>, while
llama.cpp drops it silently and reads only
<span class="mono">chat_template_kwargs</span> — which is the route by
which it reaches gpt-oss. Both go out, and only on a chat that has an
effort set, so an endpoint strict about unknown parameters is untouched
until somebody chooses one.
</p>
</div>
<div class="field">
<label class="field__label" for="description">Description</label>
<textarea class="textarea" id="description" name="description" rows="2"
src/lembas/web/templates/chat/_composer.html
+57 -13
View File
@@ -67,10 +67,26 @@
<input type="hidden" name="temporary" value="true">
{% endif %}
<textarea class="composer__input" name="content" rows="1"
data-autosize data-max-height="320" data-composer-input
placeholder="{% if chat %}Send a message…{% else %}Ask anything…{% endif %}"
aria-label="Message" {{ 'autofocus' if not chat }}></textarea>
{#
The text, with a mirror behind it.
A textarea cannot style its own contents, so the mirror holds the same
text with every character transparent and contributes nothing but a
rounded rectangle behind each recognised token. The real text stays in
the textarea, where it is native and selectable -- the other way round,
showing the mirror's text and hiding the textarea's, means any style
drift renders as doubled or blurred glyphs instead of a rectangle a
pixel out of place.
composer.js fills it. Without JavaScript there is simply no mirror.
#}
<div class="composer__field">
<div class="composer__mirror" data-composer-mirror aria-hidden="true"></div>
<textarea class="composer__input" name="content" rows="1"
data-autosize data-max-height="320" data-composer-input
placeholder="{% if chat %}Send a message…{% else %}Ask anything…{% endif %}"
aria-label="Message" {{ 'autofocus' if not chat }}></textarea>
</div>
<div class="composer__toolbar">
<div class="composer__tools">
@@ -160,7 +176,8 @@
</div>
<span class="composer__agent" data-agent-extra hidden>
<select class="select select--sm" name="ssh_profile_id" aria-label="Connection">
<select class="select select--sm composer__connection"
name="ssh_profile_id" aria-label="Connection">
{% for profile in agent_profiles %}
<option value="{{ profile.id }}" data-dir="{{ profile.default_dir }}"
{{ 'disabled' if not profile.verified }}>
@@ -192,15 +209,14 @@
</div>
{% elif chat and chat.kind == "agent" %}
<div class="composer__context">
<span class="composer__where" title="{{ chat.project_dir }}">
{{ icon("bolt", "icon--sm") }}
<span>{{ agent_profile.name if agent_profile else "connection missing" }}</span>
<span class="composer__where-dir">{{ chat.project_dir }}</span>
</span>
{# Only the mode. The connection and the directory moved to the topbar:
they cannot change -- update_chat refuses both with a 409 -- so they
are facts about the chat rather than controls on the message, and
they were taking a slot in a row that has work to do.
{# Its own form: nesting one inside the composer's form is invalid
HTML, and the browser drops the inner one. #}
Its own form: nesting one inside the composer's form is invalid HTML
and the browser drops the inner one. #}
<div class="composer__context">
<select class="select select--sm" name="agent_mode" aria-label="Approval mode"
form="agent-mode-form">
{% for value, label, hint in agent_modes %}
@@ -211,6 +227,30 @@
</div>
{% endif %}
{#
How hard a reasoning model should think. Outside the agent branch
above, because it applies to any chat.
Only on a model an administrator has marked as **reasoning**: that
flag has existed since the beginning with no reader at all, and
offering the control everywhere would be offering a setting that does
nothing almost everywhere. Its own form, for the reason the mode has
one -- a form cannot nest inside another.
#}
{% if chat and current_model and current_model.capabilities_json.get("reasoning") %}
<select class="select select--sm" name="reasoning_effort" data-effort
aria-label="Reasoning effort" title="How hard this model should think"
form="chat-params-form">
<option value="">Effort: default</option>
{% for value in efforts %}
<option value="{{ value }}"
{{ 'selected' if chat.params_json.get('reasoning_effort') == value }}>
Effort: {{ value }}
</option>
{% endfor %}
</select>
{% endif %}
<div class="composer__actions">
{% if can_dictate %}
{# Recording is started and stopped by the same button; audio.js swaps
@@ -254,6 +294,10 @@
<form id="agent-mode-form" hx-patch="/api/chats/{{ chat.id }}" hx-swap="none"
hx-trigger="change"></form>
{% endif %}
{% if chat %}
<form id="chat-params-form" hx-patch="/api/chats/{{ chat.id }}" hx-swap="none"
hx-trigger="change"></form>
{% endif %}
<p class="composer__hint">
Enter to send, Shift+Enter for a new line.
src/lembas/web/templates/chat/_message.html
+4 -1
View File
@@ -187,7 +187,10 @@
<p class="msg__note">{{ icon("x", "icon--sm") }} Stopped. This reply is cut short.</p>
{% endif %}
{% elif message.content %}
<div class="msg__body msg__body--plain">{{ message.content }}</div>
{# `tokens` escapes and then marks up: @mentions read as references
rather than as punctuation. It must stay `pre-wrap` -- the newlines
are still carried by CSS, not by markup. #}
<div class="msg__body msg__body--plain">{{ message.content|tokens|safe }}</div>
{% endif %}
{# An attachment-only turn has no text; rendering the bubble anyway would
leave an empty box under the file. #}
src/lembas/web/templates/chat/index.html
+19 -5
View File
@@ -35,6 +35,21 @@
{% endif %}
</h1>
{# Where this chat runs. Beside the title because it describes the chat
and cannot be changed -- update_chat refuses the connection and the
directory with a 409 -- so it is of a kind with the Temporary badge
rather than with the controls on the right. The mode is the one thing
here that moves, and it stays down by the message box. #}
{% if chat and chat.kind == "agent" %}
<span class="topbar__where" title="{{ chat.project_dir }}">
{{ icon("bolt", "icon--sm") }}
<span class="topbar__where-name">
{{ agent_profile.name if agent_profile else "connection missing" }}
</span>
<span class="topbar__where-dir">{{ chat.project_dir }}</span>
</span>
{% endif %}
<div class="topbar__actions">
{#
A link, not a script: the flag lives in the URL, so it survives a
@@ -118,12 +133,11 @@
{% endif %}
{% if messages %}
{# Runs the same code as /compact rather than posting itself. Two
implementations meant a spinner on neither and the endpoint's
error messages reaching nobody. #}
<button class="picker__option" type="button" role="menuitem"
hx-post="/api/chats/{{ chat.id }}/compact"
hx-target="#thread" hx-swap="innerHTML"
hx-confirm="Summarise everything before the last reply? The messages stay in the transcript; they just stop being sent to the model."
data-confirm-title="Compact this chat"
data-confirm-label="Compact">
onclick="window.lembasCommands &amp;&amp; window.lembasCommands.run('compact')">
{{ icon("archive", "icon--sm") }}
<span class="picker__option-body">
<span class="picker__option-name">Compact</span>
src/lembas/web/templating.py
+7
View File
@@ -12,6 +12,7 @@ from lembas import __version__
from lembas.config import settings
from lembas.db.models import User
from lembas.services import metrics as metrics_service
from lembas.services.markdown import highlight_tokens
from lembas.services.reasoning import format_duration
TEMPLATE_DIR = Path(__file__).parent / "templates"
@@ -44,6 +45,12 @@ def stable_hue(value: str) -> int:
templates.env.filters["stable_hue"] = stable_hue
# A user's own message: escaped here and marked up, so `@mentions` read as
# references rather than as punctuation. A filter rather than a context value
# because the message templates are included from four different handlers and
# every one of them would otherwise have to remember to pass it.
templates.env.filters["tokens"] = highlight_tokens
def resolve_theme(user: User | None) -> str:
"""Theme to render with on the server.