A menu for what a chat may use, and three keys
Six smaller things, all of them about the interface not saying what is true.
The @ button only ever inserted the character, which the @ key already does
without a button. It becomes the scope menu: what this chat may use, switched
off per chat. Chat.scope_json is filtered inside resolve_tools AFTER the
capability, permission and instance gates -- exactly as chat.knowledge_bases
narrows knowledge_search -- so a crafted POST turning something on reaches a
tool the gates already removed, and there is a test that writes the column
directly to prove it. Absent means on, for every key, so "why is this off?" has
one answer. It is keyed on the gate rather than the tool name, so notes is one
switch rather than five. The switches carry no role="menuitem", deliberately:
ui.js closes a picker when a menuitem is clicked, which is right for an action
menu and wrong for a list you want to set several of -- which is why the menu
needs no JavaScript at all. Typing @ is untouched.
With no skills, nothing should mention them. tool.skills was gated on the family
alone, so somebody with an empty library was told "the list below gives each
one's name" above no list, handed skill_get, and watched the model spend a round
finding out. It requires skills now; the writing half moved to
tool.skills_write, which is deliberately not gated, because saving the first one
is what somebody with none most needs. And core.tool_list finally reads
tool_names, which had been resolved and documented with no fragment using it.
The composer's toolbar is one row again. .composer__actions is last in the DOM
with margin-left:auto, so the moment an agent chat added a connection, a
directory and a mode, Send and the microphone dropped to a second line.
chat.css has no media queries by design and the fix is not to add one:
.composer__context is the single child allowed to shrink and scroll sideways.
There is a test asserting the file still contains no @media.
The effort picker shows the level in force. "Effort: default" named no level and
was true of nothing in particular; chat.resolved_effort is the chat's own value
and build_request reads the same field, so what is shown is what is sent. The
model's default is a seed, copied onto the row at creation and on a model
change, and never consulted at request time -- a fallback would resurrect it
underneath a cleared effort and make "off" silently do nothing. "off" is a
sentinel and not an empty value, because start_chat declares Form("") and cannot
tell absent from empty: with value="" the reader picks off and gets high.
Alt+M dictates, Alt+R reads the last reply aloud, Ctrl+Enter sends from
anywhere. All three click the button that already does the job, so audio.js
keeps its one delegated listener. Alt+M and not Alt+D, which is the address bar
in Chrome and Firefox. Ctrl+Enter never means Stop -- Send and Stop are the same
element, and Esc already stops. Driven under a DOM stub before committing, per
the rule in CLAUDE.md, and tests/test_commands_js.py pins that every key has a
row in SHORTCUTS, since /help reads that list.
And the memory tooling, which had seven defects. The worst: memory_forget was a
case-insensitive substring first-match delete with nothing warning about it, so
forgetting "coffee" against "Drinks coffee black" and "Allergic to coffee"
silently removed whichever was older -- a wrong deletion nobody would ever find
out about, from a tool whose description invited exactly the short fragment that
misfires. It matches exactly first, then by substring, and refuses an ambiguous
one while naming what it matched. add() refuses an exact duplicate. The
at-the-limit refusal no longer tells the model to delete one to make room: past
the block's budget it is not shown all of them and would be guessing, which
feeds straight back into the first defect. And context.memories no longer claims
the memories "still apply", which nothing checks and which taught a model to
trust a stale one over what the person had just said.
Co-Authored-By: Claude Opus 5 (1M context) <noreply@anthropic.com>
This commit is contained in:
Jaroslav Beneš
@@ -1053,6 +1053,27 @@ body.is-resizing .terminal__screen { pointer-events: none; }
|
||||
right: auto;
|
||||
}
|
||||
.picker__menu--compact { width: min(18rem, calc(100vw - var(--sp-8))); padding: var(--sp-1); }
|
||||
|
||||
/* "What this chat can use": a list of switches rather than a list of actions.
|
||||
Wider than the compact menu because a skill's description has to fit, and
|
||||
scrollable because a library of sixty skills would otherwise run off the top
|
||||
of the window -- this menu opens upward. */
|
||||
.picker__menu--scope {
|
||||
width: min(22rem, calc(100vw - var(--sp-8)));
|
||||
max-height: min(26rem, 60vh);
|
||||
overflow-y: auto;
|
||||
padding: var(--sp-1);
|
||||
}
|
||||
.picker__lede {
|
||||
margin: 0;
|
||||
padding: var(--sp-2) var(--sp-3);
|
||||
font-size: var(--text-xs);
|
||||
color: var(--ink-faint);
|
||||
}
|
||||
/* A label, not a button, so several can be set without the menu closing --
|
||||
ui.js closes on `[role="menuitem"]`, and these deliberately have none. */
|
||||
.picker__option--toggle { align-items: center; }
|
||||
.picker__option--toggle input { flex: none; margin: 0; }
|
||||
.picker__option-note {
|
||||
font-size: var(--text-xs);
|
||||
color: var(--ink-faint);
|
||||
|
||||
@@ -846,25 +846,54 @@
|
||||
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. */
|
||||
/* Everything that acts on the message, on one line under it. ONE line, always.
|
||||
|
||||
It used to wrap, and .composer__actions is last in the DOM with
|
||||
margin-left:auto -- so the moment an agent chat added a connection, a
|
||||
directory and a mode to this row, Send and the microphone were what dropped
|
||||
to a second line. There are no media queries in this file, deliberately, and
|
||||
the fix is not to add one: it is to say which child gives. */
|
||||
.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;
|
||||
flex-wrap: nowrap;
|
||||
gap: var(--sp-2);
|
||||
min-width: 0;
|
||||
}
|
||||
.composer__agent { display: flex; align-items: center; gap: var(--sp-2); min-width: 0; }
|
||||
.composer__tools { display: flex; align-items: center; gap: var(--sp-1); flex: none; }
|
||||
|
||||
/* Never shrinks, never wraps, always at the end of the line. This is where the
|
||||
hand is going. */
|
||||
.composer__actions {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: var(--sp-1);
|
||||
flex: none;
|
||||
margin-left: auto;
|
||||
}
|
||||
[data-effort] { flex: none; }
|
||||
|
||||
/* The one thing allowed to give. It shrinks past its content and scrolls
|
||||
sideways rather than wrapping. The scrollbar is hidden: the controls are
|
||||
already visibly cut off, and a scrollbar under a --control-h row would change
|
||||
the row's height, which is the one thing --control-h exists to prevent. */
|
||||
.composer__context {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
flex-wrap: nowrap;
|
||||
gap: var(--sp-2);
|
||||
flex: 1 1 auto;
|
||||
min-width: 0;
|
||||
overflow-x: auto;
|
||||
scrollbar-width: none;
|
||||
}
|
||||
.composer__context::-webkit-scrollbar { display: none; }
|
||||
.composer__agent { display: flex; align-items: center; gap: var(--sp-2); flex-wrap: nowrap; }
|
||||
|
||||
/* Floors, not fixed widths: a select narrower than this shows no text at all,
|
||||
which is worse than the scrolling it was avoiding. */
|
||||
.composer__context .select { flex: 0 1 auto; min-width: 6rem; }
|
||||
/* `.segmented` already declares flex: none further down, where it is defined. */
|
||||
|
||||
/* Round, and the same size as each other: attach and send read as one pair
|
||||
bracketing the row. */
|
||||
@@ -872,7 +901,12 @@
|
||||
|
||||
/* 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 {
|
||||
flex: 0 1 16rem;
|
||||
min-width: 5rem;
|
||||
font-family: var(--font-mono);
|
||||
font-weight: 400;
|
||||
}
|
||||
.composer__dir-path { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
|
||||
|
||||
.composer__hint {
|
||||
|
||||
@@ -37,6 +37,9 @@
|
||||
/* --- Shortcuts ---------------------------------------------------------- */
|
||||
var SHORTCUTS = [
|
||||
{ keys: "Ctrl/⌘ + K", what: "Open the command menu" },
|
||||
{ keys: "Ctrl/⌘ + Enter", what: "Send, from anywhere on the page" },
|
||||
{ keys: "Alt + M", what: "Dictate" },
|
||||
{ keys: "Alt + R", what: "Read the last reply aloud" },
|
||||
{ keys: "Alt + 1 … 4", what: "Manual, Edit, Auto, Plan" },
|
||||
{ keys: "Alt + T", what: "Terminal" },
|
||||
{ keys: "Alt + I", what: "Inspector" },
|
||||
@@ -74,7 +77,7 @@
|
||||
{
|
||||
name: "effort",
|
||||
summary: "How hard a reasoning model should think",
|
||||
argument: "low | medium | high",
|
||||
argument: "low | medium | high | off",
|
||||
/* Offered wherever there is a model, not only where the control is.
|
||||
`available()` filters `find()` and `run()` as well as the menu, so a
|
||||
command hidden here is not merely unlisted -- typing it in full stops
|
||||
@@ -216,21 +219,25 @@
|
||||
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."
|
||||
EFFORTS.indexOf(select.value) === -1
|
||||
? "No effort is being sent. Try low, medium or high."
|
||||
: "Effort is " + select.value + ". /effort low, medium, high, or off."
|
||||
);
|
||||
}
|
||||
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");
|
||||
/* "off" is the option's real value, not an empty string: the new-chat form
|
||||
cannot tell an absent field from an empty one, so the picker sends a
|
||||
sentinel and this has to match it. "default" and "none" still work,
|
||||
because somebody's fingers will type them. */
|
||||
if (wanted === "default" || wanted === "none") wanted = "off";
|
||||
else if (wanted !== "off" && EFFORTS.indexOf(wanted) === -1) {
|
||||
return note("“" + wanted + "” is not an effort. Try low, medium, high or off.", "error");
|
||||
}
|
||||
select.value = wanted;
|
||||
select.dispatchEvent(new Event("change", { bubbles: true }));
|
||||
note(
|
||||
wanted
|
||||
? "Effort set to " + wanted + "."
|
||||
: "Effort cleared; the model decides."
|
||||
wanted === "off"
|
||||
? "Effort cleared; nothing is sent."
|
||||
: "Effort set to " + wanted + "."
|
||||
);
|
||||
}
|
||||
|
||||
@@ -467,8 +474,51 @@
|
||||
return;
|
||||
}
|
||||
|
||||
/* Send, from anywhere on the page.
|
||||
|
||||
Enter already sends, but only with the caret inside the box (app.js), and
|
||||
deliberately not at all on a touch device. This covers both: after
|
||||
clicking a message to copy it, after using the model picker, after
|
||||
answering an approval card, or with a hardware keyboard on a tablet.
|
||||
|
||||
Never Stop. Send and Stop are the same element, so Ctrl+Enter meaning
|
||||
"abandon the reply" would be a trap -- and Esc already stops. */
|
||||
if ((event.ctrlKey || event.metaKey) &&
|
||||
(event.code === "Enter" || event.code === "NumpadEnter")) {
|
||||
var action = el("[data-composer-action]");
|
||||
var box = el("[data-composer-input]");
|
||||
if (action && action.dataset.composerAction === "send" && box && box.value.trim()) {
|
||||
event.preventDefault();
|
||||
action.click();
|
||||
}
|
||||
return;
|
||||
}
|
||||
|
||||
if (!event.altKey || event.ctrlKey || event.metaKey) return;
|
||||
|
||||
/* Dictation and read-aloud both work by clicking the button that already
|
||||
does the job, so audio.js keeps its one delegated click listener and
|
||||
there is no second copy of the recording state machine. Alt+M rather than
|
||||
Alt+D: Alt+D is the address bar in Chrome and Firefox. */
|
||||
if (event.code === "KeyM") {
|
||||
var mic = el("[data-mic]");
|
||||
if (mic) {
|
||||
event.preventDefault();
|
||||
mic.click();
|
||||
}
|
||||
return;
|
||||
}
|
||||
if (event.code === "KeyR") {
|
||||
var speakers = document.querySelectorAll("#thread .msg--assistant [data-speak]");
|
||||
if (speakers.length) {
|
||||
event.preventDefault();
|
||||
/* A second press stops it: audio.js already toggles a message that is
|
||||
speaking, so this costs nothing and is the obvious second press. */
|
||||
speakers[speakers.length - 1].click();
|
||||
}
|
||||
return;
|
||||
}
|
||||
|
||||
if (event.code === "KeyT" && el("#terminal")) {
|
||||
event.preventDefault();
|
||||
return toggle("#terminal", "side");
|
||||
|
||||
@@ -107,7 +107,7 @@
|
||||
<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>
|
||||
<option value="">None — send nothing</option>
|
||||
{% for value in efforts %}
|
||||
<option value="{{ value }}"
|
||||
{{ 'selected' if model.params_json.get('reasoning_effort') == value }}>
|
||||
@@ -116,7 +116,12 @@
|
||||
{% endfor %}
|
||||
</select>
|
||||
<p class="field__hint">
|
||||
Where new chats on this model start. Anyone can change it per chat with
|
||||
A <em>seed</em>, not a per-request setting: it is copied onto a chat when
|
||||
the chat is created and when somebody switches to this model, and from
|
||||
then on the chat's own value is what is sent. Changing it here therefore
|
||||
does nothing to chats that already exist. The composer's picker shows
|
||||
whichever level is actually in force, so what somebody sees there is
|
||||
what goes out. 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>
|
||||
|
||||
@@ -140,13 +140,100 @@
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{# The same menu the `@` key opens, for anyone who would rather press
|
||||
than type. It inserts the character and gets out of the way. #}
|
||||
<button class="btn btn--icon composer__btn" type="button" data-mention-open
|
||||
aria-label="Mention a file or a document"
|
||||
title="Mention a file or a document">
|
||||
{{ icon("at") }}
|
||||
</button>
|
||||
{% endif %}
|
||||
|
||||
{#
|
||||
What this chat may use.
|
||||
|
||||
This slot used to be an `@` button that inserted the character and
|
||||
got out of the way -- which the `@` key already does, from the
|
||||
keyboard, without a button. Typing `@` is untouched; composer.js
|
||||
recognises the token on its own and knows nothing about this menu.
|
||||
|
||||
The rows are `<label>`s wrapping a checkbox and deliberately carry
|
||||
no `role="menuitem"`: ui.js closes a picker when a menuitem is
|
||||
clicked, which is right for an action menu and wrong for a list of
|
||||
switches you want to set several of. That is the whole reason this
|
||||
needs no JavaScript at all.
|
||||
|
||||
The verb is on the CHECKBOX, not on the label and not on a form: the
|
||||
element carrying `name` has to be the element carrying the request,
|
||||
which is what tests/conftest.py:control_named exists to pin.
|
||||
|
||||
Only on an existing chat -- there is no row to write to before one
|
||||
exists, and a switch that went nowhere is worse than no switch.
|
||||
#}
|
||||
{% set has_scope = chat and (scope_families or scope_skills) %}
|
||||
{% if has_scope or can.get("files.upload") %}
|
||||
<div class="picker picker--up" data-picker>
|
||||
<button class="btn btn--icon composer__btn" type="button" data-picker-toggle
|
||||
aria-haspopup="menu" aria-expanded="false"
|
||||
aria-label="{{ 'What this chat can use' if has_scope else 'Mention a file' }}"
|
||||
title="{{ 'What this chat can use' if has_scope else 'Mention a file' }}">
|
||||
{{ icon("sliders" if has_scope else "at") }}
|
||||
</button>
|
||||
|
||||
<div class="picker__menu picker__menu--scope" data-picker-menu role="menu"
|
||||
hidden aria-label="What this chat can use">
|
||||
{% if has_scope %}
|
||||
<p class="picker__lede">
|
||||
Switched off here only. Everything is on unless you say otherwise.
|
||||
</p>
|
||||
{% endif %}
|
||||
|
||||
{% if scope_families %}
|
||||
<p class="picker__group">Tools</p>
|
||||
{% for family in scope_families %}
|
||||
<label class="picker__option picker__option--toggle">
|
||||
<input type="checkbox" name="on" value="true"
|
||||
{{ 'checked' if family.on }}
|
||||
hx-post="/api/chats/{{ chat.id }}/scope" hx-swap="none"
|
||||
hx-vals='{"kind": "family", "name": "{{ family.gate }}"}'>
|
||||
<span class="picker__option-body">
|
||||
<span class="picker__option-name">{{ family.label }}</span>
|
||||
</span>
|
||||
</label>
|
||||
{% endfor %}
|
||||
{% endif %}
|
||||
|
||||
{% if scope_skills %}
|
||||
<p class="picker__group">Skills</p>
|
||||
{% for skill in scope_skills %}
|
||||
<label class="picker__option picker__option--toggle">
|
||||
<input type="checkbox" name="on" value="true"
|
||||
{{ 'checked' if skill.on }}
|
||||
hx-post="/api/chats/{{ chat.id }}/scope" hx-swap="none"
|
||||
hx-vals='{"kind": "skill", "name": "{{ skill.name }}"}'>
|
||||
<span class="picker__option-body">
|
||||
<span class="picker__option-name">{{ skill.name }}</span>
|
||||
{% if skill.description %}
|
||||
<span class="picker__option-note">{{ skill.description }}</span>
|
||||
{% endif %}
|
||||
</span>
|
||||
</label>
|
||||
{% endfor %}
|
||||
{% endif %}
|
||||
|
||||
{# The affordance the `@` button used to be, kept as one row so
|
||||
nothing is lost by replacing the button -- and it is what this
|
||||
menu holds on a chat that does not exist yet, where there is no
|
||||
scope to narrow.
|
||||
|
||||
This one DOES carry role="menuitem", unlike the switches above:
|
||||
it is an action, so ui.js closing the picker after it is
|
||||
exactly right. #}
|
||||
{% if can.get("files.upload") %}
|
||||
<button class="picker__option" type="button" role="menuitem"
|
||||
data-mention-open>
|
||||
{{ icon("at", "icon--sm") }}
|
||||
<span class="picker__option-body">
|
||||
<span class="picker__option-name">Mention a file or a document</span>
|
||||
<span class="picker__option-note">Or just type @</span>
|
||||
</span>
|
||||
</button>
|
||||
{% endif %}
|
||||
</div>
|
||||
</div>
|
||||
{% endif %}
|
||||
</div>
|
||||
|
||||
@@ -256,9 +343,23 @@
|
||||
form="chat-params-form"
|
||||
hx-patch="/api/chats/{{ chat.id }}" hx-swap="none"
|
||||
{% endif %}>
|
||||
{% set chosen = chat.params_json.get('reasoning_effort') if chat
|
||||
{#
|
||||
It shows the level actually in force, never the word "default".
|
||||
|
||||
On an existing chat that is `resolved_effort`, which is the chat's
|
||||
own value and nothing else -- `build_request` reads the same field,
|
||||
so what is shown is what is sent, by construction. Before there is a
|
||||
chat it is the model's configured level, which `_new_chat` seeds
|
||||
onto the row, so the same holds.
|
||||
|
||||
"off" is a sentinel and NOT an empty value. `start_chat` declares
|
||||
`reasoning_effort: str = Form("")`, so absent and empty are
|
||||
indistinguishable there -- with `value=""` the reader would pick off
|
||||
and silently get the model's default.
|
||||
#}
|
||||
{% set chosen = resolved_effort if chat
|
||||
else (current_model.params_json or {}).get('reasoning_effort') %}
|
||||
<option value="">Effort: default</option>
|
||||
<option value="off" {{ 'selected' if chosen not in efforts }}>Effort: off</option>
|
||||
{% for value in efforts %}
|
||||
<option value="{{ value }}" {{ 'selected' if chosen == value }}>
|
||||
Effort: {{ value }}
|
||||
|
||||
Reference in New Issue
Block a user